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>
diff --git a/webui/src/web-components/git-data-service.ts b/webui/src/web-components/git-data-service.ts
new file mode 100644
index 0000000..c22b851
--- /dev/null
+++ b/webui/src/web-components/git-data-service.ts
@@ -0,0 +1,220 @@
+// git-data-service.ts
+// Interface and implementation for fetching Git data
+
+import { DiffFile, GitLogEntry } from '../types';
+
+// Re-export DiffFile as GitDiffFile
+export type GitDiffFile = DiffFile;
+
+/**
+ * Interface for Git data services
+ */
+export interface GitDataService {
+ /**
+ * Fetches recent commit history
+ * @param initialCommit The initial commit hash to start from
+ * @returns List of commits
+ */
+ getCommitHistory(initialCommit?: string): Promise<GitLogEntry[]>;
+
+ /**
+ * Fetches diff between two commits
+ * @param from Starting commit hash
+ * @param to Ending commit hash (can be empty string for unstaged changes)
+ * @returns List of changed files
+ */
+ getDiff(from: string, to: string): Promise<GitDiffFile[]>;
+
+ /**
+ * Fetches diff for a single commit
+ * @param commit Commit hash
+ * @returns List of changed files
+ */
+ getCommitDiff(commit: string): Promise<GitDiffFile[]>;
+
+ /**
+ * Fetches file content from git using a file hash
+ * @param fileHash Git blob hash of the file to fetch
+ * @returns File content as string
+ */
+ getFileContent(fileHash: string): Promise<string>;
+
+ /**
+ * Gets file content from the current working directory
+ * @param filePath Path to the file within the repository
+ * @returns File content as string
+ */
+ getWorkingCopyContent(filePath: string): Promise<string>;
+
+ /**
+ * Saves file content to the working directory
+ * @param filePath Path to the file within the repository
+ * @param content New content to save to the file
+ */
+ saveFileContent(filePath: string, content: string): Promise<void>;
+
+ /**
+ * Gets the base commit reference (often "sketch-base")
+ * @returns Base commit reference
+ */
+ getBaseCommitRef(): Promise<string>;
+
+ /**
+ * Fetches unstaged changes (diff between a commit and working directory)
+ * @param from Starting commit hash (defaults to HEAD if not specified)
+ * @returns List of changed files
+ */
+ getUnstagedChanges(from?: string): Promise<GitDiffFile[]>;
+}
+
+/**
+ * Default implementation of GitDataService for the real application
+ */
+export class DefaultGitDataService implements GitDataService {
+ private baseCommitRef: string | null = null;
+
+ async getCommitHistory(initialCommit?: string): Promise<GitLogEntry[]> {
+ try {
+ const url = initialCommit
+ ? `git/recentlog?initialCommit=${encodeURIComponent(initialCommit)}`
+ : 'git/recentlog';
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch commit history: ${response.statusText}`);
+ }
+
+ return await response.json();
+ } catch (error) {
+ console.error('Error fetching commit history:', error);
+ throw error;
+ }
+ }
+
+ async getDiff(from: string, to: string): Promise<GitDiffFile[]> {
+ try {
+ const url = `git/rawdiff?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`;
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch diff: ${response.statusText}`);
+ }
+
+ return await response.json();
+ } catch (error) {
+ console.error('Error fetching diff:', error);
+ throw error;
+ }
+ }
+
+ async getCommitDiff(commit: string): Promise<GitDiffFile[]> {
+ try {
+ const url = `git/rawdiff?commit=${encodeURIComponent(commit)}`;
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch commit diff: ${response.statusText}`);
+ }
+
+ return await response.json();
+ } catch (error) {
+ console.error('Error fetching commit diff:', error);
+ throw error;
+ }
+ }
+
+ async getFileContent(fileHash: string): Promise<string> {
+ try {
+ // If the hash is marked as a working copy (special value '000000' or empty)
+ if (fileHash === '0000000000000000000000000000000000000000' || !fileHash) {
+ // This shouldn't happen, but if it does, return empty string
+ // Working copy content should be fetched through getWorkingCopyContent
+ console.warn('Invalid file hash for getFileContent, returning empty string');
+ return '';
+ }
+
+ const url = `git/show?hash=${encodeURIComponent(fileHash)}`;
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch file content: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ return data.output || '';
+ } catch (error) {
+ console.error('Error fetching file content:', error);
+ throw error;
+ }
+ }
+
+ async getWorkingCopyContent(filePath: string): Promise<string> {
+ try {
+ const url = `git/cat?path=${encodeURIComponent(filePath)}`;
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch working copy content: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ return data.output || '';
+ } catch (error) {
+ console.error('Error fetching working copy content:', error);
+ throw error;
+ }
+ }
+
+ async saveFileContent(filePath: string, content: string): Promise<void> {
+ try {
+ const url = `git/save`;
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ path: filePath,
+ content: content
+ }),
+ });
+
+ if (!response.ok) {
+ const errorText = await response.text();
+ throw new Error(`Failed to save file content: ${response.statusText} - ${errorText}`);
+ }
+
+ // Don't need to return the response, just ensure it was successful
+ } catch (error) {
+ console.error('Error saving file content:', error);
+ throw error;
+ }
+ }
+
+ async getUnstagedChanges(from: string = 'HEAD'): Promise<GitDiffFile[]> {
+ try {
+ // To get unstaged changes, we diff the specified commit (or HEAD) with an empty 'to'
+ return await this.getDiff(from, '');
+ } catch (error) {
+ console.error('Error fetching unstaged changes:', error);
+ throw error;
+ }
+ }
+
+ async getBaseCommitRef(): Promise<string> {
+ // Cache the base commit reference to avoid multiple requests
+ if (this.baseCommitRef) {
+ return this.baseCommitRef;
+ }
+
+ try {
+ // This could be replaced with a specific endpoint call if available
+ // For now, we'll use a fixed value or try to get it from the server
+ this.baseCommitRef = 'sketch-base';
+ return this.baseCommitRef;
+ } catch (error) {
+ console.error('Error fetching base commit reference:', error);
+ throw error;
+ }
+ }
+}
\ No newline at end of file
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 7436671..aebabd9 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1,13 +1,17 @@
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { ConnectionStatus, DataManager } from "../data";
-import { AgentMessage, GitCommit, State } from "../types";
+import { AgentMessage, GitLogEntry, State } from "../types";
import { aggregateAgentMessages } from "./aggregateAgentMessages";
import "./sketch-chat-input";
import "./sketch-container-status";
import "./sketch-diff-view";
import { SketchDiffView } from "./sketch-diff-view";
+import "./sketch-diff2-view";
+import { SketchDiff2View } from "./sketch-diff2-view";
+import { DefaultGitDataService } from "./git-data-service";
+import "./sketch-monaco-view";
import "./sketch-network-status";
import "./sketch-call-status";
import "./sketch-terminal";
@@ -18,13 +22,13 @@
import { createRef, ref } from "lit/directives/ref.js";
import { SketchChatInput } from "./sketch-chat-input";
-type ViewMode = "chat" | "diff" | "terminal";
+type ViewMode = "chat" | "diff" | "diff2" | "terminal";
@customElement("sketch-app-shell")
export class SketchAppShell extends LitElement {
// Current view mode (chat, diff, terminal)
@state()
- viewMode: "chat" | "diff" | "terminal" = "chat";
+ viewMode: ViewMode = "chat";
// Current commit hash for diff view
@state()
@@ -119,14 +123,21 @@
align-self: stretch;
overflow-y: auto;
flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0; /* Critical for proper flex child behavior */
}
#view-container-inner {
max-width: 1200px;
+ width: calc(100% - 40px);
margin: 0 auto;
position: relative;
padding-bottom: 10px;
padding-top: 10px;
+ display: flex;
+ flex-direction: column;
+ height: 100%; /* Ensure it takes full height of parent */
}
#chat-input {
@@ -157,18 +168,44 @@
text-overflow: ellipsis;
}
- /* Allow the container to expand to full width in diff mode */
- #view-container-inner.diff-active {
+ /* Allow the container to expand to full width and height in diff mode */
+ #view-container-inner.diff-active,
+ #view-container-inner.diff2-active {
max-width: 100%;
width: 100%;
+ height: 100%;
+ padding: 0; /* Remove padding for more space */
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0; /* Critical for flex behavior */
}
/* Individual view styles */
.chat-view,
.diff-view,
+ .diff2-view,
.terminal-view {
display: none; /* Hidden by default */
width: 100%;
+ height: 100%;
+ }
+
+ /* Make chat view take full width available */
+ .chat-view.view-active {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ /* Monaco diff2 view needs to take all available space */
+ .diff2-view.view-active {
+ flex: 1;
+ overflow: hidden;
+ min-height: 0; /* Required for proper flex child behavior */
+ display: flex;
+ flex-direction: column;
+ height: 100%;
}
/* Active view styles - these will be applied via JavaScript */
@@ -472,7 +509,7 @@
}
}
- updateUrlForViewMode(mode: "chat" | "diff" | "terminal"): void {
+ updateUrlForViewMode(mode: ViewMode): void {
// Get the current URL without search parameters
const url = new URL(window.location.href);
@@ -508,7 +545,7 @@
* Handle view mode selection event
*/
private _handleViewModeSelect(event: CustomEvent) {
- const mode = event.detail.mode as "chat" | "diff" | "terminal";
+ const mode = event.detail.mode as "chat" | "diff" | "diff2" | "terminal";
this.toggleViewMode(mode, true);
}
@@ -526,6 +563,11 @@
window.console.log("_handleMultipleChoice", event);
this._sendChat;
}
+
+ private _handleDiffComment(event: CustomEvent) {
+ // Empty stub required by the event binding in the template
+ // Actual handling occurs at global level in sketch-chat-input component
+ }
/**
* Listen for commit diff event
* @param commitHash The commit hash to show diff for
@@ -534,16 +576,12 @@
// Store the commit hash
this.currentCommitHash = commitHash;
- // Switch to diff view
- this.toggleViewMode("diff", true);
+ this.toggleViewMode("diff2", true);
- // Wait for DOM update to complete
this.updateComplete.then(() => {
- // Get the diff view component
- const diffView = this.shadowRoot?.querySelector("sketch-diff-view");
- if (diffView) {
- // Call the showCommitDiff method
- (diffView as any).showCommitDiff(commitHash);
+ const diff2View = this.shadowRoot?.querySelector("sketch-diff2-view");
+ if (diff2View) {
+ (diff2View as SketchDiff2View).refreshDiffView();
}
});
}
@@ -571,19 +609,25 @@
);
const chatView = this.shadowRoot?.querySelector(".chat-view");
const diffView = this.shadowRoot?.querySelector(".diff-view");
-
+ const diff2View = this.shadowRoot?.querySelector(".diff2-view");
const terminalView = this.shadowRoot?.querySelector(".terminal-view");
// Remove active class from all views
chatView?.classList.remove("view-active");
diffView?.classList.remove("view-active");
+ diff2View?.classList.remove("view-active");
terminalView?.classList.remove("view-active");
// Add/remove diff-active class on view container
if (mode === "diff") {
viewContainerInner?.classList.add("diff-active");
+ viewContainerInner?.classList.remove("diff2-active");
+ } else if (mode === "diff2") {
+ viewContainerInner?.classList.add("diff2-active");
+ viewContainerInner?.classList.remove("diff-active");
} else {
viewContainerInner?.classList.remove("diff-active");
+ viewContainerInner?.classList.remove("diff2-active");
}
// Add active class to the selected view
@@ -602,6 +646,16 @@
(diffViewComp as any).loadDiffContent();
}
break;
+
+ case "diff2":
+ diff2View?.classList.add("view-active");
+ // Refresh git/recentlog when Monaco diff view is opened
+ // This ensures branch information is always up-to-date, as branches can change frequently
+ const diff2ViewComp = this.shadowRoot?.querySelector("sketch-diff2-view");
+ if (diff2ViewComp) {
+ (diff2ViewComp as SketchDiff2View).refreshDiffView();
+ }
+ break;
case "terminal":
terminalView?.classList.add("view-active");
@@ -997,6 +1051,16 @@
.commitHash=${this.currentCommitHash}
></sketch-diff-view>
</div>
+
+ <div
+ class="diff2-view ${this.viewMode === "diff2" ? "view-active" : ""}"
+ >
+ <sketch-diff2-view
+ .commit=${this.currentCommitHash}
+ .gitService=${new DefaultGitDataService()}
+ @diff-comment="${this._handleDiffComment}"
+ ></sketch-diff2-view>
+ </div>
<div
class="terminal-view ${this.viewMode === "terminal"
@@ -1005,6 +1069,7 @@
>
<sketch-terminal></sketch-terminal>
</div>
+
</div>
</div>
diff --git a/webui/src/web-components/sketch-diff-empty-view.ts b/webui/src/web-components/sketch-diff-empty-view.ts
new file mode 100644
index 0000000..ecee534
--- /dev/null
+++ b/webui/src/web-components/sketch-diff-empty-view.ts
@@ -0,0 +1,79 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+/**
+ * A component that displays helpful information when the diff view is empty
+ */
+@customElement("sketch-diff-empty-view")
+export class SketchDiffEmptyView extends LitElement {
+ static styles = css`
+ :host {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .empty-diff-box {
+ margin: 2rem auto;
+ max-width: 1200px;
+ width: 90%;
+ padding: 2rem;
+ border: 2px solid #e0e0e0;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+ background-color: #ffffff;
+ text-align: center;
+ }
+
+ .empty-diff-title {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 1.5rem;
+ text-align: center;
+ color: #333;
+ }
+
+ .empty-diff-content {
+ color: #666;
+ line-height: 1.6;
+ font-size: 1rem;
+ text-align: left;
+ margin-bottom: 1rem;
+ }
+
+ strong {
+ font-weight: 600;
+ color: #333;
+ }
+ `;
+
+ render() {
+ return html`
+ <div class="empty-diff-box">
+ <h2 class="empty-diff-title">How to use the Diff View</h2>
+
+ <p class="empty-diff-content">
+ By default, the diff view shows differences between when you started Sketch (the "sketch-base" tag) and the current state. Choose a commit to look at, or, a range of commits, and navigate across files.
+ </p>
+
+ <p class="empty-diff-content">
+ You can select text to leave comments on the code. These will be added to your chat window, and you can click Send to send them along to the agent, which will respond in the chat window.
+ </p>
+
+ <p class="empty-diff-content">
+ If the range includes <strong>Uncommitted Changes</strong>, you can <strong>edit</strong> the text as well, and it auto-saves. If you want to clear up a comment or write your own text, just go ahead and do it! Once you're done, though, be sure to commit your changes, either by asking the agent to do so or in the Terminal view.
+ </p>
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-diff-empty-view": SketchDiffEmptyView;
+ }
+}
diff --git a/webui/src/web-components/sketch-diff-file-picker.ts b/webui/src/web-components/sketch-diff-file-picker.ts
new file mode 100644
index 0000000..c7978ee
--- /dev/null
+++ b/webui/src/web-components/sketch-diff-file-picker.ts
@@ -0,0 +1,322 @@
+// sketch-diff-file-picker.ts
+// Component for selecting files from a diff
+
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { GitDiffFile } from "./git-data-service";
+
+/**
+ * Component for selecting files from a diff with next/previous navigation
+ */
+@customElement("sketch-diff-file-picker")
+export class SketchDiffFilePicker extends LitElement {
+ @property({ type: Array })
+ files: GitDiffFile[] = [];
+
+ @property({ type: String })
+ selectedPath: string = "";
+
+ @state()
+ private selectedIndex: number = -1;
+
+ static styles = css`
+ :host {
+ display: block;
+ width: 100%;
+ font-family: var(--font-family, system-ui, sans-serif);
+ }
+
+ .file-picker {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ background-color: var(--background-light, #f8f8f8);
+ border-radius: 4px;
+ border: 1px solid var(--border-color, #e0e0e0);
+ padding: 8px 12px;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .file-select {
+ flex: 1;
+ min-width: 200px;
+ max-width: calc(100% - 230px); /* Leave space for the navigation buttons and file info */
+ overflow: hidden;
+ }
+
+ select {
+ width: 100%;
+ max-width: 100%;
+ padding: 8px 12px;
+ border-radius: 4px;
+ border: 1px solid var(--border-color, #e0e0e0);
+ background-color: white;
+ font-size: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .navigation-buttons {
+ display: flex;
+ gap: 8px;
+ }
+
+ button {
+ padding: 8px 12px;
+ background-color: var(--button-bg, #4a7dfc);
+ color: var(--button-text, white);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.2s;
+ }
+
+ button:hover {
+ background-color: var(--button-hover, #3a6eee);
+ }
+
+ button:disabled {
+ background-color: var(--button-disabled, #cccccc);
+ cursor: not-allowed;
+ }
+
+ .file-info {
+ font-size: 14px;
+ color: var(--text-muted, #666);
+ margin-left: 8px;
+ white-space: nowrap;
+ }
+
+ .no-files {
+ color: var(--text-muted, #666);
+ font-style: italic;
+ }
+
+ @media (max-width: 768px) {
+ .file-picker {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .file-select {
+ max-width: 100%; /* Full width on small screens */
+ margin-bottom: 8px;
+ }
+
+ .navigation-buttons {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .file-info {
+ margin-left: 0;
+ margin-top: 8px;
+ text-align: center;
+ }
+ }
+ `;
+
+ updated(changedProperties: Map<string, any>) {
+ // If files changed, reset the selection
+ if (changedProperties.has('files')) {
+ this.updateSelectedIndex();
+ }
+
+ // If selectedPath changed externally, update the index
+ if (changedProperties.has('selectedPath')) {
+ this.updateSelectedIndex();
+ }
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ // Initialize the selection when the component is connected, but only if files exist
+ if (this.files && this.files.length > 0) {
+ this.updateSelectedIndex();
+
+ // Explicitly trigger file selection event for the first file when there's only one file
+ // This ensures the diff view is updated even when navigation buttons aren't clicked
+ if (this.files.length === 1) {
+ this.selectFileByIndex(0);
+ }
+ }
+ }
+
+ render() {
+ if (!this.files || this.files.length === 0) {
+ return html`<div class="no-files">No files to display</div>`;
+ }
+
+ return html`
+ <div class="file-picker">
+ <div class="file-select">
+ <select @change=${this.handleSelect}>
+ ${this.files.map(
+ (file, index) => html`
+ <option
+ value=${index}
+ ?selected=${index === this.selectedIndex}
+ >
+ ${this.formatFileOption(file)}
+ </option>
+ `
+ )}
+ </select>
+ </div>
+
+ <div class="navigation-buttons">
+ <button
+ @click=${this.handlePrevious}
+ ?disabled=${this.selectedIndex <= 0}
+ >
+ Previous
+ </button>
+ <button
+ @click=${this.handleNext}
+ ?disabled=${this.selectedIndex >= this.files.length - 1}
+ >
+ Next
+ </button>
+ </div>
+
+ ${this.selectedIndex >= 0 ? this.renderFileInfo() : ''}
+ </div>
+ `;
+ }
+
+ renderFileInfo() {
+ const file = this.files[this.selectedIndex];
+ return html`
+ <div class="file-info">
+ ${this.getFileStatusName(file.status)} |
+ ${this.selectedIndex + 1} of ${this.files.length}
+ </div>
+ `;
+ }
+
+ /**
+ * Format a file for display in the dropdown
+ */
+ formatFileOption(file: GitDiffFile): string {
+ const statusSymbol = this.getFileStatusSymbol(file.status);
+ return `${statusSymbol} ${file.path}`;
+ }
+
+ /**
+ * Get a short symbol for the file status
+ */
+ getFileStatusSymbol(status: string): string {
+ switch (status.toUpperCase()) {
+ case 'A': return '+';
+ case 'M': return 'M';
+ case 'D': return '-';
+ case 'R': return 'R';
+ default: return '?';
+ }
+ }
+
+ /**
+ * Get a descriptive name for the file status
+ */
+ getFileStatusName(status: string): string {
+ switch (status.toUpperCase()) {
+ case 'A': return 'Added';
+ case 'M': return 'Modified';
+ case 'D': return 'Deleted';
+ case 'R': return 'Renamed';
+ default: return 'Unknown';
+ }
+ }
+
+ /**
+ * Handle file selection from dropdown
+ */
+ handleSelect(event: Event) {
+ const select = event.target as HTMLSelectElement;
+ const index = parseInt(select.value, 10);
+ this.selectFileByIndex(index);
+ }
+
+ /**
+ * Handle previous button click
+ */
+ handlePrevious() {
+ if (this.selectedIndex > 0) {
+ this.selectFileByIndex(this.selectedIndex - 1);
+ }
+ }
+
+ /**
+ * Handle next button click
+ */
+ handleNext() {
+ if (this.selectedIndex < this.files.length - 1) {
+ this.selectFileByIndex(this.selectedIndex + 1);
+ }
+ }
+
+ /**
+ * Select a file by index and dispatch event
+ */
+ selectFileByIndex(index: number) {
+ if (index >= 0 && index < this.files.length) {
+ this.selectedIndex = index;
+ this.selectedPath = this.files[index].path;
+
+ const event = new CustomEvent('file-selected', {
+ detail: { file: this.files[index] },
+ bubbles: true,
+ composed: true
+ });
+
+ this.dispatchEvent(event);
+ }
+ }
+
+ /**
+ * Update the selected index based on the selectedPath
+ */
+ private updateSelectedIndex() {
+ // Add defensive check for files array
+ if (!this.files || this.files.length === 0) {
+ this.selectedIndex = -1;
+ return;
+ }
+
+ if (this.selectedPath) {
+ // Find the file with the matching path
+ const index = this.files.findIndex(file => file.path === this.selectedPath);
+ if (index >= 0) {
+ this.selectedIndex = index;
+ return;
+ }
+ }
+
+ // Default to first file if no match or no path
+ this.selectedIndex = 0;
+ const newSelectedPath = this.files[0].path;
+
+ // Only dispatch event if the path has actually changed and files exist
+ if (this.selectedPath !== newSelectedPath && this.files && this.files.length > 0) {
+ this.selectedPath = newSelectedPath;
+
+ // Dispatch the event directly - we've already checked the files array
+ const event = new CustomEvent('file-selected', {
+ detail: { file: this.files[0] },
+ bubbles: true,
+ composed: true
+ });
+
+ this.dispatchEvent(event);
+ }
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-diff-file-picker": SketchDiffFilePicker;
+ }
+}
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
new file mode 100644
index 0000000..9893875
--- /dev/null
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -0,0 +1,373 @@
+// sketch-diff-range-picker.ts
+// Component for selecting commit range for diffs
+
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { GitDataService, DefaultGitDataService } from "./git-data-service";
+import { GitLogEntry } from "../types";
+
+/**
+ * Range type for diff views
+ */
+export type DiffRange =
+ | { type: 'range'; from: string; to: string }
+ | { type: 'single'; commit: string };
+
+/**
+ * Component for selecting commit range for diffs
+ */
+@customElement("sketch-diff-range-picker")
+export class SketchDiffRangePicker extends LitElement {
+ @property({ type: Array })
+ commits: GitLogEntry[] = [];
+
+ @state()
+ private rangeType: 'range' | 'single' = 'range';
+
+ @state()
+ private fromCommit: string = '';
+
+ @state()
+ private toCommit: string = '';
+
+ @state()
+ private singleCommit: string = '';
+
+ @state()
+ private loading: boolean = true;
+
+ @state()
+ private error: string | null = null;
+
+ @property({ attribute: false, type: Object })
+ gitService!: GitDataService;
+
+ constructor() {
+ super();
+ console.log('SketchDiffRangePicker initialized');
+ }
+
+ static styles = css`
+ :host {
+ display: block;
+ width: 100%;
+ font-family: var(--font-family, system-ui, sans-serif);
+ color: var(--text-color, #333);
+ }
+
+ .range-picker {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+ padding: 12px;
+ background-color: var(--background-light, #f8f8f8);
+ border-radius: 4px;
+ border: 1px solid var(--border-color, #e0e0e0);
+ flex-wrap: wrap; /* Allow wrapping on small screens */
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .range-type-selector {
+ display: flex;
+ gap: 16px;
+ flex-shrink: 0;
+ }
+
+ .range-type-option {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ white-space: nowrap;
+ }
+
+ .commit-selectors {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+ flex-wrap: wrap; /* Allow wrapping on small screens */
+ }
+
+ .commit-selector {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex: 1;
+ min-width: 200px;
+ max-width: calc(50% - 12px); /* Half width minus half the gap */
+ overflow: hidden;
+ }
+
+ select {
+ padding: 6px 8px;
+ border-radius: 4px;
+ border: 1px solid var(--border-color, #e0e0e0);
+ background-color: var(--background, #fff);
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ label {
+ font-weight: 500;
+ font-size: 14px;
+ }
+
+ .loading {
+ font-style: italic;
+ color: var(--text-muted, #666);
+ }
+
+ .error {
+ color: var(--error-color, #dc3545);
+ font-size: 14px;
+ }
+
+ @media (max-width: 768px) {
+ .commit-selector {
+ max-width: 100%;
+ }
+ }
+ `;
+
+ connectedCallback() {
+ super.connectedCallback();
+ // Wait for DOM to be fully loaded to ensure proper initialization order
+ if (document.readyState === 'complete') {
+ this.loadCommits();
+ } else {
+ window.addEventListener('load', () => {
+ setTimeout(() => this.loadCommits(), 0); // Give time for provider initialization
+ });
+ }
+ }
+
+ render() {
+ return html`
+ <div class="range-picker">
+ ${this.loading
+ ? html`<div class="loading">Loading commits...</div>`
+ : this.error
+ ? html`<div class="error">${this.error}</div>`
+ : this.renderRangePicker()
+ }
+ </div>
+ `;
+ }
+
+ renderRangePicker() {
+ return html`
+ <div class="range-type-selector">
+ <label class="range-type-option">
+ <input
+ type="radio"
+ name="rangeType"
+ value="range"
+ ?checked=${this.rangeType === 'range'}
+ @change=${() => this.setRangeType('range')}
+ />
+ Commit Range
+ </label>
+ <label class="range-type-option">
+ <input
+ type="radio"
+ name="rangeType"
+ value="single"
+ ?checked=${this.rangeType === 'single'}
+ @change=${() => this.setRangeType('single')}
+ />
+ Single Commit
+ </label>
+ </div>
+
+ <div class="commit-selectors">
+ ${this.rangeType === 'range'
+ ? this.renderRangeSelectors()
+ : this.renderSingleSelector()
+ }
+ </div>
+ `;
+ }
+
+ renderRangeSelectors() {
+ return html`
+ <div class="commit-selector">
+ <label for="fromCommit">From:</label>
+ <select
+ id="fromCommit"
+ .value=${this.fromCommit}
+ @change=${this.handleFromChange}
+ >
+ ${this.commits.map(
+ commit => html`
+ <option value=${commit.hash} ?selected=${commit.hash === this.fromCommit}>
+ ${this.formatCommitOption(commit)}
+ </option>
+ `
+ )}
+ </select>
+ </div>
+ <div class="commit-selector">
+ <label for="toCommit">To:</label>
+ <select
+ id="toCommit"
+ .value=${this.toCommit}
+ @change=${this.handleToChange}
+ >
+ <option value="" ?selected=${this.toCommit === ''}>Uncommitted Changes</option>
+ ${this.commits.map(
+ commit => html`
+ <option value=${commit.hash} ?selected=${commit.hash === this.toCommit}>
+ ${this.formatCommitOption(commit)}
+ </option>
+ `
+ )}
+ </select>
+ </div>
+ `;
+ }
+
+ renderSingleSelector() {
+ return html`
+ <div class="commit-selector">
+ <label for="singleCommit">Commit:</label>
+ <select
+ id="singleCommit"
+ .value=${this.singleCommit}
+ @change=${this.handleSingleChange}
+ >
+ ${this.commits.map(
+ commit => html`
+ <option value=${commit.hash} ?selected=${commit.hash === this.singleCommit}>
+ ${this.formatCommitOption(commit)}
+ </option>
+ `
+ )}
+ </select>
+ </div>
+ `;
+ }
+
+ /**
+ * Format a commit for display in the dropdown
+ */
+ formatCommitOption(commit: GitLogEntry): string {
+ const shortHash = commit.hash.substring(0, 7);
+ let label = `${shortHash} ${commit.subject}`;
+
+ if (commit.refs && commit.refs.length > 0) {
+ label += ` (${commit.refs.join(', ')})`;
+ }
+
+ return label;
+ }
+
+ /**
+ * Load commits from the Git data service
+ */
+ async loadCommits() {
+ this.loading = true;
+ this.error = null;
+
+ if (!this.gitService) {
+ console.error('GitService was not provided to sketch-diff-range-picker');
+ throw Error();
+ }
+
+ try {
+ // Get the base commit reference
+ const baseCommitRef = await this.gitService.getBaseCommitRef();
+
+ // Load commit history
+ this.commits = await this.gitService.getCommitHistory(baseCommitRef);
+
+ // Set default selections
+ if (this.commits.length > 0) {
+ // For range, default is base to HEAD
+ // TODO: is sketch-base right in the unsafe context, where it's sketch-base-...
+ // should this be startswith?
+ const baseCommit = this.commits.find(c =>
+ c.refs && c.refs.some(ref => ref.includes('sketch-base'))
+ );
+
+ this.fromCommit = baseCommit ? baseCommit.hash : this.commits[this.commits.length - 1].hash;
+ // Default to Uncommitted Changes by setting toCommit to empty string
+ this.toCommit = ''; // Empty string represents uncommitted changes
+
+ // For single, default to HEAD
+ this.singleCommit = this.commits[0].hash;
+
+ // Dispatch initial range event
+ this.dispatchRangeEvent();
+ }
+ } catch (error) {
+ console.error('Error loading commits:', error);
+ this.error = `Error loading commits: ${error.message}`;
+ } finally {
+ this.loading = false;
+ }
+ }
+
+ /**
+ * Handle range type change
+ */
+ setRangeType(type: 'range' | 'single') {
+ this.rangeType = type;
+ this.dispatchRangeEvent();
+ }
+
+ /**
+ * Handle From commit change
+ */
+ handleFromChange(event: Event) {
+ const select = event.target as HTMLSelectElement;
+ this.fromCommit = select.value;
+ this.dispatchRangeEvent();
+ }
+
+ /**
+ * Handle To commit change
+ */
+ handleToChange(event: Event) {
+ const select = event.target as HTMLSelectElement;
+ this.toCommit = select.value;
+ this.dispatchRangeEvent();
+ }
+
+ /**
+ * Handle Single commit change
+ */
+ handleSingleChange(event: Event) {
+ const select = event.target as HTMLSelectElement;
+ this.singleCommit = select.value;
+ this.dispatchRangeEvent();
+ }
+
+ /**
+ * Dispatch range change event
+ */
+ dispatchRangeEvent() {
+ const range: DiffRange = this.rangeType === 'range'
+ ? { type: 'range', from: this.fromCommit, to: this.toCommit }
+ : { type: 'single', commit: this.singleCommit };
+
+ const event = new CustomEvent('range-change', {
+ detail: { range },
+ bubbles: true,
+ composed: true
+ });
+
+ this.dispatchEvent(event);
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-diff-range-picker": SketchDiffRangePicker;
+ }
+}
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
new file mode 100644
index 0000000..5ac7459
--- /dev/null
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -0,0 +1,536 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "./sketch-monaco-view";
+import "./sketch-diff-range-picker";
+import "./sketch-diff-file-picker";
+import "./sketch-diff-empty-view";
+import { GitDiffFile, GitDataService, DefaultGitDataService } from "./git-data-service";
+import { DiffRange } from "./sketch-diff-range-picker";
+
+/**
+ * A component that displays diffs using Monaco editor with range and file pickers
+ */
+@customElement("sketch-diff2-view")
+export class SketchDiff2View extends LitElement {
+ /**
+ * Handles comment events from the Monaco editor and forwards them to the chat input
+ * using the same event format as the original diff view for consistency.
+ */
+ private handleMonacoComment(event: CustomEvent) {
+ try {
+ // Validate incoming data
+ if (!event.detail || !event.detail.formattedComment) {
+ console.error('Invalid comment data received');
+ return;
+ }
+
+ // Create and dispatch event using the standardized format
+ const commentEvent = new CustomEvent('diff-comment', {
+ detail: { comment: event.detail.formattedComment },
+ bubbles: true,
+ composed: true
+ });
+
+ this.dispatchEvent(commentEvent);
+ } catch (error) {
+ console.error('Error handling Monaco comment:', error);
+ }
+ }
+
+ /**
+ * Handle save events from the Monaco editor
+ */
+ private async handleMonacoSave(event: CustomEvent) {
+ try {
+ // Validate incoming data
+ if (!event.detail || !event.detail.path || event.detail.content === undefined) {
+ console.error('Invalid save data received');
+ return;
+ }
+
+ const { path, content } = event.detail;
+
+ // Get Monaco view component
+ const monacoView = this.shadowRoot?.querySelector('sketch-monaco-view');
+ if (!monacoView) {
+ console.error('Monaco view not found');
+ return;
+ }
+
+ try {
+ await this.gitService?.saveFileContent(path, content);
+ console.log(`File saved: ${path}`);
+ (monacoView as any).notifySaveComplete(true);
+ } catch (error) {
+ console.error(`Error saving file: ${error instanceof Error ? error.message : String(error)}`);
+ (monacoView as any).notifySaveComplete(false);
+ }
+ } catch (error) {
+ console.error('Error handling save:', error);
+ }
+ }
+ @property({ type: String })
+ initialCommit: string = "";
+
+ // The commit to show - used when showing a specific commit from timeline
+ @property({ type: String })
+ commit: string = "";
+
+ @property({ type: String })
+ selectedFilePath: string = "";
+
+ @state()
+ private files: GitDiffFile[] = [];
+
+ @state()
+ private currentRange: DiffRange = { type: 'range', from: '', to: 'HEAD' };
+
+ @state()
+ private originalCode: string = "";
+
+ @state()
+ private modifiedCode: string = "";
+
+ @state()
+ private isRightEditable: boolean = false;
+
+ @state()
+ private loading: boolean = false;
+
+ @state()
+ private error: string | null = null;
+
+ static styles = css`
+ :host {
+ display: flex;
+ height: 100%;
+ flex: 1;
+ flex-direction: column;
+ min-height: 0; /* Critical for flex child behavior */
+ overflow: hidden;
+ position: relative; /* Establish positioning context */
+ }
+
+ .controls {
+ padding: 8px 16px;
+ border-bottom: 1px solid var(--border-color, #e0e0e0);
+ background-color: var(--background-light, #f8f8f8);
+ flex-shrink: 0; /* Prevent controls from shrinking */
+ }
+
+ .controls-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .range-row {
+ width: 100%;
+ display: flex;
+ }
+
+ .file-row {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ }
+
+ sketch-diff-range-picker {
+ width: 100%;
+ }
+
+ sketch-diff-file-picker {
+ flex: 1;
+ }
+
+ .view-toggle-button {
+ background-color: #f0f0f0;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 6px 12px;
+ font-size: 12px;
+ cursor: pointer;
+ white-space: nowrap;
+ transition: background-color 0.2s;
+ }
+
+ .view-toggle-button:hover {
+ background-color: #e0e0e0;
+ }
+
+ .diff-container {
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ min-height: 0; /* Critical for flex child to respect parent height */
+ position: relative; /* Establish positioning context */
+ height: 100%; /* Take full height */
+ }
+
+ .diff-content {
+ flex: 1;
+ overflow: hidden;
+ min-height: 0; /* Required for proper flex behavior */
+ display: flex; /* Required for child to take full height */
+ position: relative; /* Establish positioning context */
+ height: 100%; /* Take full height */
+ }
+
+ .loading, .empty-diff {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ font-family: var(--font-family, system-ui, sans-serif);
+ }
+
+ .empty-diff {
+ color: var(--text-secondary-color, #666);
+ font-size: 16px;
+ text-align: center;
+ }
+
+ .error {
+ color: var(--error-color, #dc3545);
+ padding: 16px;
+ font-family: var(--font-family, system-ui, sans-serif);
+ }
+
+ sketch-monaco-view {
+ --editor-width: 100%;
+ --editor-height: 100%;
+ flex: 1; /* Make Monaco view take full height */
+ display: flex; /* Required for child to take full height */
+ position: absolute; /* Absolute positioning to take full space */
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 100%; /* Take full height */
+ width: 100%; /* Take full width */
+ }
+ `;
+
+ @property({ attribute: false, type: Object })
+ gitService!: GitDataService;
+
+ // The gitService must be passed from parent to ensure proper dependency injection
+
+ constructor() {
+ super();
+ console.log('SketchDiff2View initialized');
+
+ // Fix for monaco-aria-container positioning
+ // Add a global style to ensure proper positioning of aria containers
+ const styleElement = document.createElement('style');
+ styleElement.textContent = `
+ .monaco-aria-container {
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
+ width: 1px !important;
+ height: 1px !important;
+ overflow: hidden !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ white-space: nowrap !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ border: 0 !important;
+ z-index: -1 !important;
+ }
+ `;
+ document.head.appendChild(styleElement);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ // Initialize with default range and load data
+ // Get base commit if not set
+ if (this.currentRange.type === 'range' && !('from' in this.currentRange && this.currentRange.from)) {
+ this.gitService.getBaseCommitRef().then(baseRef => {
+ this.currentRange = { type: 'range', from: baseRef, to: 'HEAD' };
+ this.loadDiffData();
+ }).catch(error => {
+ console.error('Error getting base commit ref:', error);
+ // Use default range
+ this.loadDiffData();
+ });
+ } else {
+ this.loadDiffData();
+ }
+ }
+
+ // Toggle hideUnchangedRegions setting
+ @state()
+ private hideUnchangedRegionsEnabled: boolean = true;
+
+ // Toggle hideUnchangedRegions setting
+ private toggleHideUnchangedRegions() {
+ this.hideUnchangedRegionsEnabled = !this.hideUnchangedRegionsEnabled;
+
+ // Get the Monaco view component
+ const monacoView = this.shadowRoot?.querySelector('sketch-monaco-view');
+ if (monacoView) {
+ (monacoView as any).toggleHideUnchangedRegions(this.hideUnchangedRegionsEnabled);
+ }
+ }
+
+ render() {
+ return html`
+ <div class="controls">
+ <div class="controls-container">
+ <div class="range-row">
+ <sketch-diff-range-picker
+ .gitService="${this.gitService}"
+ @range-change="${this.handleRangeChange}"
+ ></sketch-diff-range-picker>
+ </div>
+
+ <div class="file-row">
+ <sketch-diff-file-picker
+ .files="${this.files}"
+ .selectedPath="${this.selectedFilePath}"
+ @file-selected="${this.handleFileSelected}"
+ ></sketch-diff-file-picker>
+
+ <div style="display: flex; gap: 8px;">
+ ${this.isRightEditable ? html`
+ <div class="editable-indicator" title="This file is editable">
+ <span style="padding: 6px 12px; background-color: #e9ecef; border-radius: 4px; font-size: 12px; color: #495057;">
+ Editable
+ </span>
+ </div>
+ ` : ''}
+ <button
+ class="view-toggle-button"
+ @click="${this.toggleHideUnchangedRegions}"
+ title="${this.hideUnchangedRegionsEnabled ? 'Expand All' : 'Hide Unchanged'}"
+ >
+ ${this.hideUnchangedRegionsEnabled ? 'Expand All' : 'Hide Unchanged'}
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="diff-container">
+ <div class="diff-content">
+ ${this.renderDiffContent()}
+ </div>
+ </div>
+ `;
+ }
+
+ renderDiffContent() {
+ if (this.loading) {
+ return html`<div class="loading">Loading diff...</div>`;
+ }
+
+ if (this.error) {
+ return html`<div class="error">${this.error}</div>`;
+ }
+
+ if (this.files.length === 0) {
+ return html`<sketch-diff-empty-view></sketch-diff-empty-view>`;
+ }
+
+ if (!this.selectedFilePath) {
+ return html`<div class="loading">Select a file to view diff</div>`;
+ }
+
+ return html`
+ <sketch-monaco-view
+ .originalCode="${this.originalCode}"
+ .modifiedCode="${this.modifiedCode}"
+ .originalFilename="${this.selectedFilePath}"
+ .modifiedFilename="${this.selectedFilePath}"
+ ?readOnly="${!this.isRightEditable}"
+ ?editable-right="${this.isRightEditable}"
+ @monaco-comment="${this.handleMonacoComment}"
+ @monaco-save="${this.handleMonacoSave}"
+ ></sketch-monaco-view>
+ `;
+ }
+
+ /**
+ * Load diff data for the current range
+ */
+ async loadDiffData() {
+ this.loading = true;
+ this.error = null;
+
+ try {
+ // Initialize files as empty array if undefined
+ if (!this.files) {
+ this.files = [];
+ }
+
+ // Load diff data based on the current range type
+ if (this.currentRange.type === 'single') {
+ this.files = await this.gitService.getCommitDiff(this.currentRange.commit);
+ } else {
+ this.files = await this.gitService.getDiff(this.currentRange.from, this.currentRange.to);
+ }
+
+ // Ensure files is always an array, even when API returns null
+ if (!this.files) {
+ this.files = [];
+ }
+
+ // If we have files, select the first one and load its content
+ if (this.files.length > 0) {
+ const firstFile = this.files[0];
+ this.selectedFilePath = firstFile.path;
+
+ // Directly load the file content, especially important when there's only one file
+ // as sometimes the file-selected event might not fire in that case
+ this.loadFileContent(firstFile);
+ } else {
+ // No files to display - reset the view to initial state
+ this.selectedFilePath = '';
+ this.originalCode = '';
+ this.modifiedCode = '';
+ }
+ } catch (error) {
+ console.error('Error loading diff data:', error);
+ this.error = `Error loading diff data: ${error.message}`;
+ // Ensure files is an empty array when an error occurs
+ this.files = [];
+ // Reset the view to initial state
+ this.selectedFilePath = '';
+ this.originalCode = '';
+ this.modifiedCode = '';
+ } finally {
+ this.loading = false;
+ }
+ }
+
+ /**
+ * Load the content of the selected file
+ */
+ async loadFileContent(file: GitDiffFile) {
+ this.loading = true;
+ this.error = null;
+
+ try {
+ let fromCommit: string;
+ let toCommit: string;
+ let isUnstagedChanges = false;
+
+ // Determine the commits to compare based on the current range
+ if (this.currentRange.type === 'single') {
+ fromCommit = `${this.currentRange.commit}^`;
+ toCommit = this.currentRange.commit;
+ } else {
+ fromCommit = this.currentRange.from;
+ toCommit = this.currentRange.to;
+ // Check if this is an unstaged changes view
+ isUnstagedChanges = toCommit === '';
+ }
+
+ // Set editability based on whether we're showing uncommitted changes
+ this.isRightEditable = isUnstagedChanges;
+
+ // Load the original code based on file status
+ if (file.status === 'A') {
+ // Added file: empty original
+ this.originalCode = '';
+ } else {
+ // For modified, renamed, or deleted files: load original content
+ this.originalCode = await this.gitService.getFileContent(file.old_hash || '');
+ }
+
+ // For modified code, always use working copy when editable
+ if (this.isRightEditable) {
+ try {
+ // Always use working copy when editable, regardless of diff status
+ // This ensures we have the latest content even if the diff hasn't been refreshed
+ this.modifiedCode = await this.gitService.getWorkingCopyContent(file.path);
+ } catch (error) {
+ if (file.status === 'D') {
+ // For deleted files, silently use empty content
+ console.warn(`Could not get working copy for deleted file ${file.path}, using empty content`);
+ this.modifiedCode = '';
+ } else {
+ // For any other file status, propagate the error
+ console.error(`Failed to get working copy for ${file.path}:`, error);
+ throw error; // Rethrow to be caught by the outer try/catch
+ }
+ }
+ } else {
+ // For non-editable view, use git content based on file status
+ if (file.status === 'D') {
+ // Deleted file: empty modified
+ this.modifiedCode = '';
+ } else {
+ // Added/modified/renamed: use the content from git
+ this.modifiedCode = await this.gitService.getFileContent(file.new_hash || '');
+ }
+ }
+
+ // Don't make deleted files editable
+ if (file.status === 'D') {
+ this.isRightEditable = false;
+ }
+ } catch (error) {
+ console.error('Error loading file content:', error);
+ this.error = `Error loading file content: ${error.message}`;
+ this.isRightEditable = false;
+ } finally {
+ this.loading = false;
+ }
+ }
+
+ /**
+ * Handle range change event from the range picker
+ */
+ handleRangeChange(event: CustomEvent) {
+ const { range } = event.detail;
+ console.log('Range changed:', range);
+ this.currentRange = range;
+
+ // Load diff data for the new range
+ this.loadDiffData();
+ }
+
+ /**
+ * Handle file selection event from the file picker
+ */
+ handleFileSelected(event: CustomEvent) {
+ const file = event.detail.file as GitDiffFile;
+ this.selectedFilePath = file.path;
+ this.loadFileContent(file);
+ }
+
+ /**
+ * Refresh the diff view by reloading commits and diff data
+ *
+ * This is called when the Monaco diff tab is activated to ensure:
+ * 1. Branch information from git/recentlog is current (branches can change frequently)
+ * 2. The diff content is synchronized with the latest repository state
+ * 3. Users always see up-to-date information without manual refresh
+ */
+ refreshDiffView() {
+ // First refresh the range picker to get updated branch information
+ const rangePicker = this.shadowRoot?.querySelector('sketch-diff-range-picker');
+ if (rangePicker) {
+ (rangePicker as any).loadCommits();
+ }
+
+ if (this.commit) {
+ this.currentRange = { type: 'single', commit: this.commit };
+ }
+
+ // Then reload diff data based on the current range
+ this.loadDiffData();
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-diff2-view": SketchDiff2View;
+ }
+}
diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
new file mode 100644
index 0000000..590ec5e
--- /dev/null
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -0,0 +1,1121 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, Ref, ref } from "lit/directives/ref.js";
+
+// See https://rodydavis.com/posts/lit-monaco-editor for some ideas.
+
+import * as monaco from "monaco-editor";
+
+// Configure Monaco to use local workers with correct relative paths
+
+// Define Monaco CSS styles as a string constant
+const monacoStyles = `
+ /* Import Monaco editor styles */
+ @import url('./static/monaco/min/vs/editor/editor.main.css');
+
+ /* Codicon font is now defined globally in sketch-app-shell.css */
+
+ /* Custom Monaco styles */
+ .monaco-editor {
+ width: 100%;
+ height: 100%;
+ }
+
+ /* Custom font stack - ensure we have good monospace fonts */
+ .monaco-editor .view-lines,
+ .monaco-editor .view-line,
+ .monaco-editor-pane,
+ .monaco-editor .inputarea {
+ font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;
+ font-size: 13px !important;
+ font-feature-settings: "liga" 0, "calt" 0 !important;
+ line-height: 1.5 !important;
+ }
+
+ /* Ensure light theme colors */
+ .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
+ background-color: var(--monaco-editor-bg, #ffffff) !important;
+ }
+
+ .monaco-editor .margin {
+ background-color: var(--monaco-editor-margin, #f5f5f5) !important;
+ }
+`;
+
+// Configure Monaco to use local workers with correct relative paths
+// Monaco looks for this global configuration to determine how to load web workers
+// @ts-ignore - MonacoEnvironment is added to the global scope at runtime
+self.MonacoEnvironment = {
+ getWorkerUrl: function (_moduleId, label) {
+ if (label === "json") {
+ return "./static/json.worker.js";
+ }
+ if (label === "css" || label === "scss" || label === "less") {
+ return "./static/css.worker.js";
+ }
+ if (label === "html" || label === "handlebars" || label === "razor") {
+ return "./static/html.worker.js";
+ }
+ if (label === "typescript" || label === "javascript") {
+ return "./static/ts.worker.js";
+ }
+ return "./static/editor.worker.js";
+ },
+};
+
+@customElement("sketch-monaco-view")
+export class CodeDiffEditor extends LitElement {
+ // Editable state
+ @property({ type: Boolean, attribute: "editable-right" })
+ editableRight?: boolean;
+ private container: Ref<HTMLElement> = createRef();
+ editor?: monaco.editor.IStandaloneDiffEditor;
+ @property() language?: string = "javascript";
+
+ // Save state properties
+ @state() private saveState: "idle" | "modified" | "saving" | "saved" = "idle";
+ @state() private debounceSaveTimeout: number | null = null;
+ @state() private lastSavedContent: string = "";
+ @property() originalCode?: string = "// Original code here";
+ @property() modifiedCode?: string = "// Modified code here";
+ @property() originalFilename?: string = "original.js";
+ @property() modifiedFilename?: string = "modified.js";
+
+ /* Selected text and indicators */
+ @state()
+ private selectedText: string | null = null;
+
+ @state()
+ private selectionRange: {
+ startLineNumber: number;
+ startColumn: number;
+ endLineNumber: number;
+ endColumn: number;
+ } | null = null;
+
+ @state()
+ private showCommentIndicator: boolean = false;
+
+ @state()
+ private indicatorPosition: { top: number; left: number } = {
+ top: 0,
+ left: 0,
+ };
+
+ @state()
+ private showCommentBox: boolean = false;
+
+ @state()
+ private commentText: string = "";
+
+ @state()
+ private activeEditor: "original" | "modified" = "modified"; // Track which editor is active
+
+ // Custom event to request save action from external components
+ private requestSave() {
+ if (this.saveState !== "modified") return;
+
+ this.saveState = "saving";
+
+ // Get current content from modified editor
+ const modifiedContent = this.modifiedModel?.getValue() || "";
+
+ // Create and dispatch the save event
+ const saveEvent = new CustomEvent("monaco-save", {
+ detail: {
+ path: this.modifiedFilename,
+ content: modifiedContent,
+ },
+ bubbles: true,
+ composed: true,
+ });
+
+ this.dispatchEvent(saveEvent);
+ }
+
+ // Method to be called from parent when save is complete
+ public notifySaveComplete(success: boolean) {
+ if (success) {
+ this.saveState = "saved";
+ // Update last saved content
+ this.lastSavedContent = this.modifiedModel?.getValue() || "";
+ // Reset to idle after a delay
+ setTimeout(() => {
+ this.saveState = "idle";
+ }, 2000);
+ } else {
+ // Return to modified state on error
+ this.saveState = "modified";
+ }
+ }
+
+ // Setup content change listener for debounced save
+ private setupContentChangeListener() {
+ if (!this.editor || !this.editableRight) return;
+
+ const modifiedEditor = this.editor.getModifiedEditor();
+ if (!modifiedEditor || !modifiedEditor.getModel()) return;
+
+ // Store initial content
+ this.lastSavedContent = modifiedEditor.getModel()!.getValue();
+
+ // Listen for content changes
+ modifiedEditor.getModel()!.onDidChangeContent(() => {
+ const currentContent = modifiedEditor.getModel()!.getValue();
+
+ // Check if content has actually changed from last saved state
+ if (currentContent !== this.lastSavedContent) {
+ this.saveState = "modified";
+
+ // Debounce save request
+ if (this.debounceSaveTimeout) {
+ window.clearTimeout(this.debounceSaveTimeout);
+ }
+
+ this.debounceSaveTimeout = window.setTimeout(() => {
+ this.requestSave();
+ this.debounceSaveTimeout = null;
+ }, 1000); // 1 second debounce
+ }
+ });
+ }
+
+ static styles = css`
+ /* Save indicator styles */
+ .save-indicator {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ padding: 3px 8px;
+ border-radius: 3px;
+ font-size: 12px;
+ font-family: system-ui, sans-serif;
+ color: white;
+ z-index: 100;
+ opacity: 0.9;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+ }
+
+ .save-indicator.modified {
+ background-color: #f0ad4e;
+ }
+
+ .save-indicator.saving {
+ background-color: #5bc0de;
+ }
+
+ .save-indicator.saved {
+ background-color: #5cb85c;
+ }
+
+ /* Editor host styles */
+ :host {
+ --editor-width: 100%;
+ --editor-height: 100%;
+ display: flex;
+ flex: 1;
+ min-height: 0; /* Critical for flex layout */
+ position: relative; /* Establish positioning context */
+ height: 100%; /* Take full height */
+ width: 100%; /* Take full width */
+ }
+ main {
+ width: var(--editor-width);
+ height: var(--editor-height);
+ border: 1px solid #e0e0e0;
+ flex: 1;
+ min-height: 300px; /* Ensure a minimum height for the editor */
+ position: absolute; /* Absolute positioning to take full space */
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ /* Comment indicator and box styles */
+ .comment-indicator {
+ position: fixed;
+ background-color: rgba(66, 133, 244, 0.9);
+ color: white;
+ border-radius: 3px;
+ padding: 3px 8px;
+ font-size: 12px;
+ cursor: pointer;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ z-index: 10000;
+ animation: fadeIn 0.2s ease-in-out;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ pointer-events: all;
+ }
+
+ .comment-indicator:hover {
+ background-color: rgba(66, 133, 244, 1);
+ }
+
+ .comment-indicator span {
+ line-height: 1;
+ }
+
+ .comment-box {
+ position: fixed;
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+ padding: 12px;
+ z-index: 10001;
+ width: 350px;
+ animation: fadeIn 0.2s ease-in-out;
+ max-height: 80vh;
+ overflow-y: auto;
+ }
+
+ .comment-box-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+ }
+
+ .comment-box-header h3 {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ .close-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+ color: #666;
+ padding: 2px 6px;
+ }
+
+ .close-button:hover {
+ color: #333;
+ }
+
+ .selected-text-preview {
+ background-color: #f5f5f5;
+ border: 1px solid #eee;
+ border-radius: 3px;
+ padding: 8px;
+ margin-bottom: 10px;
+ font-family: monospace;
+ font-size: 12px;
+ max-height: 80px;
+ overflow-y: auto;
+ white-space: pre-wrap;
+ word-break: break-all;
+ }
+
+ .comment-textarea {
+ width: 100%;
+ min-height: 80px;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ resize: vertical;
+ font-family: inherit;
+ margin-bottom: 10px;
+ box-sizing: border-box;
+ }
+
+ .comment-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ }
+
+ .comment-actions button {
+ padding: 6px 12px;
+ border-radius: 3px;
+ cursor: pointer;
+ font-size: 12px;
+ }
+
+ .cancel-button {
+ background-color: transparent;
+ border: 1px solid #ddd;
+ }
+
+ .cancel-button:hover {
+ background-color: #f5f5f5;
+ }
+
+ .submit-button {
+ background-color: #4285f4;
+ color: white;
+ border: none;
+ }
+
+ .submit-button:hover {
+ background-color: #3367d6;
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+ `;
+
+ render() {
+ return html`
+ <style>
+ ${monacoStyles}
+ </style>
+ <main ${ref(this.container)}></main>
+
+ <!-- Save indicator - shown when editing -->
+ ${this.editableRight && this.saveState !== "idle"
+ ? html`
+ <div class="save-indicator ${this.saveState}">
+ ${this.saveState === "modified"
+ ? "Modified..."
+ : this.saveState === "saving"
+ ? "Saving..."
+ : this.saveState === "saved"
+ ? "Saved"
+ : ""}
+ </div>
+ `
+ : ""}
+
+ <!-- Comment indicator - shown when text is selected -->
+ ${this.showCommentIndicator
+ ? html`
+ <div
+ class="comment-indicator"
+ style="top: ${this.indicatorPosition.top}px; left: ${this
+ .indicatorPosition.left}px;"
+ @click="${this.handleIndicatorClick}"
+ @mouseenter="${() => {
+ this._isHovering = true;
+ }}"
+ @mouseleave="${() => {
+ this._isHovering = false;
+ }}"
+ >
+ <span>💬</span>
+ <span>Add comment</span>
+ </div>
+ `
+ : ""}
+
+ <!-- Comment box - shown when indicator is clicked -->
+ ${this.showCommentBox
+ ? html`
+ <div
+ class="comment-box"
+ style="${this.calculateCommentBoxPosition()}"
+ @mouseenter="${() => {
+ this._isHovering = true;
+ }}"
+ @mouseleave="${() => {
+ this._isHovering = false;
+ }}"
+ >
+ <div class="comment-box-header">
+ <h3>Add comment</h3>
+ <button class="close-button" @click="${this.closeCommentBox}">
+ ×
+ </button>
+ </div>
+ <div class="selected-text-preview">${this.selectedText}</div>
+ <textarea
+ class="comment-textarea"
+ placeholder="Type your comment here..."
+ .value="${this.commentText}"
+ @input="${this.handleCommentInput}"
+ ></textarea>
+ <div class="comment-actions">
+ <button class="cancel-button" @click="${this.closeCommentBox}">
+ Cancel
+ </button>
+ <button class="submit-button" @click="${this.submitComment}">
+ Submit
+ </button>
+ </div>
+ </div>
+ `
+ : ""}
+ `;
+ }
+
+ /**
+ * Calculate the optimal position for the comment box to keep it in view
+ */
+ private calculateCommentBoxPosition(): string {
+ // Get viewport dimensions
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ // Default position (below indicator)
+ let top = this.indicatorPosition.top + 30;
+ let left = this.indicatorPosition.left;
+
+ // Estimated box dimensions
+ const boxWidth = 350;
+ const boxHeight = 300;
+
+ // Check if box would go off the right edge
+ if (left + boxWidth > viewportWidth) {
+ left = viewportWidth - boxWidth - 20; // Keep 20px margin
+ }
+
+ // Check if box would go off the bottom
+ const bottomSpace = viewportHeight - top;
+ if (bottomSpace < boxHeight) {
+ // Not enough space below, try to position above if possible
+ if (this.indicatorPosition.top > boxHeight) {
+ // Position above the indicator
+ top = this.indicatorPosition.top - boxHeight - 10;
+ } else {
+ // Not enough space above either, position at top of viewport with margin
+ top = 10;
+ }
+ }
+
+ // Ensure box is never positioned off-screen
+ top = Math.max(10, top);
+ left = Math.max(10, left);
+
+ return `top: ${top}px; left: ${left}px;`;
+ }
+
+ setOriginalCode(code: string, filename?: string) {
+ this.originalCode = code;
+ if (filename) {
+ this.originalFilename = filename;
+ }
+
+ // Update the model if the editor is initialized
+ if (this.editor) {
+ const model = this.editor.getOriginalEditor().getModel();
+ if (model) {
+ model.setValue(code);
+ if (filename) {
+ monaco.editor.setModelLanguage(
+ model,
+ this.getLanguageForFile(filename),
+ );
+ }
+ }
+ }
+ }
+
+ setModifiedCode(code: string, filename?: string) {
+ this.modifiedCode = code;
+ if (filename) {
+ this.modifiedFilename = filename;
+ }
+
+ // Update the model if the editor is initialized
+ if (this.editor) {
+ const model = this.editor.getModifiedEditor().getModel();
+ if (model) {
+ model.setValue(code);
+ if (filename) {
+ monaco.editor.setModelLanguage(
+ model,
+ this.getLanguageForFile(filename),
+ );
+ }
+ }
+ }
+ }
+
+ private getLanguageForFile(filename: string): string {
+ const extension = filename.split(".").pop()?.toLowerCase() || "";
+ const langMap: Record<string, string> = {
+ js: "javascript",
+ ts: "typescript",
+ py: "python",
+ html: "html",
+ css: "css",
+ json: "json",
+ md: "markdown",
+ go: "go",
+ };
+ return langMap[extension] || this.language || "plaintext";
+ }
+
+ /**
+ * Update editor options
+ */
+ setOptions(value: monaco.editor.IDiffEditorConstructionOptions) {
+ if (this.editor) {
+ this.editor.updateOptions(value);
+ }
+ }
+
+ /**
+ * Toggle hideUnchangedRegions feature
+ */
+ toggleHideUnchangedRegions(enabled: boolean) {
+ if (this.editor) {
+ this.editor.updateOptions({
+ hideUnchangedRegions: {
+ enabled: enabled,
+ contextLineCount: 3,
+ minimumLineCount: 3,
+ revealLineCount: 10,
+ },
+ });
+ }
+ }
+
+ // Models for the editor
+ private originalModel?: monaco.editor.ITextModel;
+ private modifiedModel?: monaco.editor.ITextModel;
+
+ private initializeEditor() {
+ try {
+ // Disable semantic validation globally for TypeScript/JavaScript
+ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+ noSemanticValidation: true
+ });
+ monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+ noSemanticValidation: true
+ });
+
+ // First time initialization
+ if (!this.editor) {
+ // Create the diff editor only once
+ this.editor = monaco.editor.createDiffEditor(this.container.value!, {
+ automaticLayout: true,
+ // Make it read-only by default
+ // We'll adjust individual editor settings after creation
+ readOnly: true,
+ theme: "vs", // Always use light mode
+ renderSideBySide: true,
+ ignoreTrimWhitespace: false,
+ // Focus on the differences by hiding unchanged regions
+ hideUnchangedRegions: {
+ enabled: true, // Enable the feature
+ contextLineCount: 3, // Show 3 lines of context around each difference
+ minimumLineCount: 3, // Hide regions only when they're at least 3 lines
+ revealLineCount: 10, // Show 10 lines when expanding a hidden region
+ },
+ });
+
+ console.log("Monaco diff editor created");
+
+ // Set up selection change event listeners for both editors
+ this.setupSelectionChangeListeners();
+
+ // If this is an editable view, set the correct read-only state for each editor
+ if (this.editableRight) {
+ // Make sure the original editor is always read-only
+ this.editor.getOriginalEditor().updateOptions({ readOnly: true });
+ // Make sure the modified editor is editable
+ this.editor.getModifiedEditor().updateOptions({ readOnly: false });
+ }
+ }
+
+ // Create or update models
+ this.updateModels();
+ // Set up content change listener
+ this.setupContentChangeListener();
+
+ // Force layout recalculation after a short delay
+ // This ensures the editor renders properly, especially with single files
+ setTimeout(() => {
+ if (this.editor) {
+ this.editor.layout();
+ console.log("Monaco diff editor layout updated");
+ }
+ }, 50);
+
+ console.log("Monaco diff editor initialized");
+ } catch (error) {
+ console.error("Error initializing Monaco editor:", error);
+ }
+ }
+
+ /**
+ * Sets up event listeners for text selection in both editors.
+ * This enables showing the comment UI when users select text and
+ * manages the visibility of UI components based on user interactions.
+ */
+ private setupSelectionChangeListeners() {
+ try {
+ if (!this.editor) {
+ console.log("Editor not available for setting up listeners");
+ return;
+ }
+
+ // Get both original and modified editors
+ const originalEditor = this.editor.getOriginalEditor();
+ const modifiedEditor = this.editor.getModifiedEditor();
+
+ if (!originalEditor || !modifiedEditor) {
+ console.log("Original or modified editor not available");
+ return;
+ }
+
+ // Add selection change listener to original editor
+ originalEditor.onDidChangeCursorSelection((e) => {
+ this.handleSelectionChange(e, originalEditor, "original");
+ });
+
+ // Add selection change listener to modified editor
+ modifiedEditor.onDidChangeCursorSelection((e) => {
+ this.handleSelectionChange(e, modifiedEditor, "modified");
+ });
+
+ // Create a debounced function for mouse move handling
+ let mouseMoveTimeout: number | null = null;
+ const handleMouseMove = () => {
+ // Clear any existing timeout
+ if (mouseMoveTimeout) {
+ window.clearTimeout(mouseMoveTimeout);
+ }
+
+ // If there's text selected and we're not showing the comment box, keep indicator visible
+ if (this.selectedText && !this.showCommentBox) {
+ this.showCommentIndicator = true;
+ this.requestUpdate();
+ }
+
+ // Set a new timeout to hide the indicator after a delay
+ mouseMoveTimeout = window.setTimeout(() => {
+ // Only hide if we're not showing the comment box and not actively hovering
+ if (!this.showCommentBox && !this._isHovering) {
+ this.showCommentIndicator = false;
+ this.requestUpdate();
+ }
+ }, 2000); // Hide after 2 seconds of inactivity
+ };
+
+ // Add mouse move listeners with debouncing
+ originalEditor.onMouseMove(() => handleMouseMove());
+ modifiedEditor.onMouseMove(() => handleMouseMove());
+
+ // Track hover state over the indicator and comment box
+ this._isHovering = false;
+
+ // Use the global document click handler to detect clicks outside
+ this._documentClickHandler = (e: MouseEvent) => {
+ try {
+ const target = e.target as HTMLElement;
+ const isIndicator =
+ target.matches(".comment-indicator") ||
+ !!target.closest(".comment-indicator");
+ const isCommentBox =
+ target.matches(".comment-box") || !!target.closest(".comment-box");
+
+ // If click is outside our UI elements
+ if (!isIndicator && !isCommentBox) {
+ // If we're not showing the comment box, hide the indicator
+ if (!this.showCommentBox) {
+ this.showCommentIndicator = false;
+ this.requestUpdate();
+ }
+ }
+ } catch (error) {
+ console.error("Error in document click handler:", error);
+ }
+ };
+
+ // Add the document click listener
+ document.addEventListener("click", this._documentClickHandler);
+
+ console.log("Selection change listeners set up successfully");
+ } catch (error) {
+ console.error("Error setting up selection listeners:", error);
+ }
+ }
+
+ // Track mouse hover state
+ private _isHovering = false;
+
+ // Store document click handler for cleanup
+ private _documentClickHandler: ((e: MouseEvent) => void) | null = null;
+
+ /**
+ * Handle selection change events from either editor
+ */
+ private handleSelectionChange(
+ e: monaco.editor.ICursorSelectionChangedEvent,
+ editor: monaco.editor.IStandaloneCodeEditor,
+ editorType: "original" | "modified",
+ ) {
+ try {
+ // If we're not making a selection (just moving cursor), do nothing
+ if (e.selection.isEmpty()) {
+ // Don't hide indicator or box if already shown
+ if (!this.showCommentBox) {
+ this.selectedText = null;
+ this.selectionRange = null;
+ this.showCommentIndicator = false;
+ }
+ return;
+ }
+
+ // Get selected text
+ const model = editor.getModel();
+ if (!model) {
+ console.log("No model available for selection");
+ return;
+ }
+
+ // Make sure selection is within valid range
+ const lineCount = model.getLineCount();
+ if (
+ e.selection.startLineNumber > lineCount ||
+ e.selection.endLineNumber > lineCount
+ ) {
+ console.log("Selection out of bounds");
+ return;
+ }
+
+ // Store which editor is active
+ this.activeEditor = editorType;
+
+ // Store selection range
+ this.selectionRange = {
+ startLineNumber: e.selection.startLineNumber,
+ startColumn: e.selection.startColumn,
+ endLineNumber: e.selection.endLineNumber,
+ endColumn: e.selection.endColumn,
+ };
+
+ try {
+ // Get the selected text
+ this.selectedText = model.getValueInRange(e.selection);
+ } catch (error) {
+ console.error("Error getting selected text:", error);
+ return;
+ }
+
+ // If there's selected text, show the indicator
+ if (this.selectedText && this.selectedText.trim() !== "") {
+ // Calculate indicator position safely
+ try {
+ // Use the editor's DOM node as positioning context
+ const editorDomNode = editor.getDomNode();
+ if (!editorDomNode) {
+ console.log("No editor DOM node available");
+ return;
+ }
+
+ // Get position from editor
+ const position = {
+ lineNumber: e.selection.endLineNumber,
+ column: e.selection.endColumn,
+ };
+
+ // Use editor's built-in method for coordinate conversion
+ const selectionCoords = editor.getScrolledVisiblePosition(position);
+
+ if (selectionCoords) {
+ // Get accurate DOM position for the selection end
+ const editorRect = editorDomNode.getBoundingClientRect();
+
+ // Calculate the actual screen position
+ const screenLeft = editorRect.left + selectionCoords.left;
+ const screenTop = editorRect.top + selectionCoords.top;
+
+ // Store absolute screen coordinates
+ this.indicatorPosition = {
+ top: screenTop,
+ left: screenLeft + 10, // Slight offset
+ };
+
+ // Check window boundaries to ensure the indicator stays visible
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ // Keep indicator within viewport bounds
+ if (this.indicatorPosition.left + 150 > viewportWidth) {
+ this.indicatorPosition.left = viewportWidth - 160;
+ }
+
+ if (this.indicatorPosition.top + 40 > viewportHeight) {
+ this.indicatorPosition.top = viewportHeight - 50;
+ }
+
+ // Show the indicator
+ this.showCommentIndicator = true;
+
+ // Request an update to ensure UI reflects changes
+ this.requestUpdate();
+ }
+ } catch (error) {
+ console.error("Error positioning comment indicator:", error);
+ }
+ }
+ } catch (error) {
+ console.error("Error handling selection change:", error);
+ }
+ }
+
+ /**
+ * Handle click on the comment indicator
+ */
+ private handleIndicatorClick(e: Event) {
+ try {
+ e.stopPropagation();
+ e.preventDefault();
+
+ this.showCommentBox = true;
+ this.commentText = ""; // Reset comment text
+
+ // Don't hide the indicator while comment box is shown
+ this.showCommentIndicator = true;
+
+ // Ensure UI updates
+ this.requestUpdate();
+ } catch (error) {
+ console.error("Error handling indicator click:", error);
+ }
+ }
+
+ /**
+ * Handle changes to the comment text
+ */
+ private handleCommentInput(e: Event) {
+ const target = e.target as HTMLTextAreaElement;
+ this.commentText = target.value;
+ }
+
+ /**
+ * Close the comment box
+ */
+ private closeCommentBox() {
+ this.showCommentBox = false;
+ // Also hide the indicator
+ this.showCommentIndicator = false;
+ }
+
+ /**
+ * Submit the comment
+ */
+ private submitComment() {
+ try {
+ if (!this.selectedText || !this.commentText) {
+ console.log("Missing selected text or comment");
+ return;
+ }
+
+ // Get the correct filename based on active editor
+ const fileContext =
+ this.activeEditor === "original"
+ ? this.originalFilename || "Original file"
+ : this.modifiedFilename || "Modified file";
+
+ // Include editor info to make it clear which version was commented on
+ const editorLabel =
+ this.activeEditor === "original" ? "[Original]" : "[Modified]";
+
+ // Format the comment in a readable way
+ const formattedComment = `\`\`\`\n${fileContext} ${editorLabel}:\n${this.selectedText}\n\`\`\`\n\n${this.commentText}`;
+
+ // Close UI before dispatching to prevent interaction conflicts
+ this.closeCommentBox();
+
+ // Use setTimeout to ensure the UI has updated before sending the event
+ setTimeout(() => {
+ try {
+ // Dispatch a custom event with the comment details
+ const event = new CustomEvent("monaco-comment", {
+ detail: {
+ fileContext,
+ selectedText: this.selectedText,
+ commentText: this.commentText,
+ formattedComment,
+ selectionRange: this.selectionRange,
+ activeEditor: this.activeEditor,
+ },
+ bubbles: true,
+ composed: true,
+ });
+
+ this.dispatchEvent(event);
+ } catch (error) {
+ console.error("Error dispatching comment event:", error);
+ }
+ }, 0);
+ } catch (error) {
+ console.error("Error submitting comment:", error);
+ this.closeCommentBox();
+ }
+ }
+
+ private updateModels() {
+ try {
+ // Get language based on filename
+ const originalLang = this.getLanguageForFile(this.originalFilename || "");
+ const modifiedLang = this.getLanguageForFile(this.modifiedFilename || "");
+
+ // Always create new models with unique URIs based on timestamp to avoid conflicts
+ const timestamp = new Date().getTime();
+ // TODO: Could put filename in these URIs; unclear how they're used right now.
+ const originalUri = monaco.Uri.parse(
+ `file:///original-${timestamp}.${originalLang}`,
+ );
+ const modifiedUri = monaco.Uri.parse(
+ `file:///modified-${timestamp}.${modifiedLang}`,
+ );
+
+ // Store references to old models
+ const oldOriginalModel = this.originalModel;
+ const oldModifiedModel = this.modifiedModel;
+
+ // Nullify instance variables to prevent accidental use
+ this.originalModel = undefined;
+ this.modifiedModel = undefined;
+
+ // Clear the editor model first to release Monaco's internal references
+ if (this.editor) {
+ this.editor.setModel(null);
+ }
+
+ // Now it's safe to dispose the old models
+ if (oldOriginalModel) {
+ oldOriginalModel.dispose();
+ }
+
+ if (oldModifiedModel) {
+ oldModifiedModel.dispose();
+ }
+
+ // Create new models
+ this.originalModel = monaco.editor.createModel(
+ this.originalCode || "",
+ originalLang,
+ originalUri,
+ );
+
+ this.modifiedModel = monaco.editor.createModel(
+ this.modifiedCode || "",
+ modifiedLang,
+ modifiedUri,
+ );
+
+ // Set the new models on the editor
+ if (this.editor) {
+ this.editor.setModel({
+ original: this.originalModel,
+ modified: this.modifiedModel,
+ });
+ }
+ this.setupContentChangeListener();
+ } catch (error) {
+ console.error("Error updating Monaco models:", error);
+ }
+ }
+
+ updated(changedProperties: Map<string, any>) {
+ // If any relevant properties changed, just update the models
+ if (
+ changedProperties.has("originalCode") ||
+ changedProperties.has("modifiedCode") ||
+ changedProperties.has("originalFilename") ||
+ changedProperties.has("modifiedFilename") ||
+ changedProperties.has("editableRight")
+ ) {
+ if (this.editor) {
+ this.updateModels();
+
+ // Force layout recalculation after model updates
+ setTimeout(() => {
+ if (this.editor) {
+ this.editor.layout();
+ }
+ }, 50);
+ } else {
+ // If the editor isn't initialized yet but we received content,
+ // initialize it now
+ this.initializeEditor();
+ }
+ }
+ }
+
+ // Add resize observer to ensure editor resizes when container changes
+ firstUpdated() {
+ // Initialize the editor
+ this.initializeEditor();
+
+ // Create a ResizeObserver to monitor container size changes
+ if (window.ResizeObserver) {
+ const resizeObserver = new ResizeObserver(() => {
+ if (this.editor) {
+ this.editor.layout();
+ }
+ });
+
+ // Start observing the container
+ if (this.container.value) {
+ resizeObserver.observe(this.container.value);
+ }
+
+ // Store the observer for cleanup
+ this._resizeObserver = resizeObserver;
+ }
+
+ // If editable, set up edit mode and content change listener
+ if (this.editableRight && this.editor) {
+ // Ensure the original editor is read-only
+ this.editor.getOriginalEditor().updateOptions({ readOnly: true });
+ // Ensure the modified editor is editable
+ this.editor.getModifiedEditor().updateOptions({ readOnly: false });
+ }
+ }
+
+ private _resizeObserver: ResizeObserver | null = null;
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+
+ try {
+ // Clean up resources when element is removed
+ if (this.editor) {
+ this.editor.dispose();
+ this.editor = undefined;
+ }
+
+ // Dispose models to prevent memory leaks
+ if (this.originalModel) {
+ this.originalModel.dispose();
+ this.originalModel = undefined;
+ }
+
+ if (this.modifiedModel) {
+ this.modifiedModel.dispose();
+ this.modifiedModel = undefined;
+ }
+
+ // Clean up resize observer
+ if (this._resizeObserver) {
+ this._resizeObserver.disconnect();
+ this._resizeObserver = null;
+ }
+
+ // Remove document click handler if set
+ if (this._documentClickHandler) {
+ document.removeEventListener("click", this._documentClickHandler);
+ this._documentClickHandler = null;
+ }
+ } catch (error) {
+ console.error("Error in disconnectedCallback:", error);
+ }
+ }
+
+ // disconnectedCallback implementation is defined below
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-monaco-view": CodeDiffEditor;
+ }
+}
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 3870e39..1b27570 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -53,6 +53,7 @@
padding: 0 15px;
box-sizing: border-box;
overflow-x: hidden;
+ flex: 1;
}
/* Chat-like timeline styles */
@@ -69,6 +70,7 @@
overflow-x: hidden;
padding-left: 1em;
max-width: 100%;
+ width: 100%;
}
#jump-to-latest {
display: none;
@@ -94,7 +96,8 @@
/* Welcome box styles for the empty chat state */
.welcome-box {
margin: 2rem auto;
- max-width: 80%;
+ max-width: 90%;
+ width: 90%;
padding: 2rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
diff --git a/webui/src/web-components/sketch-view-mode-select.test.ts b/webui/src/web-components/sketch-view-mode-select.test.ts
index 79cdd8d..58cf535 100644
--- a/webui/src/web-components/sketch-view-mode-select.test.ts
+++ b/webui/src/web-components/sketch-view-mode-select.test.ts
@@ -35,11 +35,11 @@
});
// Click the diff button
- await component.locator("#showDiffButton").click();
+ await component.locator("#showDiff2Button").click();
// Wait for the event and check its details
const detail: any = await eventPromise;
- expect(detail.mode).toBe("diff");
+ expect(detail.mode).toBe("diff2");
});
test("updates the active mode when receiving update-active-mode event", async ({
@@ -56,7 +56,7 @@
// Dispatch the update-active-mode event
await component.evaluate((el) => {
const updateEvent = new CustomEvent("update-active-mode", {
- detail: { mode: "diff" },
+ detail: { mode: "diff2" },
bubbles: true,
});
el.dispatchEvent(updateEvent);
@@ -66,10 +66,10 @@
activeMode = await component.evaluate(
(el: SketchViewModeSelect) => el.activeMode,
);
- expect(activeMode).toBe("diff");
+ expect(activeMode).toBe("diff2");
// Check that the diff button is now active
- await expect(component.locator("#showDiffButton.active")).toBeVisible();
+ await expect(component.locator("#showDiff2Button.active")).toBeVisible();
});
test("correctly marks the active button based on mode", async ({ mount }) => {
@@ -86,6 +86,6 @@
await expect(
component.locator("#showConversationButton.active"),
).not.toBeVisible();
- await expect(component.locator("#showDiffButton.active")).not.toBeVisible();
+ await expect(component.locator("#showDiff2Button.active")).not.toBeVisible();
await expect(component.locator("#showChartsButton.active")).not.toBeVisible();
});
diff --git a/webui/src/web-components/sketch-view-mode-select.ts b/webui/src/web-components/sketch-view-mode-select.ts
index abfe551..df84a87 100644
--- a/webui/src/web-components/sketch-view-mode-select.ts
+++ b/webui/src/web-components/sketch-view-mode-select.ts
@@ -6,7 +6,7 @@
export class SketchViewModeSelect extends LitElement {
// Current active mode
@property()
- activeMode: "chat" | "diff" | "terminal" = "chat";
+ activeMode: "chat" | "diff" | "diff2" | "terminal" = "chat";
// Header bar: view mode buttons
static styles = css`
@@ -87,7 +87,7 @@
/**
* Handle view mode button clicks
*/
- private _handleViewModeClick(mode: "chat" | "diff" | "terminal") {
+ private _handleViewModeClick(mode: "chat" | "diff" | "diff2" | "terminal") {
// Dispatch a custom event to notify the app shell to change the view
const event = new CustomEvent("view-mode-select", {
detail: { mode },
@@ -131,15 +131,15 @@
<span>Chat</span>
</button>
<button
- id="showDiffButton"
- class="tab-btn ${this.activeMode === "diff" ? "active" : ""}"
+ id="showDiff2Button"
+ class="tab-btn ${this.activeMode === "diff2" ? "active" : ""}"
title="Diff View"
- @click=${() => this._handleViewModeClick("diff")}
+ @click=${() => this._handleViewModeClick("diff2")}
>
<span class="tab-icon">±</span>
<span>Diff</span>
</button>
-
+
<button
id="showTerminalButton"
class="tab-btn ${this.activeMode === "terminal" ? "active" : ""}"