diff --git a/loop/webui/src/web-components/sketch-view-mode-select.ts b/loop/webui/src/web-components/sketch-view-mode-select.ts
index b55282a..d67da0b 100644
--- a/loop/webui/src/web-components/sketch-view-mode-select.ts
+++ b/loop/webui/src/web-components/sketch-view-mode-select.ts
@@ -1,10 +1,10 @@
-import {css, html, LitElement} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
-import {DataManager, ConnectionStatus} from '../data';
-import {State, TimelineMessage} from '../types';
-import './sketch-container-status';
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { DataManager, ConnectionStatus } from "../data";
+import { State, TimelineMessage } from "../types";
+import "./sketch-container-status";
 
-@customElement('sketch-view-mode-select')
+@customElement("sketch-view-mode-select")
 export class SketchViewModeSelect extends LitElement {
   // Current active mode
   @property()
@@ -17,45 +17,45 @@
   // other components or the containing web page (...unless you want it to do that).
 
   static styles = css`
-/* View Mode Button Styles */
-.view-mode-buttons {
-  display: flex;
-  gap: 8px;
-  margin-right: 10px;
-}
+    /* View Mode Button Styles */
+    .view-mode-buttons {
+      display: flex;
+      gap: 8px;
+      margin-right: 10px;
+    }
 
-.emoji-button {
-  font-size: 18px;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  padding: 0;
-  line-height: 1;
-}
+    .emoji-button {
+      font-size: 18px;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: white;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      padding: 0;
+      line-height: 1;
+    }
 
-.emoji-button:hover {
-  background-color: #f0f0f0;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+    .emoji-button:hover {
+      background-color: #f0f0f0;
+      transform: translateY(-2px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
 
-.emoji-button.active {
-  background-color: #e6f7ff;
-  border-color: #1890ff;
-  color: #1890ff;
-}
-`;
-  
+    .emoji-button.active {
+      background-color: #e6f7ff;
+      border-color: #1890ff;
+      color: #1890ff;
+    }
+  `;
+
   constructor() {
     super();
-    
+
     // Binding methods
     this._handleViewModeClick = this._handleViewModeClick.bind(this);
     this._handleUpdateActiveMode = this._handleUpdateActiveMode.bind(this);
@@ -64,24 +64,27 @@
   // See https://lit.dev/docs/components/lifecycle/
   connectedCallback() {
     super.connectedCallback();
-    
+
     // Listen for update-active-mode events
-    this.addEventListener('update-active-mode', this._handleUpdateActiveMode as EventListener);
+    this.addEventListener(
+      "update-active-mode",
+      this._handleUpdateActiveMode as EventListener,
+    );
   }
-  
+
   /**
    * Handle view mode button clicks
    */
   private _handleViewModeClick(mode: "chat" | "diff" | "charts" | "terminal") {
     // Dispatch a custom event to notify the app shell to change the view
-    const event = new CustomEvent('view-mode-select', {
+    const event = new CustomEvent("view-mode-select", {
       detail: { mode },
       bubbles: true,
-      composed: true
+      composed: true,
     });
     this.dispatchEvent(event);
   }
-  
+
   /**
    * Handle updates to the active mode
    */
@@ -95,9 +98,12 @@
   // See https://lit.dev/docs/components/lifecycle/
   disconnectedCallback() {
     super.disconnectedCallback();
-    
+
     // Remove event listeners
-    this.removeEventListener('update-active-mode', this._handleUpdateActiveMode as EventListener);
+    this.removeEventListener(
+      "update-active-mode",
+      this._handleUpdateActiveMode as EventListener,
+    );
   }
 
   render() {
@@ -105,33 +111,33 @@
       <div class="view-mode-buttons">
         <button
           id="showConversationButton"
-          class="emoji-button ${this.activeMode === 'chat' ? 'active' : ''}"
+          class="emoji-button ${this.activeMode === "chat" ? "active" : ""}"
           title="Conversation View"
-          @click=${() => this._handleViewModeClick('chat')}
+          @click=${() => this._handleViewModeClick("chat")}
         >
           💬
         </button>
         <button
           id="showDiffButton"
-          class="emoji-button ${this.activeMode === 'diff' ? 'active' : ''}"
+          class="emoji-button ${this.activeMode === "diff" ? "active" : ""}"
           title="Diff View"
-          @click=${() => this._handleViewModeClick('diff')}
+          @click=${() => this._handleViewModeClick("diff")}
         >
           ±
         </button>
         <button
           id="showChartsButton"
-          class="emoji-button ${this.activeMode === 'charts' ? 'active' : ''}"
+          class="emoji-button ${this.activeMode === "charts" ? "active" : ""}"
           title="Charts View"
-          @click=${() => this._handleViewModeClick('charts')}
+          @click=${() => this._handleViewModeClick("charts")}
         >
           📈
         </button>
         <button
           id="showTerminalButton"
-          class="emoji-button ${this.activeMode === 'terminal' ? 'active' : ''}"
+          class="emoji-button ${this.activeMode === "terminal" ? "active" : ""}"
           title="Terminal View"
-          @click=${() => this._handleViewModeClick('terminal')}
+          @click=${() => this._handleViewModeClick("terminal")}
         >
           💻
         </button>
@@ -144,4 +150,4 @@
   interface HTMLElementTagNameMap {
     "sketch-view-mode-select": SketchViewModeSelect;
   }
-}
\ No newline at end of file
+}