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

package/dist/v2/styles/CopilotKitStyles.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Renders the CSS for CopilotKit's UI, so apps never import a stylesheet.
+ * `CopilotChat` (and so `CopilotPopup` and `CopilotSidebar`) renders it for
+ * you. Render it yourself only when you build a layout from the chat parts
+ * without `CopilotChat`.
+ *
+ * The `<style>` tag renders in place, so it is in the server HTML and the page
+ * is styled before it hydrates. Only the first instance in the app renders the
+ * tag, so a page with many chats has one copy. When that instance unmounts, the
+ * next one renders the tag in the same update. The server and the client set
+ * up instances in the same order, so hydration matches.
+ *
+ * Renders nothing when `CopilotKitProvider` has `:inject-styles="false"`.
+ */
+export declare const CopilotKitStyles: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=CopilotKitStyles.d.ts.map

package/dist/v2/styles/CopilotKitStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopilotKitStyles.d.ts","sourceRoot":"","sources":["../../../src/v2/styles/CopilotKitStyles.ts"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB;;kPAqD3B,CAAC"}

package/dist/v2/types/defineToolCallRenderer.d.ts

@@ -5,11 +5,13 @@ export declare function defineToolCallRenderer(def: {
     name: "*";
     render: VueToolCallRendererRenderFn<unknown>;
     agentId?: string;
+    group?: boolean;
 }): VueToolCallRenderer<unknown>;
 export declare function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
     name: string;
     args: S;
     render: VueToolCallRendererRenderFn<InferSchemaOutput<S>>;
     agentId?: string;
+    group?: boolean;
 }): VueToolCallRenderer<InferSchemaOutput<S>>;
 //# sourceMappingURL=defineToolCallRenderer.d.ts.map

