diff --git a/loop/webui/src/web-components/sketch-charts.ts b/loop/webui/src/web-components/sketch-charts.ts
index 3bde418..a933c44 100644
--- a/loop/webui/src/web-components/sketch-charts.ts
+++ b/loop/webui/src/web-components/sketch-charts.ts
@@ -77,7 +77,7 @@
   }
 
   private calculateCumulativeCostData(
-    messages: TimelineMessage[]
+    messages: TimelineMessage[],
   ): { timestamp: Date; cost: number }[] {
     if (!messages || messages.length === 0) {
       return [];
@@ -124,14 +124,14 @@
       // Create unique indexes for all messages
       const messageIndexMap = new Map<string, number>();
       let messageIdx = 0;
-      
+
       // First pass: Process parent messages
       allMessages.forEach((msg, index) => {
         // Create a unique ID for each message to track its position
         const msgId = msg.timestamp ? msg.timestamp.toString() : `msg-${index}`;
         messageIndexMap.set(msgId, messageIdx++);
       });
-      
+
       // Process tool calls from messages to account for filtered out tool messages
       const toolCallData: any[] = [];
       allMessages.forEach((msg) => {
@@ -140,35 +140,35 @@
             if (toolCall.result_message) {
               // Add this tool result message to our data
               const resultMsg = toolCall.result_message;
-              
+
               // Important: use the original message's idx to maintain the correct order
               // The original message idx value is what we want to show in the chart
               if (resultMsg.idx !== undefined) {
                 // If the tool call has start/end times, add it to bar data, otherwise to point data
                 if (resultMsg.start_time && resultMsg.end_time) {
                   toolCallData.push({
-                    type: 'bar',
-                    index: resultMsg.idx,  // Use actual idx from message
-                    message_type: 'tool',
-                    content: resultMsg.content || '',
-                    tool_name: resultMsg.tool_name || toolCall.name || '',
-                    tool_input: toolCall.input || '',
-                    tool_result: resultMsg.tool_result || '',
+                    type: "bar",
+                    index: resultMsg.idx, // Use actual idx from message
+                    message_type: "tool",
+                    content: resultMsg.content || "",
+                    tool_name: resultMsg.tool_name || toolCall.name || "",
+                    tool_input: toolCall.input || "",
+                    tool_result: resultMsg.tool_result || "",
                     start_time: new Date(resultMsg.start_time).toISOString(),
                     end_time: new Date(resultMsg.end_time).toISOString(),
-                    message: JSON.stringify(resultMsg, null, 2)
+                    message: JSON.stringify(resultMsg, null, 2),
                   });
                 } else if (resultMsg.timestamp) {
                   toolCallData.push({
-                    type: 'point',
-                    index: resultMsg.idx,  // Use actual idx from message
-                    message_type: 'tool',
-                    content: resultMsg.content || '',
-                    tool_name: resultMsg.tool_name || toolCall.name || '',
-                    tool_input: toolCall.input || '',
-                    tool_result: resultMsg.tool_result || '',
+                    type: "point",
+                    index: resultMsg.idx, // Use actual idx from message
+                    message_type: "tool",
+                    content: resultMsg.content || "",
+                    tool_name: resultMsg.tool_name || toolCall.name || "",
+                    tool_input: toolCall.input || "",
+                    tool_result: resultMsg.tool_result || "",
                     time: new Date(resultMsg.timestamp).toISOString(),
-                    message: JSON.stringify(resultMsg, null, 2)
+                    message: JSON.stringify(resultMsg, null, 2),
                   });
                 }
               }
@@ -262,21 +262,29 @@
             message: JSON.stringify(msg, null, 2), // Full message for detailed inspection
           };
         });
-        
+
       // Add tool call data to the appropriate arrays
-      const toolBarData = toolCallData.filter(d => d.type === 'bar').map(d => {
-        delete d.type;
-        return d;
-      });
-      
-      const toolPointData = toolCallData.filter(d => d.type === 'point').map(d => {
-        delete d.type;
-        return d;
-      });
+      const toolBarData = toolCallData
+        .filter((d) => d.type === "bar")
+        .map((d) => {
+          delete d.type;
+          return d;
+        });
+
+      const toolPointData = toolCallData
+        .filter((d) => d.type === "point")
+        .map((d) => {
+          delete d.type;
+          return d;
+        });
 
       // Check if we have any data to display
-      if (barData.length === 0 && pointData.length === 0 && 
-          toolBarData.length === 0 && toolPointData.length === 0) {
+      if (
+        barData.length === 0 &&
+        pointData.length === 0 &&
+        toolBarData.length === 0 &&
+        toolPointData.length === 0
+      ) {
         return null;
       }
 
@@ -412,16 +420,16 @@
         <div class="chart-section">
           <h3>Dollar Usage Over Time</h3>
           <div class="chart-content">
-          ${this.chartData.length > 0 ? 
-            html`<vega-embed .spec=${costSpec}></vega-embed>` 
-            : html`<p>No cost data available to display.</p>`}
+            ${this.chartData.length > 0
+              ? html`<vega-embed .spec=${costSpec}></vega-embed>`
+              : html`<p>No cost data available to display.</p>`}
           </div>
         </div>
         <div class="chart-section">
           <h3>Message Timeline</h3>
           <div class="chart-content">
-          ${messagesSpec?.data ? 
-              html`<vega-embed .spec=${messagesSpec}></vega-embed>`
+            ${messagesSpec?.data
+              ? html`<vega-embed .spec=${messagesSpec}></vega-embed>`
               : html`<p>No messages available to display.</p>`}
           </div>
         </div>