diff --git a/webui/src/sketch-app-shell.css b/webui/src/sketch-app-shell.css
index 88b08a9..65b06ae 100644
--- a/webui/src/sketch-app-shell.css
+++ b/webui/src/sketch-app-shell.css
@@ -17,5 +17,6 @@
 @font-face {
   font-family: "codicon";
   font-display: block;
-  src: url('./monaco/min/vs/base/browser/ui/codicons/codicon/codicon.ttf') format('truetype');
+  src: url("./monaco/min/vs/base/browser/ui/codicons/codicon/codicon.ttf")
+    format("truetype");
 }
diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
index 74937f0..3ca5098 100644
--- a/webui/src/web-components/demo/mock-git-data-service.ts
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -1,75 +1,75 @@
 // mock-git-data-service.ts
 // Mock implementation of GitDataService for the demo environment
 
-import { GitDataService, GitDiffFile } from '../git-data-service';
-import { GitLogEntry } from '../../types';
+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');
+    console.log("MockGitDataService instance created");
   }
 
   // Mock commit history
   private mockCommits: GitLogEntry[] = [
     {
-      hash: 'abc123456789',
-      subject: 'Implement new file picker UI',
-      refs: ['HEAD', 'main']
+      hash: "abc123456789",
+      subject: "Implement new file picker UI",
+      refs: ["HEAD", "main"],
     },
     {
-      hash: 'def987654321',
-      subject: 'Add range picker component',
-      refs: []
+      hash: "def987654321",
+      subject: "Add range picker component",
+      refs: [],
     },
     {
-      hash: 'ghi456789123',
-      subject: 'Fix styling issues in navigation',
-      refs: []
+      hash: "ghi456789123",
+      subject: "Fix styling issues in navigation",
+      refs: [],
     },
     {
-      hash: 'jkl789123456',
-      subject: 'Initial commit',
-      refs: ['sketch-base']
-    }
+      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/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/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/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'
-    }
+      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
@@ -286,118 +286,129 @@
 }`;
 
   async getCommitHistory(initialCommit?: string): Promise<GitLogEntry[]> {
-    console.log(`[MockGitDataService] Getting commit history from ${initialCommit || 'beginning'}`);
-    
+    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);
+      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') {
+    if (commit === "abc123456789") {
       return this.mockDiffFiles.slice(0, 2);
-    } else if (commit === 'def987654321') {
+    } 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}`);
-    
+    console.log(
+      `[MockGitDataService] Getting file content for hash: ${fileHash}`,
+    );
+
     // Return different content based on the file hash
