@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

package/src/v2/components/__tests__/A2UIMessageRenderer.test.ts

@@ -1,17 +1,25 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { defineComponent, h, ref } from "vue";
-import { render, waitFor } from "@testing-library/vue";
+import { fireEvent, render, waitFor } from "@testing-library/vue";
+import type { ɵA2UIActionInterceptor } from "@copilotkit/core";
 import { createA2UIMessageRenderer } from "../A2UIMessageRenderer";
 import { CopilotKitKey } from "../../providers/keys";
 
-function copilotKitProvide() {
+function copilotKitProvide(
+  onRunAgent: (properties: Record<string, unknown>) => void = () => undefined,
+) {
+  const copilotkit = {
+    properties: {} as Record<string, unknown>,
+    setProperties(properties: Record<string, unknown>) {
+      copilotkit.properties = properties;
+    },
+    runAgent: async () => {
+      onRunAgent(copilotkit.properties);
+    },
+  };
   return {
     [CopilotKitKey as symbol]: {
-      copilotkit: ref({
-        properties: {},
-        setProperties: () => undefined,
-        runAgent: async () => undefined,
-      }),
+      copilotkit: ref(copilotkit),
       executingToolCallIds: ref(new Set()),
       a2uiTheme: ref({}),
       a2uiCatalog: ref(undefined),
@@ -22,6 +30,10 @@ function copilotKitProvide() {
 }
 
 describe("createA2UIMessageRenderer", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   const renderLifecycle = (
     content: Record<string, unknown>,
     options: Partial<Parameters<typeof createA2UIMessageRenderer>[0]> = {},
@@ -46,6 +58,43 @@ describe("createA2UIMessageRenderer", () => {
     expect(container.textContent).toContain("~97 tokens");
   });
 
+  it("keeps an early retry looking like building until showAfterMs passes", async () => {
+    vi.useFakeTimers();
+    const { container } = renderLifecycle(
+      { status: "retrying", attempt: 1, maxAttempts: 3 },
+      { recovery: { showAfterMs: 2000 } },
+    );
+    expect(container.textContent).toContain("Building interface");
+    await vi.advanceTimersByTimeAsync(2000);
+    expect(container.textContent).toContain(
+      "Retrying generation… (1/3 attempts)",
+    );
+  });
+
+  it("shows retry validation issues unless debugExposure is hidden", () => {
+    const retry = {
+      status: "retrying",
+      attempt: 2,
+      errors: [{ code: "missing_required_prop" }],
+    };
+    const shown = renderLifecycle(retry);
+    expect(shown.container.querySelector("details summary")?.textContent).toBe(
+      "validation issues",
+    );
+    expect(shown.container.textContent).toContain("missing_required_prop");
+    const hidden = renderLifecycle(retry, {
+      recovery: { debugExposure: "hidden" },
+    });
+    expect(hidden.container.querySelector("details")).toBeNull();
+  });
+
+  it("shows collapsed developer details on failure by default", () => {
+    const { container } = renderLifecycle({ status: "failed", error: "boom" });
+    const details = container.querySelector("details");
+    expect(details?.hasAttribute("open")).toBe(false);
+    expect(details?.textContent).toContain("boom");
+  });
+
   it("shows the retry state for status 'retrying'", () => {
     const { container } = renderLifecycle({
       status: "retrying",
@@ -295,4 +344,118 @@ describe("createA2UIMessageRenderer", () => {
       expect(container.querySelector("[data-surface-id='s2']")).not.toBeNull();
     });
   });
+
+  const buttonContent = {
+    a2ui_operations: [
+      {
+        version: "v0.9",
+        createSurface: {
+          surfaceId: "form",
+          catalogId: "https://a2ui.org/specification/v0_9/basic_catalog.json",
+        },
+      },
+      {
+        version: "v0.9",
+        updateComponents: {
+          surfaceId: "form",
+          components: [
+            {
+              id: "root",
+              component: "Button",
+              child: "label",
+              action: { event: { name: "confirm", context: { n: 1 } } },
+            },
+            { id: "label", component: "Text", text: "Confirm" },
+          ],
+        },
+      },
+    ],
+  };
+
+  /** Renders the button surface, clicks it, and returns what reached the agent. */
+  async function clickButton(onAction?: ɵA2UIActionInterceptor) {
+    const forwarded: Record<string, unknown>[] = [];
+    const renderer = createA2UIMessageRenderer({ theme: {}, onAction });
+    const { findByRole } = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: buttonContent,
+        message: {},
+        agent: { agentId: "a" },
+      },
+      global: {
+        provide: copilotKitProvide((properties) =>
+          forwarded.push({ ...properties }),
+        ),
+      },
+    });
+    await fireEvent.click(await findByRole("button", { hidden: true }));
+    return forwarded;
+  }
+
+  it("forwards a button click to the agent wrapped as an A2UI userAction envelope", async () => {
+    const forwarded = await clickButton();
+    await waitFor(() => expect(forwarded).toHaveLength(1));
+    expect(forwarded[0]).toEqual({
+      a2uiAction: {
+        userAction: {
+          name: "confirm",
+          surfaceId: "form",
+          sourceComponentId: "root",
+          context: { n: 1 },
+          timestamp: expect.any(String),
+        },
+      },
+    });
+  });
+
+  it("does not run the agent when onAction handles the action", async () => {
+    const onAction = vi.fn<ɵA2UIActionInterceptor>(() => null);
+    const forwarded = await clickButton(onAction);
+    await waitFor(() => expect(onAction).toHaveBeenCalledOnce());
+    expect(forwarded).toEqual([]);
+  });
+
+  it("keeps the loader over the hidden surface until the surface can paint", async () => {
+    const renderer = createA2UIMessageRenderer({ theme: {} });
+    const createOnly = {
+      a2ui_operations: [buttonContent.a2ui_operations[0]],
+    };
+    const mounted = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: { status: "building", progressTokens: 120 },
+        message: {},
+        agent: {},
+      },
+      global: { provide: copilotKitProvide() },
+    });
+
+    await mounted.rerender({
+      activityType: "a2ui-surface",
+      content: createOnly,
+      message: {},
+      agent: {},
+    });
+    // A surface without components cannot paint: the loader stays on top.
+    expect(mounted.container.textContent).toContain("~120 tokens");
+    expect(
+      mounted.container.querySelector(
+        "[aria-hidden='true'] [data-testid='a2ui-activity-renderer']",
+      ),
+    ).not.toBeNull();
+
+    await mounted.rerender({
+      activityType: "a2ui-surface",
+      content: buttonContent,
+      message: {},
+      agent: {},
+    });
+    await waitFor(() => {
+      expect(mounted.container.textContent).not.toContain("Building interface");
+      expect(
+        mounted.container.querySelector("[aria-hidden='true']"),
+      ).toBeNull();
+    });
+  });
 });

