@copilotkit/react-core 1.61.1 → 1.62.0

package/dist/index.umd.js

@@ -144,6 +144,25 @@ react_markdown = __toESM(react_markdown);
 		modalHeaderTitle: "CopilotKit Chat",
 		welcomeMessageText: "How can I help you today?"
 	};
+	/**
+	* Mobile breakpoint below which the chat modal and the thread-list drawer are
+	* mutually exclusive. At or above this width both surfaces may coexist. This
+	* mirrors the `(max-width: 767px)` / `(min-width: 768px)` split already used by
+	* CopilotChatInput and CopilotSidebarView.
+	*/
+	const MOBILE_MAX_WIDTH_PX = 767;
+	/**
+	* Reports whether the current viewport is in the mobile range (`<768px`), where
+	* the chat modal and drawer must not be open simultaneously. SSR-safe and
+	* defensive against environments without `matchMedia` (treated as desktop, so
+	* no mutual-exclusion constraint is applied).
+	*
+	* @returns `true` when the viewport is mobile-width, `false` otherwise.
+	*/
+	function isMobileViewport() {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+		return window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH_PX}px)`).matches;
+	}
 	const CopilotChatConfiguration = (0, react.createContext)(null);
 	const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, hasExplicitThreadId, isModalDefaultOpen }) => {
 		const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
@@ -154,12 +173,22 @@ react_markdown = __toESM(react_markdown);
 			...stableLabels
 		}), [stableLabels, parentConfig?.labels]);
 		const resolvedAgentId = agentId ?? parentConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+		const threadIdPropIsAuthoritative = threadId !== void 0 && hasExplicitThreadId !== false;
+		const isThreadIdControlled = threadIdPropIsAuthoritative;
+		const [activeThreadOverride, setActiveThreadOverride] = (0, react.useState)(null);
 		const resolvedThreadId = (0, react.useMemo)(() => {
-			if (threadId) return threadId;
+			if (threadIdPropIsAuthoritative) return threadId;
+			if (activeThreadOverride) return activeThreadOverride.threadId;
 			if (parentConfig?.threadId) return parentConfig.threadId;
+			if (threadId) return threadId;
 			return (0, _copilotkit_shared.randomUUID)();
-		}, [threadId, parentConfig?.threadId]);
-		const resolvedHasExplicitThreadId = (hasExplicitThreadId !== void 0 ? hasExplicitThreadId : !!threadId) || !!parentConfig?.hasExplicitThreadId;
+		}, [
+			threadIdPropIsAuthoritative,
+			threadId,
+			parentConfig?.threadId,
+			activeThreadOverride
+		]);
+		const resolvedHasExplicitThreadId = (threadIdPropIsAuthoritative ? true : activeThreadOverride?.explicit ?? hasExplicitThreadId ?? false) || !!parentConfig?.hasExplicitThreadId;
 		const [internalModalOpen, setInternalModalOpen] = (0, react.useState)(isModalDefaultOpen ?? true);
 		const hasExplicitDefault = isModalDefaultOpen !== void 0;
 		const setAndSync = (0, react.useCallback)((open) => {
@@ -178,20 +207,113 @@ react_markdown = __toESM(react_markdown);
 		}, [parentConfig?.isModalOpen, hasExplicitDefault]);
 		const resolvedIsModalOpen = hasExplicitDefault ? internalModalOpen : parentConfig?.isModalOpen ?? internalModalOpen;
 		const resolvedSetModalOpen = hasExplicitDefault ? setAndSync : parentConfig?.setModalOpen ?? setInternalModalOpen;
+		const [ownDrawerOpen, setOwnDrawerOpen] = (0, react.useState)(false);
+		const [ownDrawerCount, setOwnDrawerCount] = (0, react.useState)(0);
+		const modalCloseRef = (0, react.useRef)(() => {});
+		modalCloseRef.current = resolvedSetModalOpen;
+		const registeredModalClosersRef = (0, react.useRef)([]);
+		const ownRegisterModalCloser = (0, react.useCallback)((closeModal) => {
+			registeredModalClosersRef.current.push(closeModal);
+			return () => {
+				registeredModalClosersRef.current = registeredModalClosersRef.current.filter((entry) => entry !== closeModal);
+			};
+		}, []);
+		const ownSetDrawerOpen = (0, react.useCallback)((open) => {
+			setOwnDrawerOpen(open);
+			if (open && isMobileViewport()) {
+				const registered = registeredModalClosersRef.current;
+				(registered.length > 0 ? registered[registered.length - 1] : modalCloseRef.current)(false);
+			}
+		}, []);
+		const ownRegisterDrawer = (0, react.useCallback)(() => {
+			setOwnDrawerCount((count) => count + 1);
+			return () => {
+				setOwnDrawerCount((count) => Math.max(0, count - 1));
+			};
+		}, []);
+		const resolvedDrawerOpen = parentConfig ? parentConfig.drawerOpen : ownDrawerOpen;
+		const resolvedSetDrawerOpen = parentConfig ? parentConfig.setDrawerOpen : ownSetDrawerOpen;
+		const resolvedDrawerRegistered = parentConfig ? parentConfig.drawerRegistered : ownDrawerCount > 0;
+		const resolvedRegisterDrawer = parentConfig ? parentConfig.registerDrawer : ownRegisterDrawer;
+		const resolvedRegisterModalCloser = parentConfig ? parentConfig.ɵregisterModalCloser : ownRegisterModalCloser;
+		(0, react.useEffect)(() => {
+			if (!hasExplicitDefault) return;
+			return resolvedRegisterModalCloser(resolvedSetModalOpen);
+		}, [
+			hasExplicitDefault,
+			resolvedRegisterModalCloser,
+			resolvedSetModalOpen
+		]);
+		const isThreadIdControlledRef = (0, react.useRef)(isThreadIdControlled);
+		isThreadIdControlledRef.current = isThreadIdControlled;
+		const ownSetActiveThreadId = (0, react.useCallback)((id, options) => {
+			setActiveThreadOverride({
+				threadId: id,
+				explicit: options?.explicit ?? true
+			});
+		}, []);
+		const ownStartNewThread = (0, react.useCallback)(() => {
+			setActiveThreadOverride({
+				threadId: (0, _copilotkit_shared.randomUUID)(),
+				explicit: false
+			});
+		}, []);
+		const parentSetActiveThreadId = parentConfig?.setActiveThreadId;
+		const parentStartNewThread = parentConfig?.startNewThread;
+		const resolvedSetActiveThreadId = (0, react.useCallback)((id, options) => {
+			if (isThreadIdControlledRef.current) {
+				console.warn("[CopilotKit] Ignoring setActiveThreadId(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+				return;
+			}
+			if (parentSetActiveThreadId) {
+				parentSetActiveThreadId(id, options);
+				return;
+			}
+			ownSetActiveThreadId(id, options);
+		}, [parentSetActiveThreadId, ownSetActiveThreadId]);
+		const resolvedStartNewThread = (0, react.useCallback)(() => {
+			if (isThreadIdControlledRef.current) {
+				console.warn("[CopilotKit] Ignoring startNewThread(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+				return;
+			}
+			if (parentStartNewThread) {
+				parentStartNewThread();
+				return;
+			}
+			ownStartNewThread();
+		}, [parentStartNewThread, ownStartNewThread]);
+		const setModalOpenWithDrawerExclusion = (0, react.useCallback)((open) => {
+			if (open && isMobileViewport()) resolvedSetDrawerOpen(false);
+			resolvedSetModalOpen(open);
+		}, [resolvedSetModalOpen, resolvedSetDrawerOpen]);
 		const configurationValue = (0, react.useMemo)(() => ({
 			labels: mergedLabels,
 			agentId: resolvedAgentId,
 			threadId: resolvedThreadId,
 			hasExplicitThreadId: resolvedHasExplicitThreadId,
 			isModalOpen: resolvedIsModalOpen,
-			setModalOpen: resolvedSetModalOpen
+			setModalOpen: setModalOpenWithDrawerExclusion,
+			drawerOpen: resolvedDrawerOpen,
+			setDrawerOpen: resolvedSetDrawerOpen,
+			drawerRegistered: resolvedDrawerRegistered,
+			registerDrawer: resolvedRegisterDrawer,
+			ɵregisterModalCloser: resolvedRegisterModalCloser,
+			setActiveThreadId: resolvedSetActiveThreadId,
+			startNewThread: resolvedStartNewThread
 		}), [
 			mergedLabels,
 			resolvedAgentId,
 			resolvedThreadId,
 			resolvedHasExplicitThreadId,
 			resolvedIsModalOpen,
-			resolvedSetModalOpen
+			setModalOpenWithDrawerExclusion,
+			resolvedDrawerOpen,
+			resolvedSetDrawerOpen,
+			resolvedDrawerRegistered,
+			resolvedRegisterDrawer,
+			resolvedRegisterModalCloser,
+			resolvedSetActiveThreadId,
+			resolvedStartNewThread
 		]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfiguration.Provider, {
 			value: configurationValue,
@@ -327,149 +449,6 @@ react_markdown = __toESM(react_markdown);
 		getLimit: () => null
 	});
 
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-	function defineToolCallRenderer(def) {
-		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
-		return {
-			name: def.name,
-			args: argsSchema,
-			render: def.render,
-			...def.agentId ? { agentId: def.agentId } : {}
-		};
-	}
-
-//#endregion
-//#region src/v2/hooks/use-default-render-tool.tsx
-/**
-	* Module-level dedup set so an unknown status value only emits a console
-	* warning the FIRST time we encounter it. Otherwise a stuck/unmapped status
-	* would log on every re-render (potentially many per second).
-	*/
-	const warnedUnknownStatuses = /* @__PURE__ */ new Set();
-	/**
-	* Map a {@link ToolCallStatus} enum value to the documented string-union
-	* status the {@link DefaultRenderProps} contract exposes. Unknown / future
-	* enum members log a warning (once per distinct value) and fall back to
-	* `"inProgress"`.
-	*/
-	function mapToolCallStatus(status) {
-		switch (status) {
-			case _copilotkit_core.ToolCallStatus.Complete: return "complete";
-			case _copilotkit_core.ToolCallStatus.Executing: return "executing";
-			case _copilotkit_core.ToolCallStatus.InProgress: return "inProgress";
-			default: {
-				const key = String(status);
-				if (!warnedUnknownStatuses.has(key)) {
-					warnedUnknownStatuses.add(key);
-					console.warn(`[CopilotKit] Unknown ToolCallStatus "${key}" in default tool-call renderer; falling back to "inProgress".`);
-				}
-				return "inProgress";
-			}
-		}
-	}
-	/**
-	* Guarded JSON.stringify used inside the expanded `<pre>` blocks. A circular
-	* reference would otherwise crash the entire React tree on render.
-	*/
-	function safeStringifyForPre(value) {
-		try {
-			return JSON.stringify(value, null, 2);
-		} catch (err) {
-			console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for default renderer; falling back to String():", err);
-			try {
-				return String(value);
-			} catch (innerErr) {
-				console.warn("[CopilotKit] safeStringifyForPre: value could not be stringified:", innerErr);
-				return "[unserializable]";
-			}
-		}
-	}
-	function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result }) {
-		const [isExpanded, setIsExpanded] = (0, react.useState)(false);
-		const isActive = status === "inProgress" || status === "executing";
-		const isComplete = status === "complete";
-		const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
-		const dotClassName = isActive ? "cpk:bg-amber-500" : isComplete ? "cpk:bg-emerald-500" : "cpk:bg-zinc-400";
-		const badgeClassName = isActive ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : isComplete ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": "copilot-tool-render",
-			"data-tool-name": name,
-			"data-tool-call-id": toolCallId,
-			"data-status": status,
-			"data-args": safeStringifyForAttr(parameters),
-			"data-result": safeStringifyForAttr(result),
-			className: "cpk:mt-2 cpk:pb-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:bg-white/70 cpk:p-4 cpk:shadow-sm cpk:backdrop-blur cpk:dark:border-zinc-800/60 cpk:dark:bg-zinc-900/50",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					"aria-expanded": isExpanded,
-					onClick: () => setIsExpanded(!isExpanded),
-					className: "cpk:flex cpk:w-full cpk:cursor-pointer cpk:select-none cpk:items-center cpk:justify-between cpk:gap-2.5 cpk:border-none cpk:bg-transparent cpk:p-0 cpk:m-0 cpk:text-left cpk:text-inherit",
-					style: { font: "inherit" },
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-								className: `cpk:h-3.5 cpk:w-3.5 cpk:flex-shrink-0 cpk:text-zinc-500 cpk:transition-transform cpk:dark:text-zinc-400 ${isExpanded ? "cpk:rotate-90" : ""}`,
-								fill: "none",
-								viewBox: "0 0 24 24",
-								strokeWidth: 2,
-								stroke: "currentColor",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									d: "M8.25 4.5l7.5 7.5-7.5 7.5"
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"data-testid": "copilot-tool-render-name",
-								className: "cpk:truncate cpk:text-[13px] cpk:font-semibold cpk:text-zinc-900 cpk:dark:text-zinc-100",
-								children: name
-							})
-						]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						"data-testid": "copilot-tool-render-status",
-						className: `cpk:inline-flex cpk:flex-shrink-0 cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-0.5 cpk:text-[11px] cpk:font-medium ${badgeClassName}`,
-						children: statusLabel
-					})]
-				}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cpk:mt-3 cpk:grid cpk:gap-3",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
-						children: "Arguments"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
-						children: safeStringifyForPre(parameters ?? {})
-					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
-						children: "Result"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
-						children: typeof result === "string" ? result : safeStringifyForPre(result)
-					})] })]
-				})]
-			})
-		});
-	}
-	function safeStringifyForAttr(value) {
-		if (value === void 0 || value === null) return "";
-		if (typeof value === "string") return value;
-		try {
-			return JSON.stringify(value);
-		} catch (err) {
-			console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for data-* attribute; falling back to String():", err);
-			try {
-				return String(value);
-			} catch (innerErr) {
-				console.warn("[CopilotKit] safeStringifyForAttr: value could not be stringified:", innerErr);
-				return "";
-			}
-		}
-	}
-
 //#endregion
 //#region src/v2/hooks/use-render-tool-call.tsx
 /**
@@ -524,10 +503,13 @@ react_markdown = __toESM(react_markdown);
 		}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
 		return (0, react.useCallback)(({ toolCall, toolMessage }) => {
 			const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
+			const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+			if (!renderConfig) return null;
+			const RenderComponent = renderConfig.render;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRenderer, {
 				toolCall,
 				toolMessage,
-				RenderComponent: (exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*"))?.render ?? defaultToolCallRenderAdapter,
+				RenderComponent,
 				isExecuting: executingToolCallIds.has(toolCall.id)
 			}, toolCall.id);
 		}, [
@@ -536,15 +518,6 @@ react_markdown = __toESM(react_markdown);
 			agentId
 		]);
 	}
-	function defaultToolCallRenderAdapter(props) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, {
-			name: props.name,
-			toolCallId: props.toolCallId,
-			parameters: props.args,
-			status: mapToolCallStatus(props.status),
-			result: props.result
-		});
-	}
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -1997,7 +1970,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		...A2UILifecycleFields
 	}).passthrough();
 	function createA2UIMessageRenderer(options) {
-		const { theme, catalog, loadingComponent, recovery } = options;
+		const { theme, catalog, loadingComponent, recovery, onAction } = options;
 		const showAfterMs = recovery?.showAfterMs ?? 2e3;
 		const showAfterAttempts = recovery?.showAfterAttempts ?? 2;
 		const optionDebugExposure = recovery?.debugExposure ?? "collapsed";
@@ -2073,6 +2046,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						agent,
 						copilotkit,
 						catalog,
+						onAction,
 						onReady: markSurfaceReady
 					}, surfaceId))
 				});
@@ -2093,29 +2067,60 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		};
 	}
 	/**
+	* Orchestrates a single A2UI user action: runs the optional `onAction`
+	* interceptor first, then forwards to the agent unless the interceptor
+	* suppressed it (returned `null`). Exported for unit testing; the wiring lives
+	* in {@link ReactSurfaceHost}.
+	*/
+	async function runA2UIAction({ message, agent, copilotkit, onAction }) {
+		if (!agent) return;
+		const action = message.userAction;
+		const forward = async (forwardAction) => {
+			const a2uiAction = forwardAction !== void 0 ? {
+				...message,
+				userAction: forwardAction
+			} : message;
+			try {
+				copilotkit.setProperties({
+					...copilotkit.properties,
+					a2uiAction
+				});
+				await copilotkit.runAgent({ agent });
+			} finally {
+				if (copilotkit.properties) {
+					const { a2uiAction: _omit, ...rest } = copilotkit.properties;
+					copilotkit.setProperties(rest);
+				}
+			}
+		};
+		if (onAction && action) {
+			const result = await onAction(action, forward);
+			if (result === null) return;
+			if (result) {
+				await forward(result);
+				return;
+			}
+		}
+		await forward();
+	}
+	/**
 	* Renders a single A2UI surface using the React renderer.
 	* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
 	*/
-	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog, onReady }) {
+	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog, onAction, onReady }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
-				onAction: (0, react.useCallback)(async (message) => {
-					if (!agent) return;
-					message.userAction;
-					try {
-						copilotkit.setProperties({
-							...copilotkit.properties,
-							a2uiAction: message
-						});
-						await copilotkit.runAgent({ agent });
-					} finally {
-						if (copilotkit.properties) {
-							const { a2uiAction, ...rest } = copilotkit.properties;
-							copilotkit.setProperties(rest);
-						}
-					}
-				}, [agent, copilotkit]),
+				onAction: (0, react.useCallback)((message) => runA2UIAction({
+					message,
+					agent,
+					copilotkit,
+					onAction
+				}), [
+					agent,
+					copilotkit,
+					onAction
+				]),
 				theme,
 				catalog,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SurfaceMessageProcessor, {
@@ -2186,6 +2191,18 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
 	}
 
+//#endregion
+//#region src/v2/types/defineToolCallRenderer.ts
+	function defineToolCallRenderer(def) {
+		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
+		return {
+			name: def.name,
+			args: argsSchema,
+			render: def.render,
+			...def.agentId ? { agentId: def.agentId } : {}
+		};
+	}
+
 //#endregion
 //#region src/v2/a2ui/A2UIToolCallRenderer.tsx
 /**
@@ -2280,6 +2297,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/v2/providers/CopilotKitProvider.tsx
+	const zodToJsonSchemaAdapter = (schema, options) => {
+		const refStrategy = options?.$refStrategy;
+		return (0, zod_to_json_schema.zodToJsonSchema)(schema, refStrategy === "root" || refStrategy === "relative" || refStrategy === "none" || refStrategy === "seen" ? { $refStrategy: refStrategy } : {});
+	};
 	const HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
 	const COPILOT_CLOUD_CHAT_URL$1 = "https://api.cloud.copilotkit.ai/copilotkit/v1";
 	const EMPTY_HEADERS = Object.freeze({});
@@ -2310,6 +2331,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = (0, react.useState)(false);
 		const [runtimeOpenGenUIEnabled, setRuntimeOpenGenUIEnabled] = (0, react.useState)(false);
 		const openGenUIActive = runtimeOpenGenUIEnabled || !!openGenerativeUI;
+		const a2uiCatalogProvided = !!a2ui?.catalog;
+		const a2uiActive = runtimeA2UIEnabled || a2uiCatalogProvided;
 		const [runtimeLicenseStatus, setRuntimeLicenseStatus] = (0, react.useState)(void 0);
 		(0, react.useEffect)(() => {
 			if (typeof window === "undefined") return;
@@ -2340,7 +2363,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				content: OpenGenerativeUIContentSchema,
 				render: OpenGenerativeUIActivityRenderer
 			});
-			if (runtimeA2UIEnabled) renderers.unshift(createA2UIMessageRenderer({
+			if (a2uiActive) renderers.unshift(createA2UIMessageRenderer({
 				theme: a2ui?.theme ?? _copilotkit_a2ui_renderer.viewerTheme,
 				catalog: a2ui?.catalog,
 				loadingComponent: a2ui?.loadingComponent,
@@ -2348,7 +2371,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			}));
 			return renderers;
 		}, [
-			runtimeA2UIEnabled,
+			a2uiActive,
 			openGenUIActive,
 			a2ui
 		]);
@@ -2535,7 +2558,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit.setRuntimeTransport(useSingleEndpoint === true ? "single" : useSingleEndpoint === false ? "rest" : "auto");
 			copilotkit.setHeaders(mergedHeaders);
 			copilotkit.setCredentials(credentials);
-			copilotkit.setProperties(properties);
+			copilotkit.setProperties(a2uiCatalogProvided ? {
+				...properties,
+				a2uiCatalogAvailable: true
+			} : properties);
 			copilotkit.setAgents__unsafe_dev_only(mergedAgents);
 			copilotkit.setDebug(debug);
 		}, [
@@ -2544,6 +2570,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			mergedHeaders,
 			credentials,
 			properties,
+			a2uiCatalogProvided,
 			mergedAgents,
 			useSingleEndpoint,
 			debug
@@ -2591,7 +2618,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return JSON.stringify(sandboxFunctionsList.map((fn) => ({
 				name: fn.name,
 				description: fn.description,
-				parameters: (0, _copilotkit_shared.schemaToJsonSchema)(fn.parameters, { zodToJsonSchema: zod_to_json_schema.zodToJsonSchema })
+				parameters: (0, _copilotkit_shared.schemaToJsonSchema)(fn.parameters, { zodToJsonSchema: zodToJsonSchemaAdapter })
 			})));
 		}, [sandboxFunctionsList]);
 		(0, react.useLayoutEffect)(() => {
@@ -2612,7 +2639,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit,
 			executingToolCallIds
 		}), [copilotkit, executingToolCallIds]);
-		const licenseContextValue = (0, react.useMemo)(() => (0, _copilotkit_shared.createLicenseContextValue)(null), []);
+		const licenseContextValue = (0, react.useMemo)(() => (0, _copilotkit_shared.createLicenseContextValue)(runtimeLicenseStatus), [runtimeLicenseStatus]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SandboxFunctionsContext.Provider, {
 			value: sandboxFunctionsList,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitContext.Provider, {
@@ -2620,8 +2647,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LicenseContext.Provider, {
 					value: licenseContextValue,
 					children: [
-						runtimeA2UIEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
-						runtimeA2UIEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
+						a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
+						a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
 							catalog: a2ui?.catalog,
 							includeSchema: a2ui?.includeSchema
 						}),
@@ -2838,7 +2865,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			if (isRuntimeConfigured && (status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
 				const cached = provisionalAgentCache.current.get(agentId);
 				if (cached) {
-					cached.headers = { ...copilotkit.headers };
+					copilotkit.applyHeadersToAgent(cached);
 					return cached;
 				}
 				const provisional = new _copilotkit_core.ProxiedCopilotRuntimeAgent({
@@ -2847,14 +2874,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					transport: copilotkit.runtimeTransport,
 					runtimeMode: "pending"
 				});
-				provisional.headers = { ...copilotkit.headers };
+				copilotkit.applyHeadersToAgent(provisional);
 				provisionalAgentCache.current.set(agentId, provisional);
 				return provisional;
 			}
 			if (isRuntimeConfigured && status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Error) {
 				const cached = provisionalAgentCache.current.get(agentId);
 				if (cached) {
-					cached.headers = { ...copilotkit.headers };
+					copilotkit.applyHeadersToAgent(cached);
 					return cached;
 				}
 				const provisional = new _copilotkit_core.ProxiedCopilotRuntimeAgent({
@@ -2863,7 +2890,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					transport: copilotkit.runtimeTransport,
 					runtimeMode: "pending"
 				});
-				provisional.headers = { ...copilotkit.headers };
+				copilotkit.applyHeadersToAgent(provisional);
 				provisionalAgentCache.current.set(agentId, provisional);
 				return provisional;
 			}
@@ -2914,7 +2941,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			updateFlags
 		]);
 		(0, react.useEffect)(() => {
-			if (agent instanceof _ag_ui_client.HttpAgent) agent.headers = { ...copilotkit.headers };
+			if (agent instanceof _ag_ui_client.HttpAgent) copilotkit.applyHeadersToAgent(agent);
 		}, [agent, JSON.stringify(copilotkit.headers)]);
 		const chatConfig = useCopilotChatConfiguration();
 		const configThreadId = chatConfig?.threadId;
@@ -3148,114 +3175,165 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	function isPromiseLike(value) {
 		return (typeof value === "object" || typeof value === "function") && value !== null && typeof Reflect.get(value, "then") === "function";
 	}
+	/** Derive the legacy-compatible `event` for any pending interrupt. */
+	function toLegacyEvent(pending) {
+		if (pending.kind === "legacy") return pending.event;
+		return {
+			name: INTERRUPT_EVENT_NAME,
+			value: pending.interrupts[0]
+		};
+	}
 	/**
-	* Handles agent interrupts (`on_interrupt`) with optional filtering, preprocessing, and resume behavior.
+	* Handles agent interrupts with optional filtering, preprocessing, and resume behavior.
 	*
-	* The hook listens to custom events on the active agent, stores interrupt payloads per run,
-	* and surfaces a render callback once the run finalizes. Call `resolve` from your UI to resume
-	* execution with user-provided data.
+	* Supports both the AG-UI standard interrupt flow (`RUN_FINISHED` with
+	* `outcome.type === "interrupt"`) and the legacy custom-event flow
+	* (`on_interrupt`). For standard interrupts, `render` receives `interrupt`
+	* (the primary one) and `interrupts` (the full open set); call `resolve(payload)`
+	* to resume or `cancel()` to cancel. Resuming addresses the targeted interrupt
+	* and, once every open interrupt is addressed, submits a single spec `resume`
+	* array via `copilotkit.runAgent`.
 	*
-	* - `renderInChat: true` (default): the element is published into `<CopilotChat>` and this hook returns `void`.
-	* - `renderInChat: false`: the hook returns the interrupt element so you can place it anywhere in your component tree.
-	*
-	* `event.value` is typed as `any` since the interrupt payload shape depends on your agent.
-	* Type-narrow it in your callbacks (e.g. `handler`, `enabled`, `render`) as needed.
-	*
-	* @typeParam TResult - Inferred from `handler` return type. Exposed as `result` in `render`.
-	* @param config - Interrupt configuration (renderer, optional handler/filter, and render mode).
-	* @returns When `renderInChat` is `false`, returns the interrupt element (or `null` when idle).
-	* Otherwise returns `void` and publishes the element into chat. In `render`, `result` is always
-	* either the handler's resolved return value or `null` (including when no handler is provided,
-	* when filtering skips the interrupt, or when handler execution fails).
-	*
-	* @example
-	* ```tsx
-	* import { useInterrupt } from "@copilotkit/react-core/v2";
-	*
-	* function InterruptUI() {
-	*   useInterrupt({
-	*     render: ({ event, resolve }) => (
-	*       <div>
-	*         <p>{event.value.question}</p>
-	*         <button onClick={() => resolve({ approved: true })}>Approve</button>
-	*         <button onClick={() => resolve({ approved: false })}>Reject</button>
-	*       </div>
-	*     ),
-	*   });
-	*
-	*   return null;
-	* }
-	* ```
+	* - `renderInChat: true` (default): the element is published into `<CopilotChat>`; returns `void`.
+	* - `renderInChat: false`: the hook returns the interrupt element for manual placement.
 	*
 	* @example
 	* ```tsx
