@copilotkit/vue 2.0.0-rc.8 → 2.0.0-rc.9

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));
@@ -178,6 +192,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/a2ui/A2UIBuiltInToolCallRenderer.ts

@@ -1,6 +1,6 @@
 import { watch } from "vue";
 import type { ShallowRef } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
 

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

@@ -1,7 +1,11 @@
 import { computed, watch } from "vue";
 import type { ShallowRef } from "vue";
 import type { Catalog, ComponentApi } from "@a2ui/web_core/v0_9";
-import { zodToJsonSchema } from "zod-to-json-schema";
+import {
+  A2UI_SCHEMA_CONTEXT_DESCRIPTION,
+  buildCatalogContextValue as buildContextValue,
+  extractCatalogComponentSchemas,
+} from "@copilotkit/a2ui-renderer/catalog-schema";
 import {
   A2UI_DEFAULT_GENERATION_GUIDELINES,
   A2UI_DEFAULT_DESIGN_GUIDELINES,
@@ -9,22 +13,9 @@ import {
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { vueBasicCatalog } from "./catalog";
 
-/**
- * Context description used to identify the A2UI component schema in
- * RunAgentInput.context.  Must match the constant in @ag-ui/a2ui-middleware
- * so the middleware can overwrite a frontend-provided schema with a
- * server-side one.
- *
- * Duplicated from @copilotkit/a2ui-renderer/catalog-utils to avoid pulling
- * in React dependencies.
- */
-const A2UI_SCHEMA_CONTEXT_DESCRIPTION =
-  "A2UI Component Schema — available components for generating UI surfaces. " +
-  "Use these component names and properties when creating A2UI operations.";
-
 /**
  * Build a context string describing the available A2UI catalog.
- * Vue-native equivalent of buildCatalogContextValue from a2ui-renderer.
+ * Defaults to the Vue basic catalog.
  *
  * When `options.includeSchema` is `false`, custom components are listed by name
  * only and their JSON schemas are omitted.
@@ -33,92 +24,7 @@ export function buildCatalogContextValue(
   catalog?: Catalog<ComponentApi>,
   options?: { includeSchema?: boolean },
 ): string {
-  const resolved = catalog ?? vueBasicCatalog;
-  const BASIC_CATALOG_ID =
-    "https://a2ui.org/specification/v0_9/basic_catalog.json";
-  const lines: string[] = [];
-  lines.push("Available A2UI catalog:");
-
-  if (resolved.id === BASIC_CATALOG_ID) {
-    lines.push(`- ${resolved.id} (basic catalog)`);
-    return lines.join("\n");
-  }
-
-  // Check if the resolved catalog extends the basic catalog
-  let isSuperset = true;
-  for (const name of vueBasicCatalog.components.keys()) {
-    if (!resolved.components.has(name)) {
-      isSuperset = false;
-      break;
-    }
-  }
-
-  // Identify custom components (not in basic catalog)
-  const customNames: string[] = [];
-  for (const name of resolved.components.keys()) {
-    if (!vueBasicCatalog.components.has(name)) {
-      customNames.push(name);
-    }
-  }
-
-  lines.push(`- ${resolved.id}`);
-  if (isSuperset) {
-    lines.push(
-      "  Extends the basic catalog with all standard components plus:",
-    );
-  } else {
-    lines.push("  Custom catalog (does NOT include all basic components).");
-    lines.push("  Custom components:");
-  }
-
-  for (const name of customNames) {
-    const comp = resolved.components.get(name);
-    if (!comp) continue;
-    if (options?.includeSchema === false) {
-      lines.push(`  - ${name}`);
-      continue;
-    }
-    const jsonSchema = zodToJsonSchema(comp.schema);
-    lines.push(`  - ${name}:`);
-    lines.push(
-      `    ${JSON.stringify(jsonSchema, null, 2).split("\n").join("\n    ")}`,
-    );
-  }
-
-  return lines.join("\n");
-}
-
-/**
- * Extract component schemas from a catalog in A2UI v0.9 inline format.
- * Vue-native equivalent of extractCatalogComponentSchemas.
- */
-function extractCatalogComponentSchemas(catalog?: Catalog<ComponentApi>): {
-  catalogId: string;
-  components: Record<string, Record<string, unknown>>;
-} {
-  const resolved = catalog ?? vueBasicCatalog;
-  const components: Record<string, Record<string, unknown>> = {};
-
-  for (const [name, comp] of resolved.components) {
-    const zodSchema = zodToJsonSchema(comp.schema, {
-      target: "jsonSchema2019-09",
-    }) as { properties?: Record<string, unknown>; required?: string[] };
-
-    components[name] = {
-      allOf: [
-        { $ref: "common_types.json#/$defs/ComponentCommon" },
-        {
-          properties: {
-            component: { const: name },
-            ...zodSchema.properties,
-          },
-          required: ["component", ...(zodSchema.required ?? [])],
-        },
-      ],
-    };
-  }
-
-  return { catalogId: resolved.id, components };
+  return buildContextValue(catalog ?? vueBasicCatalog, options);
 }
 
 /**
@@ -165,7 +71,9 @@ export function registerA2UICatalogContext(
   // Register schema + generation/design guidelines
   const schemaValue = computed(() => {
     if (!options.includeSchema()) return null;
-    return JSON.stringify(extractCatalogComponentSchemas(options.catalog()));
+    return JSON.stringify(
+      extractCatalogComponentSchemas(options.catalog() ?? vueBasicCatalog),
+    );
   });
 
   watch(

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

@@ -1,6 +1,6 @@
 import { defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
 import type { PropType, VNodeChild } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 
 /**
  * Shared pre-paint lifecycle states for the A2UI surface renderer, ported from

package/src/v2/components/a2ui.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import * as z from "zod";
 
 export type A2UIOperation = Record<string, unknown>;
 

package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.ts

@@ -7,6 +7,7 @@ import {
 } from "@testing-library/vue";
 import { defineComponent, ref, toRaw } from "vue";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import type * as CoreModule from "@copilotkit/core";
 import type { AbstractAgent } from "@ag-ui/client";
 import { EventType } from "@ag-ui/client";
 import type { A2UITheme as Theme } from "../../../types";
@@ -160,11 +161,25 @@ vi.mock("phoenix", () => ({
   Socket: MockPhoenixSocket,
 }));
 
-vi.mock("@jetbrains/websandbox", () => ({
-  default: {
-    create: (...args: unknown[]) => mockWebsandboxCreate(...args),
-  },
-}));
+// 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: (...args) => mockWebsandboxCreate(...args),
+        }),
+      });
+    }
+  }
+  return {
+    ...actual,
+    ɵOpenGenerativeUIController: TestOpenGenerativeUIController,
+  };
+});
 
 function jsonResponse(body: unknown, status = 200): Response {
   return {
@@ -667,13 +682,15 @@ describe("CopilotChat activity message rendering", () => {
 
     renderOpenGenerativeUIChat();
 
+    // The restored chat can remount the activity while it reconnects, so wait
+    // until exactly one sandbox, the restored one, is alive.
     await waitFor(() => {
-      expect(mockWebsandboxCreate).toHaveBeenCalledTimes(2);
+      const created = mockWebsandboxCreate.mock.calls.length;
+      expect(created).toBeGreaterThanOrEqual(2);
+      expect(mockWebsandboxDestroy).toHaveBeenCalledTimes(created - 1);
     });
-    expect(mockWebsandboxCreate.mock.calls[1]?.[1]).toMatchObject({
+    expect(mockWebsandboxCreate.mock.calls.at(-1)?.[1]).toMatchObject({
       frameContent: restoredHtml,
     });
-
-    expect(mockWebsandboxDestroy).toHaveBeenCalledTimes(1);
   });
 });

package/src/v2/hooks/__tests__/zod-regression.test.ts

@@ -134,7 +134,7 @@ describe("useRenderTool Zod regression", () => {
     const schema = z.object({
       action: z.discriminatedUnion("type", [
         z.object({ type: z.literal("search"), query: z.string() }),
-        z.object({ type: z.literal("navigate"), url: z.string().url() }),
+        z.object({ type: z.literal("navigate"), url: z.url() }),
       ]),
     });
 

package/src/v2/lib/processPartialHtml.ts

@@ -1,21 +1,6 @@
-export function extractCompleteStyles(html: string): string {
-  const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
-  return matches ? matches.join("") : "";
-}
-
-export function processPartialHtml(html: string): string {
-  let result = html;
-
-  result = result.replace(/<[^>]*$/, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
-  result = result.replace(/&[a-zA-Z0-9#]*$/, "");
-
-  const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
-  if (bodyMatch) {
-    result = bodyMatch[1]!;
-    result = result.replace(/<\/body>[\s\S]*/i, "");
-  }
-
-  return result;
-}
+// The partial-HTML helpers live in @copilotkit/core; these names stay for
+// existing imports.
+export {
+  ɵextractCompleteStyles as extractCompleteStyles,
+  ɵprocessPartialHtml as processPartialHtml,
+} from "@copilotkit/core";

