@copilotkit/vue 1.75.2 → 1.76.0

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/__tests__/CopilotChat.clearOnFresh.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { defineComponent, h, nextTick } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { flushPromises, mount } from "@vue/test-utils";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
@@ -14,6 +14,134 @@ import CopilotChat from "../CopilotChat.vue";
 //     configuration transitions to a fresh, non-explicit thread via
 //     startNewThread()
 describe("CopilotChat clear-on-fresh", () => {
+  it.each(["clearReplayCursor", "clearReconnectCursor"] as const)(
+    "clears state and the captured %s cursor on a fresh selection",
+    async (method) => {
+      const agent = new StateCapturingAgent();
+      const cursors = new Map<string, string>();
+      Object.defineProperty(agent, method, {
+        value: (threadId: string) => cursors.delete(threadId),
+      });
+      const threadId = ref("saved");
+      const explicit = ref(true);
+      const wrapper = mount(CopilotKitProvider, {
+        props: { agents__unsafe_dev_only: { default: agent } },
+        slots: {
+          default: () =>
+            h(
+              CopilotChatConfigurationProvider,
+              { threadId: threadId.value, hasExplicitThreadId: explicit.value },
+              { default: () => h(CopilotChat, { welcomeScreen: false }) },
+            ),
+        },
+      });
+      await flushPromises();
+      agent.setState({ saved: true });
+      agent.pendingInterrupts = [{ id: "approval-A", reason: "confirmation" }];
+      cursors.set("saved", "last-event");
+      cursors.set("other", "keep-other");
+      threadId.value = "fresh";
+      explicit.value = false;
+      await flushPromises();
+      expect(agent.state).toEqual({});
+      expect(agent.pendingInterrupts).toEqual([]);
+      expect(cursors.get("saved")).toBeUndefined();
+      expect(cursors.get("other")).toBe("keep-other");
+      wrapper.unmount();
+    },
+  );
+  it.each(["fresh", "saved", "other", "via-fresh", "swap"])(
+    "protects %s from an abandoned connect that completes later",
+    async (destination) => {
+      let releaseDetach = () => {};
+      let releaseConnect = () => {};
+      let pendingDetach: Promise<void> | undefined;
+      const oldConnect = new Promise<void>((resolve) => {
+        releaseConnect = resolve;
+      });
+      const cursors = new Map<string, string>();
+      const requests: (string | null)[] = [];
+      class ReplayAgent extends StateCapturingAgent {
+        clearReplayCursor(threadId: string) {
+          cursors.delete(threadId);
+        }
+        async detachActiveRun() {
+          await pendingDetach;
+          await super.detachActiveRun();
+        }
+        async connectAgent(
+          ...args: Parameters<StateCapturingAgent["connectAgent"]>
+        ) {
+          requests.push(cursors.get(this.threadId) ?? null);
+          const first = requests.length === 1;
+          const result = await super.connectAgent(...args);
+          if (first) await oldConnect;
+          return result;
+        }
+      }
+      const agent = new ReplayAgent();
+      let currentAgent = agent;
+      const threadId = ref("saved");
+      const explicit = ref(true);
+      const wrapper = mount(CopilotKitProvider, {
+        props: { agents__unsafe_dev_only: { default: agent } },
+        slots: {
+          default: () =>
+            h(
+              CopilotChatConfigurationProvider,
+              { threadId: threadId.value, hasExplicitThreadId: explicit.value },
+              { default: () => h(CopilotChat, { welcomeScreen: false }) },
+            ),
+        },
+      });
+      await flushPromises();
+      expect(requests).toEqual([null]);
+      pendingDetach = new Promise<void>((resolve) => {
+        releaseDetach = resolve;
+      });
+      cursors.set("saved", "old-event");
+      threadId.value = "fresh";
+      explicit.value = false;
+      await nextTick();
+      if (destination === "via-fresh") {
+        threadId.value = "fresh-again";
+        await nextTick();
+      }
+      if (destination === "swap") {
+        currentAgent = new ReplayAgent();
+        await wrapper.setProps({
+          agents__unsafe_dev_only: { default: currentAgent },
+        });
+      }
+      const target =
+        destination === "via-fresh" || destination === "swap"
+          ? "saved"
+          : destination;
+      if (target !== "fresh") {
+        threadId.value = target;
+        explicit.value = true;
+        await nextTick();
+      }
+      expect(requests).toEqual([null]);
+      cursors.set("saved", "late-event");
+      releaseDetach();
+      await flushPromises();
+      expect(requests).toEqual(target === "fresh" ? [null] : [null, null]);
+      currentAgent.setState({ current: true });
+      currentAgent.pendingInterrupts = [
+        { id: "approval-new", reason: "confirmation" },
+      ];
+      cursors.set(target, "new-event");
+      releaseConnect();
+      await flushPromises();
+      expect(currentAgent.state).toEqual({ current: true });
+      expect(currentAgent.pendingInterrupts).toEqual([
+        { id: "approval-new", reason: "confirmation" },
+      ]);
+      expect(cursors.get(target)).toBe("new-event");
+      wrapper.unmount();
+    },
+  );
   it("does not clear messages on initial mount", async () => {
     const agent = new StateCapturingAgent();
     // Spy before mount: attaching afterwards can never observe a mount-time
@@ -133,7 +261,7 @@ describe("CopilotChat clear-on-fresh", () => {
     await nextTick();
     expect(currentThreadId).toBe("elsewhere");
 
-    newAgent!.setMessages([{ id: "m1", role: "user", content: "hi" } as never]);
+    newAgent!.setMessages([{ id: "m1", role: "user", content: "hi" }]);
     expect(newAgent!.messages.length).toBe(1);
 
     // Switch back non-explicitly. Any `setMessages([])` observed here must come

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

@@ -3,6 +3,7 @@ import { computed, defineComponent, onMounted } from "vue";
 import type { PropType } from "vue";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { EventType } from "@ag-ui/client";
+import type { RunErrorEvent } from "@ag-ui/client";
 import { z } from "zod";
 import { useConfigureSuggestions } from "../../../hooks/use-configure-suggestions";
 import {
@@ -189,7 +190,11 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
         );
       });
 
-      await agent.emit({ type: EventType.RUN_ERROR } as any);
+      const errorEvent: RunErrorEvent = {
+        type: EventType.RUN_ERROR,
+        message: "Test run failed",
+      };
+      await agent.emit(errorEvent);
       await agent.complete();
 
       await waitFor(() => {

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

@@ -21,6 +21,10 @@ import CopilotChatToolCallsView from "../CopilotChatToolCallsView.vue";
 import { useFrontendTool } from "../../../hooks/use-frontend-tool";
 import type { VueFrontendTool } from "../../../types";
 import type { VueToolCallRendererRenderProps } from "../../../types/vue-tool-call-renderer";
+import {
+  runStartedEvent,
+  runFinishedEvent,
+} from "../../../__tests__/utils/test-helpers";
 
 afterEach(() => {
   cleanup();
@@ -43,7 +47,7 @@ class MockStreamingAgent extends AbstractAgent {
       const messageId = `m_${Date.now()}`;
       const toolCallId = `tc_${Date.now()}`;
 
-      observer.next({ type: EventType.RUN_STARTED } as BaseEvent);
+      observer.next(runStartedEvent(_input));
       observer.next({
         type: EventType.TEXT_MESSAGE_CHUNK,
         messageId,
@@ -68,7 +72,7 @@ class MockStreamingAgent extends AbstractAgent {
         messageId: `${messageId}_result`,
         content: JSON.stringify({ temperature: 21, unit: "celsius" }),
       } as BaseEvent);
-      observer.next({ type: EventType.RUN_FINISHED } as BaseEvent);
+      observer.next(runFinishedEvent(_input));
       observer.complete();
     });
   }
@@ -492,9 +496,7 @@ describe("Streaming in-progress without timers", () => {
     const messageId = "m_step";
     const toolCallId = "tc_step";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TEXT_MESSAGE_CHUNK,
       messageId,
@@ -543,9 +545,7 @@ describe("Streaming in-progress without timers", () => {
       expect(el.textContent).toContain("21");
     });
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
   });
 });
@@ -586,9 +586,7 @@ describe("Executing State Transitions", () => {
     const messageId = "m_exec";
     const toolCallId = "tc_exec";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -603,9 +601,7 @@ describe("Executing State Transitions", () => {
       expect(status.textContent).toMatch(/Value: test/);
     });
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
 
     await waitFor(() => {
@@ -653,9 +649,7 @@ describe("Multiple Tool Calls in Same Message", () => {
     const toolCallId2 = "tc_2";
     const toolCallId3 = "tc_3";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId: toolCallId1,
@@ -714,9 +708,7 @@ describe("Multiple Tool Calls in Same Message", () => {
       expect(screen.getByTestId("tool1-third").textContent).toContain("C");
     });
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
   });
 });
@@ -747,9 +739,7 @@ describe("Partial Args Accumulation", () => {
     const messageId = "m_partial";
     const toolCallId = "tc_partial";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -801,9 +791,7 @@ describe("Partial Args Accumulation", () => {
       expect(tool.textContent).toMatch(/Status: (complete|inProgress)/i);
     });
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
   });
 });
@@ -885,7 +873,7 @@ describe("toolCallId parity for registered renderers", () => {
     const messageId = "m_id";
     const toolCallId = "tc_id_parity";
 
-    await agent.emit({ type: EventType.RUN_STARTED } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -900,7 +888,7 @@ describe("toolCallId parity for registered renderers", () => {
       expect(el.textContent).toContain(`id:${toolCallId}`);
     });
 
-    await agent.emit({ type: EventType.RUN_FINISHED } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
 
     await waitFor(() => {
@@ -948,6 +936,8 @@ describe("toolCallId parity for registered renderers", () => {
 describe("Status Persistence After Agent Stops", () => {
   it("should remain in InProgress status after agent stops if no result", async () => {
     const agent = new MockStepwiseAgent();
+    const firstRun = { threadId: agent.threadId, runId: "first-run" };
+    const secondRun = { threadId: agent.threadId, runId: "second-run" };
     renderChatHarness({
       agent,
       frontendTools: [
@@ -967,9 +957,7 @@ describe("Status Persistence After Agent Stops", () => {
     const messageId = "msg_status";
     const toolCallId = "tc_status";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent(firstRun));
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -983,9 +971,7 @@ describe("Status Persistence After Agent Stops", () => {
       expect(statusElement.textContent).toBe("inProgress");
     });
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent(firstRun));
 
     await waitFor(() => {
       const statusElement = screen.getByTestId("status");
@@ -996,9 +982,7 @@ describe("Status Persistence After Agent Stops", () => {
     expect(statusElement.textContent).toBe("inProgress");
     expect(statusElement.textContent).not.toBe("complete");
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent(secondRun));
     await agent.emit({
       type: EventType.TOOL_CALL_RESULT,
       toolCallId,
@@ -1011,9 +995,7 @@ describe("Status Persistence After Agent Stops", () => {
       expect(statusEl.textContent).toBe("complete");
     });
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent(secondRun));
     await agent.complete();
   });
 });

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

@@ -17,6 +17,10 @@ import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
 import CopilotChat from "../CopilotChat.vue";
 import type { VueFrontendTool } from "../../../types";
+import {
+  runStartedEvent,
+  runFinishedEvent,
+} from "../../../__tests__/utils/test-helpers";
 
 afterEach(() => {
   cleanup();
@@ -183,9 +187,7 @@ describe("Tool Call Re-render Prevention", () => {
     const messageId = "m_rerender_test";
     const toolCallId = "tc_rerender_test";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -252,9 +254,7 @@ describe("Tool Call Re-render Prevention", () => {
     expect(screen.getByTestId("location").textContent).toBe("Paris");
     expect(screen.getByTestId("result").textContent).toContain("temperature");
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
   });
 
@@ -302,9 +302,7 @@ describe("Tool Call Re-render Prevention", () => {
     const messageId = "m_search";
     const toolCallId = "tc_search";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -334,9 +332,7 @@ describe("Tool Call Re-render Prevention", () => {
     const renderCountAfterText = toolRenderCount;
     expect(renderCountAfterText).toBe(renderCountAfterToolCall);
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
   });
 
@@ -384,9 +380,7 @@ describe("Tool Call Re-render Prevention", () => {
     const messageId = "m_search_update";
     const toolCallId = "tc_search_update";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -422,9 +416,7 @@ describe("Tool Call Re-render Prevention", () => {
     expect(capturedArgs).toContain("Rea");
     expect(capturedArgs).toContain("React hooks");
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
   });
 
@@ -471,9 +463,7 @@ describe("Tool Call Re-render Prevention", () => {
     const messageId = "m_data";
     const toolCallId = "tc_data";
 
-    await agent.emit({
-      type: EventType.RUN_STARTED,
-    } as BaseEvent);
+    await agent.emit(runStartedEvent());
     await agent.emit({
       type: EventType.TOOL_CALL_CHUNK,
       toolCallId,
@@ -508,9 +498,7 @@ describe("Tool Call Re-render Prevention", () => {
     expect(capturedStatuses).toContain(ToolCallStatus.InProgress);
     expect(capturedStatuses).toContain(ToolCallStatus.Complete);
 
-    await agent.emit({
-      type: EventType.RUN_FINISHED,
-    } as BaseEvent);
+    await agent.emit(runFinishedEvent());
     await agent.complete();
   });
 });

package/src/v2/components/chat/copilotChatToolCallItemRender.ts

@@ -1,4 +1,5 @@
 import type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
+import { contentToText } from "@ag-ui/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { ToolCallStatus } from "@copilotkit/core";
 import { partialJSONParse } from "@copilotkit/shared";
@@ -53,7 +54,7 @@ export function getToolCallRenderProps(
       name: toolCall.function.name,
       args: parsedArgs,
       status: ToolCallStatus.Complete,
-      result: toolMessage.content,
+      result: contentToText(toolMessage.content),
       toolCall,
       toolMessage,
     };
@@ -84,7 +85,7 @@ export function getCoreRenderProps(
       toolCallId: toolCall.id,
       args: parsedArgs,
       status: ToolCallStatus.Complete,
-      result: toolMessage.content,
+      result: contentToText(toolMessage.content),
     };
   }