-    if (fileHash === 'bcd0123456789abcdef0123456789abcdef0123') {
+    if (fileHash === "bcd0123456789abcdef0123456789abcdef0123") {
       return this.appJSModified;
-    } else if (fileHash === 'abc0123456789abcdef0123456789abcdef0123') {
+    } else if (fileHash === "abc0123456789abcdef0123456789abcdef0123") {
       return this.appJSOriginal;
-    } else if (fileHash === 'def0123456789abcdef0123456789abcdef0123') {
+    } else if (fileHash === "def0123456789abcdef0123456789abcdef0123") {
       return this.filePickerJS;
-    } else if (fileHash === 'cde0123456789abcdef0123456789abcdef0123') {
+    } else if (fileHash === "cde0123456789abcdef0123456789abcdef0123") {
       return this.rangePickerJS;
-    } else if (fileHash === 'ghi0123456789abcdef0123456789abcdef0123') {
+    } else if (fileHash === "ghi0123456789abcdef0123456789abcdef0123") {
       return this.mainCSSModified;
-    } else if (fileHash === 'fgh0123456789abcdef0123456789abcdef0123') {
+    } else if (fileHash === "fgh0123456789abcdef0123456789abcdef0123") {
       return this.mainCSSOriginal;
     }
-    
+
     // Return empty string for unknown file hashes
-    return '';
+    return "";
   }
 
   async getBaseCommitRef(): Promise<string> {
-    console.log('[MockGitDataService] Getting base commit ref');
-    
+    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')
+    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));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
-  
+
   async getWorkingCopyContent(filePath: string): Promise<string> {
-    console.log(`[MockGitDataService] Getting working copy content for path: ${filePath}`);
-    
+    console.log(
+      `[MockGitDataService] Getting working copy content for path: ${filePath}`,
+    );
+
     // Return different content based on the file path
-    if (filePath === 'src/components/App.js') {
+    if (filePath === "src/components/App.js") {
       return this.appJSModified;
-    } else if (filePath === 'src/components/FilePicker.js') {
+    } else if (filePath === "src/components/FilePicker.js") {
       return this.filePickerJS;
-    } else if (filePath === 'src/components/RangePicker.js') {
+    } else if (filePath === "src/components/RangePicker.js") {
       return this.rangePickerJS;
-    } else if (filePath === 'src/styles/main.css') {
+    } else if (filePath === "src/styles/main.css") {
       return this.mainCSSModified;
     }
-    
+
     // Return empty string for unknown file paths
-    return '';
+    return "";
   }
-  
-  async getUnstagedChanges(from: string = 'HEAD'): Promise<GitDiffFile[]> {
+
+  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 => ({
+    return this.mockDiffFiles.map((file) => ({
       ...file,
-      newHash: '0000000000000000000000000000000000000000'
+      newHash: "0000000000000000000000000000000000000000",
     }));
   }
-  
+
   async saveFileContent(filePath: string, content: string): Promise<void> {
-    console.log(`[MockGitDataService] Saving file content for path: ${filePath}`);
+    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)`);
+    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
index da9e46f..9199b23 100644
--- a/webui/src/web-components/demo/sketch-diff2-view.demo.html
+++ b/webui/src/web-components/demo/sketch-diff2-view.demo.html
@@ -1,74 +1,83 @@
-<!DOCTYPE html>
+<!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;
+  <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;
       }
-    });
-  </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;
-    }
+      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;
-    }
+      .control-panel {
+        margin-bottom: 2rem;
+        padding: 1rem;
+        background-color: #f0f0f0;
+        border-radius: 4px;
+      }
 
-    sketch-diff2-view {
-      width: 100%;
-      height: 100%;
-    }
-  </style>
-</head>
-<body>
-  <h1>Sketch Monaco Diff View Demo</h1>
+      .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;
+      }
 
-  <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>
+      sketch-diff2-view {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sketch Monaco Diff View Demo</h1>
 
-  <div class="demo-container">
-    <sketch-diff2-view></sketch-diff2-view>
-  </div>
-  
+    <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>
 
-</body>
+    <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
index 92da292..f5e12d4 100644
--- a/webui/src/web-components/demo/sketch-monaco-view.demo.html
+++ b/webui/src/web-components/demo/sketch-monaco-view.demo.html
@@ -26,7 +26,7 @@
         background-color: #f0f0f0;
         border-radius: 4px;
       }
-      
+
       button {
         padding: 8px 12px;
         background-color: #4285f4;
@@ -36,11 +36,11 @@
         cursor: pointer;
         margin-right: 8px;
       }
-      
+
       button:hover {
         background-color: #3367d6;
       }
-      
+
       sketch-monaco-view {
         margin-top: 20px;
         height: 500px;
@@ -60,34 +60,34 @@
     </div>
 
     <sketch-monaco-view id="diffEditor"></sketch-monaco-view>
-    
+
     <script>
-      document.addEventListener('DOMContentLoaded', () => {
-        const diffEditor = document.getElementById('diffEditor');
-        
+      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', () => {
+        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'
+            "original.js",
           );
-          
+
           diffEditor.setModifiedCode(
             `function calculateTotal(items) {
   // Apply discount if available
@@ -100,12 +100,12 @@
     })
     .reduce((a, b) => a + b, 0);
 }`,
-            'modified.js'
+            "modified.js",
           );
         });
-        
+
         // Example 2: HTML
-        document.getElementById('example2').addEventListener('click', () => {
+        document.getElementById("example2").addEventListener("click", () => {
           diffEditor.setOriginalCode(
             `<!DOCTYPE html>
 <html>
@@ -117,9 +117,9 @@
   <p>This is a paragraph.</p>
 </body>
 </html>`,
-            'original.html'
+            "original.html",
           );
-          
+
           diffEditor.setModifiedCode(
             `<!DOCTYPE html>
 <html>
@@ -140,12 +140,12 @@
   </footer>
 </body>
 </html>`,
-            'modified.html'
+            "modified.html",
           );
         });
-        
+
         // Example 3: Go
-        document.getElementById('example3').addEventListener('click', () => {
+        document.getElementById("example3").addEventListener("click", () => {
           diffEditor.setOriginalCode(
             `package main
 
@@ -154,9 +154,9 @@
 func main() {
 	fmt.Println("Hello, world!")
 }`,
-            'original.go'
+            "original.go",
           );
-          
+
           diffEditor.setModifiedCode(
             `package main
 
@@ -169,7 +169,7 @@
 	fmt.Println("Hello, world!")
 	fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339))
 }`,
-            'modified.go'
+            "modified.go",
           );
         });
       });
diff --git a/webui/src/web-components/demo/sketch-network-status.demo.html b/webui/src/web-components/demo/sketch-network-status.demo.html
index b0aad7e..2a6b270 100644
--- a/webui/src/web-components/demo/sketch-network-status.demo.html
+++ b/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -19,17 +19,17 @@
   </head>
   <body>
     <h1>Status Indicators Demo</h1>
-    
+
     <div class="status-container">
       <div class="label">Connected State:</div>
       <sketch-call-status
         .isDisconnected="false"
         .isIdle="true"
         .llmCalls="0"
-        .toolCalls='[]'
+        .toolCalls="[]"
       ></sketch-call-status>
     </div>
-    
+
     <div class="status-container">
       <div class="label">Working State:</div>
       <sketch-call-status
@@ -39,14 +39,14 @@
         .toolCalls='["bash"]'
       ></sketch-call-status>
     </div>
-    
+
     <div class="status-container">
       <div class="label">Disconnected State:</div>
       <sketch-call-status
         .isDisconnected="true"
         .isIdle="true"
         .llmCalls="0"
-        .toolCalls='[]'
+        .toolCalls="[]"
       ></sketch-call-status>
     </div>
   </body>
diff --git a/webui/src/web-components/demo/status-demo.html b/webui/src/web-components/demo/status-demo.html
index 063c693..4ce5af3 100644
--- a/webui/src/web-components/demo/status-demo.html
+++ b/webui/src/web-components/demo/status-demo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Status Demo</title>
@@ -36,7 +36,7 @@
   <body>
     <h1>Status Indicators Demo</h1>
     <p>This demo shows the status indicators with the DISCONNECTED state.</p>
-    
+
     <div class="demo-section">
       <div class="demo-item">
         <h2>IDLE State</h2>
@@ -44,14 +44,14 @@
           <sketch-call-status id="idle-status"></sketch-call-status>
         </div>
       </div>
-      
+
       <div class="demo-item">
         <h2>WORKING State</h2>
         <div class="status-display">
           <sketch-call-status id="working-status"></sketch-call-status>
         </div>
       </div>
-      
+
       <div class="demo-item">
         <h2>DISCONNECTED State</h2>
         <div class="status-display">
@@ -62,23 +62,25 @@
 
     <script>
       // Set up the demo after components are defined
-      window.addEventListener('DOMContentLoaded', () => {
+      window.addEventListener("DOMContentLoaded", () => {
         // IDLE status
-        const idleStatus = document.getElementById('idle-status');
+        const idleStatus = document.getElementById("idle-status");
         idleStatus.isIdle = true;
         idleStatus.isDisconnected = false;
         idleStatus.llmCalls = 0;
         idleStatus.toolCalls = [];
-        
+
         // WORKING status
-        const workingStatus = document.getElementById('working-status');
+        const workingStatus = document.getElementById("working-status");
         workingStatus.isIdle = false;
         workingStatus.isDisconnected = false;
         workingStatus.llmCalls = 1;
-        workingStatus.toolCalls = ['bash'];
-        
+        workingStatus.toolCalls = ["bash"];
+
         // DISCONNECTED status
-        const disconnectedStatus = document.getElementById('disconnected-status');
+        const disconnectedStatus = document.getElementById(
+          "disconnected-status",
+        );
         disconnectedStatus.isIdle = true;
         disconnectedStatus.isDisconnected = true;
         disconnectedStatus.llmCalls = 0;
@@ -86,4 +88,4 @@
       });
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/webui/src/web-components/demo/status-indicators.demo.html b/webui/src/web-components/demo/status-indicators.demo.html
index 5fa9400..90131a5 100644
--- a/webui/src/web-components/demo/status-indicators.demo.html
+++ b/webui/src/web-components/demo/status-indicators.demo.html
@@ -57,12 +57,15 @@
   </head>
   <body>
     <h1>Status Indicators Demo</h1>
-    <p>This demo shows the new status indicators without the green connection dot.</p>
-    
+    <p>
+      This demo shows the new status indicators without the green connection
+      dot.
+    </p>
+
     <div class="demo-container">
       <div class="status-container">
         <div class="label">Connected States:</div>
-        
+
         <div class="status-row">
           <div class="status-item">IDLE:</div>
           <div class="status-view">
@@ -73,9 +76,11 @@
               .toolCalls="[]"
             ></sketch-call-status>
           </div>
-          <div class="description">Agent is connected but not actively working</div>
+          <div class="description">
+            Agent is connected but not actively working
+          </div>
         </div>
-        
+
         <div class="status-row">
           <div class="status-item">WORKING:</div>
           <div class="status-view">
@@ -89,10 +94,10 @@
           <div class="description">Agent is connected and actively working</div>
         </div>
       </div>
-      
+
       <div class="status-container">
         <div class="label">Disconnected State:</div>
-        
+
         <div class="status-row">
           <div class="status-item">DISCONNECTED:</div>
           <div class="status-view">
@@ -108,4 +113,4 @@
       </div>
     </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/webui/src/web-components/git-data-service.ts b/webui/src/web-components/git-data-service.ts
index c22b851..69d108d 100644
--- a/webui/src/web-components/git-data-service.ts
+++ b/webui/src/web-components/git-data-service.ts
@@ -1,7 +1,7 @@
 // git-data-service.ts
 // Interface and implementation for fetching Git data
 
-import { DiffFile, GitLogEntry } from '../types';
+import { DiffFile, GitLogEntry } from "../types";
 
 // Re-export DiffFile as GitDiffFile
 export type GitDiffFile = DiffFile;
@@ -45,7 +45,7 @@
    * @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
@@ -75,18 +75,20 @@
 
   async getCommitHistory(initialCommit?: string): Promise<GitLogEntry[]> {
     try {
-      const url = initialCommit 
-        ? `git/recentlog?initialCommit=${encodeURIComponent(initialCommit)}` 
-        : 'git/recentlog';
+      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}`);
+        throw new Error(
+          `Failed to fetch commit history: ${response.statusText}`,
+        );
       }
