@copilotkit/react-core 1.61.1 → 1.62.0

package/dist/{copilotkit-BCJDP8qd.cjs → copilotkit-CdpDZi3i.cjs}

@@ -48,6 +48,7 @@ let zod_to_json_schema = require("zod-to-json-schema");
 let react_dom = require("react-dom");
 let _tanstack_react_virtual = require("@tanstack/react-virtual");
 let use_stick_to_bottom = require("use-stick-to-bottom");
+let _copilotkit_web_components_threads_drawer = require("@copilotkit/web-components/threads-drawer");
 let react_markdown = require("react-markdown");
 react_markdown = __toESM(react_markdown);
 
@@ -174,6 +175,25 @@ const CopilotChatDefaultLabels = {
 	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);
@@ -184,12 +204,22 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		...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) => {
@@ -208,20 +238,113 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 	}, [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,
@@ -1142,7 +1265,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		},
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4 cpk:pointer-events-auto",
+			className: "cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4 cpk:pointer-events-auto",
 			children: inputPill
 		}), shouldShowDisclaimer && BoundDisclaimer]
 	});
@@ -1451,353 +1574,75 @@ const LicenseContext = (0, react.createContext)({
 const useLicenseContext = () => (0, react.useContext)(LicenseContext);
 
 //#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-render-tool.tsx
-const EMPTY_DEPS$1 = [];
+//#region src/v2/hooks/use-render-tool-call.tsx
 /**
-* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
-*
-* Key behavior:
-* - deduplicates by `agentId:name` (latest registration wins),
-* - keeps renderer entries on cleanup so historical chat tool calls can still render,
-* - refreshes registration when `deps` change.
-*
-* @typeParam S - Schema type describing tool call parameters.
-* @param config - Renderer config for wildcard or named tools.
-* @param deps - Optional dependencies to refresh registration.
-*
-* @example
-* ```tsx
-* useRenderTool(
-*   {
-*     name: "searchDocs",
-*     parameters: z.object({ query: z.string() }),
-*     render: ({ status, parameters, result }) => {
-*       if (status === "executing") return <div>Searching {parameters.query}</div>;
-*       if (status === "complete") return <div>{result}</div>;
-*       return <div>Preparing...</div>;
-*     },
-*   },
-*   [],
-* );
-* ```
+* Memoized component that renders a single tool call.
+* This prevents unnecessary re-renders when parent components update
+* but the tool call data hasn't changed.
+*/
+const ToolCallRenderer = react.default.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
+	const args = (0, react.useMemo)(() => (0, _copilotkit_shared.partialJSONParse)(toolCall.function.arguments), [toolCall.function.arguments]);
+	const toolName = toolCall.function.name;
+	if (toolMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: _copilotkit_core.ToolCallStatus.Complete,
+		result: toolMessage.content
+	});
+	else if (isExecuting) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: _copilotkit_core.ToolCallStatus.Executing,
+		result: void 0
+	});
+	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: _copilotkit_core.ToolCallStatus.InProgress,
+		result: void 0
+	});
+}, (prevProps, nextProps) => {
+	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
+	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
+	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
+	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
+	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
+	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
+	return true;
+});
+/**
+* Hook that returns a function to render tool calls based on the render functions
+* defined in CopilotKitProvider.
 *
-* @example
-* ```tsx
-* useRenderTool(
-*   {
-*     name: "summarize",
-*     parameters: z.object({ text: z.string() }),
-*     agentId: "research-agent",
-*     render: ({ name, status }) => <div>{name}: {status}</div>,
-*   },
-*   [selectedAgentId],
-* );
-* ```
+* @returns A function that takes a tool call and optional tool message and returns the rendered component
 */
