@copilotkit/web-inspector 1.61.2 → 1.62.0

package/src/__tests__/web-inspector.spec.ts

@@ -1,4 +1,9 @@
-import { WebInspectorElement, ɵCpkThreadDetails } from "../index.js";
+import {
+  CpkThreadInspector,
+  WebInspectorElement,
+  ɵCpkThreadDetails,
+} from "../index.js";
+import type { ThreadDebuggerProvider } from "../index.js";
 import type { CopilotKitCore } from "@copilotkit/core";
 import { CopilotKitCoreRuntimeConnectionStatus } from "@copilotkit/core";
 import type { CopilotKitCoreSubscriber } from "@copilotkit/core";
@@ -16,6 +21,18 @@ type InspectorInternals = {
   cachedTools: Array<{ name: string }>;
 };
 
+type InspectorThreadViewInternals = {
+  isOpen: boolean;
+  selectedMenu: "threads";
+  selectedThreadId: string | null;
+  _threads: Array<{
+    id: string;
+    name?: string | null;
+    agentId: string;
+    updatedAt?: string | null;
+  }>;
+};
+
 type InspectorContextInternals = {
   contextStore: Record<string, { description?: string; value: unknown }>;
   copyContextValue: (value: unknown, id: string) => Promise<void>;
@@ -295,7 +312,7 @@ describe("WebInspectorElement", () => {
 // CpkThreadDetails — per-panel TemplateResult cache invariants
 // ─────────────────────────────────────────────────────────────────────────
 //
-// The conversation / agent-state / events panels each cache the rendered
+// The timeline / state / raw-events panels each cache the rendered
 // TemplateResult by reference of the underlying data so tab switches don't
 // re-iterate over hundreds of items. These tests pin down the cache-key
 // contract: when the data reassigns, the cache MUST drop, and when the
@@ -310,9 +327,16 @@ type ThreadDetailsInternals = {
   headers: Record<string, string>;
   threadInspectionAvailable: boolean;
   liveMessageVersion: number;
+  provider: ThreadDebuggerProvider | null;
+  _fetchedMetadata: Record<string, unknown> | null;
   _conversation: Array<Record<string, unknown>>;
+  agentEventsInput: Array<Record<string, unknown>>;
   _fetchedState: Record<string, unknown> | null;
-  _fetchedEvents: Array<unknown> | null;
+  _fetchedEvents: Array<Record<string, unknown>> | null;
+  _timelineItemsCache: {
+    events: Array<Record<string, unknown>>;
+    items: Array<Record<string, unknown>>;
+  } | null;
   _expandedTools: Set<string>;
   _expandedMessages: Set<string>;
   _stateNotAvailable: boolean;
@@ -320,13 +344,18 @@ type ThreadDetailsInternals = {
   _loadingMessages: boolean;
   _loadingState: boolean;
   _loadingEvents: boolean;
+  activeTimelineItems: Array<Record<string, unknown>>;
   _panelTplCache: Map<string, { key: readonly unknown[]; tpl: unknown }>;
   fetchMessages: (threadId: string) => Promise<void>;
   fetchEvents: (threadId: string) => Promise<void>;
   fetchState: (threadId: string) => Promise<void>;
+  renderTimeline: () => unknown;
   renderConversation: () => unknown;
   renderState: () => unknown;
   renderEvents: () => unknown;
+  timelineItemsFromEvents: (
+    events: Array<Record<string, unknown>>,
+  ) => Array<Record<string, unknown>>;
 };
 
 function createThreadDetails(): {
@@ -341,6 +370,35 @@ function createThreadDetails(): {
   return { el, internals };
 }
 
+function createThreadInspector(): {
+  el: CpkThreadInspector;
+  internals: ThreadDetailsInternals;
+} {
+  const el = new CpkThreadInspector();
+  document.body.appendChild(el);
+  const internals = el as unknown as ThreadDetailsInternals;
+  return { el, internals };
+}
+
+async function flushProviderWork(el: CpkThreadInspector): Promise<void> {
+  await Promise.resolve();
+  await el.updateComplete;
+}
+
+function createDeferred<T>(): {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (reason?: unknown) => void;
+} {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
 describe("ɵCpkThreadDetails caching", () => {
   beforeEach(() => {
     document.body.innerHTML = "";
@@ -364,16 +422,25 @@ describe("ɵCpkThreadDetails caching", () => {
     await el.updateComplete;
   }
 
-  it("threadId change drops all three template caches", async () => {
+  it("threadId change drops template and timeline item caches", async () => {
     const { el, internals } = createThreadDetails();
     await settleThread(el, internals, "t1");
 
     // Hand-build cache entries for all three panels so we don't have to
     // drive every render path through the DOM. The presence of any entry
     // is what the assertion below checks for; what they hold is irrelevant.
-    internals._panelTplCache.set("conversation", { key: [], tpl: "c" });
-    internals._panelTplCache.set("agent-state", { key: [], tpl: "s" });
-    internals._panelTplCache.set("ag-ui-events", { key: [], tpl: "e" });
+    internals._panelTplCache.set("timeline", { key: [], tpl: "c" });
+    internals._panelTplCache.set("state", { key: [], tpl: "s" });
+    internals._panelTplCache.set("raw-events", { key: [], tpl: "e" });
+    internals.agentEventsInput = [
+      {
+        type: "RUN_STARTED",
+        timestamp: "2026-06-25T10:00:00.000Z",
+        payload: {},
+      },
+    ];
+    internals.renderTimeline();
+    expect(internals._timelineItemsCache).not.toBeNull();
 
     // Switch to thread t2 — the threadId branch in `updated()` should
     // empty the cache map.
@@ -381,6 +448,7 @@ describe("ɵCpkThreadDetails caching", () => {
     await el.updateComplete;
 
     expect(internals._panelTplCache.size).toBe(0);
+    expect(internals._timelineItemsCache).toBeNull();
   });
 
   it("does not fetch messages, events, or state when threadInspectionAvailable is omitted", async () => {
@@ -434,11 +502,21 @@ describe("ɵCpkThreadDetails caching", () => {
       await internals.fetchEvents("thread one");
       await internals.fetchState("thread one");
 
-      expect(fetchSpy.mock.calls.map((call) => String(call[0]))).toEqual([
+      const requestedUrls = fetchSpy.mock.calls.map((call) => String(call[0]));
+      expect(requestedUrls).toContain(
         "http://localhost:4000/api/threads/thread%20one/messages",
+      );
+      expect(requestedUrls).toContain(
         "http://localhost:4000/api/threads/thread%20one/events",
+      );
+      expect(requestedUrls).toContain(
         "http://localhost:4000/api/threads/thread%20one/state",
-      ]);
+      );
+      expect(
+        requestedUrls.every(
+          (url) => !url.includes("/api//threads/") && !url.includes("one//"),
+        ),
+      ).toBe(true);
     } finally {
       fetchSpy.mockRestore();
     }
@@ -453,7 +531,7 @@ describe("ɵCpkThreadDetails caching", () => {
     ];
 
     const tplA = internals.renderConversation();
-    expect(internals._panelTplCache.get("conversation")?.tpl).toBe(tplA);
+    expect(internals._panelTplCache.get("timeline-fallback")?.tpl).toBe(tplA);
 
     // Cache hit: same array reference, same expand sets — same TemplateResult.
     expect(internals.renderConversation()).toBe(tplA);
@@ -468,7 +546,7 @@ describe("ɵCpkThreadDetails caching", () => {
 
     const tplB = internals.renderConversation();
     expect(tplB).not.toBe(tplA);
-    expect(internals._panelTplCache.get("conversation")?.tpl).toBe(tplB);
+    expect(internals._panelTplCache.get("timeline-fallback")?.tpl).toBe(tplB);
   });
 
   it("conversation cache invalidates when expand state changes", async () => {
@@ -507,12 +585,95 @@ describe("ɵCpkThreadDetails caching", () => {
     expect(internals.renderConversation()).not.toBe(expanded);
   });
 
+  it("keeps timeline and message fallback template caches separate", async () => {
+    const { el, internals } = createThreadDetails();
+    await settleThread(el, internals, "t1");
+
+    const events = [
+      {
+        type: "RUN_STARTED",
+        timestamp: "2026-06-25T10:00:00.000Z",
+        payload: {},
+        sourceIndex: 1,
+      },
+    ];
+    internals._fetchedEvents = events;
+
+    const timelineTpl = internals.renderTimeline();
+    expect(internals._panelTplCache.get("timeline")?.tpl).toBe(timelineTpl);
+
+    internals._fetchedEvents = [];
+    internals._conversation = [
+      { id: "m1", type: "user", content: "fallback", createdAt: "" },
+    ];
+
+    const fallbackTpl = internals.renderTimeline();
+    expect(fallbackTpl).not.toBe(timelineTpl);
+    expect(internals._panelTplCache.get("timeline")?.tpl).toBe(timelineTpl);
+    expect(internals._panelTplCache.get("timeline-fallback")?.tpl).toBe(
+      fallbackTpl,
+    );
+
+    internals._fetchedEvents = events;
+    expect(internals.renderTimeline()).toBe(timelineTpl);
+  });
+
+  it("does not recompute timeline items when renderTimeline returns a cached template", async () => {
+    const { el, internals } = createThreadDetails();
+    await settleThread(el, internals, "t1");
+
+    internals._fetchedEvents = [
+      {
+        type: "RUN_STARTED",
+        timestamp: "2026-06-25T10:00:00.000Z",
+        payload: {},
+        sourceIndex: 1,
+      },
+    ];
+
+    const normalizeSpy = vi.spyOn(internals, "timelineItemsFromEvents");
+
+    const timelineTpl = internals.renderTimeline();
+
+    expect(internals.renderTimeline()).toBe(timelineTpl);
+    expect(normalizeSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps live fallback event references stable for timeline and raw event caches", async () => {
+    const { el, internals } = createThreadDetails();
+    await settleThread(el, internals, "t1");
+
+    internals.agentEventsInput = [
+      {
+        type: "RUN_STARTED",
+        timestamp: "2026-06-25T10:00:00.000Z",
+        payload: {},
+      },
+    ];
+
+    const normalizeSpy = vi.spyOn(internals, "timelineItemsFromEvents");
+
+    const timelineTpl = internals.renderTimeline();
+    const eventsTpl = internals.renderEvents();
+
+    expect(internals.renderTimeline()).toBe(timelineTpl);
+    expect(internals.renderEvents()).toBe(eventsTpl);
+    expect(normalizeSpy).toHaveBeenCalledTimes(1);
+  });
+
   it("state and events caches invalidate when their fetched data is reassigned", async () => {
     const { el, internals } = createThreadDetails();
     await settleThread(el, internals, "t1");
 
     internals._fetchedState = { foo: "bar" };
-    internals._fetchedEvents = [{ type: "RUN_STARTED" }];
+    internals._fetchedEvents = [
+      {
+        type: "RUN_STARTED",
+        timestamp: "2026-06-25T10:00:00.000Z",
+        payload: {},
+        sourceIndex: 1,
+      },
+    ];
 
     const stateA = internals.renderState();
     const eventsA = internals.renderEvents();
@@ -521,13 +682,487 @@ describe("ɵCpkThreadDetails caching", () => {
 
     // Reassign both — fresh references after a refetch.
     internals._fetchedState = { foo: "baz" };
-    internals._fetchedEvents = [{ type: "RUN_FINISHED" }];
+    internals._fetchedEvents = [
+      {
+        type: "RUN_FINISHED",
+        timestamp: "2026-06-25T10:00:01.000Z",
+        payload: {},
+        sourceIndex: 1,
+      },
+    ];
 
     expect(internals.renderState()).not.toBe(stateA);
     expect(internals.renderEvents()).not.toBe(eventsA);
   });
 });
 
+describe("CpkThreadInspector provider contract", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("registers the stable custom element and renders a normalized provider-backed timeline", async () => {
+    expect(customElements.get("cpk-thread-inspector")).toBe(CpkThreadInspector);
+
+    const provider: ThreadDebuggerProvider = {
+      getThreadMetadata: vi.fn().mockResolvedValue({
+        id: "thread-1234567890",
+        agentId: "agent-a",
+        endUserId: "user-a",
+        status: "active",
+        createdAt: "2026-06-25T10:00:00.000Z",
+        updatedAt: "2026-06-25T10:00:01.000Z",
+      }),
+      getMessages: vi.fn().mockResolvedValue([]),
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "RUN_STARTED",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: { runId: "run-1" },
+        },
+        {
+          type: "TEXT_MESSAGE_START",
+          timestamp: "2026-06-25T10:00:00.100Z",
+          payload: { messageId: "m1", role: "assistant" },
+        },
+        {
+          type: "TEXT_MESSAGE_CONTENT",
+          timestamp: "2026-06-25T10:00:00.200Z",
+          payload: { messageId: "m1", delta: "hello from events" },
+        },
+        {
+          type: "TOOL_CALL_START",
+          timestamp: "2026-06-25T10:00:00.300Z",
+          payload: { toolCallId: "tc1", toolCallName: "lookup_docs" },
+        },
+        {
+          type: "TOOL_CALL_ARGS",
+          timestamp: "2026-06-25T10:00:00.400Z",
+          payload: { toolCallId: "tc1", delta: '{"broken":' },
+        },
+        {
+          type: "TOOL_CALL_END",
+          timestamp: "2026-06-25T10:00:00.500Z",
+          payload: { toolCallId: "tc1" },
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-1234567890";
+    await flushProviderWork(el);
+
+    expect(provider.getThreadMetadata).toHaveBeenCalledWith(
+      "thread-1234567890",
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+    expect(provider.getEvents).toHaveBeenCalledWith(
+      "thread-1234567890",
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+    expect(provider.getMessages).not.toHaveBeenCalled();
+    expect(internals._fetchedMetadata?.agentId).toBe("agent-a");
+    expect(internals._fetchedEvents).toHaveLength(6);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Timeline");
+    expect(text).toContain("Raw AG-UI Events");
+    expect(text).toContain("State");
+    expect(text).toContain("Run started");
+    expect(text).toContain("assistant message");
+    expect(text).toContain("hello from events");
+    expect(text).toContain("lookup_docs");
+    expect(text).toContain("Could not decode tool call arguments");
+    expect(text).toContain("Source event #1");
+    expect(text).toContain("Source event #6");
+    expect(text).toContain("agent-a");
+    expect(text).toContain("user-a");
+    expect(text).not.toContain("Rename");
+    expect(text).not.toContain("Archive");
+    expect(text).not.toContain("Delete");
+  });
+
+  it("source-event references reveal raw events and state stays lazy-loaded", async () => {
+    const provider: ThreadDebuggerProvider = {
+      getMessages: vi.fn().mockResolvedValue([]),
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "RUN_STARTED",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: { runId: "run-1" },
+        },
+      ]),
+      getState: vi.fn().mockResolvedValue({ step: 1 }),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-1";
+    await flushProviderWork(el);
+
+    expect(provider.getEvents).toHaveBeenCalledTimes(1);
+    expect(provider.getState).not.toHaveBeenCalled();
+    expect(internals._fetchedEvents?.[0]).toMatchObject({
+      type: "RUN_STARTED",
+      payload: { runId: "run-1" },
+    });
+
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__source-link")
+      ?.click();
+    await flushProviderWork(el);
+
+    expect(
+      el.shadowRoot?.querySelector<HTMLElement>(
+        '.cpk-td__event[data-source-index="1"]',
+      ),
+    ).not.toBeNull();
+    expect(provider.getEvents).toHaveBeenCalledTimes(1);
+
+    el.shadowRoot
+      ?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[2]
+      ?.click();
+    await flushProviderWork(el);
+
+    expect(provider.getState).toHaveBeenCalledWith(
+      "thread-1",
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+    expect(internals._fetchedState).toEqual({ step: 1 });
+  });
+
+  it("reloads when a provider arrives after threadId and when provider identity swaps for the same thread", async () => {
+    const firstEvents =
+      createDeferred<
+        Awaited<ReturnType<NonNullable<ThreadDebuggerProvider["getEvents"]>>>
+      >();
+    const firstSignals: AbortSignal[] = [];
+    const firstProvider: ThreadDebuggerProvider = {
+      getEvents: vi.fn((_threadId, options) => {
+        firstSignals.push(options.signal);
+        return firstEvents.promise;
+      }),
+    };
+    const secondProvider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "RUN_FINISHED",
+          timestamp: "2026-06-25T10:00:01.000Z",
+          payload: { runId: "second-run" },
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.threadId = "thread-1";
+    await flushProviderWork(el);
+
+    expect(firstProvider.getEvents).not.toHaveBeenCalled();
+
+    internals.provider = firstProvider;
+    await flushProviderWork(el);
+
+    expect(firstProvider.getEvents).toHaveBeenCalledWith(
+      "thread-1",
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+
+    internals.provider = secondProvider;
+    await flushProviderWork(el);
+
+    expect(firstSignals[0]?.aborted).toBe(true);
+    await vi.waitFor(() => {
+      expect(secondProvider.getEvents).toHaveBeenCalledWith(
+        "thread-1",
+        expect.objectContaining({ signal: expect.any(AbortSignal) }),
+      );
+      expect(internals._fetchedEvents?.[0]?.type).toBe("RUN_FINISHED");
+      expect(internals._fetchedEvents?.[0]?.payload).toEqual({
+        runId: "second-run",
+      });
+    });
+
+    firstEvents.resolve([
+      {
+        type: "RUN_STARTED",
+        timestamp: "2026-06-25T10:00:00.000Z",
+        payload: { runId: "stale-run" },
+      },
+    ]);
+    await Promise.resolve();
+
+    expect(internals._fetchedEvents?.[0]?.payload).toEqual({
+      runId: "second-run",
+    });
+  });
+
+  it("renders raw AG-UI events with top-level fields preserved when payload is present", async () => {
+    const provider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "TEXT_MESSAGE_CONTENT",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: { messageId: "m1", delta: "hello" },
+          runId: "top-level-run",
+          sequence: 42,
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-raw";
+    await flushProviderWork(el);
+
+    expect(internals._fetchedEvents?.[0]?.payload).toEqual({
+      messageId: "m1",
+      delta: "hello",
+    });
+    expect(internals._fetchedEvents?.[0]?.rawEvent).toMatchObject({
+      runId: "top-level-run",
+      sequence: 42,
+      payload: { messageId: "m1", delta: "hello" },
+    });
+
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__source-link")
+      ?.click();
+    await flushProviderWork(el);
+
+    const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("top-level-run");
+    expect(text).toContain("sequence");
+    expect(text).toContain("messageId");
+    expect(text).toContain("hello");
+  });
+
+  it("ignores stale runtime 501 availability results after the selected thread changes", async () => {
+    const t1Events = createDeferred<Response>();
+    const t1State = createDeferred<Response>();
+    const t2Events = createDeferred<Response>();
+    const t2State = createDeferred<Response>();
+    const fetchMock = vi.fn((url: string) => {
+      if (url.endsWith("/threads/t1/events")) return t1Events.promise;
+      if (url.endsWith("/threads/t1/state")) return t1State.promise;
+      if (url.endsWith("/threads/t2/events")) return t2Events.promise;
+      if (url.endsWith("/threads/t2/state")) return t2State.promise;
+      if (url.endsWith("/threads/t2/messages")) {
+        return Promise.resolve(
+          new Response(JSON.stringify({ messages: [] }), { status: 200 }),
+        );
+      }
+      return Promise.reject(new Error(`Unexpected URL ${url}`));
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    const { el, internals } = createThreadInspector();
+
+    internals.runtimeUrl = "http://runtime";
+    internals.threadInspectionAvailable = true;
+    internals.threadId = "t1";
+    await flushProviderWork(el);
+    const t1StatePromise = internals.fetchState("t1");
+
+    internals.threadId = "t2";
+    await flushProviderWork(el);
+    const t2StatePromise = internals.fetchState("t2");
+
+    t1Events.resolve(new Response(null, { status: 501 }));
+    t1State.resolve(new Response(null, { status: 501 }));
+    t2Events.resolve(
+      new Response(
+        JSON.stringify({
+          events: [
+            {
+              type: "RUN_STARTED",
+              timestamp: "2026-06-25T10:00:00.000Z",
+              payload: { runId: "fresh" },
+            },
+          ],
+        }),
+        { status: 200 },
+      ),
+    );
+    t2State.resolve(
+      new Response(JSON.stringify({ state: { current: "fresh" } }), {
+        status: 200,
+      }),
+    );
+
+    await Promise.all([t1StatePromise, t2StatePromise]);
+    await vi.waitFor(() => {
+      expect(internals._eventsNotAvailable).toBe(false);
+      expect(internals._stateNotAvailable).toBe(false);
+      expect(internals._fetchedEvents?.[0]?.payload).toEqual({
+        runId: "fresh",
+      });
+      expect(internals._fetchedState).toEqual({ current: "fresh" });
+    });
+  });
+
+  it("refetches runtime thread data when headers change for the same thread", async () => {
+    const fetchMock = vi.fn(
+      (_url: string, init?: { headers?: Record<string, string> }) =>
+        Promise.resolve(
+          new Response(
+            JSON.stringify({
+              events: [
+                {
+                  type: "RUN_STARTED",
+                  timestamp: "2026-06-25T10:00:00.000Z",
+                  payload: {
+                    auth: init?.headers?.Authorization,
+                  },
+                },
+              ],
+            }),
+            { status: 200 },
+          ),
+        ),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    const { el, internals } = createThreadInspector();
+
+    internals.runtimeUrl = "http://runtime";
+    internals.threadInspectionAvailable = true;
+    internals.headers = { Authorization: "Bearer first" };
+    internals.threadId = "thread-1";
+    await flushProviderWork(el);
+
+    await vi.waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(internals._fetchedEvents?.[0]?.payload).toEqual({
+        auth: "Bearer first",
+      });
+    });
+
+    internals.headers = { Authorization: "Bearer second" };
+    await flushProviderWork(el);
+
+    await vi.waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(2);
+      expect(internals._fetchedEvents?.[0]?.payload).toEqual({
+        auth: "Bearer second",
+      });
+    });
+    expect(headersOf(fetchMock.mock.calls.at(-1)!)).toMatchObject({
+      Authorization: "Bearer second",
+    });
+  });
+
+  it("loads runtime messages when event history is empty so timeline fallback and counts work", async () => {
+    const fetchMock = vi.fn((url: string) => {
+      if (url.endsWith("/threads/thread-1/events")) {
+        return Promise.resolve(
+          new Response(JSON.stringify({ events: [] }), { status: 200 }),
+        );
+      }
+      if (url.endsWith("/threads/thread-1/messages")) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({
+              messages: [
+                { id: "u1", role: "user", content: "historical hello" },
+                { id: "a1", role: "assistant", content: "historical reply" },
+              ],
+            }),
+            { status: 200 },
+          ),
+        );
+      }
+      return Promise.reject(new Error(`Unexpected URL ${url}`));
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    const { el, internals } = createThreadInspector();
+
+    internals.runtimeUrl = "http://runtime";
+    internals.threadInspectionAvailable = true;
+    internals.threadId = "thread-1";
+    await flushProviderWork(el);
+
+    await vi.waitFor(() => {
+      expect(internals._fetchedEvents).toEqual([]);
+      expect(internals._conversation).toHaveLength(2);
+      expect(el.shadowRoot?.textContent ?? "").toContain("historical hello");
+      expect(el.shadowRoot?.textContent ?? "").toContain("historical reply");
+    });
+
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__panel-toggle")
+      ?.click();
+    await flushProviderWork(el);
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Messages");
+    expect(el.shadowRoot?.textContent ?? "").toContain("2");
+  });
+
+  it("renders unsupported raw events as timeline rows instead of leaving the first tab empty", async () => {
+    const provider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "THREAD_STATE_WRITTEN",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: { checkpointId: "state-1", status: "ok" },
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-raw-event-only";
+    await flushProviderWork(el);
+
+    expect(internals.activeTimelineItems).toHaveLength(1);
+    expect(el.shadowRoot?.textContent ?? "").toContain("THREAD_STATE_WRITTEN");
+    expect(el.shadowRoot?.textContent ?? "").toContain("checkpointId");
+    expect(el.shadowRoot?.textContent ?? "").toContain("Source event #1");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain(
+      "No timeline events captured",
+    );
+  });
+
+  it("keeps the first-visible timeline intentional while provider message fallback is loading", async () => {
+    const messages =
+      createDeferred<
+        Awaited<ReturnType<NonNullable<ThreadDebuggerProvider["getMessages"]>>>
+      >();
+    const provider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([]),
+      getMessages: vi.fn().mockReturnValue(messages.promise),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-messages-only";
+    await flushProviderWork(el);
+
+    expect(provider.getMessages).toHaveBeenCalledWith(
+      "thread-messages-only",
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+    expect(internals._loadingMessages).toBe(true);
+    expect(el.shadowRoot?.textContent ?? "").toContain("Loading messages");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain(
+      "No timeline events captured",
+    );
+
+    messages.resolve([
+      { id: "u1", role: "user", content: "provider hello" },
+      { id: "a1", role: "assistant", content: "provider reply" },
+    ]);
+
+    await vi.waitFor(() => {
+      const text = el.shadowRoot?.textContent ?? "";
+      expect(text).toContain("provider hello");
+      expect(text).toContain("provider reply");
+    });
+  });
+});
+
 // ─────────────────────────────────────────────────────────────────────────
 // Announcement preview (popout) dismissal MUST persist
 // ─────────────────────────────────────────────────────────────────────────
@@ -817,6 +1452,75 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     });
   });
 
+  it("rerenders selected thread details so core header changes refetch events with new headers", async () => {
+    fetchMock.mockImplementation(
+      (url: string, init?: { headers?: Record<string, string> }) => {
+        if (url.endsWith("/threads/thread-1/events")) {
+          return Promise.resolve(
+            new Response(
+              JSON.stringify({
+                events: [
+                  {
+                    type: "RUN_STARTED",
+                    timestamp: "2026-06-25T10:00:00.000Z",
+                    payload: { csrf: init?.headers?.["X-CSRF"] },
+                  },
+                ],
+              }),
+              { status: 200 },
+            ),
+          );
+        }
+        if (url.includes("/threads?")) {
+          return Promise.resolve(
+            new Response(JSON.stringify({ threads: [] }), { status: 200 }),
+          );
+        }
+        return Promise.reject(new Error(`Unexpected URL ${url}`));
+      },
+    );
+    const harness = createHeaderMockCore({}, { "X-CSRF": "1" });
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+
+    const internals = inspector as unknown as InspectorThreadViewInternals;
+    internals.isOpen = true;
+    internals.selectedMenu = "threads";
+    internals.selectedThreadId = "thread-1";
+    internals._threads = [
+      {
+        id: "thread-1",
+        name: "Thread 1",
+        agentId: "alpha",
+        updatedAt: "2026-06-25T10:00:00.000Z",
+      },
+    ];
+    inspector.requestUpdate();
+    await inspector.updateComplete;
+
+    await vi.waitFor(() => {
+      expect(
+        fetchMock.mock.calls.filter((call) =>
+          String(call[0]).endsWith("/threads/thread-1/events"),
+        ),
+      ).toHaveLength(1);
+    });
+
+    harness.emitHeadersChanged({ "X-CSRF": "2" });
+
+    await vi.waitFor(() => {
+      expect(
+        fetchMock.mock.calls.filter((call) =>
+          String(call[0]).endsWith("/threads/thread-1/events"),
+        ),
+      ).toHaveLength(2);
+    });
+    expect(headersOf(fetchMock.mock.calls.at(-1)!)).toMatchObject({
+      "X-CSRF": "2",
+    });
+  });
+
   it("shows the locked Intelligence state when thread listing is unavailable without fetching threads", async () => {
     const { agent } = createMockAgent("alpha");
     const harness = createHeaderMockCore(