-      
+
       return await response.json();
     } catch (error) {
-      console.error('Error fetching commit history:', error);
+      console.error("Error fetching commit history:", error);
       throw error;
     }
   }
@@ -95,14 +97,14 @@
     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);
+      console.error("Error fetching diff:", error);
       throw error;
     }
   }
@@ -111,14 +113,14 @@
     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);
+      console.error("Error fetching commit diff:", error);
       throw error;
     }
   }
@@ -126,77 +128,86 @@
   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) {
+      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 '';
+        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 || '';
+      return data.output || "";
     } catch (error) {
-      console.error('Error fetching file content:', 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}`);
+        throw new Error(
+          `Failed to fetch working copy content: ${response.statusText}`,
+        );
       }
-      
+
       const data = await response.json();
-      return data.output || '';
+      return data.output || "";
     } catch (error) {
-      console.error('Error fetching working copy content:', 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',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           path: filePath,
-          content: content
+          content: content,
         }),
       });
-      
+
       if (!response.ok) {
         const errorText = await response.text();
-        throw new Error(`Failed to save file content: ${response.statusText} - ${errorText}`);
+        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);
+      console.error("Error saving file content:", error);
       throw error;
     }
   }
-  
-  async getUnstagedChanges(from: string = 'HEAD'): Promise<GitDiffFile[]> {
+
+  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, '');
+      return await this.getDiff(from, "");
     } catch (error) {
-      console.error('Error fetching unstaged changes:', error);
+      console.error("Error fetching unstaged changes:", error);
       throw error;
     }
   }
@@ -210,11 +221,11 @@
     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';
+      this.baseCommitRef = "sketch-base";
       return this.baseCommitRef;
     } catch (error) {
-      console.error('Error fetching base commit reference:', 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 3c39a55..e5b9108 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -190,14 +190,14 @@
       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;
@@ -646,12 +646,13 @@
             (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");
+          const diff2ViewComp =
+            this.shadowRoot?.querySelector("sketch-diff2-view");
           if (diff2ViewComp) {
             (diff2ViewComp as SketchDiff2View).refreshDiffView();
           }
@@ -1052,7 +1053,7 @@
               .commitHash=${this.currentCommitHash}
             ></sketch-diff-view>
           </div>
-          
+
           <div
             class="diff2-view ${this.viewMode === "diff2" ? "view-active" : ""}"
           >
@@ -1070,7 +1071,6 @@
           >
             <sketch-terminal></sketch-terminal>
           </div>
-
         </div>
       </div>
 
diff --git a/webui/src/web-components/sketch-call-status.test.ts b/webui/src/web-components/sketch-call-status.test.ts
index 7dc16a5..c8a0c28 100644
--- a/webui/src/web-components/sketch-call-status.test.ts
+++ b/webui/src/web-components/sketch-call-status.test.ts
@@ -137,7 +137,9 @@
   );
 });
 
-test("displays IDLE status when isIdle is true and not disconnected", async ({ mount }) => {
+test("displays IDLE status when isIdle is true and not disconnected", async ({
+  mount,
+}) => {
   const component = await mount(SketchCallStatus, {
     props: {
       isIdle: true,
@@ -152,7 +154,9 @@
   await expect(component.locator(".status-banner")).toHaveText("IDLE");
 });
 
-test("displays WORKING status when isIdle is false and not disconnected", async ({ mount }) => {
+test("displays WORKING status when isIdle is false and not disconnected", async ({
+  mount,
+}) => {
   const component = await mount(SketchCallStatus, {
     props: {
       isIdle: false,
@@ -163,11 +167,15 @@
   });
 
   // Check that the status banner has the correct class and text
-  await expect(component.locator(".status-banner")).toHaveClass(/status-working/);
+  await expect(component.locator(".status-banner")).toHaveClass(
+    /status-working/,
+  );
   await expect(component.locator(".status-banner")).toHaveText("WORKING");
 });
 
-test("displays DISCONNECTED status when isDisconnected is true regardless of isIdle", async ({ mount }) => {
+test("displays DISCONNECTED status when isDisconnected is true regardless of isIdle", async ({
+  mount,
+}) => {
   const component = await mount(SketchCallStatus, {
     props: {
       isIdle: true, // Even when idle
@@ -178,6 +186,8 @@
   });
 
   // Check that the status banner has the correct class and text
-  await expect(component.locator(".status-banner")).toHaveClass(/status-disconnected/);
+  await expect(component.locator(".status-banner")).toHaveClass(
+    /status-disconnected/,
+  );
   await expect(component.locator(".status-banner")).toHaveText("DISCONNECTED");
 });
diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index 69211b3..fa530ed 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -15,7 +15,7 @@
 
   @property()
   isIdle: boolean = false;
-  
+
   @property()
   isDisconnected: boolean = false;
 
@@ -114,7 +114,7 @@
       background-color: #e6f4ea;
       color: #0d652d;
     }
-    
+
     .status-disconnected {
       background-color: #ffebee; /* Light red */
       color: #d32f2f; /* Red */
@@ -138,7 +138,7 @@
     // Determine state - disconnected takes precedence, then working vs idle
     let statusClass = "status-idle";
     let statusText = "IDLE";
-    
+
     if (this.isDisconnected) {
       statusClass = "status-disconnected";
       statusText = "DISCONNECTED";
@@ -169,11 +169,7 @@
             ${unsafeHTML(wrenchSVG)}
           </div>
         </div>
-        <div
-          class="status-banner ${statusClass}"
-        >
-          ${statusText}
-        </div>
+        <div class="status-banner ${statusClass}">${statusText}</div>
       </div>
     `;
   }