-function useRenderTool(config, deps) {
-	const { copilotkit } = useCopilotKit();
-	const extraDeps = deps ?? EMPTY_DEPS$1;
-	(0, react.useEffect)(() => {
-		const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
-			name: "*",
-			render: (props) => config.render({
-				...props,
-				parameters: props.args
-			}),
-			...config.agentId ? { agentId: config.agentId } : {}
-		}) : defineToolCallRenderer({
-			name: config.name,
-			args: config.parameters,
-			render: (props) => config.render({
-				...props,
-				parameters: props.args
-			}),
-			...config.agentId ? { agentId: config.agentId } : {}
-		});
-		copilotkit.addHookRenderToolCall(renderer);
+function useRenderToolCall() {
+	const { copilotkit, executingToolCallIds } = useCopilotKit();
+	const agentId = useCopilotChatConfiguration()?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const renderToolCalls = (0, react.useSyncExternalStore)((callback) => {
+		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
+	}, () => 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,
+			isExecuting: executingToolCallIds.has(toolCall.id)
+		}, toolCall.id);
 	}, [
-		config.name,
-		copilotkit,
-		JSON.stringify(extraDeps)
+		renderToolCalls,
+		executingToolCallIds,
+		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";
-		}
-	}
-}
-/**
-* Convert the framework-internal renderer props (`args`, enum status) into
-* the documented {@link DefaultRenderProps} shape (`parameters`, string-union
-* status) so a user `config.render` always sees the documented contract.
-*/
-function adaptRendererProps(props) {
-	return {
-		name: props.name,
-		toolCallId: props.toolCallId,
-		parameters: props.args,
-		status: mapToolCallStatus(props.status),
-		result: props.result
-	};
-}
-/**
-* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
-*
-* - Call with no config to use CopilotKit's built-in default tool-call card.
-* - Pass `config.render` to replace the default UI with your own fallback renderer.
-*
-* This is useful when you want a generic renderer for tools that do not have a
-* dedicated `useRenderTool({ name: "..." })` registration.
-*
-* @param config - Optional custom wildcard render function.
-* @param deps - Optional dependencies to refresh registration.
-*
-* @example
-* ```tsx
-* useDefaultRenderTool();
-* ```
-*
-* @example
-* ```tsx
-* useDefaultRenderTool({
-*   render: ({ name, status }) => <div>{name}: {status}</div>,
-* });
-* ```
-*
-* @example
-* ```tsx
-* useDefaultRenderTool(
-*   {
-*     render: ({ name, result }) => (
-*       <ToolEventRow title={name} payload={result} compact={compactMode} />
-*     ),
-*   },
-*   [compactMode],
-* );
-* ```
-*/
-function useDefaultRenderTool(config, deps) {
-	const userRender = config?.render;
-	useRenderTool({
-		name: "*",
-		render: userRender ? (raw) => userRender(adaptRendererProps(raw)) : (raw) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(raw) })
-	}, deps);
-}
-/**
-* 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
-/**
-* Memoized component that renders a single tool call.
-* This prevents unnecessary re-renders when parent components update
-* but the tool call data hasn't changed.
-*/
-const ToolCallRenderer = react.default.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
-	const args = (0, react.useMemo)(() => (0, _copilotkit_shared.partialJSONParse)(toolCall.function.arguments), [toolCall.function.arguments]);
-	const toolName = toolCall.function.name;
-	if (toolMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: _copilotkit_core.ToolCallStatus.Complete,
-		result: toolMessage.content
-	});
-	else if (isExecuting) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: _copilotkit_core.ToolCallStatus.Executing,
-		result: void 0
-	});
-	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: _copilotkit_core.ToolCallStatus.InProgress,
-		result: void 0
-	});
-}, (prevProps, nextProps) => {
-	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
-	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
-	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
-	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
-	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
-	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
-	return true;
-});
-/**
-* Hook that returns a function to render tool calls based on the render functions
-* defined in CopilotKitProvider.
-*
-* @returns A function that takes a tool call and optional tool message and returns the rendered component
-*/
-function useRenderToolCall() {
-	const { copilotkit, executingToolCallIds } = useCopilotKit();
-	const agentId = useCopilotChatConfiguration()?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
-	const renderToolCalls = (0, react.useSyncExternalStore)((callback) => {
-		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
-	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
-	return (0, react.useCallback)(({ toolCall, toolMessage }) => {
-		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
-		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,
-			isExecuting: executingToolCallIds.has(toolCall.id)
-		}, toolCall.id);
-	}, [
-		renderToolCalls,
-		executingToolCallIds,
-		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
 const CopilotKitInspector = ({ core, ...rest }) => {
@@ -3278,7 +3123,7 @@ const A2UISurfaceContentSchema = zod.z.object({
 	...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";
@@ -3354,6 +3199,7 @@ function createA2UIMessageRenderer(options) {
 					agent,
 					copilotkit,
 					catalog,
+					onAction,
 					onReady: markSurfaceReady
 				}, surfaceId))
 			});
@@ -3374,29 +3220,60 @@ function createA2UIMessageRenderer(options) {
 	};
 }
 /**
+* 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, {
@@ -3467,6 +3344,18 @@ function getOperationSurfaceId(operation) {
 	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
 /**
@@ -3561,6 +3450,10 @@ function A2UICatalogContext({ catalog, includeSchema }) {
 
 //#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({});
@@ -3591,6 +3484,8 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 	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;
@@ -3621,7 +3516,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 			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,
@@ -3629,7 +3524,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		}));
 		return renderers;
 	}, [
-		runtimeA2UIEnabled,
+		a2uiActive,
 		openGenUIActive,
 		a2ui
 	]);
@@ -3816,7 +3711,10 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		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);
 	}, [
@@ -3825,6 +3723,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		mergedHeaders,
 		credentials,
 		properties,
+		a2uiCatalogProvided,
 		mergedAgents,
 		useSingleEndpoint,
 		debug
@@ -3872,7 +3771,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		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)(() => {
@@ -3893,7 +3792,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		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, {
@@ -3901,8 +3800,8 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 			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
 					}),
@@ -3980,16 +3879,20 @@ function useRenderActivityMessage() {
 	const renderActivityMessage = (0, react.useCallback)((message) => {
 		const renderer = findRenderer(message.activityType);
 		if (!renderer) return null;
-		const parseResult = renderer.content.safeParse(message.content);
-		if (!parseResult.success) {
-			console.warn(`Failed to parse content for activity message '${message.activityType}':`, parseResult.error);
+		const parseResult = renderer.content["~standard"].validate(message.content);
+		if (parseResult instanceof Promise) {
+			console.warn(`Async content validation is not supported for activity message '${message.activityType}'`);
+			return null;
+		}
+		if (parseResult.issues) {
+			console.warn(`Failed to parse content for activity message '${message.activityType}':`, parseResult.issues);
 			return null;
 		}
 		const Component = renderer.render;
 		const agent = copilotkit.getAgent(agentId);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 			activityType: message.activityType,
-			content: parseResult.data,
+			content: parseResult.value,
 			message,
 			agent
 		}, message.id);
@@ -4003,106 +3906,376 @@ function useRenderActivityMessage() {
 		findRenderer
 	}), [renderActivityMessage, findRenderer]);
 }
-
-//#endregion
-//#region src/v2/hooks/use-frontend-tool.tsx
-const EMPTY_DEPS = [];
-function useFrontendTool(tool, deps) {
-	const { copilotkit } = useCopilotKit();
-	const extraDeps = deps ?? EMPTY_DEPS;
-	(0, react.useEffect)(() => {
-		const name = tool.name;
-		if (copilotkit.getTool({
-			toolName: name,
-			agentId: tool.agentId
-		})) {
-			console.warn(`Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`);
-			copilotkit.removeTool(name, tool.agentId);
+
+//#endregion
+//#region src/v2/hooks/use-frontend-tool.tsx
+const EMPTY_DEPS$1 = [];
+function useFrontendTool(tool, deps) {
+	const { copilotkit } = useCopilotKit();
+	const extraDeps = deps ?? EMPTY_DEPS$1;
+	(0, react.useEffect)(() => {
+		const name = tool.name;
+		if (copilotkit.getTool({
+			toolName: name,
+			agentId: tool.agentId
+		})) {
+			console.warn(`Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`);
+			copilotkit.removeTool(name, tool.agentId);
+		}
+		copilotkit.addTool(tool);
+		if (tool.render) copilotkit.addHookRenderToolCall({
+			name,
+			args: tool.parameters,
+			agentId: tool.agentId,
+			render: tool.render
+		});
+		return () => {
+			copilotkit.removeTool(name, tool.agentId);
+		};
+	}, [
+		tool.name,
+		tool.available,
+		copilotkit,
+		JSON.stringify(extraDeps)
+	]);
+}
+
+//#endregion
+//#region src/v2/hooks/use-component.tsx
+/**
+* Registers a React component as a frontend tool renderer in chat.
+*
+* This hook is a convenience wrapper around `useFrontendTool` that:
+* - builds a model-facing tool description,
+* - forwards optional schema parameters (any Standard Schema V1 compatible library),
+* - renders your component with tool call parameters.
+*
+* Use this when you want to display a typed visual component for a tool call
+* without manually wiring a full frontend tool object.
+*
+* When `parameters` is provided, render props are inferred from the schema.
+* When omitted, the render component may accept any props.
+*
+* @typeParam TSchema - Schema describing tool parameters, or `undefined` when no schema is given.
+* @param config - Tool registration config.
+* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+*
+* @example
+* ```tsx
+* // Without parameters — render accepts any props
+* useComponent({
+*   name: "showGreeting",
+*   render: ({ message }: { message: string }) => <div>{message}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* // With parameters — render props inferred from schema
+* useComponent({
+*   name: "showWeatherCard",
+*   parameters: z.object({ city: z.string() }),
+*   render: ({ city }) => <div>{city}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* useComponent(
+*   {
+*     name: "renderProfile",
+*     parameters: z.object({ userId: z.string() }),
+*     render: ProfileCard,
+*     agentId: "support-agent",
+*   },
+*   [selectedAgentId],
+* );
+* ```
+*/
+function useComponent(config, deps) {
+	const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
+	const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
+	useFrontendTool({
+		name: config.name,
+		description: fullDescription,
+		parameters: config.parameters,
+		render: ({ args }) => {
+			const Component = config.render;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
+		},
+		agentId: config.agentId,
+		followUp: config.followUp
+	}, deps);
+}
+
+//#endregion
+//#region src/v2/hooks/use-render-tool.tsx
+const EMPTY_DEPS = [];
+/**
+* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
+*
+* Key behavior:
+* - deduplicates by `agentId:name` (latest registration wins),
+* - keeps renderer entries on cleanup so historical chat tool calls can still render,
+* - refreshes registration when `deps` change.
+*
+* @typeParam S - Schema type describing tool call parameters.
+* @param config - Renderer config for wildcard or named tools.
+* @param deps - Optional dependencies to refresh registration.
+*
+* @example
+* ```tsx
+* useRenderTool(
+*   {
+*     name: "searchDocs",
+*     parameters: z.object({ query: z.string() }),
+*     render: ({ status, parameters, result }) => {
+*       if (status === "executing") return <div>Searching {parameters.query}</div>;
+*       if (status === "complete") return <div>{result}</div>;
+*       return <div>Preparing...</div>;
+*     },
+*   },
+*   [],
+* );
+* ```
+*
+* @example
+* ```tsx
+* useRenderTool(
+*   {
+*     name: "summarize",
+*     parameters: z.object({ text: z.string() }),
+*     agentId: "research-agent",
+*     render: ({ name, status }) => <div>{name}: {status}</div>,
+*   },
+*   [selectedAgentId],
+* );
+* ```
+*/
+function useRenderTool(config, deps) {
+	const { copilotkit } = useCopilotKit();
+	const extraDeps = deps ?? EMPTY_DEPS;
+	(0, react.useEffect)(() => {
+		const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
+			name: "*",
+			render: (props) => config.render({
+				...props,
+				parameters: props.args
+			}),
+			...config.agentId ? { agentId: config.agentId } : {}
+		}) : defineToolCallRenderer({
+			name: config.name,
+			args: config.parameters,
+			render: (props) => {
+				if (props.status === _copilotkit_core.ToolCallStatus.InProgress) return config.render({
+					...props,
+					parameters: props.args
+				});
+				if (props.status === _copilotkit_core.ToolCallStatus.Executing) return config.render({
+					...props,
+					parameters: props.args
+				});
+				return config.render({
+					...props,
+					parameters: props.args
+				});
+			},
+			...config.agentId ? { agentId: config.agentId } : {}
+		});
+		copilotkit.addHookRenderToolCall(renderer);
+	}, [
+		config.name,
+		copilotkit,
+		JSON.stringify(extraDeps)
+	]);
+}
+
+//#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";
+		}
+	}
+}
+/**
+* Convert the framework-internal renderer props (`args`, enum status) into
+* the documented {@link DefaultRenderProps} shape (`parameters`, string-union
+* status) so a user `config.render` always sees the documented contract.
+*/
+function adaptRendererProps(props) {
+	return {
+		name: props.name,
+		toolCallId: props.toolCallId,
+		parameters: props.args,
+		status: mapToolCallStatus(props.status),
+		result: props.result
+	};
+}
+/**
+* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
+*
+* - Call with no config to use CopilotKit's built-in default tool-call card.
+* - Pass `config.render` to replace the default UI with your own fallback renderer.
+*
+* This is useful when you want a generic renderer for tools that do not have a
+* dedicated `useRenderTool({ name: "..." })` registration.
+*
+* @param config - Optional custom wildcard render function.
+* @param deps - Optional dependencies to refresh registration.
+*
+* @example
+* ```tsx
+* useDefaultRenderTool();
+* ```
+*
+* @example
+* ```tsx
+* useDefaultRenderTool({
+*   render: ({ name, status }) => <div>{name}: {status}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* useDefaultRenderTool(
+*   {
+*     render: ({ name, result }) => (
+*       <ToolEventRow title={name} payload={result} compact={compactMode} />
+*     ),
+*   },
+*   [compactMode],
+* );
+* ```
+*/
+function useDefaultRenderTool(config, deps) {
+	const userRender = config?.render;
+	useRenderTool({
+		name: "*",
+		render: userRender ? (raw) => userRender(adaptRendererProps(raw)) : (raw) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(raw) })
+	}, deps);
+}
+/**
+* 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 "";
 		}
-		copilotkit.addTool(tool);
-		if (tool.render) copilotkit.addHookRenderToolCall({
-			name,
-			args: tool.parameters,
-			agentId: tool.agentId,
-			render: tool.render
-		});
-		return () => {
-			copilotkit.removeTool(name, tool.agentId);
-		};
-	}, [
-		tool.name,
-		tool.available,
-		copilotkit,
-		JSON.stringify(extraDeps)
-	]);
-}
-
-//#endregion
-//#region src/v2/hooks/use-component.tsx
-/**
-* Registers a React component as a frontend tool renderer in chat.
-*
-* This hook is a convenience wrapper around `useFrontendTool` that:
-* - builds a model-facing tool description,
-* - forwards optional schema parameters (any Standard Schema V1 compatible library),
-* - renders your component with tool call parameters.
-*
-* Use this when you want to display a typed visual component for a tool call
-* without manually wiring a full frontend tool object.
-*
-* When `parameters` is provided, render props are inferred from the schema.
-* When omitted, the render component may accept any props.
-*
-* @typeParam TSchema - Schema describing tool parameters, or `undefined` when no schema is given.
-* @param config - Tool registration config.
-* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
-*
-* @example
-* ```tsx
-* // Without parameters — render accepts any props
-* useComponent({
-*   name: "showGreeting",
-*   render: ({ message }: { message: string }) => <div>{message}</div>,
-* });
-* ```
-*
-* @example
-* ```tsx
-* // With parameters — render props inferred from schema
-* useComponent({
-*   name: "showWeatherCard",
-*   parameters: z.object({ city: z.string() }),
-*   render: ({ city }) => <div>{city}</div>,
-* });
-* ```
-*
-* @example
-* ```tsx
-* useComponent(
-*   {
-*     name: "renderProfile",
-*     parameters: z.object({ userId: z.string() }),
-*     render: ProfileCard,
-*     agentId: "support-agent",
-*   },
-*   [selectedAgentId],
-* );
-* ```
-*/
-function useComponent(config, deps) {
-	const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
-	const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
-	useFrontendTool({
-		name: config.name,
-		description: fullDescription,
-		parameters: config.parameters,
-		render: ({ args }) => {
-			const Component = config.render;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
-		},
-		agentId: config.agentId,
-		followUp: config.followUp
-	}, deps);
+	}
 }
 
 //#endregion
