diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index cc16115..22d4b3f 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -194,48 +194,48 @@
    */
   private scrollToBottom(): void {
     if (!this.scrollContainer.value) return;
-    
+
     // Use instant scroll to ensure we reach the exact bottom
     this.scrollContainer.value.scrollTo({
       top: this.scrollContainer.value.scrollHeight,
       behavior: "instant",
     });
   }
-  
+
   /**
    * Scroll to bottom with retry logic to handle dynamic content
    */
   private scrollToBottomWithRetry(): void {
     if (!this.scrollContainer.value) return;
-    
+
     let attempts = 0;
     const maxAttempts = 5;
     const retryInterval = 50;
-    
+
     const tryScroll = () => {
       if (!this.scrollContainer.value) return;
-      
+
       const container = this.scrollContainer.value;
       const targetScrollTop = container.scrollHeight - container.clientHeight;
-      
+
       // Scroll to the calculated position
       container.scrollTo({
         top: targetScrollTop,
         behavior: "instant",
       });
-      
+
       attempts++;
-      
+
       // Check if we're actually at the bottom
       const actualScrollTop = container.scrollTop;
       const isAtBottom = Math.abs(targetScrollTop - actualScrollTop) <= 1;
-      
+
       if (!isAtBottom && attempts < maxAttempts) {
         // Still not at bottom and we have attempts left, try again
         setTimeout(tryScroll, retryInterval);
       }
     };
-    
+
     tryScroll();
   }
 
@@ -276,13 +276,13 @@
 
   private _handleScroll(event) {
     if (!this.scrollContainer.value) return;
-    
+
     const container = this.scrollContainer.value;
     const isAtBottom =
       Math.abs(
-        container.scrollHeight - container.clientHeight - container.scrollTop
+        container.scrollHeight - container.clientHeight - container.scrollTop,
       ) <= 3; // Increased tolerance to 3px for better detection
-    
+
     if (isAtBottom) {
       this.scrollingState = "pinToLatest";
     } else {
@@ -350,15 +350,15 @@
 
               <p class="welcome-box-content">
                 Ask it to implement a task or answer a question in the chat box
-                below. It can edit and run your code, all in the container. Sketch
-                will create commits in a newly created git branch, which you can
-                look at and comment on in the Diff tab. Once you're done, you'll
-                find that branch available in your (original) repo.
+                below. It can edit and run your code, all in the container.
+                Sketch will create commits in a newly created git branch, which
+                you can look at and comment on in the Diff tab. Once you're
+                done, you'll find that branch available in your (original) repo.
               </p>
               <p class="welcome-box-content">
                 Because Sketch operates a container per session, you can run
-                Sketch in parallel to work on multiple ideas or even the same idea
-                with different approaches.
+                Sketch in parallel to work on multiple ideas or even the same
+                idea with different approaches.
               </p>
             </div>
           </div>
diff --git a/webui/src/web-components/sketch-todo-panel.ts b/webui/src/web-components/sketch-todo-panel.ts
index d8e34f0..540397b 100644
--- a/webui/src/web-components/sketch-todo-panel.ts
+++ b/webui/src/web-components/sketch-todo-panel.ts
@@ -49,7 +49,12 @@
       overflow-y: auto;
       padding: 8px;
       padding-bottom: 20px; /* Extra bottom padding for better scrolling */
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
       font-size: 12px;
       line-height: 1.4;
       /* Ensure scrollbar is always accessible */
@@ -102,16 +107,12 @@
       border-left: 3px solid #e0e0e0;
     }
 
-
-
     .todo-status-icon {
       font-size: 14px;
       margin-top: 1px;
       flex-shrink: 0;
     }
 
-
-
     .todo-main {
       flex: 1;
       min-width: 0;
@@ -124,8 +125,6 @@
       word-wrap: break-word;
     }
 
-
-
     .todo-header-text {
       display: flex;
       align-items: center;
@@ -153,8 +152,12 @@
     }
 
     @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
     }
   `;
 
@@ -175,21 +178,19 @@
     }
   }
 
-
-
   private renderTodoItem(item: TodoItem) {
-    const statusIcon = {
-      queued: '⚪',
-      'in-progress': '🦉',
-      completed: '✅'
-    }[item.status] || '?';
+    const statusIcon =
+      {
+        queued: "⚪",
+        "in-progress": "🦉",
+        completed: "✅",
+      }[item.status] || "?";
 
     return html`
       <div class="todo-item ${item.status}">
         <div class="todo-status-icon">${statusIcon}</div>
         <div class="todo-main">
           <div class="todo-content-text">${item.task}</div>