diff --git a/webui/src/web-components/sketch-diff-empty-view.ts b/webui/src/web-components/sketch-diff-empty-view.ts
index ecee534..753c926 100644
--- a/webui/src/web-components/sketch-diff-empty-view.ts
+++ b/webui/src/web-components/sketch-diff-empty-view.ts
@@ -55,17 +55,25 @@
     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.
+          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.
+          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.
+          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>
     `;
diff --git a/webui/src/web-components/sketch-diff-file-picker.ts b/webui/src/web-components/sketch-diff-file-picker.ts
index c7978ee..c834f12 100644
--- a/webui/src/web-components/sketch-diff-file-picker.ts
+++ b/webui/src/web-components/sketch-diff-file-picker.ts
@@ -41,7 +41,9 @@
     .file-select {
       flex: 1;
       min-width: 200px;
-      max-width: calc(100% - 230px); /* Leave space for the navigation buttons and file info */
+      max-width: calc(
+        100% - 230px
+      ); /* Leave space for the navigation buttons and file info */
       overflow: hidden;
     }
 
@@ -110,7 +112,7 @@
         width: 100%;
         justify-content: space-between;
       }
-      
+
       .file-info {
         margin-left: 0;
         margin-top: 8px;
@@ -121,22 +123,22 @@
 
   updated(changedProperties: Map<string, any>) {
     // If files changed, reset the selection
-    if (changedProperties.has('files')) {
+    if (changedProperties.has("files")) {
       this.updateSelectedIndex();
     }
 
     // If selectedPath changed externally, update the index
-    if (changedProperties.has('selectedPath')) {
+    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) {
@@ -156,33 +158,33 @@
           <select @change=${this.handleSelect}>
             ${this.files.map(
               (file, index) => html`
