diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 38d29b0..aebe6ff 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -170,14 +170,14 @@
         setTimeout(() => this.loadCommits(), 0); // Give time for provider initialization
       });
     }
-    
+
     // Listen for popstate events to handle browser back/forward navigation
-    window.addEventListener('popstate', this.handlePopState.bind(this));
+    window.addEventListener("popstate", this.handlePopState.bind(this));
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('popstate', this.handlePopState.bind(this));
+    window.removeEventListener("popstate", this.handlePopState.bind(this));
   }
 
   /**
@@ -354,7 +354,7 @@
 
       // Check if we should initialize from URL parameters first
       const initializedFromUrl = this.initializeFromUrlParams();
-      
+
       // Set default selections only if not initialized from URL
       if (this.commits.length > 0 && !initializedFromUrl) {
         // For range, default is base to HEAD
@@ -373,7 +373,7 @@
         // For single, default to HEAD
         this.singleCommit = this.commits[0].hash;
       }
-      
+
       // Always dispatch range event to ensure diff view is updated
       this.dispatchRangeEvent();
     } catch (error) {
@@ -389,10 +389,13 @@
    */
   setRangeType(type: "range" | "single") {
     this.rangeType = type;
-    
+
     // If switching to range mode and we don't have valid commits set,
     // initialize with sensible defaults
-    if (type === 'range' && (!this.fromCommit || !this.toCommit === undefined)) {
+    if (
+      type === "range" &&
+      (!this.fromCommit || !this.toCommit === undefined)
+    ) {
       if (this.commits.length > 0) {
         const baseCommit = this.commits.find(
           (c) => c.refs && c.refs.some((ref) => ref.includes("sketch-base")),
@@ -403,17 +406,17 @@
             : this.commits[this.commits.length - 1].hash;
         }
         if (this.toCommit === undefined) {
-          this.toCommit = ''; // Default to uncommitted changes
+          this.toCommit = ""; // Default to uncommitted changes
         }
       }
     }
-    
+
     // If switching to single mode and we don't have a valid commit set,
     // initialize with HEAD
-    if (type === 'single' && !this.singleCommit && this.commits.length > 0) {
+    if (type === "single" && !this.singleCommit && this.commits.length > 0) {
       this.singleCommit = this.commits[0].hash;
     }
-    
+
     this.dispatchRangeEvent();
   }
 
@@ -455,8 +458,10 @@
    * Validate that a commit hash exists in the loaded commits
    */
   private isValidCommitHash(hash: string): boolean {
-    if (!hash || hash.trim() === '') return true; // Empty is valid (uncommitted changes)
-    return this.commits.some(commit => commit.hash.startsWith(hash) || commit.hash === hash);
+    if (!hash || hash.trim() === "") return true; // Empty is valid (uncommitted changes)
+    return this.commits.some(
+      (commit) => commit.hash.startsWith(hash) || commit.hash === hash,
+    );
   }
 
   /**
@@ -485,30 +490,30 @@
    */
   private updateUrlParams(range: DiffRange) {
     const url = new URL(window.location.href);
-    
+
     // Remove existing range parameters
-    url.searchParams.delete('from');
-    url.searchParams.delete('to');
-    url.searchParams.delete('commit');
-    
-    if (range.type === 'range') {
+    url.searchParams.delete("from");
+    url.searchParams.delete("to");
+    url.searchParams.delete("commit");
+
+    if (range.type === "range") {
       // Add from parameter if not empty
-      if (range.from && range.from.trim() !== '') {
-        url.searchParams.set('from', range.from);
+      if (range.from && range.from.trim() !== "") {
+        url.searchParams.set("from", range.from);
       }
       // Add to parameter if not empty (empty string means uncommitted changes)
-      if (range.to && range.to.trim() !== '') {
-        url.searchParams.set('to', range.to);
+      if (range.to && range.to.trim() !== "") {
+        url.searchParams.set("to", range.to);
       }
     } else {
       // Single commit mode
-      if (range.commit && range.commit.trim() !== '') {
-        url.searchParams.set('commit', range.commit);
+      if (range.commit && range.commit.trim() !== "") {
+        url.searchParams.set("commit", range.commit);
       }
     }
-    
+
     // Update the browser history without reloading the page
-    window.history.replaceState(window.history.state, '', url.toString());
+    window.history.replaceState(window.history.state, "", url.toString());
   }
 
   /**
@@ -516,20 +521,20 @@
    */
   private initializeFromUrlParams() {
     const url = new URL(window.location.href);
-    const fromParam = url.searchParams.get('from');
-    const toParam = url.searchParams.get('to');
-    const commitParam = url.searchParams.get('commit');
-    
+    const fromParam = url.searchParams.get("from");
+    const toParam = url.searchParams.get("to");
+    const commitParam = url.searchParams.get("commit");
+
     // If commit parameter is present, switch to single commit mode
     if (commitParam) {
-      this.rangeType = 'single';
+      this.rangeType = "single";
       this.singleCommit = commitParam;
       return true; // Indicate that we initialized from URL
     }
-    
+
     // If from or to parameters are present, use range mode
     if (fromParam || toParam) {
-      this.rangeType = 'range';
+      this.rangeType = "range";
       if (fromParam) {
         this.fromCommit = fromParam;
       }
@@ -537,11 +542,11 @@
         this.toCommit = toParam;
       } else {
         // If no 'to' param, default to uncommitted changes (empty string)
-        this.toCommit = '';
+        this.toCommit = "";
       }
       return true; // Indicate that we initialized from URL
     }
-    
+
     return false; // No URL params found
   }
 }
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 1514fcd..f655933 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -49,25 +49,27 @@
       // Get the monaco view that emitted the event
       const monacoView = event.target as HTMLElement;
       if (!monacoView) return;
-      
+
       // Find the parent file-diff-editor container
-      const fileDiffEditor = monacoView.closest('.file-diff-editor') as HTMLElement;
+      const fileDiffEditor = monacoView.closest(
+        ".file-diff-editor",
+      ) as HTMLElement;
       if (!fileDiffEditor) return;
-      
+
       // Get the new height from the event
       const newHeight = event.detail.height;
-      
+
       // Only update if the height actually changed to avoid unnecessary layout
       const currentHeight = fileDiffEditor.style.height;
       const newHeightStr = `${newHeight}px`;
-      
+
       if (currentHeight !== newHeightStr) {
         // Update the file-diff-editor height to match monaco's height
         fileDiffEditor.style.height = newHeightStr;
-        
+
         // Remove any previous min-height constraint that might interfere
-        fileDiffEditor.style.minHeight = 'auto';
-        
+        fileDiffEditor.style.minHeight = "auto";
+
         // IMPORTANT: Tell Monaco to relayout after its container size changed
         // Monaco has automaticLayout: false, so it won't detect container changes
         setTimeout(() => {
@@ -77,14 +79,13 @@
             const editorWidth = fileDiffEditor.offsetWidth;
             monacoComponent.editor.layout({
               width: editorWidth,
-              height: newHeight
+              height: newHeight,
             });
           }
         }, 0);
       }
-      
     } catch (error) {
-      console.error('Error handling Monaco height change:', error);
+      console.error("Error handling Monaco height change:", error);
     }
   }
 
@@ -143,7 +144,10 @@
   private currentRange: DiffRange = { type: "range", from: "", to: "HEAD" };
 
   @state()
-  private fileContents: Map<string, { original: string; modified: string; editable: boolean }> = new Map();
+  private fileContents: Map<
+    string,
+    { original: string; modified: string; editable: boolean }
+  > = new Map();
 
   @state()
   private fileExpandStates: Map<string, boolean> = new Map();
@@ -456,13 +460,15 @@
     const currentState = this.fileExpandStates.get(filePath) ?? false;
     const newState = !currentState;
     this.fileExpandStates.set(filePath, newState);
-    
+
     // Apply to the specific Monaco view component for this file
-    const monacoView = this.shadowRoot?.querySelector(`sketch-monaco-view[data-file-path="${filePath}"]`);
+    const monacoView = this.shadowRoot?.querySelector(
+      `sketch-monaco-view[data-file-path="${filePath}"]`,
+    );
     if (monacoView) {
       (monacoView as any).toggleHideUnchangedRegions(!newState); // inverted because true means "hide unchanged"
     }
-    
+
     // Force a re-render to update the button state
     this.requestUpdate();
   }
