diff --git a/loop/webui/src/timeline/data.ts b/loop/webui/src/data.ts
similarity index 100%
rename from loop/webui/src/timeline/data.ts
rename to loop/webui/src/data.ts
diff --git a/loop/webui/src/index.html b/loop/webui/src/index.html
deleted file mode 100644
index a1f62a0..0000000
--- a/loop/webui/src/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Loop WebUI</title>
-    <link rel="stylesheet" href="tailwind.css" />
-    <style>
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-        margin: 0;
-        padding: 20px;
-        background-color: #f5f5f5;
-      }
-      #app {
-        max-width: 800px;
-        margin: 0 auto;
-        background-color: white;
-        border-radius: 8px;
-        padding: 20px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      h1 {
-        color: #333;
-      }
-      #status {
-        margin-top: 20px;
-        padding: 10px;
-        background-color: #e8f5e9;
-        border-radius: 4px;
-        color: #2e7d32;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app">Loading...</div>
-    <script src="index.js"></script>
-  </body>
-</html>
diff --git a/loop/webui/src/input.css b/loop/webui/src/input.css
deleted file mode 100644
index 176b454..0000000
--- a/loop/webui/src/input.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Custom styles can be added below */
diff --git a/loop/webui/src/sketch-app-shell.html b/loop/webui/src/sketch-app-shell.html
new file mode 100644
index 0000000..6a9f1c3
--- /dev/null
+++ b/loop/webui/src/sketch-app-shell.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>sketch coding assistant</title>
+    <!-- We only need basic body styling; all component styles are encapsulated -->
+    <style>
+      html,
+      body {
+        height: 100%;
+        overflow-y: auto;
+      }
+      body {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+          Roboto, sans-serif;
+        margin: 0;
+        padding: 0;
+        color: #333;
+        line-height: 1.4;
+        overflow-x: hidden; /* Prevent horizontal scrolling */
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+    <script src="static/sketch-app-shell.js" async type="module"></script>
+  </head>
+  <body>
+    <sketch-app-shell></sketch-app-shell>
+  </body>
+</html>
diff --git a/loop/webui/src/timeline.css b/loop/webui/src/timeline.css
deleted file mode 100644
index 2928c44..0000000
--- a/loop/webui/src/timeline.css
+++ /dev/null
@@ -1,1306 +0,0 @@
-body {
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    sans-serif;
-  margin: 0;
-  padding: 20px;
-  padding-top: 80px; /* Added padding to account for the fixed top banner */
-  padding-bottom: 100px; /* Adjusted padding for chat container */
-  color: #333;
-  line-height: 1.4; /* Reduced line height for more compact text */
-}
-
-.timeline-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  position: relative;
-}
-
-/* When diff view is active, allow timeline container to expand to full width */
-.timeline-container.diff-active {
-  max-width: 100%;
-}
-
-/* Top banner with combined elements */
-.top-banner {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #eee;
-  flex-wrap: wrap;
-  gap: 10px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  z-index: 100;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
-}
-
-.banner-title {
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-title {
-  margin: 0;
-  padding: 0;
-  color: rgba(82, 82, 82, 0.85);
-  font-size: 16px;
-  font-weight: normal;
-  font-style: italic;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-
-/* Original header styles kept for compatibility */
-header {
-  display: none; /* Hidden since we're using top-banner instead */
-}
-
-/* Ensure the container starts below the fixed top banner */
-.timeline-container {
-  padding-top: 10px;
-}
-
-h1 {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.info-card {
-  background: #f9f9f9;
-  border-radius: 8px;
-  padding: 15px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  display: none; /* Hidden in the combined layout */
-}
-
-.info-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  background: #f9f9f9;
-  border-radius: 4px;
-  padding: 4px 10px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  flex: 1;
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  margin-right: 10px;
-  font-size: 13px;
-}
-
-.info-label {
-  font-size: 11px;
-  color: #555;
-  margin-right: 3px;
-  font-weight: 500;
-}
-
-.info-value {
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.cost {
-  color: #2e7d32;
-}
-
-.refresh-control {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
-  flex-wrap: nowrap;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.refresh-button {
-  background: #4caf50;
-  color: white;
-  border: none;
-  padding: 4px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  margin: 5px;
-}
-
-.poll-updates {
-  display: flex;
-  align-items: center;
-  margin: 0 5px;
-  font-size: 12px;
-}
-
-.status-container {
-  display: flex;
-  align-items: center;
-}
-
-.polling-indicator {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-right: 4px;
-  background-color: #ccc;
-}
-
-.polling-indicator.active {
-  background-color: #4caf50;
-  animation: pulse 1.5s infinite;
-}
-
-.polling-indicator.error {
-  background-color: #f44336;
-  animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.status-text {
-  font-size: 11px;
-  color: #666;
-}
-
-/* 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;
-}
-
-.message {
-  position: relative;
-  margin-bottom: 5px;
-  padding-left: 30px;
-}
-
-.message-icon {
-  position: absolute;
-  left: 10px;
-  top: 0;
-  transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  text-align: center;
-  line-height: 16px;
-  color: #fff;
-  font-size: 10px;
-}
-
-.message-content {
-  position: relative;
-  padding: 5px 10px;
-  background: #fff;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  border-left: 3px solid transparent;
-}
-
-/* Removed arrow decoration for a more compact look */
-
-.message-header {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  margin-bottom: 3px;
-  font-size: 12px;
-}
-
-.message-timestamp {
-  font-size: 10px;
-  color: #888;
-  font-style: italic;
-  margin-left: 3px;
-}
-
-.conversation-id {
-  font-family: monospace;
-  font-size: 12px;
-  padding: 2px 4px;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  margin-left: auto;
-}
-
-.parent-info {
-  font-size: 11px;
-  opacity: 0.8;
-}
-
-.subconversation {
-  border-left: 2px solid transparent;
-  padding-left: 5px;
-  margin-left: 20px;
-  transition: margin-left 0.3s ease;
-}
-
-.message-text {
-  overflow-x: auto;
-  margin-bottom: 3px;
-  font-family: monospace;
-  padding: 3px 5px;
-  background: #f7f7f7;
-  border-radius: 2px;
-  user-select: text;
-  cursor: text;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  font-size: 13px;
-  line-height: 1.3;
-}
-
-.tool-details {
-  margin-top: 3px;
-  padding-top: 3px;
-  border-top: 1px dashed #e0e0e0;
-  font-size: 12px;
-}
-
-.tool-name {
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 2px;
-  background: #f0f0f0;
-  padding: 2px 4px;
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  gap: 3px;
-}
-
-.tool-input,
-.tool-result {
-  margin-top: 2px;
-  padding: 3px 5px;
-  background: #f7f7f7;
-  border-radius: 2px;
-  font-family: monospace;
-  font-size: 12px;
-  overflow-x: auto;
-  white-space: pre;
-  line-height: 1.3;
-  user-select: text;
-  cursor: text;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-}
-
-.tool-result {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.usage-info {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px dashed #e0e0e0;
-  font-size: 12px;
-  color: #666;
-}
-
-/* Message type styles */
-.user .message-icon {
-  background-color: #2196f3;
-}
-
-.agent .message-icon {
-  background-color: #4caf50;
-}
-
-.tool .message-icon {
-  background-color: #ff9800;
-}
-
-.error .message-icon {
-  background-color: #f44336;
-}
-
-.end-of-turn {
-  margin-bottom: 15px;
-}
-
-.end-of-turn::after {
-  content: "End of Turn";
-  position: absolute;
-  left: 15px;
-  bottom: -10px;
-  transform: translateX(-50%);
-  font-size: 10px;
-  color: #666;
-  background: #f0f0f0;
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
-.collapsible {
-  cursor: pointer;
-  background-color: #f0f0f0;
-  padding: 5px 10px;
-  border: none;
-  border-radius: 4px;
-  text-align: left;
-  font-size: 12px;
-  margin-top: 5px;
-}
-
-.collapsed {
-  max-height: 50px;
-  overflow-y: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-}
-
-/* Removed the gradient effect */
-
-.loader {
-  display: flex;
-  justify-content: center;
-  padding: 20px;
-}
-
-.loader::after {
-  content: "";
-  width: 30px;
-  height: 30px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #3498db;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Chat styles */
-.chat-container {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: #f0f0f0;
-  padding: 15px;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-}
-
-.chat-input-wrapper {
-  display: flex;
-  max-width: 1200px;
-  margin: 0 auto;
-  gap: 10px;
-}
-
-#chatInput {
-  flex: 1;
-  padding: 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  resize: none;
-  font-family: monospace;
-  font-size: 12px;
-  min-height: 40px;
-  max-height: 120px;
-  background: #f7f7f7;
-}
-
-#sendChatButton {
-  background-color: #2196f3;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 0 20px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-#sendChatButton:hover {
-  background-color: #0d8bf2;
-}
-
-/* Copy button styles */
-.message-text-container,
-.tool-result-container {
-  position: relative;
-}
-
-.message-actions {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 10;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.message-text-container:hover .message-actions,
-.tool-result-container:hover .message-actions {
-  opacity: 1;
-}
-
-.copy-button {
-  background-color: rgba(255, 255, 255, 0.9);
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  color: #555;
-  cursor: pointer;
-  font-size: 12px;
-  padding: 2px 8px;
-  transition: all 0.2s ease;
-}
-
-.copy-button:hover {
-  background-color: #f0f0f0;
-  color: #333;
-}
-
-/* Diff View Styles */
-.diff-view {
-  width: 100%;
-  background-color: #f5f5f5;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-}
-
-.diff-tabs {
-  display: flex;
-  background-color: #e0e0e0;
-  border-bottom: 1px solid #ccc;
-}
-
-.diff-tab-button {
-  padding: 8px 16px;
-  border: none;
-  background: none;
-  font-size: 14px;
-  cursor: pointer;
-  outline: none;
-  transition: background-color 0.2s;
-}
-
-.diff-tab-button:hover {
-  background-color: #d0d0d0;
-}
-
-.diff-tab-button.active {
-  background-color: #fff;
-  border-bottom: 2px solid #3498db;
-}
-
-.diff-container {
-  flex: 1;
-  overflow: hidden;
-}
-
-/* Removed diff-header for more space */
-
-.diff-content {
-  padding: 15px;
-  margin: 0;
-  max-height: 70vh;
-  overflow-y: auto;
-  font-family: Consolas, Monaco, "Andale Mono", monospace;
-  font-size: 14px;
-  line-height: 1.5;
-  white-space: pre;
-  tab-size: 4;
-  background-color: #fff;
-}
-
-.diff-content .diff-line {
-  padding: 0 5px;
-  white-space: pre;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.diff-content .diff-line:hover {
-  background-color: #e6f7ff;
-}
-
-.diff-content .diff-add {
-  background-color: #e6ffed;
-  color: #22863a;
-}
-
-.diff-content .diff-remove {
-  background-color: #ffeef0;
-  color: #cb2431;
-}
-
-.diff-content .diff-info {
-  color: #6a737d;
-  background-color: #f0f0f0;
-}
-
-.diff-comment-box {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 80%;
-  max-width: 600px;
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
-}
-
-.diff-comment-box h3 {
-  margin-top: 0;
-  margin-bottom: 15px;
-  font-size: 18px;
-}
-
-.selected-line {
-  background-color: #f5f5f5;
-  padding: 10px;
-  margin-bottom: 15px;
-  border-radius: 4px;
-  border-left: 3px solid #0366d6;
-}
-
-.selected-line pre {
-  margin: 5px 0 0 0;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  font-family: Consolas, Monaco, "Andale Mono", monospace;
-  font-size: 14px;
-}
-
-#diffCommentInput {
-  width: 100%;
-  min-height: 100px;
-  padding: 10px;
-  margin-bottom: 15px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  resize: vertical;
-  font-family: Arial, sans-serif;
-}
-
-.diff-comment-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.diff-comment-buttons button {
-  padding: 8px 15px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-#submitDiffComment {
-  background-color: #0366d6;
-  color: white;
-}
-
-#submitDiffComment:hover {
-  background-color: #0256bd;
-}
-
-#cancelDiffComment {
-  background-color: #e1e4e8;
-  color: #24292e;
-}
-
-#cancelDiffComment:hover {
-  background-color: #d1d5da;
-}
-
-/* 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: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;
-}
-
-#showConversationButton.active {
-  background-color: #e6f7ff;
-  border-color: #1890ff;
-}
-
-#showDiffButton.active {
-  background-color: #f6ffed;
-  border-color: #52c41a;
-}
-
-#showChartsButton.active {
-  background-color: #fff2e8;
-  border-color: #fa8c16;
-}
-
-.stop-button:hover {
-  background-color: #c82333 !important;
-}
-
-/* Chart View Styles */
-.chart-view {
-  width: 100%;
-  background-color: #ffffff;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 15px;
-}
-
-.chart-container {
-  width: 100%;
-  height: auto;
-  overflow: auto;
-}
-
-.chart-section {
-  margin-bottom: 30px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 20px;
-}
-
-/* Terminal View Styles */
-.terminal-view {
-  width: 100%;
-  background-color: #f5f5f5;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 15px;
-  height: 70vh;
-}
-
-.terminal-container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-#showTerminalButton.active {
-  background-color: #fef0f0;
-  border-color: #ff4d4f;
-}
-
-.chart-section:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
-.chart-section h3 {
-  margin-top: 0;
-  margin-bottom: 15px;
-  font-size: 18px;
-  color: #333;
-}
-
-#costChart,
-#messagesChart {
-  width: 100%;
-  min-height: 300px;
-  margin-bottom: 10px;
-}
-
-/* Tool calls container styles */
-.tool-calls-container {
-  /* Removed dotted border */
-}
-
-.tool-calls-toggle {
-  cursor: pointer;
-  background-color: #f0f0f0;
-  padding: 5px 10px;
-  border: none;
-  border-radius: 4px;
-  text-align: left;
-  font-size: 12px;
-  margin-top: 5px;
-  color: #555;
-  font-weight: 500;
-}
-
-.tool-calls-toggle:hover {
-  background-color: #e0e0e0;
-}
-
-.tool-calls-details {
-  margin-top: 10px;
-  transition: max-height 0.3s ease;
-}
-
-.tool-calls-details.collapsed {
-  max-height: 0;
-  overflow: hidden;
-  margin-top: 0;
-}
-
-.tool-call {
-  background: #f9f9f9;
-  border-radius: 4px;
-  padding: 10px;
-  margin-bottom: 10px;
-  border-left: 3px solid #4caf50;
-}
-
-.tool-call-header {
-  margin-bottom: 8px;
-  font-size: 14px;
-  padding: 2px 0;
-}
-
-/* Compact tool display styles */
-.tool-compact-line {
-  font-family: monospace;
-  font-size: 12px;
-  line-height: 1.4;
-  padding: 4px 6px;
-  background: #f8f8f8;
-  border-radius: 3px;
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.tool-result-inline {
-  font-family: monospace;
-  color: #0066bb;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 400px;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.copy-inline-button {
-  font-size: 10px;
-  padding: 2px 4px;
-  margin-left: 8px;
-  background: #eee;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  opacity: 0.7;
-}
-
-.copy-inline-button:hover {
-  opacity: 1;
-  background: #ddd;
-}
-
-.tool-input.compact,
-.tool-result.compact {
-  margin: 2px 0;
-  padding: 4px;
-  font-size: 12px;
-}
-
-/* Removed old compact container CSS */
-
-/* Ultra-compact tool call box styles */
-.tool-calls-header {
-  /* Empty header - just small spacing */
-}
-
-.tool-call-boxes-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.tool-call-wrapper {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 4px;
-}
-
-.tool-call-box {
-  display: inline-flex;
-  align-items: center;
-  background: #f0f0f0;
-  border-radius: 4px;
-  padding: 3px 8px;
-  font-size: 12px;
-  cursor: pointer;
-  max-width: 320px;
-  position: relative;
-  border: 1px solid #ddd;
-  transition: background-color 0.2s;
-}
-
-.tool-call-box:hover {
-  background-color: #e8e8e8;
-}
-
-.tool-call-box.expanded {
-  background-color: #e0e0e0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom: 1px solid #ccc;
-}
-
-.tool-call-name {
-  font-weight: bold;
-  margin-right: 6px;
-  color: #444;
-}
-
-.tool-call-input {
-  color: #666;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: monospace;
-  font-size: 11px;
-}
-
-/* Removed old expanded view CSS */
-
-/* Custom styles for IRC-like experience */
-.user .message-content {
-  border-left-color: #2196f3;
-}
-
-.agent .message-content {
-  border-left-color: #4caf50;
-}
-
-.tool .message-content {
-  border-left-color: #ff9800;
-}
-
-.error .message-content {
-  border-left-color: #f44336;
-}
-
-/* Make message type display bold but without the IRC-style markers */
-.message-type {
-  font-weight: bold;
-}
-
-/* Tool call cards */
-.tool-call-cards-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-/* Commit message styling */
-.message.commit {
-  background-color: #f0f7ff;
-  border-left: 4px solid #0366d6;
-}
-
-.commits-container {
-  margin-top: 10px;
-  padding: 5px;
-}
-
-.commits-header {
-  font-weight: bold;
-  margin-bottom: 5px;
-  color: #24292e;
-}
-
-.commit-boxes-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.tool-call-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  background-color: #f9f9f9;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-/* Compact view (default) */
-.tool-call-compact-view {
-  display: flex;
-  align-items: center;
-  padding: 0px 6px;
-  gap: 8px;
-  background-color: #f9f9f9;
-  font-size: 0.9em;
-  white-space: nowrap;
-  overflow: visible; /* Don't hide overflow, we'll handle text truncation per element */
-  position: relative; /* For positioning the expand icon */
-}
-
-/* Expanded view (hidden by default) */
-.tool-call-card.collapsed .tool-call-expanded-view {
-  display: none;
-}
-
-.tool-call-expanded-view {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid #eee;
-}
-
-.tool-call-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 10px;
-  background-color: #f0f0f0;
-  border-bottom: 1px solid #ddd;
-  font-weight: bold;
-}
-
-.tool-call-name {
-  font-family: var(--monospace-font);
-  color: #0066cc;
-  font-weight: bold;
-}
-
-.tool-call-status {
-  margin-right: 4px;
-  min-width: 1em;
-  text-align: center;
-}
-
-.tool-call-status.spinner {
-  animation: spin 1s infinite linear;
-  display: inline-block;
-  width: 1em;
-}
-
-.tool-call-time {
-  margin-left: 8px;
-  font-size: 0.85em;
-  color: #666;
-  font-weight: normal;
-}
-
-.tool-call-input-preview {
-  color: #555;
-  font-family: var(--monospace-font);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 30%;
-  background-color: rgba(240, 240, 240, 0.5);
-  padding: 2px 5px;
-  border-radius: 3px;
-  font-size: 0.9em;
-}
-
-.tool-call-result-preview {
-  color: #28a745;
-  font-family: var(--monospace-font);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 40%;
-  background-color: rgba(240, 248, 240, 0.5);
-  padding: 2px 5px;
-  border-radius: 3px;
-  font-size: 0.9em;
-}
-
-.tool-call-expand-icon {
-  position: absolute;
-  right: 10px;
-  font-size: 0.8em;
-  color: #888;
-}
-
-.tool-call-input {
-  padding: 6px 10px;
-  border-bottom: 1px solid #eee;
-  font-family: var(--monospace-font);
-  font-size: 0.9em;
-  white-space: pre-wrap;
-  word-break: break-all;
-  background-color: #f5f5f5;
-}
-
-.tool-call-result {
-  padding: 6px 10px;
-  font-family: var(--monospace-font);
-  font-size: 0.9em;
-  white-space: pre-wrap;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.tool-call-result pre {
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Standalone tool messages (legacy/disconnected) */
-.tool-details.standalone .tool-header {
-  border-radius: 4px;
-  background-color: #fff3cd;
-  border-color: #ffeeba;
-}
-
-.tool-details.standalone .tool-warning {
-  margin-left: 10px;
-  font-size: 0.85em;
-  color: #856404;
-  font-style: italic;
-}
-
-/* Tool call expanded view with sections */
-.tool-call-section {
-  border-bottom: 1px solid #eee;
-}
-
-.tool-call-section:last-child {
-  border-bottom: none;
-}
-
-.tool-call-section-label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 10px;
-  background-color: #f5f5f5;
-  font-weight: bold;
-  font-size: 0.9em;
-}
-
-.tool-call-section-content {
-  padding: 0;
-}
-
-.tool-call-copy-btn {
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-size: 0.8em;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.tool-call-copy-btn:hover {
-  background-color: #e0e0e0;
-}
-
-/* Override for tool call input in expanded view */
-.tool-call-section-content .tool-call-input {
-  margin: 0;
-  padding: 8px 10px;
-  border: none;
-  background-color: #fff;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.title-container {
-  display: flex;
-  flex-direction: column;
-  max-width: 33%;
-  overflow: hidden;
-}
-
-.commit-box {
-  border: 1px solid #d1d5da;
-  border-radius: 4px;
-  overflow: hidden;
-  background-color: #ffffff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.commit-preview {
-  padding: 8px 12px;
-  cursor: pointer;
-  font-family: monospace;
-  background-color: #f6f8fa;
-  border-bottom: 1px dashed #d1d5da;
-}
-
-.commit-preview:hover {
-  background-color: #eef2f6;
-}
-
-.commit-hash {
-  color: #0366d6;
-  font-weight: bold;
-}
-
-.commit-details {
-  padding: 8px 12px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.commit-details pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.commit-details.is-hidden {
-  display: none;
-}
-
-.pushed-branch {
-  color: #28a745;
-  font-weight: 500;
-  margin-left: 6px;
-}
-
-.commit-diff-button {
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  background-color: #f7f7f7;
-  color: #24292e;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  margin: 8px 12px;
-  display: block;
-}
-
-.commit-diff-button:hover {
-  background-color: #e7e7e7;
-  border-color: #aaa;
-}
-
-/* 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;
-}
-
-.markdown-content {
-  box-sizing: border-box;
-  min-width: 200px;
-  margin: 0 auto;
-}
-
-.markdown-content p {
-  margin-block-start: 0.5em;
-  margin-block-end: 0.5em
-}
\ No newline at end of file
diff --git a/loop/webui/src/timeline.html b/loop/webui/src/timeline.html
deleted file mode 100644
index 46144c1..0000000
--- a/loop/webui/src/timeline.html
+++ /dev/null
@@ -1,158 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>sketch coding assistant</title>
-    <!-- Import the diff2html CSS -->
-    <link rel="stylesheet" href="static/diff2html.min.css" />
-    <link rel="stylesheet" href="static/timeline.css" />
-    <link rel="stylesheet" href="static/diff2.css" />
-    <link rel="stylesheet" href="static/xterm.css" />
-    <link rel="stylesheet" href="static/tailwind.css" />
-  </head>
-  <body>
-    <div class="top-banner">
-      <div class="title-container">
-        <h1 class="banner-title">sketch coding assistant</h1>
-        <h2 id="chatTitle" class="chat-title"></h2>
-      </div>
-      <div class="info-grid">
-        <div class="info-item">
-          <a href="logs" class="text-blue-600 font-medium hover:text-blue-800 hover:underline">Logs</a>
-        </div>
-        <div class="info-item">
-          <a href="download" class="text-blue-600 font-medium hover:text-blue-800 hover:underline">Download</a>
-        </div>
-        <div class="info-item">
-          <span id="hostname" class="info-value">Loading...</span>
-        </div>
-        <div class="info-item">
-          <span id="workingDir" class="info-value">Loading...</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">Commit:</span>
-          <span id="initialCommit" class="info-value">Loading...</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">Msgs:</span>
-          <span id="messageCount" class="info-value">0</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">In:</span>
-          <span id="inputTokens" class="info-value">0</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">Cache Read:</span>
-          <span id="cacheReadInputTokens" class="info-value">0</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">Cache Create:</span>
-          <span id="cacheCreationInputTokens" class="info-value">0</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">Out:</span>
-          <span id="outputTokens" class="info-value">0</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">Cost:</span>
-          <span id="totalCost" class="info-value cost">$0.00</span>
-        </div>
-      </div>
-      <div class="refresh-control">
-        <div class="view-mode-buttons">
-          <button
-            id="showConversationButton"
-            class="emoji-button"
-            title="Conversation View"
-          >
-            💬
-          </button>
-          <button
-            id="showDiff2Button"
-            class="emoji-button"
-            title="Diff View"
-          >
-            ±
-          </button>
-          <button
-            id="showChartsButton"
-            class="emoji-button"
-            title="Charts View"
-          >
-            📈
-          </button>
-          <button
-            id="showTerminalButton"
-            class="emoji-button"
-            title="Terminal View"
-          >
-            💻
-          </button>
-        </div>
-        <button id="stopButton" class="refresh-button stop-button">Stop</button>
-        <div class="poll-updates">
-          <input type="checkbox" id="pollToggle" checked />
-          <label for="pollToggle">Poll</label>
-        </div>
-        <div class="status-container">
-          <span id="pollingIndicator" class="polling-indicator"></span>
-          <span id="statusText" class="status-text"></span>
-        </div>
-      </div>
-    </div>
-
-    <div class="timeline-container">
-      <div id="timeline" class="timeline empty"></div>
-      <div id="diff2View" class="diff-view" style="display: none">
-        <div id="diff2Container" class="diff-container">
-          <div id="diff-view-controls">
-            <div class="diff-view-format">
-              <label>
-                <input type="radio" name="diffViewFormat" value="side-by-side" checked> Side-by-side
-              </label>
-              <label>
-                <input type="radio" name="diffViewFormat" value="line-by-line"> Line-by-line
-              </label>
-            </div>
-          </div>
-          <div id="diff2htmlContent" class="diff2html-content"></div>
-        </div>
-      </div>
-      <div id="chartView" class="chart-view" style="display: none">
-        <div id="chartContainer" class="chart-container"></div>
-      </div>
-      <div id="terminalView" class="terminal-view" style="display: none">
-        <div id="terminalContainer" class="terminal-container"></div>
-      </div>
-      <div id="diffCommentBox" class="diff-comment-box" style="display: none">
-        <h3>Add a comment</h3>
-        <div class="selected-line">
-          Line:
-          <pre id="selectedLine"></pre>
-        </div>
-        <textarea
-          id="diffCommentInput"
-          placeholder="Enter your comment about this line..."
-        ></textarea>
-        <div class="diff-comment-buttons">
-          <button id="submitDiffComment">Add Comment</button>
-          <button id="cancelDiffComment">Cancel</button>
-        </div>
-      </div>
-    </div>
-
-    <div class="chat-container">
-      <div class="chat-input-wrapper">
-        <textarea
-          id="chatInput"
-          placeholder="Type your message here and press Enter to send..."
-          autofocus
-        ></textarea>
-        <button id="sendChatButton">Send</button>
-      </div>
-    </div>
-
-    <script src="static/timeline.js"></script>
-  </body>
-</html>
diff --git a/loop/webui/src/timeline.ts b/loop/webui/src/timeline.ts
deleted file mode 100644
index eef2726..0000000
--- a/loop/webui/src/timeline.ts
+++ /dev/null
@@ -1,641 +0,0 @@
-import { TimelineMessage } from "./timeline/types";
-import { formatNumber } from "./timeline/utils";
-import { checkShouldScroll } from "./timeline/scroll";
-import { ChartManager } from "./timeline/charts";
-import { ConnectionStatus, DataManager } from "./timeline/data";
-import { DiffViewer } from "./timeline/diffviewer";
-import { MessageRenderer } from "./timeline/renderer";
-import { TerminalHandler } from "./timeline/terminal";
-
-/**
- * TimelineManager - Class to manage the timeline UI and functionality
- */
-class TimelineManager {
-  private diffViewer = new DiffViewer();
-  private terminalHandler = new TerminalHandler();
-  private chartManager = new ChartManager();
-  private messageRenderer = new MessageRenderer();
-  private dataManager = new DataManager();
-
-  private viewMode: "chat" | "diff2" | "charts" | "terminal" = "chat";
-  shouldScrollToBottom: boolean;
-
-  constructor() {
-    // Initialize when DOM is ready
-    document.addEventListener("DOMContentLoaded", () => {
-      // First initialize from URL params to prevent flash of incorrect view
-      // This must happen before setting up other event handlers
-      void this.initializeViewFromUrl()
-        .then(() => {
-          // Continue with the rest of initialization
-          return this.initialize();
-        })
-        .catch((err) => {
-          console.error("Failed to initialize timeline:", err);
-        });
-    });
-
-    // Add popstate event listener to handle browser back/forward navigation
-    window.addEventListener("popstate", (event) => {
-      if (event.state && event.state.mode) {
-        // Using void to handle the promise returned by toggleViewMode
-        void this.toggleViewMode(event.state.mode);
-      } else {
-        // If no state or no mode in state, default to chat view
-        void this.toggleViewMode("chat");
-      }
-    });
-
-    // Listen for commit diff event from MessageRenderer
-    document.addEventListener("showCommitDiff", ((e: CustomEvent) => {
-      const { commitHash } = e.detail;
-      this.diffViewer.showCommitDiff(
-        commitHash,
-        (mode: "chat" | "diff2" | "terminal" | "charts") =>
-          this.toggleViewMode(mode)
-      );
-    }) as EventListener);
-  }
-
-  /**
-   * Initialize the timeline manager
-   */
-  private async initialize(): Promise<void> {
-    // Set up data manager event listeners
-    this.dataManager.addEventListener(
-      "dataChanged",
-      this.handleDataChanged.bind(this)
-    );
-    this.dataManager.addEventListener(
-      "connectionStatusChanged",
-      this.handleConnectionStatusChanged.bind(this)
-    );
-
-    // Initialize the data manager
-    await this.dataManager.initialize();
-
-    // URL parameters have already been read in constructor
-    // to prevent flash of incorrect content
-
-    // Set up conversation button handler
-    document
-      .getElementById("showConversationButton")
-      ?.addEventListener("click", async () => {
-        this.toggleViewMode("chat");
-      });
-
-    // Set up diff2 button handler
-    document
-      .getElementById("showDiff2Button")
-      ?.addEventListener("click", async () => {
-        this.toggleViewMode("diff2");
-      });
-
-    // Set up charts button handler
-    document
-      .getElementById("showChartsButton")
-      ?.addEventListener("click", async () => {
-        this.toggleViewMode("charts");
-      });
-
-    // Set up terminal button handler
-    document
-      .getElementById("showTerminalButton")
-      ?.addEventListener("click", async () => {
-        this.toggleViewMode("terminal");
-      });
-
-    // The active button will be set by toggleViewMode
-    // We'll initialize view based on URL params or default to chat view if no params
-    // We defer button activation to the toggleViewMode function
-
-    // Set up stop button handler
-    document
-      .getElementById("stopButton")
-      ?.addEventListener("click", async () => {
-        this.stopInnerLoop();
-      });
-
-    const pollToggleCheckbox = document.getElementById(
-      "pollToggle"
-    ) as HTMLInputElement;
-    pollToggleCheckbox?.addEventListener("change", () => {
-      this.dataManager.setPollingEnabled(pollToggleCheckbox.checked);
-      const statusText = document.getElementById("statusText");
-      if (statusText) {
-        if (pollToggleCheckbox.checked) {
-          statusText.textContent = "Polling for updates...";
-        } else {
-          statusText.textContent = "Polling stopped";
-        }
-      }
-    });
-
-    // Initial data fetch and polling is now handled by the DataManager
-
-    // Set up chat functionality
-    this.setupChatBox();
-
-    // Set up keyboard shortcuts
-    this.setupKeyboardShortcuts();
-
-    // Set up spacing adjustments
-    this.adjustChatSpacing();
-    window.addEventListener("resize", () => this.adjustChatSpacing());
-  }
-
-  /**
-   * Set up chat box event listeners
-   */
-  private setupChatBox(): void {
-    const chatInput = document.getElementById(
-      "chatInput"
-    ) as HTMLTextAreaElement;
-    const sendButton = document.getElementById("sendChatButton");
-
-    // Handle pressing Enter in the text area
-    chatInput?.addEventListener("keydown", (event: KeyboardEvent) => {
-      // Send message if Enter is pressed without Shift key
-      if (event.key === "Enter" && !event.shiftKey) {
-        event.preventDefault(); // Prevent default newline
-        this.sendChatMessage();
-      }
-    });
-
-    // Handle send button click
-    sendButton?.addEventListener("click", () => this.sendChatMessage());
-
-    // Set up mutation observer for the chat container
-    if (chatInput) {
-      chatInput.addEventListener("input", () => {
-        // When content changes, adjust the spacing
-        requestAnimationFrame(() => this.adjustChatSpacing());
-      });
-    }
-  }
-
-  /**
-   * Send the chat message to the server
-   */
-  private async sendChatMessage(): Promise<void> {
-    const chatInput = document.getElementById(
-      "chatInput"
-    ) as HTMLTextAreaElement;
-    if (!chatInput) return;
-
-    const message = chatInput.value.trim();
-
-    // Don't send empty messages
-    if (!message) return;
-
-    try {
-      // Send the message to the server
-      const response = await fetch("chat", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ message }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.text();
-        throw new Error(`Server error: ${response.status} - ${errorData}`);
-      }
-
-      // Clear the input after sending
-      chatInput.value = "";
-
-      // Reset data manager state to force a full refresh after sending a message
-      // This ensures we get all messages in the correct order
-      // Use private API for now - TODO: add a resetState() method to DataManager
-      (this.dataManager as any).nextFetchIndex = 0;
-      (this.dataManager as any).currentFetchStartIndex = 0;
-
-      // If in diff view, switch to conversation view
-      if (this.viewMode === "diff2") {
-        await this.toggleViewMode("chat");
-      }
-
-      // Refresh the timeline data to show the new message
-      await this.dataManager.fetchData();
-    } catch (error) {
-      console.error("Error sending chat message:", error);
-      const statusText = document.getElementById("statusText");
-      if (statusText) {
-        statusText.textContent = "Error sending message";
-      }
-    }
-  }
-
-  /**
-   * Handle data changed event from the data manager
-   */
-  private handleDataChanged(eventData: {
-    state: any;
-    newMessages: TimelineMessage[];
-    isFirstFetch?: boolean;
-  }): void {
-    const { state, newMessages, isFirstFetch } = eventData;
-
-    // Check if we should scroll to bottom BEFORE handling new data
-    this.shouldScrollToBottom = this.checkShouldScroll();
-
-    // Update state info in the UI
-    this.updateUIWithState(state);
-
-    // Update the timeline if there are new messages
-    if (newMessages.length > 0) {
-      // Initialize the message renderer with current state
-      this.messageRenderer.initialize(
-        this.dataManager.getIsFirstLoad(),
-        this.dataManager.getCurrentFetchStartIndex()
-      );
-
-      this.messageRenderer.renderTimeline(newMessages, isFirstFetch || false);
-
-      // Update chart data using our full messages array
-      this.chartManager.setChartData(
-        this.chartManager.calculateCumulativeCostData(
-          this.dataManager.getMessages()
-        )
-      );
-
-      // If in charts view, update the charts
-      if (this.viewMode === "charts") {
-        this.chartManager.renderCharts();
-      }
-
-      const statusTextEl = document.getElementById("statusText");
-      if (statusTextEl) {
-        statusTextEl.textContent = "Updated just now";
-      }
-    } else {
-      const statusTextEl = document.getElementById("statusText");
-      if (statusTextEl) {
-        statusTextEl.textContent = "No new messages";
-      }
-    }
-  }
-
-  /**
-   * Handle connection status changed event from the data manager
-   */
-  private handleConnectionStatusChanged(
-    status: ConnectionStatus,
-    errorMessage?: string
-  ): void {
-    const pollingIndicator = document.getElementById("pollingIndicator");
-    if (!pollingIndicator) return;
-
-    // Remove all status classes
-    pollingIndicator.classList.remove("active", "error");
-
-    // Add appropriate class based on status
-    if (status === "connected") {
-      pollingIndicator.classList.add("active");
-    } else if (status === "disconnected") {
-      pollingIndicator.classList.add("error");
-    }
-
-    // Update status text if error message is provided
-    if (errorMessage) {
-      const statusTextEl = document.getElementById("statusText");
-      if (statusTextEl) {
-        statusTextEl.textContent = errorMessage;
-      }
-    }
-  }
-
-  /**
-   * Update UI elements with state data
-   */
-  private updateUIWithState(state: any): void {
-    // Update state info in the UI with safe getters
-    const hostnameEl = document.getElementById("hostname");
-    if (hostnameEl) {
-      hostnameEl.textContent = state?.hostname ?? "Unknown";
-    }
-
-    const workingDirEl = document.getElementById("workingDir");
-    if (workingDirEl) {
-      workingDirEl.textContent = state?.working_dir ?? "Unknown";
-    }
-
-    const initialCommitEl = document.getElementById("initialCommit");
-    if (initialCommitEl) {
-      initialCommitEl.textContent = state?.initial_commit
-        ? state.initial_commit.substring(0, 8)
-        : "Unknown";
-    }
-
-    const messageCountEl = document.getElementById("messageCount");
-    if (messageCountEl) {
-      messageCountEl.textContent = state?.message_count ?? "0";
-    }
-
-    const chatTitleEl = document.getElementById("chatTitle");
-    const bannerTitleEl = document.querySelector(".banner-title");
-
-    if (chatTitleEl && bannerTitleEl) {
-      if (state?.title) {
-        chatTitleEl.textContent = state.title;
-        chatTitleEl.style.display = "block";
-        bannerTitleEl.textContent = "sketch"; // Shorten title when chat title exists
-      } else {
-        chatTitleEl.style.display = "none";
-        bannerTitleEl.textContent = "sketch coding assistant"; // Full title when no chat title
-      }
-    }
-
-    // Get token and cost info safely
-    const inputTokens = state?.total_usage?.input_tokens ?? 0;
-    const outputTokens = state?.total_usage?.output_tokens ?? 0;
-    const cacheReadInputTokens =
-      state?.total_usage?.cache_read_input_tokens ?? 0;
-    const cacheCreationInputTokens =
-      state?.total_usage?.cache_creation_input_tokens ?? 0;
-    const totalCost = state?.total_usage?.total_cost_usd ?? 0;
-
-    const inputTokensEl = document.getElementById("inputTokens");
-    if (inputTokensEl) {
-      inputTokensEl.textContent = formatNumber(inputTokens, "0");
-    }
-
-    const outputTokensEl = document.getElementById("outputTokens");
-    if (outputTokensEl) {
-      outputTokensEl.textContent = formatNumber(outputTokens, "0");
-    }
-
-    const cacheReadInputTokensEl = document.getElementById(
-      "cacheReadInputTokens"
-    );
-    if (cacheReadInputTokensEl) {
-      cacheReadInputTokensEl.textContent = formatNumber(
-        cacheReadInputTokens,
-        "0"
-      );
-    }
-
-    const cacheCreationInputTokensEl = document.getElementById(
-      "cacheCreationInputTokens"
-    );
-    if (cacheCreationInputTokensEl) {
-      cacheCreationInputTokensEl.textContent = formatNumber(
-        cacheCreationInputTokens,
-        "0"
-      );
-    }
-
-    const totalCostEl = document.getElementById("totalCost");
-    if (totalCostEl) {
-      totalCostEl.textContent = `$${totalCost.toFixed(2)}`;
-    }
-  }
-
-  /**
-   * Check if we should scroll to the bottom
-   */
-  private checkShouldScroll(): boolean {
-    return checkShouldScroll(this.dataManager.getIsFirstLoad());
-  }
-
-  /**
-   * Dynamically adjust body padding based on the chat container height and top banner
-   */
-  private adjustChatSpacing(): void {
-    const chatContainer = document.querySelector(".chat-container");
-    const topBanner = document.querySelector(".top-banner");
-
-    if (chatContainer) {
-      const chatHeight = (chatContainer as HTMLElement).offsetHeight;
-      document.body.style.paddingBottom = `${chatHeight + 20}px`; // 20px extra for spacing
-    }
-
-    if (topBanner) {
-      const topHeight = (topBanner as HTMLElement).offsetHeight;
-      document.body.style.paddingTop = `${topHeight + 20}px`; // 20px extra for spacing
-    }
-  }
-
-  /**
-   * Set up keyboard shortcuts
-   */
-  private setupKeyboardShortcuts(): void {
-    // Add keyboard shortcut to automatically copy selected text with Ctrl+C (or Command+C on Mac)
-    document.addEventListener("keydown", (e: KeyboardEvent) => {
-      // We only want to handle Ctrl+C or Command+C
-      if ((e.ctrlKey || e.metaKey) && e.key === "c") {
-        // If text is already selected, we don't need to do anything special
-        // as the browser's default behavior will handle copying
-        // But we could add additional behavior here if needed
-      }
-    });
-  }
-
-  /**
-   * Toggle between different view modes: chat, diff2, charts
-   */
-  public async toggleViewMode(
-    mode: "chat" | "diff2" | "charts" | "terminal"
-  ): Promise<void> {
-    // Set the new view mode
-    this.viewMode = mode;
-
-    // Update URL with the current view mode
-    this.updateUrlForViewMode(mode);
-
-    // Get DOM elements
-    const timeline = document.getElementById("timeline");
-    const diff2View = document.getElementById("diff2View");
-    const chartView = document.getElementById("chartView");
-    const container = document.querySelector(".timeline-container");
-    const terminalView = document.getElementById("terminalView");
-    const conversationButton = document.getElementById(
-      "showConversationButton"
-    );
-    const diff2Button = document.getElementById("showDiff2Button");
-    const chartsButton = document.getElementById("showChartsButton");
-    const terminalButton = document.getElementById("showTerminalButton");
-
-    if (
-      !timeline ||
-      !diff2View ||
-      !chartView ||
-      !container ||
-      !conversationButton ||
-      !diff2Button ||
-      !chartsButton ||
-      !terminalView ||
-      !terminalButton
-    ) {
-      console.error("Required DOM elements not found");
-      return;
-    }
-
-    // Hide all views first
-    timeline.style.display = "none";
-    diff2View.style.display = "none";
-    chartView.style.display = "none";
-    terminalView.style.display = "none";
-
-    // Reset all button states
-    conversationButton.classList.remove("active");
-    diff2Button.classList.remove("active");
-    chartsButton.classList.remove("active");
-    terminalButton.classList.remove("active");
-
-    // Remove diff2-active and diff-active classes from container
-    container.classList.remove("diff2-active");
-    container.classList.remove("diff-active");
-
-    // If switching to chat view, clear the current commit hash
-    if (mode === "chat") {
-      this.diffViewer.clearCurrentCommitHash();
-    }
-
-    // Add class to indicate views are initialized (prevents flash of content)
-    container.classList.add("view-initialized");
-
-    // Show the selected view based on mode
-    switch (mode) {
-      case "chat":
-        timeline.style.display = "block";
-        conversationButton.classList.add("active");
-        break;
-      case "diff2":
-        diff2View.style.display = "block";
-        diff2Button.classList.add("active");
-        this.diffViewer.setViewMode(mode); // Update view mode in diff viewer
-        await this.diffViewer.loadDiff2HtmlContent();
-        break;
-      case "charts":
-        chartView.style.display = "block";
-        chartsButton.classList.add("active");
-        await this.chartManager.renderCharts();
-        break;
-      case "terminal":
-        terminalView.style.display = "block";
-        terminalButton.classList.add("active");
-        this.terminalHandler.setViewMode(mode); // Update view mode in terminal handler
-        this.diffViewer.setViewMode(mode); // Update view mode in diff viewer
-        await this.initializeTerminal();
-        break;
-    }
-  }
-
-  /**
-   * Initialize the terminal view
-   */
-  private async initializeTerminal(): Promise<void> {
-    // Use the TerminalHandler to initialize the terminal
-    await this.terminalHandler.initializeTerminal();
-  }
-
-  /**
-   * Initialize the view based on URL parameters
-   * This allows bookmarking and sharing of specific views
-   */
-  private async initializeViewFromUrl(): Promise<void> {
-    // Parse the URL parameters
-    const urlParams = new URLSearchParams(window.location.search);
-    const viewParam = urlParams.get("view");
-    const commitParam = urlParams.get("commit");
-
-    // Default to chat view if no valid view parameter is provided
-    if (!viewParam) {
-      // Explicitly set chat view to ensure button state is correct
-      await this.toggleViewMode("chat");
-      return;
-    }
-
-    // Check if the view parameter is valid
-    if (
-      viewParam === "chat" ||
-      viewParam === "diff2" ||
-      viewParam === "charts" ||
-      viewParam === "terminal"
-    ) {
-      // If it's a diff view with a commit hash, set the commit hash
-      if (viewParam === "diff2" && commitParam) {
-        this.diffViewer.setCurrentCommitHash(commitParam);
-      }
-
-      // Set the view mode
-      await this.toggleViewMode(
-        viewParam as "chat" | "diff2" | "charts" | "terminal"
-      );
-    }
-  }
-
-  /**
-   * Update URL to reflect current view mode for bookmarking and sharing
-   * @param mode The current view mode
-   */
-  private updateUrlForViewMode(
-    mode: "chat" | "diff2" | "charts" | "terminal"
-  ): void {
-    // Get the current URL without search parameters
-    const url = new URL(window.location.href);
-
-    // Clear existing parameters
-    url.search = "";
-
-    // Only add view parameter if not in default chat view
-    if (mode !== "chat") {
-      url.searchParams.set("view", mode);
-
-      // If in diff view and there's a commit hash, include that too
-      if (mode === "diff2" && this.diffViewer.getCurrentCommitHash()) {
-        url.searchParams.set("commit", this.diffViewer.getCurrentCommitHash());
-      }
-    }
-
-    // Update the browser history without reloading the page
-    window.history.pushState({ mode }, "", url.toString());
-  }
-
-  /**
-   * Stop the inner loop by calling the /cancel endpoint
-   */
-  private async stopInnerLoop(): Promise<void> {
-    if (!confirm("Are you sure you want to stop the current operation?")) {
-      return;
-    }
-
-    try {
-      const statusText = document.getElementById("statusText");
-      if (statusText) {
-        statusText.textContent = "Cancelling...";
-      }
-
-      const response = await fetch("cancel", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ reason: "User requested cancellation via UI" }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.text();
-        throw new Error(`Server error: ${response.status} - ${errorData}`);
-      }
-
-      // Parse the response
-      const _result = await response.json();
-      if (statusText) {
-        statusText.textContent = "Operation cancelled";
-      }
-    } catch (error) {
-      console.error("Error cancelling operation:", error);
-      const statusText = document.getElementById("statusText");
-      if (statusText) {
-        statusText.textContent = "Error cancelling operation";
-      }
-    }
-  }
-}
-
-// Create and initialize the timeline manager when the page loads
-const _timelineManager = new TimelineManager();
diff --git a/loop/webui/src/timeline/charts.ts b/loop/webui/src/timeline/charts.ts
deleted file mode 100644
index 0ed56e8..0000000
--- a/loop/webui/src/timeline/charts.ts
+++ /dev/null
@@ -1,468 +0,0 @@
-import type { TimelineMessage } from "./types";
-import vegaEmbed from "vega-embed";
-import { TopLevelSpec } from "vega-lite";
-
-/**
- * ChartManager handles all chart-related functionality for the timeline.
- * This includes rendering charts, calculating data, and managing chart state.
- */
-export class ChartManager {
-  private chartData: { timestamp: Date; cost: number }[] = [];
-
-  /**
-   * Create a new ChartManager instance
-   */
-  constructor() {
-    this.chartData = [];
-  }
-
-  /**
-   * Calculate cumulative cost data from messages
-   */
-  public calculateCumulativeCostData(
-    messages: TimelineMessage[],
-  ): { timestamp: Date; cost: number }[] {
-    if (!messages || messages.length === 0) {
-      return [];
-    }
-
-    let cumulativeCost = 0;
-    const data: { timestamp: Date; cost: number }[] = [];
-
-    for (const message of messages) {
-      if (message.timestamp && message.usage && message.usage.cost_usd) {
-        const timestamp = new Date(message.timestamp);
-        cumulativeCost += message.usage.cost_usd;
-
-        data.push({
-          timestamp,
-          cost: cumulativeCost,
-        });
-      }
-    }
-
-    return data;
-  }
-
-  /**
-   * Get the current chart data
-   */
-  public getChartData(): { timestamp: Date; cost: number }[] {
-    return this.chartData;
-  }
-
-  /**
-   * Set chart data
-   */
-  public setChartData(data: { timestamp: Date; cost: number }[]): void {
-    this.chartData = data;
-  }
-
-  /**
-   * Fetch all messages to generate chart data
-   */
-  public async fetchAllMessages(): Promise<void> {
-    try {
-      // Fetch all messages in a single request
-      const response = await fetch("messages");
-      if (!response.ok) {
-        throw new Error(`Failed to fetch messages: ${response.status}`);
-      }
-
-      const allMessages = await response.json();
-      if (Array.isArray(allMessages)) {
-        // Sort messages chronologically
-        allMessages.sort((a, b) => {
-          const dateA = a.timestamp ? new Date(a.timestamp).getTime() : 0;
-          const dateB = b.timestamp ? new Date(b.timestamp).getTime() : 0;
-          return dateA - dateB;
-        });
-
-        // Calculate cumulative cost data
-        this.chartData = this.calculateCumulativeCostData(allMessages);
-      }
-    } catch (error) {
-      console.error("Error fetching messages for chart:", error);
-      this.chartData = [];
-    }
-  }
-
-  /**
-   * Render all charts in the chart view
-   */
-  public async renderCharts(): Promise<void> {
-    const chartContainer = document.getElementById("chartContainer");
-    if (!chartContainer) return;
-
-    try {
-      // Show loading state
-      chartContainer.innerHTML = "<div class='loader'></div>";
-
-      // Fetch messages if necessary
-      if (this.chartData.length === 0) {
-        await this.fetchAllMessages();
-      }
-
-      // Clear the container for multiple charts
-      chartContainer.innerHTML = "";
-
-      // Create cost chart container
-      const costChartDiv = document.createElement("div");
-      costChartDiv.className = "chart-section";
-      costChartDiv.innerHTML =
-        "<h3>Dollar Usage Over Time</h3><div id='costChart'></div>";
-      chartContainer.appendChild(costChartDiv);
-
-      // Create messages chart container
-      const messagesChartDiv = document.createElement("div");
-      messagesChartDiv.className = "chart-section";
-      messagesChartDiv.innerHTML =
-        "<h3>Message Timeline</h3><div id='messagesChart'></div>";
-      chartContainer.appendChild(messagesChartDiv);
-
-      // Render both charts
-      await this.renderDollarUsageChart();
-      await this.renderMessagesChart();
-    } catch (error) {
-      console.error("Error rendering charts:", error);
-      chartContainer.innerHTML = `<p>Error rendering charts: ${error instanceof Error ? error.message : "Unknown error"}</p>`;
-    }
-  }
-
-  /**
-   * Render the dollar usage chart using Vega-Lite
-   */
-  private async renderDollarUsageChart(): Promise<void> {
-    const costChartContainer = document.getElementById("costChart");
-    if (!costChartContainer) return;
-
-    try {
-      // Display cost chart using Vega-Lite
-      if (this.chartData.length === 0) {
-        costChartContainer.innerHTML =
-          "<p>No cost data available to display.</p>";
-        return;
-      }
-
-      // Create a Vega-Lite spec for the line chart
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const costSpec: any = {
-        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
-        description: "Cumulative cost over time",
-        width: "container",
-        height: 300,
-        data: {
-          values: this.chartData.map((d) => ({
-            timestamp: d.timestamp.toISOString(),
-            cost: d.cost,
-          })),
-        },
-        mark: {
-          type: "line",
-          point: true,
-        },
-        encoding: {
-          x: {
-            field: "timestamp",
-            type: "temporal",
-            title: "Time",
-            axis: {
-              format: "%H:%M:%S",
-              title: "Time",
-              labelAngle: -45,
-            },
-          },
-          y: {
-            field: "cost",
-            type: "quantitative",
-            title: "Cumulative Cost (USD)",
-            axis: {
-              format: "$,.4f",
-            },
-          },
-          tooltip: [
-            {
-              field: "timestamp",
-              type: "temporal",
-              title: "Time",
-              format: "%Y-%m-%d %H:%M:%S",
-            },
-            {
-              field: "cost",
-              type: "quantitative",
-              title: "Cumulative Cost",
-              format: "$,.4f",
-            },
-          ],
-        },
-      };
-
-      // Render the cost chart
-      await vegaEmbed(costChartContainer, costSpec, {
-        actions: true,
-        renderer: "svg",
-      });
-    } catch (error) {
-      console.error("Error rendering dollar usage chart:", error);
-      costChartContainer.innerHTML = `<p>Error rendering dollar usage chart: ${error instanceof Error ? error.message : "Unknown error"}</p>`;
-    }
-  }
-
-  /**
-   * Render the messages timeline chart using Vega-Lite
-   */
-  private async renderMessagesChart(): Promise<void> {
-    const messagesChartContainer = document.getElementById("messagesChart");
-    if (!messagesChartContainer) return;
-
-    try {
-      // Get all messages
-      const response = await fetch("messages");
-      if (!response.ok) {
-        throw new Error(`Failed to fetch messages: ${response.status}`);
-      }
-
-      const allMessages = await response.json();
-      if (!Array.isArray(allMessages) || allMessages.length === 0) {
-        messagesChartContainer.innerHTML =
-          "<p>No messages available to display.</p>";
-        return;
-      }
-
-      // Sort messages chronologically
-      allMessages.sort((a, b) => {
-        const dateA = a.timestamp ? new Date(a.timestamp).getTime() : 0;
-        const dateB = b.timestamp ? new Date(b.timestamp).getTime() : 0;
-        return dateA - dateB;
-      });
-
-      // Create unique indexes for all messages
-      const messageIndexMap = new Map<string, number>();
-      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, index);
-      });
-
-      // Prepare data for messages with start_time and end_time (bar marks)
-      const barData = allMessages
-        .filter((msg) => msg.start_time && msg.end_time) // Only include messages with explicit start and end times
-        .map((msg) => {
-          // Parse start and end times
-          const startTime = new Date(msg.start_time!);
-          const endTime = new Date(msg.end_time!);
-
-          // Get the index for this message
-          const msgId = msg.timestamp ? msg.timestamp.toString() : "";
-          const index = messageIndexMap.get(msgId) || 0;
-
-          // Truncate content for tooltip readability
-          const displayContent = msg.content
-            ? msg.content.length > 100
-              ? msg.content.substring(0, 100) + "..."
-              : msg.content
-            : "No content";
-
-          // Prepare tool input and output for tooltip if applicable
-          const toolInput = msg.input
-            ? msg.input.length > 100
-              ? msg.input.substring(0, 100) + "..."
-              : msg.input
-            : "";
-
-          const toolResult = msg.tool_result
-            ? msg.tool_result.length > 100
-              ? msg.tool_result.substring(0, 100) + "..."
-              : msg.tool_result
-            : "";
-
-          return {
-            index: index,
-            message_type: msg.type,
-            content: displayContent,
-            tool_name: msg.tool_name || "",
-            tool_input: toolInput,
-            tool_result: toolResult,
-            start_time: startTime.toISOString(),
-            end_time: endTime.toISOString(),
-            message: JSON.stringify(msg, null, 2), // Full message for detailed inspection
-          };
-        });
-
-      // Prepare data for messages with timestamps only (point marks)
-      const pointData = allMessages
-        .filter((msg) => msg.timestamp && !(msg.start_time && msg.end_time)) // Only messages with timestamp but without start/end times
-        .map((msg) => {
-          // Get the timestamp
-          const timestamp = new Date(msg.timestamp!);
-
-          // Get the index for this message
-          const msgId = msg.timestamp ? msg.timestamp.toString() : "";
-          const index = messageIndexMap.get(msgId) || 0;
-
-          // Truncate content for tooltip readability
-          const displayContent = msg.content
-            ? msg.content.length > 100
-              ? msg.content.substring(0, 100) + "..."
-              : msg.content
-            : "No content";
-
-          // Prepare tool input and output for tooltip if applicable
-          const toolInput = msg.input
-            ? msg.input.length > 100
-              ? msg.input.substring(0, 100) + "..."
-              : msg.input
-            : "";
-
-          const toolResult = msg.tool_result
-            ? msg.tool_result.length > 100
-              ? msg.tool_result.substring(0, 100) + "..."
-              : msg.tool_result
-            : "";
-
-          return {
-            index: index,
-            message_type: msg.type,
-            content: displayContent,
-            tool_name: msg.tool_name || "",
-            tool_input: toolInput,
-            tool_result: toolResult,
-            time: timestamp.toISOString(),
-            message: JSON.stringify(msg, null, 2), // Full message for detailed inspection
-          };
-        });
-
-      // Check if we have any data to display
-      if (barData.length === 0 && pointData.length === 0) {
-        messagesChartContainer.innerHTML =
-          "<p>No message timing data available to display.</p>";
-        return;
-      }
-
-      // Calculate height based on number of unique messages
-      const chartHeight = 20 * Math.min(allMessages.length, 25); // Max 25 visible at once
-
-      // Create a layered Vega-Lite spec combining bars and points
-      const messagesSpec: TopLevelSpec = {
-        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
-        description: "Message Timeline",
-        width: "container",
-        height: chartHeight,
-        layer: [],
-      };
-
-      // Add bar layer if we have bar data
-      if (barData.length > 0) {
-        messagesSpec.layer.push({
-          data: { values: barData },
-          mark: {
-            type: "bar",
-            height: 16,
-          },
-          encoding: {
-            x: {
-              field: "start_time",
-              type: "temporal",
-              title: "Time",
-              axis: {
-                format: "%H:%M:%S",
-                title: "Time",
-                labelAngle: -45,
-              },
-            },
-            x2: { field: "end_time" },
-            y: {
-              field: "index",
-              type: "ordinal",
-              title: "Message Index",
-              axis: {
-                grid: true,
-              },
-            },
-            color: {
-              field: "message_type",
-              type: "nominal",
-              title: "Message Type",
-              legend: {},
-            },
-            tooltip: [
-              { field: "message_type", type: "nominal", title: "Type" },
-              { field: "tool_name", type: "nominal", title: "Tool" },
-              {
-                field: "start_time",
-                type: "temporal",
-                title: "Start Time",
-                format: "%H:%M:%S.%L",
-              },
-              {
-                field: "end_time",
-                type: "temporal",
-                title: "End Time",
-                format: "%H:%M:%S.%L",
-              },
-              { field: "content", type: "nominal", title: "Content" },
-              { field: "tool_input", type: "nominal", title: "Tool Input" },
-              { field: "tool_result", type: "nominal", title: "Tool Result" },
-            ],
-          },
-        });
-      }
-
-      // Add point layer if we have point data
-      if (pointData.length > 0) {
-        messagesSpec.layer.push({
-          data: { values: pointData },
-          mark: {
-            type: "point",
-            size: 100,
-            filled: true,
-          },
-          encoding: {
-            x: {
-              field: "time",
-              type: "temporal",
-              title: "Time",
-              axis: {
-                format: "%H:%M:%S",
-                title: "Time",
-                labelAngle: -45,
-              },
-            },
-            y: {
-              field: "index",
-              type: "ordinal",
-              title: "Message Index",
-            },
-            color: {
-              field: "message_type",
-              type: "nominal",
-              title: "Message Type",
-            },
-            tooltip: [
-              { field: "message_type", type: "nominal", title: "Type" },
-              { field: "tool_name", type: "nominal", title: "Tool" },
-              {
-                field: "time",
-                type: "temporal",
-                title: "Timestamp",
-                format: "%H:%M:%S.%L",
-              },
-              { field: "content", type: "nominal", title: "Content" },
-              { field: "tool_input", type: "nominal", title: "Tool Input" },
-              { field: "tool_result", type: "nominal", title: "Tool Result" },
-            ],
-          },
-        });
-      }
-
-      // Render the messages timeline chart
-      await vegaEmbed(messagesChartContainer, messagesSpec, {
-        actions: true,
-        renderer: "svg",
-      });
-    } catch (error) {
-      console.error("Error rendering messages chart:", error);
-      messagesChartContainer.innerHTML = `<p>Error rendering messages chart: ${error instanceof Error ? error.message : "Unknown error"}</p>`;
-    }
-  }
-}
diff --git a/loop/webui/src/timeline/commits.ts b/loop/webui/src/timeline/commits.ts
deleted file mode 100644
index f4303f2..0000000
--- a/loop/webui/src/timeline/commits.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Utility functions for rendering commit messages in the timeline
- */
-
-import { escapeHTML } from "./utils";
-
-interface Commit {
-  hash: string;
-  subject: string;
-  body: string;
-  pushed_branch?: string;
-}
-
-/**
- * Create HTML elements to display commits in the timeline
- * @param commits List of commit information to display
- * @param diffViewerCallback Callback function to show commit diff when requested
- * @returns The created HTML container element with commit information
- */
-export function createCommitsContainer(
-  commits: Commit[],
-  diffViewerCallback: (commitHash: string) => void
-): HTMLElement {
-  const commitsContainer = document.createElement("div");
-  commitsContainer.className = "commits-container";
-
-  // Create a header for commits
-  const commitsHeaderRow = document.createElement("div");
-  commitsHeaderRow.className = "commits-header";
-  commitsHeaderRow.textContent = `${commits.length} new commit${commits.length > 1 ? "s" : ""} detected`;
-  commitsContainer.appendChild(commitsHeaderRow);
-
-  // Create a row for commit boxes
-  const commitBoxesRow = document.createElement("div");
-  commitBoxesRow.className = "commit-boxes-row";
-
-  // Add each commit as a box
-  commits.forEach((commit) => {
-    // Create the commit box
-    const commitBox = document.createElement("div");
-    commitBox.className = "commit-box";
-
-    // Show commit hash and subject line as the preview
-    const commitPreview = document.createElement("div");
-    commitPreview.className = "commit-preview";
-
-    // Include pushed branch information if available
-    let previewHTML = `<span class="commit-hash">${commit.hash.substring(0, 8)}</span> ${escapeHTML(commit.subject)}`;
-    if (commit.pushed_branch) {
-      previewHTML += ` <span class="pushed-branch">→ pushed to ${escapeHTML(commit.pushed_branch)}</span>`;
-    }
-
-    commitPreview.innerHTML = previewHTML;
-    commitBox.appendChild(commitPreview);
-
-    // Create expandable view for commit details
-    const expandedView = document.createElement("div");
-    expandedView.className = "commit-details is-hidden";
-    expandedView.innerHTML = `<pre>${escapeHTML(commit.body)}</pre>`;
-    commitBox.appendChild(expandedView);
-
-    // Toggle visibility of expanded view when clicking the preview
-    commitPreview.addEventListener("click", (event) => {
-      // If holding Ctrl/Cmd key, show diff for this commit
-      if (event.ctrlKey || event.metaKey) {
-        // Call the diff viewer callback with the commit hash
-        diffViewerCallback(commit.hash);
-      } else {
-        // Normal behavior - toggle expanded view
-        expandedView.classList.toggle("is-hidden");
-      }
-    });
-    
-    // Add a diff button to view commit changes
-    const diffButton = document.createElement("button");
-    diffButton.className = "commit-diff-button";
-    diffButton.textContent = "View Changes";
-    diffButton.addEventListener("click", (event) => {
-      event.stopPropagation(); // Prevent triggering the parent click event
-      diffViewerCallback(commit.hash);
-    });
-    // Add the button directly to the commit box
-    commitBox.appendChild(diffButton);
-
-    commitBoxesRow.appendChild(commitBox);
-  });
-
-  commitsContainer.appendChild(commitBoxesRow);
-  return commitsContainer;
-}
diff --git a/loop/webui/src/timeline/components/collapsible.ts b/loop/webui/src/timeline/components/collapsible.ts
deleted file mode 100644
index 12f90ec..0000000
--- a/loop/webui/src/timeline/components/collapsible.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { TimelineMessage } from "../types";
-
-/**
- * Adds collapsible functionality to long content elements.
- * This creates a toggle button that allows users to expand/collapse long text content.
- *
- * @param message - The timeline message containing the content
- * @param textEl - The DOM element containing the text content
- * @param containerEl - The container element for the text and copy button
- * @param contentEl - The outer content element that will contain everything
- */
-export function addCollapsibleFunctionality(
-  message: TimelineMessage,
-  textEl: HTMLElement,
-  containerEl: HTMLElement,
-  contentEl: HTMLElement
-): void {
-  // Don't collapse end_of_turn messages (final output) regardless of length
-  if (message.content.length > 1000 && !message.end_of_turn) {
-    textEl.classList.add("collapsed");
-
-    const toggleButton = document.createElement("button");
-    toggleButton.className = "collapsible";
-    toggleButton.textContent = "Show more...";
-    toggleButton.addEventListener("click", () => {
-      textEl.classList.toggle("collapsed");
-      toggleButton.textContent = textEl.classList.contains("collapsed")
-        ? "Show more..."
-        : "Show less";
-    });
-
-    contentEl.appendChild(containerEl);
-    contentEl.appendChild(toggleButton);
-  } else {
-    contentEl.appendChild(containerEl);
-  }
-}
diff --git a/loop/webui/src/timeline/copybutton.ts b/loop/webui/src/timeline/copybutton.ts
deleted file mode 100644
index d9b994b..0000000
--- a/loop/webui/src/timeline/copybutton.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Creates a copy button container with a functioning copy button
- */
-export function createCopyButton(textToCopy: string): {
-  container: HTMLDivElement;
-  button: HTMLButtonElement;
-} {
-  // Create container for the copy button
-  const copyButtonContainer = document.createElement("div");
-  copyButtonContainer.className = "message-actions";
-
-  // Create the copy button itself
-  const copyButton = document.createElement("button");
-  copyButton.className = "copy-button";
-  copyButton.textContent = "Copy";
-  copyButton.title = "Copy text to clipboard";
-  
-  // Add click event listener to handle copying
-  copyButton.addEventListener("click", (e) => {
-    e.stopPropagation();
-    navigator.clipboard
-      .writeText(textToCopy)
-      .then(() => {
-        copyButton.textContent = "Copied!";
-        setTimeout(() => {
-          copyButton.textContent = "Copy";
-        }, 2000);
-      })
-      .catch((err) => {
-        console.error("Failed to copy text: ", err);
-        copyButton.textContent = "Failed";
-        setTimeout(() => {
-          copyButton.textContent = "Copy";
-        }, 2000);
-      });
-  });
-
-  copyButtonContainer.appendChild(copyButton);
-  
-  return {
-    container: copyButtonContainer,
-    button: copyButton
-  };
-}
diff --git a/loop/webui/src/timeline/diffviewer.ts b/loop/webui/src/timeline/diffviewer.ts
deleted file mode 100644
index 1460dc3..0000000
--- a/loop/webui/src/timeline/diffviewer.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-import * as Diff2Html from "diff2html";
-
-/**
- * Class to handle diff and commit viewing functionality in the timeline UI.
- */
-export class DiffViewer {
-  // Current commit hash being viewed
-  private currentCommitHash: string = "";
-  // Selected line in the diff for commenting
-  private selectedDiffLine: string | null = null;
-  // Current view mode (needed for integration with TimelineManager)
-  private viewMode: string = "chat";
-
-  /**
-   * Constructor for DiffViewer
-   */
-  constructor() {}
-
-  /**
-   * Sets the current view mode
-   * @param mode The current view mode
-   */
-  public setViewMode(mode: string): void {
-    this.viewMode = mode;
-  }
-
-  /**
-   * Gets the current commit hash
-   * @returns The current commit hash
-   */
-  public getCurrentCommitHash(): string {
-    return this.currentCommitHash;
-  }
-
-  /**
-   * Sets the current commit hash
-   * @param hash The commit hash to set
-   */
-  public setCurrentCommitHash(hash: string): void {
-    this.currentCommitHash = hash;
-  }
-
-  /**
-   * Clears the current commit hash
-   */
-  public clearCurrentCommitHash(): void {
-    this.currentCommitHash = "";
-  }
-
-  /**
-   * Loads diff content and renders it using diff2html
-   * @param commitHash Optional commit hash to load diff for
-   */
-  public async loadDiff2HtmlContent(commitHash?: string): Promise<void> {
-    const diff2htmlContent = document.getElementById("diff2htmlContent");
-    const container = document.querySelector(".timeline-container");
-    if (!diff2htmlContent || !container) return;
-
-    try {
-      // Show loading state
-      diff2htmlContent.innerHTML = "Loading enhanced diff...";
-
-      // Add classes to container to allow full-width rendering
-      container.classList.add("diff2-active");
-      container.classList.add("diff-active");
-      
-      // Use currentCommitHash if provided or passed from parameter
-      const hash = commitHash || this.currentCommitHash;
-      
-      // Build the diff URL - include commit hash if specified
-      const diffUrl = hash ? `diff?commit=${hash}` : "diff";
-      
-      // Fetch the diff from the server
-      const response = await fetch(diffUrl);
-
-      if (!response.ok) {
-        throw new Error(
-          `Server returned ${response.status}: ${response.statusText}`,
-        );
-      }
-
-      const diffText = await response.text();
-
-      if (!diffText || diffText.trim() === "") {
-        diff2htmlContent.innerHTML =
-          "<span style='color: #666; font-style: italic;'>No changes detected since conversation started.</span>";
-        return;
-      }
-
-      // Get the selected view format
-      const formatRadios = document.getElementsByName("diffViewFormat") as NodeListOf<HTMLInputElement>;
-      let outputFormat = "side-by-side"; // default
-      
-      // Convert NodeListOf to Array to ensure [Symbol.iterator]() is available
-      Array.from(formatRadios).forEach(radio => {
-        if (radio.checked) {
-          outputFormat = radio.value as "side-by-side" | "line-by-line";
-        }
-      })
-      
-      // Render the diff using diff2html
-      const diffHtml = Diff2Html.html(diffText, {
-        outputFormat: outputFormat as "side-by-side" | "line-by-line",
-        drawFileList: true,
-        matching: "lines",
-        // Make sure no unnecessary scrollbars in the nested containers
-        renderNothingWhenEmpty: false,
-        colorScheme: "light" as any, // Force light mode to match the rest of the UI
-      });
-
-      // Insert the generated HTML
-      diff2htmlContent.innerHTML = diffHtml;
-
-      // Add CSS styles to ensure we don't have double scrollbars
-      const d2hFiles = diff2htmlContent.querySelectorAll(".d2h-file-wrapper");
-      d2hFiles.forEach((file) => {
-        const contentElem = file.querySelector(".d2h-files-diff");
-        if (contentElem) {
-          // Remove internal scrollbar - the outer container will handle scrolling
-          (contentElem as HTMLElement).style.overflow = "visible";
-          (contentElem as HTMLElement).style.maxHeight = "none";
-        }
-      });
-
-      // Add click event handlers to each code line for commenting
-      this.setupDiff2LineComments();
-      
-      // Setup event listeners for diff view format radio buttons
-      this.setupDiffViewFormatListeners();
-    } catch (error) {
-      console.error("Error loading diff2html content:", error);
-      const errorMessage =
-        error instanceof Error ? error.message : "Unknown error";
-      diff2htmlContent.innerHTML = `<span style='color: #dc3545;'>Error loading enhanced diff: ${errorMessage}</span>`;
-    }
-  }
-
-  /**
-   * Setup event listeners for diff view format radio buttons
-   */
-  private setupDiffViewFormatListeners(): void {
-    const formatRadios = document.getElementsByName("diffViewFormat") as NodeListOf<HTMLInputElement>;
-    
-    // Convert NodeListOf to Array to ensure [Symbol.iterator]() is available
-    Array.from(formatRadios).forEach(radio => {
-      radio.addEventListener("change", () => {
-        // Reload the diff with the new format when radio selection changes
-        this.loadDiff2HtmlContent(this.currentCommitHash);
-      });
-    })
-  }
-  
-  /**
-   * Setup handlers for diff2 code lines to enable commenting
-   */
-  private setupDiff2LineComments(): void {
-    const diff2htmlContent = document.getElementById("diff2htmlContent");
-    if (!diff2htmlContent) return;
-
-    console.log("Setting up diff2 line comments");
-
-    // Add plus buttons to each code line
-    this.addCommentButtonsToCodeLines();
-
-    // Use event delegation for handling clicks on plus buttons
-    diff2htmlContent.addEventListener("click", (event) => {
-      const target = event.target as HTMLElement;
-      
-      // Only respond to clicks on the plus button
-      if (target.classList.contains("d2h-gutter-comment-button")) {
-        // Find the parent row first
-        const row = target.closest("tr");
-        if (!row) return;
-        
-        // Then find the code line in that row
-        const codeLine = row.querySelector(".d2h-code-side-line") || row.querySelector(".d2h-code-line");
-        if (!codeLine) return;
-
-        // Get the line text content
-        const lineContent = codeLine.querySelector(".d2h-code-line-ctn");
-        if (!lineContent) return;
-
-        const lineText = lineContent.textContent?.trim() || "";
-
-        // Get file name to add context
-        const fileHeader = codeLine
-          .closest(".d2h-file-wrapper")
-          ?.querySelector(".d2h-file-name");
-        const fileName = fileHeader
-          ? fileHeader.textContent?.trim()
-          : "Unknown file";
-
-        // Get line number if available
-        const lineNumElem = codeLine
-          .closest("tr")
-          ?.querySelector(".d2h-code-side-linenumber");
-        const lineNum = lineNumElem ? lineNumElem.textContent?.trim() : "";
-        const lineInfo = lineNum ? `Line ${lineNum}: ` : "";
-
-        // Format the line for the comment box with file context and line number
-        const formattedLine = `${fileName} ${lineInfo}${lineText}`;
-
-        console.log("Comment button clicked for line: ", formattedLine);
-
-        // Open the comment box with this line
-        this.openDiffCommentBox(formattedLine, 0);
-
-        // Prevent event from bubbling up
-        event.stopPropagation();
-      }
-    });
-
-    // Handle text selection
-    let isSelecting = false;
-    
-    diff2htmlContent.addEventListener("mousedown", () => {
-      isSelecting = false;
-    });
-    
-    diff2htmlContent.addEventListener("mousemove", (event) => {
-      // If mouse is moving with button pressed, user is selecting text
-      if (event.buttons === 1) { // Primary button (usually left) is pressed
-        isSelecting = true;
-      }
-    });
-  }
-
-  /**
-   * Add plus buttons to each table row in the diff for commenting
-   */
-  private addCommentButtonsToCodeLines(): void {
-    const diff2htmlContent = document.getElementById("diff2htmlContent");
-    if (!diff2htmlContent) return;
-    
-    // Target code lines first, then find their parent rows
-    const codeLines = diff2htmlContent.querySelectorAll(
-      ".d2h-code-side-line, .d2h-code-line"
-    );
-    
-    // Create a Set to store unique rows to avoid duplicates
-    const rowsSet = new Set<HTMLElement>();
-    
-    // Get all rows that contain code lines
-    codeLines.forEach(line => {
-      const row = line.closest('tr');
-      if (row) rowsSet.add(row as HTMLElement);
-    });
-    
-    // Convert Set back to array for processing
-    const codeRows = Array.from(rowsSet);
-    
-    codeRows.forEach((row) => {
-      const rowElem = row as HTMLElement;
-      
-      // Skip info lines without actual code (e.g., "file added")
-      if (rowElem.querySelector(".d2h-info")) {
-        return;
-      }
-      
-      // Find the code line number element (first TD in the row)
-      const lineNumberCell = rowElem.querySelector(
-        ".d2h-code-side-linenumber, .d2h-code-linenumber"
-      );
-      
-      if (!lineNumberCell) return;
-      
-      // Create the plus button
-      const plusButton = document.createElement("span");
-      plusButton.className = "d2h-gutter-comment-button";
-      plusButton.innerHTML = "+";
-      plusButton.title = "Add a comment on this line";
-      
-      // Add button to the line number cell for proper positioning
-      (lineNumberCell as HTMLElement).style.position = "relative"; // Ensure positioning context
-      lineNumberCell.appendChild(plusButton);
-    });
-  }
-
-  /**
-   * Open the comment box for a selected diff line
-   */
-  private openDiffCommentBox(lineText: string, _lineNumber: number): void {
-    const commentBox = document.getElementById("diffCommentBox");
-    const selectedLine = document.getElementById("selectedLine");
-    const commentInput = document.getElementById(
-      "diffCommentInput",
-    ) as HTMLTextAreaElement;
-
-    if (!commentBox || !selectedLine || !commentInput) return;
-
-    // Store the selected line
-    this.selectedDiffLine = lineText;
-
-    // Display the line in the comment box
-    selectedLine.textContent = lineText;
-
-    // Reset the comment input
-    commentInput.value = "";
-
-    // Show the comment box
-    commentBox.style.display = "block";
-
-    // Focus on the comment input
-    commentInput.focus();
-
-    // Add event listeners for submit and cancel buttons
-    const submitButton = document.getElementById("submitDiffComment");
-    if (submitButton) {
-      submitButton.onclick = () => this.submitDiffComment();
-    }
-
-    const cancelButton = document.getElementById("cancelDiffComment");
-    if (cancelButton) {
-      cancelButton.onclick = () => this.closeDiffCommentBox();
-    }
-  }
-
-  /**
-   * Close the diff comment box without submitting
-   */
-  private closeDiffCommentBox(): void {
-    const commentBox = document.getElementById("diffCommentBox");
-    if (commentBox) {
-      commentBox.style.display = "none";
-    }
-    this.selectedDiffLine = null;
-  }
-
-  /**
-   * Submit a comment on a diff line
-   */
-  private submitDiffComment(): void {
-    const commentInput = document.getElementById(
-      "diffCommentInput",
-    ) as HTMLTextAreaElement;
-    const chatInput = document.getElementById(
-      "chatInput",
-    ) as HTMLTextAreaElement;
-
-    if (!commentInput || !chatInput) return;
-
-    const comment = commentInput.value.trim();
-
-    // Validate inputs
-    if (!this.selectedDiffLine || !comment) {
-      alert("Please select a line and enter a comment.");
-      return;
-    }
-
-    // Format the comment in a readable way
-    const formattedComment = `\`\`\`\n${this.selectedDiffLine}\n\`\`\`\n\n${comment}`;
-
-    // Append the formatted comment to the chat textarea
-    if (chatInput.value.trim() !== "") {
-      chatInput.value += "\n\n"; // Add two line breaks before the new comment
-    }
-    chatInput.value += formattedComment;
-    chatInput.focus();
-
-    // Close only the comment box but keep the diff view open
-    this.closeDiffCommentBox();
-  }
-
-  /**
-   * Show diff for a specific commit
-   * @param commitHash The commit hash to show diff for
-   * @param toggleViewModeCallback Callback to toggle view mode to diff
-   */
-  public showCommitDiff(commitHash: string, toggleViewModeCallback: (mode: string) => void): void {
-    // Store the commit hash
-    this.currentCommitHash = commitHash;
-    
-    // Switch to diff2 view (side-by-side)
-    toggleViewModeCallback("diff2");
-  }
-
-  /**
-   * Clean up resources when component is destroyed
-   */
-  public dispose(): void {
-    // Clean up any resources or event listeners here
-    // Currently there are no specific resources to clean up
-  }
-}
diff --git a/loop/webui/src/timeline/icons/index.ts b/loop/webui/src/timeline/icons/index.ts
deleted file mode 100644
index d9480c5..0000000
--- a/loop/webui/src/timeline/icons/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Get the icon text to display for a message type
- * @param type - The message type
- * @returns The single character to represent this message type
- */
-export function getIconText(type: string | null | undefined): string {
-  switch (type) {
-    case "user":
-      return "U";
-    case "agent":
-      return "A";
-    case "tool":
-      return "T";
-    case "error":
-      return "E";
-    default:
-      return "?";
-  }
-}
diff --git a/loop/webui/src/timeline/index.ts b/loop/webui/src/timeline/index.ts
deleted file mode 100644
index a3d24b7..0000000
--- a/loop/webui/src/timeline/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// Export types
-export * from './types';
-
-// Export utility functions
-export * from './utils';
-
-// Export terminal handler
-export * from './terminal';
-
-// Export diff viewer
-export * from './diffviewer';
-
-// Export chart manager
-export * from './charts';
-
-// Export tool call utilities
-export * from './toolcalls';
-
-// Export copy button utilities
-export * from './copybutton';
-
-// Re-export the timeline manager (will be implemented later)
-// For now, we'll maintain backward compatibility by importing from the original file
-import '../timeline';
diff --git a/loop/webui/src/timeline/markdown/renderer.ts b/loop/webui/src/timeline/markdown/renderer.ts
deleted file mode 100644
index 8199b69..0000000
--- a/loop/webui/src/timeline/markdown/renderer.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { marked } from "marked";
-
-/**
- * Renders markdown content as HTML with proper security handling.
- *
- * @param markdownContent - The markdown string to render
- * @returns The rendered HTML content as a string
- */
-export async function renderMarkdown(markdownContent: string): Promise<string> {
-  try {
-    // Set markdown options for proper code block highlighting and safety
-    const markedOptions = {
-      gfm: true, // GitHub Flavored Markdown
-      breaks: true, // Convert newlines to <br>
-      headerIds: false, // Disable header IDs for safety
-      mangle: false, // Don't mangle email addresses
-      // DOMPurify is recommended for production, but not included in this implementation
-    };
-
-    return await marked.parse(markdownContent, markedOptions);
-  } catch (error) {
-    console.error("Error rendering markdown:", error);
-    // Fallback to plain text if markdown parsing fails
-    return markdownContent;
-  }
-}
-
-/**
- * Process rendered markdown HTML element, adding security attributes to links.
- *
- * @param element - The HTML element containing rendered markdown
- */
-export function processRenderedMarkdown(element: HTMLElement): void {
-  // Make sure links open in a new tab and have proper security attributes
-  const links = element.querySelectorAll("a");
-  links.forEach((link) => {
-    link.setAttribute("target", "_blank");
-    link.setAttribute("rel", "noopener noreferrer");
-  });
-}
diff --git a/loop/webui/src/timeline/renderer.ts b/loop/webui/src/timeline/renderer.ts
deleted file mode 100644
index f2770ee..0000000
--- a/loop/webui/src/timeline/renderer.ts
+++ /dev/null
@@ -1,729 +0,0 @@
-/**
- * MessageRenderer - Class to handle rendering of timeline messages
- */
-
-import { TimelineMessage, ToolCall } from "./types";
-import { escapeHTML, formatNumber, generateColorFromId } from "./utils";
-import { renderMarkdown, processRenderedMarkdown } from "./markdown/renderer";
-import { createToolCallCard, updateToolCallCard } from "./toolcalls";
-import { createCommitsContainer } from "./commits";
-import { createCopyButton } from "./copybutton";
-import { getIconText } from "./icons";
-import { addCollapsibleFunctionality } from "./components/collapsible";
-import { checkShouldScroll, scrollToBottom } from "./scroll";
-
-export class MessageRenderer {
-  // Map to store references to agent message DOM elements by tool call ID
-  private toolCallIdToMessageElement: Map<
-    string,
-    {
-      messageEl: HTMLElement;
-      toolCallContainer: HTMLElement | null;
-      toolCardId: string;
-    }
-  > = new Map();
-
-  // State tracking variables
-  private isFirstLoad: boolean = true;
-  private shouldScrollToBottom: boolean = true;
-  private currentFetchStartIndex: number = 0;
-
-  constructor() {}
-
-  /**
-   * Initialize the renderer with state from the timeline manager
-   */
-  public initialize(isFirstLoad: boolean, currentFetchStartIndex: number) {
-    this.isFirstLoad = isFirstLoad;
-    this.currentFetchStartIndex = currentFetchStartIndex;
-  }
-
-  /**
-   * Renders the timeline with messages
-   * @param messages The messages to render
-   * @param clearExisting Whether to clear existing content before rendering
-   */
-  public renderTimeline(
-    messages: TimelineMessage[],
-    clearExisting: boolean = false,
-  ): void {
-    const timeline = document.getElementById("timeline");
-    if (!timeline) return;
-
-    // We'll keep the isFirstLoad value for this render cycle,
-    // but will set it to false afterwards in scrollToBottom
-
-    if (clearExisting) {
-      timeline.innerHTML = ""; // Clear existing content only if this is the first load
-      // Clear our map of tool call references
-      this.toolCallIdToMessageElement.clear();
-    }
-
-    if (!messages || messages.length === 0) {
-      if (clearExisting) {
-        timeline.innerHTML = "<p>No messages available.</p>";
-        timeline.classList.add("empty");
-      }
-      return;
-    }
-
-    // Remove empty class when there are messages
-    timeline.classList.remove("empty");
-
-    // Keep track of conversation groups to properly indent
-    interface ConversationGroup {
-      color: string;
-      level: number;
-    }
-
-    const conversationGroups: Record<string, ConversationGroup> = {};
-
-    // Use the currentFetchStartIndex as the base index for these messages
-    const startIndex = this.currentFetchStartIndex;
-    // Group tool messages with their parent agent messages
-    const organizedMessages: (TimelineMessage & {
-      toolResponses?: TimelineMessage[];
-    })[] = [];
-    const toolMessagesByCallId: Record<string, TimelineMessage> = {};
-
-    // First, process tool messages - check if any can update existing UI elements
-    const processedToolMessages = new Set<string>();
-
-    messages.forEach((message) => {
-      // If this is a tool message with a tool_call_id
-      if (message.type === "tool" && message.tool_call_id) {
-        // Try to find an existing agent message that's waiting for this tool response
-        const toolCallRef = this.toolCallIdToMessageElement.get(
-          message.tool_call_id,
-        );
-
-        if (toolCallRef) {
-          // Found an existing agent message that needs updating
-          this.updateToolCallInAgentMessage(message, toolCallRef);
-          processedToolMessages.add(message.tool_call_id);
-        } else {
-          // No existing agent message found, we'll include this in normal rendering
-          toolMessagesByCallId[message.tool_call_id] = message;
-        }
-      }
-    });
-
-    // Then, process messages and organize them
-    messages.forEach((message, localIndex) => {
-      const _index = startIndex + localIndex;
-      if (!message) return; // Skip if message is null/undefined
-
-      // If it's a tool message and we're going to inline it with its parent agent message,
-      // we'll skip rendering it here - it will be included with the agent message
-      if (message.type === "tool" && message.tool_call_id) {
-        // Skip if we've already processed this tool message (updated an existing agent message)
-        if (processedToolMessages.has(message.tool_call_id)) {
-          return;
-        }
-
-        // Skip if this tool message will be included with a new agent message
-        if (toolMessagesByCallId[message.tool_call_id]) {
-          return;
-        }
-      }
-
-      // For agent messages with tool calls, attach their tool responses
-      if (
-        message.type === "agent" &&
-        message.tool_calls &&
-        message.tool_calls.length > 0
-      ) {
-        const toolResponses: TimelineMessage[] = [];
-
-        // Look up tool responses for each tool call
-        message.tool_calls.forEach((toolCall) => {
-          if (
-            toolCall.tool_call_id &&
-            toolMessagesByCallId[toolCall.tool_call_id]
-          ) {
-            toolResponses.push(toolMessagesByCallId[toolCall.tool_call_id]);
-          }
-        });
-
-        if (toolResponses.length > 0) {
-          message = { ...message, toolResponses };
-        }
-      }
-
-      organizedMessages.push(message);
-    });
-
-    let lastMessage:TimelineMessage|undefined;
-    if (messages && messages.length > 0 && startIndex > 0) {
-      lastMessage = messages[startIndex-1];
-    }
-
-    // Loop through organized messages and create timeline items
-    organizedMessages.forEach((message, localIndex) => {
-      const _index = startIndex + localIndex;
-      if (!message) return; // Skip if message is null/undefined
-
-      if (localIndex > 0) {
-        lastMessage = organizedMessages.at(localIndex-1);
-      }
-      // Determine if this is a subconversation
-      const hasParent = !!message.parent_conversation_id;
-      const conversationId = message.conversation_id || "";
-      const _parentId = message.parent_conversation_id || "";
-
-      // Track the conversation group
-      if (conversationId && !conversationGroups[conversationId]) {
-        conversationGroups[conversationId] = {
-          color: generateColorFromId(conversationId),
-          level: hasParent ? 1 : 0, // Level 0 for main conversation, 1+ for nested
-        };
-      }
-
-      // Get the level and color for this message
-      const group = conversationGroups[conversationId] || {
-        level: 0,
-        color: "#888888",
-      };
-
-      const messageEl = document.createElement("div");
-      messageEl.className = `message ${message.type || "unknown"} ${message.end_of_turn ? "end-of-turn" : ""}`;
-
-      // Add indentation class for subconversations
-      if (hasParent) {
-        messageEl.classList.add("subconversation");
-        messageEl.style.marginLeft = `${group.level * 40}px`;
-
-        // Add a colored left border to indicate the subconversation
-        messageEl.style.borderLeft = `4px solid ${group.color}`;
-      }
-
-      // newMsgType indicates when to create a new icon and message
-      // type header. This is a primitive form of message coalescing,
-      // but it does reduce the amount of redundant information in
-      // the UI.
-      const newMsgType = !lastMessage || 
-        (message.type == 'user' && lastMessage.type != 'user') ||
-        (message.type != 'user' && lastMessage.type == 'user');
-
-      if (newMsgType) {
-        // Create message icon
-        const iconEl = document.createElement("div");
-        iconEl.className = "message-icon";
-        iconEl.textContent = getIconText(message.type);
-        messageEl.appendChild(iconEl);
-      }
-
-      // Create message content container
-      const contentEl = document.createElement("div");
-      contentEl.className = "message-content";
-
-      // Create message header
-      const headerEl = document.createElement("div");
-      headerEl.className = "message-header";
-
-      if (newMsgType) {
-        const typeEl = document.createElement("span");
-        typeEl.className = "message-type";
-        typeEl.textContent = this.getTypeName(message.type);
-        headerEl.appendChild(typeEl);
-      }
-
-      // Add timestamp and usage info combined for agent messages at the top
-      if (message.timestamp) {
-        const timestampEl = document.createElement("span");
-        timestampEl.className = "message-timestamp";
-        timestampEl.textContent = this.formatTimestamp(message.timestamp);
-
-        // Add elapsed time if available
-        if (message.elapsed) {
-          timestampEl.textContent += ` (${(message.elapsed / 1e9).toFixed(2)}s)`;
-        }
-
-        // Add turn duration for end-of-turn messages
-        if (message.turnDuration && message.end_of_turn) {
-          timestampEl.textContent += ` [Turn: ${(message.turnDuration / 1e9).toFixed(2)}s]`;
-        }
-
-        // Add usage info inline for agent messages
-        if (
-          message.type === "agent" &&
-          message.usage &&
-          (message.usage.input_tokens > 0 ||
-            message.usage.output_tokens > 0 ||
-            message.usage.cost_usd > 0)
-        ) {
-          try {
-            // Safe get all values
-            const inputTokens = formatNumber(
-              message.usage.input_tokens ?? 0,
-            );
-            const cacheInput = message.usage.cache_read_input_tokens ?? 0;
-            const outputTokens = formatNumber(
-              message.usage.output_tokens ?? 0,
-            );
-            const messageCost = this.formatCurrency(
-              message.usage.cost_usd ?? 0,
-              "$0.0000", // Default format for message costs
-              true, // Use 4 decimal places for message-level costs
-            );
-
-            timestampEl.textContent += ` | In: ${inputTokens}`;
-            if (cacheInput > 0) {
-              timestampEl.textContent += ` [Cache: ${formatNumber(cacheInput)}]`;
-            }
-            timestampEl.textContent += ` Out: ${outputTokens} (${messageCost})`;
-          } catch (e) {
-            console.error("Error adding usage info to timestamp:", e);
-          }
-        }
-
-        headerEl.appendChild(timestampEl);
-      }
-
-      contentEl.appendChild(headerEl);
-
-      // Add message content
-      if (message.content) {
-        const containerEl = document.createElement("div");
-        containerEl.className = "message-text-container";
-
-        const textEl = document.createElement("div");
-        textEl.className = "message-text markdown-content";
-        
-        // Render markdown content
-        // Handle the Promise returned by renderMarkdown
-        renderMarkdown(message.content).then(html => {
-          textEl.innerHTML = html;
-          processRenderedMarkdown(textEl);
-        });
-
-        // Add copy button
-        const { container: copyButtonContainer, button: copyButton } = createCopyButton(message.content);
-        containerEl.appendChild(copyButtonContainer);
-        containerEl.appendChild(textEl);
-
-        // Add collapse/expand for long content
-        addCollapsibleFunctionality(message, textEl, containerEl, contentEl);
-      }
-
-      // If the message has tool calls, show them in an ultra-compact row of boxes
-      if (message.tool_calls && message.tool_calls.length > 0) {
-        const toolCallsContainer = document.createElement("div");
-        toolCallsContainer.className = "tool-calls-container";
-
-        // Create a header row with tool count
-        const toolCallsHeaderRow = document.createElement("div");
-        toolCallsHeaderRow.className = "tool-calls-header";
-        // No header text - empty header
-        toolCallsContainer.appendChild(toolCallsHeaderRow);
-
-        // Create a container for the tool call cards
-        const toolCallsCardContainer = document.createElement("div");
-        toolCallsCardContainer.className = "tool-call-cards-container";
-
-        // Add each tool call as a card with response or spinner
-        message.tool_calls.forEach((toolCall: ToolCall, _index: number) => {
-          // Create a unique ID for this tool card
-          const toolCardId = `tool-card-${toolCall.tool_call_id || Math.random().toString(36).substring(2, 11)}`;
-          
-          // Find the matching tool response if it exists
-          const toolResponse = message.toolResponses?.find(
-            (resp) => resp.tool_call_id === toolCall.tool_call_id,
-          );
-          
-          // Use the extracted utility function to create the tool card
-          const toolCard = createToolCallCard(toolCall, toolResponse, toolCardId);
-
-          // Store reference to this element if it has a tool_call_id
-          if (toolCall.tool_call_id) {
-            this.toolCallIdToMessageElement.set(toolCall.tool_call_id, {
-              messageEl,
-              toolCallContainer: toolCallsCardContainer,
-              toolCardId,
-            });
-          }
-
-          // Add the card to the container
-          toolCallsCardContainer.appendChild(toolCard);
-        });
-
-        toolCallsContainer.appendChild(toolCallsCardContainer);
-        contentEl.appendChild(toolCallsContainer);
-      }
-      // If message is a commit message, display commits
-      if (
-        message.type === "commit" &&
-        message.commits &&
-        message.commits.length > 0
-      ) {
-        // Use the extracted utility function to create the commits container
-        const commitsContainer = createCommitsContainer(
-          message.commits,
-          (commitHash) => {
-            // This will need to be handled by the TimelineManager
-            const event = new CustomEvent('showCommitDiff', {
-              detail: { commitHash }
-            });
-            document.dispatchEvent(event);
-          }
-        );
-        contentEl.appendChild(commitsContainer);
-      }
-
-      // Tool messages are now handled inline with agent messages
-      // If we still see a tool message here, it means it's not associated with an agent message
-      // (this could be legacy data or a special case)
-      if (message.type === "tool") {
-        const toolDetailsEl = document.createElement("div");
-        toolDetailsEl.className = "tool-details standalone";
-
-        // Get tool input and result for display
-        let inputText = "";
-        try {
-          if (message.input) {
-            const parsedInput = JSON.parse(message.input);
-            // Format input compactly for simple inputs
-            inputText = JSON.stringify(parsedInput);
-          }
-        } catch (e) {
-          // Not valid JSON, use as-is
-          inputText = message.input || "";
-        }
-
-        const resultText = message.tool_result || "";
-        const statusEmoji = message.tool_error ? "❌" : "✅";
-        const toolName = message.tool_name || "Unknown";
-
-        // Determine if we can use super compact display (e.g., for bash command results)
-        // Use compact display for short inputs/outputs without newlines
-        const isSimpleCommand =
-          toolName === "bash" &&
-          inputText.length < 50 &&
-          resultText.length < 200 &&
-          !resultText.includes("\n");
-        const isCompact =
-          inputText.length < 50 &&
-          resultText.length < 100 &&
-          !resultText.includes("\n");
-
-        if (isSimpleCommand) {
-          // SUPER COMPACT VIEW FOR BASH: Display everything on a single line
-          const toolLineEl = document.createElement("div");
-          toolLineEl.className = "tool-compact-line";
-
-          // Create the compact bash display in format: "✅ bash({command}) → result"
-          try {
-            const parsed = JSON.parse(inputText);
-            const cmd = parsed.command || "";
-            toolLineEl.innerHTML = `${statusEmoji} <strong>${toolName}</strong>({"command":"${cmd}"}) → <span class="tool-result-inline">${resultText}</span>`;
-          } catch {
-            toolLineEl.innerHTML = `${statusEmoji} <strong>${toolName}</strong>(${inputText}) → <span class="tool-result-inline">${resultText}</span>`;
-          }
-
-          // Add copy button for result
-          const copyBtn = document.createElement("button");
-          copyBtn.className = "copy-inline-button";
-          copyBtn.textContent = "Copy";
-          copyBtn.title = "Copy result to clipboard";
-
-          copyBtn.addEventListener("click", (e) => {
-            e.stopPropagation();
-            navigator.clipboard
-              .writeText(resultText)
-              .then(() => {
-                copyBtn.textContent = "Copied!";
-                setTimeout(() => {
-                  copyBtn.textContent = "Copy";
-                }, 2000);
-              })
-              .catch((_err) => {
-                copyBtn.textContent = "Failed";
-                setTimeout(() => {
-                  copyBtn.textContent = "Copy";
-                }, 2000);
-              });
-          });
-
-          toolLineEl.appendChild(copyBtn);
-          toolDetailsEl.appendChild(toolLineEl);
-        } else if (isCompact && !isSimpleCommand) {
-          // COMPACT VIEW: Display everything on one or two lines for other tool types
-          const toolLineEl = document.createElement("div");
-          toolLineEl.className = "tool-compact-line";
-
-          // Create the compact display in format: "✅ tool_name(input) → result"
-          let compactDisplay = `${statusEmoji} <strong>${toolName}</strong>(${inputText})`;
-
-          if (resultText) {
-            compactDisplay += ` → <span class="tool-result-inline">${resultText}</span>`;
-          }
-
-          toolLineEl.innerHTML = compactDisplay;
-
-          // Add copy button for result
-          const copyBtn = document.createElement("button");
-          copyBtn.className = "copy-inline-button";
-          copyBtn.textContent = "Copy";
-          copyBtn.title = "Copy result to clipboard";
-
-          copyBtn.addEventListener("click", (e) => {
-            e.stopPropagation();
-            navigator.clipboard
-              .writeText(resultText)
-              .then(() => {
-                copyBtn.textContent = "Copied!";
-                setTimeout(() => {
-                  copyBtn.textContent = "Copy";
-                }, 2000);
-              })
-              .catch((_err) => {
-                copyBtn.textContent = "Failed";
-                setTimeout(() => {
-                  copyBtn.textContent = "Copy";
-                }, 2000);
-              });
-          });
-
-          toolLineEl.appendChild(copyBtn);
-          toolDetailsEl.appendChild(toolLineEl);
-        } else {
-          // EXPANDED VIEW: For longer inputs/results that need more space
-          // Tool name header
-          const toolNameEl = document.createElement("div");
-          toolNameEl.className = "tool-name";
-          toolNameEl.innerHTML = `${statusEmoji} <strong>${toolName}</strong>`;
-          toolDetailsEl.appendChild(toolNameEl);
-
-          // Show input (simplified)
-          if (message.input) {
-            const inputContainer = document.createElement("div");
-            inputContainer.className = "tool-input-container compact";
-
-            const inputEl = document.createElement("pre");
-            inputEl.className = "tool-input compact";
-            inputEl.textContent = inputText;
-            inputContainer.appendChild(inputEl);
-            toolDetailsEl.appendChild(inputContainer);
-          }
-
-          // Show result (simplified)
-          if (resultText) {
-            const resultContainer = document.createElement("div");
-            resultContainer.className = "tool-result-container compact";
-
-            const resultEl = document.createElement("pre");
-            resultEl.className = "tool-result compact";
-            resultEl.textContent = resultText;
-            resultContainer.appendChild(resultEl);
-
-            // Add collapse/expand for longer results
-            if (resultText.length > 100) {
-              resultEl.classList.add("collapsed");
-
-              const toggleButton = document.createElement("button");
-              toggleButton.className = "collapsible";
-              toggleButton.textContent = "Show more...";
-              toggleButton.addEventListener("click", () => {
-                resultEl.classList.toggle("collapsed");
-                toggleButton.textContent = resultEl.classList.contains(
-                  "collapsed",
-                )
-                  ? "Show more..."
-                  : "Show less";
-              });
-
-              toolDetailsEl.appendChild(resultContainer);
-              toolDetailsEl.appendChild(toggleButton);
-            } else {
-              toolDetailsEl.appendChild(resultContainer);
-            }
-          }
-        }
-
-        contentEl.appendChild(toolDetailsEl);
-      }
-
-      // Add usage info if available with robust null handling - only for non-agent messages
-      if (
-        message.type !== "agent" && // Skip for agent messages as we've already added usage info at the top
-        message.usage &&
-        (message.usage.input_tokens > 0 ||
-          message.usage.output_tokens > 0 ||
-          message.usage.cost_usd > 0)
-      ) {
-        try {
-          const usageEl = document.createElement("div");
-          usageEl.className = "usage-info";
-
-          // Safe get all values
-          const inputTokens = formatNumber(
-            message.usage.input_tokens ?? 0,
-          );
-          const cacheInput = message.usage.cache_read_input_tokens ?? 0;
-          const outputTokens = formatNumber(
-            message.usage.output_tokens ?? 0,
-          );
-          const messageCost = this.formatCurrency(
-            message.usage.cost_usd ?? 0,
-            "$0.0000", // Default format for message costs
-            true, // Use 4 decimal places for message-level costs
-          );
-
-          // Create usage info display
-          usageEl.innerHTML = `
-            <span title="Input tokens">In: ${inputTokens}</span>
-            ${cacheInput > 0 ? `<span title="Cache tokens">[Cache: ${formatNumber(cacheInput)}]</span>` : ""}
-            <span title="Output tokens">Out: ${outputTokens}</span>
-            <span title="Message cost">(${messageCost})</span>
-          `;
-
-          contentEl.appendChild(usageEl);
-        } catch (e) {
-          console.error("Error rendering usage info:", e);
-        }
-      }
-
-      messageEl.appendChild(contentEl);
-      timeline.appendChild(messageEl);
-    });
-
-    // Scroll to bottom of the timeline if needed
-    this.scrollToBottom();
-  }
-
-  /**
-   * Check if we should scroll to the bottom
-   */
-  private checkShouldScroll(): boolean {
-    return checkShouldScroll(this.isFirstLoad);
-  }
-
-  /**
-   * Scroll to the bottom of the timeline
-   */
-  private scrollToBottom(): void {
-    scrollToBottom(this.shouldScrollToBottom);
-
-    // After first load, we'll only auto-scroll if user is already near the bottom
-    this.isFirstLoad = false;
-  }
-
-  /**
-   * Get readable name for message type
-   */
-  private getTypeName(type: string | null | undefined): string {
-    switch (type) {
-      case "user":
-        return "User";
-      case "agent":
-        return "Agent";
-      case "tool":
-        return "Tool Use";
-      case "error":
-        return "Error";
-      default:
-        return (
-          (type || "Unknown").charAt(0).toUpperCase() +
-          (type || "unknown").slice(1)
-        );
-    }
-  }
-
-  /**
-   * Format timestamp for display
-   */
-  private formatTimestamp(
-    timestamp: string | number | Date | null | undefined,
-    defaultValue: string = "",
-  ): string {
-    if (!timestamp) return defaultValue;
-    try {
-      const date = new Date(timestamp);
-      if (isNaN(date.getTime())) return defaultValue;
-
-      // Format: Mar 13, 2025 09:53:25 AM
-      return date.toLocaleString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: true,
-      });
-    } catch (e) {
-      return defaultValue;
-    }
-  }
-
-  /**
-   * Format currency values
-   */
-  private formatCurrency(
-    num: number | string | null | undefined,
-    defaultValue: string = "$0.00",
-    isMessageLevel: boolean = false,
-  ): string {
-    if (num === undefined || num === null) return defaultValue;
-    try {
-      // Use 4 decimal places for message-level costs, 2 for totals
-      const decimalPlaces = isMessageLevel ? 4 : 2;
-      return `$${parseFloat(String(num)).toFixed(decimalPlaces)}`;
-    } catch (e) {
-      return defaultValue;
-    }
-  }
-
-  /**
-   * Update a tool call in an agent message with the response
-   */
-  private updateToolCallInAgentMessage(
-    toolMessage: TimelineMessage,
-    toolCallRef: {
-      messageEl: HTMLElement;
-      toolCallContainer: HTMLElement | null;
-      toolCardId: string;
-    },
-  ): void {
-    const { messageEl, toolCardId } = toolCallRef;
-
-    // Find the tool card element
-    const toolCard = messageEl.querySelector(`#${toolCardId}`) as HTMLElement;
-    if (!toolCard) return;
-
-    // Use the extracted utility function to update the tool card
-    updateToolCallCard(toolCard, toolMessage);
-  }
-
-  /**
-   * Get the tool call id to message element map
-   * Used by the TimelineManager to access the map
-   */
-  public getToolCallIdToMessageElement(): Map<
-    string,
-    {
-      messageEl: HTMLElement;
-      toolCallContainer: HTMLElement | null;
-      toolCardId: string;
-    }
-  > {
-    return this.toolCallIdToMessageElement;
-  }
-
-  /**
-   * Set the tool call id to message element map
-   * Used by the TimelineManager to update the map
-   */
-  public setToolCallIdToMessageElement(
-    map: Map<
-      string,
-      {
-        messageEl: HTMLElement;
-        toolCallContainer: HTMLElement | null;
-        toolCardId: string;
-      }
-    >
-  ): void {
-    this.toolCallIdToMessageElement = map;
-  }
-}
diff --git a/loop/webui/src/timeline/scroll.ts b/loop/webui/src/timeline/scroll.ts
deleted file mode 100644
index df3b8f9..0000000
--- a/loop/webui/src/timeline/scroll.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Check if the page should scroll to the bottom based on current view position
- * @param isFirstLoad If this is the first load of the timeline
- * @returns Boolean indicating if we should scroll to the bottom
- */
-export function checkShouldScroll(isFirstLoad: boolean): boolean {
-  // Always scroll on first load
-  if (isFirstLoad) {
-    return true;
-  }
-
-  // Check if user is already near the bottom of the page
-  // Account for the fixed top bar and chat bar
-  return (
-    window.innerHeight + window.scrollY >= document.body.offsetHeight - 200
-  );
-}
-
-/**
- * Scroll to the bottom of the timeline if shouldScrollToBottom is true
- * @param shouldScrollToBottom Flag indicating if we should scroll
- */
-export function scrollToBottom(shouldScrollToBottom: boolean): void {
-  // Find the timeline container
-  const timeline = document.getElementById("timeline");
-
-  // Scroll the window to the bottom based on our pre-determined value
-  if (timeline && shouldScrollToBottom) {
-    // Get the last message or element in the timeline
-    const lastElement = timeline.lastElementChild;
-
-    if (lastElement) {
-      // Scroll to the bottom of the page
-      window.scrollTo({
-        top: document.body.scrollHeight,
-        behavior: "smooth",
-      });
-    }
-  }
-}
diff --git a/loop/webui/src/timeline/toolcalls.ts b/loop/webui/src/timeline/toolcalls.ts
deleted file mode 100644
index 5df88bd..0000000
--- a/loop/webui/src/timeline/toolcalls.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-/**
- * Utility functions for rendering tool calls in the timeline
- */
-
-import { ToolCall, TimelineMessage } from "./types";
-import { html, render } from "lit-html";
-
-/**
- * Create a tool call card element for display in the timeline
- * @param toolCall The tool call data to render
- * @param toolResponse Optional tool response message if available
- * @param toolCardId Unique ID for this tool card
- * @returns The created tool card element
- */
-export function createToolCallCard(
-  toolCall: ToolCall,
-  toolResponse?: TimelineMessage | null,
-  toolCardId?: string
-): HTMLElement {
-  // Create a unique ID for this tool card if not provided
-  const cardId =
-    toolCardId ||
-    `tool-card-${
-      toolCall.tool_call_id || Math.random().toString(36).substring(2, 11)
-    }`;
-
-  // Get input as compact string
-  let inputText = "";
-  try {
-    if (toolCall.input) {
-      const parsedInput = JSON.parse(toolCall.input);
-
-      // For bash commands, use a special format
-      if (toolCall.name === "bash" && parsedInput.command) {
-        inputText = parsedInput.command;
-      } else {
-        // For other tools, use the stringified JSON
-        inputText = JSON.stringify(parsedInput);
-      }
-    }
-  } catch (e) {
-    // Not valid JSON, use as-is
-    inputText = toolCall.input || "";
-  }
-
-  // Truncate input text for display
-  const displayInput =
-    inputText.length > 80 ? inputText.substring(0, 78) + "..." : inputText;
-
-  // Truncate for compact display
-  const shortInput =
-    displayInput.length > 30
-      ? displayInput.substring(0, 28) + "..."
-      : displayInput;
-
-  // Format input for expanded view
-  let formattedInput = displayInput;
-  try {
-    const parsedInput = JSON.parse(toolCall.input || "");
-    formattedInput = JSON.stringify(parsedInput, null, 2);
-  } catch (e) {
-    // Not valid JSON, use display input as-is
-  }
-
-  // Truncate result for compact display if available
-  let shortResult = "";
-  if (toolResponse && toolResponse.tool_result) {
-    shortResult =
-      toolResponse.tool_result.length > 40
-        ? toolResponse.tool_result.substring(0, 38) + "..."
-        : toolResponse.tool_result;
-  }
-
-  // State for collapsed/expanded view
-  let isCollapsed = true;
-
-  // Handler to copy text to clipboard
-  const copyToClipboard = (text: string, button: HTMLElement) => {
-    navigator.clipboard
-      .writeText(text)
-      .then(() => {
-        button.textContent = "Copied!";
-        setTimeout(() => {
-          button.textContent = "Copy";
-        }, 2000);
-      })
-      .catch((err) => {
-        console.error("Failed to copy text:", err);
-        button.textContent = "Failed";
-        setTimeout(() => {
-          button.textContent = "Copy";
-        }, 2000);
-      });
-  };
-
-  const cancelToolCall = async(tool_call_id: string, button: HTMLButtonElement) => {
-    console.log('cancelToolCall', tool_call_id, button);
-    button.innerText = 'Cancelling';
-    button.disabled = true;
-    try {
-      const response = await fetch("cancel", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({tool_call_id: tool_call_id, reason: "user requested cancellation" }),
-      });
-      console.log('cancel', tool_call_id, response);
-      button.parentElement.removeChild(button);
-    } catch (e) {
-      console.error('cancel', tool_call_id,e);
-    }
-  };
-
-  // Create the container element
-  const container = document.createElement("div");
-  container.id = cardId;
-  container.className = "tool-call-card collapsed";
-
-  // Function to render the component
-  const renderComponent = () => {
-    const template = html`
-      <div
-        class="tool-call-compact-view"
-        @click=${() => {
-          isCollapsed = !isCollapsed;
-          container.classList.toggle("collapsed");
-          renderComponent();
-        }}
-      >
-        <span class="tool-call-status ${toolResponse ? "" : "spinner"}">
-          ${toolResponse ? (toolResponse.tool_error ? "❌" : "✅") : "⏳"}
-        </span>
-        <span class="tool-call-name">${toolCall.name}</span>
-        <code class="tool-call-input-preview">${shortInput}</code>
-        ${toolResponse && toolResponse.tool_result
-          ? html`<code class="tool-call-result-preview">${shortResult}</code>`
-          : ""}
-        ${toolResponse && toolResponse.elapsed !== undefined
-          ? html`<span class="tool-call-time"
-              >${(toolResponse.elapsed / 1e9).toFixed(2)}s</span
-            >`
-          : ""}
-          ${toolResponse ? "" : 
-            html`<button class="refresh-button stop-button" title="Cancel this operation" @click=${(e: Event) => {
-                e.stopPropagation(); // Don't toggle expansion when clicking cancel
-                const button = e.target as HTMLButtonElement;
-                cancelToolCall(toolCall.tool_call_id, button);
-              }}>Cancel</button>`}
-        <span class="tool-call-expand-icon">${isCollapsed ? "▼" : "▲"}</span>
-      </div>
-
-      <div class="tool-call-expanded-view">
-        <div class="tool-call-section">
-          <div class="tool-call-section-label">
-            Input:
-            <button
-              class="tool-call-copy-btn"
-              title="Copy input to clipboard"
-              @click=${(e: Event) => {
-                e.stopPropagation(); // Don't toggle expansion when clicking copy
-                const button = e.target as HTMLElement;
-                copyToClipboard(toolCall.input || displayInput, button);
-              }}
-            >
-              Copy
-            </button>
-          </div>
-          <div class="tool-call-section-content">
-            <pre class="tool-call-input">${formattedInput}</pre>
-          </div>
-        </div>
-
-        ${toolResponse && toolResponse.tool_result
-          ? html`
-              <div class="tool-call-section">
-                <div class="tool-call-section-label">
-                  Result:
-                  <button
-                    class="tool-call-copy-btn"
-                    title="Copy result to clipboard"
-                    @click=${(e: Event) => {
-                      e.stopPropagation(); // Don't toggle expansion when clicking copy
-                      const button = e.target as HTMLElement;
-                      copyToClipboard(toolResponse.tool_result || "", button);
-                    }}
-                  >
-                    Copy
-                  </button>
-                </div>
-                <div class="tool-call-section-content">
-                  <div class="tool-call-result">
-                    ${toolResponse.tool_result.includes("\n")
-                      ? html`<pre><code>${toolResponse.tool_result}</code></pre>`
-                      : toolResponse.tool_result}
-                  </div>
-                </div>
-              </div>
-            `
-          : ""}
-      </div>
-    `;
-
-    render(template, container);
-  };
-
-  // Initial render
-  renderComponent();
-
-  return container;
-}
-
-/**
- * Update a tool call card with response data
- * @param toolCard The tool card element to update
- * @param toolMessage The tool response message
- */
-export function updateToolCallCard(
-  toolCard: HTMLElement,
-  toolMessage: TimelineMessage
-): void {
-  if (!toolCard) return;
-
-  // Find the original tool call data to reconstruct the card
-  const toolName = toolCard.querySelector(".tool-call-name")?.textContent || "";
-  const inputPreview =
-    toolCard.querySelector(".tool-call-input-preview")?.textContent || "";
-
-  // Extract the original input from the expanded view
-  let originalInput = "";
-  const inputEl = toolCard.querySelector(".tool-call-input");
-  if (inputEl) {
-    originalInput = inputEl.textContent || "";
-  }
-
-  // Create a minimal ToolCall object from the existing data
-  const toolCall: Partial<ToolCall> = {
-    name: toolName,
-    // Try to reconstruct the original input if possible
-    input: originalInput,
-  };
-
-  // Replace the existing card with a new one
-  const newCard = createToolCallCard(
-    toolCall as ToolCall,
-    toolMessage,
-    toolCard.id
-  );
-
-  // Preserve the collapse state
-  if (!toolCard.classList.contains("collapsed")) {
-    newCard.classList.remove("collapsed");
-  }
-
-  // Replace the old card with the new one
-  if (toolCard.parentNode) {
-    toolCard.parentNode.replaceChild(newCard, toolCard);
-  }
-}
diff --git a/loop/webui/src/timeline/types.ts b/loop/webui/src/timeline/types.ts
deleted file mode 100644
index 81d47d0..0000000
--- a/loop/webui/src/timeline/types.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Interface for a Git commit
- */
-export interface GitCommit {
-  hash: string; // Full commit hash
-  subject: string; // Commit subject line
-  body: string; // Full commit message body
-  pushed_branch?: string; // If set, this commit was pushed to this branch
-}
-
-/**
- * Interface for a tool call
- */
-export interface ToolCall {
-  name: string;
-  args?: string;
-  result?: string;
-  input?: string; // Input property for TypeScript compatibility
-  tool_call_id?: string;
-}
-
-/**
- * Interface for a timeline message
- */
-export interface TimelineMessage {
-  type: string;
-  content?: string;
-  timestamp?: string | number | Date;
-  elapsed?: number;
-  turnDuration?: number; // Turn duration field
-  end_of_turn?: boolean;
-  conversation_id?: string;
-  parent_conversation_id?: string;
-  tool_calls?: ToolCall[];
-  tool_name?: string;
-  tool_error?: boolean;
-  tool_call_id?: string;
-  commits?: GitCommit[]; // For commit messages
-  input?: string; // Input property
-  tool_result?: string; // Tool result property
-  toolResponses?: any[]; // Tool responses array
-  usage?: {
-    input_tokens?: number;
-    output_tokens?: number;
-    cache_read_input_tokens?: number;
-    cache_creation_input_tokens?: number;
-    cost_usd?: number;
-  };
-}
diff --git a/loop/webui/src/types.ts b/loop/webui/src/types.ts
new file mode 100644
index 0000000..f91c9af
--- /dev/null
+++ b/loop/webui/src/types.ts
@@ -0,0 +1,71 @@
+// TODO: generate these interface type declarations from the go structs instead of doing it by hand.
+// See https://github.com/boldsoftware/bold/blob/c6670a0a13f9d25785c8c1a90587fbab20a58bdd/sketch/types/ts.go for an example.
+
+/**
+ * Interface for a Git commit
+ */
+export interface GitCommit {
+  hash: string; // Full commit hash
+  subject: string; // Commit subject line
+  body: string; // Full commit message body
+  pushed_branch?: string; // If set, this commit was pushed to this branch
+}
+
+/**
+ * Interface for a tool call
+ */
+export interface ToolCall {
+  name: string;
+  args?: string;
+  result?: string;
+  input?: string; // Input property for TypeScript compatibility
+  tool_call_id?: string;
+  result_message?: TimelineMessage;
+}
+
+/**
+ * Interface for a timeline message
+ */
+export interface TimelineMessage {
+  idx: number;
+  type: string;
+  content?: string;
+  timestamp?: string | number | Date;
+  elapsed?: number;
+  turnDuration?: number; // Turn duration field
+  end_of_turn?: boolean;
+  conversation_id?: string;
+  parent_conversation_id?: string;
+  start_time?: string;
+  end_time?: string;
+  tool_calls?: ToolCall[];
+  tool_name?: string;
+  tool_error?: boolean;
+  tool_call_id?: string;
+  commits?: GitCommit[]; // For commit messages
+  input?: string; // Input property
+  tool_result?: string; // Tool result property
+  toolResponses?: any[]; // Tool responses array
+  usage?: Usage;
+}
+
+export interface Usage {
+  start_time?: string;
+  messages?: number;
+  input_tokens?: number;
+  output_tokens?: number;
+  cache_read_input_tokens?: number;
+  cache_creation_input_tokens?: number;
+  cost_usd?: number;
+  total_cost_usd?: number;
+  tool_uses?: Map<string, any>;
+}
+export interface State {
+  hostname?: string;
+  initial_commit?: string;
+  message_count?: number;
+  os: string;
+  title: string;
+  total_usage: Usage; // TODO Make a TotalUseage interface.
+  working_dir?: string;
+}
diff --git a/loop/webui/src/timeline/utils.ts b/loop/webui/src/utils.ts
similarity index 100%
rename from loop/webui/src/timeline/utils.ts
rename to loop/webui/src/utils.ts
diff --git a/loop/webui/src/web-components/demo/demo.css b/loop/webui/src/web-components/demo/demo.css
new file mode 100644
index 0000000..bb9750e
--- /dev/null
+++ b/loop/webui/src/web-components/demo/demo.css
@@ -0,0 +1,9 @@
+body {
+  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/index.html b/loop/webui/src/web-components/demo/index.html
new file mode 100644
index 0000000..3f728c0
--- /dev/null
+++ b/loop/webui/src/web-components/demo/index.html
@@ -0,0 +1,28 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="demo.css" />
+  </head>
+  <body>
+    sketch web-components demo index
+    <ul>
+      <li><a href="sketch-app-shell.demo.html">sketch-app-shell</a></li>
+      <li><a href="sketch-charts.demo.html">sketch-charts</a></li>
+      <li><a href="sketch-chat-input.demo.html">sketch-chat-input</a></li>
+      <li><a href="sketch-diff-view.demo.html">sketch-diff-view</a></li>
+      <li>
+        <a href="sketch-container-status.demo.html">sketch-container-status</a>
+      </li>
+      <li>
+        <a href="sketch-network-status.demo.html">sketch-network-status</a>
+      </li>
+      <li>
+        <a href="sketch-timeline-message.demo.html">sketch-timeline-message</a>
+      </li>
+      <li><a href="sketch-timeline.demo.html">sketch-timeline</a></li>
+      <li><a href="sketch-tool-calls.demo.html">sketch-tool-calls</a></li>
+      <li>
+        <a href="sketch-view-mode-select.demo.html">sketch-view-mode-select</a>
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/loop/webui/src/web-components/demo/readme.md b/loop/webui/src/web-components/demo/readme.md
new file mode 100644
index 0000000..8e3c33c
--- /dev/null
+++ b/loop/webui/src/web-components/demo/readme.md
@@ -0,0 +1,14 @@
+# Stand-alone demo pages for sketch web components
+
+These are handy for iterating on specific component UI issues in isolation from the rest of the sketch application, and without having to start a full backend to serve the full frontend app UI.
+
+# How to use this demo directory to iterate on component development
+
+From the `loop/webui` directory:
+
+1. In one shell, run `npm run watch` to build the web components and watch for changes
+1. In another shell, run `npm run demo` to start a local web server to serve the demo pages
+1. open http://localhost:8000/src/web-components/demo/ in your browser
+1. make edits to the .ts code or to the demo.html files and see how it affects the demo pages in real time
+
+Alternately, use the `webui: watch demo` task in VSCode, which runs all of the above for you.
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
new file mode 100644
index 0000000..092ad7c
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
@@ -0,0 +1,13 @@
+<html>
+  <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>
+  </head>
+  <body>
+    <h1>sketch-app-shell demo</h1>
+
+    <sketch-app-shell></sketch-app-shell>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/loop/webui/src/web-components/demo/sketch-charts.demo.html b/loop/webui/src/web-components/demo/sketch-charts.demo.html
new file mode 100644
index 0000000..b525785
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-charts.demo.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Sketch Charts Demo</title>
+    <script type="module" src="/dist/web-components/sketch-charts.js"></script>
+    <link rel="stylesheet" href="demo.css" />
+    <style>
+      sketch-charts {
+        margin: 20px;
+        max-width: 1000px;
+      }
+
+      body {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+          Roboto, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sketch Charts Demo</h1>
+    <sketch-charts id="charts"></sketch-charts>
+
+    <script>
+      // Sample data for testing
+      const sampleMessages = [
+        {
+          idx: 1,
+          type: "human",
+          content: "Hello, can you help me with a coding task?",
+          timestamp: new Date(Date.now() - 3600000).toISOString(),
+          usage: { cost_usd: 0.0001 },
+        },
+        {
+          idx: 2,
+          type: "assistant",
+          content:
+            "I'd be happy to help! What kind of coding task are you working on?",
+          timestamp: new Date(Date.now() - 3500000).toISOString(),
+          usage: { cost_usd: 0.0005 },
+        },
+        {
+          idx: 3,
+          type: "human",
+          content: "I need to create a web component using lit-element",
+          timestamp: new Date(Date.now() - 3400000).toISOString(),
+          usage: { cost_usd: 0.0001 },
+        },
+        {
+          idx: 4,
+          type: "assistant",
+          content:
+            "I can definitely help with that. Lit Element is a great library for building web components.",
+          timestamp: new Date(Date.now() - 3300000).toISOString(),
+          usage: { cost_usd: 0.0008 },
+        },
+        {
+          idx: 5,
+          type: "assistant",
+          tool_name: "bash",
+          input: "ls -la",
+          tool_result:
+            "total 16\ndrwxr-xr-x  4 user  staff  128 Jan 10 12:34 .\ndrwxr-xr-x 10 user  staff  320 Jan 10 12:34 ..\n-rw-r--r--  1 user  staff  123 Jan 10 12:34 file1.txt\n-rw-r--r--  1 user  staff  456 Jan 10 12:34 file2.txt",
+          start_time: new Date(Date.now() - 3200000).toISOString(),
+          end_time: new Date(Date.now() - 3190000).toISOString(),
+          timestamp: new Date(Date.now() - 3190000).toISOString(),
+          usage: { cost_usd: 0.0002 },
+        },
+        {
+          idx: 6,
+          type: "assistant",
+          content: "Let me create a basic web component for you.",
+          timestamp: new Date(Date.now() - 3100000).toISOString(),
+          usage: { cost_usd: 0.0015 },
+        },
+        {
+          idx: 7,
+          type: "human",
+          content: "Can you show me how to handle events in the web component?",
+          timestamp: new Date(Date.now() - 3000000).toISOString(),
+          usage: { cost_usd: 0.0001 },
+        },
+        {
+          idx: 8,
+          type: "assistant",
+          tool_name: "bash",
+          input: "cat example.ts",
+          tool_result:
+            "import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('my-element')\nexport class MyElement extends LitElement {\n  render() {\n    return html`<div>Hello World</div>`;\n  }\n}",
+          start_time: new Date(Date.now() - 2900000).toISOString(),
+          end_time: new Date(Date.now() - 2800000).toISOString(),
+          timestamp: new Date(Date.now() - 2800000).toISOString(),
+          usage: { cost_usd: 0.0003 },
+        },
+        {
+          idx: 9,
+          type: "assistant",
+          content:
+            "Here's how you can handle events in a web component using Lit.",
+          timestamp: new Date(Date.now() - 2700000).toISOString(),
+          usage: { cost_usd: 0.002 },
+        },
+        {
+          idx: 10,
+          type: "human",
+          content: "Thank you! How about adding properties and attributes?",
+          timestamp: new Date(Date.now() - 2600000).toISOString(),
+          usage: { cost_usd: 0.0001 },
+        },
+        {
+          idx: 11,
+          type: "assistant",
+          content:
+            "You can use the @property decorator to define properties in your Lit Element component.",
+          timestamp: new Date(Date.now() - 2500000).toISOString(),
+          usage: { cost_usd: 0.0025 },
+        },
+      ];
+
+      // Set sample data as soon as the component is defined
+      document.addEventListener("DOMContentLoaded", () => {
+        console.time("chart-demo-load");
+        const chartsComponent = document.getElementById("charts");
+        chartsComponent.messages = sampleMessages;
+        console.timeEnd("chart-demo-load");
+      });
+    </script>
+  </body>
+</html>
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
new file mode 100644
index 0000000..4806035
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
@@ -0,0 +1,32 @@
+<html>
+  <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>
+      document.addEventListener("DOMContentLoaded", () => {
+        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);
+          const msgDiv = document.querySelector("#chat-messages");
+          const newDiv = document.createElement("div");
+          newDiv.innerText = evt.detail.message; 
+          msgDiv.append(newDiv);
+          chatInput.content = '';
+        });
+      });
+    </script>
+
+  </head>
+  <body>
+    <h1>sketch-chat-input demo</h1>
+
+    <div id="chat-messages"></div>
+
+    <sketch-chat-input></sketch-chat-input>
+
+  </body>
+</html>
\ No newline at end of file
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
new file mode 100644
index 0000000..bd2544d
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -0,0 +1,40 @@
+<html>
+  <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>
+      document.addEventListener("DOMContentLoaded", () => {
+        const containerStatus = document.querySelector('#status-2');
+        containerStatus.state = {
+          hostname: 'example.hostname',
+          initial_commit: 'decafbad',
+          message_count: 27,
+          os: 'linux',
+          total_usage: {
+            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',
+        };
+      });
+    </script>
+
+  </head>
+  <body>
+    <h1>sketch-container-status demo</h1>
+
+    Empty:
+    <sketch-container-status id="status-1"></sketch-container-status>
+
+    With state fields set:
+    <sketch-container-status id="status-2"></sketch-container-status>
+
+  </body>
+</html>
\ No newline at end of file
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
new file mode 100644
index 0000000..63b5395
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -0,0 +1,104 @@
+<!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>
+
+<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
+@@ -1,5 +1,5 @@
+ This is a sample file
+-This line will be removed
++This line is added as a replacement
+ This line stays the same
+-Another line to remove
++A completely new line
+ The last line is unchanged`;
+       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
+index 3333333..4444444 100644
+--- 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}
+ This line exists in both versions
+-This line was removed in commit ${commit}
++This line replaced the removed line
++Another new line added in this commit
+ Last line of the file`;
+          }
+      diffViewer.diffText = diffContent;
+      diffViewer.commitHash = commitHashInput.value.trim();
+    });
+  });
+</script>
+
+</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
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
new file mode 100644
index 0000000..9926b0e
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -0,0 +1,17 @@
+<html>
+  <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>
+  </head>
+  <body>
+    <h1>sketch-network-status demo</h1>
+
+    Connected:
+    <sketch-network-status connection="connected" message="connected"></sketch-network-status>
+
+    Error:
+    <sketch-network-status connection="error" error="error"></sketch-network-status>
+
+  </body>
+</html>
\ No newline at end of file
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
new file mode 100644
index 0000000..466f910
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
@@ -0,0 +1,66 @@
+<html>
+  <head>
+    <title>sketch-timeline-message demo</title>
+    <link rel="stylesheet" href="demo.css" />
+    <script
+      src="/dist/web-components/sketch-timeline-message.js"
+      type="module"
+    ></script>
+
+    <script>
+      const messages = [
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "user",
+          content: "a user message",
+        },
+        {
+          type: "tool",
+          content: "a tool use message",
+        },
+        {
+          type: "commit",
+          end_of_turn: false,
+          content: "",
+          commits: [
+            {
+              hash: "ece101c103ec231da87f4df05c1b5e6a24e13add",
+              subject: "Add README.md for web components directory",
+              body: "This adds documentation for the web components used in the Loop UI,\nincluding a description of each component, usage examples, and\ndevelopment guidelines.\n\nCo-Authored-By: sketch\nadd README.md for loop/webui/src/web-components",
+              pushed_branch:
+                "sketch/create-readmemd-for-web-components-directory",
+            },
+          ],
+          timestamp: "2025-04-14T16:39:33.639533919Z",
+          conversation_id: "",
+          idx: 17,
+        },
+        {
+          type: "agent",
+          content: "an end-of-turn agent message",
+          end_of_turn: true,
+        },
+      ];
+      document.addEventListener("DOMContentLoaded", () => {
+        messages.forEach((msg, idx) => {
+          const jsonEl = document.createElement("pre");
+          jsonEl.innerText = `.message property: ${JSON.stringify(msg)}`;
+          document.body.append(jsonEl);
+          const messageEl = document.createElement("sketch-timeline-message");
+          messageEl.message = msg;
+          document.body.appendChild(messageEl);
+        });
+        window.addEventListener(
+          "show-commit-diff",
+          (evt) => {console.log("show-commit-diff", evt)}
+        );
+      });
+    </script>
+  </head>
+  <body>
+    <h1>sketch-timeline-message demo</h1>
+  </body>
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline.demo.html b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
new file mode 100644
index 0000000..427181d
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -0,0 +1,47 @@
+<html>
+  <head>
+    <title>sketch-timeline demo</title>
+    <link rel="stylesheet" href="demo.css" />
+    <script src="/dist/web-components/sketch-timeline.js" type="module"></script>
+
+    <script>
+      const messages = [
+        {
+          type: "user",
+          content: "a user message",
+        },
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "user",
+          content: "a user message",
+        },
+        {
+          type: "user",
+          content: "a user message",
+        },
+      ];
+      document.addEventListener("DOMContentLoaded", () => {
+        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
diff --git a/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html b/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
new file mode 100644
index 0000000..a72babc
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
@@ -0,0 +1,190 @@
+<html>
+  <head>
+    <title>sketch-tool-calls demo</title>
+    <link rel="stylesheet" href="demo.css" />
+
+    <script
+      src="/dist/web-components/sketch-tool-calls.js"
+      type="module"
+    ></script>
+
+    <script>
+      const toolCalls = [
+        [
+          {
+            name: "bash",
+            input: JSON.stringify({
+              command: "ls -a",
+            }),
+          },
+        ],
+        [
+          {
+            name: "bash",
+            input: JSON.stringify({
+              command: "ls -a",
+            }),
+            result_message: {
+              type: "tool",
+              tool_result: ".\n..",
+            },
+          },
+        ],
+        [
+          {
+            name: "bash",
+            input: JSON.stringify({
+              command: "sleep 200",
+            }),
+            result_message: {
+              type: "tool",
+              tool_error: "the user canceled this operation",
+            },
+          },
+        ],
+        [
+          {
+            name: "title",
+            input: JSON.stringify({
+              title: "a new title for this sketch",
+            }),
+          },
+        ],
+        [
+          {
+            name: "codereview",
+            input: "{}",
+            tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+            result_message: {
+              type: "tool",
+              end_of_turn: false,
+              content: "",
+              tool_name: "codereview",
+              input: "{}",
+              tool_result: "OK",
+              tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+              timestamp: "2025-04-14T16:33:17.575759565Z",
+              conversation_id: "xsa-8hw0",
+              start_time: "2025-04-14T16:33:07.11793816Z",
+              end_time: "2025-04-14T16:33:17.57575719Z",
+              elapsed: 10457819031,
+              idx: 45,
+            },
+          },
+        ],
+        [
+          {
+            name: "codereview",
+            input: "{}",
+            tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+            result_message: {
+              type: "tool",
+              end_of_turn: false,
+              content: "",
+              tool_name: "codereview",
+              input: "{}",
+              tool_result: "Not OK",
+              tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+              timestamp: "2025-04-14T16:33:17.575759565Z",
+              conversation_id: "xsa-8hw0",
+              start_time: "2025-04-14T16:33:07.11793816Z",
+              end_time: "2025-04-14T16:33:17.57575719Z",
+              elapsed: 10457819031,
+              idx: 45,
+            },
+          },
+        ],
+        [
+          {
+            name: "think",
+            input:
+              '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
+            tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
+            result_message: {
+              type: "tool",
+              end_of_turn: false,
+              content: "",
+              tool_name: "think",
+              input:
+                '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
+              tool_result: "recorded",
+              tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
+              timestamp: "2025-04-14T16:32:14.12647133Z",
+              conversation_id: "xsa-8hw0",
+              start_time: "2025-04-14T16:32:14.126454329Z",
+              end_time: "2025-04-14T16:32:14.126468539Z",
+              elapsed: 14209,
+              idx: 18,
+            },
+          },
+        ],
+        [
+          {
+            name: "patch",
+            input:
+              '{"path":"/app/loop/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│   └── sketch-timeline-message\\n│       └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n  @property()\\n  myProperty: string = \'default\';\\n\\n  static styles = css`\\n    :host {\\n      display: block;\\n    }\\n  `;\\n\\n  render() {\\n    return html`\\n      <div>\\n        ${this.myProperty}\\n      </div>\\n    `;\\n  }\\n}\\n\\ndeclare global {\\n  interface HTMLElementTagNameMap {\\n    \'sketch-new-component\': SketchNewComponent;\\n  }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/loop/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
+            tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
+            result_message: {
+              type: "tool",
+              end_of_turn: false,
+              content: "",
+              tool_name: "patch",
+              input:
+                '{"path":"/app/loop/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│   └── sketch-timeline-message\\n│       └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n  @property()\\n  myProperty: string = \'default\';\\n\\n  static styles = css`\\n    :host {\\n      display: block;\\n    }\\n  `;\\n\\n  render() {\\n    return html`\\n      <div>\\n        ${this.myProperty}\\n      </div>\\n    `;\\n  }\\n}\\n\\ndeclare global {\\n  interface HTMLElementTagNameMap {\\n    \'sketch-new-component\': SketchNewComponent;\\n  }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/loop/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
+              tool_result: "- Applied all patches\n",
+              tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
+              timestamp: "2025-04-14T16:32:47.10299854Z",
+              conversation_id: "xsa-8hw0",
+              start_time: "2025-04-14T16:32:47.101660683Z",
+              end_time: "2025-04-14T16:32:47.102994206Z",
+              elapsed: 1333524,
+              idx: 34,
+            },
+          },
+        ],
+        [
+          {
+            name: "done",
+            input:
+              '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
+            tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
+            result_message: {
+              type: "tool",
+              end_of_turn: false,
+              content: "",
+              tool_name: "done",
+              input:
+                '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
+              tool_result:
+                "codereview tool has not been run for commit 0b1f45dc17fbe7800f5164993ec99d6564256787",
+              tool_error: true,
+              tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
+              timestamp: "2025-04-14T16:33:04.639179373Z",
+              conversation_id: "xsa-8hw0",
+              start_time: "2025-04-14T16:33:04.616273148Z",
+              end_time: "2025-04-14T16:33:04.639173456Z",
+              elapsed: 22900309,
+              idx: 43,
+            },
+          },
+        ],
+      ];
+      document.addEventListener("DOMContentLoaded", () => {
+        toolCalls.forEach((calls) => {
+          const jsonEl = document.createElement("pre");
+          jsonEl.innerText = `.toolCalls property: ${JSON.stringify(calls)}`;
+          document.body.append(jsonEl);
+
+          const toolCallsEl = document.createElement("sketch-tool-calls");
+          toolCallsEl.toolCalls = calls;
+          document.body.append(toolCallsEl);
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <h1>sketch-tool-calls demo</h1>
+
+    <sketch-tool-calls></sketch-tool-calls>
+  </body>
+</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
new file mode 100644
index 0000000..dac6831
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <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>
+      document.addEventListener("DOMContentLoaded", () => {
+        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);
+          const msgDiv = document.querySelector("#selected-mode");
+          msgDiv.innerText = `selected mode: ${evt.detail.mode}`;
+        });
+      });
+  </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
diff --git a/loop/webui/src/web-components/sketch-app-shell.ts b/loop/webui/src/web-components/sketch-app-shell.ts
new file mode 100644
index 0000000..2c7b111
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-app-shell.ts
@@ -0,0 +1,769 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { PropertyValues } from "lit";
+import { DataManager, ConnectionStatus } from "../data";
+import { State, TimelineMessage, ToolCall } from "../types";
+import "./sketch-container-status";
+import "./sketch-view-mode-select";
+import "./sketch-network-status";
+import "./sketch-timeline";
+import "./sketch-chat-input";
+import "./sketch-diff-view";
+import "./sketch-charts";
+import "./sketch-terminal";
+import { SketchDiffView } from "./sketch-diff-view";
+import { View } from "vega";
+
+type ViewMode = "chat" | "diff" | "charts" | "terminal";
+
+@customElement("sketch-app-shell")
+export class SketchAppShell extends LitElement {
+  // Current view mode (chat, diff, charts, terminal)
+  @state()
+  viewMode: "chat" | "diff" | "charts" | "terminal" = "chat";
+
+  // Current commit hash for diff view
+  @state()
+  currentCommitHash: string = "";
+
+  // Reference to the diff view component
+  private diffViewRef?: HTMLElement;
+
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, sans-serif;
+      color: #333;
+      line-height: 1.4;
+      min-height: 100vh;
+      width: 100%;
+      position: relative;
+      overflow-x: hidden;
+    }
+
+    /* Top banner with combined elements */
+    .top-banner {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 20px;
+      margin-bottom: 0;
+      border-bottom: 1px solid #eee;
+      gap: 10px;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: white;
+      z-index: 100;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      max-width: 100%;
+    }
+
+    .banner-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+      min-width: 6em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .chat-title {
+      margin: 0;
+      padding: 0;
+      color: rgba(82, 82, 82, 0.85);
+      font-size: 16px;
+      font-weight: normal;
+      font-style: italic;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* View mode container styles - mirroring timeline.css structure */
+    .view-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      margin-top: 65px; /* Space for the top banner */
+      margin-bottom: 90px; /* Increased space for the chat input */
+      position: relative;
+      padding-bottom: 15px; /* Additional padding to prevent clipping */
+      padding-top: 15px; /* Add padding at top to prevent content touching the header */
+    }
+
+    /* Allow the container to expand to full width in diff mode */
+    .view-container.diff-active {
+      max-width: 100%;
+    }
+
+    /* Individual view styles */
+    .chat-view,
+    .diff-view,
+    .chart-view,
+    .terminal-view {
+      display: none; /* Hidden by default */
+      width: 100%;
+    }
+
+    /* Active view styles - these will be applied via JavaScript */
+    .view-active {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title-container {
+      display: flex;
+      flex-direction: column;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 33%;
+    }
+
+    .refresh-control {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0;
+      flex-wrap: nowrap;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .refresh-button {
+      background: #4caf50;
+      color: white;
+      border: none;
+      padding: 4px 10px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      margin-right: 5px;
+    }
+
+    .stop-button:hover {
+      background-color: #c82333 !important;
+    }
+
+    .poll-updates {
+      display: flex;
+      align-items: center;
+      margin: 0 5px;
+      font-size: 12px;
+    }
+  `;
+
+  // Header bar: Network connection status details
+  @property()
+  connectionStatus: ConnectionStatus = "disconnected";
+
+  @property()
+  connectionErrorMessage: string = "";
+
+  @property()
+  messageStatus: string = "";
+
+  // Chat messages
+  @property()
+  messages: TimelineMessage[] = [];
+
+  @property()
+  chatMessageText: string = "";
+
+  @property()
+  title: string = "";
+
+  private dataManager = new DataManager();
+
+  @property()
+  containerState: State = { title: "", os: "", total_usage: {} };
+
+  // Track if this is the first load of messages
+  @state()
+  private isFirstLoad: boolean = true;
+
+  // Track if we should scroll to the bottom
+  @state()
+  private shouldScrollToBottom: boolean = true;
+
+  // Mutation observer to detect when new messages are added
+  private mutationObserver: MutationObserver | null = null;
+
+  constructor() {
+    super();
+
+    // Binding methods to this
+    this._handleViewModeSelect = this._handleViewModeSelect.bind(this);
+    this._handleDiffComment = this._handleDiffComment.bind(this);
+    this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
+    this._handlePopState = this._handlePopState.bind(this);
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Initialize client-side nav history.
+    const url = new URL(window.location.href);
+    const mode = url.searchParams.get("view") || "chat";
+    window.history.replaceState({ mode }, "", url.toString());
+
+    this.toggleViewMode(mode as ViewMode, false);
+    // Add popstate event listener to handle browser back/forward navigation
+    window.addEventListener(
+      "popstate",
+      this._handlePopState as EventListener);
+
+    // Add event listeners
+    window.addEventListener(
+      "view-mode-select",
+      this._handleViewModeSelect as EventListener
+    );
+    window.addEventListener(
+      "diff-comment",
+      this._handleDiffComment as EventListener
+    );
+    window.addEventListener(
+      "show-commit-diff",
+      this._handleShowCommitDiff as EventListener
+    );
+
+    // register event listeners
+    this.dataManager.addEventListener(
+      "dataChanged",
+      this.handleDataChanged.bind(this)
+    );
+    this.dataManager.addEventListener(
+      "connectionStatusChanged",
+      this.handleConnectionStatusChanged.bind(this)
+    );
+
+    // Initialize the data manager
+    this.dataManager.initialize();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(
+      "popstate",
+      this._handlePopState as EventListener);
+
+    // Remove event listeners
+    window.removeEventListener(
+      "view-mode-select",
+      this._handleViewModeSelect as EventListener
+    );
+    window.removeEventListener(
+      "diff-comment",
+      this._handleDiffComment as EventListener
+    );
+    window.removeEventListener(
+      "show-commit-diff",
+      this._handleShowCommitDiff as EventListener
+    );
+
+    // unregister data manager event listeners
+    this.dataManager.removeEventListener(
+      "dataChanged",
+      this.handleDataChanged.bind(this)
+    );
+    this.dataManager.removeEventListener(
+      "connectionStatusChanged",
+      this.handleConnectionStatusChanged.bind(this)
+    );
+
+    // Disconnect mutation observer if it exists
+    if (this.mutationObserver) {
+      console.log("Auto-scroll: Disconnecting mutation observer");
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+  }
+
+  updateUrlForViewMode(
+    mode: "chat" | "diff" | "charts" | "terminal"
+  ): void {
+    // Get the current URL without search parameters
+    const url = new URL(window.location.href);
+
+    // Clear existing parameters
+    url.search = "";
+
+    // Only add view parameter if not in default chat view
+    if (mode !== "chat") {
+      url.searchParams.set("view", mode);
+      const diffView = this.shadowRoot?.querySelector(".diff-view") as SketchDiffView;
+
+      // If in diff view and there's a commit hash, include that too
+      if (mode === "diff" && diffView.commitHash) {
+        url.searchParams.set("commit", diffView.commitHash);
+      }
+    }
+
+    // Update the browser history without reloading the page
+    window.history.pushState({ mode }, "", url.toString());
+  }
+
+  _handlePopState(event) {
+    if (event.state && event.state.mode) {
+      this.toggleViewMode(event.state.mode, false);
+    } else {
+      this.toggleViewMode("chat", false);
+    }
+  }
+
+  /**
+   * Handle view mode selection event
+   */
+  private _handleViewModeSelect(event: CustomEvent) {
+    const mode = event.detail.mode as "chat" | "diff" | "charts" | "terminal";
+    this.toggleViewMode(mode, true);
+  }
+
+  /**
+   * Handle show commit diff event
+   */
+  private _handleShowCommitDiff(event: CustomEvent) {
+    const { commitHash } = event.detail;
+    if (commitHash) {
+      this.showCommitDiff(commitHash);
+    }
+  }
+
+  /**
+   * Handle diff comment event
+   */
+  private _handleDiffComment(event: CustomEvent) {
+    const { comment } = event.detail;
+    if (!comment) return;
+
+    // Find the chat input textarea
+    const chatInput = this.shadowRoot?.querySelector("sketch-chat-input");
+    if (chatInput) {
+      // Update the chat input content using property
+      const currentContent = chatInput.getAttribute("content") || "";
+      const newContent = currentContent
+        ? `${currentContent}\n\n${comment}`
+        : comment;
+      chatInput.setAttribute("content", newContent);
+
+      // Dispatch an event to update the textarea value in the chat input component
+      const updateEvent = new CustomEvent("update-content", {
+        detail: { content: newContent },
+        bubbles: true,
+        composed: true,
+      });
+      chatInput.dispatchEvent(updateEvent);
+
+      // Switch back to chat view
+      this.toggleViewMode("chat", true);
+    }
+  }
+
+  /**
+   * Listen for commit diff event
+   * @param commitHash The commit hash to show diff for
+   */
+  public showCommitDiff(commitHash: string): void {
+    // Store the commit hash
+    this.currentCommitHash = commitHash;
+
+    // Switch to diff view
+    this.toggleViewMode("diff",  true);
+
+    // Wait for DOM update to complete
+    this.updateComplete.then(() => {
+      // Get the diff view component
+      const diffView = this.shadowRoot?.querySelector("sketch-diff-view");
+      if (diffView) {
+        // Call the showCommitDiff method
+        (diffView as any).showCommitDiff(commitHash);
+      }
+    });
+  }
+
+  /**
+   * Toggle between different view modes: chat, diff, charts, terminal
+   */
+  public toggleViewMode(mode: ViewMode, updateHistory: boolean): void {
+    // Don't do anything if the mode is already active
+    if (this.viewMode === mode) return;
+
+    // Update the view mode
+    this.viewMode = mode;
+
+    if (updateHistory) {
+      // Update URL with the current view mode
+      this.updateUrlForViewMode(mode);
+    }
+
+    // Wait for DOM update to complete
+    this.updateComplete.then(() => {
+      // Update active view
+      const viewContainer = this.shadowRoot?.querySelector(".view-container");
+      const chatView = this.shadowRoot?.querySelector(".chat-view");
+      const diffView = this.shadowRoot?.querySelector(".diff-view");
+      const chartView = this.shadowRoot?.querySelector(".chart-view");
+      const terminalView = this.shadowRoot?.querySelector(".terminal-view");
+
+      // Remove active class from all views
+      chatView?.classList.remove("view-active");
+      diffView?.classList.remove("view-active");
+      chartView?.classList.remove("view-active");
+      terminalView?.classList.remove("view-active");
+
+      // Add/remove diff-active class on view container
+      if (mode === "diff") {
+        viewContainer?.classList.add("diff-active");
+      } else {
+        viewContainer?.classList.remove("diff-active");
+      }
+
+      // Add active class to the selected view
+      switch (mode) {
+        case "chat":
+          chatView?.classList.add("view-active");
+          break;
+        case "diff":
+          diffView?.classList.add("view-active");
+          // Load diff content if we have a diff view
+          const diffViewComp =
+            this.shadowRoot?.querySelector("sketch-diff-view");
+          if (diffViewComp && this.currentCommitHash) {
+            (diffViewComp as any).showCommitDiff(this.currentCommitHash);
+          } else if (diffViewComp) {
+            (diffViewComp as any).loadDiffContent();
+          }
+          break;
+        case "charts":
+          chartView?.classList.add("view-active");
+          break;
+        case "terminal":
+          terminalView?.classList.add("view-active");
+          break;
+      }
+
+      // Update view mode buttons
+      const viewModeSelect = this.shadowRoot?.querySelector(
+        "sketch-view-mode-select"
+      );
+      if (viewModeSelect) {
+        const event = new CustomEvent("update-active-mode", {
+          detail: { mode },
+          bubbles: true,
+          composed: true,
+        });
+        viewModeSelect.dispatchEvent(event);
+      }
+
+      // FIXME: This is a hack to get vega chart in sketch-charts.ts to work properly
+      // When the chart is in the background, its container has a width of 0, so vega
+      // renders width 0 and only changes that width on a resize event.
+      // See https://github.com/vega/react-vega/issues/85#issuecomment-1826421132
+      window.dispatchEvent(new Event("resize"));
+    });
+  }
+
+  mergeAndDedupe(
+    arr1: TimelineMessage[],
+    arr2: TimelineMessage[]
+  ): TimelineMessage[] {
+    const mergedArray = [...arr1, ...arr2];
+    const seenIds = new Set<number>();
+    const toolCallResults = new Map<string, TimelineMessage>();
+
+    let ret: TimelineMessage[] = mergedArray
+      .filter((msg) => {
+        if (msg.type == "tool") {
+          toolCallResults.set(msg.tool_call_id, msg);
+          return false;
+        }
+        if (seenIds.has(msg.idx)) {
+          return false; // Skip if idx is already seen
+        }
+
+        seenIds.add(msg.idx);
+        return true;
+      })
+      .sort((a: TimelineMessage, b: TimelineMessage) => a.idx - b.idx);
+
+    // Attach any tool_call result messages to the original message's tool_call object.
+    ret.forEach((msg) => {
+      msg.tool_calls?.forEach((toolCall) => {
+        if (toolCallResults.has(toolCall.tool_call_id)) {
+          toolCall.result_message = toolCallResults.get(toolCall.tool_call_id);
+        }
+      });
+    });
+    return ret;
+  }
+
+  private handleDataChanged(eventData: {
+    state: State;
+    newMessages: TimelineMessage[];
+    isFirstFetch?: boolean;
+  }): void {
+    const { state, newMessages, isFirstFetch } = eventData;
+
+    // Check if this is the first data fetch or if there are new messages
+    if (isFirstFetch) {
+      console.log("Auto-scroll: First data fetch, will scroll to bottom");
+      this.isFirstLoad = true;
+      this.shouldScrollToBottom = true;
+      this.messageStatus = "Initial messages loaded";
+    } else if (newMessages && newMessages.length > 0) {
+      console.log(`Auto-scroll: Received ${newMessages.length} new messages`);
+      this.messageStatus = "Updated just now";
+      // Check if we should scroll before updating messages
+      this.shouldScrollToBottom = this.checkShouldScroll();
+    } else {
+      this.messageStatus = "No new messages";
+    }
+
+    // Update state if we received it
+    if (state) {
+      this.containerState = state;
+      this.title = state.title;
+    }
+
+    // Create a copy of the current messages before updating
+    const oldMessageCount = this.messages.length;
+
+    // Update messages
+    this.messages = this.mergeAndDedupe(this.messages, newMessages);
+
+    // Log information about the message update
+    if (this.messages.length > oldMessageCount) {
+      console.log(
+        `Auto-scroll: Messages updated from ${oldMessageCount} to ${this.messages.length}, shouldScroll=${this.shouldScrollToBottom}`
+      );
+    }
+  }
+
+  private handleConnectionStatusChanged(
+    status: ConnectionStatus,
+    errorMessage?: string
+  ): void {
+    this.connectionStatus = status;
+    this.connectionErrorMessage = errorMessage || "";
+  }
+
+  async _sendChat(e: CustomEvent) {
+    console.log("app shell: _sendChat", e);
+    const message = e.detail.message?.trim();
+    if (message == "") {
+      return;
+    }
+    try {
+      // Send the message to the server
+      const response = await fetch("chat", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ message }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.text();
+        throw new Error(`Server error: ${response.status} - ${errorData}`);
+      }
+      // Clear the input after successfully sending the message.
+      this.chatMessageText = "";
+
+      // Reset data manager state to force a full refresh after sending a message
+      // This ensures we get all messages in the correct order
+      // Use private API for now - TODO: add a resetState() method to DataManager
+      (this.dataManager as any).nextFetchIndex = 0;
+      (this.dataManager as any).currentFetchStartIndex = 0;
+
+      // Always scroll to bottom after sending a message
+      console.log("Auto-scroll: User sent a message, forcing scroll to bottom");
+      this.shouldScrollToBottom = true;
+
+      // // If in diff view, switch to conversation view
+      // if (this.viewMode === "diff") {
+      //   await this.toggleViewMode("chat");
+      // }
+
+      // Refresh the timeline data to show the new message
+      await this.dataManager.fetchData();
+
+      // Force multiple scroll attempts to ensure the user message is visible
+      // This addresses potential timing issues with DOM updates
+      const forceScrollAttempts = () => {
+        console.log("Auto-scroll: Forcing scroll after user message");
+        this.shouldScrollToBottom = true;
+
+        // Update the timeline component's scroll state
+        const timeline = this.shadowRoot?.querySelector(
+          "sketch-timeline"
+        ) as any;
+        if (timeline && timeline.setShouldScrollToLatest) {
+          timeline.setShouldScrollToLatest(true);
+          timeline.scrollToLatest();
+        } else {
+          this.scrollToBottom();
+        }
+      };
+
+      // Make multiple scroll attempts with different timings
+      // This ensures we catch the DOM after various update stages
+      setTimeout(forceScrollAttempts, 100);
+      setTimeout(forceScrollAttempts, 300);
+      setTimeout(forceScrollAttempts, 600);
+    } catch (error) {
+      console.error("Error sending chat message:", error);
+      const statusText = document.getElementById("statusText");
+      if (statusText) {
+        statusText.textContent = "Error sending message";
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="top-banner">
+        <div class="title-container">
+          <h1 class="banner-title">sketch</h1>
+          <h2 id="chatTitle" class="chat-title">${this.title}</h2>
+        </div>
+
+        <sketch-container-status
+          .state=${this.containerState}
+        ></sketch-container-status>
+
+        <div class="refresh-control">
+          <sketch-view-mode-select></sketch-view-mode-select>
+
+          <button id="stopButton" class="refresh-button stop-button">
+            Stop
+          </button>
+
+          <div class="poll-updates">
+            <input type="checkbox" id="pollToggle" checked />
+            <label for="pollToggle">Poll</label>
+          </div>
+
+          <sketch-network-status
+            message=${this.messageStatus}
+            connection=${this.connectionStatus}
+            error=${this.connectionErrorMessage}
+          ></sketch-network-status>
+        </div>
+      </div>
+
+      <div class="view-container">
+        <div class="chat-view ${this.viewMode === "chat" ? "view-active" : ""}">
+          <sketch-timeline .messages=${this.messages}></sketch-timeline>
+        </div>
+
+        <div class="diff-view ${this.viewMode === "diff" ? "view-active" : ""}">
+          <sketch-diff-view
+            .commitHash=${this.currentCommitHash}
+          ></sketch-diff-view>
+        </div>
+
+        <div
+          class="chart-view ${this.viewMode === "charts" ? "view-active" : ""}"
+        >
+          <sketch-charts .messages=${this.messages}></sketch-charts>
+        </div>
+
+        <div
+          class="terminal-view ${this.viewMode === "terminal"
+            ? "view-active"
+            : ""}"
+        >
+          <sketch-terminal></sketch-terminal>
+        </div>
+      </div>
+
+      <sketch-chat-input
+        .content=${this.chatMessageText}
+        @send-chat="${this._sendChat}"
+      ></sketch-chat-input>
+    `;
+  }
+
+  /**
+   * Check if the page should scroll to the bottom based on current view position
+   * @returns Boolean indicating if we should scroll to the bottom
+   */
+  private checkShouldScroll(): boolean {
+    // If we're not in chat view, don't auto-scroll
+    if (this.viewMode !== "chat") {
+      return false;
+    }
+
+    // More generous threshold - if we're within 500px of the bottom, auto-scroll
+    // This ensures we start scrolling sooner when new messages appear
+    const scrollPosition = window.scrollY;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.body.scrollHeight;
+    const distanceFromBottom = documentHeight - (scrollPosition + windowHeight);
+    const threshold = 500; // Increased threshold to be more responsive
+
+    return distanceFromBottom <= threshold;
+  }
+
+  /**
+   * Scroll to the bottom of the timeline
+   */
+  private scrollToBottom(): void {
+    if (!this.checkShouldScroll()) {
+      return;
+    }
+
+    this.scrollTo({ top: this.scrollHeight, behavior: "smooth" });
+  }
+
+  /**
+   * Called after the component's properties have been updated
+   */
+  updated(changedProperties: PropertyValues): void {
+    // If messages have changed, scroll to bottom if needed
+    if (changedProperties.has("messages") && this.messages.length > 0) {
+      setTimeout(() => this.scrollToBottom(), 50);
+    }
+  }
+
+  /**
+   * Lifecycle callback when component is first connected to DOM
+   */
+  firstUpdated(): void {
+    if (this.viewMode !== "chat") {
+      return;
+    }
+
+    // Initial scroll to bottom when component is first rendered
+    setTimeout(
+      () => this.scrollTo({ top: this.scrollHeight, behavior: "smooth" }),
+      50
+    );
+
+    const pollToggleCheckbox = this.renderRoot?.querySelector("#pollToggle") as HTMLInputElement;
+    pollToggleCheckbox?.addEventListener("change", () => {
+      this.dataManager.setPollingEnabled(pollToggleCheckbox.checked);
+      if (!pollToggleCheckbox.checked) {
+        this.connectionStatus = "disabled";
+        this.messageStatus = "Polling stopped";
+      } else {
+        this.messageStatus = "Polling for updates...";
+      }
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-app-shell": SketchAppShell;
+  }
+}
diff --git a/loop/webui/src/web-components/sketch-charts.ts b/loop/webui/src/web-components/sketch-charts.ts
new file mode 100644
index 0000000..3bde418
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-charts.ts
@@ -0,0 +1,490 @@
+import "./vega-embed";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { TopLevelSpec } from "vega-lite";
+import type { TimelineMessage } from "../types";
+import "vega-embed";
+import { VisualizationSpec } from "vega-embed";
+
+/**
+ * Web component for rendering charts related to the timeline data
+ * Displays cumulative cost over time and message timing visualization
+ */
+@customElement("sketch-charts")
+export class SketchCharts extends LitElement {
+  @property({ type: Array })
+  messages: TimelineMessage[] = [];
+
+  @state()
+  private chartData: { timestamp: Date; cost: number }[] = [];
+
+  // We need to make the styles available to Vega-Embed when it's rendered
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .chart-container {
+      padding: 20px;
+      background-color: #fff;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      margin-bottom: 20px;
+    }
+
+    .chart-section {
+      margin-bottom: 30px;
+    }
+
+    .chart-section h3 {
+      margin-top: 0;
+      margin-bottom: 15px;
+      font-size: 18px;
+      color: #333;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 8px;
+    }
+
+    .chart-content {
+      width: 100%;
+      min-height: 300px;
+    }
+
+    .loader {
+      border: 4px solid #f3f3f3;
+      border-radius: 50%;
+      border-top: 4px solid #3498db;
+      width: 40px;
+      height: 40px;
+      margin: 20px auto;
+      animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+
+  constructor() {
+    super();
+    this.chartData = [];
+  }
+
+  private calculateCumulativeCostData(
+    messages: TimelineMessage[]
+  ): { timestamp: Date; cost: number }[] {
+    if (!messages || messages.length === 0) {
+      return [];
+    }
+
+    let cumulativeCost = 0;
+    const data: { timestamp: Date; cost: number }[] = [];
+
+    for (const message of messages) {
+      if (message.timestamp && message.usage && message.usage.cost_usd) {
+        const timestamp = new Date(message.timestamp);
+        cumulativeCost += message.usage.cost_usd;
+
+        data.push({
+          timestamp,
+          cost: cumulativeCost,
+        });
+      }
+    }
+
+    return data;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("messages")) {
+      this.chartData = this.calculateCumulativeCostData(this.messages);
+    }
+  }
+
+  private getMessagesChartSpec(): VisualizationSpec {
+    try {
+      const allMessages = this.messages;
+      if (!Array.isArray(allMessages) || allMessages.length === 0) {
+        return null;
+      }
+
+      // Sort messages chronologically
+      allMessages.sort((a, b) => {
+        const dateA = a.timestamp ? new Date(a.timestamp).getTime() : 0;
+        const dateB = b.timestamp ? new Date(b.timestamp).getTime() : 0;
+        return dateA - dateB;
+      });
+
+      // 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) => {
+        if (msg.tool_calls && msg.tool_calls.length > 0) {
+          msg.tool_calls.forEach((toolCall) => {
+            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 || '',
+                    start_time: new Date(resultMsg.start_time).toISOString(),
+                    end_time: new Date(resultMsg.end_time).toISOString(),
+                    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 || '',
+                    time: new Date(resultMsg.timestamp).toISOString(),
+                    message: JSON.stringify(resultMsg, null, 2)
+                  });
+                }
+              }
+            }
+          });
+        }
+      });
+
+      // Prepare data for messages with start_time and end_time (bar marks)
+      const barData = allMessages
+        .filter((msg) => msg.start_time && msg.end_time) // Only include messages with explicit start and end times
+        .map((msg) => {
+          // Parse start and end times
+          const startTime = new Date(msg.start_time!);
+          const endTime = new Date(msg.end_time!);
+
+          // Use the message idx directly for consistent ordering
+          const index = msg.idx;
+
+          // Truncate content for tooltip readability
+          const displayContent = msg.content
+            ? msg.content.length > 100
+              ? msg.content.substring(0, 100) + "..."
+              : msg.content
+            : "No content";
+
+          // Prepare tool input and output for tooltip if applicable
+          const toolInput = msg.input
+            ? msg.input.length > 100
+              ? msg.input.substring(0, 100) + "..."
+              : msg.input
+            : "";
+
+          const toolResult = msg.tool_result
+            ? msg.tool_result.length > 100
+              ? msg.tool_result.substring(0, 100) + "..."
+              : msg.tool_result
+            : "";
+
+          return {
+            index: index,
+            message_type: msg.type,
+            content: displayContent,
+            tool_name: msg.tool_name || "",
+            tool_input: toolInput,
+            tool_result: toolResult,
+            start_time: startTime.toISOString(),
+            end_time: endTime.toISOString(),
+            message: JSON.stringify(msg, null, 2), // Full message for detailed inspection
+          };
+        });
+
+      // Prepare data for messages with timestamps only (point marks)
+      const pointData = allMessages
+        .filter((msg) => msg.timestamp && !(msg.start_time && msg.end_time)) // Only messages with timestamp but without start/end times
+        .map((msg) => {
+          // Get the timestamp
+          const timestamp = new Date(msg.timestamp!);
+
+          // Use the message idx directly for consistent ordering
+          const index = msg.idx;
+
+          // Truncate content for tooltip readability
+          const displayContent = msg.content
+            ? msg.content.length > 100
+              ? msg.content.substring(0, 100) + "..."
+              : msg.content
+            : "No content";
+
+          // Prepare tool input and output for tooltip if applicable
+          const toolInput = msg.input
+            ? msg.input.length > 100
+              ? msg.input.substring(0, 100) + "..."
+              : msg.input
+            : "";
+
+          const toolResult = msg.tool_result
+            ? msg.tool_result.length > 100
+              ? msg.tool_result.substring(0, 100) + "..."
+              : msg.tool_result
+            : "";
+
+          return {
+            index: index,
+            message_type: msg.type,
+            content: displayContent,
+            tool_name: msg.tool_name || "",
+            tool_input: toolInput,
+            tool_result: toolResult,
+            time: timestamp.toISOString(),
+            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;
+      });
+
+      // Check if we have any data to display
+      if (barData.length === 0 && pointData.length === 0 && 
+          toolBarData.length === 0 && toolPointData.length === 0) {
+        return null;
+      }
+
+      // Calculate height based on number of unique messages
+      const chartHeight = 20 * Math.min(allMessages.length, 25); // Max 25 visible at once
+
+      // Create a layered Vega-Lite spec combining bars and points
+      const messagesSpec: TopLevelSpec = {
+        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+        description: "Message Timeline",
+        width: "container",
+        height: chartHeight,
+        layer: [],
+      };
+
+      // Add bar layer if we have bar data
+      if (barData.length > 0 || toolBarData.length > 0) {
+        const combinedBarData = [...barData, ...toolBarData];
+        messagesSpec.layer.push({
+          data: { values: combinedBarData },
+          mark: {
+            type: "bar",
+            height: 16,
+          },
+          encoding: {
+            x: {
+              field: "start_time",
+              type: "temporal",
+              title: "Time",
+              axis: {
+                format: "%H:%M:%S",
+                title: "Time",
+                labelAngle: -45,
+              },
+            },
+            x2: { field: "end_time" },
+            y: {
+              field: "index",
+              type: "ordinal",
+              title: "Message Index",
+              axis: {
+                grid: true,
+              },
+            },
+            color: {
+              field: "message_type",
+              type: "nominal",
+              title: "Message Type",
+              legend: {},
+            },
+            tooltip: [
+              { field: "message_type", type: "nominal", title: "Type" },
+              { field: "tool_name", type: "nominal", title: "Tool" },
+              {
+                field: "start_time",
+                type: "temporal",
+                title: "Start Time",
+                format: "%H:%M:%S.%L",
+              },
+              {
+                field: "end_time",
+                type: "temporal",
+                title: "End Time",
+                format: "%H:%M:%S.%L",
+              },
+              { field: "content", type: "nominal", title: "Content" },
+              { field: "tool_input", type: "nominal", title: "Tool Input" },
+              { field: "tool_result", type: "nominal", title: "Tool Result" },
+            ],
+          },
+        });
+      }
+
+      // Add point layer if we have point data
+      if (pointData.length > 0 || toolPointData.length > 0) {
+        const combinedPointData = [...pointData, ...toolPointData];
+        messagesSpec.layer.push({
+          data: { values: combinedPointData },
+          mark: {
+            type: "point",
+            size: 100,
+            filled: true,
+          },
+          encoding: {
+            x: {
+              field: "time",
+              type: "temporal",
+              title: "Time",
+              axis: {
+                format: "%H:%M:%S",
+                title: "Time",
+                labelAngle: -45,
+              },
+            },
+            y: {
+              field: "index",
+              type: "ordinal",
+              title: "Message Index",
+            },
+            color: {
+              field: "message_type",
+              type: "nominal",
+              title: "Message Type",
+            },
+            tooltip: [
+              { field: "message_type", type: "nominal", title: "Type" },
+              { field: "tool_name", type: "nominal", title: "Tool" },
+              {
+                field: "time",
+                type: "temporal",
+                title: "Timestamp",
+                format: "%H:%M:%S.%L",
+              },
+              { field: "content", type: "nominal", title: "Content" },
+              { field: "tool_input", type: "nominal", title: "Tool Input" },
+              { field: "tool_result", type: "nominal", title: "Tool Result" },
+            ],
+          },
+        });
+      }
+      return messagesSpec;
+    } catch (error) {
+      console.error("Error rendering messages chart:", error);
+    }
+  }
+
+  render() {
+    const costSpec = this.createCostChartSpec();
+    const messagesSpec = this.getMessagesChartSpec();
+
+    return html`
+      <div class="chart-container" id="chartContainer">
+        <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>`}
+          </div>
+        </div>
+        <div class="chart-section">
+          <h3>Message Timeline</h3>
+          <div class="chart-content">
+          ${messagesSpec?.data ? 
+              html`<vega-embed .spec=${messagesSpec}></vega-embed>`
+              : html`<p>No messages available to display.</p>`}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private createCostChartSpec(): VisualizationSpec {
+    return {
+      $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+      description: "Cumulative cost over time",
+      width: "container",
+      height: 300,
+      data: {
+        values: this.chartData.map((d) => ({
+          timestamp: d.timestamp.toISOString(),
+          cost: d.cost,
+        })),
+      },
+      mark: {
+        type: "line",
+        point: true,
+      },
+      encoding: {
+        x: {
+          field: "timestamp",
+          type: "temporal",
+          title: "Time",
+          axis: {
+            format: "%H:%M:%S",
+            title: "Time",
+            labelAngle: -45,
+          },
+        },
+        y: {
+          field: "cost",
+          type: "quantitative",
+          title: "Cumulative Cost (USD)",
+          axis: {
+            format: "$,.4f",
+          },
+        },
+        tooltip: [
+          {
+            field: "timestamp",
+            type: "temporal",
+            title: "Time",
+            format: "%Y-%m-%d %H:%M:%S",
+          },
+          {
+            field: "cost",
+            type: "quantitative",
+            title: "Cumulative Cost",
+            format: "$,.4f",
+          },
+        ],
+      },
+    };
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-charts": SketchCharts;
+  }
+}
diff --git a/loop/webui/src/web-components/sketch-chat-input.test.ts b/loop/webui/src/web-components/sketch-chat-input.test.ts
new file mode 100644
index 0000000..7d93c17
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-chat-input.test.ts
@@ -0,0 +1,137 @@
+import { html, fixture, expect, oneEvent, elementUpdated, fixtureCleanup } from "@open-wc/testing";
+import "./sketch-chat-input";
+import { SketchChatInput } from "./sketch-chat-input";
+
+describe("SketchChatInput", () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+
+  it("initializes with empty content by default", async () => {
+    const el: SketchChatInput = await fixture(html`
+      <sketch-chat-input></sketch-chat-input>
+    `);
+
+    expect(el.content).to.equal("");
+    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
+    expect(textarea.value).to.equal("");
+  });
+
+  it("initializes with provided content", async () => {
+    const testContent = "Hello, world!";
+    const el: SketchChatInput = await fixture(html`
+      <sketch-chat-input .content=${testContent}></sketch-chat-input>
+    `);
+
+    expect(el.content).to.equal(testContent);
+    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
+    expect(textarea.value).to.equal(testContent);
+  });
+
+  it("updates content when typing in the textarea", async () => {
+    const el: SketchChatInput = await fixture(html`
+      <sketch-chat-input></sketch-chat-input>
+    `);
+
+    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
+    const newValue = "New message";
+    
+    textarea.value = newValue;
+    textarea.dispatchEvent(new Event("input"));
+    
+    expect(el.content).to.equal(newValue);
+  });
+
+  it("sends message when clicking the send button", async () => {
+    const testContent = "Test message";
+    const el: SketchChatInput = await fixture(html`
+      <sketch-chat-input .content=${testContent}></sketch-chat-input>
+    `);
+
+    const button = el.shadowRoot!.querySelector("#sendChatButton") as HTMLButtonElement;
+    
+    // Setup listener for the send-chat event
+    setTimeout(() => button.click());
+    const { detail } = await oneEvent(el, "send-chat");
+    
+    expect(detail.message).to.equal(testContent);
+    expect(el.content).to.equal("");
+  });
+
+  it("sends message when pressing Enter (without shift)", async () => {
+    const testContent = "Test message";
+    const el: SketchChatInput = await fixture(html`
+      <sketch-chat-input .content=${testContent}></sketch-chat-input>
+    `);
+
+    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
+    
+    // Setup listener for the send-chat event
+    setTimeout(() => {
+      const enterEvent = new KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+        cancelable: true,
+        shiftKey: false
+      });
+      textarea.dispatchEvent(enterEvent);
+    });
+    
+    const { detail } = await oneEvent(el, "send-chat");
+    
+    expect(detail.message).to.equal(testContent);
+    expect(el.content).to.equal("");
+  });
+
+  it("does not send message when pressing Shift+Enter", async () => {
+    const testContent = "Test message";
+    const el: SketchChatInput = await fixture(html`
+      <sketch-chat-input .content=${testContent}></sketch-chat-input>
+    `);
+
+    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
+    
+    // Create a flag to track if the event was fired
+    let eventFired = false;
+    el.addEventListener("send-chat", () => {
+      eventFired = true;
+    });
+    
+    // Dispatch the shift+enter keydown event
+    const shiftEnterEvent = new KeyboardEvent("keydown", {
+      key: "Enter",
+      bubbles: true,
+      cancelable: true,
+      shiftKey: true
+    });
+    textarea.dispatchEvent(shiftEnterEvent);
+    
+    // Wait a short time to verify no event was fired
+    await new Promise(resolve => setTimeout(resolve, 10));
+    
+    expect(eventFired).to.be.false;
+    expect(el.content).to.equal(testContent);
+  });
+
+  it("updates content when receiving update-content event", async () => {
+    const el: SketchChatInput = await fixture(html`
+      <sketch-chat-input></sketch-chat-input>
+    `);
+
+    const newContent = "Updated content";
+    
+    // Dispatch the update-content event
+    const updateEvent = new CustomEvent("update-content", {
+      detail: { content: newContent },
+      bubbles: true
+    });
+    el.dispatchEvent(updateEvent);
+    
+    // Wait for the component to update
+    await elementUpdated(el);
+    
+    expect(el.content).to.equal(newContent);
+    const textarea = el.shadowRoot!.querySelector("#chatInput") as HTMLTextAreaElement;
+    expect(textarea.value).to.equal(newContent);
+  });
+});
diff --git a/loop/webui/src/web-components/sketch-chat-input.ts b/loop/webui/src/web-components/sketch-chat-input.ts
new file mode 100644
index 0000000..3e75b52
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-chat-input.ts
@@ -0,0 +1,178 @@
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { DataManager, ConnectionStatus } from "../data";
+import { State, TimelineMessage } from "../types";
+import "./sketch-container-status";
+
+@customElement("sketch-chat-input")
+export class SketchChatInput extends LitElement {
+  @property()
+  content: string = "";
+
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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`
+    /* Chat styles - exactly matching timeline.css */
+    .chat-container {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: #f0f0f0;
+      padding: 15px;
+      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+      min-height: 40px; /* Ensure minimum height */
+    }
+
+    .chat-input-wrapper {
+      display: flex;
+      max-width: 1200px;
+      margin: 0 auto;
+      gap: 10px;
+    }
+
+    #chatInput {
+      flex: 1;
+      padding: 12px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      resize: none;
+      font-family: monospace;
+      font-size: 12px;
+      min-height: 40px;
+      max-height: 120px;
+      background: #f7f7f7;
+    }
+
+    #sendChatButton {
+      background-color: #2196f3;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      padding: 0 20px;
+      cursor: pointer;
+      font-weight: 600;
+    }
+
+    #sendChatButton:hover {
+      background-color: #0d8bf2;
+    }
+  `;
+
+  constructor() {
+    super();
+
+    // Binding methods
+    this._handleUpdateContent = this._handleUpdateContent.bind(this);
+  }
+
+  /**
+   * Handle update-content event
+   */
+  private _handleUpdateContent(event: CustomEvent) {
+    const { content } = event.detail;
+    if (content !== undefined) {
+      this.content = content;
+
+      // Update the textarea value directly, otherwise it won't update until next render
+      const textarea = this.shadowRoot?.querySelector(
+        "#chatInput"
+      ) as HTMLTextAreaElement;
+      if (textarea) {
+        textarea.value = content;
+      }
+    }
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Listen for update-content events
+    this.addEventListener(
+      "update-content",
+      this._handleUpdateContent as EventListener
+    );
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // Remove event listeners
+    this.removeEventListener(
+      "update-content",
+      this._handleUpdateContent as EventListener
+    );
+  }
+
+  sendChatMessage() {
+    const event = new CustomEvent("send-chat", {
+      detail: { message: this.content },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+    this.content = ""; // Clear the input after sending
+  }
+
+  adjustChatSpacing() {
+    console.log("TODO: adjustChatSpacing");
+  }
+
+  _sendChatClicked() {
+    this.sendChatMessage();
+    this.chatInput.focus(); // Refocus the input after sending
+  }
+
+  _chatInputKeyDown(event: KeyboardEvent) {
+    // Send message if Enter is pressed without Shift key
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault(); // Prevent default newline
+      this.sendChatMessage();
+    }
+  }
+
+  _chatInputChanged(event) {
+    this.content = event.target.value;
+    requestAnimationFrame(() => this.adjustChatSpacing());
+  }
+
+  @query("#chatInput")
+  private chatInput: HTMLTextAreaElement;
+
+  protected firstUpdated(): void {
+    if (this.chatInput) {
+      this.chatInput.focus();
+    }
+  }
+
+  render() {
+    return html`
+      <div class="chat-container">
+        <div class="chat-input-wrapper">
+          <textarea
+            id="chatInput"
+            placeholder="Type your message here and press Enter to send..."
+            autofocus
+            @keydown="${this._chatInputKeyDown}"
+            @input="${this._chatInputChanged}"
+            .value=${this.content || ""}
+          ></textarea>
+          <button @click="${this._sendChatClicked}" id="sendChatButton">
+            Send
+          </button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-chat-input": SketchChatInput;
+  }
+}
diff --git a/loop/webui/src/web-components/sketch-container-status.test.ts b/loop/webui/src/web-components/sketch-container-status.test.ts
new file mode 100644
index 0000000..3a898ee
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-container-status.test.ts
@@ -0,0 +1,151 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import "./sketch-container-status";
+import type { SketchContainerStatus } from "./sketch-container-status";
+import { State } from "../types";
+
+describe("SketchContainerStatus", () => {
+  // Mock complete state for testing
+  const mockCompleteState: State = {
+    hostname: "test-host",
+    working_dir: "/test/dir",
+    initial_commit: "abcdef1234567890",
+    message_count: 42,
+    os: "linux",
+    title: "Test Session",
+    total_usage: {
+      input_tokens: 1000,
+      output_tokens: 2000,
+      cache_read_input_tokens: 300,
+      cache_creation_input_tokens: 400,
+      total_cost_usd: 0.25
+    }
+  };
+
+  it("renders with complete state data", async () => {
+    const el: SketchContainerStatus = await fixture(html`
+      <sketch-container-status .state=${mockCompleteState}></sketch-container-status>
+    `);
+
+    // Check that all expected elements exist
+    expect(el.shadowRoot!.querySelector("#hostname")).to.exist;
+    expect(el.shadowRoot!.querySelector("#workingDir")).to.exist;
+    expect(el.shadowRoot!.querySelector("#initialCommit")).to.exist;
+    expect(el.shadowRoot!.querySelector("#messageCount")).to.exist;
+    expect(el.shadowRoot!.querySelector("#inputTokens")).to.exist;
+    expect(el.shadowRoot!.querySelector("#outputTokens")).to.exist;
+    expect(el.shadowRoot!.querySelector("#cacheReadInputTokens")).to.exist;
+    expect(el.shadowRoot!.querySelector("#cacheCreationInputTokens")).to.exist;
+    expect(el.shadowRoot!.querySelector("#totalCost")).to.exist;
+
+    // Verify content of displayed elements
+    expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal("test-host");
+    expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal("/test/dir");
+    expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("abcdef12"); // Only first 8 chars
+    expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal("42");
+    expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal("1000");
+    expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal("2000");
+    expect(el.shadowRoot!.querySelector("#cacheReadInputTokens")!.textContent).to.equal("300");
+    expect(el.shadowRoot!.querySelector("#cacheCreationInputTokens")!.textContent).to.equal("400");
+    expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal("$0.25");
+  });
+
+  it("renders with undefined state", async () => {
+    const el: SketchContainerStatus = await fixture(html`
+      <sketch-container-status></sketch-container-status>
+    `);
+
+    // Elements should exist but be empty
+    expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal("$0.00");
+  });
+
+  it("renders with partial state data", async () => {
+    const partialState: Partial<State> = {
+      hostname: "partial-host",
+      message_count: 10,
+      os: "linux",
+      title: "Partial Test",
+      total_usage: {
+        input_tokens: 500
+      }
+    };
+
+    const el: SketchContainerStatus = await fixture(html`
+      <sketch-container-status .state=${partialState as State}></sketch-container-status>
+    `);
+
+    // Check that elements with data are properly populated
+    expect(el.shadowRoot!.querySelector("#hostname")!.textContent).to.equal("partial-host");
+    expect(el.shadowRoot!.querySelector("#messageCount")!.textContent).to.equal("10");
+    expect(el.shadowRoot!.querySelector("#inputTokens")!.textContent).to.equal("500");
+    
+    // Check that elements without data are empty
+    expect(el.shadowRoot!.querySelector("#workingDir")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#outputTokens")!.textContent).to.equal("");
+    expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal("$0.00");
+  });
+
+  it("handles cost formatting correctly", async () => {
+    // Test with different cost values
+    const testCases = [
+      { cost: 0, expected: "$0.00" },
+      { cost: 0.1, expected: "$0.10" },
+      { cost: 1.234, expected: "$1.23" },
+      { cost: 10.009, expected: "$10.01" }
+    ];
+
+    for (const testCase of testCases) {
+      const stateWithCost = {
+        ...mockCompleteState,
+        total_usage: {
+          ...mockCompleteState.total_usage,
+          total_cost_usd: testCase.cost
+        }
+      };
+
+      const el: SketchContainerStatus = await fixture(html`
+        <sketch-container-status .state=${stateWithCost}></sketch-container-status>
+      `);
+
+      expect(el.shadowRoot!.querySelector("#totalCost")!.textContent).to.equal(testCase.expected);
+    }
+  });
+
+  it("truncates commit hash to 8 characters", async () => {
+    const stateWithLongCommit = {
+      ...mockCompleteState,
+      initial_commit: "1234567890abcdef1234567890abcdef12345678"
+    };
+
+    const el: SketchContainerStatus = await fixture(html`
+      <sketch-container-status .state=${stateWithLongCommit}></sketch-container-status>
+    `);
+
+    expect(el.shadowRoot!.querySelector("#initialCommit")!.textContent).to.equal("12345678");
+  });
+
+  it("has correct link elements", async () => {
+    const el: SketchContainerStatus = await fixture(html`
+      <sketch-container-status .state=${mockCompleteState}></sketch-container-status>
+    `);
+
+    const links = Array.from(el.shadowRoot!.querySelectorAll('a'));
+    expect(links.length).to.equal(2);
+    
+    // Check for logs link
+    const logsLink = links.find(link => link.textContent === 'Logs');
+    expect(logsLink).to.exist;
+    expect(logsLink!.getAttribute('href')).to.equal('logs');
+    
+    // Check for download link
+    const downloadLink = links.find(link => link.textContent === 'Download');
+    expect(downloadLink).to.exist;
+    expect(downloadLink!.getAttribute('href')).to.equal('download');
+  });
+});
diff --git a/loop/webui/src/web-components/sketch-container-status.ts b/loop/webui/src/web-components/sketch-container-status.ts
new file mode 100644
index 0000000..c0f9626
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-container-status.ts
@@ -0,0 +1,150 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { State } from "../types";
+
+@customElement("sketch-container-status")
+export class SketchContainerStatus extends LitElement {
+  // Header bar: Container status details
+
+  @property()
+  state: State;
+
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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`
+    .info-card {
+      background: #f9f9f9;
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+      display: none; /* Hidden in the combined layout */
+    }
+
+    .info-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      background: #f9f9f9;
+      border-radius: 4px;
+      padding: 4px 10px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      flex: 1;
+    }
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      margin-right: 10px;
+      font-size: 13px;
+    }
+
+    .info-label {
+      font-size: 11px;
+      color: #555;
+      margin-right: 3px;
+      font-weight: 500;
+    }
+
+    .info-value {
+      font-size: 11px;
+      font-weight: 600;
+    }
+
+    .cost {
+      color: #2e7d32;
+    }
+
+    .info-item a {
+      --tw-text-opacity: 1;
+      color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+      text-decoration: inherit;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+    // register event listeners
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // unregister event listeners
+  }
+
+  render() {
+    return html`
+      <div class="info-grid">
+        <div class="info-item">
+          <a href="logs">Logs</a>
+        </div>
+        <div class="info-item">
+          <a href="download">Download</a>
+        </div>
+        <div class="info-item">
+          <span id="hostname" class="info-value">${this.state?.hostname}</span>
+        </div>
+        <div class="info-item">
+          <span id="workingDir" class="info-value"
+            >${this.state?.working_dir}</span
+          >
+        </div>
+        <div class="info-item">
+          <span class="info-label">Commit:</span>
+          <span id="initialCommit" class="info-value"
+            >${this.state?.initial_commit?.substring(0, 8)}</span
+          >
+        </div>
+        <div class="info-item">
+          <span class="info-label">Msgs:</span>
+          <span id="messageCount" class="info-value"
+            >${this.state?.message_count}</span
+          >
+        </div>
+        <div class="info-item">
+          <span class="info-label">In:</span>
+          <span id="inputTokens" class="info-value"
+            >${this.state?.total_usage?.input_tokens}</span
+          >
+        </div>
+        <div class="info-item">
+          <span class="info-label">Cache Read:</span>
+          <span id="cacheReadInputTokens" class="info-value"
+            >${this.state?.total_usage?.cache_read_input_tokens}</span
+          >
+        </div>
+        <div class="info-item">
+          <span class="info-label">Cache Create:</span>
+          <span id="cacheCreationInputTokens" class="info-value"
+            >${this.state?.total_usage?.cache_creation_input_tokens}</span
+          >
+        </div>
+        <div class="info-item">
+          <span class="info-label">Out:</span>
+          <span id="outputTokens" class="info-value"
+            >${this.state?.total_usage?.output_tokens}</span
+          >
+        </div>
+        <div class="info-item">
+          <span class="info-label">Cost:</span>
+          <span id="totalCost" class="info-value cost">$${(this.state?.total_usage?.total_cost_usd || 0).toFixed(2)}</span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-container-status": SketchContainerStatus;
+  }
+}
diff --git a/loop/webui/src/web-components/sketch-diff-view.ts b/loop/webui/src/web-components/sketch-diff-view.ts
new file mode 100644
index 0000000..562eb1e
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-diff-view.ts
@@ -0,0 +1,566 @@
+import {css, html, LitElement, unsafeCSS} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import * as Diff2Html from "diff2html";
+
+@customElement('sketch-diff-view')
+export class SketchDiffView extends LitElement {
+  // Current commit hash being viewed
+  @property({type: String})
+  commitHash: string = "";
+
+  // Selected line in the diff for commenting
+  @state()
+  private selectedDiffLine: string | null = null;
+
+  // View format (side-by-side or line-by-line)
+  @state()
+  private viewFormat: "side-by-side" | "line-by-line" = "side-by-side";
+
+  static styles = css`
+    .diff-view {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100%;
+    }
+    
+    .diff-container {
+      height: 100%;
+      overflow: auto;
+      flex: 1;
+      padding: 0 1rem;
+    }
+    
+    #diff-view-controls {
+      display: flex;
+      justify-content: flex-end;
+      padding: 10px;
+      background: #f8f8f8;
+      border-bottom: 1px solid #eee;
+    }
+    
+    .diff-view-format {
+      display: flex;
+      gap: 10px;
+    }
+    
+    .diff-view-format label {
+      cursor: pointer;
+    }
+    
+    .diff2html-content {
+      font-family: var(--monospace-font);
+      position: relative;
+    }
+    
+    /* Comment box styles */
+    .diff-comment-box {
+      position: fixed;
+      bottom: 80px;
+      right: 20px;
+      width: 400px;
+      background-color: white;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 16px;
+      z-index: 1000;
+    }
+    
+    .diff-comment-box h3 {
+      margin-top: 0;
+      margin-bottom: 10px;
+      font-size: 16px;
+    }
+    
+    .selected-line {
+      margin-bottom: 10px;
+      font-size: 14px;
+    }
+    
+    .selected-line pre {
+      padding: 6px;
+      background: #f5f5f5;
+      border: 1px solid #eee;
+      border-radius: 3px;
+      margin: 5px 0;
+      max-height: 100px;
+      overflow: auto;
+      font-family: var(--monospace-font);
+      font-size: 13px;
+      white-space: pre-wrap;
+    }
+    
+    #diffCommentInput {
+      width: 100%;
+      height: 100px;
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      resize: vertical;
+      font-family: inherit;
+      margin-bottom: 10px;
+    }
+    
+    .diff-comment-buttons {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+    
+    .diff-comment-buttons button {
+      padding: 6px 12px;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+      background: white;
+      cursor: pointer;
+    }
+    
+    .diff-comment-buttons button:hover {
+      background: #f5f5f5;
+    }
+    
+    .diff-comment-buttons button#submitDiffComment {
+      background: #1a73e8;
+      color: white;
+      border-color: #1a73e8;
+    }
+    
+    .diff-comment-buttons button#submitDiffComment:hover {
+      background: #1967d2;
+    }
+    
+    /* Styles for the comment button on diff lines */
+    .d2h-gutter-comment-button {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      visibility: hidden;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      line-height: 13px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+      color: #666;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    
+    tr:hover .d2h-gutter-comment-button {
+      visibility: visible;
+    }
+    
+    .d2h-gutter-comment-button:hover {
+      background: white;
+      color: #333;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+  `;
+  
+  constructor() {
+    super();
+  }
+  
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+    
+    // Load the diff2html CSS if needed
+    this.loadDiff2HtmlCSS();
+  }
+  
+  // Load diff2html CSS into the shadow DOM
+  private async loadDiff2HtmlCSS() {
+    try {
+      // Check if diff2html styles are already loaded
+      const styleId = 'diff2html-styles';
+      if (this.shadowRoot?.getElementById(styleId)) {
+        return; // Already loaded
+      }
+      
+      // Fetch the diff2html CSS
+      const response = await fetch('static/diff2html.min.css');
+      
+      if (!response.ok) {
+        console.error(`Failed to load diff2html CSS: ${response.status} ${response.statusText}`);
+        return;
+      }
+      
+      const cssText = await response.text();
+      
+      // Create a style element and append to shadow DOM
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = cssText;
+      this.shadowRoot?.appendChild(style);
+      
+      console.log('diff2html CSS loaded into shadow DOM');
+    } catch (error) {
+      console.error('Error loading diff2html CSS:', error);
+    }
+  }
+  
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  
+  // Method called to load diff content
+  async loadDiffContent() {
+    // Wait for the component to be rendered
+    await this.updateComplete;
+    
+    const diff2htmlContent = this.shadowRoot?.getElementById("diff2htmlContent");
+    if (!diff2htmlContent) return;
+    
+    try {
+      // Show loading state
+      diff2htmlContent.innerHTML = "Loading enhanced diff...";
+      
+      // Build the diff URL - include commit hash if specified
+      const diffUrl = this.commitHash ? `diff?commit=${this.commitHash}` : "diff";
+      
+      // Fetch the diff from the server
+      const response = await fetch(diffUrl);
+      
+      if (!response.ok) {
+        throw new Error(
+          `Server returned ${response.status}: ${response.statusText}`,
+        );
+      }
+      
+      const diffText = await response.text();
+      
+      if (!diffText || diffText.trim() === "") {
+        diff2htmlContent.innerHTML =
+          "<span style='color: #666; font-style: italic;'>No changes detected since conversation started.</span>";
+        return;
+      }
+      
+      // Render the diff using diff2html
+      const diffHtml = Diff2Html.html(diffText, {
+        outputFormat: this.viewFormat,
+        drawFileList: true,
+        matching: "lines",
+        renderNothingWhenEmpty: false,
+        colorScheme: "light" as any, // Force light mode to match the rest of the UI
+      });
+      
+      // Insert the generated HTML
+      diff2htmlContent.innerHTML = diffHtml;
+      
+      // Add CSS styles to ensure we don't have double scrollbars
+      const d2hFiles = diff2htmlContent.querySelectorAll(".d2h-file-wrapper");
+      d2hFiles.forEach((file) => {
+        const contentElem = file.querySelector(".d2h-files-diff");
+        if (contentElem) {
+          // Remove internal scrollbar - the outer container will handle scrolling
+          (contentElem as HTMLElement).style.overflow = "visible";
+          (contentElem as HTMLElement).style.maxHeight = "none";
+        }
+      });
+      
+      // Add click event handlers to each code line for commenting
+      this.setupDiffLineComments();
+      
+    } catch (error) {
+      console.error("Error loading diff2html content:", error);
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      diff2htmlContent.innerHTML = `<span style='color: #dc3545;'>Error loading enhanced diff: ${errorMessage}</span>`;
+    }
+  }
+  
+  // Handle view format changes
+  private handleViewFormatChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.checked) {
+      this.viewFormat = input.value as "side-by-side" | "line-by-line";
+      this.loadDiffContent();
+    }
+  }
+  
+  /**
+   * Setup handlers for diff code lines to enable commenting
+   */
+  private setupDiffLineComments(): void {
+    const diff2htmlContent = this.shadowRoot?.getElementById("diff2htmlContent");
+    if (!diff2htmlContent) return;
+    
+    console.log("Setting up diff line comments");
+    
+    // Add plus buttons to each code line
+    this.addCommentButtonsToCodeLines();
+    
+    // Use event delegation for handling clicks on plus buttons
+    diff2htmlContent.addEventListener("click", (event) => {
+      const target = event.target as HTMLElement;
+      
+      // Only respond to clicks on the plus button
+      if (target.classList.contains("d2h-gutter-comment-button")) {
+        // Find the parent row first
+        const row = target.closest("tr");
+        if (!row) return;
+        
+        // Then find the code line in that row
+        const codeLine = row.querySelector(".d2h-code-side-line") || row.querySelector(".d2h-code-line");
+        if (!codeLine) return;
+        
+        // Get the line text content
+        const lineContent = codeLine.querySelector(".d2h-code-line-ctn");
+        if (!lineContent) return;
+        
+        const lineText = lineContent.textContent?.trim() || "";
+        
+        // Get file name to add context
+        const fileHeader = codeLine
+          .closest(".d2h-file-wrapper")
+          ?.querySelector(".d2h-file-name");
+        const fileName = fileHeader
+          ? fileHeader.textContent?.trim()
+          : "Unknown file";
+        
+        // Get line number if available
+        const lineNumElem = codeLine
+          .closest("tr")
+          ?.querySelector(".d2h-code-side-linenumber");
+        const lineNum = lineNumElem ? lineNumElem.textContent?.trim() : "";
+        const lineInfo = lineNum ? `Line ${lineNum}: ` : "";
+        
+        // Format the line for the comment box with file context and line number
+        const formattedLine = `${fileName} ${lineInfo}${lineText}`;
+        
+        console.log("Comment button clicked for line: ", formattedLine);
+        
+        // Open the comment box with this line
+        this.openDiffCommentBox(formattedLine);
+        
+        // Prevent event from bubbling up
+        event.stopPropagation();
+      }
+    });
+  }
+  
+  /**
+   * Add plus buttons to each table row in the diff for commenting
+   */
+  private addCommentButtonsToCodeLines(): void {
+    const diff2htmlContent = this.shadowRoot?.getElementById("diff2htmlContent");
+    if (!diff2htmlContent) return;
+    
+    // Target code lines first, then find their parent rows
+    const codeLines = diff2htmlContent.querySelectorAll(
+      ".d2h-code-side-line, .d2h-code-line"
+    );
+    
+    // Create a Set to store unique rows to avoid duplicates
+    const rowsSet = new Set<HTMLElement>();
+    
+    // Get all rows that contain code lines
+    codeLines.forEach(line => {
+      const row = line.closest('tr');
+      if (row) rowsSet.add(row as HTMLElement);
+    });
+    
+    // Convert Set back to array for processing
+    const codeRows = Array.from(rowsSet);
+    
+    codeRows.forEach((row) => {
+      const rowElem = row as HTMLElement;
+      
+      // Skip info lines without actual code (e.g., "file added")
+      if (rowElem.querySelector(".d2h-info")) {
+        return;
+      }
+      
+      // Find the code line number element (first TD in the row)
+      const lineNumberCell = rowElem.querySelector(
+        ".d2h-code-side-linenumber, .d2h-code-linenumber"
+      );
+      
+      if (!lineNumberCell) return;
+      
+      // Create the plus button
+      const plusButton = document.createElement("span");
+      plusButton.className = "d2h-gutter-comment-button";
+      plusButton.innerHTML = "+";
+      plusButton.title = "Add a comment on this line";
+      
+      // Add button to the line number cell for proper positioning
+      (lineNumberCell as HTMLElement).style.position = "relative"; // Ensure positioning context
+      lineNumberCell.appendChild(plusButton);
+    });
+  }
+  
+  /**
+   * Open the comment box for a selected diff line
+   */
+  private openDiffCommentBox(lineText: string): void {
+    // Make sure the comment box div exists
+    const commentBoxId = "diffCommentBox";
+    let commentBox = this.shadowRoot?.getElementById(commentBoxId);
+    
+    // If it doesn't exist, create it
+    if (!commentBox) {
+      commentBox = document.createElement("div");
+      commentBox.id = commentBoxId;
+      commentBox.className = "diff-comment-box";
+      
+      // Create the comment box contents
+      commentBox.innerHTML = `
+        <h3>Add a comment</h3>
+        <div class="selected-line">
+          Line:
+          <pre id="selectedLine"></pre>
+        </div>
+        <textarea
+          id="diffCommentInput"
+          placeholder="Enter your comment about this line..."
+        ></textarea>
+        <div class="diff-comment-buttons">
+          <button id="cancelDiffComment">Cancel</button>
+          <button id="submitDiffComment">Add Comment</button>
+        </div>
+      `;
+      
+      this.shadowRoot?.appendChild(commentBox);
+    }
+    
+    // Store the selected line
+    this.selectedDiffLine = lineText;
+    
+    // Display the line in the comment box
+    const selectedLine = this.shadowRoot?.getElementById("selectedLine");
+    if (selectedLine) {
+      selectedLine.textContent = lineText;
+    }
+    
+    // Reset the comment input
+    const commentInput = this.shadowRoot?.getElementById(
+      "diffCommentInput"
+    ) as HTMLTextAreaElement;
+    if (commentInput) {
+      commentInput.value = "";
+    }
+    
+    // Show the comment box
+    if (commentBox) {
+      commentBox.style.display = "block";
+    }
+    
+    // Add event listeners for submit and cancel buttons
+    const submitButton = this.shadowRoot?.getElementById("submitDiffComment");
+    if (submitButton) {
+      submitButton.onclick = () => this.submitDiffComment();
+    }
+    
+    const cancelButton = this.shadowRoot?.getElementById("cancelDiffComment");
+    if (cancelButton) {
+      cancelButton.onclick = () => this.closeDiffCommentBox();
+    }
+    
+    // Focus on the comment input
+    if (commentInput) {
+      commentInput.focus();
+    }
+  }
+  
+  /**
+   * Close the diff comment box without submitting
+   */
+  private closeDiffCommentBox(): void {
+    const commentBox = this.shadowRoot?.getElementById("diffCommentBox");
+    if (commentBox) {
+      commentBox.style.display = "none";
+    }
+    this.selectedDiffLine = null;
+  }
+  
+  /**
+   * Submit a comment on a diff line
+   */
+  private submitDiffComment(): void {
+    const commentInput = this.shadowRoot?.getElementById(
+      "diffCommentInput"
+    ) as HTMLTextAreaElement;
+    
+    if (!commentInput) return;
+    
+    const comment = commentInput.value.trim();
+    
+    // Validate inputs
+    if (!this.selectedDiffLine || !comment) {
+      alert("Please select a line and enter a comment.");
+      return;
+    }
+    
+    // Format the comment in a readable way
+    const formattedComment = `\`\`\`\n${this.selectedDiffLine}\n\`\`\`\n\n${comment}`;
+    
+    // Dispatch a custom event with the formatted comment
+    const event = new CustomEvent('diff-comment', {
+      detail: { comment: formattedComment },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+    
+    // Close only the comment box but keep the diff view open
+    this.closeDiffCommentBox();
+  }
+  
+  // Clear the current state
+  public clearState(): void {
+    this.commitHash = "";
+  }
+  
+  // Show diff for a specific commit
+  public showCommitDiff(commitHash: string): void {
+    // Store the commit hash
+    this.commitHash = commitHash;
+    // Load the diff content
+    this.loadDiffContent();
+  }
+  
+  render() {
+    return html`
+      <div class="diff-view">
+        <div class="diff-container">
+          <div id="diff-view-controls">
+            <div class="diff-view-format">
+              <label>
+                <input 
+                  type="radio" 
+                  name="diffViewFormat" 
+                  value="side-by-side" 
+                  ?checked=${this.viewFormat === "side-by-side"}
+                  @change=${this.handleViewFormatChange}
+                > Side-by-side
+              </label>
+              <label>
+                <input 
+                  type="radio" 
+                  name="diffViewFormat" 
+                  value="line-by-line"
+                  ?checked=${this.viewFormat === "line-by-line"}
+                  @change=${this.handleViewFormatChange}
+                > Line-by-line
+              </label>
+            </div>
+          </div>
+          <div id="diff2htmlContent" class="diff2html-content"></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-diff-view": SketchDiffView;
+  }
+}
diff --git a/loop/webui/src/web-components/sketch-network-status.test.ts b/loop/webui/src/web-components/sketch-network-status.test.ts
new file mode 100644
index 0000000..a580a8f
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-network-status.test.ts
@@ -0,0 +1,68 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import "./sketch-network-status";
+import type { SketchNetworkStatus } from "./sketch-network-status";
+
+describe("SketchNetworkStatus", () => {
+  it("displays the correct connection status when connected", async () => {
+    const el: SketchNetworkStatus = await fixture(html`
+      <sketch-network-status
+        connection="connected"
+        message="Connected to server"
+      ></sketch-network-status>
+    `);
+
+    const indicator = el.shadowRoot!.querySelector(".polling-indicator");
+    const statusText = el.shadowRoot!.querySelector(".status-text");
+
+    expect(indicator).to.exist;
+    expect(statusText).to.exist;
+    expect(indicator!.classList.contains("active")).to.be.true;
+    expect(statusText!.textContent).to.equal("Connected to server");
+  });
+
+  it("displays the correct connection status when disconnected", async () => {
+    const el: SketchNetworkStatus = await fixture(html`
+      <sketch-network-status
+        connection="disconnected"
+        message="Disconnected"
+      ></sketch-network-status>
+    `);
+
+    const indicator = el.shadowRoot!.querySelector(".polling-indicator");
+
+    expect(indicator).to.exist;
+    expect(indicator!.classList.contains("error")).to.be.true;
+  });
+
+
+  it("displays the correct connection status when disabled", async () => {
+    const el: SketchNetworkStatus = await fixture(html`
+      <sketch-network-status
+        connection="disabled"
+        message="Disabled"
+      ></sketch-network-status>
+    `);
+
+    const indicator = el.shadowRoot!.querySelector(".polling-indicator");
+
+    expect(indicator).to.exist;
+    expect(indicator!.classList.contains("error")).to.be.false;
+    expect(indicator!.classList.contains("active")).to.be.false;
+  });
+
+  it("displays error message when provided", async () => {
+    const errorMsg = "Connection error";
+    const el: SketchNetworkStatus = await fixture(html`
+      <sketch-network-status
+        connection="disconnected"
+        message="Disconnected"
+        error="${errorMsg}"
+      ></sketch-network-status>
+    `);
+
+    const statusText = el.shadowRoot!.querySelector(".status-text");
+
+    expect(statusText).to.exist;
+    expect(statusText!.textContent).to.equal(errorMsg);
+  });
+});
diff --git a/loop/webui/src/web-components/sketch-network-status.ts b/loop/webui/src/web-components/sketch-network-status.ts
new file mode 100644
index 0000000..4b01e5e
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-network-status.ts
@@ -0,0 +1,101 @@
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {DataManager, ConnectionStatus} from '../data';
+import {State, TimelineMessage} from '../types';
+import './sketch-container-status';
+
+@customElement('sketch-network-status')
+export class SketchNetworkStatus extends LitElement {
+  // Header bar: view mode buttons
+
+  @property()
+  connection: string;
+  @property()
+  message: string;
+  @property()
+  error: string;
+  
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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`
+.status-container {
+  display: flex;
+  align-items: center;
+}
+
+.polling-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 4px;
+  background-color: #ccc;
+}
+
+.polling-indicator.active {
+  background-color: #4caf50;
+  animation: pulse 1.5s infinite;
+}
+
+.polling-indicator.error {
+  background-color: #f44336;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.status-text {
+  font-size: 11px;
+  color: #666;
+}
+`;
+
+  constructor() {
+    super();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback(); 
+  }
+
+  indicator() {
+    if (this.connection === "disabled") {
+      return '';
+    }
+    return this.connection === "connected" ? "active": "error";
+  }
+
+  render() {
+    return html`
+        <div class="status-container">
+          <span id="pollingIndicator" class="polling-indicator ${this.indicator()}"></span>
+          <span id="statusText" class="status-text">${this.error || this.message}</span>
+        </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-network-status": SketchNetworkStatus;
+  }
+}
\ No newline at end of file
diff --git a/loop/webui/src/timeline/terminal.ts b/loop/webui/src/web-components/sketch-terminal.ts
similarity index 73%
rename from loop/webui/src/timeline/terminal.ts
rename to loop/webui/src/web-components/sketch-terminal.ts
index fbe9a7d..788521d 100644
--- a/loop/webui/src/timeline/terminal.ts
+++ b/loop/webui/src/web-components/sketch-terminal.ts
@@ -1,10 +1,14 @@
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 
-/**
- * Class to handle terminal functionality in the timeline UI.
- */
-export class TerminalHandler {
+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-terminal')
+export class SketchTerminal extends LitElement {
   // Terminal instance
   private terminal: Terminal | null = null;
   // Terminal fit addon for handling resize
@@ -17,20 +21,94 @@
   private terminalInputQueue: string[] = [];
   // Flag to track if we're currently processing a terminal input
   private processingTerminalInput: boolean = false;
-  // Current view mode (needed for resize handling)
-  private viewMode: string = "chat";
 
-  /**
-   * Constructor for TerminalHandler
-   */
-  constructor() {}
+  static styles = css`
+/* Terminal View Styles */
+.terminal-view {
+  width: 100%;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+  height: 70vh;
+}
 
-  /**
-   * Sets the current view mode
-   * @param mode The current view mode
-   */
-  public setViewMode(mode: string): void {
-    this.viewMode = mode;
+.terminal-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+`;
+
+  constructor() {
+    super();
+    this._resizeHandler = this._resizeHandler.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadXtermlCSS();
+    // Setup resize handler
+    window.addEventListener("resize", this._resizeHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    window.removeEventListener("resize", this._resizeHandler);
+
+    this.closeTerminalConnections();
+
+    if (this.terminal) {
+      this.terminal.dispose();
+      this.terminal = null;
+    }
+    this.fitAddon = null;
+  }
+
+  firstUpdated() {
+    this.initializeTerminal();
+  }
+
+  _resizeHandler() {
+    if (this.fitAddon) {
+      this.fitAddon.fit();
+      // Send resize information to server
+      this.sendTerminalResize();
+    }
+  }
+
+  // Load xterm CSS into the shadow DOM
+  private async loadXtermlCSS() {
+    try {
+      // Check if diff2html styles are already loaded
+      const styleId = 'xterm-styles';
+      if (this.shadowRoot?.getElementById(styleId)) {
+        return; // Already loaded
+      }
+
+      // Fetch the diff2html CSS
+      const response = await fetch('static/xterm.css');
+
+      if (!response.ok) {
+        console.error(`Failed to load xterm CSS: ${response.status} ${response.statusText}`);
+        return;
+      }
+
+      const cssText = await response.text();
+
+      // Create a style element and append to shadow DOM
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = cssText;
+      this.renderRoot?.appendChild(style);
+
+      console.log('xterm CSS loaded into shadow DOM');
+    } catch (error) {
+      console.error('Error loading xterm CSS:', error);
+    }
   }
 
   /**
@@ -38,7 +116,7 @@
    * @param terminalContainer The DOM element to contain the terminal
    */
   public async initializeTerminal(): Promise<void> {
-    const terminalContainer = document.getElementById("terminalContainer");
+    const terminalContainer = this.renderRoot.querySelector("#terminalContainer") as HTMLElement;
 
     if (!terminalContainer) {
       console.error("Terminal container not found");
@@ -81,15 +159,6 @@
     // Fit the terminal to the container
     this.fitAddon.fit();
 
-    // Setup resize handler
-    window.addEventListener("resize", () => {
-      if (this.viewMode === "terminal" && this.fitAddon) {
-        this.fitAddon.fit();
-        // Send resize information to server
-        this.sendTerminalResize();
-      }
-    });
-
     // Focus the terminal
     this.terminal.focus();
   }
@@ -111,13 +180,13 @@
       const baseUrl = window.location.pathname.endsWith('/') ? '.' : '.';
       const eventsUrl = `${baseUrl}/terminal/events/${this.terminalId}`;
       this.terminalEventSource = new EventSource(eventsUrl);
-      
+
       // Handle SSE events
       this.terminalEventSource.onopen = () => {
         console.log("Terminal SSE connection opened");
         this.sendTerminalResize();
       };
-      
+
       this.terminalEventSource.onmessage = (event) => {
         if (this.terminal) {
           // Decode base64 data before writing to terminal
@@ -131,7 +200,7 @@
           }
         }
       };
-      
+
       this.terminalEventSource.onerror = (error) => {
         console.error("Terminal SSE error:", error);
         if (this.terminal) {
@@ -142,7 +211,7 @@
           this.closeTerminalConnections();
         }
       };
-      
+
       // Send key inputs to the server via POST requests
       if (this.terminal) {
         this.terminal.onData((data) => {
@@ -174,7 +243,7 @@
   private async sendTerminalInput(data: string): Promise<void> {
     // Add the data to the queue
     this.terminalInputQueue.push(data);
-    
+
     // If we're not already processing inputs, start processing
     if (!this.processingTerminalInput) {
       await this.processTerminalInputQueue();
@@ -189,17 +258,17 @@
       this.processingTerminalInput = false;
       return;
     }
-    
+
     this.processingTerminalInput = true;
-    
+
     // Concatenate all available inputs from the queue into a single request
     let combinedData = '';
-    
+
     // Take all currently available items from the queue
     while (this.terminalInputQueue.length > 0) {
       combinedData += this.terminalInputQueue.shift()!;
     }
-    
+
     try {
       // Use relative URL based on current location
       const baseUrl = window.location.pathname.endsWith('/') ? '.' : '.';
@@ -210,14 +279,14 @@
           'Content-Type': 'text/plain'
         }
       });
-      
+
       if (!response.ok) {
         console.error(`Failed to send terminal input: ${response.status} ${response.statusText}`);
       }
     } catch (error) {
       console.error("Error sending terminal input:", error);
     }
-    
+
     // Continue processing the queue (for any new items that may have been added)
     await this.processTerminalInputQueue();
   }
@@ -246,7 +315,7 @@
           'Content-Type': 'application/json'
         }
       });