-                <option 
-                  value=${index} 
+                <option
+                  value=${index}
                   ?selected=${index === this.selectedIndex}
                 >
                   ${this.formatFileOption(file)}
                 </option>
-              `
+              `,
             )}
           </select>
         </div>
-        
+
         <div class="navigation-buttons">
-          <button 
-            @click=${this.handlePrevious} 
+          <button
+            @click=${this.handlePrevious}
             ?disabled=${this.selectedIndex <= 0}
           >
             Previous
           </button>
-          <button 
-            @click=${this.handleNext} 
+          <button
+            @click=${this.handleNext}
             ?disabled=${this.selectedIndex >= this.files.length - 1}
           >
             Next
           </button>
         </div>
 
-        ${this.selectedIndex >= 0 ? this.renderFileInfo() : ''}
+        ${this.selectedIndex >= 0 ? this.renderFileInfo() : ""}
       </div>
     `;
   }
@@ -191,8 +193,8 @@
     const file = this.files[this.selectedIndex];
     return html`
       <div class="file-info">
-        ${this.getFileStatusName(file.status)} | 
-        ${this.selectedIndex + 1} of ${this.files.length}
+        ${this.getFileStatusName(file.status)} | ${this.selectedIndex + 1} of
+        ${this.files.length}
       </div>
     `;
   }
@@ -210,11 +212,16 @@
    */
   getFileStatusSymbol(status: string): string {
     switch (status.toUpperCase()) {
-      case 'A': return '+';
-      case 'M': return 'M';
-      case 'D': return '-';
-      case 'R': return 'R';
-      default: return '?';
+      case "A":
+        return "+";
+      case "M":
+        return "M";
+      case "D":
+        return "-";
+      case "R":
+        return "R";
+      default:
+        return "?";
     }
   }
 
@@ -223,11 +230,16 @@
    */
   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';
+      case "A":
+        return "Added";
+      case "M":
+        return "Modified";
+      case "D":
+        return "Deleted";
+      case "R":
+        return "Renamed";
+      default:
+        return "Unknown";
     }
   }
 
@@ -265,13 +277,13 @@
     if (index >= 0 && index < this.files.length) {
       this.selectedIndex = index;
       this.selectedPath = this.files[index].path;
-      
-      const event = new CustomEvent('file-selected', {
+
+      const event = new CustomEvent("file-selected", {
         detail: { file: this.files[index] },
         bubbles: true,
-        composed: true
+        composed: true,
       });
-      
+
       this.dispatchEvent(event);
     }
   }
@@ -288,7 +300,9 @@
 
     if (this.selectedPath) {
       // Find the file with the matching path
-      const index = this.files.findIndex(file => file.path === this.selectedPath);
+      const index = this.files.findIndex(
+        (file) => file.path === this.selectedPath,
+      );
       if (index >= 0) {
         this.selectedIndex = index;
         return;
@@ -298,18 +312,22 @@
     // 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) {
+    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', {
+      const event = new CustomEvent("file-selected", {
         detail: { file: this.files[0] },
         bubbles: true,
-        composed: true
+        composed: true,
       });
-      
+
       this.dispatchEvent(event);
     }
   }
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 9893875..70b09f7 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -9,9 +9,9 @@
 /**
  * Range type for diff views
  */
-export type DiffRange = 
-  | { type: 'range'; from: string; to: string } 
-  | { type: 'single'; commit: string };
+export type DiffRange =
+  | { type: "range"; from: string; to: string }
+  | { type: "single"; commit: string };
 
 /**
  * Component for selecting commit range for diffs
@@ -22,29 +22,29 @@
   commits: GitLogEntry[] = [];
 
   @state()
-  private rangeType: 'range' | 'single' = 'range';
+  private rangeType: "range" | "single" = "range";
 
   @state()
-  private fromCommit: string = '';
+  private fromCommit: string = "";
 
   @state()
-  private toCommit: string = '';
+  private toCommit: string = "";
 
   @state()
-  private singleCommit: string = '';
+  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');
+    console.log("SketchDiffRangePicker initialized");
   }
 
   static styles = css`