@@ -4225,7 +4398,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 		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({
@@ -4234,14 +4407,14 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 				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({
@@ -4250,7 +4423,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 				transport: copilotkit.runtimeTransport,
 				runtimeMode: "pending"
 			});
-			provisional.headers = { ...copilotkit.headers };
+			copilotkit.applyHeadersToAgent(provisional);
 			provisionalAgentCache.current.set(agentId, provisional);
 			return provisional;
 		}
@@ -4301,7 +4474,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 		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;
@@ -4578,114 +4751,165 @@ const INTERRUPT_EVENT_NAME = "on_interrupt";
 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.
-*
-* 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.
-*
-* - `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.
+* Handles agent interrupts with optional filtering, preprocessing, and resume behavior.
 *
-* `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.
+* 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`.
 *
-* @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);
@@ -4694,6 +4918,8 @@ function useInterrupt(config) {
 	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;
@@ -4705,11 +4931,12 @@ function useInterrupt(config) {
 		}
 	};
 	(0, react.useEffect)(() => {
-		if (!pendingEvent) {
+		if (!pending) {
 			setHandlerResult(null);
 			return;
 		}
-		if (!isEnabled(pendingEvent)) {
+		const legacyEvent = toLegacyEvent(pending);
+		if (!isEnabled(legacyEvent)) {
 			setHandlerResult(null);
 			return;
 		}
@@ -4722,8 +4949,11 @@ function useInterrupt(config) {
 		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);
@@ -4742,19 +4972,24 @@ function useInterrupt(config) {
 		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;
@@ -4779,7 +5014,7 @@ function useThreadStoreSelector(store, selector) {
 	return (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
 		const subscription = store.select(selector).subscribe(onStoreChange);
 		return () => subscription.unsubscribe();
-	}, [store, selector]), () => selector(store.getState()));
+	}, [store, selector]), () => selector(store.getState()), () => selector(store.getServerState()));
 }
 /**
 * React hook for listing and managing Intelligence platform threads.
@@ -4790,9 +5025,9 @@ function useThreadStoreSelector(store, selector) {
 * current without polling — thread creates, renames, archives, and deletes
 * from any client are reflected immediately.
 *
-* Mutation methods (`renameThread`, `archiveThread`, `deleteThread`) return
-* promises that resolve once the platform confirms the operation and reject
-* with an `Error` on failure.
+* Mutation methods (`renameThread`, `archiveThread`, `unarchiveThread`,
+* `deleteThread`) return promises that resolve once the platform confirms the
+* operation and reject with an `Error` on failure.
 *
 * @param input - Agent identifier and optional list controls.
 * @returns Thread list state and stable mutation callbacks.
@@ -4822,7 +5057,7 @@ function useThreadStoreSelector(store, selector) {
 * }
 * ```
 */
-function useThreads$1({ agentId, includeArchived, limit }) {
+function useThreads$1({ agentId, includeArchived, limit, enabled = true }) {
 	const { copilotkit } = useCopilotKit();
 	const [store] = (0, react.useState)(() => (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch }));
 	const coreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
@@ -4839,6 +5074,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 	const storeError = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsError);
 	const hasMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectHasNextPage);
 	const isFetchingMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsFetchingNextPage);