-      
+
       if (!response.ok) {
         console.error(`Failed to send terminal resize: ${response.status} ${response.statusText}`);
       }
@@ -255,15 +324,18 @@
     }
   }
 
-  /**
-   * Clean up resources when component is destroyed
-   */
-  public dispose(): void {
-    this.closeTerminalConnections();
-    if (this.terminal) {
-      this.terminal.dispose();
-      this.terminal = null;
-    }
-    this.fitAddon = null;
+
+  render() {
+    return html`
+      <div id="terminalView" class="terminal-view">
+         <div id="terminalContainer" class="terminal-container"></div>
+      </div>
+    `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-terminal": SketchTerminal;
+  }
+}
\ No newline at end of file
diff --git a/loop/webui/src/web-components/sketch-timeline-message.test.ts b/loop/webui/src/web-components/sketch-timeline-message.test.ts
new file mode 100644
index 0000000..3f30696
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-timeline-message.test.ts
@@ -0,0 +1,265 @@
+import { html, fixture, expect, oneEvent } from "@open-wc/testing";
+import "./sketch-timeline-message";
+import type { SketchTimelineMessage } from "./sketch-timeline-message";
+import { TimelineMessage, ToolCall, GitCommit, Usage } from "../types";
+
+describe("SketchTimelineMessage", () => {
+  // Helper function to create mock timeline messages
+  function createMockMessage(props: Partial<TimelineMessage> = {}): TimelineMessage {
+    return {
+      idx: props.idx || 0,
+      type: props.type || "agent",
+      content: props.content || "Hello world",
+      timestamp: props.timestamp || "2023-05-15T12:00:00Z",
+      elapsed: props.elapsed || 1500000000, // 1.5 seconds in nanoseconds
+      end_of_turn: props.end_of_turn || false,
+      conversation_id: props.conversation_id || "conv123",
+      tool_calls: props.tool_calls || [],
+      commits: props.commits || [],
+      usage: props.usage,
+      ...props
+    };
+  }
+
+  it("renders with basic message content", async () => {
+    const message = createMockMessage({
+      type: "agent",
+      content: "This is a test message"
+    });
+
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${message}
+      ></sketch-timeline-message>
+    `);
+
+    const messageContent = el.shadowRoot!.querySelector(".message-text");
+    expect(messageContent).to.exist;
+    expect(messageContent!.textContent!.trim()).to.include("This is a test message");
+  });
+
+  it("renders with correct message type classes", async () => {
+    const messageTypes = ["user", "agent", "tool", "error"];
+    
+    for (const type of messageTypes) {
+      const message = createMockMessage({ type });
+      
+      const el: SketchTimelineMessage = await fixture(html`
+        <sketch-timeline-message
+          .message=${message}
+        ></sketch-timeline-message>
+      `);
+      
+      const messageElement = el.shadowRoot!.querySelector(".message");
+      expect(messageElement).to.exist;
+      expect(messageElement!.classList.contains(type)).to.be.true;
+    }
+  });
+
+  it("renders end-of-turn marker correctly", async () => {
+    const message = createMockMessage({
+      end_of_turn: true
+    });
+
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${message}
+      ></sketch-timeline-message>
+    `);
+
+    const messageElement = el.shadowRoot!.querySelector(".message");
+    expect(messageElement).to.exist;
+    expect(messageElement!.classList.contains("end-of-turn")).to.be.true;
+  });
+
+  it("formats timestamps correctly", async () => {
+    const message = createMockMessage({
+      timestamp: "2023-05-15T12:00:00Z"
+    });
+
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${message}
+      ></sketch-timeline-message>
+    `);
+
+    const timestamp = el.shadowRoot!.querySelector(".message-timestamp");
+    expect(timestamp).to.exist;
+    // Should include a formatted date like "May 15, 2023"
+    expect(timestamp!.textContent).to.include("May 15, 2023");
+    // Should include elapsed time
+    expect(timestamp!.textContent).to.include("(1.50s)");
+  });
+
+  it("renders markdown content correctly", async () => {
+    const markdownContent = "# Heading\n\n- List item 1\n- List item 2\n\n`code block`";
+    const message = createMockMessage({
+      content: markdownContent
+    });
+
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${message}
+      ></sketch-timeline-message>
+    `);
+
+    const contentElement = el.shadowRoot!.querySelector(".markdown-content");
+    expect(contentElement).to.exist;
+    expect(contentElement!.innerHTML).to.include("<h1>Heading</h1>");
+    expect(contentElement!.innerHTML).to.include("<ul>");
+    expect(contentElement!.innerHTML).to.include("<li>List item 1</li>");
+    expect(contentElement!.innerHTML).to.include("<code>code block</code>");
+  });
+
+  it("displays usage information when available", async () => {
+    const usage: Usage = {
+      input_tokens: 150,
+      output_tokens: 300,
+      cost_usd: 0.025,
+      cache_read_input_tokens: 50
+    };
+    
+    const message = createMockMessage({
+      usage
+    });
+
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${message}
+      ></sketch-timeline-message>
+    `);
+
+    const usageElement = el.shadowRoot!.querySelector(".message-usage");
+    expect(usageElement).to.exist;
+    expect(usageElement!.textContent).to.include("In: 150");
+    expect(usageElement!.textContent).to.include("Out: 300");
+    expect(usageElement!.textContent).to.include("Cache: 50");
+    expect(usageElement!.textContent).to.include("$0.03");
+  });
+
+  it("renders commit information correctly", async () => {
+    const commits: GitCommit[] = [
+      {
+        hash: "1234567890abcdef",
+        subject: "Fix bug in application",
+        body: "This fixes a major bug in the application\n\nSigned-off-by: Developer",
+        pushed_branch: "main"
+      }
+    ];
+    
+    const message = createMockMessage({
+      commits
+    });
+
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${message}
+      ></sketch-timeline-message>
+    `);
+
+    const commitsContainer = el.shadowRoot!.querySelector(".commits-container");
+    expect(commitsContainer).to.exist;
+    
+    const commitHeader = commitsContainer!.querySelector(".commits-header");
+    expect(commitHeader).to.exist;
+    expect(commitHeader!.textContent).to.include("1 new commit");
+    
+    const commitHash = commitsContainer!.querySelector(".commit-hash");
+    expect(commitHash).to.exist;
+    expect(commitHash!.textContent).to.equal("12345678"); // First 8 chars
+    
+    const pushedBranch = commitsContainer!.querySelector(".pushed-branch");
+    expect(pushedBranch).to.exist;
+    expect(pushedBranch!.textContent).to.include("main");
+  });
+
+  it("dispatches show-commit-diff event when commit diff button is clicked", async () => {
+    const commits: GitCommit[] = [
+      {
+        hash: "1234567890abcdef",
+        subject: "Fix bug in application",
+        body: "This fixes a major bug in the application",
+        pushed_branch: "main"
+      }
+    ];
+    
+    const message = createMockMessage({
+      commits
+    });
+
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${message}
+      ></sketch-timeline-message>
+    `);
+
+    const diffButton = el.shadowRoot!.querySelector(".commit-diff-button") as HTMLButtonElement;
+    expect(diffButton).to.exist;
+    
+    // Set up listener for the event
+    setTimeout(() => diffButton!.click());
+    const { detail } = await oneEvent(el, "show-commit-diff");
+    
+    expect(detail).to.exist;
+    expect(detail.commitHash).to.equal("1234567890abcdef");
+  });
+
+  it("handles message type icon display correctly", async () => {
+    // First message of a type should show icon
+    const firstMessage = createMockMessage({
+      type: "user",
+      idx: 0
+    });
+    
+    // Second message of same type should not show icon
+    const secondMessage = createMockMessage({
+      type: "user",
+      idx: 1
+    });
+
+    // Test first message (should show icon)
+    const firstEl: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${firstMessage}
+      ></sketch-timeline-message>
+    `);
+
+    const firstIcon = firstEl.shadowRoot!.querySelector(".message-icon");
+    expect(firstIcon).to.exist;
+    expect(firstIcon!.textContent!.trim()).to.equal("U");
+
+    // Test second message with previous message of same type
+    const secondEl: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message
+        .message=${secondMessage}
+        .previousMessage=${firstMessage}
+      ></sketch-timeline-message>
+    `);
+
+    const secondIcon = secondEl.shadowRoot!.querySelector(".message-icon");
+    expect(secondIcon).to.not.exist;
+  });
+
+  it("formats numbers correctly", async () => {
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message></sketch-timeline-message>
+    `);
+
+    // Test accessing private method via the component instance
+    expect(el.formatNumber(1000)).to.equal("1,000");
+    expect(el.formatNumber(null, "N/A")).to.equal("N/A");
+    expect(el.formatNumber(undefined, "--")).to.equal("--");
+  });
+
+  it("formats currency values correctly", async () => {
+    const el: SketchTimelineMessage = await fixture(html`
+      <sketch-timeline-message></sketch-timeline-message>
+    `);
+
+    // Test with different precisions
+    expect(el.formatCurrency(10.12345, "$0.00", true)).to.equal("$10.1235"); // message level (4 decimals)
+    expect(el.formatCurrency(10.12345, "$0.00", false)).to.equal("$10.12"); // total level (2 decimals)
+    expect(el.formatCurrency(null, "N/A")).to.equal("N/A");
+    expect(el.formatCurrency(undefined, "--")).to.equal("--");
+  });
+});
diff --git a/loop/webui/src/web-components/sketch-timeline-message.ts b/loop/webui/src/web-components/sketch-timeline-message.ts
new file mode 100644
index 0000000..cd2985a
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-timeline-message.ts
@@ -0,0 +1,553 @@
+import { css, html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { customElement, property } from "lit/decorators.js";
+import { State, TimelineMessage } from "../types";
+import { marked, MarkedOptions } from "marked";
+import "./sketch-tool-calls";
+@customElement("sketch-timeline-message")
+export class SketchTimelineMessage extends LitElement {
+  @property()
+  message: TimelineMessage;
+
+  @property()
+  previousMessage: TimelineMessage;
+
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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`
+    .message {
+      position: relative;
+      margin-bottom: 5px;
+      padding-left: 30px;
+    }
+
+    .message-icon {
+      position: absolute;
+      left: 10px;
+      top: 0;
+      transform: translateX(-50%);
+      width: 16px;
+      height: 16px;
+      border-radius: 3px;
+      text-align: center;
+      line-height: 16px;
+      color: #fff;
+      font-size: 10px;
+    }
+
+    .message-content {
+      position: relative;
+      padding: 5px 10px;
+      background: #fff;
+      border-radius: 3px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      border-left: 3px solid transparent;
+    }
+
+    /* Copy button styles */
+    .message-text-container,
+    .tool-result-container {
+      position: relative;
+    }
+
+    .message-actions {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      z-index: 10;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .message-text-container:hover .message-actions,
+    .tool-result-container:hover .message-actions {
+      opacity: 1;
+    }
+
+    .copy-button {
+      background-color: rgba(255, 255, 255, 0.9);
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      color: #555;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 2px 8px;
+      transition: all 0.2s ease;
+    }
+
+    .copy-button:hover {
+      background-color: #f0f0f0;
+      color: #333;
+    }
+
+    /* Removed arrow decoration for a more compact look */
+
+    .message-header {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      margin-bottom: 3px;
+      font-size: 12px;
+    }
+
+    .message-timestamp {
+      font-size: 10px;
+      color: #888;
+      font-style: italic;
+      margin-left: 3px;
+    }
+
+    .message-usage {
+      font-size: 10px;
+      color: #888;
+      margin-left: 3px;
+    }
+
+    .conversation-id {
+      font-family: monospace;
+      font-size: 12px;
+      padding: 2px 4px;
+      background-color: #f0f0f0;
+      border-radius: 3px;
+      margin-left: auto;
+    }
+
+    .parent-info {
+      font-size: 11px;
+      opacity: 0.8;
+    }
+
+    .subconversation {
+      border-left: 2px solid transparent;
+      padding-left: 5px;
+      margin-left: 20px;
+      transition: margin-left 0.3s ease;
+    }
+
+    .message-text {
+      overflow-x: auto;
+      margin-bottom: 3px;
+      font-family: monospace;
+      padding: 3px 5px;
+      background: rgb(236, 236, 236);
+      border-radius: 6px;
+      user-select: text;
+      cursor: text;
+      -webkit-user-select: text;
+      -moz-user-select: text;
+      -ms-user-select: text;
+      font-size: 13px;
+      line-height: 1.3;
+    }
+
+    .tool-details {
+      margin-top: 3px;
+      padding-top: 3px;
+      border-top: 1px dashed #e0e0e0;
+      font-size: 12px;
+    }
+
+    .tool-name {
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 2px;
+      background: #f0f0f0;
+      padding: 2px 4px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+
+    .tool-input,
+    .tool-result {
+      margin-top: 2px;
+      padding: 3px 5px;
+      background: #f7f7f7;
+      border-radius: 2px;
+      font-family: monospace;
+      font-size: 12px;
+      overflow-x: auto;
+      white-space: pre;
+      line-height: 1.3;
+      user-select: text;
+      cursor: text;
+      -webkit-user-select: text;
+      -moz-user-select: text;
+      -ms-user-select: text;
+    }
+
+    .tool-result {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .usage-info {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px dashed #e0e0e0;
+      font-size: 12px;
+      color: #666;
+    }
+
+    /* Custom styles for IRC-like experience */
+    .user .message-content {
+      border-left-color: #2196f3;
+    }
+
+    .agent .message-content {
+      border-left-color: #4caf50;
+    }
+
+    .tool .message-content {
+      border-left-color: #ff9800;
+    }
+
+    .error .message-content {
+      border-left-color: #f44336;
+    }
+
+    /* Make message type display bold but without the IRC-style markers */
+    .message-type {
+      font-weight: bold;
+    }
+
+    /* Commit message styling */
+    .message.commit {
+      background-color: #f0f7ff;
+      border-left: 4px solid #0366d6;
+    }
+
+    .commits-container {
+      margin-top: 10px;
+      padding: 5px;
+    }
+
+    .commits-header {
+      font-weight: bold;
+      margin-bottom: 5px;
+      color: #24292e;
+    }
+
+    .commit-boxes-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .commit-box {
+      border: 1px solid #d1d5da;
+      border-radius: 4px;
+      overflow: hidden;
+      background-color: #ffffff;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .commit-preview {
+      padding: 8px 12px;
+      cursor: pointer;
+      font-family: monospace;
+      background-color: #f6f8fa;
+      border-bottom: 1px dashed #d1d5da;
+    }
+    
+    .commit-preview:hover {
+      background-color: #eef2f6;
+    }
+    
+    .commit-hash {
+      color: #0366d6;
+      font-weight: bold;
+    }
+    
+    .commit-details {
+      padding: 8px 12px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    
+    .commit-details pre {
+      margin: 0;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    
+    .commit-details.is-hidden {
+      display: none;
+    }
+    
+    .pushed-branch {
+      color: #28a745;
+      font-weight: 500;
+      margin-left: 6px;
+    }
+    
+    .commit-diff-button {
+      padding: 6px 12px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      background-color: #f7f7f7;
+      color: #24292e;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin: 8px 12px;
+      display: block;
+    }
+    
+    .commit-diff-button:hover {
+      background-color: #e7e7e7;
+      border-color: #aaa;
+    }
+    
+    /* Tool call cards */
+    .tool-call-cards-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    /* Message type styles */
+
+    .user .message-icon {
+      background-color: #2196f3;
+    }
+
+    .agent .message-icon {
+      background-color: #4caf50;
+    }
+
+    .tool .message-icon {
+      background-color: #ff9800;
+    }
+
+    .error .message-icon {
+      background-color: #f44336;
+    }
+
+    .end-of-turn {
+      margin-bottom: 15px;
+    }
+
+    .end-of-turn::after {
+      content: "End of Turn";
+      position: absolute;
+      left: 15px;
+      bottom: -10px;
+      transform: translateX(-50%);
+      font-size: 10px;
+      color: #666;
+      background: #f0f0f0;
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    .markdown-content {
+      box-sizing: border-box;
+      min-width: 200px;
+      margin: 0 auto;
+    }
+
+    .markdown-content p {
+      margin-block-start: 0.5em;
+      margin-block-end: 0.5em;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  renderMarkdown(markdownContent: string): string {
+    try {
+      // Set markdown options for proper code block highlighting and safety
+      const markedOptions: MarkedOptions = {
+        gfm: true, // GitHub Flavored Markdown
+        breaks: true, // Convert newlines to <br>
+        async: false,
+        // DOMPurify is recommended for production, but not included in this implementation
+      };
+      return marked.parse(markdownContent, markedOptions) as string;
+    } catch (error) {
+      console.error("Error rendering markdown:", error);
+      // Fallback to plain text if markdown parsing fails
+      return markdownContent;
+    }
+  }
+
+  /**
+   * Format timestamp for display
+   */
+  formatTimestamp(
+    timestamp: string | number | Date | null | undefined,
+    defaultValue: string = "",
+  ): string {
+    if (!timestamp) return defaultValue;
+    try {
+      const date = new Date(timestamp);
+      if (isNaN(date.getTime())) return defaultValue;
+
+      // Format: Mar 13, 2025 09:53:25 AM
+      return date.toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: true,
+      });
+    } catch (e) {
+      return defaultValue;
+    }
+  }
+
+  formatNumber(
+    num: number | null | undefined,
+    defaultValue: string = "0",
+  ): string {
+    if (num === undefined || num === null) return defaultValue;
+    try {
+      return num.toLocaleString();
+    } catch (e) {
+      return String(num);
+    }
+  }
+  formatCurrency(
+    num: number | string | null | undefined,
+    defaultValue: string = "$0.00",
+    isMessageLevel: boolean = false,
+  ): string {
+    if (num === undefined || num === null) return defaultValue;
+    try {
+      // Use 4 decimal places for message-level costs, 2 for totals
+      const decimalPlaces = isMessageLevel ? 4 : 2;
+      return `$${parseFloat(String(num)).toFixed(decimalPlaces)}`;
+    } catch (e) {
+      return defaultValue;
+    }
+  }
+
+  showCommit(commitHash: string) {
+    this.dispatchEvent(new CustomEvent("show-commit-diff", {bubbles: true, composed: true, detail: {commitHash}}))
+  }
+
+  render() {
+    return html`
+      <div
+        class="message ${this.message?.type} ${this.message?.end_of_turn
+          ? "end-of-turn"
+          : ""}"
+      >
+        ${this.previousMessage?.type != this.message?.type
+          ? html`<div class="message-icon">
+              ${this.message?.type.toUpperCase()[0]}
+            </div>`
+          : ""}
+        <div class="message-content">
+          <div class="message-header">
+            <span class="message-type">${this.message?.type}</span>
+            <span class="message-timestamp">${this.formatTimestamp(this.message?.timestamp)} ${this.message?.elapsed ? html`(${(this.message?.elapsed / 1e9).toFixed(2)}s)` : ''}</span>
+            ${this.message?.usage ? html`
+            <span class="message-usage">
+              <span title="Input tokens">In: ${this.message?.usage?.input_tokens}</span>
+              ${this.message?.usage?.cache_read_input_tokens > 0 ? html`<span title="Cache tokens">[Cache: ${this.formatNumber(this.message?.usage?.cache_read_input_tokens)}]</span>` : ""}
+              <span title="Output tokens">Out: ${this.message?.usage?.output_tokens}</span>
+              <span title="Message cost">(${this.formatCurrency(this.message?.usage?.cost_usd)})</span>
+            </span>` : ''}
+          </div>
+          <div class="message-text-container">
+            <div class="message-actions">
+              ${copyButton(this.message?.content)}
+            </div>
+            ${this.message?.content
+              ? html`
+                  <div class="message-text markdown-content">
+                    ${unsafeHTML(this.renderMarkdown(this.message?.content))}
+                  </div>
+                `
+              : ""}
+          </div>
+          <sketch-tool-calls
+            .toolCalls=${this.message?.tool_calls}
+          ></sketch-tool-calls>
+          ${this.message?.commits
+            ? html`
+                <div class="commits-container">
+                  <div class="commits-header">
+                    ${this.message.commits.length} new commit${this.message.commits.length > 1 ? "s" : ""} detected
+                  </div>
+                  ${this.message.commits.map((commit) => {
+                    return html`
+                      <div class="commit-boxes-row">
+                        <div class="commit-box">
+                          <div class="commit-preview">
+                            <span class="commit-hash">${commit.hash.substring(0, 8)}</span> 
+                            ${commit.subject}
+                            <span class="pushed-branch"
+                              >→ pushed to ${commit.pushed_branch}</span>
+                          </div>
+                          <div class="commit-details is-hidden">
+                            <pre>${commit.body}</pre>
+                          </div>
+                          <button class="commit-diff-button" @click=${() => this.showCommit(commit.hash)}>View Changes</button>
+                        </div>
+                      </div>
+                    `;
+                  })}
+                </div>
+              `
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+}
+
+function copyButton(textToCopy: string) {  
+  // Add click event listener to handle copying
+  const ret = html`<button class="copy-button" title="Copy text to clipboard" @click=${(e: Event) => {
+    e.stopPropagation();
+    const copyButton = e.currentTarget as HTMLButtonElement;
+    navigator.clipboard
+      .writeText(textToCopy)
+      .then(() => {
+        copyButton.textContent = "Copied!";
+        setTimeout(() => {
+          copyButton.textContent = "Copy";
+        }, 2000);
+      })
+      .catch((err) => {
+        console.error("Failed to copy text: ", err);
+        copyButton.textContent = "Failed";
+        setTimeout(() => {
+          copyButton.textContent = "Copy";
+        }, 2000);
+      });
+  }}>Copy</button`;
+
+  return ret
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-timeline-message": SketchTimelineMessage;
+  }
+}
diff --git a/loop/webui/src/web-components/sketch-timeline.ts b/loop/webui/src/web-components/sketch-timeline.ts
new file mode 100644
index 0000000..8122db7
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-timeline.ts
@@ -0,0 +1,127 @@
+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')
+export class SketchTimeline extends LitElement {
+  @property()
+  messages: TimelineMessage[] = [];
+
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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;
+  }
+
+  .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
+   */
+  private _handleShowCommitDiff(event: CustomEvent) {
+    const { commitHash } = event.detail;
+    if (commitHash) {
+      // Bubble up the event to the app shell
+      const newEvent = new CustomEvent('show-commit-diff', {
+        detail: { commitHash },
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchEvent(newEvent);
+    }
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+    
+    // Listen for showCommitDiff events from the renderer
+    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);
+  }
+
+  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('-');
+    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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-timeline": SketchTimeline;
+  }
+}
\ No newline at end of file
diff --git a/loop/webui/src/web-components/sketch-tool-calls.ts b/loop/webui/src/web-components/sketch-tool-calls.ts
new file mode 100644
index 0000000..a8d0acc
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-tool-calls.ts
@@ -0,0 +1,639 @@
+import { css, html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { repeat } from "lit/directives/repeat.js";
+import { customElement, property } from "lit/decorators.js";
+import { State, ToolCall } from "../types";
+import { marked, MarkedOptions } from "marked";
+
+@customElement("sketch-tool-calls")
+export class SketchToolCalls extends LitElement {
+  @property()
+  toolCalls: ToolCall[] = [];
+
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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`
+    /* Tool calls container styles */
+    .tool-calls-container {
+      /* Removed dotted border */
+    }
+
+    .tool-calls-toggle {
+      cursor: pointer;
+      background-color: #f0f0f0;
+      padding: 5px 10px;
+      border: none;
+      border-radius: 4px;
+      text-align: left;
+      font-size: 12px;
+      margin-top: 5px;
+      color: #555;
+      font-weight: 500;
+    }
+
+    .tool-calls-toggle:hover {
+      background-color: #e0e0e0;
+    }
+
+    .tool-calls-details {
+      margin-top: 10px;
+      transition: max-height 0.3s ease;
+    }
+
+    .tool-calls-details.collapsed {
+      max-height: 0;
+      overflow: hidden;
+      margin-top: 0;
+    }
+
+    .tool-call {
+      background: #f9f9f9;
+      border-radius: 4px;
+      padding: 10px;
+      margin-bottom: 10px;
+      border-left: 3px solid #4caf50;
+    }
+
+    .tool-call-header {
+      margin-bottom: 8px;
+      font-size: 14px;
+      padding: 2px 0;
+    }
+
+    /* Compact tool display styles */
+    .tool-compact-line {
+      font-family: monospace;
+      font-size: 12px;
+      line-height: 1.4;
+      padding: 4px 6px;
+      background: #f8f8f8;
+      border-radius: 3px;
+      position: relative;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    .tool-result-inline {
+      font-family: monospace;
+      color: #0066bb;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 400px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .copy-inline-button {
+      font-size: 10px;
+      padding: 2px 4px;
+      margin-left: 8px;
+      background: #eee;
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+      opacity: 0.7;
+    }
+
+    .copy-inline-button:hover {
+      opacity: 1;
+      background: #ddd;
+    }
+
+    .tool-input.compact,
+    .tool-result.compact {
+      margin: 2px 0;
+      padding: 4px;
+      font-size: 12px;
+    }
+
+    /* Removed old compact container CSS */
+
+    /* Ultra-compact tool call box styles */
+    .tool-calls-header {
+      /* Empty header - just small spacing */
+    }
+
+    .tool-call-boxes-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .tool-call-wrapper {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 4px;
+    }
+
+    .tool-call-box {
+      display: inline-flex;
+      align-items: center;
+      background: #f0f0f0;
+      border-radius: 4px;
+      padding: 3px 8px;
+      font-size: 12px;
+      cursor: pointer;
+      max-width: 320px;
+      position: relative;
+      border: 1px solid #ddd;
+      transition: background-color 0.2s;
+    }
+
+    .tool-call-box:hover {
+      background-color: #e8e8e8;
+    }
+
+    .tool-call-box.expanded {
+      background-color: #e0e0e0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: 1px solid #ccc;
+    }
+
+    .tool-call-input {
+      color: #666;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: monospace;
+      font-size: 11px;
+    }
+
+    .tool-call-card {
+      display: flex;
+      flex-direction: column;
+      background-color: white;
+      overflow: hidden;
+      cursor: pointer;
+    }
+
+    /* Compact view (default) */
+    .tool-call-compact-view {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.9em;
+      white-space: nowrap;
+      overflow: visible; /* Don't hide overflow, we'll handle text truncation per element */
+      position: relative; /* For positioning the expand icon */
+    }
+
+    /* Expanded view (hidden by default) */
+    .tool-call-card.collapsed .tool-call-expanded-view {
+      display: none;
+    }
+
+    .tool-call-expanded-view {
+      display: flex;
+      flex-direction: column;
+      border-top: 1px solid #eee;
+    }
+
+    .tool-call-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 10px;
+      background-color: #f0f0f0;
+      border-bottom: 1px solid #ddd;
+      font-weight: bold;
+    }
+
+    .tool-call-name {
+      color: gray;
+    }
+
+    .tool-call-status {
+      margin-right: 4px;
+      text-align: center;
+    }
+
+    .tool-call-status.spinner {
+      animation: spin 1s infinite linear;
+      display: inline-block;
+      width: 1em;
+    }
+
+    .tool-call-time {
+      margin-left: 8px;
+      font-size: 0.85em;
+      color: #666;
+      font-weight: normal;
+    }
+
+    .tool-call-input-preview {
+      color: #555;
+      font-family: var(--monospace-font);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 30%;
+      background-color: rgba(240, 240, 240, 0.5);
+      padding: 2px 5px;
+      border-radius: 3px;
+      font-size: 0.9em;
+    }
+
+    .tool-call-result-preview {
+      color: #28a745;
+      font-family: var(--monospace-font);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 40%;
+      background-color: rgba(240, 248, 240, 0.5);
+      padding: 2px 5px;
+      border-radius: 3px;
+      font-size: 0.9em;
+    }
+
+    .tool-call-expand-icon {
+      position: absolute;
+      right: 10px;
+      font-size: 0.8em;
+      color: #888;
+    }
+
+    .tool-call-input {
+      padding: 6px 10px;
+      border-bottom: 1px solid #eee;
+      font-family: var(--monospace-font);
+      font-size: 0.9em;
+      white-space: pre-wrap;
+      word-break: break-all;
+      background-color: #f5f5f5;
+    }
+
+    .tool-call-result {
+      padding: 6px 10px;
+      font-family: var(--monospace-font);
+      font-size: 0.9em;
+      white-space: pre-wrap;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .tool-call-result pre {
+      margin: 0;
+      white-space: pre-wrap;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* Standalone tool messages (legacy/disconnected) */
+    .tool-details.standalone .tool-header {
+      border-radius: 4px;
+      background-color: #fff3cd;
+      border-color: #ffeeba;
+    }
+
+    .tool-details.standalone .tool-warning {
+      margin-left: 10px;
+      font-size: 0.85em;
+      color: #856404;
+      font-style: italic;
+    }
+
+    /* Tool call expanded view with sections */
+    .tool-call-section {
+      border-bottom: 1px solid #eee;
+    }
+
+    .tool-call-section:last-child {
+      border-bottom: none;
+    }
+
+    .tool-call-section-label {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 10px;
+      background-color: #f5f5f5;
+      font-weight: bold;
+      font-size: 0.9em;
+    }
+
+    .tool-call-section-content {
+      padding: 0;
+    }
+
+    .tool-call-copy-btn {
+      background-color: #f0f0f0;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      padding: 2px 8px;
+      font-size: 0.8em;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    .tool-call-copy-btn:hover {
+      background-color: #e0e0e0;
+    }
+
+    /* Override for tool call input in expanded view */
+    .tool-call-section-content .tool-call-input {
+      margin: 0;
+      padding: 8px 10px;
+      border: none;
+      background-color: #fff;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .tool-call-card .tool-call-input-preview,
+    .tool-call-card .tool-call-result-preview {
+      font-family: monospace;
+      background: black;
+      padding: 1em;
+    }
+    .tool-call-input-preview {
+      color: white;
+    }
+    .tool-call-result-preview {
+      color: gray;
+    }
+
+    .tool-call-card.title {
+      font-style: italic;
+    }
+
+    .cancel-button {
+      background: rgb(76, 175, 80);
+      color: white;
+      border: none;
+      padding: 4px 10px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      margin: 5px;
+    }
+
+    .cancel-button:hover {
+      background: rgb(200, 35, 51) !important;
+    }
+
+    .thought-bubble {
+      position: relative;
+      background-color: #eee;
+      border-radius: 8px;
+      padding: 0.5em;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      margin-left: 24px;
+      margin-top: 24px;
+      margin-bottom: 12px;
+      max-width: 30%;
+      white-space: pre;
+    }
+    
+    .thought-bubble .preview {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .thought-bubble:before {
+      content: '';
+      position: absolute;
+      top: -8px;
+      left: -8px;
+      width: 15px;
+      height: 15px;
+      background-color: #eee;
+      border-radius: 50%;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    
+    .thought-bubble:after {
+      content: '';
+      position: absolute;
+      top: -16px;
+      left: -16px;
+      width: 8px;
+      height: 8px;
+      background-color: #eee;
+      border-radius: 50%;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    
+
+    .patch-input-preview {
+      color: #555;
+      font-family: monospace;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 30%;
+      background-color: rgba(240, 240, 240, 0.5);
+      padding: 2px 5px;
+      border-radius: 3px;
+      font-size: 0.9em;
+    }
+
+    .codereview-OK {
+      color: green;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  renderMarkdown(markdownContent: string): string {
+    try {
+      // Set markdown options for proper code block highlighting and safety
+      const markedOptions: MarkedOptions = {
+        gfm: true, // GitHub Flavored Markdown
+        breaks: true, // Convert newlines to <br>
+        async: false,
+        // DOMPurify is recommended for production, but not included in this implementation
+      };
+      return marked.parse(markdownContent, markedOptions) as string;
+    } catch (error) {
+      console.error("Error rendering markdown:", error);
+      // Fallback to plain text if markdown parsing fails
+      return markdownContent;
+    }
+  }
+
+  _cancelToolCall = async (tool_call_id: string, button: HTMLButtonElement) => {
+    console.log("cancelToolCall", tool_call_id, button);
+    button.innerText = "Cancelling";
+    button.disabled = true;
+    try {
+      const response = await fetch("cancel", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          tool_call_id: tool_call_id,
+          reason: "user requested cancellation",
+        }),
+      });
+      if (response.ok) {
+        console.log("cancel", tool_call_id, response);
+        button.parentElement.removeChild(button);
+      } else {
+        button.innerText = "Cancel";
+        console.log(`error trying to cancel ${tool_call_id}: `, response);
+      }
+    } catch (e) {
+      console.error("cancel", tool_call_id, e);
+    }
+  };
+
+  toolCard(toolCall: ToolCall) {
+    const toolCallStatus = toolCall.result_message
+      ? toolCall.result_message.tool_error
+        ? "❌"
+        : ""
+      : "⏳";
+
+    const cancelButton = toolCall.result_message
+      ? ""
+      : html`<button
+          class="cancel-button"
+          title="Cancel this operation"
+          @click=${(e: Event) => {
+            e.stopPropagation();
+            const button = e.target as HTMLButtonElement;
+            this._cancelToolCall(toolCall.tool_call_id, button);
+          }}
+        >
+          Cancel
+        </button>`;
+
+    const status = html`<span
+      class="tool-call-status ${toolCall.result_message ? "" : "spinner"}"
+      >${toolCallStatus}</span
+    >`;
+
+    switch (toolCall.name) {
+      case "title":
+        const titleInput = JSON.parse(toolCall.input);
+        return html`
+        <div class="tool-call-compact-view">
+          I've set the title of this sketch to <b>"${titleInput.title}"</b>
+        </div>`;
+      case "bash":
+        const bashInput = JSON.parse(toolCall.input);
+        return html`
+        <div class="tool-call-compact-view">
+          ${status}
+          <span class="tool-call-name">${toolCall.name}</span>
+          <pre class="tool-call-input-preview">${bashInput.command}</pre>
+          ${toolCall.result_message
+            ? html`
+                ${toolCall.result_message.tool_result
+                  ? html`
+                      <pre class="tool-call-result-preview">
+${toolCall.result_message.tool_result}</pre>`
+                  : ""}`
+            : cancelButton}
+        </div>`;
+      case "codereview":
+        return html`
+        <div class="tool-call-compact-view">
+          ${status}
+          <span class="tool-call-name">${toolCall.name}</span>
+          ${cancelButton}
+          <code class="codereview-preview codereview-${toolCall.result_message?.tool_result}">${toolCall.result_message?.tool_result == 'OK' ? '✔️': '⛔ ' + toolCall.result_message?.tool_result}</code>
+        </div>`;
+      case "think":
+        const thinkInput = JSON.parse(toolCall.input);
+        return html`
+        <div class="tool-call-compact-view">
+          ${status}
+          <span class="tool-call-name">${toolCall.name}</span>
+          <div class="thought-bubble"><div class="preview">${thinkInput.thoughts}</div></div>
+          ${cancelButton}
+        </div>`;
+      case "patch":
+        const patchInput = JSON.parse(toolCall.input);
+        return html`
+        <div class="tool-call-compact-view">
+          ${status}
+          <span class="tool-call-name">${toolCall.name}</span>
+          <div class="patch-input-preview"><span class="patch-path">${patchInput.path}</span>: ${patchInput.patches.length} edit${patchInput.patches.length > 1 ? 's': ''}</div>
+          ${cancelButton}
+        </div>`;
+      case "done":
+        const doneInput = JSON.parse(toolCall.input);
+        return html`
+        <div class="tool-call-compact-view">
+          ${status}
+          <span class="tool-call-name">${toolCall.name}</span>
+          <div class="done-input-preview">
+            ${Object.keys(doneInput.checklist_items).map((key) => {
+              const item = doneInput.checklist_items[key];
+              let statusIcon = '⛔';
+              if (item.status == 'yes') {
+                statusIcon = '👍';
+              } else if (item.status =='not applicable') {
+                statusIcon = '🤷‍♂️';
+              }
+              return html`<div><span>${statusIcon}</span> ${key}:${item.status}</div>`;
+            })}
+          </div>
+          ${cancelButton}
+        </div>`;
+
+      default: // Generic tool card:
+        return html`
+      <div class="tool-call-compact-view">
+        ${status}
+        <span class="tool-call-name">${toolCall.name}</span>
+        <code class="tool-call-input-preview">${toolCall.input}</code>
+        ${cancelButton}
+        <code class="tool-call-result-preview">${toolCall.result_message?.tool_result}</code>
+      </div>
+      ${toolCall.result_message?.tool_result}
+    `;
+    }
+  }
+  render() {
+    return html`
+    <div class="tool-calls-container">
+      <div class="tool-calls-header"></div>
+      <div class="tool-call-cards-container">
+        ${this.toolCalls?.map((toolCall) => {
+          return html`<div class="tool-call-card ${toolCall.name}">
+            ${this.toolCard(toolCall)}
+          </div>`;
+        })}
+      </div>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-calls": SketchToolCalls;
+  }
+}
diff --git a/loop/webui/src/web-components/sketch-view-mode-select.test.ts b/loop/webui/src/web-components/sketch-view-mode-select.test.ts
new file mode 100644
index 0000000..beb0b67
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-view-mode-select.test.ts
@@ -0,0 +1,99 @@
+import { html, fixture, expect, oneEvent, elementUpdated, fixtureCleanup } from "@open-wc/testing";
+import "./sketch-view-mode-select";
+import type { SketchViewModeSelect } from "./sketch-view-mode-select";
+
+describe("SketchViewModeSelect", () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+
+  it("initializes with 'chat' as the default mode", async () => {
+    const el: SketchViewModeSelect = await fixture(html`
+      <sketch-view-mode-select></sketch-view-mode-select>
+    `);
+
+    expect(el.activeMode).to.equal("chat");
+    const chatButton = el.shadowRoot!.querySelector("#showConversationButton");
+    expect(chatButton!.classList.contains("active")).to.be.true;
+  });
+
+  it("displays all four view mode buttons", async () => {
+    const el: SketchViewModeSelect = await fixture(html`
+      <sketch-view-mode-select></sketch-view-mode-select>
+    `);
+
+    const buttons = el.shadowRoot!.querySelectorAll(".emoji-button");
+    expect(buttons.length).to.equal(4);
+
+    const chatButton = el.shadowRoot!.querySelector("#showConversationButton");
+    const diffButton = el.shadowRoot!.querySelector("#showDiffButton");
+    const chartsButton = el.shadowRoot!.querySelector("#showChartsButton");
+    const terminalButton = el.shadowRoot!.querySelector("#showTerminalButton");
+
+    expect(chatButton).to.exist;
+    expect(diffButton).to.exist;
+    expect(chartsButton).to.exist;
+    expect(terminalButton).to.exist;
+
+    expect(chatButton!.getAttribute("title")).to.equal("Conversation View");
+    expect(diffButton!.getAttribute("title")).to.equal("Diff View");
+    expect(chartsButton!.getAttribute("title")).to.equal("Charts View");
+    expect(terminalButton!.getAttribute("title")).to.equal("Terminal View");
+  });
+
+  it("dispatches view-mode-select event when clicking a mode button", async () => {
+    const el: SketchViewModeSelect = await fixture(html`
+      <sketch-view-mode-select></sketch-view-mode-select>
+    `);
+
+    const diffButton = el.shadowRoot!.querySelector("#showDiffButton") as HTMLButtonElement;
+    
+    // Setup listener for the view-mode-select event
+    setTimeout(() => diffButton.click());
+    const { detail } = await oneEvent(el, "view-mode-select");
+    
+    expect(detail.mode).to.equal("diff");
+  });
+
+  it("updates the active mode when receiving update-active-mode event", async () => {
+    const el: SketchViewModeSelect = await fixture(html`
+      <sketch-view-mode-select></sketch-view-mode-select>
+    `);
+
+    // Initially should be in chat mode
+    expect(el.activeMode).to.equal("chat");
+    
+    // Dispatch the update-active-mode event to change to diff mode
+    const updateEvent = new CustomEvent("update-active-mode", {
+      detail: { mode: "diff" },
+      bubbles: true
+    });
+    el.dispatchEvent(updateEvent);
+    
+    // Wait for the component to update
+    await elementUpdated(el);
+    
+    expect(el.activeMode).to.equal("diff");
+    const diffButton = el.shadowRoot!.querySelector("#showDiffButton");
+    expect(diffButton!.classList.contains("active")).to.be.true;
+  });
+
+  it("correctly marks the active button based on mode", async () => {
+    const el: SketchViewModeSelect = await fixture(html`
+      <sketch-view-mode-select activeMode="terminal"></sketch-view-mode-select>
+    `);
+
+    // Terminal button should be active
+    const terminalButton = el.shadowRoot!.querySelector("#showTerminalButton");
+    const chatButton = el.shadowRoot!.querySelector("#showConversationButton");
+    const diffButton = el.shadowRoot!.querySelector("#showDiffButton");
+    const chartsButton = el.shadowRoot!.querySelector("#showChartsButton");
+    
+    expect(terminalButton!.classList.contains("active")).to.be.true;
+    expect(chatButton!.classList.contains("active")).to.be.false;
+    expect(diffButton!.classList.contains("active")).to.be.false;
+    expect(chartsButton!.classList.contains("active")).to.be.false;
+  });
+
+
+});
diff --git a/loop/webui/src/web-components/sketch-view-mode-select.ts b/loop/webui/src/web-components/sketch-view-mode-select.ts
new file mode 100644
index 0000000..b55282a
--- /dev/null
+++ b/loop/webui/src/web-components/sketch-view-mode-select.ts
@@ -0,0 +1,147 @@
+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')
+export class SketchViewModeSelect extends LitElement {
+  // Current active mode
+  @property()
+  activeMode: "chat" | "diff" | "charts" | "terminal" = "chat";
+  // Header bar: view mode buttons
+
+  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+  // Note that these styles only apply to the scope of this web component's
+  // 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`
+/* 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: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;
+}
+`;
+  
+  constructor() {
+    super();
+    
+    // Binding methods
+    this._handleViewModeClick = this._handleViewModeClick.bind(this);
+    this._handleUpdateActiveMode = this._handleUpdateActiveMode.bind(this);
+  }
+
+  // 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);
+  }
+  
+  /**
+   * 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', {
+      detail: { mode },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+  }
+  
+  /**
+   * Handle updates to the active mode
+   */
+  private _handleUpdateActiveMode(event: CustomEvent) {
+    const { mode } = event.detail;
+    if (mode) {
+      this.activeMode = mode;
+    }
+  }
+
+  // See https://lit.dev/docs/components/lifecycle/
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    
+    // Remove event listeners
+    this.removeEventListener('update-active-mode', this._handleUpdateActiveMode as EventListener);
+  }
+
+  render() {
+    return html`
+      <div class="view-mode-buttons">
+        <button
+          id="showConversationButton"
+          class="emoji-button ${this.activeMode === 'chat' ? 'active' : ''}"
+          title="Conversation View"
+          @click=${() => this._handleViewModeClick('chat')}
+        >
+          💬
+        </button>
+        <button
+          id="showDiffButton"
+          class="emoji-button ${this.activeMode === 'diff' ? 'active' : ''}"
+          title="Diff View"
+          @click=${() => this._handleViewModeClick('diff')}
+        >
+          ±
+        </button>
+        <button
+          id="showChartsButton"
+          class="emoji-button ${this.activeMode === 'charts' ? 'active' : ''}"
+          title="Charts View"
+          @click=${() => this._handleViewModeClick('charts')}
+        >
+          📈
+        </button>
+        <button
+          id="showTerminalButton"
+          class="emoji-button ${this.activeMode === 'terminal' ? 'active' : ''}"
+          title="Terminal View"
+          @click=${() => this._handleViewModeClick('terminal')}
+        >
+          💻
+        </button>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-view-mode-select": SketchViewModeSelect;
+  }
+}
\ No newline at end of file
diff --git a/loop/webui/src/web-components/vega-embed.ts b/loop/webui/src/web-components/vega-embed.ts
new file mode 100644
index 0000000..04f0087
--- /dev/null
+++ b/loop/webui/src/web-components/vega-embed.ts
@@ -0,0 +1,86 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import vegaEmbed from "vega-embed";
+import { VisualizationSpec } from "vega-embed";
+
+/**
+ * A web component wrapper for vega-embed.
+ * Renders Vega and Vega-Lite visualizations.
+ *
+ * Usage:
+ * <vega-embed .spec="${yourVegaLiteSpec}"></vega-embed>
+ */
+@customElement("vega-embed")
+export class VegaEmbed extends LitElement {
+  /**
+   * The Vega or Vega-Lite specification to render
+   */
+  @property({ type: Object })
+  spec?: VisualizationSpec;
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    #vega-container {
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+    }
+  `;
+
+  @query("#vega-container")
+  protected container?: HTMLElement;
+
+  protected firstUpdated() {
+    this.renderVegaVisualization();
+  }
+
+  protected updated() {
+    this.renderVegaVisualization();
+  }
+
+  /**
+   * Renders the Vega/Vega-Lite visualization using vega-embed
+   */
+  private async renderVegaVisualization() {
+    if (!this.spec) {
+      return;
+    }
+
+    if (!this.container) {
+      return;
+    }
+
+    try {
+      // Clear previous visualization if any
+      this.container.innerHTML = "";
+
+      // Render new visualization
+      await vegaEmbed(this.container, this.spec, {
+        actions: true,
+        renderer: "svg",
+      });
+    } catch (error) {
+      console.error("Error rendering Vega visualization:", error);
+      this.container.innerHTML = `<div style="color: red; padding: 10px;">
+        Error rendering visualization: ${
+          error instanceof Error ? error.message : String(error)
+        }
+      </div>`;
+    }
+  }
+
+  render() {
+    return html`<div id="vega-container"></div> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "vega-embed": VegaEmbed;
+  }
+}