diff --git a/loop/webui/src/web-components/demo/demo.css b/loop/webui/src/web-components/demo/demo.css
index bb9750e..11164a1 100644
--- a/loop/webui/src/web-components/demo/demo.css
+++ b/loop/webui/src/web-components/demo/demo.css
@@ -1,9 +1,14 @@
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
   margin: 0;
   padding: 20px;
   padding-bottom: 100px; /* Adjusted padding for chat container */
   color: #333;
   line-height: 1.4; /* Reduced line height for more compact text */
-}
\ No newline at end of file
+}
diff --git a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
index 092ad7c..ef335ed 100644
--- a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
@@ -2,12 +2,14 @@
   <head>
     <title>sketch-app-shell demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script src="/dist/web-components/sketch-app-shell.js" type="module"></script>
+    <script
+      src="/dist/web-components/sketch-app-shell.js"
+      type="module"
+    ></script>
   </head>
   <body>
     <h1>sketch-app-shell demo</h1>
 
     <sketch-app-shell></sketch-app-shell>
-
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-charts.demo.html b/loop/webui/src/web-components/demo/sketch-charts.demo.html
index b525785..d9b714d 100644
--- a/loop/webui/src/web-components/demo/sketch-charts.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-charts.demo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -12,8 +12,13 @@
       }
 
       body {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-          Roboto, sans-serif;
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          sans-serif;
       }
     </style>
   </head>
diff --git a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
index 4806035..99d581b 100644
--- a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
@@ -2,24 +2,26 @@
   <head>
     <title>sketch-chat-input demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script src="/dist/web-components/sketch-chat-input.js" type="module"></script>
+    <script
+      src="/dist/web-components/sketch-chat-input.js"
+      type="module"
+    ></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        const chatInput = document.querySelector('sketch-chat-input');
+        const chatInput = document.querySelector("sketch-chat-input");
         console.log("chatInput: ", chatInput);
         chatInput.content = "hi";
         chatInput.addEventListener("send-chat", (evt) => {
-          console.log('send chat event: ', evt);
+          console.log("send chat event: ", evt);
           const msgDiv = document.querySelector("#chat-messages");
           const newDiv = document.createElement("div");
-          newDiv.innerText = evt.detail.message; 
+          newDiv.innerText = evt.detail.message;
           msgDiv.append(newDiv);
-          chatInput.content = '';
+          chatInput.content = "";
         });
       });
     </script>
-
   </head>
   <body>
     <h1>sketch-chat-input demo</h1>
@@ -27,6 +29,5 @@
     <div id="chat-messages"></div>
 
     <sketch-chat-input></sketch-chat-input>
-
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-container-status.demo.html b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
index bd2544d..a35e881 100644
--- a/loop/webui/src/web-components/demo/sketch-container-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -2,30 +2,32 @@
   <head>
     <title>sketch-container-status demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script src="/dist/web-components/sketch-container-status.js" type="module"></script>
+    <script
+      src="/dist/web-components/sketch-container-status.js"
+      type="module"
+    ></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        const containerStatus = document.querySelector('#status-2');
+        const containerStatus = document.querySelector("#status-2");
         containerStatus.state = {
-          hostname: 'example.hostname',
-          initial_commit: 'decafbad',
+          hostname: "example.hostname",
+          initial_commit: "decafbad",
           message_count: 27,
-          os: 'linux',
+          os: "linux",
           total_usage: {
-            start_time: 'around lunch',
-            messages:1337,
+            start_time: "around lunch",
+            messages: 1337,
             input_tokens: 3,
             output_tokens: 1000,
             cache_read_input_tokens: 28,
             cache_creation_input_tokens: 12354,
             total_cost_usd: 2.03,
-          }, 
-          working_dir: '/app',
+          },
+          working_dir: "/app",
         };
       });
     </script>
-
   </head>
   <body>
     <h1>sketch-container-status demo</h1>
@@ -35,6 +37,5 @@
 
     With state fields set:
     <sketch-container-status id="status-2"></sketch-container-status>