-	* import { useInterrupt } from "@copilotkit/react-core/v2";
-	*
-	* function CustomPanel() {
-	*   const interruptElement = useInterrupt({
-	*     renderInChat: false,
-	*     enabled: (event) => event.value.startsWith("approval:"),
-	*     handler: async ({ event }) => ({ label: event.value.toUpperCase() }),
-	*     render: ({ event, result, resolve }) => (
-	*       <aside>
-	*         <strong>{result?.label ?? ""}</strong>
-	*         <button onClick={() => resolve({ value: event.value })}>Continue</button>
-	*       </aside>
-	*     ),
-	*   });
-	*
-	*   return <>{interruptElement}</>;
-	* }
+	* useInterrupt({
+	*   render: ({ interrupt, resolve, cancel }) => (
+	*     <div>
+	*       <p>{interrupt?.message}</p>
+	*       <button onClick={() => resolve({ approved: true })}>Approve</button>
+	*       <button onClick={() => cancel()}>Cancel</button>
+	*     </div>
+	*   ),
+	* });
 	* ```
 	*/
 	function useInterrupt(config) {
 		const { copilotkit } = useCopilotKit();
 		const { agent } = useAgent({ agentId: config.agentId });
-		const [pendingEvent, setPendingEvent] = (0, react.useState)(null);
-		const pendingEventRef = (0, react.useRef)(pendingEvent);
-		pendingEventRef.current = pendingEvent;
+		const [pending, setPending] = (0, react.useState)(null);
+		const pendingRef = (0, react.useRef)(pending);
+		pendingRef.current = pending;
 		const [handlerResult, setHandlerResult] = (0, react.useState)(null);
+		const responsesRef = (0, react.useRef)({});
 		(0, react.useEffect)(() => {
-			let localInterrupt = null;
+			let localLegacy = null;
+			let localStandard = null;
 			const subscription = agent.subscribe({
 				onCustomEvent: ({ event }) => {
-					if (event.name === INTERRUPT_EVENT_NAME) localInterrupt = {
+					if (event.name === INTERRUPT_EVENT_NAME) localLegacy = {
 						name: event.name,
 						value: event.value
 					};
 				},
+				onRunFinishedEvent: (params) => {
+					if (params.outcome === "interrupt") localStandard = params.interrupts;
+				},
 				onRunStartedEvent: () => {
-					localInterrupt = null;
-					setPendingEvent(null);
+					localLegacy = null;
+					localStandard = null;
+					responsesRef.current = {};
+					setPending(null);
 				},
 				onRunFinalized: () => {
-					if (localInterrupt) {
-						setPendingEvent(localInterrupt);
-						localInterrupt = null;
-					}
+					if (localStandard && localStandard.length > 0) setPending({
+						kind: "standard",
+						interrupts: localStandard
+					});
+					else if (localLegacy) setPending({
+						kind: "legacy",
+						event: localLegacy
+					});
+					localLegacy = null;
+					localStandard = null;
 				},
 				onRunFailed: () => {
-					localInterrupt = null;
-					setPendingEvent(null);
+					localLegacy = null;
+					localStandard = null;
+					responsesRef.current = {};
+					setPending(null);
 				}
 			});
 			return () => subscription.unsubscribe();
 		}, [agent]);
-		const resolve = (0, react.useCallback)(async (response) => {
+		const submitStandardIfComplete = (0, react.useCallback)(async (interrupts) => {
+			if (!interrupts.every((i) => responsesRef.current[i.id])) return;
+			const expired = interrupts.find((i) => (0, _ag_ui_client.isInterruptExpired)(i));
+			if (expired) {
+				console.error(`[CopilotKit] useInterrupt: interrupt ${expired.id} expired at ${expired.expiresAt}; not resuming.`);
+				responsesRef.current = {};
+				setPending(null);
+				return;
+			}
+			const resume = (0, _ag_ui_client.buildResumeArray)(interrupts, responsesRef.current);
+			for (const i of interrupts) {
+				if (!i.toolCallId) continue;
+				const response = responsesRef.current[i.id];
+				const content = response.status === "cancelled" ? { status: "cancelled" } : response.payload ?? { status: "resolved" };
+				agent.addMessage({
+					id: (0, _ag_ui_client.randomUUID)(),
+					role: "tool",
+					toolCallId: i.toolCallId,
+					content: JSON.stringify(content)
+				});
+			}
+			responsesRef.current = {};
 			try {
+				return await copilotkit.runAgent({
+					agent,
+					resume
+				});
+			} catch (err) {
+				console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
+				setPending(null);
+				throw err;
+			}
+		}, [agent, copilotkit]);
+		const resolve = (0, react.useCallback)(async (payload, interruptId) => {
+			const current = pendingRef.current;
+			if (!current) return;
+			if (current.kind === "legacy") try {
 				return await copilotkit.runAgent({
 					agent,
 					forwardedProps: { command: {
-						resume: response,
-						interruptEvent: pendingEventRef.current?.value
+						resume: payload,
+						interruptEvent: current.event.value
 					} }
 				});
 			} catch (err) {
 				console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
-				setPendingEvent(null);
+				setPending(null);
 				throw err;
 			}
-		}, [agent, copilotkit]);
+			if (current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
+			const id = interruptId ?? current.interrupts[0]?.id;
+			if (!id) return;
+			responsesRef.current[id] = {
+				status: "resolved",
+				payload
+			};
+			return submitStandardIfComplete(current.interrupts);
+		}, [
+			agent,
+			copilotkit,
+			submitStandardIfComplete
+		]);
+		const cancel = (0, react.useCallback)(async (interruptId) => {
+			const current = pendingRef.current;
+			if (!current) return;
+			if (current.kind === "legacy") {
+				console.warn("[CopilotKit] useInterrupt: cancel() is not supported for legacy on_interrupt interrupts; dismissing.");
+				setPending(null);
+				return;
+			}
+			if (current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
+			const id = interruptId ?? current.interrupts[0]?.id;
+			if (!id) return;
+			responsesRef.current[id] = { status: "cancelled" };
+			return submitStandardIfComplete(current.interrupts);
+		}, [submitStandardIfComplete]);
 		const renderRef = (0, react.useRef)(config.render);
 		renderRef.current = config.render;
 		const enabledRef = (0, react.useRef)(config.enabled);
@@ -3264,6 +3342,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		handlerRef.current = config.handler;
 		const resolveRef = (0, react.useRef)(resolve);
 		resolveRef.current = resolve;
+		const cancelRef = (0, react.useRef)(cancel);
+		cancelRef.current = cancel;
 		const isEnabled = (event) => {
 			const predicate = enabledRef.current;
 			if (!predicate) return true;
@@ -3275,11 +3355,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			}
 		};
 		(0, react.useEffect)(() => {
-			if (!pendingEvent) {
+			if (!pending) {
 				setHandlerResult(null);
 				return;
 			}
-			if (!isEnabled(pendingEvent)) {
+			const legacyEvent = toLegacyEvent(pending);
+			if (!isEnabled(legacyEvent)) {
 				setHandlerResult(null);
 				return;
 			}
@@ -3292,8 +3373,11 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			let maybePromise;
 			try {
 				maybePromise = handler({
-					event: pendingEvent,
-					resolve: resolveRef.current
+					event: legacyEvent,
+					interrupt: pending.kind === "standard" ? pending.interrupts[0] : null,
+					interrupts: pending.kind === "standard" ? pending.interrupts : [],
+					resolve: resolveRef.current,
+					cancel: cancelRef.current
 				});
 			} catch (err) {
 				console.error("[CopilotKit] useInterrupt handler threw; result will be null:", err);
@@ -3312,19 +3396,24 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return () => {
 				cancelled = true;
 			};
-		}, [pendingEvent]);
+		}, [pending]);
 		const element = (0, react.useMemo)(() => {
-			if (!pendingEvent) return null;
-			if (!isEnabled(pendingEvent)) return null;
+			if (!pending) return null;
+			const legacyEvent = toLegacyEvent(pending);
+			if (!isEnabled(legacyEvent)) return null;
 			return renderRef.current({
-				event: pendingEvent,
+				event: legacyEvent,
+				interrupt: pending.kind === "standard" ? pending.interrupts[0] : null,
+				interrupts: pending.kind === "standard" ? pending.interrupts : [],
 				result: handlerResult,
-				resolve
+				resolve,
+				cancel
 			});
 		}, [
-			pendingEvent,
+			pending,
 			handlerResult,
-			resolve
+			resolve,
+			cancel
 		]);
 		(0, react.useEffect)(() => {
 			if (config.renderInChat === false) return;
@@ -4982,6 +5071,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const showInspector = shouldShowDevConsole(props.enableInspector);
 		const publicApiKey = props.publicApiKey || props.publicLicenseKey;
 		const renderArr = (0, react.useMemo)(() => [{ render: CoAgentStateRenderBridge }], []);
+		const { onError: _onError, ...v2Props } = props;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastProvider, {
 			enabled,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotErrorBoundary, {
@@ -4990,7 +5080,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadsProvider, {
 					threadId: props.threadId,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitProvider, {
-						...props,
+						...v2Props,
 						showDevConsole: showInspector,
 						renderCustomMessages: renderArr,
 						useSingleEndpoint: props.useSingleEndpoint ?? true,