@copilotkit/vue 2.0.0-rc.20 → 2.0.0-rc.21

package/src/v2/hooks/__tests__/use-configure-suggestions.test.ts

@@ -12,7 +12,10 @@ import type { Observable } from "rxjs";
 import { useConfigureSuggestions } from "../use-configure-suggestions";
 import { useSuggestions } from "../use-suggestions";
 import { useCopilotKit } from "../../providers/useCopilotKit";
-import { mountWithProvider } from "../../__tests__/utils/mount";
+import {
+  mountWithProvider,
+  renderWithCopilotKit,
+} from "../../__tests__/utils/mount";
 import {
   StateCapturingAgent,
   SuggestionsProviderAgent,
@@ -396,4 +399,30 @@ describe("useConfigureSuggestions", () => {
 
     expect(wrapper.find("[data-testid=json]").text()).toContain("Deferred");
   });
+
+  it("loads a global static config for the chat's agent before any agent registers", async () => {
+    const Harness = defineComponent({
+      setup() {
+        useConfigureSuggestions({
+          suggestions: [{ title: "Welcome", message: "Say hi" }],
+          available: "always",
+        });
+        const { suggestions } = useSuggestions({ agentId: "support" });
+        return () =>
+          h(
+            "span",
+            { "data-testid": "titles" },
+            suggestions.value.map((suggestion) => suggestion.title).join(","),
+          );
+      },
+    });
+
+    const { wrapper } = renderWithCopilotKit(() => h(Harness), {
+      agentId: "support",
+      agents: {},
+    });
+    await nextTick();
+
+    expect(wrapper.find("[data-testid=titles]").text()).toBe("Welcome");
+  });
 });

package/src/v2/hooks/__tests__/use-default-render-tool.test.ts

@@ -530,10 +530,8 @@ describe("useDefaultRenderTool", () => {
     expect(forwarded.result).toBe("ok");
   });
 