+	const isMutating = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsMutating);
 	const headersKey = (0, react.useMemo)(() => {
 		return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 	}, [copilotkit.headers]);
@@ -4859,9 +5095,16 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		return /* @__PURE__ */ new Error("Thread mutations are not available on this CopilotKit runtime");
 	}, [threadMutationsSupported]);
 	const [hasDispatchedContext, setHasDispatchedContext] = (0, react.useState)(false);
-	const preConnectLoading = !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
-	const isLoading = runtimeError || threadEndpointsError ? false : preConnectLoading || storeIsLoading;
-	const error = runtimeError ?? threadEndpointsError ?? storeError;
+	const preConnectLoading = enabled && !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
+	const [configErrorDismissed, setConfigErrorDismissed] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setConfigErrorDismissed(false);
+	}, [runtimeError, threadEndpointsError]);
+	const activeRuntimeError = configErrorDismissed ? null : runtimeError;
+	const activeThreadEndpointsError = configErrorDismissed ? null : threadEndpointsError;
+	const isLoading = activeRuntimeError || activeThreadEndpointsError ? false : preConnectLoading || storeIsLoading;
+	const error = activeRuntimeError ?? activeThreadEndpointsError ?? storeError;
+	const listError = storeError;
 	(0, react.useEffect)(() => {
 		store.start();
 		return () => {
@@ -4869,6 +5112,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		};
 	}, [store]);
 	(0, react.useEffect)(() => {
+		if (!enabled) return;
 		copilotkit.registerThreadStore(agentId, store);
 		return () => {
 			copilotkit.unregisterThreadStore(agentId);
@@ -4876,9 +5120,15 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 	}, [
 		copilotkit,
 		agentId,
-		store
+		store,
+		enabled
 	]);
 	(0, react.useEffect)(() => {
+		if (!enabled) {
+			store.setContext(null);
+			setHasDispatchedContext(false);
+			return;
+		}
 		if (!copilotkit.runtimeUrl) {
 			store.setContext(null);
 			setHasDispatchedContext(false);
@@ -4902,6 +5152,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		setHasDispatchedContext(true);
 	}, [
 		store,
+		enabled,
 		copilotkit.runtimeUrl,
 		runtimeStatus,
 		headersKey,
@@ -4919,16 +5170,25 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 	}, [threadMutationsError]);
 	const renameThread = (0, react.useMemo)(() => guardMutation((threadId, name) => store.renameThread(threadId, name)), [store, guardMutation]);
 	const archiveThread = (0, react.useMemo)(() => guardMutation((threadId) => store.archiveThread(threadId)), [store, guardMutation]);
+	const unarchiveThread = (0, react.useMemo)(() => guardMutation((threadId) => store.unarchiveThread(threadId)), [store, guardMutation]);
 	const deleteThread = (0, react.useMemo)(() => guardMutation((threadId) => store.deleteThread(threadId)), [store, guardMutation]);
 	return {
 		threads,
 		isLoading,
 		error,
+		listError,
 		hasMoreThreads,
 		isFetchingMoreThreads,
+		isMutating,
 		fetchMoreThreads: (0, react.useCallback)(() => store.fetchNextPage(), [store]),
+		refetchThreads: (0, react.useCallback)(() => store.refetchThreads(), [store]),
+		startNewThread: (0, react.useCallback)(() => {
+			setConfigErrorDismissed(true);
+			store.startNewThread();
+		}, [store]),
 		renameThread,
 		archiveThread,
+		unarchiveThread,
 		deleteThread
 	};
 }
@@ -6112,7 +6372,7 @@ const DefaultContainer = react.default.forwardRef(function DefaultContainer({ cl
 		ref,
 		"data-copilotkit": true,
 		"data-testid": "copilot-suggestions",
-		className: cn("cpk:flex cpk:flex-wrap cpk:items-center cpk:gap-1.5 cpk:sm:gap-2 cpk:pl-0 cpk:pr-4 cpk:sm:px-0 cpk:pointer-events-none", className),
+		className: cn("cpk:flex cpk:flex-wrap cpk:items-center cpk:gap-1.5 cpk:sm:gap-2 cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0 cpk:pointer-events-none", className),
 		...props
 	});
 });
