diff --git a/loop/webui/src/web-components/sketch-timeline.ts b/loop/webui/src/web-components/sketch-timeline.ts
index 8122db7..7471ded 100644
--- a/loop/webui/src/web-components/sketch-timeline.ts
+++ b/loop/webui/src/web-components/sketch-timeline.ts
@@ -1,10 +1,10 @@
-import {css, html, LitElement} from 'lit';
-import {repeat} from 'lit/directives/repeat.js';
-import {customElement, property} from 'lit/decorators.js';
-import {State, TimelineMessage} from '../types';
-import './sketch-timeline-message'
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { customElement, property } from "lit/decorators.js";
+import { State, TimelineMessage } from "../types";
+import "./sketch-timeline-message";
 
-@customElement('sketch-timeline')
+@customElement("sketch-timeline")
 export class SketchTimeline extends LitElement {
   @property()
   messages: TimelineMessage[] = [];
@@ -14,58 +14,58 @@
   // shadow DOM node, so they won't leak out or collide with CSS declared in
   // other components or the containing web page (...unless you want it to do that).
   static styles = css`
-  /* Hide views initially to prevent flash of content */
-  .timeline-container .timeline,
-  .timeline-container .diff-view,
-  .timeline-container .chart-view,
-  .timeline-container .terminal-view {
-    visibility: hidden;
-  }
-  
-  /* Will be set by JavaScript once we know which view to display */
-  .timeline-container.view-initialized .timeline,
-  .timeline-container.view-initialized .diff-view,
-  .timeline-container.view-initialized .chart-view,
-  .timeline-container.view-initialized .terminal-view {
-    visibility: visible;
-  }
+    /* Hide views initially to prevent flash of content */
+    .timeline-container .timeline,
+    .timeline-container .diff-view,
+    .timeline-container .chart-view,
+    .timeline-container .terminal-view {
+      visibility: hidden;
+    }
 
-  .timeline-container {
-    width: 100%;
-    position: relative;
-  }
-  
-  /* Timeline styles that should remain unchanged */
-  .timeline {
-    position: relative;
-    margin: 10px 0;
-    scroll-behavior: smooth;
-  }
-  
-  .timeline::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 15px;
-    width: 2px;
-    background: #e0e0e0;
-    border-radius: 1px;
-  }
-  
-  /* Hide the timeline vertical line when there are no messages */
-  .timeline.empty::before {
-    display: none;
-  }  
+    /* Will be set by JavaScript once we know which view to display */
+    .timeline-container.view-initialized .timeline,
+    .timeline-container.view-initialized .diff-view,
+    .timeline-container.view-initialized .chart-view,
+    .timeline-container.view-initialized .terminal-view {
+      visibility: visible;
+    }
+
+    .timeline-container {
+      width: 100%;
+      position: relative;
+    }
+
+    /* Timeline styles that should remain unchanged */
+    .timeline {
+      position: relative;
+      margin: 10px 0;
+      scroll-behavior: smooth;
+    }
+
+    .timeline::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 15px;
+      width: 2px;
+      background: #e0e0e0;
+      border-radius: 1px;
+    }
+
+    /* Hide the timeline vertical line when there are no messages */
+    .timeline.empty::before {
+      display: none;
+    }
   `;
 
   constructor() {
     super();
-    
+
     // Binding methods
     this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
   }
-  
+
   /**
    * Handle showCommitDiff event
    */
@@ -73,10 +73,10 @@
     const { commitHash } = event.detail;
     if (commitHash) {
       // Bubble up the event to the app shell
-      const newEvent = new CustomEvent('show-commit-diff', {
+      const newEvent = new CustomEvent("show-commit-diff", {
         detail: { commitHash },
         bubbles: true,
-        composed: true
+        composed: true,
       });
       this.dispatchEvent(newEvent);
     }
@@ -85,37 +85,49 @@
   // See https://lit.dev/docs/components/lifecycle/
   connectedCallback() {
     super.connectedCallback();
-    
+
     // Listen for showCommitDiff events from the renderer
-    document.addEventListener('showCommitDiff', this._handleShowCommitDiff as EventListener);
+    document.addEventListener(
+      "showCommitDiff",
+      this._handleShowCommitDiff as EventListener,
+    );
   }
 
   // See https://lit.dev/docs/components/lifecycle/
   disconnectedCallback() {
     super.disconnectedCallback();
-    
+
     // Remove event listeners
-    document.removeEventListener('showCommitDiff', this._handleShowCommitDiff as EventListener);
+    document.removeEventListener(
+      "showCommitDiff",
+      this._handleShowCommitDiff as EventListener,
+    );
   }
 
   messageKey(message: TimelineMessage): string {
     // If the message has tool calls, and any of the tool_calls get a response, we need to
     // re-render that message.
-    const toolCallResponses = message.tool_calls?.filter((tc)=>tc.result_message).map((tc)=>tc.tool_call_id).join('-');
+    const toolCallResponses = message.tool_calls
+      ?.filter((tc) => tc.result_message)
+      .map((tc) => tc.tool_call_id)
+      .join("-");
     return `message-${message.idx}-${toolCallResponses}`;
   }
 
   render() {
     return html`
-    <div class="timeline-container">
-      ${repeat(this.messages, this.messageKey, (message, index) => {        
-        let previousMessage: TimelineMessage;
-        if (index > 0) {
-          previousMessage = this.messages[index-1];
-        } 
-        return html`<sketch-timeline-message .message=${message} .previousMessage=${previousMessage}></sketch-timeline-message>`;
-      })}
-    </div>
+      <div class="timeline-container">
+        ${repeat(this.messages, this.messageKey, (message, index) => {
+          let previousMessage: TimelineMessage;
+          if (index > 0) {
+            previousMessage = this.messages[index - 1];
+          }
+          return html`<sketch-timeline-message
+            .message=${message}
+            .previousMessage=${previousMessage}
+          ></sketch-timeline-message>`;
+        })}
+      </div>
     `;
   }
 }
@@ -124,4 +136,4 @@
   interface HTMLElementTagNameMap {
     "sketch-timeline": SketchTimeline;
   }
-}
\ No newline at end of file
+}