package/dist/v2/types/defineToolCallRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defineToolCallRenderer.d.ts","sourceRoot":"","sources":["../../../src/v2/types/defineToolCallRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,wBAAgB,sBAAsB,CAAC,GAAG,EAAE;IAC1C,IAAI,EAAE,GAAG,CAAC;IACV,MAAM,EAAE,2BAA2B,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAEjC,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAAE,GAAG,EAAE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,2BAA2B,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"defineToolCallRenderer.d.ts","sourceRoot":"","sources":["../../../src/v2/types/defineToolCallRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,wBAAgB,sBAAsB,CAAC,GAAG,EAAE;IAC1C,IAAI,EAAE,GAAG,CAAC;IACV,MAAM,EAAE,2BAA2B,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAEjC,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAAE,GAAG,EAAE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,2BAA2B,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/v2/types/vue-tool-call-renderer.d.ts

@@ -32,6 +32,13 @@ export interface VueToolCallRenderer<T = unknown> {
     name: string;
     args: StandardSchemaV1<any, T>;
     agentId?: string;
+    /**
+     * Whether calls this renderer draws join the chat's tool-call groups (see
+     * `toolCallDisplay` on `CopilotChatMessageView`). CopilotKit's built-in card
+     * sets it; a renderer that leaves it unset always shows its calls on their
+     * own, since the chat can't tell what it draws (it may even draw nothing).
+     */
+    group?: boolean;
     render: VueToolCallRendererRenderFn<T>;
 }
 //# sourceMappingURL=vue-tool-call-renderer.d.ts.map

package/dist/v2/types/vue-tool-call-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue-tool-call-renderer.d.ts","sourceRoot":"","sources":["../../../src/v2/types/vue-tool-call-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,8BAA8B,CAAC,CAAC,IACxC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC,UAAU,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC;CACnB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC;IACjC,MAAM,EAAE,SAAS,CAAC;CACnB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEN;;;GAGG;AACH,MAAM,MAAM,2BAA2B,CAAC,CAAC,IACrC,CAAC,CAAC,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,GAC1D,SAAS,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjD,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,OAAO;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,2BAA2B,CAAC,CAAC,CAAC,CAAC;CACxC"}
+{"version":3,"file":"vue-tool-call-renderer.d.ts","sourceRoot":"","sources":["../../../src/v2/types/vue-tool-call-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,8BAA8B,CAAC,CAAC,IACxC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC,UAAU,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC;CACnB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC;IACjC,MAAM,EAAE,SAAS,CAAC;CACnB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEN;;;GAGG;AACH,MAAM,MAAM,2BAA2B,CAAC,CAAC,IACrC,CAAC,CAAC,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,GAC1D,SAAS,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjD,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,OAAO;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,2BAA2B,CAAC,CAAC,CAAC,CAAC;CACxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/vue",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "private": false,
   "description": "Vue 3 components and composables for CopilotKit",
   "keywords": [
@@ -20,9 +20,7 @@
     "url": "https://github.com/CopilotKit/CopilotKit.git"
   },
   "type": "module",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": false,
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
@@ -54,7 +52,6 @@
         "default": "./dist/v2/index.cjs"
       }
     },
-    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -64,12 +61,12 @@
     "@a2ui/web_core": "0.10.4",
     "@ag-ui/client": "1.0.2",
     "@ag-ui/core": "1.0.2",
-    "@copilotkit/core": "2.0.0-rc.0",
-    "@copilotkit/markdown-renderer": "2.0.0-rc.0",
-    "@copilotkit/mcp-apps-renderer": "2.0.0-rc.0",
-    "@copilotkit/shared": "2.0.0-rc.0",
-    "@copilotkit/web-components": "2.0.0-rc.0",
-    "@copilotkit/web-inspector": "2.0.0-rc.0",
+    "@copilotkit/core": "2.0.0-rc.2",
+    "@copilotkit/markdown-renderer": "2.0.0-rc.2",
+    "@copilotkit/mcp-apps-renderer": "2.0.0-rc.2",
+    "@copilotkit/shared": "2.0.0-rc.2",
+    "@copilotkit/web-components": "2.0.0-rc.2",
+    "@copilotkit/web-inspector": "2.0.0-rc.2",
     "@jetbrains/websandbox": "^1.1.3",
     "lucide-vue-next": "^0.525.0",
     "zod": "^3.25.75",
@@ -77,25 +74,18 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
-    "@tailwindcss/cli": "^4.1.11",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/vue": "^8.1.0",
     "@types/node": "^22.15.3",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-sfc": "^3.5.14",
     "@vue/test-utils": "^2.4.6",
     "arktype": "^2.1.29",
-    "concurrently": "^9.1.0",
     "eslint": "^9.30.0",
     "eslint-plugin-vue": "^10.8.0",
     "globals": "^16.5.0",
     "jsdom": "^26.1.0",
     "phoenix": "^1.8.4",
-    "postcss": "^8.5.6",
     "rxjs": "7.8.1",
-    "tailwindcss": "^4.0.8",
-    "tw-animate-css": "^1.3.5",
     "typescript": "5.8.2",
     "typescript-eslint": "^8.52.0",
     "valibot": "^1.3.0",
@@ -113,11 +103,9 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "vite build && pnpm build:css && pnpm build:types",
-    "build:css": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css -m && node scripts/scope-preflight.mjs ./dist/styles.css",
+    "build": "vite build && pnpm build:types",
     "build:types": "vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist --skipLibCheck && node -e \"const fs=require('fs');fs.cpSync('./dist/index.d.ts','./dist/index.d.mts');fs.cpSync('./dist/index.d.ts','./dist/index.d.cts');fs.cpSync('./dist/v2/index.d.ts','./dist/v2/index.d.mts');fs.cpSync('./dist/v2/index.d.ts','./dist/v2/index.d.cts')\"",
-    "dev:css": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css --watch --minify",
-    "dev": "concurrently \"pnpm dev:css\" \"vite build --watch\"",
+    "dev": "vite build --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -125,7 +113,7 @@
     "lint": "eslint .",
     "check-types": "vue-tsc --noEmit",
     "publint": "publint .",
-    "attw": "attw --pack . --profile node16 --exclude-entrypoints ./styles.css --ignore-rules internal-resolution-error",
+    "attw": "attw --pack . --profile node16 --ignore-rules internal-resolution-error",
     "clean": "node -e \"const fs=require('fs');fs.rmSync('dist',{recursive:true,force:true})\""
   }
 }

package/src/components/copilot-provider/CopilotKit.vue

@@ -8,7 +8,10 @@
 import type { CopilotKitProps } from "./types";
 import CopilotKitProvider from "../../v2/providers/CopilotKitProvider.vue";
 
