@copilotkit/web-inspector 1.61.0 → 1.61.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/web-inspector",
-  "version": "1.61.0",
+  "version": "1.61.1",
   "description": "Lit-based web component for the CopilotKit web inspector",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "lit": "^3.2.0",
     "lucide": "^0.525.0",
     "marked": "^12.0.2",
-    "@copilotkit/core": "1.61.0"
+    "@copilotkit/core": "1.61.1"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

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

@@ -306,6 +306,9 @@ describe("WebInspectorElement", () => {
 
 type ThreadDetailsInternals = {
   threadId: string | null;
+  runtimeUrl: string;
+  headers: Record<string, string>;
+  threadInspectionAvailable: boolean;
   liveMessageVersion: number;
   _conversation: Array<Record<string, unknown>>;
   _fetchedState: Record<string, unknown> | null;
@@ -318,6 +321,8 @@ type ThreadDetailsInternals = {
   _loadingState: boolean;
   _loadingEvents: boolean;
   _panelTplCache: Map<string, { key: readonly unknown[]; tpl: unknown }>;
+  fetchEvents: (threadId: string) => Promise<void>;
+  fetchState: (threadId: string) => Promise<void>;
   renderConversation: () => unknown;
   renderState: () => unknown;
   renderEvents: () => unknown;
@@ -377,6 +382,30 @@ describe("ɵCpkThreadDetails caching", () => {
     expect(internals._panelTplCache.size).toBe(0);
   });
 
+  it("does not fetch messages, events, or state when threadInspectionAvailable is omitted", async () => {
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response(JSON.stringify({}), { status: 200 }));
+    try {
+      const { el, internals } = createThreadDetails();
+
+      internals.runtimeUrl = "http://localhost:4000";
+      internals.headers = { Authorization: "Bearer test-token" };
+      internals.threadId = "t1";
+      await el.updateComplete;
+
+      expect(internals.threadInspectionAvailable).toBe(false);
+      expect(fetchSpy).not.toHaveBeenCalled();
+
+      await internals.fetchEvents("t1");
+      await internals.fetchState("t1");
+
+      expect(fetchSpy).not.toHaveBeenCalled();
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
   it("conversation cache invalidates when _conversation is reassigned", async () => {
     const { el, internals } = createThreadDetails();
     await settleThread(el, internals, "t1");
@@ -575,3 +604,158 @@ describe("WebInspectorElement announcement preview dismissal", () => {
     expect(a.hasUnseenAnnouncement).toBe(true);
   });
 });
+
+// --- Owned thread store header forwarding (issue #5581) ---
+//
+// When useThreads() isn't mounted, the inspector creates its own thread store
+// per agent (ensureOwnedThreadStore). That store's /threads requests must carry
+// the headers configured on <CopilotKit> (e.g. X-CSRF / auth), otherwise the
+// requests 403 in environments that enforce CSRF/auth checks.
+
+type HeaderMockCore = {
+  agents: Record<string, AbstractAgent>;
+  context: Record<string, unknown>;
+  properties: Record<string, unknown>;
+  runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
+  runtimeUrl: string;
+  headers: Record<string, string>;
+  threadEndpoints: {
+    list: boolean;
+    inspect: boolean;
+    mutations: boolean;
+    realtimeMetadata: boolean;
+  };
+  subscribe: (subscriber: CopilotKitCoreSubscriber) => {
+    unsubscribe: () => void;
+  };
+  getThreadStores: () => Record<string, never>;
+  getThreadStore: (agentId: string) => undefined;
+  registerThreadStore: (agentId: string, store: unknown) => void;
+  unregisterThreadStore: (agentId: string) => void;
+};
+
+function createHeaderMockCore(
+  agents: Record<string, AbstractAgent>,
+  headers: Record<string, string>,
+) {
+  const subscribers = new Set<CopilotKitCoreSubscriber>();
+  const core: HeaderMockCore = {
+    agents,
+    context: {},
+    properties: {},
+    runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected,
+    runtimeUrl: "http://localhost/api",
+    headers,
+    threadEndpoints: {
+      list: true,
+      inspect: true,
+      mutations: true,
+      realtimeMetadata: true,
+    },
+    subscribe(subscriber: CopilotKitCoreSubscriber) {
+      subscribers.add(subscriber);
+      return { unsubscribe: () => subscribers.delete(subscriber) };
+    },
+    getThreadStores() {
+      return {};
+    },
+    getThreadStore() {
+      return undefined;
+    },
+    registerThreadStore() {},
+    unregisterThreadStore() {},
+  };
+
+  const asCore = () => core as unknown as CopilotKitCore;
+  return {
+    core,
+    emitAgentsChanged() {
+      subscribers.forEach((s) =>
+        s.onAgentsChanged?.({ copilotkit: asCore(), agents: core.agents }),
+      );
+    },
+    emitHeadersChanged(nextHeaders: Record<string, string>) {
+      core.headers = nextHeaders;
+      subscribers.forEach((s) =>
+        s.onHeadersChanged?.({ copilotkit: asCore(), headers: nextHeaders }),
+      );
+    },
+  };
+}
+
+const headersOf = (call: unknown[]) =>
+  (call[1] as { headers?: Record<string, string> } | undefined)?.headers ?? {};
+
+describe("WebInspectorElement owned thread store headers (#5581)", () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  const threadListCalls = () =>
+    fetchMock.mock.calls.filter((call) =>
+      String(call[0]).includes("/threads?"),
+    );
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    fetchMock = vi.fn(() =>
+      Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({ threads: [] }),
+      }),
+    );
+    // The owned store captures globalThis.fetch when it's created, so stub
+    // before the inspector attaches to the core.
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("forwards core headers on the owned store's /threads request", async () => {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore(
+      { alpha: agent },
+      { "X-CSRF": "1", Authorization: "Bearer abc" },
+    );
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    await vi.waitFor(() => {
+      expect(threadListCalls().length).toBeGreaterThan(0);
+    });
+
+    expect(headersOf(threadListCalls()[0]!)).toMatchObject({
+      "X-CSRF": "1",
+      Authorization: "Bearer abc",
+    });
+  });
+
+  it("re-applies headers on the owned store when core headers change", async () => {
+    const { agent } = createMockAgent("alpha");
+    const harness = createHeaderMockCore({ alpha: agent }, { "X-CSRF": "1" });
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = harness.core as unknown as WebInspectorElement["core"];
+    harness.emitAgentsChanged();
+
+    await vi.waitFor(() => {
+      expect(threadListCalls().length).toBeGreaterThan(0);
+    });
+    const callsBefore = threadListCalls().length;
+
+    harness.emitHeadersChanged({ "X-CSRF": "2" });
+
+    await vi.waitFor(() => {
+      expect(threadListCalls().length).toBeGreaterThan(callsBefore);
+    });
+
+    expect(headersOf(threadListCalls().at(-1)!)).toMatchObject({
+      "X-CSRF": "2",
+    });
+  });
+});

package/src/index.ts

@@ -674,6 +674,7 @@ export class ɵCpkThreadDetails extends LitElement {
     thread: { attribute: false },
     runtimeUrl: { attribute: false },
     headers: { attribute: false },
+    threadInspectionAvailable: { attribute: false },
     agentStateInput: { attribute: false },
     agentEventsInput: { attribute: false },
     liveMessageVersion: { attribute: false },
@@ -701,6 +702,7 @@ export class ɵCpkThreadDetails extends LitElement {
   thread: ɵThread | null = null;
   runtimeUrl = "";
   headers: Record<string, string> = {};
+  threadInspectionAvailable = false;
   agentStateInput: Record<string, unknown> | null = null;
   agentEventsInput: ApiAgentEvent[] = [];
   /**
@@ -1456,7 +1458,7 @@ export class ɵCpkThreadDetails extends LitElement {
     threadId: string,
     silent: boolean = false,
   ): Promise<void> {
-    if (!this.runtimeUrl) {
+    if (!this.runtimeUrl || !this.threadInspectionAvailable) {
       if (!silent) this._conversation = [];
       return;
     }
@@ -1494,7 +1496,7 @@ export class ɵCpkThreadDetails extends LitElement {
 
   private async fetchEvents(threadId: string): Promise<void> {
     this._eventsNotAvailable = false;
-    if (!this.runtimeUrl) {
+    if (!this.runtimeUrl || !this.threadInspectionAvailable) {
       this._fetchedEvents = null;
       return;
     }
@@ -1541,7 +1543,7 @@ export class ɵCpkThreadDetails extends LitElement {
 
   private async fetchState(threadId: string): Promise<void> {
     this._stateNotAvailable = false;
-    if (!this.runtimeUrl) {
+    if (!this.runtimeUrl || !this.threadInspectionAvailable) {
       this._fetchedState = null;
       return;
     }
@@ -2585,12 +2587,14 @@ export class WebInspectorElement extends LitElement {
     if (this.core?.getThreadStore(agentId)) return;
     const core = this.core;
     if (!core?.runtimeUrl) return;
+    if (core.threadEndpoints?.list === false) return;
 
     const store = ɵcreateThreadStore({ fetch: globalThis.fetch });
     store.start();
     store.setContext({
       runtimeUrl: core.runtimeUrl,
-      headers: {},
+      headers: { ...core.headers },
+      wsUrl: core.intelligence?.wsUrl,
       agentId,
     });
     this._ownedThreadStores.set(agentId, store);
@@ -2609,6 +2613,24 @@ export class WebInspectorElement extends LitElement {
     store.refresh();
   }
 
+  // Keep inspector-owned thread stores in sync when the host updates headers
+  // at runtime (e.g. a refreshed auth/CSRF token via core.setHeaders). Mirrors
+  // useThreads(), which re-dispatches the context whenever core.headers change,
+  // so the owned stores' /threads requests stay authorized.
+  private updateOwnedThreadStoreHeaders(
+    headers: Readonly<Record<string, string>>,
+  ): void {
+    const core = this.core;
+    if (!core?.runtimeUrl) return;
+    for (const [agentId, store] of this._ownedThreadStores) {
+      store.setContext({
+        runtimeUrl: core.runtimeUrl,
+        headers: { ...headers },
+        agentId,
+      });
+    }
+  }
+
   private removeOwnedThreadStore(agentId: string): void {
     const store = this._ownedThreadStores.get(agentId);
     if (!store) return;
@@ -2639,8 +2661,12 @@ export class WebInspectorElement extends LitElement {
             maybeShowDisclosure();
           }
           this.flushPendingBannerViewed();
-          for (const agentId of this._ownedThreadStores.keys()) {
-            this.refreshOwnedThreadStore(agentId);
+          if (core.threadEndpoints?.list !== false) {
+            for (const agentId of this._ownedThreadStores.keys()) {
+              this.refreshOwnedThreadStore(agentId);
+            }
+          } else {
+            this.teardownOwnedThreadStores();
           }
         } else {
           // Clear stale thread data immediately when the server goes away
@@ -2653,6 +2679,9 @@ export class WebInspectorElement extends LitElement {
         this.coreProperties = properties;
         this.requestUpdate();
       },
+      onHeadersChanged: ({ headers }) => {
+        this.updateOwnedThreadStoreHeaders(headers);
+      },
       onError: ({ code, error }) => {
         this.lastCoreError = { code, message: error.message };
         this.requestUpdate();
@@ -5855,6 +5884,9 @@ ${argsString}</pre
                   .thread=${selectedThread}
                   .runtimeUrl=${this._core?.runtimeUrl ?? ""}
                   .headers=${this._core?.headers ?? {}}
+                  .threadInspectionAvailable=${
+                    this._core?.threadEndpoints?.inspect !== false
+                  }
                   .liveMessageVersion=${
                     this.selectedThreadId
                       ? (this.liveMessageVersion.get(this.selectedThreadId) ??