@@ -7217,7 +7477,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cpk:max-w-3xl cpk:mx-auto",
 				children: [BoundMessageView, hasSuggestions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:pl-0 cpk:pr-4 cpk:sm:px-0 cpk:mt-4",
+					className: "cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0 cpk:mt-4",
 					children: BoundSuggestionView
 				}) : null]
 			})
@@ -7260,7 +7520,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			onDragOver,
 			onDragLeave,
 			onDrop,
-			className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+			className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 			...props,
 			children: [dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}), BoundWelcomeScreen]
 		});
@@ -7282,7 +7542,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		onDragOver,
 		onDragLeave,
 		onDrop,
-		className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+		className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 		...props,
 		children: [
 			dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
@@ -7321,7 +7581,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 						minHeight: 0
 					},
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+						className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 						children
 					})
 				}),
@@ -7354,7 +7614,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 						...props,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							ref: contentRef,
-							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 							children
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							ref: spacerRef,
@@ -7416,7 +7676,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		if (!hasMounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+				className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 				children
 			})
 		});
@@ -7431,7 +7691,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							ref: contentRef,
-							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 							children
 						}),
 						BoundFeather,
@@ -7695,9 +7955,17 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
 	const [lastConnectedThreadId, setLastConnectedThreadId] = (0, react.useState)(null);
 	const isConnecting = hasExplicitThreadId && lastConnectedThreadId !== resolvedThreadId;
+	const previousThreadIdRef = (0, react.useRef)(null);
+	const hasExplicitThreadIdRef = (0, react.useRef)(hasExplicitThreadId);
+	hasExplicitThreadIdRef.current = hasExplicitThreadId;
 	(0, react.useEffect)(() => {
+		const threadChanged = previousThreadIdRef.current !== resolvedThreadId;
+		previousThreadIdRef.current = resolvedThreadId;
 		agent.threadId = resolvedThreadId;
-		if (!hasExplicitThreadId) return;
+		if (!hasExplicitThreadId) {
+			if (threadChanged && agent.messages.length > 0) agent.setMessages([]);
+			return;
+		}
 		let detached = false;
 		const connectAbortController = new AbortController();
 		if (agent instanceof _ag_ui_client.HttpAgent) agent.abortController = connectAbortController;
@@ -7711,6 +7979,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 				if (!detached) (typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 16))(() => {
 					if (!detached) setLastConnectedThreadId(resolvedThreadId);
 				});
+				else if (!hasExplicitThreadIdRef.current) agentToConnect.setMessages([]);
 			}
 		};
 		connect(agent);