-const props = defineProps<CopilotKitProps>();
+// Vue casts an absent boolean prop to `false`, so keep the provider's default.
+const props = withDefaults(defineProps<CopilotKitProps>(), {
+  injectStyles: true,
+});
 </script>
 
 <template>

package/src/v2/__tests__/exports.test.ts

@@ -8,6 +8,7 @@ describe("package exports", () => {
     expect(typeof VuePackage.CopilotChat.View).toBe("object");
     expect(typeof VuePackage.CopilotChatMessageView).toBe("object");
     expect(typeof VuePackage.CopilotChatToolCallsView).toBe("object");
+    expect(typeof VuePackage.CopilotChatToolCallGroup).toBe("object");
     expect(typeof VuePackage.CopilotChatInput).toBe("object");
     expect(typeof VuePackage.CopilotChatAssistantMessage).toBe("object");
     expect(typeof VuePackage.CopilotChatUserMessage).toBe("object");
@@ -32,11 +33,12 @@ describe("package exports", () => {
     expect(VuePackage.vueBasicCatalog.components.size).toBeGreaterThan(0);
   });
 
-  it("exports the vue stylesheet entrypoint", () => {
+  it("exports CopilotKitStyles and no stylesheet, since the CSS is injected", () => {
     const packageJson = JSON.parse(readFileSync("package.json", "utf8")) as {
       exports?: Record<string, unknown>;
     };
 
-    expect(packageJson.exports?.["./styles.css"]).toBe("./dist/styles.css");
+    expect(typeof VuePackage.CopilotKitStyles).toBe("object");
+    expect(packageJson.exports?.["./styles.css"]).toBeUndefined();
   });
 });

package/src/v2/components/A2UIMessageRenderer.ts

@@ -4,86 +4,74 @@ import { z } from "zod";
 import type { VueActivityMessageRenderer } from "../types";
 import type { A2UITheme } from "../types";
 import A2UISurfaceActivityRenderer from "./A2UISurfaceActivityRenderer.vue";
+import {
+  A2UIBuildingState,
+  A2UILifecycleFields,
+  A2UIRecoveryFailure,
+  A2UIRetryingState,
+  resolveDebugExposure,
+} from "./a2ui/A2UIRecoveryStates";
+import type { A2UIRecoveryRendererOptions } from "./a2ui/A2UIRecoveryStates";
 
 const A2UI_OPERATIONS_KEY = "a2ui_operations";
 
 export type A2UIMessageRendererOptions = {
   theme: A2UITheme;
   catalog?: any;
+  /** Optional custom loading component shown while the A2UI surface is building. */
   loadingComponent?: unknown;
+  /**
+   * Pre-paint recovery/loading UX options: timing before the "Retrying…"
+   * sub-label appears, and how much retry/debug detail to surface.
+   */
+  recovery?: A2UIRecoveryRendererOptions;
 };
 
 /**
- * Default loading component shown while an A2UI surface is generating.
- * Mirrors React's `DefaultA2UILoading` in
- * `packages/react-core/src/a2ui/A2UIMessageRenderer.tsx`:
- * an animated dot + "Generating UI..." label + three shimmer bars
- * (80% / 60% / 40% widths) with staggered `cpk-a2ui-pulse` opacity animation.
+ * The `a2ui-surface` activity carries the WHOLE generative-UI lifecycle on one
+ * stable messageId: pre-paint `status` ("building" | "retrying" | "failed")
+ * with recovery detail, then `a2ui_operations` on paint. The states swap in
+ * place, so the painted surface replaces the skeleton. `.passthrough()` keeps
+ * the operations and any future fields.
  */
-const DefaultA2UILoading = defineComponent({
-  name: "DefaultA2UILoading",
-  setup() {
-    const barWidths = [0.8, 0.6, 0.4] as const;
-    return () =>
-      h(
-        "div",
-        {
-          class:
-            "cpk:flex cpk:flex-col cpk:gap-3 cpk:rounded-xl cpk:border cpk:border-gray-100 cpk:bg-gray-50/50 cpk:p-5",
-          style: { minHeight: "120px" },
-          "data-testid": "a2ui-loading",
-        },
-        [
-          h("div", { class: "cpk:flex cpk:items-center cpk:gap-2" }, [
-            h("div", {
-              class: "cpk:h-3 cpk:w-3 cpk:rounded-full cpk:bg-gray-200",
-              style: {
-                animation: "cpk-a2ui-pulse 1.5s ease-in-out infinite",
-              },
-              "data-testid": "a2ui-loading-dot",
-            }),
-            h(
-              "span",
-              {
-                class: "cpk:text-xs cpk:font-medium cpk:text-gray-400",
-              },
-              "Generating UI...",
-            ),
-          ]),
-          h(
-            "div",
-            { class: "cpk:flex cpk:flex-col cpk:gap-2" },
-            barWidths.map((width, i) =>
-              h("div", {
-                key: i,
-                class: "cpk:h-3 cpk:rounded cpk:bg-gray-200/70",
-                style: {
-                  width: `${width * 100}%`,
-                  animation: `cpk-a2ui-pulse 1.5s ease-in-out ${i * 0.15}s infinite`,
-                },
-                "data-testid": "a2ui-loading-bar",
-              }),
-            ),
-          ),
-          h(
-            "style",
-            {},
-            `@keyframes cpk-a2ui-pulse {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
-}`,
-          ),
-        ],
-      );
-  },
-});
+const A2UISurfaceContentSchema = z
+  .object({
+    a2ui_operations: z.array(z.any()).optional(),
+    ...A2UILifecycleFields,
+  })
+  .passthrough();
 
 export function createA2UIMessageRenderer(
   options: A2UIMessageRendererOptions,
 ): VueActivityMessageRenderer<any> {
+  const showAfterMs = options.recovery?.showAfterMs ?? 2000;
+  const showAfterAttempts = options.recovery?.showAfterAttempts ?? 2;
+  const optionDebugExposure = options.recovery?.debugExposure ?? "collapsed";
+
+  // Renders the pre-paint lifecycle state for a content snapshot.
+  const renderLifecycle = (content: any) => {
+    const debugExposure = resolveDebugExposure(content, optionDebugExposure);
+    if (content?.status === "failed") {
+      return h(A2UIRecoveryFailure, { content, debugExposure });
+    }
+    if (content?.status === "retrying") {
+      return h(A2UIRetryingState, {
+        content,
+        showAfterMs,
+        showAfterAttempts,
+        debugExposure,
+      });
+    }
+    // "building" / default: a host-supplied loader wins; else the skeleton.
+    if (options.loadingComponent) {
+      return h(options.loadingComponent as any);
+    }
+    return h(A2UIBuildingState, { content });
+  };
+
   return {
     activityType: "a2ui-surface",
-    content: z.any(),
+    content: A2UISurfaceContentSchema,
     render: defineComponent({
       name: "A2UIMessageRendererHost",
       props: {
@@ -104,11 +92,11 @@ export function createA2UIMessageRenderer(
         );
 
         return () => {
+          // No painted surface yet → the pre-paint lifecycle state. It shares
+          // this activity's messageId, so the painted surface below replaces
+          // it in place once operations arrive.
           if (operations.value.length === 0) {
-            if (options.loadingComponent) {
-              return h(options.loadingComponent as any);
-            }
-            return h(DefaultA2UILoading);
+            return renderLifecycle(props.content);
           }
 
           return h(A2UISurfaceActivityRenderer, {

package/src/v2/components/A2UISurfaceActivityRenderer.vue

@@ -1,24 +1,15 @@
 <script setup lang="ts">
-import {
-  computed,
-  h,
-  onBeforeUnmount,
-  shallowRef,
-  ref,
-  watch,
-  type VNode,
-} from "vue";
+import { computed, h, onBeforeUnmount, shallowRef, ref, watch } from "vue";
+import type { VNode } from "vue";
 import type { ActivityMessage } from "@ag-ui/core";
 import type { A2UITheme } from "../types";
 import type { A2UIOperation } from "./a2ui";
 import { getOperationSurfaceId } from "./a2ui";
 import { useCopilotKit } from "../providers";
-import { MessageProcessor, type SurfaceModel } from "@a2ui/web_core/v0_9";
-import {
-  vueBasicCatalog,
-  A2uiSurface,
-  type VueComponentImplementation,
-} from "./a2ui/index";
+import { MessageProcessor } from "@a2ui/web_core/v0_9";
+import type { SurfaceModel } from "@a2ui/web_core/v0_9";
+import { vueBasicCatalog, A2uiSurface } from "./a2ui/index";
+import type { VueComponentImplementation } from "./a2ui/index";
 
 const DEFAULT_SURFACE_ID = "default";
 
@@ -61,7 +52,7 @@ async function handleAction(message: unknown) {
   if (!props.agent) return;
   try {
     copilotkit.value.setProperties({
-      ...(copilotkit.value.properties ?? {}),
+      ...copilotkit.value.properties,
       a2uiAction: message,
     });
     await copilotkit.value.runAgent({ agent: props.agent as any });
@@ -160,24 +151,21 @@ const surfaceEntries = computed(() => {
     :data-activity-type="activityType"
     :data-message-id="message.id"
   >
-    <div
-      v-if="error"
-      class="cpk:rounded-lg cpk:border cpk:border-red-200 cpk:bg-red-50 cpk:p-3 cpk:text-sm cpk:text-red-700"
-    >
+    <div v-if="error" class="cpk-a2ui-message-error">
       A2UI render error: {{ error }}
     </div>
     <div
       v-else
-      class="cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6"
+      class="cpk-a2ui-message-surfaces"
       data-testid="a2ui-activity-renderer"
     >
       <div
         v-for="entry in surfaceEntries"
         :key="entry.surfaceId"
-        class="cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4"
+        class="cpk-a2ui-message-surface-host"
         :data-surface-id="entry.surfaceId"
       >
-        <div class="a2ui-surface cpk:flex cpk:flex-1">
+        <div class="a2ui-surface cpk-a2ui-message-surface">
           <A2uiSurface :surface="entry.surface" />
         </div>
       </div>

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

@@ -1,7 +1,7 @@
-import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { ref } from "vue";
 import { render, waitFor } from "@testing-library/vue";
+import { stylesheet } from "@copilotkit/core/styles";
 import { createA2UIMessageRenderer } from "../A2UIMessageRenderer";
 import { CopilotKitKey } from "../../providers/keys";
 
@@ -173,16 +173,15 @@ describe("A2UI basic catalog colours", () => {
     );
   });
 
-  it("sets the variables from the dark theme in the chat stylesheet", () => {
-    const globalsCss = readFileSync("src/styles/globals.css", "utf8");
+  it("sets the variables from the dark theme in the injected stylesheet", () => {
     const darkBlock =
-      globalsCss.match(
-        /\.dark \[data-copilotkit\],\s*\[data-copilotkit\]\.dark \{([^}]*)\}/,
+      stylesheet.match(
+        /:where\(\.dark \[data-copilotkit\],\[data-copilotkit\]\.dark\)\{([^}]*)\}/,
       )?.[1] ?? "";
 
-    expect(darkBlock).toContain("--a2ui-color-surface: var(--card);");
-    expect(darkBlock).toContain("--a2ui-color-border: oklch(0.371 0 0);");
-    expect(darkBlock).toContain("--a2ui-color-muted: var(--muted-foreground);");
-    expect(darkBlock).toContain("--a2ui-color-error: #f87171;");
+    expect(darkBlock).toContain("--a2ui-color-surface: var(--card)");
+    expect(darkBlock).toContain("--a2ui-color-border: oklch(.371 0 0)");
+    expect(darkBlock).toContain("--a2ui-color-muted: var(--muted-foreground)");
+    expect(darkBlock).toContain("--a2ui-color-error: #f87171");
   });
 });

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

@@ -22,52 +22,79 @@ function copilotKitProvide() {
 }
 
 describe("createA2UIMessageRenderer", () => {
-  it("returns loading state when no operations exist", () => {
-    const renderer = createA2UIMessageRenderer({ theme: {} });
-    const { getByTestId } = render(renderer.render, {
-      props: {
-        activityType: "a2ui-surface",
-        content: {},
-        message: {},
-        agent: {},
-      },
+  const renderLifecycle = (
+    content: Record<string, unknown>,
+    options: Partial<Parameters<typeof createA2UIMessageRenderer>[0]> = {},
+  ) => {
+    const renderer = createA2UIMessageRenderer({ theme: {}, ...options });
+    return render(renderer.render, {
+      props: { activityType: "a2ui-surface", content, message: {}, agent: {} },
     });
-    expect(getByTestId("a2ui-loading")).not.toBeNull();
+  };
+
+  it("shows the 'Building interface' skeleton while there are no operations", () => {
+    const { container } = renderLifecycle({});
+    expect(container.textContent).toContain("Building interface");
+    expect(container.textContent).not.toContain("Generating UI");
   });
 
-  it("default loading fallback renders header dot, 'Generating UI...' label, and three pulsing skeleton bars", () => {
-    const renderer = createA2UIMessageRenderer({ theme: {} });
-    const { getByTestId, getAllByTestId, container } = render(renderer.render, {
-      props: {
-        activityType: "a2ui-surface",
-        content: {},
-        message: {},
-        agent: {},
-      },
+  it("shows the live token count while building", () => {
+    const { container } = renderLifecycle({
+      status: "building",
+      progressTokens: 97,
     });
+    expect(container.textContent).toContain("~97 tokens");
+  });
 
-    const root = getByTestId("a2ui-loading");
-    expect(root).not.toBeNull();
-    expect((root as HTMLElement).textContent ?? "").toContain(
-      "Generating UI...",
+  it("shows the retry state for status 'retrying'", () => {
+    const { container } = renderLifecycle({
+      status: "retrying",
+      attempt: 2,
+      maxAttempts: 3,
+    });
+    expect(container.textContent).toContain(
+      "Retrying generation… (2/3 attempts)",
     );
+  });
 
-    const dot = getByTestId("a2ui-loading-dot") as HTMLElement;
-    expect(dot.getAttribute("style") ?? "").toMatch(/cpk-a2ui-pulse/);
+  it("honours recovery.showAfterAttempts", () => {
+    const { container } = renderLifecycle(
+      { status: "retrying", attempt: 2, maxAttempts: 3 },
+      { recovery: { showAfterAttempts: 5, showAfterMs: 999999 } },
+    );
+    expect(container.textContent).toContain("Building interface");
+    expect(container.textContent).not.toContain("Retrying");
+  });
 
-    const bars = getAllByTestId("a2ui-loading-bar") as HTMLElement[];
-    expect(bars).toHaveLength(3);
+  it("shows the failure card for status 'failed', with details per recovery.debugExposure", () => {
+    const { container } = renderLifecycle(
+      { status: "failed", error: "boom", attempts: [] },
+      { recovery: { debugExposure: "hidden" } },
+    );
+    expect(
+      container.querySelector(".cpk-a2ui-recovery-failure")?.textContent,
+    ).toContain("Couldn't generate the UI");
+    expect(container.querySelector("details")).toBeNull();
+  });
 
-    const widthMatches = bars.map((bar) => {
-      const style = bar.getAttribute("style") ?? "";
-      const match = style.match(/width:\s*([\d.]+)%/);
-      expect(style).toMatch(/cpk-a2ui-pulse/);
-      return match ? Number(match[1]) : null;
-    });
-    expect(widthMatches).toEqual([80, 60, 40]);
+  it("lets a server-stamped debugExposure win over the option", () => {
+    const { container } = renderLifecycle(
+      { status: "failed", error: "boom", debugExposure: "verbose" },
+      { recovery: { debugExposure: "hidden" } },
+    );
+    expect(container.querySelector("details")?.hasAttribute("open")).toBe(true);
+  });
 
-    const styleTag = container.querySelector("style");
-    expect(styleTag?.textContent ?? "").toContain("@keyframes cpk-a2ui-pulse");
+  it("shows the failure card instead of a custom loading component", () => {
+    const CustomLoading = defineComponent({
+      setup: () => () => h("div", { "data-testid": "custom-loading" }),
+    });
+    const { container, queryByTestId } = renderLifecycle(
+      { status: "failed" },
+      { loadingComponent: CustomLoading },
+    );
+    expect(queryByTestId("custom-loading")).toBeNull();
+    expect(container.textContent).toContain("Couldn't generate the UI");
   });
 
   it("renders custom loading component when provided", () => {