@@ -127,7 +127,7 @@
       color: var(--error-color, #dc3545);
       font-size: 14px;
     }
-    
+
     @media (max-width: 768px) {
       .commit-selector {
         max-width: 100%;
@@ -138,10 +138,10 @@
   connectedCallback() {
     super.connectedCallback();
     // Wait for DOM to be fully loaded to ensure proper initialization order
-    if (document.readyState === 'complete') {
+    if (document.readyState === "complete") {
       this.loadCommits();
     } else {
-      window.addEventListener('load', () => {
+      window.addEventListener("load", () => {
         setTimeout(() => this.loadCommits(), 0); // Give time for provider initialization
       });
     }
@@ -153,9 +153,8 @@
         ${this.loading
           ? html`<div class="loading">Loading commits...</div>`
           : this.error
-          ? html`<div class="error">${this.error}</div>`
-          : this.renderRangePicker()
-        }
+            ? html`<div class="error">${this.error}</div>`
+            : this.renderRangePicker()}
       </div>
     `;
   }
@@ -168,8 +167,8 @@
             type="radio"
             name="rangeType"
             value="range"
-            ?checked=${this.rangeType === 'range'}
-            @change=${() => this.setRangeType('range')}
+            ?checked=${this.rangeType === "range"}
+            @change=${() => this.setRangeType("range")}
           />
           Commit Range
         </label>
@@ -178,18 +177,17 @@
             type="radio"
             name="rangeType"
             value="single"
-            ?checked=${this.rangeType === 'single'}
-            @change=${() => this.setRangeType('single')}
+            ?checked=${this.rangeType === "single"}
+            @change=${() => this.setRangeType("single")}
           />
           Single Commit
         </label>
       </div>
 
       <div class="commit-selectors">
-        ${this.rangeType === 'range'
+        ${this.rangeType === "range"
           ? this.renderRangeSelectors()
-          : this.renderSingleSelector()
-        }
+          : this.renderSingleSelector()}
       </div>
     `;
   }
@@ -204,11 +202,14 @@
           @change=${this.handleFromChange}
         >
           ${this.commits.map(
-            commit => html`
-              <option value=${commit.hash} ?selected=${commit.hash === this.fromCommit}>
+            (commit) => html`
+              <option
+                value=${commit.hash}
+                ?selected=${commit.hash === this.fromCommit}
+              >
                 ${this.formatCommitOption(commit)}
               </option>
-            `
+            `,
           )}
         </select>
       </div>
@@ -219,13 +220,18 @@
           .value=${this.toCommit}
           @change=${this.handleToChange}
         >
-          <option value="" ?selected=${this.toCommit === ''}>Uncommitted Changes</option>
+          <option value="" ?selected=${this.toCommit === ""}>
+            Uncommitted Changes
+          </option>
           ${this.commits.map(
-            commit => html`
-              <option value=${commit.hash} ?selected=${commit.hash === this.toCommit}>
+            (commit) => html`
+              <option
+                value=${commit.hash}
+                ?selected=${commit.hash === this.toCommit}
+              >
                 ${this.formatCommitOption(commit)}
               </option>
-            `
+            `,
           )}
         </select>
       </div>
@@ -242,11 +248,14 @@
           @change=${this.handleSingleChange}
         >
           ${this.commits.map(
-            commit => html`
-              <option value=${commit.hash} ?selected=${commit.hash === this.singleCommit}>
+            (commit) => html`
+              <option
+                value=${commit.hash}
+                ?selected=${commit.hash === this.singleCommit}
+              >
                 ${this.formatCommitOption(commit)}
               </option>
-            `
+            `,
           )}
         </select>
       </div>
@@ -259,11 +268,11 @@
   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(', ')})`;
+      label += ` (${commit.refs.join(", ")})`;
     }
-    
+
     return label;
   }
 
@@ -275,38 +284,40 @@
     this.error = null;
 
     if (!this.gitService) {
-      console.error('GitService was not provided to sketch-diff-range-picker');
+      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'))
+        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;
+
+        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
-        
+        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);
+      console.error("Error loading commits:", error);
       this.error = `Error loading commits: ${error.message}`;
     } finally {
       this.loading = false;
@@ -316,7 +327,7 @@
   /**
    * Handle range type change
    */
-  setRangeType(type: 'range' | 'single') {
+  setRangeType(type: "range" | "single") {
     this.rangeType = type;
     this.dispatchRangeEvent();
   }
@@ -352,16 +363,17 @@
    * 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', {
+    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
+      composed: true,
     });
-    
+
     this.dispatchEvent(event);
   }
 }
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 5ac7459..1b673cd 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -4,7 +4,11 @@
 import "./sketch-diff-range-picker";
 import "./sketch-diff-file-picker";
 import "./sketch-diff-empty-view";
-import { GitDiffFile, GitDataService, DefaultGitDataService } from "./git-data-service";
+import {
+  GitDiffFile,
+  GitDataService,
+  DefaultGitDataService,
+} from "./git-data-service";
 import { DiffRange } from "./sketch-diff-range-picker";
 
 /**
@@ -20,58 +24,64 @@
     try {
       // Validate incoming data
       if (!event.detail || !event.detail.formattedComment) {
-        console.error('Invalid comment data received');
+        console.error("Invalid comment data received");
         return;
       }
-      
+
       // Create and dispatch event using the standardized format
-      const commentEvent = new CustomEvent('diff-comment', {
+      const commentEvent = new CustomEvent("diff-comment", {
         detail: { comment: event.detail.formattedComment },
         bubbles: true,
-        composed: true
+        composed: true,
       });
-      
+
       this.dispatchEvent(commentEvent);
     } catch (error) {
-      console.error('Error handling Monaco comment:', 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');
+      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');
+      const monacoView = this.shadowRoot?.querySelector("sketch-monaco-view");
       if (!monacoView) {
-        console.error('Monaco view not found');
+        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)}`);
+        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);
+      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 = "";
@@ -81,16 +91,16 @@
 
   @state()
   private files: GitDiffFile[] = [];
