diff --git a/webui/src/web-components/sketch-timeline.test.ts b/webui/src/web-components/sketch-timeline.test.ts
index 8384453..e803a2e 100644
--- a/webui/src/web-components/sketch-timeline.test.ts
+++ b/webui/src/web-components/sketch-timeline.test.ts
@@ -2,6 +2,51 @@
 import { SketchTimeline } from "./sketch-timeline";
 import { AgentMessage } from "../types";
 
+// Mock DataManager class that mimics the real DataManager interface
+class MockDataManager {
+  private eventListeners: Map<string, Array<(...args: any[]) => void>> =
+    new Map();
+  private isInitialLoadComplete: boolean = false;
+
+  constructor() {
+    this.eventListeners.set("initialLoadComplete", []);
+  }
+
+  addEventListener(event: string, callback: (...args: any[]) => void): void {
+    const listeners = this.eventListeners.get(event) || [];
+    listeners.push(callback);
+    this.eventListeners.set(event, listeners);
+  }
+
+  removeEventListener(event: string, callback: (...args: any[]) => void): void {
+    const listeners = this.eventListeners.get(event) || [];
+    const index = listeners.indexOf(callback);
+    if (index > -1) {
+      listeners.splice(index, 1);
+    }
+  }
+
+  getIsInitialLoadComplete(): boolean {
+    return this.isInitialLoadComplete;
+  }
+
+  triggerInitialLoadComplete(
+    messageCount: number = 0,
+    expectedCount: number = 0,
+  ): void {
+    this.isInitialLoadComplete = true;
+    const listeners = this.eventListeners.get("initialLoadComplete") || [];
+    // Call each listener with the event data object as expected by the component
+    listeners.forEach((listener) => {
+      try {
+        listener({ messageCount, expectedCount });
+      } catch (e) {
+        console.error("Error in event listener:", e);
+      }
+    });
+  }
+}
+
 // Helper function to create mock timeline messages
 function createMockMessage(props: Partial<AgentMessage> = {}): AgentMessage {
   return {
@@ -42,9 +87,12 @@
 }
 
 test("renders empty state when no messages", async ({ mount }) => {
+  const mockDataManager = new MockDataManager();
+
   const timeline = await mount(SketchTimeline, {
     props: {
       messages: [],
+      dataManager: mockDataManager,
     },
   });
 
@@ -56,28 +104,46 @@
 
 test("renders messages when provided", async ({ mount }) => {
   const messages = createMockMessages(5);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   await expect(timeline.locator(".timeline-container")).toBeVisible();
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(5);
 });
 
 test("shows thinking indicator when agent is active", async ({ mount }) => {
   const messages = createMockMessages(3);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
       llmCalls: 1,
       toolCalls: ["thinking"],
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    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);
@@ -89,13 +155,22 @@
     createMockMessage({ idx: 1, content: "Hidden message", hide_output: true }),
     createMockMessage({ idx: 2, content: "Visible message 2" }),
   ];
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Should only show 2 visible messages
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(2);
 
@@ -117,14 +192,23 @@
   mount,
 }) => {
   const messages = createMockMessages(50);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
       initialMessageCount: 10,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Should only render the most recent 10 messages initially
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(10);
 
@@ -139,15 +223,24 @@
 
 test("handles viewport expansion correctly", async ({ mount }) => {
   const messages = createMockMessages(50);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
       initialMessageCount: 10,
       loadChunkSize: 5,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Initially shows 10 messages
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(10);
 
@@ -174,14 +267,23 @@
   mount,
 }) => {
   const messages = createMockMessages(50);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
       initialMessageCount: 10,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Expand viewport
   await timeline.evaluate((element: SketchTimeline) => {
     (element as any).visibleMessageStartIndex = 10;
@@ -210,13 +312,22 @@
   mount,
 }) => {
   const messages = createMockMessages(10);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Initially should be pinned to latest (button hidden)
   await expect(timeline.locator("#jump-to-latest.floating")).not.toBeVisible();
 
@@ -233,13 +344,22 @@
 
 test("jump-to-latest button calls scroll method", async ({ mount }) => {
   const messages = createMockMessages(10);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Initialize the scroll tracking flag and set to floating state to show button
   await timeline.evaluate((element: SketchTimeline) => {
     // Initialize tracking flag
@@ -277,15 +397,18 @@
   mount,
 }) => {
   const messages = createMockMessages(10);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
-  // Simulate loading state
+  // Set initial load complete first, then simulate loading older messages
   await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
     (element as any).isLoadingOlderMessages = true;
     element.requestUpdate();
     return element.updateComplete;
@@ -300,13 +423,22 @@
 
 test("hides loading indicator when not loading", async ({ mount }) => {
   const messages = createMockMessages(10);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Set initial load complete so no loading indicator is shown
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Should not show loading indicator by default
   await expect(timeline.locator(".loading-indicator")).not.toBeVisible();
 });
@@ -385,23 +517,28 @@
 
 test("cancels loading operations on viewport reset", async ({ mount }) => {
   const messages = createMockMessages(50);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
-  // Set loading state
+  // Set initial load complete and then loading older messages state
   await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
     (element as any).isLoadingOlderMessages = true;
     (element as any).loadingAbortController = new AbortController();
     element.requestUpdate();
     return element.updateComplete;
   });
 
-  // Verify loading state
-  await expect(timeline.locator(".loading-indicator")).toBeVisible();
+  // Verify loading state - should show only the "loading older messages" indicator
+  await expect(timeline.locator(".loading-indicator")).toContainText(
+    "Loading older messages...",
+  );
 
   // Reset viewport (should cancel loading)
   await timeline.evaluate((element: SketchTimeline) => {
@@ -440,13 +577,22 @@
       timestamp: "2023-01-01T12:00:00Z",
     }),
   ];
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   const messageElements = timeline.locator("sketch-timeline-message");
 
   // Check order
@@ -463,13 +609,22 @@
     createMockMessage({ idx: 1, content: "Second message", type: "agent" }),
     createMockMessage({ idx: 2, content: "Third message", type: "user" }),
   ];
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Check that messages have the expected structure
   // The first message should not have a previous message context
   // The second message should have the first as previous, etc.
@@ -544,13 +699,22 @@
     createMockMessage({ idx: 0, content: "Hidden 1", hide_output: true }),
     createMockMessage({ idx: 1, content: "Hidden 2", hide_output: true }),
   ];
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   // Should render the timeline structure but with no visible messages
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(0);
 
@@ -566,13 +730,22 @@
 
 test("handles message array updates correctly", async ({ mount }) => {
   const initialMessages = createMockMessages(5);
+  const mockDataManager = new MockDataManager();
 
   const timeline = await mount(SketchTimeline, {
     props: {
       messages: initialMessages,
+      dataManager: mockDataManager,
     },
   });
 
+  // Directly set the isInitialLoadComplete state to bypass the event system for testing
+  await timeline.evaluate((element: SketchTimeline) => {
+    (element as any).isInitialLoadComplete = true;
+    element.requestUpdate();
+    return element.updateComplete;
+  });
+
   await expect(timeline.locator("sketch-timeline-message")).toHaveCount(5);
 
   // Update with more messages