@copilotkit/web-inspector 1.61.1 → 1.62.0

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

@@ -1,4 +1,9 @@
-import { WebInspectorElement, ɵCpkThreadDetails } from "../index";
+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,12 +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(): {
@@ -340,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 = "";
@@ -363,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.
@@ -380,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 () => {
@@ -406,6 +475,53 @@ describe("ɵCpkThreadDetails caching", () => {
     }
   });
 
+  it("joins thread inspection URLs without double slashes when runtimeUrl has a trailing slash", async () => {
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (input) => {
+        const url = String(input);
+        if (url.endsWith("/messages")) {
+          return new Response(JSON.stringify({ messages: [] }), {
+            status: 200,
+          });
+        }
+        if (url.endsWith("/events")) {
+          return new Response(JSON.stringify({ events: [] }), { status: 200 });
+        }
+        return new Response(JSON.stringify({ state: null }), { status: 200 });
+      });
+    try {
+      const { el, internals } = createThreadDetails();
+      internals.runtimeUrl = "http://localhost:4000/api/";
+      internals.threadInspectionAvailable = true;
+      internals.threadId = "thread one";
+      await el.updateComplete;
+      fetchSpy.mockClear();
+
+      await internals.fetchMessages("thread one");
+      await internals.fetchEvents("thread one");
+      await internals.fetchState("thread one");
+
+      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();
+    }
+  });
+
   it("conversation cache invalidates when _conversation is reassigned", async () => {
     const { el, internals } = createThreadDetails();
     await settleThread(el, internals, "t1");
@@ -415,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);
@@ -430,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 () => {
@@ -469,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();
@@ -483,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
 // ─────────────────────────────────────────────────────────────────────────
@@ -616,6 +1289,7 @@ type HeaderMockCore = {
   agents: Record<string, AbstractAgent>;
   context: Record<string, unknown>;
   properties: Record<string, unknown>;
+  telemetryDisabled: boolean;
   runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
   runtimeUrl: string;
   headers: Record<string, string>;
@@ -637,12 +1311,15 @@ type HeaderMockCore = {
 function createHeaderMockCore(
   agents: Record<string, AbstractAgent>,
   headers: Record<string, string>,
+  endpointOverrides: Partial<HeaderMockCore["threadEndpoints"]> = {},
+  telemetryDisabled = true,
 ) {
   const subscribers = new Set<CopilotKitCoreSubscriber>();
   const core: HeaderMockCore = {
     agents,
     context: {},
     properties: {},
+    telemetryDisabled,
     runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected,
     runtimeUrl: "http://localhost/api",
     headers,
@@ -651,6 +1328,7 @@ function createHeaderMockCore(
       inspect: true,
       mutations: true,
       realtimeMetadata: true,
+      ...endpointOverrides,
     },
     subscribe(subscriber: CopilotKitCoreSubscriber) {
       subscribers.add(subscriber);
@@ -693,6 +1371,21 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
     fetchMock.mock.calls.filter((call) =>
       String(call[0]).includes("/threads?"),
     );
+  const telemetryPosts = () =>
+    fetchMock.mock.calls
+      .filter(
+        (call) =>
+          String(call[0]) === "https://telemetry.copilotkit.ai/ingest" &&
+          (call[1] as RequestInit | undefined)?.method === "POST",
+      )
+      .map((call) => {
+        const body =
+          ((call[1] as RequestInit | undefined)?.body as string) ?? "{}";
+        return JSON.parse(body) as {
+          event: string;
+          properties: Record<string, unknown>;
+        };
+      });
 
   beforeEach(() => {
     document.body.innerHTML = "";
@@ -758,4 +1451,229 @@ describe("WebInspectorElement owned thread store headers (#5581)", () => {
       "X-CSRF": "2",
     });
   });
+
+  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(
+      { alpha: agent },
+      { "X-CSRF": "1" },
+      { list: false },
+      true,
+    );
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    const text = inspector.shadowRoot?.textContent ?? "";
+    expect(text).toMatch(/Enable Intelligence to inspect Threads\./);
+    expect(text).toContain("Talk to an Engineer");
+    expect(text).toContain("Sign up for Intelligence");
+    const ctaLabels = Array.from(
+      inspector.shadowRoot?.querySelectorAll<HTMLAnchorElement>("a") ?? [],
+    ).map((anchor) => anchor.textContent?.trim());
+    expect(ctaLabels).toEqual([
+      "Talk to an Engineer",
+      "Sign up for Intelligence",
+    ]);
+    expect(text).not.toContain("No threads yet");
+    expect(
+      fetchMock.mock.calls.some((call) => String(call[0]).includes("/threads")),
+    ).toBe(false);
+  });
+
+  it("adds ref and posthog distinct ID attribution to locked-state CTAs", async () => {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore(
+      { alpha: agent },
+      {},
+      { list: false },
+      false,
+    );
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    const signup = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://go.copilotkit.ai/intelligence-signup"]',
+    );
+    const engineer = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://www.copilotkit.ai/talk-to-an-engineer"]',
+    );
+
+    expect(signup).not.toBeNull();
+    expect(engineer).not.toBeNull();
+
+    const signupUrl = new URL(signup!.href);
+    expect(signupUrl.searchParams.get("ref")).toBe("cpk-inspector");
+    const distinctId = signupUrl.searchParams.get("posthog_distinct_id");
+    expect(distinctId).toMatch(/^[0-9a-f-]{36}$/);
+
+    const engineerUrl = new URL(engineer!.href);
+    expect(engineerUrl.origin).toBe("https://www.copilotkit.ai");
+    expect(engineerUrl.pathname).toBe("/talk-to-an-engineer");
+    expect(engineerUrl.searchParams.get("ref")).toBe("cpk-inspector-threads");
+    expect(engineerUrl.searchParams.get("posthog_distinct_id")).toBe(
+      distinctId,
+    );
+  });
+
+  it("tracks Threads tab clicks through the rendered inspector menu", async () => {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore(
+      { alpha: agent },
+      {},
+      { list: false },
+      false,
+    );
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as { isOpen: boolean };
+    internals.isOpen = true;
+    inspector.requestUpdate();
+    await inspector.updateComplete;
+
+    const threadsButton = Array.from(
+      inspector.shadowRoot?.querySelectorAll<HTMLButtonElement>("button") ?? [],
+    ).find((button) => button.textContent?.trim() === "Threads");
+    expect(threadsButton, "Threads menu button should render").toBeDefined();
+
+    threadsButton!.click();
+    await inspector.updateComplete;
+    await Promise.resolve();
+
+    const threadsTabClick = telemetryPosts().find(
+      (post) => post.event === "oss.inspector.threads_tab_clicked",
+    );
+    expect(threadsTabClick).toBeDefined();
+    expect(threadsTabClick!.properties).toMatchObject({
+      intelligence_status: "intelligence_not_enabled",
+      thread_service_status: "unavailable",
+      telemetry_disabled: false,
+    });
+    expect(threadsTabClick!.properties.distinct_id).toMatch(/^[0-9a-f-]{36}$/);
+    if (threadsTabClick!.properties.posthog_distinct_id !== undefined) {
+      expect(threadsTabClick!.properties.posthog_distinct_id).toBe(
+        threadsTabClick!.properties.distinct_id,
+      );
+    }
+  });
+
+  it("keeps the enabled empty Threads state when thread listing is available", async () => {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, {}, {}, true);
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    const internals = inspector as unknown as {
+      isOpen: boolean;
+      handleMenuSelect: (key: "threads") => void;
+    };
+    internals.isOpen = true;
+    internals.handleMenuSelect("threads");
+    await inspector.updateComplete;
+
+    expect(inspector.shadowRoot?.textContent ?? "").toContain("No threads yet");
+    const engineer = inspector.shadowRoot?.querySelector<HTMLAnchorElement>(
+      'a[href^="https://www.copilotkit.ai/talk-to-an-engineer"]',
+    );
+    expect(engineer?.href).toBe(
+      "https://www.copilotkit.ai/talk-to-an-engineer?ref=cpk-inspector-threads",
+    );
+  });
 });