-
         </div>
       </div>
     `;
@@ -201,7 +202,16 @@
     }
 
     const todoIcon = html`
-      <svg class="todo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        class="todo-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path d="M9 11l3 3L22 4"></path>
         <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
       </svg>
@@ -217,21 +227,25 @@
       `;
     } else if (this.error) {
       contentElement = html`
-        <div class="todo-content error">
-          Error: ${this.error}
-        </div>
+        <div class="todo-content error">Error: ${this.error}</div>
       `;
-    } else if (!this.todoList || !this.todoList.items || this.todoList.items.length === 0) {
+    } else if (
+      !this.todoList ||
+      !this.todoList.items ||
+      this.todoList.items.length === 0
+    ) {
       contentElement = html`
-        <div class="todo-content empty">
-          No todos available
-        </div>
+        <div class="todo-content empty">No todos available</div>
       `;
     } else {
       const totalCount = this.todoList.items.length;
-      const completedCount = this.todoList.items.filter(item => item.status === 'completed').length;
-      const inProgressCount = this.todoList.items.filter(item => item.status === 'in-progress').length;
-      
+      const completedCount = this.todoList.items.filter(
+        (item) => item.status === "completed",
+      ).length;
+      const inProgressCount = this.todoList.items.filter(
+        (item) => item.status === "in-progress",
+      ).length;
+
       contentElement = html`
         <div class="todo-header">
           <div class="todo-header-text">
@@ -241,14 +255,12 @@
           </div>
         </div>
         <div class="todo-content">
