diff --git a/loop/webui/src/timeline.html b/loop/webui/src/timeline.html
new file mode 100644
index 0000000..46144c1
--- /dev/null
+++ b/loop/webui/src/timeline.html
@@ -0,0 +1,158 @@
+<!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>