package/src/v2/providers/CopilotKitProvider.vue

@@ -12,11 +12,11 @@ import {
   provide,
   ref,
   shallowRef,
+  toRaw,
   triggerRef,
   watch,
 } from "vue";
 import type { Component, FunctionalComponent } from "vue";
-import type { z } from "zod";
 import type { AbstractAgent } from "@ag-ui/client";
 import { ToolCallStatus } from "@copilotkit/core";
 import type {
@@ -25,13 +25,17 @@ import type {
   CopilotKitHeadersSource,
   FrontendTool,
 } from "@copilotkit/core";
-import { ɵresolveLicenseState, ɵwithHeaderDefaults } from "@copilotkit/core";
+import {
+  DEFAULT_OPEN_GENERATIVE_UI_DESIGN_SKILL,
+  GENERATE_SANDBOXED_UI_TOOL_NAME,
+  ɵresolveLicenseState,
+  ɵwithHeaderDefaults,
+} from "@copilotkit/core";
 import { schemaToJsonSchema, shouldEnableInspector } from "@copilotkit/shared";
 import type {
   RuntimeEntitlementResponse,
   RuntimeLicenseStatus,
 } from "@copilotkit/shared";
-import { zodToJsonSchema } from "zod-to-json-schema";
 import { CopilotKitCoreVue } from "../lib/vue-core";
 import { createA2UIMessageRenderer } from "../components/A2UIMessageRenderer";
 import { registerA2UIBuiltInToolCallRenderer } from "../components/a2ui/A2UIBuiltInToolCallRenderer";
@@ -91,16 +95,6 @@ const SANDBOX_FUNCTIONS_STABLE_WARNING =
 // interrupt reads the same across frameworks (see #5554).
 const HUMAN_IN_THE_LOOP_ABORTED_MESSAGE =
   "Human-in-the-loop interaction aborted";
-const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:
-
-- Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.
-- Neutral base palette: white backgrounds, zinc/slate gray text (#09090b for headings, #71717a for secondary text). One accent color for interactive elements.
-- Use system font stacks (system-ui, -apple-system, sans-serif) at readable sizes (14px body, 600 weight for headings). Tight line-heights.
-- Small, consistent border-radius (6–8px). Cards and containers use border, not shadow, for separation.
-- Buttons: solid fill for primary (dark bg, white text), outline for secondary (border + transparent bg). Subtle hover state (slight opacity or background shift).
-- Use CSS Grid or Flexbox for layout. Ensure the UI looks good at any width.
-- Minimal transitions (150ms) for hover/focus states only. No decorative animations.
-- Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
 
 /** The MCP Apps renderer with `mcpApps.allowSameOriginFallback` applied. */
 const SameOriginMCPAppsActivityRenderer: FunctionalComponent = (_, { attrs }) =>
@@ -165,6 +159,12 @@ const initialRenderCustomMessages = props.renderCustomMessages;
 const initialRenderActivityMessages = props.renderActivityMessages;
 const initialSandboxFunctions = props.openGenerativeUI?.sandboxFunctions;
 
+// Props that come from reactive state arrive as deep proxies. Zod 4 schemas
+// break behind a Vue proxy (their `_zod` property is read-only and
+// non-configurable), so read tools and renderers through their raw objects.
+const rawEntries = <T>(entries: readonly T[] | undefined): T[] =>
+  [...toRaw(entries ?? [])].map((entry) => toRaw(entry));
+
 watch(
   () => props.frontendTools,
   (next) => {
@@ -297,7 +297,7 @@ const processedHumanInTheLoop = computed(() => {
   const tools: FrontendTool[] = [];
   const renderToolCalls: VueToolCallRenderer<unknown>[] = [];
 
-  for (const tool of props.humanInTheLoop) {
+  for (const tool of rawEntries(props.humanInTheLoop)) {
     tools.push({
       type: "human-in-the-loop",
       name: tool.name,
@@ -374,7 +374,7 @@ const processedHumanInTheLoop = computed(() => {
 
 const allTools = computed(() => {
   const tools: FrontendTool[] = [];
-  for (const t of props.frontendTools) {
+  for (const t of rawEntries(props.frontendTools)) {
     tools.push(t as FrontendTool);
   }
   for (const t of builtInFrontendTools.value) {
@@ -386,9 +386,12 @@ const allTools = computed(() => {
 
 const allRenderToolCalls = computed(() => {
   const combined: VueToolCallRenderer<unknown>[] = [
-    ...(props.renderToolCalls ?? []),
+    ...rawEntries(props.renderToolCalls),
   ];
-  for (const tool of [...props.frontendTools, ...builtInFrontendTools.value]) {
+  for (const tool of [
+    ...rawEntries(props.frontendTools),
+    ...builtInFrontendTools.value,
+  ]) {
     if (tool.render) {
       const args =
         tool.parameters ?? (tool.name === "*" ? ɵanySchema : undefined);
@@ -433,23 +436,14 @@ const resolvedProperties = computed(() =>
     ? { ...props.properties, a2uiCatalogAvailable: true }
     : props.properties,
 );
-const sandboxFunctions = computed<readonly SandboxFunction[]>(
-  () => props.openGenerativeUI?.sandboxFunctions ?? [],
+const sandboxFunctions = computed<readonly SandboxFunction[]>(() =>
+  rawEntries(props.openGenerativeUI?.sandboxFunctions),
 );
-const zodToJsonSchemaCompat = (
-  schema: unknown,
-  options?: { $refStrategy?: string },
-): Record<string, unknown> =>
-  zodToJsonSchema(
-    schema as z.ZodTypeAny,
-    options as { $refStrategy?: "none" | "relative" | "root" | "seen" },
-  ) as Record<string, unknown>;
-
 const builtInFrontendTools = computed<VueFrontendTool[]>(() => {
   if (!openGenerativeUIActive.value) return [];
   return [
     {
-      name: "generateSandboxedUi",
+      name: GENERATE_SANDBOXED_UI_TOOL_NAME,
       description: GENERATE_SANDBOXED_UI_DESCRIPTION,
       parameters: GenerateSandboxedUiArgsSchema,
       handler: async () => "UI generated",
@@ -499,7 +493,7 @@ const builtInActivityRenderers = computed<
 });
 
 const allRenderActivityMessages = computed(() => [
-  ...(props.renderActivityMessages ?? []),
+  ...rawEntries(props.renderActivityMessages),
   ...builtInActivityRenderers.value,
 ]);
 
@@ -849,7 +843,7 @@ watch(
       copilotkit.value.addContext({
         description:
           "Design guidelines for the generateSandboxedUi tool. Follow these when building UI.",
-        value: designSkill ?? DEFAULT_DESIGN_SKILL,
+        value: designSkill ?? DEFAULT_OPEN_GENERATIVE_UI_DESIGN_SKILL,
       }),
     );
 
@@ -858,9 +852,7 @@ watch(
         functions.map((fn) => ({
           name: fn.name,
           description: fn.description,
-          parameters: schemaToJsonSchema(fn.parameters, {
-            zodToJsonSchema: zodToJsonSchemaCompat,
-          }),
+          parameters: schemaToJsonSchema(fn.parameters),
         })),
       );
       ids.push(

package/src/v2/providers/__tests__/CopilotKitProvider.a2ui.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { defineComponent, h, ref } from "vue";
 import { mount } from "@vue/test-utils";
-import { z } from "zod";
+import { z } from "zod-v3";
 import { Catalog } from "@a2ui/web_core/v0_9";
 import type { ComponentApi } from "@a2ui/web_core/v0_9";
 import CopilotKitProvider from "../CopilotKitProvider.vue";

package/vite.config.ts

@@ -28,6 +28,8 @@ export default defineConfig({
         "@a2ui/web_core/v0_9/basic_catalog",
         "@ag-ui/client",
         "@ag-ui/core",
+        // The framework-neutral A2UI catalog description subpath (no React).
+        "@copilotkit/a2ui-renderer/catalog-schema",
         // Core and its `/styles` subpath, so the stylesheet isn't bundled here.
         /^@copilotkit\/core(\/.*)?$/,
         // Keep the shared MCP Apps host + its subpaths external. The root entry
@@ -46,9 +48,7 @@ export default defineConfig({
         // (duplicate top-level lit binding → "Identifier 'h' has already been
         // declared") and risks double custom-element registration.
         /^@copilotkit\/web-components(\/.*)?$/,
-        "@jetbrains/websandbox",
         "zod",
-        "zod-to-json-schema",
       ],
       output: {
         globals: { vue: "Vue" },