diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index 396da39..a547c0a 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -99,6 +99,7 @@
       "sketch-call-status",
       "sketch-chat-input",
       "sketch-container-status",
+      "sketch-timeline",
       "sketch-tool-calls",
       "sketch-view-mode-select",
     ];
diff --git a/webui/src/web-components/demo/sketch-timeline.demo.ts b/webui/src/web-components/demo/sketch-timeline.demo.ts
new file mode 100644
index 0000000..0a41250
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-timeline.demo.ts
@@ -0,0 +1,302 @@
+/**
+ * Demo module for sketch-timeline component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+import type { AgentMessage } from "../../types";
+
+// Mock messages for demo
+function createMockMessage(props: Partial<AgentMessage> = {}): AgentMessage {
+  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 || undefined,
+    usage: props.usage,
+    hide_output: props.hide_output || false,
+    ...props,
+  };
+}
+
+function createMockMessages(count: number): AgentMessage[] {
+  return Array.from({ length: count }, (_, i) =>
+    createMockMessage({
+      idx: i,
+      content: `Message ${i + 1}: This is a sample message to demonstrate the timeline component.`,
+      type: i % 3 === 0 ? "user" : "agent",
+      timestamp: new Date(Date.now() - (count - i) * 60000).toISOString(),
+      tool_calls:
+        i % 4 === 0
+          ? [
+              {
+                name: "bash",
+                input: `echo "Tool call example ${i}"`,
+                tool_call_id: `call_${i}`,
+                args: `{"command": "echo \"Tool call example ${i}\""}`,
+                result: `Tool call example ${i}`,
+              },
+            ]
+          : [],
+      usage:
+        i % 5 === 0
+          ? {
+              input_tokens: 10 + i,
+              cache_creation_input_tokens: 0,
+              cache_read_input_tokens: 0,
+              output_tokens: 50 + i * 2,
+              cost_usd: 0.001 * (i + 1),
+            }
+          : undefined,
+    }),
+  );
+}
+
+const demo: DemoModule = {
+  title: "Timeline Demo",
+  description:
+    "Interactive timeline component for displaying conversation messages with various states",
+  imports: ["../sketch-timeline"],
+  styles: ["/dist/tailwind.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Timeline",
+      "Timeline with a few sample messages",
+    );
+
+    const statesSection = demoUtils.createDemoSection(
+      "Timeline States",
+      "Different loading and thinking states",
+    );
+
+    const interactiveSection = demoUtils.createDemoSection(
+      "Interactive Demo",
+      "Add messages and control timeline behavior",
+    );
+
+    // Basic timeline with sample messages
+    const basicMessages = createMockMessages(5);
+    const basicTimeline = document.createElement("sketch-timeline") as any;
+    basicTimeline.messages = basicMessages;
+    basicTimeline.style.cssText =
+      "height: 400px; border: 1px solid #e1e5e9; border-radius: 6px; margin: 10px 0;";
+
+    // Create a scroll container for the basic timeline
+    const basicScrollContainer = document.createElement("div");
+    basicScrollContainer.style.cssText = "height: 400px; overflow-y: auto;";
+    basicScrollContainer.appendChild(basicTimeline);
+    basicTimeline.scrollContainer = { value: basicScrollContainer };
+
+    basicSection.appendChild(basicScrollContainer);
+
+    // Timeline with loading state
+    const loadingTimeline = document.createElement("sketch-timeline") as any;
+    loadingTimeline.messages = [];
+    loadingTimeline.isLoadingOlderMessages = false;
+    loadingTimeline.style.cssText =
+      "height: 200px; border: 1px solid #e1e5e9; border-radius: 6px; margin: 10px 0;";
+
+    const loadingWrapper = document.createElement("div");
+    loadingWrapper.style.cssText = "margin: 15px 0;";
+
+    const loadingLabel = document.createElement("h4");
+    loadingLabel.textContent = "Loading State (No messages)";
+    loadingLabel.style.cssText =
+      "margin: 0 0 10px 0; color: #24292f; font-size: 14px; font-weight: 600;";
+
+    loadingWrapper.appendChild(loadingLabel);
+    loadingWrapper.appendChild(loadingTimeline);
+    statesSection.appendChild(loadingWrapper);
+
+    // Timeline with thinking state
+    const thinkingMessages = createMockMessages(3);
+    const thinkingTimeline = document.createElement("sketch-timeline") as any;
+    thinkingTimeline.messages = thinkingMessages;
+    thinkingTimeline.llmCalls = 2;
+    thinkingTimeline.toolCalls = ["bash", "patch"];
+    thinkingTimeline.agentState = "thinking";
+    thinkingTimeline.style.cssText =
+      "height: 300px; border: 1px solid #e1e5e9; border-radius: 6px; margin: 10px 0;";
+
+    // Set initial load complete for thinking timeline
+    setTimeout(() => {
+      (thinkingTimeline as any).isInitialLoadComplete = true;
+      thinkingTimeline.requestUpdate();
+    }, 100);
+
+    const thinkingWrapper = document.createElement("div");
+    thinkingWrapper.style.cssText = "margin: 15px 0;";
+
+    const thinkingLabel = document.createElement("h4");
+    thinkingLabel.textContent = "Thinking State (Agent is active)";
+    thinkingLabel.style.cssText =
+      "margin: 0 0 10px 0; color: #24292f; font-size: 14px; font-weight: 600;";
+
+    const thinkingScrollContainer = document.createElement("div");
+    thinkingScrollContainer.style.cssText = "height: 300px; overflow-y: auto;";
+    thinkingScrollContainer.appendChild(thinkingTimeline);
+    thinkingTimeline.scrollContainer = { value: thinkingScrollContainer };
+
+    thinkingWrapper.appendChild(thinkingLabel);
+    thinkingWrapper.appendChild(thinkingScrollContainer);
+    statesSection.appendChild(thinkingWrapper);
+
+    // Interactive timeline
+    const interactiveMessages = createMockMessages(8);
+    const interactiveTimeline = document.createElement(
+      "sketch-timeline",
+    ) as any;
+    interactiveTimeline.messages = interactiveMessages;
+    interactiveTimeline.style.cssText =
+      "height: 400px; border: 1px solid #e1e5e9; border-radius: 6px; margin: 10px 0;";
+
+    // Set initial load complete for interactive timeline
+    setTimeout(() => {
+      (interactiveTimeline as any).isInitialLoadComplete = true;
+      interactiveTimeline.requestUpdate();
+    }, 100);
+
+    const interactiveScrollContainer = document.createElement("div");
+    interactiveScrollContainer.style.cssText =
+      "height: 400px; overflow-y: auto;";
+    interactiveScrollContainer.appendChild(interactiveTimeline);
+    interactiveTimeline.scrollContainer = { value: interactiveScrollContainer };
+
+    // Control buttons for interactive demo
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText =
+      "margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px;";
+
+    const addMessageButton = demoUtils.createButton("Add User Message", () => {
+      const newMessage = createMockMessage({
+        idx: interactiveMessages.length,
+        content: `New user message added at ${new Date().toLocaleTimeString()}`,
+        type: "user",
+        timestamp: new Date().toISOString(),
+      });
+      interactiveMessages.push(newMessage);
+      interactiveTimeline.messages = [...interactiveMessages];
+    });
+
+    const addAgentMessageButton = demoUtils.createButton(
+      "Add Agent Message",
+      () => {
+        const newMessage = createMockMessage({
+          idx: interactiveMessages.length,
+          content: `New agent response added at ${new Date().toLocaleTimeString()}`,
+          type: "agent",
+          timestamp: new Date().toISOString(),
+          tool_calls:
+            Math.random() > 0.5
+              ? [
+                  {
+                    name: "bash",
+                    input: "date",
+                    tool_call_id: `call_${Date.now()}`,
+                    args: '{"command": "date"}',
+                    result: new Date().toString(),
+                  },
+                ]
+              : [],
+        });
+        interactiveMessages.push(newMessage);
+        interactiveTimeline.messages = [...interactiveMessages];
+      },
+    );
+
+    const toggleThinkingButton = demoUtils.createButton(
+      "Toggle Thinking",
+      () => {
+        if (
+          interactiveTimeline.llmCalls > 0 ||
+          interactiveTimeline.toolCalls.length > 0
+        ) {
+          interactiveTimeline.llmCalls = 0;
+          interactiveTimeline.toolCalls = [];
+        } else {
+          interactiveTimeline.llmCalls = 1;
+          interactiveTimeline.toolCalls = ["bash"];
+        }
+      },
+    );
+
+    const toggleCompactButton = demoUtils.createButton(
+      "Toggle Compact Padding",
+      () => {
+        interactiveTimeline.compactPadding =
+          !interactiveTimeline.compactPadding;
+      },
+    );
+
+    const clearMessagesButton = demoUtils.createButton("Clear Messages", () => {
+      interactiveMessages.length = 0;
+      interactiveTimeline.messages = [];
+    });
+
+    const resetDemoButton = demoUtils.createButton("Reset Demo", () => {
+      interactiveMessages.length = 0;
+      interactiveMessages.push(...createMockMessages(8));
+      interactiveTimeline.messages = [...interactiveMessages];
+      interactiveTimeline.llmCalls = 0;
+      interactiveTimeline.toolCalls = [];
+      interactiveTimeline.compactPadding = false;
+    });
+
+    controlsDiv.appendChild(addMessageButton);
+    controlsDiv.appendChild(addAgentMessageButton);
+    controlsDiv.appendChild(toggleThinkingButton);
+    controlsDiv.appendChild(toggleCompactButton);
+    controlsDiv.appendChild(clearMessagesButton);
+    controlsDiv.appendChild(resetDemoButton);
+
+    const interactiveWrapper = document.createElement("div");
+    interactiveWrapper.style.cssText =
+      "padding: 10px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
+    interactiveWrapper.appendChild(interactiveScrollContainer);
+    interactiveWrapper.appendChild(controlsDiv);
+    interactiveSection.appendChild(interactiveWrapper);
+
+    // Set initial load complete for basic timeline
+    setTimeout(() => {
+      (basicTimeline as any).isInitialLoadComplete = true;
+      basicTimeline.requestUpdate();
+    }, 100);
+
+    // Assemble the demo
+    container.appendChild(basicSection);
+    container.appendChild(statesSection);
+    container.appendChild(interactiveSection);
+
+    // Store references for cleanup
+    (container as any).timelines = [
+      basicTimeline,
+      loadingTimeline,
+      thinkingTimeline,
+      interactiveTimeline,
+    ];
+  },
+
+  cleanup: async () => {
+    // Clean up any timers or listeners if needed
+    const container = document.getElementById("demo-container");
+    if (container && (container as any).timelines) {
+      const timelines = (container as any).timelines;
+      timelines.forEach((timeline: any) => {
+        // Reset timeline state
+        timeline.llmCalls = 0;
+        timeline.toolCalls = [];
+        timeline.messages = [];
+      });
+      delete (container as any).timelines;
+    }
+  },
+};
+
+export default demo;
diff --git a/webui/src/web-components/demo/test-timeline-manual.html b/webui/src/web-components/demo/test-timeline-manual.html
new file mode 100644
index 0000000..67107cd
--- /dev/null
+++ b/webui/src/web-components/demo/test-timeline-manual.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Timeline Manual Test</title>
+    <link rel="stylesheet" href="/dist/tailwind.css" />
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        margin: 0;
+        padding: 20px;
+      }
+      .test-container {
+        max-width: 800px;
+        margin: 0 auto;
+      }
+      .test-section {
+        margin: 40px 0;
+        padding: 20px;
+        border: 1px solid #e1e5e9;
+        border-radius: 8px;
+      }
+      .test-section h3 {
+        margin: 0 0 15px 0;
+        color: #24292f;
+      }
+      .timeline-wrapper {
+        height: 400px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        margin: 15px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="test-container">
+      <h1>Sketch Timeline Component Test</h1>
+      <p>
+        This page tests the converted SketchTimeline component using Tailwind
+        CSS.
+      </p>
+
+      <div class="test-section">
+        <h3>Empty Timeline (Welcome State)</h3>
+        <div class="timeline-wrapper">
+          <sketch-timeline id="empty-timeline"></sketch-timeline>
+        </div>
+      </div>
+
+      <div class="test-section">
+        <h3>Timeline with Messages</h3>
+        <div class="timeline-wrapper">
+          <sketch-timeline id="messages-timeline"></sketch-timeline>
+        </div>
+      </div>
+
+      <div class="test-section">
+        <h3>Timeline with Thinking State</h3>
+        <div class="timeline-wrapper">
+          <sketch-timeline id="thinking-timeline"></sketch-timeline>
+        </div>
+      </div>
+
+      <div class="test-section">
+        <h3>Controls</h3>
+        <button id="add-message">Add Message</button>
+        <button id="toggle-thinking">Toggle Thinking</button>
+        <button id="clear-messages">Clear Messages</button>
+      </div>
+    </div>
+
+    <script type="module">
+      // Import the timeline component
+      import "../sketch-timeline.js";
+
+      // Mock messages
+      function createMockMessage(props = {}) {
+        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,
+          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,
+          hide_output: props.hide_output || false,
+          ...props,
+        };
+      }
+
+      // Get timeline elements
+      const emptyTimeline = document.getElementById("empty-timeline");
+      const messagesTimeline = document.getElementById("messages-timeline");
+      const thinkingTimeline = document.getElementById("thinking-timeline");
+
+      // Set up messages timeline
+      const messages = [
+        createMockMessage({
+          idx: 0,
+          content: "Hello! I'm a user message.",
+          type: "user",
+          timestamp: "2023-05-15T12:00:00Z",
+        }),
+        createMockMessage({
+          idx: 1,
+          content: "And I'm an agent response with some details.",
+          type: "agent",
+          timestamp: "2023-05-15T12:01:00Z",
+          usage: {
+            input_tokens: 15,
+            output_tokens: 42,
+            cost_usd: 0.001234,
+          },
+        }),
+        createMockMessage({
+          idx: 2,
+          content: "Here's a message with tool calls.",
+          type: "agent",
+          timestamp: "2023-05-15T12:02:00Z",
+          tool_calls: [
+            {
+              name: "bash",
+              input: "echo 'Hello World'",
+              tool_call_id: "call_123",
+              args: '{"command": "echo \'Hello World\'"}',
+              result: "Hello World",
+            },
+          ],
+        }),
+      ];
+
+      messagesTimeline.messages = messages;
+      thinkingTimeline.messages = messages.slice(0, 2);
+
+      // Set initial load complete
+      setTimeout(() => {
+        messagesTimeline.isInitialLoadComplete = true;
+        thinkingTimeline.isInitialLoadComplete = true;
+        messagesTimeline.requestUpdate();
+        thinkingTimeline.requestUpdate();
+      }, 100);
+
+      // Set thinking state
+      thinkingTimeline.llmCalls = 1;
+      thinkingTimeline.toolCalls = ["bash"];
+
+      // Control buttons
+      let messageCount = messages.length;
+      document.getElementById("add-message").addEventListener("click", () => {
+        const newMessage = createMockMessage({
+          idx: messageCount++,
+          content: `New message added at ${new Date().toLocaleTimeString()}`,
+          type: messageCount % 2 === 0 ? "user" : "agent",
+          timestamp: new Date().toISOString(),
+        });
+        messages.push(newMessage);
+        messagesTimeline.messages = [...messages];
+      });
+
+      document
+        .getElementById("toggle-thinking")
+        .addEventListener("click", () => {
+          if (thinkingTimeline.llmCalls > 0) {
+            thinkingTimeline.llmCalls = 0;
+            thinkingTimeline.toolCalls = [];
+          } else {
+            thinkingTimeline.llmCalls = 1;
+            thinkingTimeline.toolCalls = ["bash"];
+          }
+        });
+
+      document
+        .getElementById("clear-messages")
+        .addEventListener("click", () => {
+          messages.length = 0;
+          messagesTimeline.messages = [];
+          messageCount = 0;
+        });
+    </script>
+  </body>
+</html>
diff --git a/webui/src/web-components/sketch-timeline.test.ts b/webui/src/web-components/sketch-timeline.test.ts
index e803a2e..314c5a0 100644
--- a/webui/src/web-components/sketch-timeline.test.ts
+++ b/webui/src/web-components/sketch-timeline.test.ts
@@ -96,10 +96,10 @@
     },
   });
 
-  await expect(timeline.locator(".welcome-box")).toBeVisible();
-  await expect(timeline.locator(".welcome-box-title")).toContainText(
-    "How to use Sketch",
-  );
+  await expect(timeline.locator("[data-testid='welcome-box']")).toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='welcome-box-title']"),
+  ).toContainText("How to use Sketch");
 });
 
 test("renders messages when provided", async ({ mount }) => {
@@ -120,7 +120,9 @@
     return element.updateComplete;
   });
 
-  await expect(timeline.locator(".timeline-container")).toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='timeline-container']"),
+  ).toBeVisible();
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(5);
 });
 
@@ -140,13 +142,45 @@
   // Directly set the isInitialLoadComplete state to bypass the event system for testing
   await timeline.evaluate((element: SketchTimeline) => {
     (element as any).isInitialLoadComplete = true;
+    console.log("Set isInitialLoadComplete to true");
+    console.log("llmCalls:", element.llmCalls);
+    console.log("toolCalls:", element.toolCalls);
+    console.log(
+      "isInitialLoadComplete:",
+      (element as any).isInitialLoadComplete,
+    );
     element.requestUpdate();
     return element.updateComplete;
   });
 
-  await expect(timeline.locator(".thinking-indicator")).toBeVisible();
-  await expect(timeline.locator(".thinking-bubble")).toBeVisible();
-  await expect(timeline.locator(".thinking-dots .dot")).toHaveCount(3);
+  // Debug: Check if the element exists and what its computed style is
+  const indicatorExists = await timeline
+    .locator("[data-testid='thinking-indicator']")
+    .count();
+  console.log("Thinking indicator exists:", indicatorExists);
+
+  if (indicatorExists > 0) {
+    const style = await timeline
+      .locator("[data-testid='thinking-indicator']")
+      .evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          display: computed.display,
+          visibility: computed.visibility,
+          opacity: computed.opacity,
+          className: el.className,
+        };
+      });
+    console.log("Thinking indicator style:", style);
+  }
+  // Wait for the component to render with a longer timeout
+  await expect(
+    timeline.locator("[data-testid='thinking-indicator']"),
+  ).toBeVisible({ timeout: 10000 });
+  await expect(
+    timeline.locator("[data-testid='thinking-bubble']"),
+  ).toBeVisible();
+  await expect(timeline.locator("[data-testid='thinking-dot']")).toHaveCount(3);
 });
 
 test("filters out messages with hide_output flag", async ({ mount }) => {
@@ -338,8 +372,10 @@
     return element.updateComplete;
   });
 
-  // Button should now be visible
-  await expect(timeline.locator("#jump-to-latest.floating")).toBeVisible();
+  // Button should now be visible - wait longer for CSS classes to apply
+  await expect(timeline.locator("#jump-to-latest.floating")).toBeVisible({
+    timeout: 10000,
+  });
 });
 
 test("jump-to-latest button calls scroll method", async ({ mount }) => {
@@ -378,8 +414,10 @@
     return element.updateComplete;
   });
 
-  // Verify button is visible before clicking
-  await expect(timeline.locator("#jump-to-latest.floating")).toBeVisible();
+  // Verify button is visible before clicking - wait longer for CSS classes to apply
+  await expect(timeline.locator("#jump-to-latest.floating")).toBeVisible({
+    timeout: 10000,
+  });
 
   // Click the jump to latest button
   await timeline.locator("#jump-to-latest").click();
@@ -414,11 +452,15 @@
     return element.updateComplete;
   });
 
-  await expect(timeline.locator(".loading-indicator")).toBeVisible();
-  await expect(timeline.locator(".loading-spinner")).toBeVisible();
-  await expect(timeline.locator(".loading-indicator")).toContainText(
-    "Loading older messages...",
-  );
+  await expect(
+    timeline.locator("[data-testid='loading-indicator']"),
+  ).toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='loading-spinner']"),
+  ).toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='loading-indicator']"),
+  ).toContainText("Loading older messages...");
 });
 
 test("hides loading indicator when not loading", async ({ mount }) => {
@@ -440,7 +482,9 @@
   });
 
   // Should not show loading indicator by default
-  await expect(timeline.locator(".loading-indicator")).not.toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='loading-indicator']"),
+  ).not.toBeVisible();
 });
 
 // Memory Management and Cleanup Tests
@@ -536,9 +580,9 @@
   });
 
   // Verify loading state - should show only the "loading older messages" indicator
-  await expect(timeline.locator(".loading-indicator")).toContainText(
-    "Loading older messages...",
-  );
+  await expect(
+    timeline.locator("[data-testid='loading-indicator']"),
+  ).toContainText("Loading older messages...");
 
   // Reset viewport (should cancel loading)
   await timeline.evaluate((element: SketchTimeline) => {
@@ -552,7 +596,9 @@
   );
   expect(isLoading).toBe(false);
 
-  await expect(timeline.locator(".loading-indicator")).not.toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='loading-indicator']"),
+  ).not.toBeVisible();
 });
 
 // Message Filtering and Ordering Tests
@@ -719,13 +765,19 @@
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(0);
 
   // Should not show welcome box when messages array has content (even if all hidden)
-  await expect(timeline.locator(".welcome-box")).not.toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='welcome-box']"),
+  ).not.toBeVisible();
 
   // Should not show loading indicator
-  await expect(timeline.locator(".loading-indicator")).not.toBeVisible();
+  await expect(
+    timeline.locator("[data-testid='loading-indicator']"),
+  ).not.toBeVisible();
 
   // Timeline container exists but may not be visible due to CSS
-  await expect(timeline.locator(".timeline-container")).toBeAttached();
+  await expect(
+    timeline.locator("[data-testid='timeline-container']"),
+  ).toBeAttached();
 });
 
 test("handles message array updates correctly", async ({ mount }) => {
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 1f1182e..b0edb42 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -1,13 +1,14 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { PropertyValues } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { customElement, property, state } from "lit/decorators.js";
 import { AgentMessage, State } from "../types";
 import "./sketch-timeline-message";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
 import { Ref } from "lit/directives/ref";
 
 @customElement("sketch-timeline")
-export class SketchTimeline extends LitElement {
+export class SketchTimeline extends SketchTailwindElement {
   @property({ attribute: false })
   messages: AgentMessage[] = [];
 
@@ -80,254 +81,81 @@
   // Timeout ID for loading operations
   private loadingTimeoutId: number | null = null;
 
-  static styles = css`
-    /* Hide message content initially to prevent flash of incomplete content */
-    .timeline-container:not(.view-initialized) sketch-timeline-message {
-      opacity: 0;
-      transition: opacity 0.2s ease-in;
-    }
-
-    /* Show content once initial load is complete */
-    .timeline-container.view-initialized sketch-timeline-message {
-      opacity: 1;
-    }
-
-    /* Always show loading indicators */
-    .timeline-container .loading-indicator {
-      opacity: 1;
-    }
-
-    .timeline-container {
-      width: 100%;
-      position: relative;
-      max-width: 100%;
-      margin: 0 auto;
-      padding: 0 15px;
-      box-sizing: border-box;
-      overflow-x: hidden;
-      flex: 1;
-      min-height: 100px; /* Ensure container has height for loading indicator */
-    }
-
-    /* Chat-like timeline styles */
-    .timeline {
-      position: relative;
-      margin: 10px 0;
-      scroll-behavior: smooth;
-    }
-
-    /* Remove the vertical timeline line */
-
-    #scroll-container {
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding-left: 1em;
-      max-width: 100%;
-      width: 100%;
-      height: 100%;
-    }
-
-    :host([compactpadding]) #scroll-container {
-      padding-left: 0;
-    }
-    #jump-to-latest {
-      display: none;
-      position: fixed;
-      bottom: 80px; /* Position right on the boundary */
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(0, 0, 0, 0.6);
-      color: white;
-      border: none;
-      border-radius: 12px;
-      padding: 4px 8px;
-      font-size: 11px;
-      font-weight: 400;
-      cursor: pointer;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-      z-index: 1000;
-      transition: all 0.15s ease;
-      white-space: nowrap;
-      opacity: 0.8;
-    }
-    #jump-to-latest:hover {
-      background-color: rgba(0, 0, 0, 0.8);
-      transform: translateX(-50%) translateY(-1px);
-      opacity: 1;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-    #jump-to-latest:active {
-      transform: translateX(-50%) translateY(0);
-    }
-    #jump-to-latest.floating {
-      display: block;
-    }
-
-    /* Welcome box styles for the empty chat state */
-    .welcome-box {
-      margin: 2rem auto;
-      max-width: 90%;
-      width: 90%;
-      padding: 2rem;
-      border: 2px solid #e0e0e0;
-      border-radius: 8px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-      background-color: #ffffff;
-      text-align: center;
-    }
-
-    .welcome-box-title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-bottom: 1.5rem;
-      text-align: center;
-      color: #333;
-    }
-
-    .welcome-box-content {
-      color: #666; /* Slightly grey font color */
-      line-height: 1.6;
-      font-size: 1rem;
-      text-align: left;
-    }
-
-    /* Thinking indicator styles */
-    .thinking-indicator {
-      padding-left: 85px;
-      margin-top: 5px;
-      margin-bottom: 15px;
-      display: flex;
-    }
-
-    .thinking-bubble {
-      background-color: #f1f1f1;
-      border-radius: 15px;
-      padding: 10px 15px;
-      max-width: 80px;
-      color: black;
-      position: relative;
-      border-bottom-left-radius: 5px;
-    }
-
-    .thinking-dots {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      height: 14px;
-    }
-
-    .dot {
-      width: 6px;
-      height: 6px;
-      background-color: #888;
-      border-radius: 50%;
-      opacity: 0.6;
-    }
-
-    .dot:nth-child(1) {
-      animation: pulse 1.5s infinite ease-in-out;
-    }
-
-    .dot:nth-child(2) {
-      animation: pulse 1.5s infinite ease-in-out 0.3s;
-    }
-
-    .dot:nth-child(3) {
-      animation: pulse 1.5s infinite ease-in-out 0.6s;
-    }
-
-    @keyframes pulse {
-      0%,
-      100% {
-        opacity: 0.4;
-        transform: scale(1);
-      }
-      50% {
-        opacity: 1;
-        transform: scale(1.2);
-      }
-    }
-
-    /* Loading indicator styles */
-    .loading-indicator {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      color: #666;
-      font-size: 14px;
-      gap: 10px;
-    }
-
-    .loading-spinner {
-      width: 20px;
-      height: 20px;
-      border: 2px solid #e0e0e0;
-      border-top: 2px solid #666;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* Print styles for full timeline printing */
-    @media print {
-      .timeline-container {
-        height: auto !important;
-        max-height: none !important;
-        overflow: visible !important;
-        page-break-inside: avoid;
-      }
-
-      .timeline {
-        height: auto !important;
-        max-height: none !important;
-        overflow: visible !important;
-      }
-
-      #scroll-container {
-        height: auto !important;
-        max-height: none !important;
-        overflow: visible !important;
-        overflow-y: visible !important;
-        overflow-x: visible !important;
-      }
-
-      /* Hide the jump to latest button during printing */
-      #jump-to-latest {
-        display: none !important;
-      }
-
-      /* Hide the thinking indicator during printing */
-      .thinking-indicator {
-        display: none !important;
-      }
-
-      /* Hide the loading indicator during printing */
-      .loading-indicator {
-        display: none !important;
-      }
-
-      /* Ensure welcome box prints properly if visible */
-      .welcome-box {
-        page-break-inside: avoid;
-      }
-    }
-  `;
   constructor() {
     super();
 
     // Binding methods
     this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
     this._handleScroll = this._handleScroll.bind(this);
+
+    // Add custom animations and styles that can't be easily done with Tailwind
+    this.addCustomStyles();
+  }
+
+  private addCustomStyles() {
+    const styleId = "sketch-timeline-custom-styles";
+    if (document.getElementById(styleId)) {
+      return; // Already added
+    }
+
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      /* Hide message content initially to prevent flash of incomplete content */
+      .timeline-not-initialized sketch-timeline-message {
+        opacity: 0;
+        transition: opacity 0.2s ease-in;
+      }
+
+      /* Show content once initial load is complete */
+      .timeline-initialized sketch-timeline-message {
+        opacity: 1;
+      }
+
+      /* Custom animations for thinking dots */
+      @keyframes thinking-pulse {
+        0%, 100% {
+          opacity: 0.4;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 1;
+          transform: scale(1.2);
+        }
+      }
+
+      .thinking-dot-1 {
+        animation: thinking-pulse 1.5s infinite ease-in-out;
+      }
+
+      .thinking-dot-2 {
+        animation: thinking-pulse 1.5s infinite ease-in-out 0.3s;
+      }
+
+      .thinking-dot-3 {
+        animation: thinking-pulse 1.5s infinite ease-in-out 0.6s;
+      }
+
+      /* Custom spinner animation */
+      @keyframes loading-spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .loading-spinner {
+        animation: loading-spin 1s linear infinite;
+      }
+
+      /* Custom compact padding styling */
+      .compact-padding .scroll-container {
+        padding-left: 0;
+      }
+    `;
+    document.head.appendChild(style);
   }
 
   /**
@@ -973,27 +801,39 @@
   render() {
     // Check if messages array is empty and render welcome box if it is
     if (this.messages.length === 0) {
+      const compactClass = this.compactPadding ? "compact-padding" : "";
       return html`
-        <div style="position: relative; height: 100%;">
-          <div id="scroll-container">
-            <div class="welcome-box">
-              <h2 class="welcome-box-title">How to use Sketch</h2>
-              <p class="welcome-box-content">
+        <div class="relative h-full">
+          <div
+            id="scroll-container"
+            class="overflow-y-auto overflow-x-hidden pl-4 max-w-full w-full h-full ${compactClass} scroll-container print:h-auto print:max-h-none print:overflow-visible"
+          >
+            <div
+              class="my-8 mx-auto max-w-[90%] w-[90%] p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center print:break-inside-avoid"
+              data-testid="welcome-box"
+            >
+              <h2
+                class="text-2xl font-semibold mb-6 text-center text-gray-800"
+                data-testid="welcome-box-title"
+              >
+                How to use Sketch
+              </h2>
+              <p class="text-gray-600 leading-relaxed text-base text-left">
                 Sketch is an agentic coding assistant.
               </p>
 
-              <p class="welcome-box-content">
+              <p class="text-gray-600 leading-relaxed text-base text-left">
                 Sketch has created a container with your repo.
               </p>
 
-              <p class="welcome-box-content">
+              <p class="text-gray-600 leading-relaxed text-base text-left">
                 Ask it to implement a task or answer a question in the chat box
                 below. It can edit and run your code, all in the container.
                 Sketch will create commits in a newly created git branch, which
                 you can look at and comment on in the Diff tab. Once you're
                 done, you'll find that branch available in your (original) repo.
               </p>
-              <p class="welcome-box-content">
+              <p class="text-gray-600 leading-relaxed text-base text-left">
                 Because Sketch operates a container per session, you can run
                 Sketch in parallel to work on multiple ideas or even the same
                 idea with different approaches.
@@ -1009,26 +849,47 @@
       this.llmCalls > 0 || (this.toolCalls && this.toolCalls.length > 0);
 
     // Apply view-initialized class when initial load is complete
-    const containerClass = this.isInitialLoadComplete
-      ? "timeline-container view-initialized"
-      : "timeline-container";
+    const timelineStateClass = this.isInitialLoadComplete
+      ? "timeline-initialized"
+      : "timeline-not-initialized";
+
+    // Compact padding class
+    const compactClass = this.compactPadding ? "compact-padding" : "";
 
     return html`
-      <div style="position: relative; height: 100%;">
-        <div id="scroll-container">
-          <div class="${containerClass}">
+      <div class="relative h-full">
+        <div
+          id="scroll-container"
+          class="overflow-y-auto overflow-x-hidden pl-4 max-w-full w-full h-full ${compactClass} scroll-container print:h-auto print:max-h-none print:overflow-visible"
+        >
+          <div
+            class="w-full relative max-w-full mx-auto px-[15px] box-border overflow-x-hidden flex-1 min-h-[100px] ${timelineStateClass} print:h-auto print:max-h-none print:overflow-visible print:break-inside-avoid"
+            data-testid="timeline-container"
+          >
             ${!this.isInitialLoadComplete
               ? html`
-                  <div class="loading-indicator">
-                    <div class="loading-spinner"></div>
+                  <div
+                    class="flex items-center justify-center p-5 text-gray-600 text-sm gap-2.5 opacity-100 print:hidden"
+                    data-testid="loading-indicator"
+                  >
+                    <div
+                      class="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full loading-spinner"
+                      data-testid="loading-spinner"
+                    ></div>
                     <span>Loading conversation...</span>
                   </div>
                 `
               : ""}
             ${this.isLoadingOlderMessages
               ? html`
-                  <div class="loading-indicator">
-                    <div class="loading-spinner"></div>
+                  <div
+                    class="flex items-center justify-center p-5 text-gray-600 text-sm gap-2.5 opacity-100 print:hidden"
+                    data-testid="loading-indicator"
+                  >
+                    <div
+                      class="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full loading-spinner"
+                      data-testid="loading-spinner"
+                    ></div>
                     <span>Loading older messages...</span>
                   </div>
                 `
@@ -1061,12 +922,31 @@
               : ""}
             ${isThinking && this.isInitialLoadComplete
               ? html`
-                  <div class="thinking-indicator">
-                    <div class="thinking-bubble">
-                      <div class="thinking-dots">
-                        <div class="dot"></div>
-                        <div class="dot"></div>
-                        <div class="dot"></div>
+                  <div
+                    class="pl-[85px] mt-1.5 mb-4 flex"
+                    data-testid="thinking-indicator"
+                    style="display: flex; padding-left: 85px; margin-top: 6px; margin-bottom: 16px;"
+                  >
+                    <div
+                      class="bg-gray-100 rounded-2xl px-4 py-2.5 max-w-20 text-black relative rounded-bl-[5px]"
+                      data-testid="thinking-bubble"
+                    >
+                      <div
+                        class="flex items-center justify-center gap-1 h-3.5"
+                        data-testid="thinking-dots"
+                      >
+                        <div
+                          class="w-1.5 h-1.5 bg-gray-500 rounded-full opacity-60 thinking-dot-1"
+                          data-testid="thinking-dot"
+                        ></div>
+                        <div
+                          class="w-1.5 h-1.5 bg-gray-500 rounded-full opacity-60 thinking-dot-2"
+                          data-testid="thinking-dot"
+                        ></div>
+                        <div
+                          class="w-1.5 h-1.5 bg-gray-500 rounded-full opacity-60 thinking-dot-3"
+                          data-testid="thinking-dot"
+                        ></div>
                       </div>
                     </div>
                   </div>
@@ -1076,7 +956,9 @@
         </div>
         <div
           id="jump-to-latest"
-          class="${this.scrollingState}"
+          class="${this.scrollingState === "floating"
+            ? "block floating"
+            : "hidden"} fixed bottom-20 left-1/2 -translate-x-1/2 bg-black/60 text-white border-none rounded-xl px-2 py-1 text-xs font-normal cursor-pointer shadow-md z-[1000] transition-all duration-150 ease-out whitespace-nowrap opacity-80 hover:bg-black/80 hover:-translate-y-0.5 hover:opacity-100 hover:shadow-lg active:translate-y-0 print:hidden"
           @click=${this.scrollToBottomWithRetry}
         >
           ↓ Jump to bottom