@copilotkit/vue 1.70.2 → 1.71.0

package/dist/v2/hooks/use-human-in-the-loop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-human-in-the-loop.d.ts","sourceRoot":"","sources":["../../../src/v2/hooks/use-human-in-the-loop.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAEV,iBAAiB,EAGlB,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAC1B,IAAI,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,QA4D9B"}
+{"version":3,"file":"use-human-in-the-loop.d.ts","sourceRoot":"","sources":["../../../src/v2/hooks/use-human-in-the-loop.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAEV,iBAAiB,EAGlB,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAC1B,IAAI,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,QA4F9B"}

package/dist/v2/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-CyThomMH.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-DXJDZGkW.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
 //# sourceMappingURL=index.cjs.map

package/dist/v2/index.mjs

@@ -1,6 +1,6 @@
 export * from "@copilotkit/core";
 export * from "@ag-ui/client";
-import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-WeN5iF5H.js";
+import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-Ciee03Rx.js";
 import { createLicenseContextValue as ye } from "@copilotkit/shared";
 export {
   o as A2UIActivityContentSchema,

package/dist/v2/types/human-in-the-loop.d.ts

@@ -3,6 +3,8 @@ import type { Component, VNodeChild } from "vue";
 export type VueHumanInTheLoopRenderProps<T> = {
     name: string;
     description: string;
+    toolCallId: string;
+    agentId?: string;
     args: Partial<T>;
     status: ToolCallStatus.InProgress;
     result: undefined;
@@ -10,6 +12,8 @@ export type VueHumanInTheLoopRenderProps<T> = {
 } | {
     name: string;
     description: string;
+    toolCallId: string;
+    agentId?: string;
     args: T;
     status: ToolCallStatus.Executing;
     result: undefined;
@@ -17,6 +21,8 @@ export type VueHumanInTheLoopRenderProps<T> = {
 } | {
     name: string;
     description: string;
+    toolCallId: string;
+    agentId?: string;
     args: T;
     status: ToolCallStatus.Complete;
     result: string;

package/dist/v2/types/human-in-the-loop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"human-in-the-loop.d.ts","sourceRoot":"","sources":["../../../src/v2/types/human-in-the-loop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjD,MAAM,MAAM,4BAA4B,CAAC,CAAC,IACtC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC,UAAU,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,SAAS,CAAC;CACpB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC;IACjC,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,yBAAyB,CAAC,CAAC,IACnC,CAAC,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,GACxD,SAAS,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/C,MAAM,MAAM,iBAAiB,CAC3B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACzD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG;IACrC,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CACtC,CAAC"}
+{"version":3,"file":"human-in-the-loop.d.ts","sourceRoot":"","sources":["../../../src/v2/types/human-in-the-loop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjD,MAAM,MAAM,4BAA4B,CAAC,CAAC,IACtC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC,UAAU,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,SAAS,CAAC;CACpB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC;IACjC,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,yBAAyB,CAAC,CAAC,IACnC,CAAC,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,GACxD,SAAS,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/C,MAAM,MAAM,iBAAiB,CAC3B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACzD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG;IACrC,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CACtC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/vue",
-  "version": "1.70.2",
+  "version": "1.71.0",
   "private": false,
   "description": "Vue 3 components and composables for CopilotKit",
   "keywords": [
@@ -70,10 +70,10 @@
     "streamdown-vue": "^1.0.29",
     "zod": "^3.25.75",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/core": "1.70.2",
-    "@copilotkit/shared": "1.70.2",
-    "@copilotkit/web-components": "1.70.2",
-    "@copilotkit/web-inspector": "1.70.2"
+    "@copilotkit/core": "1.71.0",
+    "@copilotkit/web-components": "1.71.0",
+    "@copilotkit/shared": "1.71.0",
+    "@copilotkit/web-inspector": "1.71.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

package/src/v2/hooks/__tests__/use-human-in-the-loop.e2e.test.ts

@@ -8,6 +8,7 @@ import { ToolCallStatus } from "@copilotkit/core";
 import CopilotChat from "../../components/chat/CopilotChat.vue";
 import CopilotChatToolCallsView from "../../components/chat/CopilotChatToolCallsView.vue";
 import { useHumanInTheLoop } from "../use-human-in-the-loop";
+import { useCopilotKit } from "../../providers/useCopilotKit";
 import {
   MockStepwiseAgent,
   MockReconnectableAgent,
@@ -843,6 +844,257 @@ describe("useHumanInTheLoop E2E - HITL Tool Rendering", () => {
       });
     });
   });
+
+  describe("HITL attribution (toolCallId + agentId)", () => {
+    it("exposes toolCallId and the registered agentId to the render props", async () => {
+      const agent = new MockStepwiseAgent();
+      let renderedToolCallId: string | undefined;
+      let renderedAgentId: string | undefined;
+
+      const AttributionRenderer = defineComponent({
+        props: {
+          toolCallId: { type: String, required: true },
+          agentId: { type: String, required: false },
+          status: { type: String as PropType<ToolCallStatus>, required: true },
+          args: {
+            type: Object as PropType<{ action?: string }>,
+            required: true,
+          },
+        },
+        setup(props) {
+          watch(
+            () => [props.toolCallId, props.agentId],
+            () => {
+              renderedToolCallId = props.toolCallId;
+              renderedAgentId = props.agentId;
+            },
+            { immediate: true },
+          );
+          return {};
+        },
+        template: `
+          <div data-testid="attr-hitl">
+            <div data-testid="attr-tool-call-id">{{ toolCallId }}</div>
+            <div data-testid="attr-agent-id">{{ agentId ?? "none" }}</div>
+            <div data-testid="attr-status">{{ status }}</div>
+            <div data-testid="attr-action">{{ args.action ?? "" }}</div>
+          </div>
+        `,
+      });
+
+      const AttributionHITLComponent = defineComponent({
+        setup() {
+          useHumanInTheLoop({
+            name: "scopedApprovalTool",
+            description: "Scoped approval",
+            agentId: "research-agent",
+            parameters: z.object({ action: z.string() }),
+            render: AttributionRenderer,
+          });
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      renderWithCopilotKit({
+        agent,
+        agentId: "research-agent",
+        children: createChatHost(AttributionHITLComponent),
+      });
+
+      await submitMessage("Need approval");
+      const messageId = testId("msg");
+      const toolCallId = testId("tc");
+      await agent.emit(runStartedEvent());
+      await agent.emit(
+        toolCallChunkEvent({
+          toolCallId,
+          toolCallName: "scopedApprovalTool",
+          parentMessageId: messageId,
+          delta: JSON.stringify({ action: "delete" }),
+        }),
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("attr-tool-call-id").textContent).toBe(
+          toolCallId,
+        );
+        expect(screen.getByTestId("attr-agent-id").textContent).toBe(
+          "research-agent",
+        );
+      });
+      expect(renderedToolCallId).toBe(toolCallId);
+      expect(renderedAgentId).toBe("research-agent");
+    });
+
+    it("leaves agentId undefined for an unscoped HITL tool", async () => {
+      const agent = new MockStepwiseAgent();
+      const UnscopedRenderer = defineComponent({
+        props: {
+          toolCallId: { type: String, required: true },
+          agentId: { type: String, required: false },
+          status: { type: String as PropType<ToolCallStatus>, required: true },
+          args: {
+            type: Object as PropType<{ action?: string }>,
+            required: true,
+          },
+        },
+        template: `
+          <div data-testid="unscoped-hitl">
+            <div data-testid="unscoped-tool-call-id">{{ toolCallId }}</div>
+            <div data-testid="unscoped-agent-id">{{ agentId ?? "none" }}</div>
+            <div data-testid="unscoped-status">{{ status }}</div>
+            <div data-testid="unscoped-action">{{ args.action ?? "" }}</div>
+          </div>
+        `,
+      });
+      const UnscopedHITLComponent = defineComponent({
+        setup() {
+          useHumanInTheLoop({
+            name: "unscopedApprovalTool",
+            description: "Unscoped approval",
+            parameters: z.object({ action: z.string() }),
+            render: UnscopedRenderer,
+          });
+          return {};
+        },
+        template: `<div />`,
+      });
+
+      renderWithCopilotKit({
+        agent,
+        children: createChatHost(UnscopedHITLComponent),
+      });
+      await submitMessage("Need approval");
+      const messageId = testId("msg");
+      const toolCallId = testId("tc");
+      await agent.emit(runStartedEvent());
+      await agent.emit(
+        toolCallChunkEvent({
+          toolCallId,
+          toolCallName: "unscopedApprovalTool",
+          parentMessageId: messageId,
+          delta: JSON.stringify({ action: "archive" }),
+        }),
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("unscoped-status").textContent).toBe(
+          ToolCallStatus.InProgress,
+        );
+        expect(screen.getByTestId("unscoped-tool-call-id").textContent).toBe(
+          toolCallId,
+        );
+        expect(screen.getByTestId("unscoped-agent-id").textContent).toBe(
+          "none",
+        );
+      });
+      await agent.emit(runFinishedEvent());
+      await agent.complete();
+      await waitFor(() => {
+        expect(screen.getByTestId("unscoped-status").textContent).toBe(
+          ToolCallStatus.Executing,
+        );
+        expect(screen.getByTestId("unscoped-tool-call-id").textContent).toBe(
+          toolCallId,
+        );
+        expect(screen.getByTestId("unscoped-agent-id").textContent).toBe(
+          "none",
+        );
+      });
+    });
+  });
+});
+
+describe("HITL Run Abort", () => {
+  it("rejects the pending HITL promise with an error tool result when the run is aborted", async () => {
+    const agent = new MockStepwiseAgent();
+    const toolExecutionEnds: Array<{ result: string; error?: string }> = [];
+    let stopRun: (() => void) | undefined;
+
+    const AbortHITLComponent = defineComponent({
+      setup() {
+        const { copilotkit } = useCopilotKit();
+        stopRun = () =>
+          copilotkit.value.stopAgent({
+            agent: copilotkit.value.getAgent("default")!,
+          });
+        copilotkit.value.subscribe({
+          onToolExecutionEnd: ({ result, error }) => {
+            toolExecutionEnds.push({ result, error });
+          },
+        });
+        useHumanInTheLoop({
+          name: "abortApprovalTool",
+          description: "Requires human approval",
+          parameters: z.object({ action: z.string() }),
+          render: defineComponent({
+            props: {
+              status: {
+                type: String as PropType<ToolCallStatus>,
+                required: true,
+              },
+              args: {
+                type: Object as PropType<{ action?: string }>,
+                required: true,
+              },
+              respond: {
+                type: Function as PropType<
+                  ((result: unknown) => Promise<void>) | undefined
+                >,
+                required: false,
+              },
+            },
+            template: `
+              <div data-testid="abort-hitl">
+                <div data-testid="abort-status">{{ status }}</div>
+                <div data-testid="abort-action">{{ args.action ?? "" }}</div>
+              </div>
+            `,
+          }),
+        });
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    renderWithCopilotKit({
+      agent,
+      children: createChatHost(AbortHITLComponent),
+    });
+    await submitMessage("Request approval");
+    const messageId = testId("msg");
+    const toolCallId = testId("tc");
+    await agent.emit(runStartedEvent());
+    await agent.emit(
+      toolCallChunkEvent({
+        toolCallId,
+        toolCallName: "abortApprovalTool",
+        parentMessageId: messageId,
+        delta: JSON.stringify({ action: "delete" }),
+      }),
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("abort-status").textContent).toBe(
+        ToolCallStatus.InProgress,
+      );
+    });
+    await agent.emit(runFinishedEvent());
+    await agent.complete();
+    await waitFor(() => {
+      expect(screen.getByTestId("abort-status").textContent).toBe(
+        ToolCallStatus.Executing,
+      );
+    });
+
+    stopRun?.();
+    await waitFor(() => {
+      expect(toolExecutionEnds.length).toBeGreaterThan(0);
+      const last = toolExecutionEnds[toolExecutionEnds.length - 1];
+      expect(last.error).toBeDefined();
+      expect(last.error).not.toBe("");
+    });
+  });
 });
 
 describe("HITL Thread Reconnection Bug", () => {

package/src/v2/hooks/__tests__/use-human-in-the-loop.test.ts

@@ -58,6 +58,7 @@ describe("useHumanInTheLoop", () => {
 
     const executingVNode = renderer!.render({
       name: "approveTool",
+      toolCallId: "tc-approve",
       args: { question: "Proceed?" },
       status: "executing",
       result: undefined,
@@ -112,6 +113,7 @@ describe("useHumanInTheLoop", () => {
     const respondA = (
       renderA!.render({
         name: "toolA",
+        toolCallId: "tc-a",
         args: {},
         status: "executing",
         result: undefined,
@@ -122,6 +124,7 @@ describe("useHumanInTheLoop", () => {
     const respondB = (
       renderB!.render({
         name: "toolB",
+        toolCallId: "tc-b",
         args: {},
         status: "executing",
         result: undefined,
@@ -163,6 +166,7 @@ describe("useHumanInTheLoop", () => {
 
     const inProgress = renderer!.render({
       name: "approveTool",
+      toolCallId: "tc-status",
       args: {},
       status: "inProgress",
       result: undefined,
@@ -171,6 +175,7 @@ describe("useHumanInTheLoop", () => {
     };
     const executing = renderer!.render({
       name: "approveTool",
+      toolCallId: "tc-status",
       args: {},
       status: "executing",
       result: undefined,
@@ -179,6 +184,7 @@ describe("useHumanInTheLoop", () => {
     };
     const complete = renderer!.render({
       name: "approveTool",
+      toolCallId: "tc-status",
       args: {},
       status: "complete",
       result: "ok",
@@ -279,4 +285,245 @@ describe("useHumanInTheLoop", () => {
     expect(getCore().getTool({ toolName: "depHitl" })).toBeDefined();
     addToolSpy.mockRestore();
   });
+
+  describe("Vue-specific HITL lifecycle semantics", () => {
+    function mountHitlTool(agentId?: string) {
+      const RenderComp = defineComponent({
+        setup() {
+          return () => h("div");
+        },
+      });
+      const Child = defineComponent({
+        setup() {
+          useHumanInTheLoop({
+            name: "lifecycleTool",
+            description: "Lifecycle description",
+            agentId,
+            parameters: z.object({ value: z.string() }),
+            render: RenderComp,
+          });
+          return () => null;
+        },
+      });
+      const mounted = mountWithProvider(() => h(Child));
+      const core = mounted.getCore();
+      return {
+        ...mounted,
+        handler: core.getTool({ toolName: "lifecycleTool", agentId })!.handler!,
+        renderer: core.renderToolCalls.find(
+          (renderTool) =>
+            renderTool.name === "lifecycleTool" &&
+            renderTool.agentId === agentId,
+        )!,
+      };
+    }
+
+    it("rejects an already-aborted signal with the exact HITL error", async () => {
+      const { handler } = mountHitlTool();
+      const controller = new AbortController();
+      controller.abort();
+
+      await expect(handler!({}, { signal: controller.signal })).rejects.toEqual(
+        new Error("Human-in-the-loop interaction aborted"),
+      );
+    });
+
+    it("rejects once on abort, clears pending refs, and installs a one-shot listener", async () => {
+      const { handler, renderer } = mountHitlTool();
+      const listeners = new Set<() => void>();
+      const signal = {
+        aborted: false,
+        addEventListener: vi.fn(
+          (_type: string, listener: () => void, options) => {
+            expect(options).toEqual({ once: true });
+            listeners.add(listener);
+          },
+        ),
+        removeEventListener: vi.fn((_type: string, listener: () => void) => {
+          listeners.delete(listener);
+        }),
+      } as unknown as AbortSignal;
+
+      const pending = handler!({}, { signal });
+      expect(listeners.size).toBe(1);
+      const onAbort = [...listeners][0];
+      onAbort();
+      onAbort();
+
+      await expect(pending).rejects.toEqual(
+        new Error("Human-in-the-loop interaction aborted"),
+      );
+      const respond = (
+        renderer.render({
+          name: "lifecycleTool",
+          toolCallId: "tc-aborted",
+          args: {},
+          status: "executing",
+          result: undefined,
+        }) as { props?: { respond?: (result: unknown) => Promise<void> } }
+      ).props?.respond;
+      await respond?.("late response");
+    });
+
+    it("removes the abort listener before respond resolves and ignores a late abort", async () => {
+      const { handler, renderer } = mountHitlTool();
+      const events: string[] = [];
+      let onAbort: (() => void) | undefined;
+      const signal = {
+        aborted: false,
+        addEventListener: vi.fn((_type: string, listener: () => void) => {
+          onAbort = listener;
+        }),
+        removeEventListener: vi.fn(() => {
+          events.push("removed");
+        }),
+      } as unknown as AbortSignal;
+
+      const pending = handler!({}, { signal }).then((result) => {
+        events.push(`resolved:${String(result)}`);
+        return result;
+      });
+      const respond = (
+        renderer.render({
+          name: "lifecycleTool",
+          toolCallId: "tc-respond",
+          args: {},
+          status: "executing",
+          result: undefined,
+        }) as { props?: { respond?: (result: unknown) => Promise<void> } }
+      ).props?.respond;
+
+      await respond!("approved");
+      onAbort?.();
+      await expect(pending).resolves.toBe("approved");
+      expect(events).toEqual(["removed", "resolved:approved"]);
+    });
+
+    it("passes toolCallId and registration agentId through every HITL status", () => {
+      const { renderer } = mountHitlTool("research-agent");
+      const shared = { name: "lifecycleTool", toolCallId: "tc-props" };
+      const inProgress = renderer.render({
+        ...shared,
+        args: { value: "partial" },
+        status: "inProgress",
+        result: undefined,
+      }) as { props?: Record<string, unknown> };
+      const executing = renderer.render({
+        ...shared,
+        args: { value: "complete-args" },
+        status: "executing",
+        result: undefined,
+      }) as { props?: Record<string, unknown> };
+      const complete = renderer.render({
+        ...shared,
+        args: { value: "complete-args" },
+        status: "complete",
+        result: "done",
+      }) as { props?: Record<string, unknown> };
+
+      for (const vnode of [inProgress, executing, complete]) {
+        expect(vnode.props?.name).toBe("lifecycleTool");
+        expect(vnode.props?.description).toBe("Lifecycle description");
+        expect(vnode.props?.toolCallId).toBe("tc-props");
+        expect(vnode.props?.agentId).toBe("research-agent");
+      }
+      expect(inProgress.props?.args).toEqual({ value: "partial" });
+      expect(inProgress.props?.result).toBeUndefined();
+      expect(executing.props?.args).toEqual({ value: "complete-args" });
+      expect(executing.props?.result).toBeUndefined();
+      expect(complete.props?.args).toEqual({ value: "complete-args" });
+      expect(complete.props?.result).toBe("done");
+      expect(inProgress.props?.respond).toBeUndefined();
+      expect(typeof executing.props?.respond).toBe("function");
+      expect(complete.props?.respond).toBeUndefined();
+    });
+
+    it("removes only the agent-scoped renderer on scope disposal", async () => {
+      const RenderComp = defineComponent({
+        setup() {
+          return () => h("div");
+        },
+      });
+      const createScopedChild = (agentId: string) =>
+        defineComponent({
+          setup() {
+            useHumanInTheLoop({
+              name: "sharedLifecycleTool",
+              agentId,
+              parameters: z.object({}),
+              render: RenderComp,
+            });
+            return () => null;
+          },
+        });
+      const ScopedA = createScopedChild("agent-a");
+      const ScopedB = createScopedChild("agent-b");
+      const Parent = defineComponent({
+        setup() {
+          const showA = ref(true);
+          return () =>
+            h("div", [
+              h("button", {
+                "data-testid": "dispose-agent-a",
+                onClick: () => (showA.value = false),
+              }),
+              showA.value ? h(ScopedA) : null,
+              h(ScopedB),
+            ]);
+        },
+      });
+
+      const { wrapper, getCore } = mountWithProvider(() => h(Parent));
+      await nextTick();
+      const renderers = () =>
+        getCore().renderToolCalls.filter(
+          (renderer) => renderer.name === "sharedLifecycleTool",
+        );
+      expect(renderers().map((renderer) => renderer.agentId)).toEqual([
+        "agent-a",
+        "agent-b",
+      ]);
+
+      await wrapper.find("[data-testid=dispose-agent-a]").trigger("click");
+      await nextTick();
+
+      expect(renderers().map((renderer) => renderer.agentId)).toEqual([
+        "agent-b",
+      ]);
+      expect(
+        getCore().getTool({
+          toolName: "sharedLifecycleTool",
+          agentId: "agent-b",
+        }),
+      ).toBeDefined();
+    });
+
+    it("leaves agentId undefined for an unscoped HITL tool", () => {
+      const { renderer } = mountHitlTool();
+      const vnode = renderer.render({
+        name: "lifecycleTool",
+        toolCallId: "tc-unscoped",
+        args: {},
+        status: "executing",
+        result: undefined,
+      }) as { props?: Record<string, unknown> };
+
+      expect(vnode.props?.agentId).toBeUndefined();
+    });
+
+    it("does not settle a pending HITL promise when its renderer unmounts", async () => {
+      const mounted = mountHitlTool();
+      const pending = mounted.handler({}, {});
+      mounted.wrapper.unmount();
+
+      const outcome = await Promise.race([
+        pending.then(
+          () => "settled",
+          () => "settled",
+        ),
+        new Promise((resolve) => setTimeout(() => resolve("pending"), 0)),
+      ]);
+      expect(outcome).toBe("pending");
+    });
+  });
 });