-          ${this.todoList.items.map(item => this.renderTodoItem(item))}
+          ${this.todoList.items.map((item) => this.renderTodoItem(item))}
         </div>
       `;
     }
 
-    return html`
-      ${contentElement}
-    `;
+    return html` ${contentElement} `;
   }
 }
 
@@ -256,4 +268,4 @@
   interface HTMLElementTagNameMap {
     "sketch-todo-panel": SketchTodoPanel;
   }
-}
\ No newline at end of file
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
index 556d1be..a1f8ea0 100644
--- a/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
@@ -21,9 +21,7 @@
   render() {
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          🧹 Clear console logs
-        </span>
+        <span slot="summary" class="summary-text"> 🧹 Clear console logs </span>
         <div slot="input">
           <div>Clear all console logs</div>
         </div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-click.ts b/webui/src/web-components/sketch-tool-card-browser-click.ts
index c19114c..9264a64 100644
--- a/webui/src/web-components/sketch-tool-card-browser-click.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-click.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .selector-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -41,9 +41,7 @@
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          🖱️ ${selector}
-        </span>
+        <span slot="summary" class="summary-text"> 🖱️ ${selector} </span>
         <div slot="input">
           <div>Click: <span class="selector-input">${selector}</span></div>
         </div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-eval.ts b/webui/src/web-components/sketch-tool-card-browser-eval.ts
index 15fcc16..8a1ec54 100644
--- a/webui/src/web-components/sketch-tool-card-browser-eval.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-eval.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .expression-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -40,7 +40,8 @@
     }
 
     // Truncate expression for summary if too long
-    const displayExpression = expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
+    const displayExpression =
+      expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
@@ -48,7 +49,9 @@
           📱 ${displayExpression}
         </span>
         <div slot="input">
-          <div>Evaluate: <span class="expression-input">${expression}</span></div>
+          <div>
+            Evaluate: <span class="expression-input">${expression}</span>
+          </div>
         </div>
         <div slot="result">
           ${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-get-text.ts b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
index b093650..e97bf70 100644
--- a/webui/src/web-components/sketch-tool-card-browser-get-text.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .selector-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -41,11 +41,11 @@
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          📖 ${selector}
-        </span>
+        <span slot="summary" class="summary-text"> 📖 ${selector} </span>
         <div slot="input">
-          <div>Get text from: <span class="selector-input">${selector}</span></div>
+          <div>
+            Get text from: <span class="selector-input">${selector}</span>
+          </div>
         </div>
         <div slot="result">
           ${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-navigate.ts b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
index 37efbd1..cc9779e 100644
--- a/webui/src/web-components/sketch-tool-card-browser-navigate.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .url-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -41,9 +41,7 @@
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          🌐 ${url}
-        </span>
+        <span slot="summary" class="summary-text"> 🌐 ${url} </span>
         <div slot="input">
           <div>Navigate to: <span class="url-input">${url}</span></div>
         </div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-read-image.ts b/webui/src/web-components/sketch-tool-card-browser-read-image.ts
index 554feee..cdb96cc 100644
--- a/webui/src/web-components/sketch-tool-card-browser-read-image.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-read-image.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .path-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -40,13 +40,11 @@
     }
 
     // Show just the filename in summary
-    const filename = path.split('/').pop() || path;
+    const filename = path.split("/").pop() || path;
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          🖼️ ${filename}
-        </span>
+        <span slot="summary" class="summary-text"> 🖼️ ${filename} </span>
         <div slot="input">
           <div>Read image: <span class="path-input">${path}</span></div>
         </div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
index 55d080d..8d1debb 100644
--- a/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .limit-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -45,7 +45,10 @@
           📜 Console logs (${limit})
         </span>
         <div slot="input">
-          <div>Get recent console logs: <span class="limit-input">limit ${limit}</span></div>
+          <div>
+            Get recent console logs:
+            <span class="limit-input">limit ${limit}</span>
+          </div>
         </div>
         <div slot="result">
           ${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-resize.ts b/webui/src/web-components/sketch-tool-card-browser-resize.ts
index 0d04091..2d9fde9 100644
--- a/webui/src/web-components/sketch-tool-card-browser-resize.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-resize.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .size-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -43,11 +43,11 @@
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          🖼️ ${width}x${height}
-        </span>
+        <span slot="summary" class="summary-text"> 🖼️ ${width}x${height} </span>
         <div slot="input">
-          <div>Resize to: <span class="size-input">${width}x${height}</span></div>
+          <div>
+            Resize to: <span class="size-input">${width}x${height}</span>
+          </div>
         </div>
         <div slot="result">
           ${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
index 4070882..be765d0 100644
--- a/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .selector-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -41,11 +41,11 @@
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          🔄 ${selector}
-        </span>
+        <span slot="summary" class="summary-text"> 🔄 ${selector} </span>
         <div slot="input">
-          <div>Scroll into view: <span class="selector-input">${selector}</span></div>
+          <div>
+            Scroll into view: <span class="selector-input">${selector}</span>
+          </div>
         </div>
         <div slot="result">
           ${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-type.ts b/webui/src/web-components/sketch-tool-card-browser-type.ts
index 1f58eb8..3cddd3f 100644
--- a/webui/src/web-components/sketch-tool-card-browser-type.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-type.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .selector-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -25,7 +25,7 @@
       display: inline-block;
       word-break: break-all;
     }
-    
+
     .text-input {
       font-family: monospace;
       background: rgba(0, 100, 0, 0.05);
diff --git a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
index eb3306b..d5fbda9 100644
--- a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
@@ -16,7 +16,7 @@
       color: #444;
       word-break: break-all;
     }
-    
+
     .selector-input {
       font-family: monospace;
       background: rgba(0, 0, 0, 0.05);
@@ -41,9 +41,7 @@
 
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          ⏳ ${selector}
-        </span>
+        <span slot="summary" class="summary-text"> ⏳ ${selector} </span>
         <div slot="input">
           <div>Wait for: <span class="selector-input">${selector}</span></div>
         </div>