@copilotkit/vue 1.75.2 → 1.77.0

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

@@ -48,6 +48,32 @@ async function flushAsync() {
   await nextTick();
 }
 
+/**
+ * Wait for the sandbox iframe to be configured by the shared session. The host
+ * mounts the iframe synchronously, but the bridge package is loaded through a
+ * dynamic import and the resource is fetched through the agent, so `srcdoc` (and
+ * the sandbox contract attributes) land a few macrotasks later.
+ */
+async function waitForSandboxIframe(wrapper: {
+  find: (selector: string) => { exists: () => boolean; element: Element };
+}): Promise<HTMLIFrameElement> {
+  let iframe: HTMLIFrameElement | undefined;
+  await vi.waitFor(
+    () => {
+      const found = wrapper.find("iframe");
+      expect(found.exists()).toBe(true);
+      const element = found.element as HTMLIFrameElement;
+      expect(element.srcdoc).toBeTruthy();
+      iframe = element;
+    },
+    // The bridge arrives through a dynamic import, so this waits on real module
+    // loading rather than a microtask. `vi.waitFor`'s 1s default is enough in
+    // isolation but not when the whole monorepo's suites run in parallel.
+    { timeout: 10_000, interval: 50 },
+  );
+  return iframe!;
+}
+
 describe("MCPAppsActivityRenderer", () => {
   it("exports the expected activity type and schema", () => {
     expect(MCPAppsActivityType).toBe("mcp-apps");
@@ -80,8 +106,8 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-1",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent: undefined,
@@ -123,8 +149,8 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-no-border",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
@@ -174,18 +200,15 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-csp",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
       },
     });
 
-    await flushAsync();
-    await flushAsync();
-
-    const iframe = wrapper.find("iframe").element as HTMLIFrameElement;
+    const iframe = await waitForSandboxIframe(wrapper);
     expect(iframe.srcdoc).toContain("script-src");
     expect(iframe.srcdoc).toContain("frame-src");
     expect(iframe.srcdoc).toContain("https://widgets.example.com");
@@ -214,18 +237,15 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-default-csp",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
       },
     });
 
-    await flushAsync();
-    await flushAsync();
-
-    const iframe = wrapper.find("iframe").element as HTMLIFrameElement;
+    const iframe = await waitForSandboxIframe(wrapper);
     expect(iframe.srcdoc).toContain(
       "script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*;",
     );
@@ -260,16 +280,15 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-testid",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
       },
     });
 
-    await flushAsync();
-    await flushAsync();
+    await waitForSandboxIframe(wrapper);
 
     const iframe = wrapper.find('iframe[data-testid="mcp-app-iframe"]');
     expect(iframe.exists()).toBe(true);

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