-
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
index 63b5395..3a6cb35 100644
--- a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -1,61 +1,69 @@
-<!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 Diff Viewer Demo</title>
-  <link rel="stylesheet" href="../../../node_modules/diff2html/bundles/css/diff2html.min.css">
-  <script type="module" src="/dist/web-components/sketch-diff-view.js"></script>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-    
-    h1 {
-      color: #333;
-      margin-bottom: 2rem;
-    }
-    
-    .control-panel {
-      margin-bottom: 2rem;
-      padding: 1rem;
-      background-color: #f0f0f0;
-      border-radius: 4px;
-    }
-    
-    input {
-      padding: 0.5rem;
-      border-radius: 4px;
-      border: 1px solid #ccc;
-      width: 300px;
-    }
-    
-    button {
-      padding: 0.5rem 1rem;
-      background-color: #2196f3;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-left: 1rem;
-    }
-    
-    button:hover {
-      background-color: #0d8bf2;
-    }
-  </style>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Diff Viewer Demo</title>
+    <link
+      rel="stylesheet"
+      href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
+    />
+    <script
+      type="module"
+      src="/dist/web-components/sketch-diff-view.js"
+    ></script>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+          Arial, sans-serif;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
 
-<script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const diffViewer = document.getElementById('diffViewer');
-    const commitHashInput = document.getElementById('commitHash');
-    const viewDiffButton = document.getElementById('viewDiff');
-    let commit = false;
-    viewDiffButton.addEventListener('click', () => {
-      let diffContent = `diff --git a/sample.txt b/sample.txt
+      h1 {
+        color: #333;
+        margin-bottom: 2rem;
+      }
+
+      .control-panel {
+        margin-bottom: 2rem;
+        padding: 1rem;
+        background-color: #f0f0f0;
+        border-radius: 4px;
+      }
+
+      input {
+        padding: 0.5rem;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+        width: 300px;
+      }
+
+      button {
+        padding: 0.5rem 1rem;
+        background-color: #2196f3;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-left: 1rem;
+      }
+
+      button:hover {
+        background-color: #0d8bf2;
+      }
+    </style>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const diffViewer = document.getElementById("diffViewer");
+        const commitHashInput = document.getElementById("commitHash");
+        const viewDiffButton = document.getElementById("viewDiff");
+        let commit = false;
+        viewDiffButton.addEventListener("click", () => {
+          let diffContent = `diff --git a/sample.txt b/sample.txt
 index 1111111..2222222 100644
 --- a/sample.txt
 +++ b/sample.txt
@@ -67,12 +75,12 @@
 -Another line to remove
 +A completely new line
  The last line is unchanged`;
-       if (commit) {
+          if (commit) {
             // For demo purposes, generate fake diff based on commit hash
-            diffContent = `diff --git a/file-${commit.substring(0,5)}.txt b/file-${commit.substring(0,5)}.txt
+            diffContent = `diff --git a/file-${commit.substring(0, 5)}.txt b/file-${commit.substring(0, 5)}.txt
 index 3333333..4444444 100644
---- a/file-${commit.substring(0,5)}.txt
-+++ b/file-${commit.substring(0,5)}.txt
+--- a/file-${commit.substring(0, 5)}.txt
++++ b/file-${commit.substring(0, 5)}.txt
 @@ -1,4 +1,6 @@
  File with commit: ${commit}
 +This line was added in commit ${commit}
@@ -82,23 +90,23 @@
 +Another new line added in this commit
  Last line of the file`;
           }
-      diffViewer.diffText = diffContent;
-      diffViewer.commitHash = commitHashInput.value.trim();
-    });
-  });
-</script>
+          diffViewer.diffText = diffContent;
+          diffViewer.commitHash = commitHashInput.value.trim();
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <h1>Sketch Diff Viewer Demo</h1>
 