-  
+
   @state()
-  private currentRange: DiffRange = { type: 'range', from: '', to: 'HEAD' };
+  private currentRange: DiffRange = { type: "range", from: "", to: "HEAD" };
 
   @state()
   private originalCode: string = "";
 
   @state()
   private modifiedCode: string = "";
-  
+
   @state()
   private isRightEditable: boolean = false;
 
@@ -117,18 +127,18 @@
       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;
@@ -136,15 +146,15 @@
       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;
@@ -155,7 +165,7 @@
       white-space: nowrap;
       transition: background-color 0.2s;
     }
-    
+
     .view-toggle-button:hover {
       background-color: #e0e0e0;
     }
@@ -179,14 +189,15 @@
       height: 100%; /* Take full height */
     }
 
-    .loading, .empty-diff {
+    .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;
@@ -210,22 +221,22 @@
       right: 0;
       bottom: 0;
       height: 100%; /* Take full height */
-      width: 100%;  /* Take full width */
+      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');
-    
+    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');
+    const styleElement = document.createElement("style");
     styleElement.textContent = `
       .monaco-aria-container {
         position: absolute !important;
@@ -249,15 +260,21 @@
     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();
-      });
+    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();
     }
@@ -266,18 +283,20 @@
   // 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');
+    const monacoView = this.shadowRoot?.querySelector("sketch-monaco-view");
     if (monacoView) {
-      (monacoView as any).toggleHideUnchangedRegions(this.hideUnchangedRegionsEnabled);
+      (monacoView as any).toggleHideUnchangedRegions(
+        this.hideUnchangedRegionsEnabled,
+      );
     }
   }
-  
+
   render() {
     return html`
       <div class="controls">
@@ -288,28 +307,39 @@
               @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 
+              ${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'}"
+                title="${this.hideUnchangedRegionsEnabled
+                  ? "Expand All"
+                  : "Hide Unchanged"}"
               >
-                ${this.hideUnchangedRegionsEnabled ? 'Expand All' : 'Hide Unchanged'}
+                ${this.hideUnchangedRegionsEnabled
+                  ? "Expand All"
+                  : "Hide Unchanged"}
               </button>
             </div>
           </div>
@@ -317,9 +347,7 @@
       </div>
 
       <div class="diff-container">
-        <div class="diff-content">
-          ${this.renderDiffContent()}
-        </div>
+        <div class="diff-content">${this.renderDiffContent()}</div>
       </div>
     `;
   }
@@ -336,7 +364,7 @@
     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>`;
     }
@@ -369,40 +397,45 @@
       }
 
       // Load diff data based on the current range type
