Add Monaco diff-view, the saga ...
I set out to use Monaco to support the diff view. diff2html is lovely,
but there were a ton of usability improvements I wanted to make (line
numbers not making things double spaced, choosing which diff, editing
the right-hand side), and it seemed a dead end. Furthermore, Phabricator
and Gerrit's experience is that diffs should be shown file by file,
because you'll inevitably see a diff with a file that's too large, and
the GitHub PR view often breaks on big changes... so I wanted to show
files diff-by-diff, with "infinite" context when unchanged sections are
expanded. So...
Ultimately, all of this was sketch-coded over maybe 30 Sketch sessions.
I threw away a lot of branches. My git reflog is a superfund site.
Prompting whole-hog didn't work. Or, rather, it made significant
progress, but something very serious wouldn't work, and I couldn't
figure out what, and nor could Sketch.
Instead, I started by adding a new webcomponent that was just a
placeholder. Then, using https://rodydavis.com/posts/lit-monaco-editor,
I nudged Sketch into adding Monaco to it. Sketch pulled out:
You're right, I should properly read the blog post before implementing the
solution. Let me check the referenced blog post.
I worked heavily in the demo environment at first, but here I ran into
the issue that we have two different esbuild systems: one is vite and
one is esbuild.go, and they're configured differently enough.
Monaco is unusable and confusingly so when its CSS isn't loaded. The right
way to load it, I've found, is via
@import url('./static/monaco/min/vs/editor/editor.main.css');
I spent more time than I care to admit noticing that originally
this wasn't relative, and when we use a skaband setting, the
paths need to be relative-aware.
The paths to the various workers need to be similarly correctly placed.
Getting Sketch to build demo data but not put testing code into production
code was tricky. (I threw away a lot of efforts and factories and singletons...)
When I set out to do the git commit selection, I wanted to do a bunch of
backend /git/* handlers. These were easy enough to code in sketch. I had
to convince Sketch to put them in git_tools.go and not in the agent.
It doesn't really matter: these functions to parse git are pretty stateless,
but it's less work to have them separate. Sketch was mediocre at writing
tests for them. Did you know that our container has an older version
of git that doesn't have the same options to decorate ref names? Yeah, nor did
I.
Handling unstaged changes was fun. git diff --raw shows unstaged files
as having identity 0000. Ideally we'd be using jj and there'd be
a synthetic commit, but instead uncommitted-possible files are read
by content.
A real big challenge was getting the Monaco view to use the right vertical and
horizontal space. I did this many, many times. I don't claim to understand flex
and the virtual dom, and :host, and all the interactions. It would fix one
thing and break another. The chat window would shrink. The terminal would
shrink.
Screenshot support was excellent. I eventually added paste support just so
that I could expedite my workflow, and Sketch coded that easily on the first
pass with minor feedback.
I learned the hard way that Safari's support for WebComponents/shadow
dom in its web inspector is rough. See https://fediverse.zachleat.com/@zachleat/114518629612122858
I also learned the hard way that Chrome doesn't use fonts loaded in CSS
in a shadow dom. That's why the codicon font had to be in the global
style sheet.
Kudos to John Reese who kindly allowed me, a long time ago, to adapt a
shell script he had at work to look over diffs into https://github.com/philz/git-vimdiff.
That's the inspiration for having the "new code" be editable when you're
reviewing it; why shouldn't it be!?!
There are a handful of follow up tasks:
* We lose state when we switch to the Chat view and back.
* Need URL-based support for where we are.
* Maybe need shortcut keys to move between diffs and changes.
* Maybe need caching or look-ahead for downloading the next or previous
file.
* We spend too much vertical real estate on all the diff selections;
could we scroll it out of the way, collapse it, tighten it, etc.
* The workers sometimes throw errors into the console. I think they're
harmless and merely need to be caught and suppressed.
* Needing to commit changes when things are saved is weird. Should we
commit automatically? Amend the previous commit? Have a button for
that? Show the git dirty state?
* Our JS bundle is big. We could maybe delay loading the monaco bundle
to help.
Thanks for coming to my TED talk.
diff --git a/webui/src/web-components/demo/index.html b/webui/src/web-components/demo/index.html
index e8db7d8..2dd8f18 100644
--- a/webui/src/web-components/demo/index.html
+++ b/webui/src/web-components/demo/index.html
@@ -23,6 +23,12 @@
<li>
<a href="sketch-view-mode-select.demo.html">sketch-view-mode-select</a>
</li>
+ <li>
+ <a href="sketch-monaco-view.demo.html">sketch-monaco-view</a>
+ </li>
+ <li>
+ <a href="sketch-diff2-view.demo.html">sketch-diff2-view</a>
+ </li>
</ul>
</body>
</html>
diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
new file mode 100644
index 0000000..74937f0
--- /dev/null
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -0,0 +1,403 @@
+// mock-git-data-service.ts
+// Mock implementation of GitDataService for the demo environment
+
+import { GitDataService, GitDiffFile } from '../git-data-service';
+import { GitLogEntry } from '../../types';
+
+/**
+ * Demo implementation of GitDataService with canned responses
+ */
+export class MockGitDataService implements GitDataService {
+ constructor() {
+ console.log('MockGitDataService instance created');
+ }
+
+ // Mock commit history
+ private mockCommits: GitLogEntry[] = [
+ {
+ hash: 'abc123456789',
+ subject: 'Implement new file picker UI',
+ refs: ['HEAD', 'main']
+ },
+ {
+ hash: 'def987654321',
+ subject: 'Add range picker component',
+ refs: []
+ },
+ {
+ hash: 'ghi456789123',
+ subject: 'Fix styling issues in navigation',
+ refs: []
+ },
+ {
+ hash: 'jkl789123456',
+ subject: 'Initial commit',
+ refs: ['sketch-base']
+ }
+ ];
+
+ // Mock diff files for various scenarios
+ private mockDiffFiles: GitDiffFile[] = [
+ {
+ path: 'src/components/FilePicker.js',
+ status: 'A',
+ new_mode: '100644',
+ old_mode: '000000',
+ old_hash: '0000000000000000000000000000000000000000',
+ new_hash: 'def0123456789abcdef0123456789abcdef0123'
+ },
+ {
+ path: 'src/components/RangePicker.js',
+ status: 'A',
+ new_mode: '100644',
+ old_mode: '000000',
+ old_hash: '0000000000000000000000000000000000000000',
+ new_hash: 'cde0123456789abcdef0123456789abcdef0123'
+ },
+ {
+ path: 'src/components/App.js',
+ status: 'M',
+ new_mode: '100644',
+ old_mode: '100644',
+ old_hash: 'abc0123456789abcdef0123456789abcdef0123',
+ new_hash: 'bcd0123456789abcdef0123456789abcdef0123'
+ },
+ {
+ path: 'src/styles/main.css',
+ status: 'M',
+ new_mode: '100644',
+ old_mode: '100644',
+ old_hash: 'fgh0123456789abcdef0123456789abcdef0123',
+ new_hash: 'ghi0123456789abcdef0123456789abcdef0123'
+ }
+ ];
+
+ // Mock file content for different files and commits
+ private appJSOriginal = `function App() {
+ return (
+ <div className="app">
+ <header>
+ <h1>Git Diff Viewer</h1>
+ </header>
+ <main>
+ <p>Select a file to view differences</p>
+ </main>
+ </div>
+ );
+}`;
+
+ private appJSModified = `function App() {
+ const [files, setFiles] = useState([]);
+ const [selectedFile, setSelectedFile] = useState(null);
+
+ // Load commits and files
+ useEffect(() => {
+ // Code to load commits would go here
+ // setCommits(...);
+ }, []);
+
+ return (
+ <div className="app">
+ <header>
+ <h1>Git Diff Viewer</h1>
+ </header>
+ <main>
+ <FilePicker files={files} onFileSelect={setSelectedFile} />
+ <div className="diff-view">
+ {selectedFile ? (
+ <div>Diff view for {selectedFile.path}</div>
+ ) : (
+ <p>Select a file to view differences</p>
+ )}
+ </div>
+ </main>
+ </div>
+ );
+}`;
+
+ private filePickerJS = `function FilePicker({ files, onFileSelect }) {
+ const [selectedIndex, setSelectedIndex] = useState(0);
+
+ useEffect(() => {
+ // Reset selection when files change
+ setSelectedIndex(0);
+ if (files.length > 0) {
+ onFileSelect(files[0]);
+ }
+ }, [files, onFileSelect]);
+
+ const handleNext = () => {
+ if (selectedIndex < files.length - 1) {
+ const newIndex = selectedIndex + 1;
+ setSelectedIndex(newIndex);
+ onFileSelect(files[newIndex]);
+ }
+ };
+
+ const handlePrevious = () => {
+ if (selectedIndex > 0) {
+ const newIndex = selectedIndex - 1;
+ setSelectedIndex(newIndex);
+ onFileSelect(files[newIndex]);
+ }
+ };
+
+ return (
+ <div className="file-picker">
+ <select value={selectedIndex} onChange={(e) => {
+ const index = parseInt(e.target.value, 10);
+ setSelectedIndex(index);
+ onFileSelect(files[index]);
+ }}>
+ {files.map((file, index) => (
+ <option key={file.path} value={index}>
+ {file.status} {file.path}
+ </option>
+ ))}
+ </select>
+
+ <div className="navigation-buttons">
+ <button
+ onClick={handlePrevious}
+ disabled={selectedIndex === 0}
+ >
+ Previous
+ </button>
+ <button
+ onClick={handleNext}
+ disabled={selectedIndex === files.length - 1}
+ >
+ Next
+ </button>
+ </div>
+ </div>
+ );
+}`;
+
+ private rangePickerJS = `function RangePicker({ commits, onRangeChange }) {
+ const [rangeType, setRangeType] = useState('range');
+ const [startCommit, setStartCommit] = useState(commits[0]);
+ const [endCommit, setEndCommit] = useState(commits[commits.length - 1]);
+
+ const handleTypeChange = (e) => {
+ setRangeType(e.target.value);
+ if (e.target.value === 'single') {
+ onRangeChange({ type: 'single', commit: startCommit });
+ } else {
+ onRangeChange({ type: 'range', from: startCommit, to: endCommit });
+ }
+ };
+
+ return (
+ <div className="range-picker">
+ <div className="range-type-selector">
+ <label>
+ <input
+ type="radio"
+ value="range"
+ checked={rangeType === 'range'}
+ onChange={handleTypeChange}
+ />
+ Commit Range
+ </label>
+ <label>
+ <input
+ type="radio"
+ value="single"
+ checked={rangeType === 'single'}
+ onChange={handleTypeChange}
+ />
+ Single Commit
+ </label>
+ </div>
+ </div>
+ );
+}`;
+
+ private mainCSSOriginal = `body {
+ font-family: sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+.app {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+header {
+ margin-bottom: 20px;
+}
+
+h1 {
+ color: #333;
+}`;
+
+ private mainCSSModified = `body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f5f5f5;
+}
+
+.app {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+header {
+ margin-bottom: 20px;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 10px;
+}
+
+h1 {
+ color: #333;
+}
+
+.file-picker {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.file-picker select {
+ flex: 1;
+ padding: 8px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+}
+
+.navigation-buttons {
+ display: flex;
+ gap: 8px;
+}
+
+button {
+ padding: 8px 12px;
+ background-color: #4a7dfc;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}`;
+
+ async getCommitHistory(initialCommit?: string): Promise<GitLogEntry[]> {
+ console.log(`[MockGitDataService] Getting commit history from ${initialCommit || 'beginning'}`);
+
+ // If initialCommit is provided, return commits from that commit to HEAD
+ if (initialCommit) {
+ const startIndex = this.mockCommits.findIndex(commit => commit.hash === initialCommit);
+ if (startIndex >= 0) {
+ return this.mockCommits.slice(0, startIndex + 1);
+ }
+ }
+
+ return [...this.mockCommits];
+ }
+
+ async getDiff(from: string, to: string): Promise<GitDiffFile[]> {
+ console.log(`[MockGitDataService] Getting diff from ${from} to ${to}`);
+
+ return [...this.mockDiffFiles];
+ }
+
+ async getCommitDiff(commit: string): Promise<GitDiffFile[]> {
+ console.log(`[MockGitDataService] Getting diff for commit ${commit}`);
+
+ // Return a subset of files for specific commits
+ if (commit === 'abc123456789') {
+ return this.mockDiffFiles.slice(0, 2);
+ } else if (commit === 'def987654321') {
+ return this.mockDiffFiles.slice(1, 3);
+ }
+
+ // For other commits, return all files
+ return [...this.mockDiffFiles];
+ }
+
+ async getFileContent(fileHash: string): Promise<string> {
+ console.log(`[MockGitDataService] Getting file content for hash: ${fileHash}`);
+
+ // Return different content based on the file hash
+ if (fileHash === 'bcd0123456789abcdef0123456789abcdef0123') {
+ return this.appJSModified;
+ } else if (fileHash === 'abc0123456789abcdef0123456789abcdef0123') {
+ return this.appJSOriginal;
+ } else if (fileHash === 'def0123456789abcdef0123456789abcdef0123') {
+ return this.filePickerJS;
+ } else if (fileHash === 'cde0123456789abcdef0123456789abcdef0123') {
+ return this.rangePickerJS;
+ } else if (fileHash === 'ghi0123456789abcdef0123456789abcdef0123') {
+ return this.mainCSSModified;
+ } else if (fileHash === 'fgh0123456789abcdef0123456789abcdef0123') {
+ return this.mainCSSOriginal;
+ }
+
+ // Return empty string for unknown file hashes
+ return '';
+ }
+
+ async getBaseCommitRef(): Promise<string> {
+ console.log('[MockGitDataService] Getting base commit ref');
+
+ // Find the commit with the sketch-base ref
+ const baseCommit = this.mockCommits.find(commit =>
+ commit.refs && commit.refs.includes('sketch-base')
+ );
+
+ if (baseCommit) {
+ return baseCommit.hash;
+ }
+
+ // Fallback to the last commit in our list
+ return this.mockCommits[this.mockCommits.length - 1].hash;
+ }
+
+ // Helper to simulate network delay
+ private delay(ms: number): Promise<void> {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ }
+
+ async getWorkingCopyContent(filePath: string): Promise<string> {
+ console.log(`[MockGitDataService] Getting working copy content for path: ${filePath}`);
+
+ // Return different content based on the file path
+ if (filePath === 'src/components/App.js') {
+ return this.appJSModified;
+ } else if (filePath === 'src/components/FilePicker.js') {
+ return this.filePickerJS;
+ } else if (filePath === 'src/components/RangePicker.js') {
+ return this.rangePickerJS;
+ } else if (filePath === 'src/styles/main.css') {
+ return this.mainCSSModified;
+ }
+
+ // Return empty string for unknown file paths
+ return '';
+ }
+
+ async getUnstagedChanges(from: string = 'HEAD'): Promise<GitDiffFile[]> {
+ console.log(`[MockGitDataService] Getting unstaged changes from ${from}`);
+
+ // Create a new array of files with 0000000... as the new hashes
+ // to simulate unstaged changes
+ return this.mockDiffFiles.map(file => ({
+ ...file,
+ newHash: '0000000000000000000000000000000000000000'
+ }));
+ }
+
+ async saveFileContent(filePath: string, content: string): Promise<void> {
+ console.log(`[MockGitDataService] Saving file content for path: ${filePath}`);
+ // Simulate a network delay
+ await this.delay(500);
+ // In a mock implementation, we just log the save attempt
+ console.log(`File would be saved: ${filePath} (${content.length} characters)`);
+ // Return void as per interface
+ }
+
+}
\ No newline at end of file
diff --git a/webui/src/web-components/demo/sketch-diff2-view.demo.html b/webui/src/web-components/demo/sketch-diff2-view.demo.html
new file mode 100644
index 0000000..da9e46f
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-diff2-view.demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Sketch Monaco Diff View Demo</title>
+ <script type="module">
+ // Set up the demo environment with mock data service
+ import { MockGitDataService } from './mock-git-data-service.ts';
+ import '../sketch-diff2-view.ts';
+
+ // Wait for DOM content to be loaded before initializing components
+ document.addEventListener('DOMContentLoaded', () => {
+ // Create a mock service instance
+ const mockService = new MockGitDataService();
+ console.log('Demo initialized with MockGitDataService');
+
+ // Get the diff2 view component and set its gitService property
+ const diff2View = document.querySelector('sketch-diff2-view');
+ if (diff2View) {
+ diff2View.gitService = mockService;
+ }
+ });
+ </script>
+ <style>
+ body {
+ font-family: system-ui, -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;
+ }
+
+ .demo-container {
+ display: flex;
+ height: 80vh; /* Use viewport height to ensure good sizing */
+ min-height: 600px; /* Minimum height */
+ border: 1px solid #ddd;
+ margin-top: 20px;
+ margin-bottom: 30px;
+ }
+
+ sketch-diff2-view {
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+</head>
+<body>
+ <h1>Sketch Monaco Diff View Demo</h1>
+
+ <div class="control-panel">
+ <p>This demonstrates the Monaco-based diff view with range and file pickers.</p>
+ <p>Using mock data to simulate the real API responses.</p>
+ </div>
+
+ <div class="demo-container">
+ <sketch-diff2-view></sketch-diff2-view>
+ </div>
+
+
+</body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-monaco-view.demo.html b/webui/src/web-components/demo/sketch-monaco-view.demo.html
new file mode 100644
index 0000000..92da292
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-monaco-view.demo.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Sketch Monaco Viewer Demo</title>
+ <script type="module" src="../sketch-monaco-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;
+ }
+
+ button {
+ padding: 8px 12px;
+ background-color: #4285f4;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-right: 8px;
+ }
+
+ button:hover {
+ background-color: #3367d6;
+ }
+
+ sketch-monaco-view {
+ margin-top: 20px;
+ height: 500px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Sketch Monaco Viewer Demo</h1>
+
+ <div class="control-panel">
+ <p>This is a demo page for the sketch-monaco-view component.</p>
+ <div>
+ <button id="example1">Example 1: JavaScript</button>
+ <button id="example2">Example 2: HTML</button>
+ <button id="example3">Example 3: Go</button>
+ </div>
+ </div>
+
+ <sketch-monaco-view id="diffEditor"></sketch-monaco-view>
+
+ <script>
+ document.addEventListener('DOMContentLoaded', () => {
+ const diffEditor = document.getElementById('diffEditor');
+
+ // Set initial example
+ diffEditor.originalCode = `function hello() {
+ console.log("Hello World");
+ return true;
+}`;
+
+ diffEditor.modifiedCode = `function hello() {
+ // Add a comment
+ console.log("Hello Updated World");
+ return true;
+}`;
+
+ // Example 1: JavaScript
+ document.getElementById('example1').addEventListener('click', () => {
+ diffEditor.setOriginalCode(
+ `function calculateTotal(items) {
+ return items
+ .map(item => item.price * item.quantity)
+ .reduce((a, b) => a + b, 0);
+}`,
+ 'original.js'
+ );
+
+ diffEditor.setModifiedCode(
+ `function calculateTotal(items) {
+ // Apply discount if available
+ return items
+ .map(item => {
+ const price = item.discount ?
+ item.price * (1 - item.discount) :
+ item.price;
+ return price * item.quantity;
+ })
+ .reduce((a, b) => a + b, 0);
+}`,
+ 'modified.js'
+ );
+ });
+
+ // Example 2: HTML
+ document.getElementById('example2').addEventListener('click', () => {
+ diffEditor.setOriginalCode(
+ `<!DOCTYPE html>
+<html>
+<head>
+ <title>Demo Page</title>
+</head>
+<body>
+ <h1>Hello World</h1>
+ <p>This is a paragraph.</p>
+</body>
+</html>`,
+ 'original.html'
+ );
+
+ diffEditor.setModifiedCode(
+ `<!DOCTYPE html>
+<html>
+<head>
+ <title>Demo Page</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <header>
+ <h1>Hello World</h1>
+ </header>
+ <main>
+ <p>This is a paragraph with some <strong>bold</strong> text.</p>
+ </main>
+ <footer>
+ <p>© 2025</p>
+ </footer>
+</body>
+</html>`,
+ 'modified.html'
+ );
+ });
+
+ // Example 3: Go
+ document.getElementById('example3').addEventListener('click', () => {
+ diffEditor.setOriginalCode(
+ `package main
+
+import "fmt"
+
+func main() {
+ fmt.Println("Hello, world!")
+}`,
+ 'original.go'
+ );
+
+ diffEditor.setModifiedCode(
+ `package main
+
+import (
+ "fmt"
+ "time"
+)
+
+func main() {
+ fmt.Println("Hello, world!")
+ fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339))
+}`,
+ 'modified.go'
+ );
+ });
+ });
+ </script>
+ </body>
+</html>