@@ -480,7 +486,9 @@
 
           <div class="file-row">
             <div class="file-count">
-              ${this.files.length > 0 ? `${this.files.length} file${this.files.length === 1 ? '' : 's'} changed` : 'No files'}
+              ${this.files.length > 0
+                ? `${this.files.length} file${this.files.length === 1 ? "" : "s"} changed`
+                : "No files"}
             </div>
           </div>
         </div>
@@ -545,7 +553,7 @@
       // Load content for all files
       if (this.files.length > 0) {
         // Initialize expand states for new files (default to collapsed)
-        this.files.forEach(file => {
+        this.files.forEach((file) => {
           if (!this.fileExpandStates.has(file.path)) {
             this.fileExpandStates.set(file.path, false); // false = collapsed (hide unchanged regions)
           }
@@ -696,9 +704,7 @@
     if (!content) {
       return html`
         <div class="file-diff-section">
-          <div class="file-header">
-            ${this.renderFileHeader(file)}
-          </div>
+          <div class="file-header">${this.renderFileHeader(file)}</div>
           <div class="loading">Loading ${file.path}...</div>
         </div>
       `;
@@ -706,9 +712,7 @@
 
     return html`
       <div class="file-diff-section">
-        <div class="file-header">
-          ${this.renderFileHeader(file)}
-        </div>
+        <div class="file-header">${this.renderFileHeader(file)}</div>
         <div class="file-diff-editor">
           <sketch-monaco-view
             .originalCode="${content.original}"
@@ -738,12 +742,14 @@
     const pathInfo = this.getPathInfo(file);
 
     const isExpanded = this.fileExpandStates.get(file.path) ?? false;
-    
+
     return html`
       <div class="file-header-left">
         <span class="file-status ${statusClass}">${statusText}</span>
         <span class="file-path">${pathInfo}</span>
-        ${changesInfo ? html`<span class="file-changes">${changesInfo}</span>` : ''}
+        ${changesInfo
+          ? html`<span class="file-changes">${changesInfo}</span>`
+          : ""}
       </div>
       <div class="file-header-right">
         <button
@@ -753,9 +759,7 @@
             ? "Collapse: Hide unchanged regions to focus on changes"
             : "Expand: Show all lines including unchanged regions"}"
         >
-          ${isExpanded
-            ? this.renderCollapseIcon()
-            : this.renderExpandAllIcon()}
+          ${isExpanded ? this.renderCollapseIcon() : this.renderExpandAllIcon()}
         </button>
       </div>
     `;
diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index aaf186f..915da57 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -633,8 +633,8 @@
           renderSideBySide: true,
           ignoreTrimWhitespace: false,
           scrollbar: {
-            vertical: 'hidden',
-            horizontal: 'hidden',
+            vertical: "hidden",
+            horizontal: "hidden",
             handleMouseWheel: false, // Let outer scroller eat the wheel
           },
           minimap: { enabled: false },
@@ -1080,7 +1080,7 @@
           original: this.originalModel,
           modified: this.modifiedModel,
         });
-        
+
         // Set initial hideUnchangedRegions state (default to enabled/collapsed)
         this.editor.updateOptions({
           hideUnchangedRegions: {
@@ -1090,7 +1090,7 @@
             revealLineCount: 10,
           },
         });
-        
+
         // Fit content after setting new models
         if (this.fitEditorToContent) {
           setTimeout(() => this.fitEditorToContent!(), 50);
@@ -1137,27 +1137,29 @@
       try {
         const originalEditor = this.editor!.getOriginalEditor();
         const modifiedEditor = this.editor!.getModifiedEditor();
-        
+
         const originalHeight = originalEditor.getContentHeight();
         const modifiedHeight = modifiedEditor.getContentHeight();
-        
+
         // Use the maximum height of both editors, plus some padding
         const maxHeight = Math.max(originalHeight, modifiedHeight) + 18; // 1 blank line bottom padding
-        
+
         // Set both container and host height to enable proper scrolling
         if (this.container.value) {
           // Set explicit heights on both container and host
           this.container.value.style.height = `${maxHeight}px`;
           this.style.height = `${maxHeight}px`; // Update host element height
-          
+
           // Emit the height change event BEFORE calling layout
           // This ensures parent containers resize first
-          this.dispatchEvent(new CustomEvent('monaco-height-changed', {
-            detail: { height: maxHeight },
-            bubbles: true,
-            composed: true
-          }));
-          
+          this.dispatchEvent(
+            new CustomEvent("monaco-height-changed", {
+              detail: { height: maxHeight },
+              bubbles: true,
+              composed: true,
+            }),
+          );
+
           // Layout after both this component and parents have updated
           setTimeout(() => {
             if (this.editor && this.container.value) {
@@ -1165,13 +1167,13 @@
               const width = this.container.value.offsetWidth;
               this.editor.layout({
                 width: width,
-                height: maxHeight
+                height: maxHeight,
               });
             }
           }, 10);
         }
       } catch (error) {
-        console.error('Error in fitContent:', error);
+        console.error("Error in fitContent:", error);
       }
     };
 
@@ -1288,7 +1290,7 @@
         this._resizeObserver.disconnect();
         this._resizeObserver = null;
       }
-      
+
       // Clear the fit function reference
       this.fitEditorToContent = null;