-      if (this.currentRange.type === 'single') {
-        this.files = await this.gitService.getCommitDiff(this.currentRange.commit);
+      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);
+        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 = '';
+        this.selectedFilePath = "";
+        this.originalCode = "";
+        this.modifiedCode = "";
       }
     } catch (error) {
-      console.error('Error loading diff data:', 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 = '';
+      this.selectedFilePath = "";
+      this.originalCode = "";
+      this.modifiedCode = "";
     } finally {
       this.loading = false;
     }
@@ -419,64 +452,75 @@
       let fromCommit: string;
       let toCommit: string;
       let isUnstagedChanges = false;
-      
+
       // Determine the commits to compare based on the current range
-      if (this.currentRange.type === 'single') {
+      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 === '';
+        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') {
+      if (file.status === "A") {
         // Added file: empty original
-        this.originalCode = '';
+        this.originalCode = "";
       } else {
         // For modified, renamed, or deleted files: load original content
-        this.originalCode = await this.gitService.getFileContent(file.old_hash || '');
+        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);
+          this.modifiedCode = await this.gitService.getWorkingCopyContent(
+            file.path,
+          );
         } catch (error) {
-          if (file.status === 'D') {
+          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 = '';
+            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);
+            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') {
+        if (file.status === "D") {
           // Deleted file: empty modified
-          this.modifiedCode = '';
+          this.modifiedCode = "";
         } else {
           // Added/modified/renamed: use the content from git
-          this.modifiedCode = await this.gitService.getFileContent(file.new_hash || '');
+          this.modifiedCode = await this.gitService.getFileContent(
+            file.new_hash || "",
+          );
         }
       }
-      
+
       // Don't make deleted files editable
-      if (file.status === 'D') {
+      if (file.status === "D") {
         this.isRightEditable = false;
       }
     } catch (error) {
-      console.error('Error loading file content:', error);
+      console.error("Error loading file content:", error);
       this.error = `Error loading file content: ${error.message}`;
       this.isRightEditable = false;
     } finally {
@@ -489,9 +533,9 @@
    */
   handleRangeChange(event: CustomEvent) {
     const { range } = event.detail;
-    console.log('Range changed:', range);
+    console.log("Range changed:", range);
     this.currentRange = range;
-    
+
     // Load diff data for the new range
     this.loadDiffData();
   }
@@ -507,7 +551,7 @@
 
   /**
    * 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
@@ -515,15 +559,17 @@
    */
   refreshDiffView() {
     // First refresh the range picker to get updated branch information
-    const rangePicker = this.shadowRoot?.querySelector('sketch-diff-range-picker');
+    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 };
+      this.currentRange = { type: "single", commit: this.commit };
     }
-    
+
     // Then reload diff data based on the current range
     this.loadDiffData();
   }
diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index 590ec5e..97fce93 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -581,20 +581,20 @@
     try {
       // Disable semantic validation globally for TypeScript/JavaScript
       monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: true
+        noSemanticValidation: true,
       });
       monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: true
+        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,
+          // We'll adjust individual editor settings after creation
+          readOnly: true,
           theme: "vs", // Always use light mode
           renderSideBySide: true,
           ignoreTrimWhitespace: false,
@@ -623,8 +623,8 @@
 
       // Create or update models
       this.updateModels();
-          // Set up content change listener
-          this.setupContentChangeListener();
+      // Set up content change listener
+      this.setupContentChangeListener();
 
       // Force layout recalculation after a short delay
       // This ensures the editor renders properly, especially with single files
diff --git a/webui/src/web-components/sketch-network-status.test.ts b/webui/src/web-components/sketch-network-status.test.ts
index 6930910..b15fbfd 100644
--- a/webui/src/web-components/sketch-network-status.test.ts
+++ b/webui/src/web-components/sketch-network-status.test.ts
@@ -11,11 +11,16 @@
   });
 
   // The status container should exist but be hidden with display: none
-  await expect(component.locator(".status-container")).toHaveCSS("display", "none");
+  await expect(component.locator(".status-container")).toHaveCSS(
+    "display",
+    "none",
+  );
 });
 
 // Test that the network status component remains invisible regardless of connection state
-test("network status component is not visible when disconnected", async ({ mount }) => {
+test("network status component is not visible when disconnected", async ({
+  mount,
+}) => {
   const component = await mount(SketchNetworkStatus, {
     props: {
       connection: "disconnected",
@@ -24,5 +29,8 @@
   });
 
   // The status container should exist but be hidden with display: none
-  await expect(component.locator(".status-container")).toHaveCSS("display", "none");
+  await expect(component.locator(".status-container")).toHaveCSS(
+    "display",
+    "none",
+  );
 });
diff --git a/webui/src/web-components/sketch-network-status.ts b/webui/src/web-components/sketch-network-status.ts
index 7029975..f604bd5 100644
--- a/webui/src/web-components/sketch-network-status.ts
+++ b/webui/src/web-components/sketch-network-status.ts
@@ -37,10 +37,7 @@
   render() {
     // We no longer show any content as the dot is being removed
     // The connection status will now be handled by the call-status component
-    return html`
-      <div class="status-container">
-      </div>
-    `;
+    return html` <div class="status-container"></div> `;
   }
 }
 
diff --git a/webui/src/web-components/sketch-view-mode-select.ts b/webui/src/web-components/sketch-view-mode-select.ts
index df84a87..80eb0e6 100644
--- a/webui/src/web-components/sketch-view-mode-select.ts
+++ b/webui/src/web-components/sketch-view-mode-select.ts
@@ -139,7 +139,7 @@
           <span class="tab-icon">±</span>
           <span>Diff</span>
         </button>
-        
+
         <button
           id="showTerminalButton"
           class="tab-btn ${this.activeMode === "terminal" ? "active" : ""}"