-</head>
-<body>
-  <h1>Sketch Diff Viewer Demo</h1>
-  
-  <div class="control-panel">
-    <label for="commitHash">Commit Hash (leave empty for unstaged changes):</label>
-    <input type="text" id="commitHash" placeholder="Enter commit hash">
-    <button id="viewDiff">View Diff</button>
-  </div>
-  
-  <sketch-diff-view id="diffViewer"></sketch-diff-view>
-  
-</body>
-</html>
\ No newline at end of file
+    <div class="control-panel">
+      <label for="commitHash"
+        >Commit Hash (leave empty for unstaged changes):</label
+      >
+      <input type="text" id="commitHash" placeholder="Enter commit hash" />
+      <button id="viewDiff">View Diff</button>
+    </div>
+
+    <sketch-diff-view id="diffViewer"></sketch-diff-view>
+  </body>
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-network-status.demo.html b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
index 9926b0e..d645840 100644
--- a/loop/webui/src/web-components/demo/sketch-network-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -2,16 +2,24 @@
   <head>
     <title>sketch-network-status demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script src="/dist/web-components/sketch-network-status.js" type="module"></script>
+    <script
+      src="/dist/web-components/sketch-network-status.js"
+      type="module"
+    ></script>
   </head>
   <body>
     <h1>sketch-network-status demo</h1>
 
     Connected:
-    <sketch-network-status connection="connected" message="connected"></sketch-network-status>
+    <sketch-network-status
+      connection="connected"
+      message="connected"
+    ></sketch-network-status>
 
     Error:
-    <sketch-network-status connection="error" error="error"></sketch-network-status>
-
+    <sketch-network-status
+      connection="error"
+      error="error"
+    ></sketch-network-status>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
index 466f910..cb2bdf3 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
@@ -53,10 +53,9 @@
           messageEl.message = msg;
           document.body.appendChild(messageEl);
         });
-        window.addEventListener(
-          "show-commit-diff",
-          (evt) => {console.log("show-commit-diff", evt)}
-        );
+        window.addEventListener("show-commit-diff", (evt) => {
+          console.log("show-commit-diff", evt);
+        });
       });
     </script>
   </head>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline.demo.html b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
index 427181d..f8b7ad4 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -2,7 +2,10 @@
   <head>
     <title>sketch-timeline demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script src="/dist/web-components/sketch-timeline.js" type="module"></script>
+    <script
+      src="/dist/web-components/sketch-timeline.js"
+      type="module"
+    ></script>
 
     <script>
       const messages = [
@@ -32,16 +35,14 @@
         },
       ];
       document.addEventListener("DOMContentLoaded", () => {
-        const timelineEl = document.querySelector('sketch-timeline');
+        const timelineEl = document.querySelector("sketch-timeline");
         timelineEl.messages = messages;
       });
     </script>
-
   </head>
   <body>
     <h1>sketch-timeline demo</h1>
 
     <sketch-timeline></sketch-timeline>
-
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
index dac6831..0d71067 100644
--- a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
@@ -3,29 +3,32 @@
     <title>sketch-view-mode-select demo</title>
     <link rel="stylesheet" href="demo.css" />
 
-    <script src="/dist/web-components/sketch-view-mode-select.js" type="module"></script>
+    <script
+      src="/dist/web-components/sketch-view-mode-select.js"
+      type="module"
+    ></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        const viewModeSelect = document.querySelector('sketch-view-mode-select');
+        const viewModeSelect = document.querySelector(
+          "sketch-view-mode-select",
+        );
         const msgDiv = document.querySelector("#selected-mode");
         msgDiv.innerText = `selected mode: ${viewModeSelect.activeMode}`;
 
         console.log("viewModeSelect: ", viewModeSelect);
         viewModeSelect.addEventListener("view-mode-select", (evt) => {
-          console.log('view mode change event: ', evt);
+          console.log("view mode change event: ", evt);
           const msgDiv = document.querySelector("#selected-mode");
           msgDiv.innerText = `selected mode: ${evt.detail.mode}`;
         });
       });
-  </script>
-
+    </script>
   </head>
   <body>
     <h1>sketch-view-mode-select demo</h1>
 
     <sketch-view-mode-select></sketch-view-mode-select>
     <div id="selected-mode"></div>
-
   </body>
-</html>
\ No newline at end of file
+</html>