@@ -0,0 +1,122 @@
+/**
+ * A content rejection is RECOVERABLE: the session reports it through
+ * `onContentError` and, once valid content resumes, calls it again with `null`.
+ * The adapter must clear the message then - otherwise the widget starts working
+ * again while the host still shows a stale error until the next bind.
+ */
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import type { AbstractAgent } from "@ag-ui/client";
+
+// Capture the hooks the adapter hands to the session, so the test can drive the
+// recoverable/fatal channels directly.
+const { bindMcpAppSpy, sessionSpy } = vi.hoisted(() => {
+  const session = {
+    sendToolInput: vi.fn(),
+    sendToolResult: vi.fn(),
+    syncContent: vi.fn(),
+    teardown: vi.fn(),
+  };
+  return { bindMcpAppSpy: vi.fn(() => session), sessionSpy: session };
+});
+
+vi.mock("@copilotkit/mcp-apps-renderer", () => ({
+  bindMcpApp: bindMcpAppSpy,
+}));
+
+vi.mock("../../providers/useCopilotKit", () => ({
+  useCopilotKit: () => ({
+    copilotkit: { value: { runAgent: vi.fn() } },
+  }),
+}));
+
+import {
+  MCPAppsActivityRenderer,
+  MCPAppsActivityType,
+} from "../MCPAppsActivityRenderer";
+
+function createAgentMock(): AbstractAgent {
+  return {
+    threadId: "content-error-thread",
+    isRunning: false,
+    messages: [],
+    runAgent: vi.fn().mockResolvedValue({ result: { contents: [] } }),
+    addMessage: vi.fn(),
+    subscribe: vi.fn(() => ({ unsubscribe: vi.fn() })),
+  } as unknown as AbstractAgent;
+}
+
+function mountRenderer() {
+  return mount(MCPAppsActivityRenderer, {
+    props: {
+      activityType: MCPAppsActivityType,
+      content: {
+        resourceUri: "ui://server/app",
+        serverHash: "hash",
+        result: { content: [] },
+      },
+      message: {
+        id: "activity-1",
+        role: "activity",
+        content: {},
+        activityType: MCPAppsActivityType,
+      },
+      agent: createAgentMock(),
+    },
+  });
+}
+
+/** The hooks object passed to the most recent bindMcpApp call. */
+async function capturedHooks() {
+  await vi.waitFor(() => expect(bindMcpAppSpy).toHaveBeenCalled());
+  const options = bindMcpAppSpy.mock.calls.at(-1)![0] as {
+    hooks?: {
+      onContentError?: (err: Error | null) => void;
+      onError?: (err: Error) => void;
+    };
+  };
+  return options.hooks!;
+}
+
+describe("MCPAppsActivityRenderer content error recovery", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows a rejected-content error and clears it when valid content resumes", async () => {
+    const wrapper = mountRenderer();
+    const hooks = await capturedHooks();
+
+    // valid -> nothing shown
+    expect(wrapper.text()).not.toContain("Error:");
+
+    // invalid -> the rejection is visible
+    hooks.onContentError!(new Error("content does not match the schema"));
+    await nextTick();
+    expect(wrapper.text()).toContain("content does not match the schema");
+
+    // valid again -> the message disappears
+    hooks.onContentError!(null);
+    await nextTick();
+    expect(wrapper.text()).not.toContain("content does not match the schema");
+    expect(wrapper.text()).not.toContain("Error:");
+  });
+
+  it("keeps a fatal session error on screen", async () => {
+    const wrapper = mountRenderer();
+    const hooks = await capturedHooks();
+
+    hooks.onError!(new Error("No resource content in response"));
+    await nextTick();
+    expect(wrapper.text()).toContain("No resource content in response");
+
+    // Clearing the recoverable channel must not clear a fatal error.
+    hooks.onContentError!(null);
+    await nextTick();
+    expect(wrapper.text()).toContain("No resource content in response");
+  });
+});
+
+// Referenced so the session stub is not tree-shaken out of the mock factory.
+void sessionSpy;

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

@@ -0,0 +1,109 @@
+/**
+ * Vue counterpart of react-core's `MCPAppsActivityRendererSeed.test.tsx`.
+ *
+ * The session is self-driving: given a `messageId`, it subscribes to the agent's
+ * message store and pushes tool input/result to the widget itself. That store is
+ * authoritative only for activities that live in it - a host can render an
+ * activity from an EXTERNAL messages list (absent from `agent.messages`), whose
+ * props may never change after mount. For those, the adapter must seed the
+ * widget by calling `session.syncContent(props.content)` immediately after
+ * binding, otherwise the widget would never receive its initial content.
+ */
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import type { AbstractAgent } from "@ag-ui/client";
+
+// Capture the bindMcpApp options and the returned session's calls. Hoisted so
+// the vi.mock factory (which is itself hoisted above imports) can reference them.
+const { bindMcpAppSpy, sessionSpy } = vi.hoisted(() => {
+  const session = {
+    sendToolInput: vi.fn(),
+    sendToolResult: vi.fn(),
+    syncContent: vi.fn(),
+    teardown: vi.fn(),
+  };
+  const bind = vi.fn(() => session);
+  return { bindMcpAppSpy: bind, sessionSpy: session };
+});
+
+// Only the bridge-carrying root entry is mocked; the bridge-free `/activity`
+// entry (activity type + content schema) stays real, as in the React test.
+vi.mock("@copilotkit/mcp-apps-renderer", () => ({
+  bindMcpApp: bindMcpAppSpy,
+}));
+
+vi.mock("../../providers/useCopilotKit", () => ({
+  useCopilotKit: () => ({
+    copilotkit: { value: { runAgent: vi.fn() } },
+  }),
+}));
+
+import {
+  MCPAppsActivityRenderer,
+  MCPAppsActivityType,
+} from "../MCPAppsActivityRenderer";
+import type { MCPAppsActivityContent } from "../MCPAppsActivityRenderer";
+
+function createAgentMock(): AbstractAgent {
+  return {
+    threadId: "seed-thread",
+    isRunning: false,
+    // The activity under test is NOT in the store: this is the external
+    // messages-list case the seed exists for.
+    messages: [],
+    runAgent: vi.fn().mockResolvedValue({ result: { contents: [] } }),
+    addMessage: vi.fn(),
+    subscribe: vi.fn(() => ({ unsubscribe: vi.fn() })),
+  } as unknown as AbstractAgent;
+}
+
+const content: MCPAppsActivityContent = {
+  resourceUri: "ui://server/external",
+  serverHash: "hash-external",
+  toolInput: { city: "Paris" },
+  result: { content: [{ type: "text", text: "Forecast" }], isError: false },
+} as MCPAppsActivityContent;
+
+function mountRenderer() {
+  return mount(MCPAppsActivityRenderer, {
+    props: {
+      activityType: MCPAppsActivityType,
+      content,
+      message: {
+        id: "external-activity-1",
+        role: "activity",
+        content: {},
+        activityType: MCPAppsActivityType,
+      },
+      agent: createAgentMock(),
+    },
+  });
+}
+
+describe("MCPAppsActivityRenderer external-activity seed", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("passes the activity messageId to the bridge for self-subscription", async () => {
+    mountRenderer();
+
+    await vi.waitFor(() => expect(bindMcpAppSpy).toHaveBeenCalledTimes(1));
+    const opts = bindMcpAppSpy.mock.calls[0]![0];
+    expect(opts.messageId).toBe("external-activity-1");
+  });
+
+  it("seeds the widget with the initial tool input/result right after binding, even when props never change", async () => {
+    mountRenderer();
+
+    // The content watcher does not re-run for unchanged props, so without the
+    // explicit seed the widget would never receive this initial content.
+    await vi.waitFor(() => expect(sessionSpy.syncContent).toHaveBeenCalled());
+    expect(sessionSpy.syncContent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        toolInput: { city: "Paris" },
+        resourceUri: "ui://server/external",
+      }),
+    );
+  });
+});

