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

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

@@ -1,4 +1,12 @@
-import { computed, defineComponent, onMounted, ref, watch } from "vue";
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
 import type { PropType } from "vue";
 import { screen, fireEvent, waitFor, cleanup } from "@testing-library/vue";
 import { afterEach, describe, expect, it } from "vitest";
@@ -27,6 +35,11 @@ import {
   textChunkEvent,
   testId,
 } from "../../__tests__/utils/test-helpers";
+import { mountWithProvider } from "../../__tests__/utils/mount";
+import {
+  StateCapturingAgent,
+  toolCallMessage,
+} from "../../__tests__/utils/agents";
 
 afterEach(() => {
   cleanup();
@@ -874,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");
@@ -912,6 +929,54 @@ describe("useFrontendTool E2E - Dynamic Registration", () => {
     });
   });
 
+  describe("Overriding a provider tool", () => {
+    it("brings the provider tool back after the overriding component unmounts", async () => {
+      const calls: string[] = [];
+      const lookupTool = (owner: string): VueFrontendTool => ({
+        name: "lookup",
+        parameters: z.object({}),
+        followUp: false,
+        handler: async () => {
+          calls.push(owner);
+          return owner;
+        },
+      });
+
+      const OverridingTool = defineComponent({
+        setup() {
+          useFrontendTool(lookupTool("component"));
+          return () => null;
+        },
+      });
+
+      const showOverride = ref(true);
+      const agent = new StateCapturingAgent(
+        [
+          { newMessages: [toolCallMessage("lookup")] },
+          { newMessages: [toolCallMessage("lookup")] },
+        ],
+        "test-agent",
+      );
+      const { getCore, wrapper } = mountWithProvider(
+        () => (showOverride.value ? h(OverridingTool) : h("div")),
+        {
+          frontendTools: [lookupTool("provider")],
+          agents__unsafe_dev_only: { "test-agent": agent },
+        },
+      );
+
+      await nextTick();
+      await getCore().runAgent({ agent });
+
+      showOverride.value = false;
+      await nextTick();
+      await getCore().runAgent({ agent });
+
+      expect(calls).toEqual(["component", "provider"]);
+      wrapper.unmount();
+    });
+  });
+
   describe("Integration with Chat UI", () => {
     it("should render tool output correctly in chat interface", async () => {
       const agent = new MockStepwiseAgent();

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

@@ -0,0 +1,106 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  expectTypeOf,
+  it,
+  vi,
+} from "vitest";
+import { defineComponent, h, toRaw } from "vue";
+import { z } from "zod";
+import type { ActivityMessage } from "@ag-ui/core";
+import { useRenderActivityMessage } from "../use-render-activity-message";
+import type {
+  VueActivityMessageRenderer,
+  VueActivityMessageRendererProps,
+} from "../../types";
+import { renderWithCopilotKit } from "../../__tests__/utils/mount";
+
+const ProgressRenderer = defineComponent({
+  props: { content: { type: Object, required: true } },
+  setup: () => () => null,
+});
+
+const progressSchema = z.object({
+  label: z.string(),
+  percent: z.number().default(0),
+});
+
+// A zod schema is a Standard Schema, so it fits the `content` field, and the
+// renderer's content type is the schema's output type.
+const progressRenderer = {
+  activityType: "progress",
+  content: progressSchema,
+  render: ProgressRenderer,
+} satisfies VueActivityMessageRenderer<z.output<typeof progressSchema>>;
+
+function activityMessage(content: Record<string, unknown>): ActivityMessage {
+  return {
+    id: "activity-1",
+    role: "activity",
+    activityType: "progress",
+    content,
+  };
+}
+
+function renderWithProgressRenderer() {
+  let helpers: ReturnType<typeof useRenderActivityMessage> | undefined;
+  const Probe = defineComponent({
+    setup() {
+      helpers = useRenderActivityMessage();
+      return () => null;
+    },
+  });
+
+  renderWithCopilotKit(() => h(Probe), {
+    providerProps: { renderActivityMessages: [progressRenderer] },
+  });
+
+  if (!helpers) throw new Error("useRenderActivityMessage did not run");
+  return helpers;
+}
+
+describe("useRenderActivityMessage", () => {
+  let consoleWarnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore();
+  });
+
+  it("types a zod content schema's output as the render props content", () => {
+    type Props = VueActivityMessageRendererProps<
+      z.output<typeof progressSchema>
+    >;
+    expectTypeOf<Props["content"]>().toEqualTypeOf<{
+      label: string;
+      percent: number;
+    }>();
+  });
+
+  it("passes the zod schema's parsed output to the renderer", () => {
+    const { renderActivityMessage } = renderWithProgressRenderer();
+
+    const result = renderActivityMessage(activityMessage({ label: "Upload" }));
+
+    // The provider stores renderers in reactive state, so compare the raw value.
+    expect(toRaw(result?.renderer)).toBe(ProgressRenderer);
+    expect(result?.props.content).toEqual({ label: "Upload", percent: 0 });
+  });
+
+  it("returns null and warns when the content fails the schema", () => {
+    const { renderActivityMessage } = renderWithProgressRenderer();
+
+    const result = renderActivityMessage(activityMessage({ label: 42 }));
+
+    expect(result).toBeNull();
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "[CopilotKit] Failed to parse content for activity message 'progress':",
+      expect.any(Array),
+    );
+  });
+});

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

@@ -93,7 +93,7 @@ describe("useRenderTool", () => {
     expect(typeof renderer?.render).toBe("function");
   });
 
-  it("registers wildcard renderer and defaults parameters schema to z.any", () => {
+  it("registers wildcard renderer and defaults parameters to a schema that accepts any value", () => {
     const core = createMockCore();
     mockUseCopilotKit.mockReturnValue({ copilotkit: { value: core } });
 
@@ -118,11 +118,8 @@ describe("useRenderTool", () => {
     const renderer = core.renderToolCalls.find((item) => item.name === "*");
     expect(renderer).toBeDefined();
     expect(typeof renderer?.render).toBe("function");
-    const wildcardArgs = renderer?.args as
-      | { safeParse: (v: unknown) => { success: boolean } }
-      | undefined;
-    expect(wildcardArgs).toBeDefined();
-    expect(wildcardArgs!.safeParse({ arbitrary: true }).success).toBe(true);
+    const result = renderer?.args["~standard"].validate({ arbitrary: true });
+    expect(result).toEqual({ value: { arbitrary: true } });
   });
 
   it("accepts a Vue component renderer", () => {