-  // Fix #5: circular-ref parameters must not crash the vue render; log.
-  it("default renderer survives circular-ref parameters and logs", async () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-
+  // Fix #5: circular-ref parameters must not crash the vue render.
+  it("default renderer survives circular-ref parameters", async () => {
     const Harness = defineComponent({
       setup() {
         useDefaultRenderTool();
@@ -567,14 +565,16 @@ describe("useDefaultRenderTool", () => {
       }),
     ).not.toThrow();
 
+    const wrapper = screen.getByTestId("copilot-tool-render");
+    expect(wrapper.getAttribute("data-args")).toBe(
+      '{"a":1,"self":"[Circular]"}',
+    );
+
     const headerButton = screen
       .getByTestId("copilot-tool-render-name")
       .closest("button");
-    if (headerButton) {
-      await expect(fireEvent.click(headerButton)).resolves.not.toThrow();
-    }
-
-    expect(warnSpy).toHaveBeenCalled();
-    warnSpy.mockRestore();
+    expect(headerButton).not.toBeNull();
+    await fireEvent.click(headerButton!);
+    expect(wrapper.textContent).toContain('"self": "[Circular]"');
   });
 });

package/src/v2/hooks/__tests__/use-frontend-tool.e2e.test.ts

@@ -887,6 +887,10 @@ describe("useFrontendTool E2E - Dynamic Registration", () => {
         expect(firstVersion.textContent).toContain("before override");
       });
 
+      await agent.emit(runFinishedEvent());
+      // The tool call starts a follow-up run. A send waits for the run in
+      // flight (#5195), so finish the follow-up before the next message.
+      await agent.emit(runStartedEvent());
       await agent.emit(runFinishedEvent());
 
       const overrideButton = screen.getByTestId("activate-override");

package/src/v2/hooks/__tests__/use-human-in-the-loop.e2e.test.ts

@@ -720,7 +720,12 @@ describe("useHumanInTheLoop E2E - HITL Tool Rendering", () => {
         expect(screen.queryByTestId("hitl-enabled")).toBeNull();
       });
 
-      await submitMessage("Test after disable");
+      // The first run still waits for the unanswered HITL prompt, and a send
+      // waits for the run in flight (#5195), so this message stays queued.
+      // What this test pins is that the unregistered tool no longer renders.
+      const input = await screen.findByRole("textbox");
+      await fireEvent.update(input, "Test after disable");
+      await fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
 
       const messageId2 = testId("msg2");
       const toolCallId2 = testId("tc2");

package/src/v2/hooks/__tests__/use-human-in-the-loop.test.ts

@@ -4,7 +4,22 @@ import { z } from "zod";
 import type { AbstractAgent } from "@ag-ui/client";
 import { useHumanInTheLoop } from "../use-human-in-the-loop";
 import { mountWithProvider } from "../../__tests__/utils/mount";
-import { StateCapturingAgent } from "../../__tests__/utils/agents";
+import {
+  SequencedRunAgent,
+  StateCapturingAgent,
+  toolCallMessage,
+} from "../../__tests__/utils/agents";
+
+/** Handler context for one tool call; core always passes the call. */
+function callContext(id: string, name = "tool") {
+  return {
+    toolCall: {
+      id,
+      type: "function" as const,
+      function: { name, arguments: "{}" },
+    },
+  };
+}
 
 describe("useHumanInTheLoop", () => {
   beforeEach(() => {
@@ -53,7 +68,7 @@ describe("useHumanInTheLoop", () => {
 
     const pending = registeredTool!.handler!(
       { question: "Proceed?" },
-      {} as never,
+      callContext("tc-approve"),
     );
 
     const executingVNode = renderer!.render({
@@ -107,8 +122,8 @@ describe("useHumanInTheLoop", () => {
     const renderA = getCore().renderToolCalls.find((rc) => rc.name === "toolA");
     const renderB = getCore().renderToolCalls.find((rc) => rc.name === "toolB");
 
-    const pA = toolA!.handler!({}, {} as never);
-    const pB = toolB!.handler!({}, {} as never);
+    const pA = toolA!.handler!({}, callContext("tc-a"));
+    const pB = toolB!.handler!({}, callContext("tc-b"));
 
     const respondA = (
       renderA!.render({
@@ -140,6 +155,72 @@ describe("useHumanInTheLoop", () => {
     await expect(pB).resolves.toBe("B");
   });
 
+  it("gives parallel calls of one tool their own respond", async () => {
+    const RenderComp = defineComponent({
+      props: ["respond"],
+      setup() {
+        return () => h("div");
+      },
+    });
+    const Child = defineComponent({
+      setup() {
+        useHumanInTheLoop({
+          name: "parallelTool",
+          parameters: z.object({}),
+          render: RenderComp,
+        });
+        return () => null;
+      },
+    });
+    const { getCore } = mountWithProvider(() => h(Child));
+    const handler = getCore().getTool({ toolName: "parallelTool" })!.handler!;
+    const renderer = getCore().renderToolCalls.find(
+      (rc) => rc.name === "parallelTool",
+    )!;
+    const respondFor = (toolCallId: string) =>
+      (
+        renderer.render({
+          name: "parallelTool",
+          toolCallId,
+          args: {},
+          status: "executing",
+          result: undefined,
+        }) as { props?: { respond?: (result: unknown) => Promise<void> } }
+      ).props!.respond!;
+
+    const first = handler({}, callContext("call-1"));
+    const second = handler({}, callContext("call-2"));
+    await respondFor("call-2")("second");
+    await respondFor("call-1")("first");
+
+    await expect(first).resolves.toBe("first");
+    await expect(second).resolves.toBe("second");
+  });
+
+  it("passes the called tool's name to a catch-all render", () => {
+    const RenderComp = defineComponent({
+      setup() {
+        return () => h("div");
+      },
+    });
+    const Child = defineComponent({
+      setup() {
+        useHumanInTheLoop({ name: "*", render: RenderComp });
+        return () => null;
+      },
+    });
+    const { getCore } = mountWithProvider(() => h(Child));
+    const renderer = getCore().renderToolCalls.find((rc) => rc.name === "*")!;
+    const vnode = renderer.render({
+      name: "deleteFile",
+      toolCallId: "tc-any",
+      args: {},
+      status: "inProgress",
+      result: undefined,
+    }) as { props?: Record<string, unknown> };
+    expect(vnode.props?.name).toBe("deleteFile");
+  });
+
   it("only exposes respond during executing status", () => {
     const RenderComp = defineComponent({
       props: ["respond"],
@@ -323,9 +404,9 @@ describe("useHumanInTheLoop", () => {
       const controller = new AbortController();
       controller.abort();
 
-      await expect(handler!({}, { signal: controller.signal })).rejects.toEqual(
-        new Error("Human-in-the-loop interaction aborted"),
-      );
+      await expect(
+        handler!({}, { ...callContext("tc-x"), signal: controller.signal }),
+      ).rejects.toEqual(new Error("Human-in-the-loop interaction aborted"));
     });
 
     it("rejects once on abort, clears pending refs, and installs a one-shot listener", async () => {
@@ -344,7 +425,7 @@ describe("useHumanInTheLoop", () => {
         }),
       } as unknown as AbortSignal;
 
-      const pending = handler!({}, { signal });
+      const pending = handler!({}, { ...callContext("tc-aborted"), signal });
       expect(listeners.size).toBe(1);
       const onAbort = [...listeners][0];
       onAbort();
@@ -379,7 +460,13 @@ describe("useHumanInTheLoop", () => {
         }),
       } as unknown as AbortSignal;
 
-      const pending = handler!({}, { signal }).then((result) => {
+      const pending = handler!(
+        {},
+        {
+          ...callContext("tc-respond"),
+          signal,
+        },
+      ).then((result) => {
         events.push(`resolved:${String(result)}`);
         return result;
       });
@@ -511,10 +598,98 @@ describe("useHumanInTheLoop", () => {
       expect(vnode.props?.agentId).toBeUndefined();
     });
 
+    it("lets a message queued behind an unanswered prompt send after the prompt unmounts", async () => {
+      const prompt = toolCallMessage("unmountApproval");
+      const toolCallId = (prompt as { toolCalls: { id: string }[] })
+        .toolCalls[0]!.id;
+      const agent = new SequencedRunAgent(
+        [
+          () => ({ result: undefined, newMessages: [prompt] }),
+          () => ({
+            result: undefined,
+            newMessages: [{ id: "reply", role: "assistant", content: "ok" }],
+          }),
+        ],
+        "default",
+      );
+      const RenderComp = defineComponent({
+        setup() {
+          return () => h("div");
+        },
+      });
+      const shown = ref(true);
+      const Child = defineComponent({
+        setup() {
+          useHumanInTheLoop({
+            name: "unmountApproval",
+            parameters: z.object({}),
+            render: RenderComp,
+          });
+          return () => null;
+        },
+      });
+      const { getCore } = mountWithProvider(
+        () => (shown.value ? h(Child) : null),
+        {
+          agents__unsafe_dev_only: {
+            default: agent as unknown as AbstractAgent,
+          },
+        },
+      );
+      const core = getCore();
+      const sendMessage = async (content: string) => {
+        agent.addMessage({ id: content, role: "user", content });
+        await core.runAgent({ agent: agent as unknown as AbstractAgent });
+      };
+
+      const first = sendMessage("approve this");
+      const queued = first.then(() => sendMessage("next question"));
+      await vi.waitFor(() =>
+        expect(core.ɵhumanInTheLoop.isPending(toolCallId)).toBe(true),
+      );
+
+      shown.value = false;
+      await nextTick();
+
+      await expect(queued).resolves.toBeUndefined();
+      expect(agent.messages).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            role: "tool",
+            toolCallId,
+            error: "Human-in-the-loop interaction aborted",
+          }),
+          expect.objectContaining({ id: "reply", content: "ok" }),
+        ]),
+      );
+    });
+
     it("does not settle a pending HITL promise when its renderer unmounts", async () => {
-      const mounted = mountHitlTool();
-      const pending = mounted.handler({}, {});
-      mounted.wrapper.unmount();
+      const RenderComp = defineComponent({
+        setup() {
+          return () => h("div");
+        },
+      });
+      const shown = ref(true);
+      const Child = defineComponent({
+        setup() {
+          useHumanInTheLoop({
+            name: "unmountTool",
+            parameters: z.object({}),
+            render: RenderComp,
+          });
+          return () => null;
+        },
+      });
+      const { getCore } = mountWithProvider(() =>
+        shown.value ? h(Child) : null,
+      );
+      const pending = getCore().getTool({ toolName: "unmountTool" })!.handler!(
+        {},
+        callContext("tc-unmount"),
+      );
+      shown.value = false;
+      await nextTick();
 
       const outcome = await Promise.race([
         pending.then(

package/src/v2/hooks/__tests__/use-interrupt.test.ts

@@ -347,6 +347,32 @@ describe("useInterrupt", () => {
     expect(wrapper.get("[data-testid=interrupt-state]").text()).toBe("idle");
   });
 
+  it("treats a throwing enabled predicate as disabled instead of crashing", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mountHarness({
+      enabled: () => {
+        throw new Error("predicate");
+      },
+    });
+    emitInterrupt("hidden");
+    await nextTick();
+    expect(wrapper.get("[data-testid=interrupt-state]").text()).toBe("idle");
+  });
+
+  it("shows the interrupt with a null result when the handler throws synchronously", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mountHarness({
+      handler: () => {
+        throw new Error("handler");
+      },
+    });
+    emitInterrupt("visible");
+    await nextTick();
+    expect(wrapper.get("[data-testid=interrupt-state]").text()).toBe(
+      "no-result:visible",
+    );
+  });
+
   it("keeps the latest interrupt when multiple interrupts arrive within one run", async () => {
     const wrapper = mountHarness({ renderInChat: false });
 
@@ -412,6 +438,77 @@ describe("useInterrupt", () => {
       handlers.onRunFinalized?.();
     }
 
+    it("picks up the agent's pending interrupts when it mounts", async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mockAgent as any).pendingInterrupts = [INT];
+      const wrapper = mountStandardHarness();
+      await nextTick();
+      expect(wrapper.find("[data-testid=active]").exists()).toBe(true);
+    });
+
+    it("appends a tool result for a frontend tool-call interrupt before resuming", async () => {
+      const addMessage = vi.fn();
+      Object.assign(mockAgent, { messages: [], addMessage });
+      const TOOL_INT: Interrupt = {
+        id: "tool-int",
+        reason: "tool_call",
+        toolCallId: "call-1",
+      };
+      const wrapper = mountStandardHarness();
+      fireStandardInterrupt([TOOL_INT]);
+      await nextTick();
+
+      await wrapper.get("[data-testid=resolve-btn]").trigger("click");
+
+      expect(addMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          role: "tool",
+          toolCallId: "call-1",
+          content: JSON.stringify({ ok: true }),
+        }),
+      );
+      expect(runAgentMock).toHaveBeenCalledWith({
+        agent: mockAgent,
+        resume: [
+          {
+            interruptId: "tool-int",
+            status: "resolved",
+            payload: { ok: true },
+          },
+        ],
+      });
+    });
+
+    it("resumes when the only expired interrupt was cancelled", async () => {
+      const EXPIRED: Interrupt = {
+        id: "old",
+        reason: "confirmation",
+        expiresAt: "2000-01-01T00:00:00.000Z",
+      };
+      let api: ReturnType<typeof useInterrupt> | undefined;
+      mount(
+        defineComponent({
+          setup() {
+            api = useInterrupt({ renderInChat: false });
+            return () => null;
+          },
+        }),
+      );
+      fireStandardInterrupt([EXPIRED, INT]);
+      await nextTick();
+
+      await api!.cancel("old");
+      await api!.resolve("yes", INT.id);
+
+      expect(runAgentMock).toHaveBeenCalledWith({
+        agent: mockAgent,
+        resume: [
+          { interruptId: "old", status: "cancelled" },
+          { interruptId: INT.id, status: "resolved", payload: "yes" },
+        ],
+      });
+    });
+
     it("resolveInterrupt resumes with a resolved ResumeEntry", async () => {
       runAgentMock.mockResolvedValue({ result: undefined, newMessages: [] });
       const wrapper = mountStandardHarness();

package/src/v2/hooks/__tests__/use-render-activity-message.test.ts

@@ -99,7 +99,8 @@ describe("useRenderActivityMessage", () => {
 
     expect(result).toBeNull();
     expect(consoleWarnSpy).toHaveBeenCalledWith(
-      "Failed to validate content for activity message 'progress'.",
+      "[CopilotKit] Failed to parse content for activity message 'progress':",
+      expect.any(Array),
     );
   });
 });

package/src/v2/hooks/__tests__/use-threads.test.ts

@@ -4,6 +4,19 @@ import type { Ref } from "vue";
 import { describe, expect, it, beforeEach, vi } from "vitest";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 
+/** Core's `ɵruntimeInfo` snapshot, built from a fake core's runtime fields. */
+function runtimeInfoOf(core: {
+  runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
+  threadEndpoints?: unknown;
+  intelligence?: unknown;
+}) {
+  return {
+    status: core.runtimeConnectionStatus,
+    threadEndpoints: core.threadEndpoints,
+    intelligence: core.intelligence,
+  };
+}
+
 type ThreadRecord = {
   id: string;
   organizationId: string;
@@ -54,7 +67,8 @@ function compareThreadsByActivity(left: ThreadRecord, right: ThreadRecord) {
   return rightKey.localeCompare(leftKey);
 }
 
-vi.mock("@copilotkit/core", () => {
+vi.mock("@copilotkit/core", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@copilotkit/core")>();
   class MockChannel {
     topic: string;
     left = false;
@@ -118,6 +132,16 @@ vi.mock("@copilotkit/core", () => {
     private listeners = new Set<() => void>();
     private socket: MockSocket | null = null;
 
+    readonly selectors = {
+      threads: (state: ThreadState) => state.threads,
+      isLoading: (state: ThreadState) => state.isLoading,
+      error: (state: ThreadState) => state.error,
+      fetchMoreError: (state: ThreadState) => state.fetchMoreError,
+      hasNextPage: (state: ThreadState) => state.hasNextPage,
+      isFetchingNextPage: (state: ThreadState) => state.isFetchingNextPage,
+      isMutating: (state: ThreadState) => state.isMutating,
+    };
+
     start(): void {}
 
     stop(): void {
@@ -317,6 +341,10 @@ vi.mock("@copilotkit/core", () => {
       return this.state;
     }
 
+    getServerState(): ThreadState {
+      return { ...this.state, threads: [] };
+    }
+
     select<T>(selector: (state: ThreadState) => T) {
       return {
         subscribe: (callback: () => void) => {
@@ -357,6 +385,8 @@ vi.mock("@copilotkit/core", () => {
     ɵselectHasNextPage: select((state) => state.hasNextPage),
     ɵselectIsFetchingNextPage: select((state) => state.isFetchingNextPage),
     ɵselectIsMutating: select((state) => state.isMutating),
+    // The real view model, driving the mock store above.
+    ɵThreadsController: actual.ɵThreadsController,
   };
 });
 
@@ -394,6 +424,7 @@ const supportedThreadEndpoints: ThreadEndpointRuntimeInfo = {
 
 type MockCopilotKit = {
   runtimeUrl: string | undefined;
+  readonly ɵruntimeInfo: unknown;
   runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
   headers: Record<string, string>;
   /**
@@ -417,6 +448,9 @@ function setupCopilotKit(
 ) {
   const copilotkit = ref<MockCopilotKit>({
     runtimeUrl,
+    get ɵruntimeInfo() {
+      return runtimeInfoOf(this);
+    },
     runtimeConnectionStatus,
     headers: { Authorization: "Bearer test-token" },
     ɵheadersGeneration: 0,
@@ -965,6 +999,9 @@ describe("useThreads", () => {
       // exactly one list fetch (+ one subscribe after it lands).
       copilotkit.value = {
         ...copilotkit.value,
+        get ɵruntimeInfo() {
+          return runtimeInfoOf(this);
+        },
         runtimeConnectionStatus:
           CopilotKitCoreRuntimeConnectionStatus.Connected,
         intelligence: { wsUrl: "ws://localhost:4000/client" },
@@ -1020,6 +1057,9 @@ describe("useThreads", () => {
 
       copilotkit.value = {
         ...copilotkit.value,
+        get ɵruntimeInfo() {
+          return runtimeInfoOf(this);
+        },
         runtimeConnectionStatus:
           CopilotKitCoreRuntimeConnectionStatus.Disconnected,
       };
@@ -1216,8 +1256,9 @@ describe("useThreads", () => {
 
       expect(fetchMock).not.toHaveBeenCalled();
       expect(getResult().threads.value).toEqual([]);
-      const lastDispatched = getDispatchedContexts().at(-1);
-      expect(lastDispatched).toBeNull();
+      // Nothing was ever sent, so nothing is cleared either (no extra
+      // queued list fetch).
+      expect(getDispatchedContexts()).toEqual([]);
       // A disabled consumer must not be stuck in a permanent loading state:
       // preConnectLoading must factor in `enabled`, otherwise isLoading would
       // stay true forever since hasDispatchedContext never gets set.
@@ -1240,7 +1281,7 @@ describe("useThreads", () => {
       // Disabled: inert, not loading, no fetch.
       expect(getResult().isLoading.value).toBe(false);
       expect(fetchMock).not.toHaveBeenCalled();
-      expect(getDispatchedContexts().at(-1)).toBeNull();
+      expect(getDispatchedContexts().filter(Boolean)).toEqual([]);
 
       // Re-enable: the pre-connect loading indicator must re-arm (i.e.
       // hasDispatchedContext was reset to false on disable) so consumers see
@@ -1343,8 +1384,9 @@ describe("useThreads", () => {
 
       expect(fetchMock).not.toHaveBeenCalled();
       expect(getResult().threads.value).toEqual([]);
-      const lastDispatched = getDispatchedContexts().at(-1);
-      expect(lastDispatched).toBeNull();
+      // Nothing was ever sent, so nothing is cleared either (no extra
+      // queued list fetch).
+      expect(getDispatchedContexts()).toEqual([]);
       expect(getResult().error.value?.message).toBe(
         "Thread endpoints are not available on this CopilotKit runtime",
       );

package/src/v2/hooks/use-agent-context.ts

@@ -1,14 +1,10 @@
 import { computed, toValue, watch } from "vue";
 import type { MaybeRefOrGetter } from "vue";
+import { ɵserializeContextValue } from "@copilotkit/core";
+import type { ɵJsonSerializable } from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 
-export type JsonSerializable =
-  | string
-  | number
-  | boolean
-  | null
-  | JsonSerializable[]
-  | { [key: string]: JsonSerializable };
+export type JsonSerializable = ɵJsonSerializable;
 
 export interface AgentContextInput {
   description: MaybeRefOrGetter<string>;
@@ -35,9 +31,7 @@ export function useAgentContext(context: AgentContextInput): void {
   const resolvedValue = computed(() => toValue(context.value));
 
   const stringValue = computed(() =>
-    typeof resolvedValue.value === "string"
-      ? resolvedValue.value
-      : JSON.stringify(resolvedValue.value),
+    ɵserializeContextValue(resolvedValue.value),
   );
 
   watch(