@copilotkit/vue 2.0.0-rc.0 → 2.0.0-rc.10

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,7 +1,6 @@
-import { h, watch, type VNodeChild } from "vue";
+import { watch } from "vue";
 import type { ShallowRef } from "vue";
-import { z } from "zod";
-import type { ToolCallStatus } from "@copilotkit/core";
+import * as z from "zod";
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
 
@@ -12,8 +11,17 @@ import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
 export const RENDER_A2UI_TOOL_NAME = "render_a2ui";
 
 /**
- * Registers the built-in `render_a2ui` tool call renderer via the props-based
- * `setRenderToolCalls` mechanism (not `useRenderTool`).
+ * 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.
+ *
+ * The generation skeleton / retry / failure UX is not owned here: the A2UI
+ * middleware drives the whole lifecycle on the `a2ui-surface` activity (one
+ * stable messageId, building → retrying → failed → painted), rendered in place
+ * 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
@@ -33,23 +41,8 @@ export function registerA2UIBuiltInToolCallRenderer(
       const renderer = defineToolCallRenderer({
         name: RENDER_A2UI_TOOL_NAME,
         args: z.any(),
-        render: ({
-          status,
-          args: parameters,
-        }: {
-          status: ToolCallStatus;
-          args: unknown;
-          [key: string]: unknown;
-        }): VNodeChild => {
-          if (status === "complete") return null;
-          const params = parameters as Record<string, unknown>;
-          // Hide skeleton once the A2UI surface has enough data to render.
-          const items = params?.items;
-          if (Array.isArray(items) && items.length > 0) return null;
-          const components = params?.components;
-          if (Array.isArray(components) && components.length > 2) return null;
-          return renderA2UIProgressIndicator(parameters);
-        },
+        // Render nothing: the a2ui-surface activity owns all generation UX.
+        render: () => null,
       });
 
       // Register via props-based mechanism so useRenderTool hooks take priority
@@ -64,244 +57,8 @@ export function registerA2UIBuiltInToolCallRenderer(
         core.setRenderToolCalls(
           current.filter((rc) => rc.name !== RENDER_A2UI_TOOL_NAME),
         );
-        progressState.clear();
       });
     },
     { immediate: true },
   );
 }
-
-/**
- * Vue render-function equivalent of the React A2UIProgressIndicator.
- * Shows a skeleton wireframe that progressively reveals as tokens stream in.
- */
-const progressState = new Map<
-  string,
-  { lastTime: number; lastTokens: number }
->();
-
-function renderA2UIProgressIndicator(parameters: unknown): VNodeChild {
-  const params = parameters as Record<string, unknown> | null | undefined;
-  const key = typeof params?.name === "string" ? params.name : "__default__";
-  let state = progressState.get(key);
-  if (!state) {
-    state = { lastTime: 0, lastTokens: 0 };
-    progressState.set(key, state);
-  }
-
-  const now = Date.now();
-  let tokens = state.lastTokens;
-  if (now - state.lastTime > 200) {
-    const chars = JSON.stringify(parameters ?? {}).length;
-    tokens = Math.round(chars / 4);
-    state.lastTime = now;
-    state.lastTokens = tokens;
-  }
-
-  const phase = tokens < 50 ? 0 : tokens < 200 ? 1 : tokens < 400 ? 2 : 3;
-
-  const dot = () =>
-    h("div", {
-      style: {
-        width: "7px",
-        height: "7px",
-        borderRadius: "50%",
-        backgroundColor: "#d4d4d8",
-        flexShrink: 0,
-      },
-    });
-
-  const spacer = () => h("div", { style: { width: "12px" } });
-
-  const bar = (
-    w: number,
-    ht: number,
-    bg: string,
-    anim?: number,
-    opacity?: number,
-    transition?: string,
-  ) =>
-    h("div", {
-      style: {
-        width: `${w}px`,
-        height: `${ht}px`,
-        borderRadius: "9999px",
-        backgroundColor: bg,
-        ...(anim !== undefined
-          ? {
-              animation: `cpk-a2ui-fade 2.4s ease-in-out ${anim}s infinite`,
-            }
-          : {}),
-        ...(opacity !== undefined ? { opacity } : {}),
-        ...(transition ? { transition } : {}),
-      },
-    });
-
-  const row = (show: boolean, delay: number, children: VNodeChild[]) =>
-    h(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          opacity: show ? 1 : 0,
-          transition: `opacity 0.4s ${delay}s`,
-        },
-      },
-      children,
-    );
-
-  return h("div", { style: { margin: "12px 0", maxWidth: "320px" } }, [
-    h(
-      "div",
-      {
-        style: {
-          position: "relative",
-          overflow: "hidden",
-          borderRadius: "12px",
-          border: "1px solid rgba(228,228,231,0.8)",
-          backgroundColor: "#fff",
-          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
-          padding: "16px 18px 14px",
-        },
-      },
-      [
-        // Top bar
-        h(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              marginBottom: "12px",
-            },
-          },
-          [
-            h("div", { style: { display: "flex", gap: "4px" } }, [
-              dot(),
-              dot(),
-              dot(),
-            ]),
-            bar(
-              64,
-              6,
-              "#e4e4e7",
-              undefined,
-              phase >= 1 ? 1 : 0.4,
-              "opacity 0.5s",
-            ),
-          ],
-        ),
-        // Skeleton lines
-        h("div", { style: { display: "grid", gap: "7px" } }, [
-          row(phase >= 0, 0, [
-            bar(36, 7, "rgba(147,197,253,0.7)", 0),
-            bar(80, 7, "rgba(219,234,254,0.8)", 0.2),
-          ]),
-          row(phase >= 0, 0.1, [
-            spacer(),
-            dot(),
-            bar(100, 7, "rgba(24,24,27,0.2)", 0.3),
-          ]),
-          row(phase >= 1, 0.15, [
-            spacer(),
-            bar(48, 7, "rgba(24,24,27,0.15)", 0.1),
-            bar(40, 7, "rgba(153,246,228,0.6)", 0.5),
-            bar(56, 7, "rgba(147,197,253,0.6)", 0.3),
-          ]),
-          row(phase >= 1, 0.2, [
-            spacer(),
-            dot(),
-            bar(60, 7, "rgba(24,24,27,0.15)", 0.4),
-          ]),
-          row(phase >= 2, 0.25, [
-            bar(40, 7, "rgba(153,246,228,0.5)", 0.2),
-            dot(),
-            bar(48, 7, "rgba(24,24,27,0.15)", 0.6),
-            bar(64, 7, "rgba(147,197,253,0.5)", 0.1),
-          ]),
-          row(phase >= 2, 0.3, [
-            bar(36, 7, "rgba(147,197,253,0.6)", 0.5),
-            bar(36, 7, "rgba(24,24,27,0.12)", 0.7),
-          ]),
-          row(phase >= 3, 0.35, [
-            dot(),
-            bar(44, 7, "rgba(24,24,27,0.18)", 0.3),
-            dot(),
-            bar(56, 7, "rgba(153,246,228,0.5)", 0.8),
-            bar(48, 7, "rgba(147,197,253,0.5)", 0.4),
-          ]),
-        ]),
-        // Shimmer
-        h("div", {
-          style: {
-            pointerEvents: "none",
-            position: "absolute",
-            inset: "0",
-            background:
-              "linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%, transparent 100%)",
-            backgroundSize: "250% 100%",
-            animation: "cpk-a2ui-sweep 3s ease-in-out infinite",
-          },
-        }),
-      ],
-    ),
-    // Label
-    h(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "8px",
-          marginTop: "8px",
-        },
-      },
-      [
-        h(
-          "span",
-          {
-            style: {
-              fontSize: "12px",
-              color: "#a1a1aa",
-              letterSpacing: "0.025em",
-            },
-          },
-          "Building interface",
-        ),
-        ...(tokens > 0
-          ? [
-              h(
-                "span",
-                {
-                  style: {
-                    fontSize: "11px",
-                    color: "#d4d4d8",
-                    fontVariantNumeric: "tabular-nums",
-                  },
-                },
-                `~${tokens.toLocaleString()} tokens`,
-              ),
-            ]
-          : []),
-      ],
-    ),
-    // Keyframe styles
-    h(
-      "style",
-      `
-      @keyframes cpk-a2ui-fade {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
-      }
-      @keyframes cpk-a2ui-sweep {
-        0% { background-position: 250% 0; }
-        100% { background-position: -250% 0; }
-      }
-    `,
-    ),
-  ]);
-}

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(