@@ -7726,8 +7995,10 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		hasExplicitThreadId
 	]);
 	const waitForActiveRunToSettle = (0, react.useCallback)(async () => {
-		if (agent.isRunning && (0, _copilotkit_core.isRunCompletionAware)(agent) && agent.activeRunCompletionPromise) try {
-			await agent.activeRunCompletionPromise;
+		const maybeAware = agent;
+		const activeRunCompletionPromise = (0, _copilotkit_core.isRunCompletionAware)(maybeAware) ? maybeAware.activeRunCompletionPromise : void 0;
+		if (agent.isRunning && activeRunCompletionPromise) try {
+			await activeRunCompletionPromise;
 		} catch (error) {
 			console.error("CopilotChat: in-flight run rejected while queuing send", error);
 		}
@@ -8059,18 +8330,46 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 
 //#endregion
 //#region src/v2/components/chat/CopilotModalHeader.tsx
-function CopilotModalHeader({ title, titleContent, closeButton, children, className, ...rest }) {
+/**
+* Reactively tracks whether the viewport is in the mobile range (≤767px) — the
+* same breakpoint the drawer + chat coordination use. SSR-safe: starts `false`
+* (desktop) so the server render and first client render agree, then syncs on
+* mount and on resize.
+*/
+function useIsMobileViewport() {
+	const [isMobile, setIsMobile] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const mql = window.matchMedia("(max-width: 767px)");
+		const update = () => setIsMobile(mql.matches);
+		update();
+		mql.addEventListener("change", update);
+		return () => mql.removeEventListener("change", update);
+	}, []);
+	return isMobile;
+}
+function CopilotModalHeader({ title, titleContent, closeButton, drawerLauncher, children, className, ...rest }) {
 	const configuration = useCopilotChatConfiguration();
 	const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
 	const resolvedTitle = title ?? fallbackTitle;
+	const isMobile = useIsMobileViewport();
+	const drawerRegistered = (configuration?.drawerRegistered ?? false) && isMobile;
 	const handleClose = (0, react.useCallback)(() => {
 		configuration?.setModalOpen?.(false);
 	}, [configuration]);
+	const handleToggleDrawer = (0, react.useCallback)(() => {
+		configuration?.setDrawerOpen?.(!configuration.drawerOpen);
+	}, [configuration]);
 	const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, { children: resolvedTitle });
 	const BoundCloseButton = renderSlot(closeButton, CopilotModalHeader.CloseButton, { onClick: handleClose });
+	const BoundDrawerLauncher = drawerRegistered ? renderSlot(drawerLauncher, CopilotModalHeader.DrawerLauncher, {
+		onClick: handleToggleDrawer,
+		"aria-expanded": configuration?.drawerOpen ?? false
+	}) : null;
 	if (children) return children({
 		titleContent: BoundTitle,
 		closeButton: BoundCloseButton,
+		drawerLauncher: BoundDrawerLauncher,
 		title: resolvedTitle,
 		...rest
 	});
@@ -8083,8 +8382,8 @@ function CopilotModalHeader({ title, titleContent, closeButton, children, classN
 			className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:flex-1",
-					"aria-hidden": "true"
+					className: "cpk:flex cpk:flex-1 cpk:justify-start",
+					children: BoundDrawerLauncher ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center",
@@ -8117,9 +8416,21 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 			"aria-hidden": "true"
 		})
 	});
+	_CopilotModalHeader.DrawerLauncher = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"data-testid": "copilot-threads-drawer-launcher",
+		className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
+		"aria-label": "Open threads",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftOpen, {
+			className: "cpk:h-4 cpk:w-4",
+			"aria-hidden": "true"
+		})
+	});
 })(CopilotModalHeader || (CopilotModalHeader = {}));
 CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
+CopilotModalHeader.DrawerLauncher.displayName = "CopilotModalHeader.DrawerLauncher";
 
 //#endregion
 //#region src/v2/components/chat/CopilotSidebarView.tsx
