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>