package/src/v2/components/__tests__/CopilotKitInspector.test.ts

@@ -62,6 +62,48 @@ describe("CopilotKitInspector", () => {
     );
   });
 
+  it("forwards event listeners to the web inspector element", async () => {
+    const onVisibility = vi.fn();
+    const wrapper = mount(CopilotKitInspector, {
+      attrs: { onCpkInspectorVisibilityChange: onVisibility },
+    });
+    await settleInspectorLoad();
+
+    const event = new CustomEvent("cpk-inspector-visibility-change", {
+      detail: { visible: false },
+    });
+    wrapper.get("cpk-web-inspector").element.dispatchEvent(event);
+
+    expect(onVisibility).toHaveBeenCalledWith(event);
+  });
+
+  it("opens a request made before the web inspector module resolves", async () => {
+    const wrapper = mount(CopilotKitInspector);
+    const openRequest = { messageId: "message-early" };
+    await wrapper.setProps({ openRequest });
+
+    await settleInspectorLoad();
+
+    const inspector = wrapper.get("cpk-web-inspector")
+      .element as HTMLElement & {
+      openInspector: ReturnType<typeof vi.fn>;
+    };
+    expect(inspector.openInspector).toHaveBeenCalledExactlyOnceWith(
+      "message_toolbar",
+      openRequest,
+    );
+  });
+
+  it("emits Inspector visibility and removes the element on unmount", async () => {
+    const wrapper = mount(CopilotKitInspector, { attachTo: document.body });
+    await settleInspectorLoad();
+    expect(wrapper.emitted("visibility-change")).toEqual([[true]]);
+
+    wrapper.unmount();
+
+    expect(document.querySelector("cpk-web-inspector")).toBeNull();
+  });
+
   it("forwards Inspector open requests to the mounted element", async () => {
     const openRequest = { messageId: "message-1" };
     const wrapper = mount(CopilotKitInspector, {

package/src/v2/components/__tests__/LicenseWarningBanner.test.ts

@@ -1,7 +1,24 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it, vi } from "vitest";
+import { defineComponent, h } from "vue";
+import type { CopilotChatLabels } from "@copilotkit/core";
+import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
+import InlineFeatureWarning from "../InlineFeatureWarning.vue";
 import LicenseWarningBanner from "../LicenseWarningBanner.vue";
 
+/** Mounts `child` inside a chat configuration with `labels`. */
+function mountWithLabels(
+  labels: Partial<CopilotChatLabels>,
+  child: () => ReturnType<typeof h>,
+) {
+  const Host = defineComponent({
+    setup: () => () =>
+      h(CopilotChatConfigurationProvider, { labels }, { default: child }),
+  });
+  return mount(Host);
+}
+
+// The banner text rules are covered next to core's ɵgetLicenseBannerSpec.
 describe("LicenseWarningBanner", () => {
   it("reactively renders and invokes the optional dismiss callback", async () => {
     const onDismiss = vi.fn();
@@ -20,4 +37,47 @@ describe("LicenseWarningBanner", () => {
 
     expect(wrapper.find("button").exists()).toBe(false);
   });
+
+  it("shows the core spec's text and link", () => {
+    const wrapper = mount(LicenseWarningBanner, {
+      props: { type: "expiring", graceRemaining: 1 },
+    });
+
+    expect(wrapper.get("span").text()).toBe(
+      "Your CopilotKit license expires in 1 day. Please renew.",
+    );
+    expect(wrapper.get("a").attributes("href")).toBe(
+      "https://dashboard.operations.copilotkit.ai",
+    );
+  });
+
+  it("uses the configured chat labels", () => {
+    const wrapper = mountWithLabels(
+      { licenseInvalidText: "Token ungültig" },
+      () => h(LicenseWarningBanner, { type: "invalid" }),
+    );
+
+    expect(wrapper.get("span").text()).toBe("Token ungültig");
+  });
+});
+
+describe("InlineFeatureWarning", () => {
+  it("shows the default feature-unlicensed label", () => {
+    const wrapper = mount(InlineFeatureWarning, {
+      props: { featureName: "Chat" },
+    });
+
+    expect(wrapper.text()).toContain(
+      '⚠ The "Chat" feature requires a CopilotKit license.',
+    );
+  });
+
+  it("uses the configured feature-unlicensed label", () => {
+    const wrapper = mountWithLabels(
+      { licenseFeatureUnlicensedText: "{feature} braucht eine Lizenz." },
+      () => h(InlineFeatureWarning, { featureName: "Chat" }),
+    );
+
+    expect(wrapper.text()).toContain("Chat braucht eine Lizenz.");
+  });
 });

package/src/v2/components/__tests__/OpenGenerativeUIRenderer.test.ts

@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type * as CoreModule from "@copilotkit/core";
 import { render } from "@testing-library/vue";
 import { ref } from "vue";
 import type { Ref } from "vue";
@@ -37,12 +38,25 @@ const mockCreate = vi.fn<MockCreateFn>(() => ({
   destroy: mockDestroy,
 }));
 
-vi.mock("@jetbrains/websandbox", () => ({
-  default: {
-    create: (localApi: Record<string, unknown>, options: SandboxOptions) =>
-      mockCreate(localApi, options),
-  },
-}));
+// Run the real core controller against a fake websandbox
+vi.mock("@copilotkit/core", async (importOriginal) => {
+  const actual = await importOriginal<typeof CoreModule>();
+  class TestOpenGenerativeUIController
+    extends actual.ɵOpenGenerativeUIController
+  {
+    constructor() {
+      super({
+        loadWebsandbox: async () => ({
+          create: (localApi, options) => mockCreate(localApi, options),
+        }),
+      });
+    }
+  }
+  return {
+    ...actual,
+    ɵOpenGenerativeUIController: TestOpenGenerativeUIController,
+  };
+});
 
 async function flushImport() {
   await new Promise((resolve) => setTimeout(resolve, 0));
@@ -86,16 +100,23 @@ describe("OpenGenerativeUIRenderer", () => {
     vi.restoreAllMocks();
   });
 
-  it("renders placeholder when no html", async () => {
+  it("shows the progress overlay with a spinner while generating", async () => {
     const { getByTestId, queryByTestId } = renderRenderer({
       initialHeight: 300,
     });
     await flushImport();
-    expect(getByTestId("open-generative-ui-placeholder")).not.toBeNull();
+    expect(getByTestId("open-generative-ui-spinner")).not.toBeNull();
     expect(queryByTestId("open-generative-ui-final-sandbox")).toBeNull();
     expect(mockCreate).not.toHaveBeenCalled();
   });
 
+  it("shows no spinner or overlay once generation is done", async () => {
+    const { queryByTestId } = renderRenderer({ generating: false });
+    await flushImport();
+    expect(queryByTestId("open-generative-ui-progress-overlay")).toBeNull();
+    expect(queryByTestId("open-generative-ui-spinner")).toBeNull();
+  });
+
   it("creates final sandbox when html is complete", async () => {
     renderRenderer({
       html: ["<head></head><body><p>Hello</p></body>"],
@@ -178,6 +199,41 @@ describe("OpenGenerativeUIRenderer", () => {
     expect(options.frameContent).toContain("v2");
   });
 
+  it("sizes the container to the height the final sandbox reports", async () => {
+    const iframe = document.createElement("iframe");
+    mockCreate.mockImplementationOnce((_localApi, options) => {
+      (options.frameContainer as HTMLElement).appendChild(iframe);
+      return {
+        iframe,
+        promise: Promise.resolve(),
+        run: mockRun,
+        destroy: mockDestroy,
+      };
+    });
+    const { getByTestId } = renderRenderer({
+      initialHeight: 150,
+      html: ["<body><p>Chart</p></body>"],
+      htmlComplete: true,
+      generating: false,
+    });
+    await flushImport();
+    expect(getByTestId("open-generative-ui-renderer").style.height).toBe(
+      "150px",
+    );
+
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        source: iframe.contentWindow,
+        data: { type: "__ck_resize", height: 420 },
+      }),
+    );
+    await flushImport();
+
+    expect(getByTestId("open-generative-ui-renderer").style.height).toBe(
+      "420px",
+    );
+  });
+
   it("destroys sandbox on unmount", async () => {
     const mounted = renderRenderer({
       html: ["<head></head><body>bye</body>"],

package/src/v2/components/__tests__/OpenGenerativeUIToolRenderer.test.ts

@@ -0,0 +1,38 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "@testing-library/vue";
+import { ToolCallStatus } from "@copilotkit/core";
+import { OpenGenerativeUIToolRenderer } from "../OpenGenerativeUIRenderer";
+
+function toolProps(messages: string[], status = ToolCallStatus.InProgress) {
+  return {
+    name: "generateSandboxedUi",
+    args: { placeholderMessages: [...messages] },
+    status,
+  };
+}
+
+describe("OpenGenerativeUIToolRenderer", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("keeps rotating while streamed snapshots repeat the same messages", async () => {
+    const view = render(OpenGenerativeUIToolRenderer, {
+      props: toolProps(["Sketching", "Styling"]),
+    });
+    expect(view.container.textContent).toBe("Styling");
+
+    await vi.advanceTimersByTimeAsync(4000);
+    await view.rerender(toolProps(["Sketching", "Styling"]));
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(view.container.textContent).toBe("Sketching");
+  });
+
+  it("renders nothing once the tool call is complete", async () => {
+    const view = render(OpenGenerativeUIToolRenderer, {
+      props: toolProps(["Sketching"]),
+    });
+    await view.rerender(toolProps(["Sketching"], ToolCallStatus.Complete));
+    expect(view.container.textContent).toBe("");
+  });
+});

package/src/v2/components/a2ui/A2UIBuiltInToolCallRenderer.ts

@@ -1,15 +1,10 @@
 import { watch } from "vue";
 import type { ShallowRef } from "vue";
-import { z } from "zod";
+import * as z from "zod";
+import { ɵRENDER_A2UI_TOOL_NAME as RENDER_A2UI_TOOL_NAME } from "@copilotkit/core";
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
 
-/**
- * Tool name used by the dynamic A2UI generation secondary LLM.
- * This renderer is auto-registered when A2UI is enabled.
- */
-export const RENDER_A2UI_TOOL_NAME = "render_a2ui";
-
 /**
  * Registers a no-op renderer for the `render_a2ui` tool call so its raw
  * streamed args are never surfaced in the transcript, as React does.
@@ -20,12 +15,9 @@ export const RENDER_A2UI_TOOL_NAME = "render_a2ui";
  * by `createA2UIMessageRenderer`. A skeleton per tool call would duplicate on
  * retries and multi-call generations and linger after the surface painted.
  *
- * The renderer is registered via the props-based `setRenderToolCalls`
- * mechanism (not `useRenderTool`).
- *
- * This ensures user-registered `useRenderTool({ name: "render_a2ui", ... })`
- * hooks automatically override the built-in, since the merge logic in
- * vue-core.ts gives hook-based entries priority over prop-based entries.
+ * It is a built-in renderer, so a `renderToolCalls` entry or a
+ * `useRenderTool({ name: "render_a2ui" })` hook replaces it, and setting the
+ * provider's renderers never removes it.
  *
  * Call from the provider's setup function and pass a cleanup callback.
  */
@@ -45,19 +37,7 @@ export function registerA2UIBuiltInToolCallRenderer(
         render: () => null,
       });
 
-      // Register via props-based mechanism so useRenderTool hooks take priority
-      const existing = core.propRenderToolCalls;
-      core.setRenderToolCalls([
-        ...existing.filter((rc) => rc.name !== RENDER_A2UI_TOOL_NAME),
-        renderer,
-      ]);
-
-      onCleanup(() => {
-        const current = core.propRenderToolCalls;
-        core.setRenderToolCalls(
-          current.filter((rc) => rc.name !== RENDER_A2UI_TOOL_NAME),
-        );
-      });
+      onCleanup(core.ɵaddBuiltInRenderToolCall(renderer));
     },
     { immediate: true },
   );