webui: remove unused diff2html-based diff view
Remove the old diff view implementation that used diff2html library
in favor of the Monaco-based diff2 view. This cleanup removes:
- sketch-diff-view.ts component that used diff2html library
- diff2html static CSS files (diff2html.min.css, diff2.css)
- diff2html npm package dependency from package.json
- Old diff view mode references throughout the codebase
- Demo files for the old diff view component
Changes include:
1. Removed Files:
- webui/src/web-components/sketch-diff-view.ts
- webui/src/diff2html.min.css
- webui/src/diff2.css
- webui/src/web-components/demo/sketch-diff-view.demo.html
2. Updated Components:
- sketch-app-shell.ts: Remove old diff view import, ViewMode type,
CSS selectors, and view switching logic
- sketch-view-mode-select.ts: Update type definitions to remove 'diff' mode
- sketch-terminal.ts: Fix view mode type and correct CSS loading comments
3. Package Management:
- Removed diff2html 3.4.51 dependency from package.json
- Updated package-lock.json to reflect removed dependency
4. Demo Cleanup:
- Removed reference to old diff view demo from index.html
- Updated timeline demo to remove diff2html from dependencies list
The Monaco-based diff2 view (sketch-diff2-view.ts) remains fully
functional and is now the only diff view implementation. All file
picker, range picker, and empty view components continue to work
with the new diff view.
Testing confirms the diff functionality works correctly after cleanup.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s22dd1dc722d02125k
diff --git a/webui/src/web-components/demo/index.html b/webui/src/web-components/demo/index.html
index 2dd8f18..cc5697e 100644
--- a/webui/src/web-components/demo/index.html
+++ b/webui/src/web-components/demo/index.html
@@ -7,7 +7,7 @@
<ul>
<li><a href="sketch-app-shell.demo.html">sketch-app-shell</a></li>
<li><a href="sketch-chat-input.demo.html">sketch-chat-input</a></li>
- <li><a href="sketch-diff-view.demo.html">sketch-diff-view</a></li>
+
<li>
<a href="sketch-container-status.demo.html">sketch-container-status</a>
</li>
diff --git a/webui/src/web-components/demo/sketch-diff-view.demo.html b/webui/src/web-components/demo/sketch-diff-view.demo.html
deleted file mode 100644
index 6ab6e62..0000000
--- a/webui/src/web-components/demo/sketch-diff-view.demo.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Sketch Diff Viewer Demo</title>
- <link
- rel="stylesheet"
- href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
- />
- <script type="module" src="../sketch-diff-view.ts"></script>
- <style>
- body {
- font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
- Arial, sans-serif;
- max-width: 1200px;
- margin: 0 auto;
- padding: 2rem;
- }
-
- h1 {
- color: #333;
- margin-bottom: 2rem;
- }
-
- .control-panel {
- margin-bottom: 2rem;
- padding: 1rem;
- background-color: #f0f0f0;
- border-radius: 4px;
- }
-
- input {
- padding: 0.5rem;
- border-radius: 4px;
- border: 1px solid #ccc;
- width: 300px;
- }
-
- button {
- padding: 0.5rem 1rem;
- background-color: #2196f3;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- margin-left: 1rem;
- }
-
- button:hover {
- background-color: #0d8bf2;
- }
- </style>
-
- <script>
- document.addEventListener("DOMContentLoaded", () => {
- const diffViewer = document.getElementById("diffViewer");
- const commitHashInput = document.getElementById("commitHash");
- const viewDiffButton = document.getElementById("viewDiff");
- let commit = false;
- viewDiffButton.addEventListener("click", () => {
- let diffContent = `diff --git a/sample.txt b/sample.txt
-index 1111111..2222222 100644
---- a/sample.txt
-+++ b/sample.txt
-@@ -1,5 +1,5 @@
- This is a sample file
--This line will be removed
-+This line is added as a replacement
- This line stays the same
--Another line to remove
-+A completely new line
- The last line is unchanged`;
- if (commit) {
- // For demo purposes, generate fake diff based on commit hash
- diffContent = `diff --git a/file-${commit.substring(0, 5)}.txt b/file-${commit.substring(0, 5)}.txt
-index 3333333..4444444 100644
---- a/file-${commit.substring(0, 5)}.txt
-+++ b/file-${commit.substring(0, 5)}.txt
-@@ -1,4 +1,6 @@
- File with commit: ${commit}
-+This line was added in commit ${commit}
- This line exists in both versions
--This line was removed in commit ${commit}
-+This line replaced the removed line
-+Another new line added in this commit
- Last line of the file`;
- }
- diffViewer.diffText = diffContent;
- diffViewer.commitHash = commitHashInput.value.trim();
- });
- });
- </script>
- </head>
- <body>
- <h1>Sketch Diff Viewer Demo</h1>
-
- <div class="control-panel">
- <label for="commitHash"
- >Commit Hash (leave empty for unstaged changes):</label
- >
- <input type="text" id="commitHash" placeholder="Enter commit hash" />
- <button id="viewDiff">View Diff</button>
- </div>
-
- <sketch-diff-view id="diffViewer"></sketch-diff-view>
- </body>
-</html>
diff --git a/webui/src/web-components/demo/sketch-timeline.demo.html b/webui/src/web-components/demo/sketch-timeline.demo.html
index b535fa1..3314ed2 100644
--- a/webui/src/web-components/demo/sketch-timeline.demo.html
+++ b/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -105,7 +105,7 @@
tool_call_id: "call_longoutput",
args: '{"command": "cat /app/webui/package.json | grep -A 5 dependencies"}',
result:
- ' "dependencies": {\n "@xterm/addon-fit": "^0.10.0",\n "@xterm/xterm": "^5.5.0",\n "diff2html": "3.4.51",\n "lit": "^3.2.1",\n "marked": "^15.0.7",\n "mermaid": "^11.6.0",\n "sanitize-html": "^2.15.0",\n "vega": "^5.33.0",\n "vega-embed": "^6.29.0",\n "vega-lite": "^5.23.0",\n "react": "^18.2.0",\n "react-dom": "^18.2.0",\n "styled-components": "^6.1.8",\n "tailwindcss": "^3.4.1",\n "typescript": "^5.3.3",\n "zod": "^3.22.4",\n "@types/react": "^18.2.55",\n "@types/react-dom": "^18.2.19",\n "eslint": "^8.56.0",\n "prettier": "^3.2.5"\n },',
+ ' "dependencies": {\n "@xterm/addon-fit": "^0.10.0",\n "@xterm/xterm": "^5.5.0",\n "lit": "^3.2.1",\n "marked": "^15.0.7",\n "mermaid": "^11.6.0",\n "sanitize-html": "^2.15.0",\n "vega": "^5.33.0",\n "vega-embed": "^6.29.0",\n "vega-lite": "^5.23.0",\n "react": "^18.2.0",\n "react-dom": "^18.2.0",\n "styled-components": "^6.1.8",\n "tailwindcss": "^3.4.1",\n "typescript": "^5.3.3",\n "zod": "^3.22.4",\n "@types/react": "^18.2.55",\n "@types/react-dom": "^18.2.19",\n "eslint": "^8.56.0",\n "prettier": "^3.2.5"\n },',
},
],
},