@@ -8477,6 +8788,322 @@ function CopilotPopup({ header, toggleButton, defaultOpen, width, height, clickO
 }
 CopilotPopup.displayName = "CopilotPopup";
 
+//#endregion
+//#region src/v2/components/chat/CopilotThreadsDrawer.tsx
+/**
+* Maps a {@link Thread} from {@link useThreads} to the element's
+* {@link DrawerThread} view shape. The shapes are structurally compatible; this
+* narrows to exactly the fields the element renders so the element never sees
+* platform-internal fields.
+*/
+function toDrawerThread(thread) {
+	return {
+		id: thread.id,
+		name: thread.name,
+		archived: thread.archived,
+		createdAt: thread.createdAt,
+		updatedAt: thread.updatedAt,
+		...thread.lastRunAt !== void 0 ? { lastRunAt: thread.lastRunAt } : {}
+	};
+}
+/** The chat input textarea's documented `data-testid`. */
+const CHAT_INPUT_TESTID = "copilot-chat-textarea";
+/** The chat view container's documented `data-testid`. */
+const CHAT_CONTAINER_TESTID = "copilot-chat";
+/**
+* Returns the chat input element for focus-return after a thread is selected.
+*
+* Best-effort and SCOPED: walks up from the drawer element looking for an
+* ancestor that contains a chat-view container (`data-testid="copilot-chat"`),
+* then returns the chat input within that subtree. This avoids focusing the
+* wrong composer on a page hosting more than one chat (multi-chat dashboards),
+* where a document-global lookup would grab whichever input appears first in
+* DOM order rather than the one this drawer drives.
+*
+* Falls back to a document-global lookup when no scoping ancestor is found
+* (e.g. the drawer and chat share no common container, or headless usage),
+* and returns `null` when there is no chat input at all.
+*
+* @param origin - The drawer element to scope the search from.
+*/
+function findChatInput(origin) {
+	if (typeof document === "undefined") return null;
+	const container = origin?.closest?.(`[data-testid="${CHAT_CONTAINER_TESTID}"]`);
+	if (container) {
+		const scoped = container.querySelector(`[data-testid="${CHAT_INPUT_TESTID}"]`);
+		if (scoped) return scoped;
+	}
+	return document.querySelector(`[data-testid="${CHAT_INPUT_TESTID}"]`);
+}
+/**
+* React wrapper for the shadow-DOM `<copilotkit-threads-drawer>` threads drawer.
+*
+* Responsibilities:
+* - Registers the custom element on the client (SSR-safe; nothing renders
+*   during prerender to avoid hydration mismatch).
+* - Feeds the element domain data: `threads`, `loading`, `error`,
+*   `activeThreadId`, `licensed`, fetch-more state.
+* - Routes the element's nine outbound events to core thread operations
+*   ({@link useThreads}) and chat-configuration changes.
+* - Registers with the surrounding chat configuration so the header
+*   thread-list launcher appears, and binds the element `open` state to the
+*   configuration's `drawerOpen`.
+*
+* License gating is two-pronged: the locked view shows when no license is configured
+* (the runtime reported no license status) OR the `threads` feature is
+* explicitly unlicensed. While unlicensed, the thread fetch is skipped entirely
+* so an unlicensed drawer issues no network requests.
+*
+* Thread switching needs no host wiring: when `onThreadSelect`/`onNewThread`
+* are omitted, the wrapper drives the surrounding chat configuration directly
+* ({@link CopilotChatConfigurationValue.setActiveThreadId} /
+* {@link CopilotChatConfigurationValue.startNewThread}), so a bare drawer
+* connects to the picked thread and shows the welcome screen on "+ New". Pass
+* the callbacks only to take control yourself.
+*
+* @example
+* ```tsx
+* // Callback-free: the drawer drives the chat configuration itself.
+* <CopilotKitProvider runtimeUrl="/api/copilotkit" publicLicenseKey="ck_pub_...">
+*   <CopilotChat />
+*   <CopilotThreadsDrawer />
+* </CopilotKitProvider>
+* ```
+*/
+function CopilotThreadsDrawer({ agentId, onThreadSelect, onNewThread, onLicensed, licenseUrl, renderRow, label, limit, "data-testid": dataTestId = "copilot-threads-drawer" }) {
+	const configuration = useCopilotChatConfiguration();
+	const { status, checkFeature } = useLicenseContext();
+	const licensePresent = status === "valid" || status === "expiring";
+	const featureLicensed = checkFeature("threads");
+	const licensed = licensePresent && featureLicensed;
+	const licensePending = status === null;
+	const resolvedAgentId = agentId ?? configuration?.agentId ?? "default";
+	const activeThreadId = configuration?.threadId ?? null;
+	const { threads, isLoading, listError, hasMoreThreads, isFetchingMoreThreads, archiveThread, unarchiveThread, deleteThread, fetchMoreThreads, refetchThreads, startNewThread } = useThreads$1({
+		agentId: resolvedAgentId,
+		includeArchived: true,
+		enabled: licensed,
+		...limit !== void 0 ? { limit } : {}
+	});
+	const drawerThreads = (0, react.useMemo)(() => threads.map(toDrawerThread), [threads]);
+	const elementRef = (0, react.useRef)(null);
+	const [mounted, setMounted] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		(0, _copilotkit_web_components_threads_drawer.defineCopilotKitThreadsDrawer)();
+		setMounted(true);
+	}, []);
+	const registerDrawer = configuration?.registerDrawer;
+	(0, react.useEffect)(() => {
+		if (!registerDrawer) return;
+		return registerDrawer();
+	}, [registerDrawer]);
+	const [localDrawerOpen, setLocalDrawerOpen] = (0, react.useState)(false);
+	const drawerOpen = configuration ? configuration.drawerOpen : localDrawerOpen;
+	const setDrawerOpen = configuration ? configuration.setDrawerOpen : setLocalDrawerOpen;
+	const setActiveThreadId = configuration?.setActiveThreadId;
+	const startNewThreadConfig = configuration?.startNewThread;
+	const handleThreadSelected = (0, react.useCallback)((threadId) => {
+		if (onThreadSelect) onThreadSelect(threadId);
+		else setActiveThreadId?.(threadId, { explicit: true });
+		findChatInput(elementRef.current)?.focus();
+	}, [onThreadSelect, setActiveThreadId]);
+	const handleNewThread = (0, react.useCallback)(() => {
+		startNewThread();
+		if (onNewThread) onNewThread();
+		else startNewThreadConfig?.();
+	}, [
+		startNewThread,
+		onNewThread,
+		startNewThreadConfig
+	]);
+	const handleArchive = (0, react.useCallback)((threadId) => {
+		archiveThread(threadId).catch((err) => {
+			console.error("CopilotThreadsDrawer: archiveThread failed", err);
+		});
+	}, [archiveThread]);
+	const handleUnarchive = (0, react.useCallback)((threadId) => {
+		unarchiveThread(threadId).catch((err) => {
+			console.error("CopilotThreadsDrawer: unarchiveThread failed", err);
+		});
+	}, [unarchiveThread]);
+	const handleDelete = (0, react.useCallback)((threadId) => {
+		const isActive = threadId === activeThreadId;
+		deleteThread(threadId).then(() => {
+			if (isActive) {
+				startNewThread();
+				if (onNewThread) onNewThread();
+				else startNewThreadConfig?.();
+			}
+		}).catch((err) => {
+			console.error("CopilotThreadsDrawer: deleteThread failed", err);
+		});
+	}, [
+		deleteThread,
+		activeThreadId,
+		startNewThread,
+		onNewThread,
+		startNewThreadConfig
+	]);
+	const handleFilterChange = (0, react.useCallback)(() => {
+		refetchThreads();
+	}, [refetchThreads]);
+	const handleRetry = (0, react.useCallback)((scope) => {
+		if (scope === "fetch-more") fetchMoreThreads();
+		else refetchThreads();
+	}, [fetchMoreThreads, refetchThreads]);
+	const handleOpenChange = (0, react.useCallback)((open) => {
+		setDrawerOpen(open);
+	}, [setDrawerOpen]);
+	const handleLicensed = (0, react.useCallback)(() => {
+		onLicensed?.();
+	}, [onLicensed]);
+	const handleLoadMore = (0, react.useCallback)(() => {
+		fetchMoreThreads();
+	}, [fetchMoreThreads]);
+	const handlersRef = (0, react.useRef)({
+		handleThreadSelected,
+		handleNewThread,
+		handleArchive,
+		handleUnarchive,
+		handleDelete,
+		handleFilterChange,
+		handleRetry,
+		handleOpenChange,
+		handleLicensed,
+		handleLoadMore
+	});
+	handlersRef.current = {
+		handleThreadSelected,
+		handleNewThread,
+		handleArchive,
+		handleUnarchive,
+		handleDelete,
+		handleFilterChange,
+		handleRetry,
+		handleOpenChange,
+		handleLicensed,
+		handleLoadMore
+	};
+	(0, react.useEffect)(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		const onThreadSelected = (event) => {
+			const detail = event.detail;
+			handlersRef.current.handleThreadSelected(detail.threadId);
+		};
+		const onNewThreadEvent = () => handlersRef.current.handleNewThread();
+		const onArchive = (event) => {
+			const detail = event.detail;
+			handlersRef.current.handleArchive(detail.threadId);
+		};
+		const onUnarchive = (event) => {
+			const detail = event.detail;
+			handlersRef.current.handleUnarchive(detail.threadId);
+		};
+		const onDelete = (event) => {
+			const detail = event.detail;
+			handlersRef.current.handleDelete(detail.threadId);
+		};
+		const onFilterChange = (_event) => {
+			handlersRef.current.handleFilterChange();
+		};
+		const onOpenChangeEvent = (event) => {
+			const detail = event.detail;
+			handlersRef.current.handleOpenChange(detail.open);
+		};
+		const onRetry = (event) => {
+			const detail = event.detail;
+			handlersRef.current.handleRetry(detail.scope);
+		};
+		const onLicensedEvent = () => handlersRef.current.handleLicensed();
+		const onLoadMore = () => handlersRef.current.handleLoadMore();
+		el.addEventListener("thread-selected", onThreadSelected);
+		el.addEventListener("new-thread", onNewThreadEvent);
+		el.addEventListener("archive", onArchive);
+		el.addEventListener("unarchive", onUnarchive);
+		el.addEventListener("delete", onDelete);
+		el.addEventListener("filter-change", onFilterChange);
+		el.addEventListener("open-change", onOpenChangeEvent);
+		el.addEventListener("retry", onRetry);
+		el.addEventListener("licensed", onLicensedEvent);
+		el.addEventListener("load-more", onLoadMore);
+		return () => {
+			el.removeEventListener("thread-selected", onThreadSelected);
+			el.removeEventListener("new-thread", onNewThreadEvent);
+			el.removeEventListener("archive", onArchive);
+			el.removeEventListener("unarchive", onUnarchive);
+			el.removeEventListener("delete", onDelete);
+			el.removeEventListener("filter-change", onFilterChange);
+			el.removeEventListener("open-change", onOpenChangeEvent);
+			el.removeEventListener("retry", onRetry);
+			el.removeEventListener("licensed", onLicensedEvent);
+			el.removeEventListener("load-more", onLoadMore);
+		};
+	}, [mounted]);
+	(0, react.useEffect)(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		el.threads = drawerThreads;
+	}, [drawerThreads, mounted]);
+	(0, react.useEffect)(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		el.loading = isLoading || licensePending;
+		el.error = listError ? listError.message : null;
+		el.activeThreadId = activeThreadId;
+		el.licensed = licensed || licensePending;
+		el.hasMore = hasMoreThreads;
+		el.fetchingMore = isFetchingMoreThreads;
+	}, [
+		isLoading,
+		listError,
+		activeThreadId,
+		licensed,
+		licensePending,
+		hasMoreThreads,
+		isFetchingMoreThreads,
+		mounted
+	]);
+	(0, react.useEffect)(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		el.open = drawerOpen;
+	}, [drawerOpen, mounted]);
+	(0, react.useEffect)(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		if (label !== void 0) el.label = label;
+	}, [label, mounted]);
+	(0, react.useEffect)(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		if (licenseUrl !== void 0) el.licenseUrl = licenseUrl;
+	}, [licenseUrl, mounted]);
+	const rowChildren = (0, react.useMemo)(() => {
+		if (!renderRow) return null;
+		return drawerThreads.map((drawerThread) => {
+			const fullThread = threads.find((t) => t.id === drawerThread.id);
+			if (!fullThread) return null;
+			const content = renderRow(fullThread);
+			if (content === null || content === void 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				slot: `row:${drawerThread.id}`,
+				children: content
+			}, drawerThread.id);
+		});
+	}, [
+		renderRow,
+		drawerThreads,
+		threads
+	]);
+	if (!mounted) return null;
+	return react.default.createElement(_copilotkit_web_components_threads_drawer.COPILOTKIT_THREADS_DRAWER_TAG, {
+		ref: elementRef,
+		"data-testid": dataTestId
+	}, rowChildren);
+}
+CopilotThreadsDrawer.displayName = "CopilotThreadsDrawer";
+
 //#endregion
 //#region src/v2/components/WildcardToolCallRender.tsx
 const WildcardToolCallRender = defineToolCallRenderer({
@@ -10166,6 +10793,7 @@ function CopilotKit({ children, ...props }) {
 	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, {
@@ -10174,7 +10802,7 @@ function CopilotKit({ children, ...props }) {
 			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,
@@ -10838,6 +11466,12 @@ Object.defineProperty(exports, 'CopilotSidebarView', {
     return CopilotSidebarView;
   }
 });
+Object.defineProperty(exports, 'CopilotThreadsDrawer', {
+  enumerable: true,
+  get: function () {
+    return CopilotThreadsDrawer;
+  }
+});
 Object.defineProperty(exports, 'DefaultCloseIcon', {
   enumerable: true,
   get: function () {
@@ -11126,4 +11760,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-BCJDP8qd.cjs.map
+//# sourceMappingURL=copilotkit-CdpDZi3i.cjs.map