package/src/v2/components/chat/CopilotChat.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-  AGUIConnectNotImplementedError,
-  AbstractAgent,
-  HttpAgent,
-} from "@ag-ui/client";
+import { AGUIConnectNotImplementedError, AbstractAgent } from "@ag-ui/client";
 import {
   createAttachmentContent,
   DEFAULT_AGENT_ID,
@@ -21,7 +17,7 @@ import {
   useSlots,
   watch,
 } from "vue";
-import { CopilotKitCoreErrorCode } from "@copilotkit/core";
+import { CopilotKitCoreErrorCode, ɵisHttpAgent } from "@copilotkit/core";
 import type { Suggestion } from "@copilotkit/core";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -111,9 +107,15 @@ type ActiveConnectCycle = {
   inspectorRequestId: string | null;
   abortController: AbortController;
   detached: boolean;
+  clearDiscardedBaseline?: () => void;
 };
 
 const activeConnectCycle = shallowRef<ActiveConnectCycle | null>(null);
+let lastConnectCycle: ActiveConnectCycle | null = null;
+const detachPromises = new WeakMap<AbstractAgent, Promise<void>>();
+// Agent clones can share cursors. Finish every old reset before connecting again.
+let pendingTeardown = Promise.resolve();
+const baselineThreadIds = new WeakMap<AbstractAgent, string>();
 
 const resolvedAgentId = computed(
   () => props.agentId ?? existingConfig.value?.agentId ?? DEFAULT_AGENT_ID,
@@ -379,6 +381,7 @@ watch(
     // React does — makes the ordering unconditional instead of depending on
     // watcher scheduling. Non-explicit threads skip /connect below, but the first
     // runAgent still has to ship the thread the UI is rendering.
+    baselineThreadIds.set(currentAgent, currentAgent.threadId);
     currentAgent.threadId = threadId;
 
     // When the caller hasn't picked a specific thread, resolvedThreadId is
@@ -421,10 +424,6 @@ watch(
       cycle = existingCycle;
     } else {
       const connectAbortController = new AbortController();
-      if (currentAgent instanceof HttpAgent) {
-        currentAgent.abortController = connectAbortController;
-      }
-
       cycle = {
         core: core as object,
         agent: currentAgent,
@@ -434,11 +433,18 @@ watch(
         detached: false,
       };
       activeConnectCycle.value = cycle;
-
-      void core
-        .connectAgent({ agent: currentAgent })
+      lastConnectCycle = cycle;
+
+      void pendingTeardown
+        .then(() => {
+          if (cycle.detached) return;
+          if (ɵisHttpAgent(currentAgent))
+            currentAgent.abortController = connectAbortController;
+          return core.connectAgent({ agent: currentAgent });
+        })
         .catch((error: unknown) => {
           if (cycle.detached) {
+            cycle.clearDiscardedBaseline?.();
             return;
           }
           if (error instanceof AGUIConnectNotImplementedError) {
@@ -460,6 +466,7 @@ watch(
           // can briefly render against an incompletely-laid-out message
           // tree and visibly snap once the last text chunk lands.
           if (cycle.detached) {
+            cycle.clearDiscardedBaseline?.();
             return;
           }
           const raf =
@@ -490,7 +497,17 @@ watch(
 
       activeCycle.detached = true;
       activeCycle.abortController.abort();
-      void activeCycle.agent.detachActiveRun?.();
+      const detach = activeCycle.agent
+        .detachActiveRun()
+        .catch((error: unknown) => {
+          console.error("CopilotChat: detachActiveRun failed", error);
+        });
+      detachPromises.set(activeCycle.agent, detach);
+      pendingTeardown = Promise.all([pendingTeardown, detach]).then(() => {});
+      void detach.then(() => {
+        if (detachPromises.get(activeCycle.agent) === detach)
+          detachPromises.delete(activeCycle.agent);
+      });
       activeConnectCycle.value = null;
     });
   },
@@ -502,17 +519,80 @@ watch(
 // replay their history via the /connect cycle above, and the very first
 // resolution (mount) or an agent-store swap that keeps the same thread id
 // must never clear — only a real fresh-thread transition does.
-const lastFreshThreadId = ref<string | undefined>(undefined);
+let lastFreshSelection:
+  | { threadId: string; agent: AbstractAgent | null }
+  | undefined;
 watch(
   [resolvedThreadId, hasExplicitThreadId, () => agent.value],
-  ([threadId, isExplicit, currentAgent]) => {
-    const previous = lastFreshThreadId.value;
-    lastFreshThreadId.value = threadId;
+  ([threadId, isExplicit, currentAgent], _old, onCleanup) => {
+    const previous = lastFreshSelection;
+    const selection = { threadId, agent: currentAgent };
+    lastFreshSelection = selection;
     if (!currentAgent) return;
     if (isExplicit) return;
     if (previous === undefined) return;
-    if (threadId === previous) return;
-    currentAgent.setMessages([]);
+    if (threadId === previous.threadId) return;
+    let active = true;
+    let resetPending = true;
+    onCleanup(() => {
+      active = false;
+    });
+    const discardedThreadId =
+      previous.agent === currentAgent
+        ? previous.threadId
+        : baselineThreadIds.get(currentAgent);
+    const clearCursor = () => {
+      if (!discardedThreadId) return;
+      if (
+        "clearReplayCursor" in currentAgent &&
+        typeof currentAgent.clearReplayCursor === "function"
+      )
+        currentAgent.clearReplayCursor(discardedThreadId);
+      if (
+        "clearReconnectCursor" in currentAgent &&
+        typeof currentAgent.clearReconnectCursor === "function"
+      )
+        currentAgent.clearReconnectCursor(discardedThreadId);
+    };
+    const clearDiscardedBaseline = () => {
+      if (
+        !active ||
+        !resetPending ||
+        isUnmounting.value ||
+        lastFreshSelection !== selection ||
+        agent.value !== currentAgent
+      )
+        return;
+      currentAgent.setMessages([]);
+      currentAgent.setState({});
+      currentAgent.pendingInterrupts = [];
+      clearCursor();
+    };
+    if (
+      lastConnectCycle?.agent === currentAgent &&
+      lastConnectCycle.threadId === discardedThreadId
+    )
+      lastConnectCycle.clearDiscardedBaseline = clearDiscardedBaseline;
+    const detach =
+      detachPromises.get(currentAgent) ?? currentAgent.detachActiveRun();
+    detachPromises.set(currentAgent, detach);
+    const finishReset = () => {
+      if (!resetPending) return;
+      // The cursor belongs to the discarded view, even after a fast reopen.
+      clearCursor();
+      clearDiscardedBaseline();
+      resetPending = false;
+    };
+    clearDiscardedBaseline();
+    pendingTeardown = Promise.all([pendingTeardown, detach])
+      .then(finishReset)
+      .catch((error: unknown) => {
+        console.error("CopilotChat: detachActiveRun failed", error);
+      })
+      .finally(() => {
+        if (detachPromises.get(currentAgent) === detach)
+          detachPromises.delete(currentAgent);
+      });
   },
   { immediate: true },
 );

package/src/v2/components/chat/CopilotPopupViewInternal.vue

@@ -352,7 +352,7 @@ onBeforeUnmount(() => {
   <div
     v-if="isRendered"
     data-copilotkit
-    class="cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"
+    class="cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:bg-transparent cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"
   >
     <div
       ref="containerRef"