@copilotkit/react-core 1.61.1 → 1.62.0

package/dist/{copilotkit-UY-H6Kx7.mjs → copilotkit-BtRkFsNR.mjs}

@@ -1,10 +1,10 @@
 import * as React$1 from "react";
 import React, { createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
-import { CopilotKitCore, CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent, ToolCallStatus, isRunCompletionAware, ɵcreateThreadStore, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
-import { HttpAgent } from "@ag-ui/client";
+import { CopilotKitCore, CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent, ToolCallStatus, isRunCompletionAware, ɵcreateThreadStore, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectIsMutating, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
+import { HttpAgent, buildResumeArray, isInterruptExpired, randomUUID } from "@ag-ui/client";
 import { extendTailwindMerge, twMerge } from "tailwind-merge";
-import { ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, Copy, Edit, Loader2, MessageCircle, Mic, Play, Plus, RefreshCw, Square, ThumbsDown, ThumbsUp, Upload, Volume2, X } from "lucide-react";
-import { A2UI_DEFAULT_DESIGN_GUIDELINES, A2UI_DEFAULT_GENERATION_GUIDELINES, COPILOT_CLOUD_API_URL, COPILOT_CLOUD_CHAT_URL, COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, ConfigurationError, CopilotKitAgentDiscoveryError, CopilotKitApiDiscoveryError, CopilotKitError, CopilotKitErrorCode, CopilotKitLowLevelError, CopilotKitRemoteEndpointDiscoveryError, DEFAULT_AGENT_ID, ErrorVisibility, MissingPublicApiKeyError, Severity, TranscriptionErrorCode, TranscriptionErrorCode as TranscriptionErrorCode$1, copyToClipboard, createLicenseContextValue, dataToUUID, exceedsMaxSize, formatFileSize, generateVideoThumbnail, getDocumentIcon, getModalityFromMimeType, getSourceUrl, matchesAcceptFilter, parseJson, partialJSONParse, randomId, randomUUID, readFileAsBase64, schemaToJsonSchema } from "@copilotkit/shared";
+import { ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, Copy, Edit, Loader2, MessageCircle, Mic, PanelLeftOpen, Play, Plus, RefreshCw, Square, ThumbsDown, ThumbsUp, Upload, Volume2, X } from "lucide-react";
+import { A2UI_DEFAULT_DESIGN_GUIDELINES, A2UI_DEFAULT_GENERATION_GUIDELINES, COPILOT_CLOUD_API_URL, COPILOT_CLOUD_CHAT_URL, COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, ConfigurationError, CopilotKitAgentDiscoveryError, CopilotKitApiDiscoveryError, CopilotKitError, CopilotKitErrorCode, CopilotKitLowLevelError, CopilotKitRemoteEndpointDiscoveryError, DEFAULT_AGENT_ID, ErrorVisibility, MissingPublicApiKeyError, Severity, TranscriptionErrorCode, TranscriptionErrorCode as TranscriptionErrorCode$1, copyToClipboard, createLicenseContextValue, dataToUUID, exceedsMaxSize, formatFileSize, generateVideoThumbnail, getDocumentIcon, getModalityFromMimeType, getSourceUrl, matchesAcceptFilter, parseJson, partialJSONParse, randomId, randomUUID as randomUUID$1, readFileAsBase64, schemaToJsonSchema } from "@copilotkit/shared";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -19,6 +19,7 @@ import { zodToJsonSchema } from "zod-to-json-schema";
 import { createPortal, flushSync } from "react-dom";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { COPILOTKIT_THREADS_DRAWER_TAG, defineCopilotKitThreadsDrawer } from "@copilotkit/web-components/threads-drawer";
 import ReactMarkdown from "react-markdown";
 
 //#region src/v2/lib/slots.tsx
@@ -144,6 +145,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 = createContext(null);
 const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, hasExplicitThreadId, isModalDefaultOpen }) => {
 	const parentConfig = useContext(CopilotChatConfiguration);
@@ -154,12 +174,22 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		...stableLabels
 	}), [stableLabels, parentConfig?.labels]);
 	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;
+	const threadIdPropIsAuthoritative = threadId !== void 0 && hasExplicitThreadId !== false;
+	const isThreadIdControlled = threadIdPropIsAuthoritative;
+	const [activeThreadOverride, setActiveThreadOverride] = useState(null);
 	const resolvedThreadId = useMemo(() => {
-		if (threadId) return threadId;
+		if (threadIdPropIsAuthoritative) return threadId;
+		if (activeThreadOverride) return activeThreadOverride.threadId;
 		if (parentConfig?.threadId) return parentConfig.threadId;
-		return randomUUID();
-	}, [threadId, parentConfig?.threadId]);
-	const resolvedHasExplicitThreadId = (hasExplicitThreadId !== void 0 ? hasExplicitThreadId : !!threadId) || !!parentConfig?.hasExplicitThreadId;
+		if (threadId) return threadId;
+		return randomUUID$1();
+	}, [
+		threadIdPropIsAuthoritative,
+		threadId,
+		parentConfig?.threadId,
+		activeThreadOverride
+	]);
+	const resolvedHasExplicitThreadId = (threadIdPropIsAuthoritative ? true : activeThreadOverride?.explicit ?? hasExplicitThreadId ?? false) || !!parentConfig?.hasExplicitThreadId;
 	const [internalModalOpen, setInternalModalOpen] = useState(isModalDefaultOpen ?? true);
 	const hasExplicitDefault = isModalDefaultOpen !== void 0;
 	const setAndSync = useCallback((open) => {
@@ -178,20 +208,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] = useState(false);
+	const [ownDrawerCount, setOwnDrawerCount] = useState(0);
+	const modalCloseRef = useRef(() => {});
+	modalCloseRef.current = resolvedSetModalOpen;
+	const registeredModalClosersRef = useRef([]);
+	const ownRegisterModalCloser = useCallback((closeModal) => {
+		registeredModalClosersRef.current.push(closeModal);
+		return () => {
+			registeredModalClosersRef.current = registeredModalClosersRef.current.filter((entry) => entry !== closeModal);
+		};
+	}, []);
+	const ownSetDrawerOpen = useCallback((open) => {
+		setOwnDrawerOpen(open);
+		if (open && isMobileViewport()) {
+			const registered = registeredModalClosersRef.current;
+			(registered.length > 0 ? registered[registered.length - 1] : modalCloseRef.current)(false);
+		}
+	}, []);
+	const ownRegisterDrawer = 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;
+	useEffect(() => {
+		if (!hasExplicitDefault) return;
+		return resolvedRegisterModalCloser(resolvedSetModalOpen);
+	}, [
+		hasExplicitDefault,
+		resolvedRegisterModalCloser,
+		resolvedSetModalOpen
+	]);
+	const isThreadIdControlledRef = useRef(isThreadIdControlled);
+	isThreadIdControlledRef.current = isThreadIdControlled;
+	const ownSetActiveThreadId = useCallback((id, options) => {
+		setActiveThreadOverride({
+			threadId: id,
+			explicit: options?.explicit ?? true
+		});
+	}, []);
+	const ownStartNewThread = useCallback(() => {
+		setActiveThreadOverride({
+			threadId: randomUUID$1(),
+			explicit: false
+		});
+	}, []);
+	const parentSetActiveThreadId = parentConfig?.setActiveThreadId;
+	const parentStartNewThread = parentConfig?.startNewThread;
+	const resolvedSetActiveThreadId = 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 = 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 = useCallback((open) => {
+		if (open && isMobileViewport()) resolvedSetDrawerOpen(false);
+		resolvedSetModalOpen(open);
+	}, [resolvedSetModalOpen, resolvedSetDrawerOpen]);
 	const configurationValue = 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__ */ jsx(CopilotChatConfiguration.Provider, {
 		value: configurationValue,
@@ -1112,7 +1235,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		},
 		...props,
 		children: [/* @__PURE__ */ 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]
 	});
@@ -1421,353 +1544,75 @@ const LicenseContext = createContext({
 const useLicenseContext = () => useContext(LicenseContext);
 
 //#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-function defineToolCallRenderer(def) {
-	const argsSchema = def.name === "*" && !def.args ? 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.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
+	const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
+	const toolName = toolCall.function.name;
+	if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.Complete,
+		result: toolMessage.content
+	});
+	else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.Executing,
+		result: void 0
+	});
+	else return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: 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;
-	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 ?? DEFAULT_AGENT_ID;
+	const renderToolCalls = useSyncExternalStore((callback) => {
+		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
+	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
+	return 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__ */ 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 ToolCallStatus.Complete: return "complete";
-		case ToolCallStatus.Executing: return "executing";
-		case 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__ */ 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] = 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", {
-					className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
-					children: [
-						/* @__PURE__ */ 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__ */ jsx("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								d: "M8.25 4.5l7.5 7.5-7.5 7.5"
-							})
-						}),
-						/* @__PURE__ */ jsx("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
-						/* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
-				className: "cpk:mt-3 cpk:grid cpk:gap-3",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
-					children: "Arguments"
-				}), /* @__PURE__ */ 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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
-					children: "Result"
-				}), /* @__PURE__ */ 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.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
-	const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
-	const toolName = toolCall.function.name;
-	if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: ToolCallStatus.Complete,
-		result: toolMessage.content
-	});
-	else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: ToolCallStatus.Executing,
-		result: void 0
-	});
-	else return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: 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 ?? DEFAULT_AGENT_ID;
-	const renderToolCalls = useSyncExternalStore((callback) => {
-		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
-	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
-	return useCallback(({ toolCall, toolMessage }) => {
-		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
-		return /* @__PURE__ */ 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__ */ 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 }) => {
@@ -3248,7 +3093,7 @@ const A2UISurfaceContentSchema = 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";
@@ -3324,6 +3169,7 @@ function createA2UIMessageRenderer(options) {
 					agent,
 					copilotkit,
 					catalog,
+					onAction,
 					onReady: markSurfaceReady
 				}, surfaceId))
 			});
@@ -3344,29 +3190,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__ */ jsx("div", {
 		className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
 		children: /* @__PURE__ */ jsxs(A2UIProvider, {
-			onAction: 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: useCallback((message) => runA2UIAction({
+				message,
+				agent,
+				copilotkit,
+				onAction
+			}), [
+				agent,
+				copilotkit,
+				onAction
+			]),
 			theme,
 			catalog,
 			children: [/* @__PURE__ */ jsx(SurfaceMessageProcessor, {
@@ -3437,6 +3314,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 ? 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
 /**
@@ -3531,6 +3420,10 @@ function A2UICatalogContext({ catalog, includeSchema }) {
 
 //#endregion
 //#region src/v2/providers/CopilotKitProvider.tsx
+const zodToJsonSchemaAdapter = (schema, options) => {
+	const refStrategy = options?.$refStrategy;
+	return 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({});
@@ -3561,6 +3454,8 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 	const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = useState(false);
 	const [runtimeOpenGenUIEnabled, setRuntimeOpenGenUIEnabled] = useState(false);
 	const openGenUIActive = runtimeOpenGenUIEnabled || !!openGenerativeUI;
+	const a2uiCatalogProvided = !!a2ui?.catalog;
+	const a2uiActive = runtimeA2UIEnabled || a2uiCatalogProvided;
 	const [runtimeLicenseStatus, setRuntimeLicenseStatus] = useState(void 0);
 	useEffect(() => {
 		if (typeof window === "undefined") return;
@@ -3591,7 +3486,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 ?? viewerTheme,
 			catalog: a2ui?.catalog,
 			loadingComponent: a2ui?.loadingComponent,
@@ -3599,7 +3494,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		}));
 		return renderers;
 	}, [
-		runtimeA2UIEnabled,
+		a2uiActive,
 		openGenUIActive,
 		a2ui
 	]);
@@ -3786,7 +3681,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);
 	}, [
@@ -3795,6 +3693,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		mergedHeaders,
 		credentials,
 		properties,
+		a2uiCatalogProvided,
 		mergedAgents,
 		useSingleEndpoint,
 		debug
@@ -3842,7 +3741,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		return JSON.stringify(sandboxFunctionsList.map((fn) => ({
 			name: fn.name,
 			description: fn.description,
-			parameters: schemaToJsonSchema(fn.parameters, { zodToJsonSchema })
+			parameters: schemaToJsonSchema(fn.parameters, { zodToJsonSchema: zodToJsonSchemaAdapter })
 		})));
 	}, [sandboxFunctionsList]);
 	useLayoutEffect(() => {
@@ -3863,7 +3762,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		copilotkit,
 		executingToolCallIds
 	}), [copilotkit, executingToolCallIds]);
-	const licenseContextValue = useMemo(() => createLicenseContextValue(null), []);
+	const licenseContextValue = useMemo(() => createLicenseContextValue(runtimeLicenseStatus), [runtimeLicenseStatus]);
 	return /* @__PURE__ */ jsx(SandboxFunctionsContext.Provider, {
 		value: sandboxFunctionsList,
 		children: /* @__PURE__ */ jsx(CopilotKitContext.Provider, {
@@ -3871,8 +3770,8 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 			children: /* @__PURE__ */ jsxs(LicenseContext.Provider, {
 				value: licenseContextValue,
 				children: [
-					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UIBuiltInToolCallRenderer, {}),
-					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UICatalogContext, {
+					a2uiActive && /* @__PURE__ */ jsx(A2UIBuiltInToolCallRenderer, {}),
+					a2uiActive && /* @__PURE__ */ jsx(A2UICatalogContext, {
 						catalog: a2ui?.catalog,
 						includeSchema: a2ui?.includeSchema
 					}),
@@ -3950,16 +3849,20 @@ function useRenderActivityMessage() {
 	const renderActivityMessage = 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__ */ jsx(Component, {
 			activityType: message.activityType,
-			content: parseResult.data,
+			content: parseResult.value,
 			message,
 			agent
 		}, message.id);
@@ -3973,106 +3876,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;
-	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;
+	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__ */ 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;
+	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 === ToolCallStatus.InProgress) return config.render({
+					...props,
+					parameters: props.args
+				});
+				if (props.status === 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 ToolCallStatus.Complete: return "complete";
+		case ToolCallStatus.Executing: return "executing";
+		case 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__ */ 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] = 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", {
+					className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
+					children: [
+						/* @__PURE__ */ 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__ */ jsx("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+							})
+						}),
+						/* @__PURE__ */ jsx("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
+						/* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
+				className: "cpk:mt-3 cpk:grid cpk:gap-3",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
+					children: "Arguments"
+				}), /* @__PURE__ */ 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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
+					children: "Result"
+				}), /* @__PURE__ */ 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__ */ jsx(Component, { ...args });
-		},
-		agentId: config.agentId,
-		followUp: config.followUp
-	}, deps);
+	}
 }
 
 //#endregion
@@ -4195,7 +4368,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 		if (isRuntimeConfigured && (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
 			const cached = provisionalAgentCache.current.get(agentId);
 			if (cached) {
-				cached.headers = { ...copilotkit.headers };
+				copilotkit.applyHeadersToAgent(cached);
 				return cached;
 			}
 			const provisional = new ProxiedCopilotRuntimeAgent({
@@ -4204,14 +4377,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 === CopilotKitCoreRuntimeConnectionStatus.Error) {
 			const cached = provisionalAgentCache.current.get(agentId);
 			if (cached) {
-				cached.headers = { ...copilotkit.headers };
+				copilotkit.applyHeadersToAgent(cached);
 				return cached;
 			}
 			const provisional = new ProxiedCopilotRuntimeAgent({
@@ -4220,7 +4393,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;
 		}
@@ -4271,7 +4444,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 		updateFlags
 	]);
 	useEffect(() => {
-		if (agent instanceof HttpAgent) agent.headers = { ...copilotkit.headers };
+		if (agent instanceof HttpAgent) copilotkit.applyHeadersToAgent(agent);
 	}, [agent, JSON.stringify(copilotkit.headers)]);
 	const chatConfig = useCopilotChatConfiguration();
 	const configThreadId = chatConfig?.threadId;
@@ -4548,114 +4721,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.
+* Handles agent interrupts with optional filtering, preprocessing, and resume behavior.
 *
-* The hook listens to custom events on the active agent, stores interrupt payloads per run,
-* and surfaces a render callback once the run finalizes. Call `resolve` from your UI to resume
-* execution with user-provided data.
-*
-* - `renderInChat: true` (default): the element is published into `<CopilotChat>` and this hook returns `void`.
-* - `renderInChat: false`: the hook returns the interrupt element so you can place it anywhere in your component tree.
-*
-* `event.value` is typed as `any` since the interrupt payload shape depends on your agent.
-* Type-narrow it in your callbacks (e.g. `handler`, `enabled`, `render`) as needed.
-*
-* @typeParam TResult - Inferred from `handler` return type. Exposed as `result` in `render`.
-* @param config - Interrupt configuration (renderer, optional handler/filter, and render mode).
-* @returns When `renderInChat` is `false`, returns the interrupt element (or `null` when idle).
-* Otherwise returns `void` and publishes the element into chat. In `render`, `result` is always
-* either the handler's resolved return value or `null` (including when no handler is provided,
-* when filtering skips the interrupt, or when handler execution fails).
-*
-* @example
-* ```tsx
-* import { useInterrupt } from "@copilotkit/react-core/v2";
-*
-* function InterruptUI() {
-*   useInterrupt({
-*     render: ({ event, resolve }) => (
-*       <div>
-*         <p>{event.value.question}</p>
-*         <button onClick={() => resolve({ approved: true })}>Approve</button>
-*         <button onClick={() => resolve({ approved: false })}>Reject</button>
-*       </div>
-*     ),
-*   });
+* 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`.
 *
-*   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] = useState(null);
-	const pendingEventRef = useRef(pendingEvent);
-	pendingEventRef.current = pendingEvent;
+	const [pending, setPending] = useState(null);
+	const pendingRef = useRef(pending);
+	pendingRef.current = pending;
 	const [handlerResult, setHandlerResult] = useState(null);
+	const responsesRef = useRef({});
 	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 = useCallback(async (response) => {
+	const submitStandardIfComplete = useCallback(async (interrupts) => {
+		if (!interrupts.every((i) => responsesRef.current[i.id])) return;
+		const expired = interrupts.find((i) => isInterruptExpired(i));
+		if (expired) {
+			console.error(`[CopilotKit] useInterrupt: interrupt ${expired.id} expired at ${expired.expiresAt}; not resuming.`);
+			responsesRef.current = {};
+			setPending(null);
+			return;
+		}
+		const resume = 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: 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 = 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 = 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 = useRef(config.render);
 	renderRef.current = config.render;
 	const enabledRef = useRef(config.enabled);
@@ -4664,6 +4888,8 @@ function useInterrupt(config) {
 	handlerRef.current = config.handler;
 	const resolveRef = useRef(resolve);
 	resolveRef.current = resolve;
+	const cancelRef = useRef(cancel);
+	cancelRef.current = cancel;
 	const isEnabled = (event) => {
 		const predicate = enabledRef.current;
 		if (!predicate) return true;
@@ -4675,11 +4901,12 @@ function useInterrupt(config) {
 		}
 	};
 	useEffect(() => {
-		if (!pendingEvent) {
+		if (!pending) {
 			setHandlerResult(null);
 			return;
 		}
-		if (!isEnabled(pendingEvent)) {
+		const legacyEvent = toLegacyEvent(pending);
+		if (!isEnabled(legacyEvent)) {
 			setHandlerResult(null);
 			return;
 		}
@@ -4692,8 +4919,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);
@@ -4712,19 +4942,24 @@ function useInterrupt(config) {
 		return () => {
 			cancelled = true;
 		};
-	}, [pendingEvent]);
+	}, [pending]);
 	const element = 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
 	]);
 	useEffect(() => {
 		if (config.renderInChat === false) return;
@@ -4749,7 +4984,7 @@ function useThreadStoreSelector(store, selector) {
 	return useSyncExternalStore(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.
@@ -4760,9 +4995,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.
@@ -4792,7 +5027,7 @@ function useThreadStoreSelector(store, selector) {
 * }
 * ```
 */
-function useThreads$1({ agentId, includeArchived, limit }) {
+function useThreads$1({ agentId, includeArchived, limit, enabled = true }) {
 	const { copilotkit } = useCopilotKit();
 	const [store] = useState(() => ɵcreateThreadStore({ fetch: globalThis.fetch }));
 	const coreThreads = useThreadStoreSelector(store, ɵselectThreads);
@@ -4809,6 +5044,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 	const storeError = useThreadStoreSelector(store, ɵselectThreadsError);
 	const hasMoreThreads = useThreadStoreSelector(store, ɵselectHasNextPage);
 	const isFetchingMoreThreads = useThreadStoreSelector(store, ɵselectIsFetchingNextPage);
+	const isMutating = useThreadStoreSelector(store, ɵselectIsMutating);
 	const headersKey = useMemo(() => {
 		return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 	}, [copilotkit.headers]);
@@ -4829,9 +5065,16 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		return /* @__PURE__ */ new Error("Thread mutations are not available on this CopilotKit runtime");
 	}, [threadMutationsSupported]);
 	const [hasDispatchedContext, setHasDispatchedContext] = 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] = useState(false);
+	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;
 	useEffect(() => {
 		store.start();
 		return () => {
@@ -4839,6 +5082,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		};
 	}, [store]);
 	useEffect(() => {
+		if (!enabled) return;
 		copilotkit.registerThreadStore(agentId, store);
 		return () => {
 			copilotkit.unregisterThreadStore(agentId);
@@ -4846,9 +5090,15 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 	}, [
 		copilotkit,
 		agentId,
-		store
+		store,
+		enabled
 	]);
 	useEffect(() => {
+		if (!enabled) {
+			store.setContext(null);
+			setHasDispatchedContext(false);
+			return;
+		}
 		if (!copilotkit.runtimeUrl) {
 			store.setContext(null);
 			setHasDispatchedContext(false);
@@ -4872,6 +5122,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		setHasDispatchedContext(true);
 	}, [
 		store,
+		enabled,
 		copilotkit.runtimeUrl,
 		runtimeStatus,
 		headersKey,
@@ -4889,16 +5140,25 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 	}, [threadMutationsError]);
 	const renameThread = useMemo(() => guardMutation((threadId, name) => store.renameThread(threadId, name)), [store, guardMutation]);
 	const archiveThread = useMemo(() => guardMutation((threadId) => store.archiveThread(threadId)), [store, guardMutation]);
+	const unarchiveThread = useMemo(() => guardMutation((threadId) => store.unarchiveThread(threadId)), [store, guardMutation]);
 	const deleteThread = useMemo(() => guardMutation((threadId) => store.deleteThread(threadId)), [store, guardMutation]);
 	return {
 		threads,
 		isLoading,
 		error,
+		listError,
 		hasMoreThreads,
 		isFetchingMoreThreads,
+		isMutating,
 		fetchMoreThreads: useCallback(() => store.fetchNextPage(), [store]),
+		refetchThreads: useCallback(() => store.refetchThreads(), [store]),
+		startNewThread: useCallback(() => {
+			setConfigErrorDismissed(true);
+			store.startNewThread();
+		}, [store]),
 		renameThread,
 		archiveThread,
+		unarchiveThread,
 		deleteThread
 	};
 }
@@ -4932,7 +5192,7 @@ async function recordAnnotation(args) {
 	const body = {
 		type,
 		threadId,
-		clientEventId: args.clientEventId ?? randomUUID(),
+		clientEventId: args.clientEventId ?? randomUUID$1(),
 		...payload !== void 0 ? { payload } : {},
 		...occurredAt !== void 0 ? { occurredAt } : {}
 	};
@@ -5110,7 +5370,7 @@ function useAttachments({ config }) {
 				continue;
 			}
 			const modality = getModalityFromMimeType(file.type);
-			const placeholderId = randomUUID();
+			const placeholderId = randomUUID$1();
 			const placeholder = {
 				id: placeholderId,
 				type: modality,
@@ -6082,7 +6342,7 @@ const DefaultContainer = React.forwardRef(function DefaultContainer({ className,
 		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
 	});
 });
@@ -7187,7 +7447,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "cpk:max-w-3xl cpk:mx-auto",
 				children: [BoundMessageView, hasSuggestions ? /* @__PURE__ */ 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]
 			})
@@ -7230,7 +7490,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__ */ jsx(DropOverlay, {}), BoundWelcomeScreen]
 		});
@@ -7252,7 +7512,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__ */ jsx(DropOverlay, {}),
@@ -7291,7 +7551,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 						minHeight: 0
 					},
 					children: /* @__PURE__ */ 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
 					})
 				}),
@@ -7324,7 +7584,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 						...props,
 						children: [/* @__PURE__ */ 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__ */ jsx("div", {
 							ref: spacerRef,
@@ -7386,7 +7646,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		if (!hasMounted) return /* @__PURE__ */ 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__ */ 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
 			})
 		});
@@ -7401,7 +7661,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 					children: [
 						/* @__PURE__ */ 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,
@@ -7621,7 +7881,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const existingConfig = useCopilotChatConfiguration();
 	const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID;
 	const providedThreadId = threadId ?? existingConfig?.threadId;
-	const resolvedThreadId = useMemo(() => providedThreadId ?? randomUUID(), [providedThreadId]);
+	const resolvedThreadId = useMemo(() => providedThreadId ?? randomUUID$1(), [providedThreadId]);
 	const hasExplicitThreadId = !!threadId || !!existingConfig?.hasExplicitThreadId;
 	const { agent } = useAgent({
 		agentId: resolvedAgentId,
@@ -7665,9 +7925,17 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
 	const [lastConnectedThreadId, setLastConnectedThreadId] = useState(null);
 	const isConnecting = hasExplicitThreadId && lastConnectedThreadId !== resolvedThreadId;
+	const previousThreadIdRef = useRef(null);
+	const hasExplicitThreadIdRef = useRef(hasExplicitThreadId);
+	hasExplicitThreadIdRef.current = hasExplicitThreadId;
 	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 HttpAgent) agent.abortController = connectAbortController;
@@ -7681,6 +7949,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);
@@ -7696,8 +7965,10 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		hasExplicitThreadId
 	]);
 	const waitForActiveRunToSettle = useCallback(async () => {
-		if (agent.isRunning && isRunCompletionAware(agent) && agent.activeRunCompletionPromise) try {
-			await agent.activeRunCompletionPromise;
+		const maybeAware = agent;
+		const activeRunCompletionPromise = 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);
 		}
@@ -7732,12 +8003,12 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 				}
 			});
 			agent.addMessage({
-				id: randomUUID(),
+				id: randomUUID$1(),
 				role: "user",
 				content: contentParts
 			});
 		} else agent.addMessage({
-			id: randomUUID(),
+			id: randomUUID$1(),
 			role: "user",
 			content: value
 		});
@@ -7754,7 +8025,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const handleSelectSuggestion = useCallback(async (suggestion) => {
 		await waitForActiveRunToSettle();
 		agent.addMessage({
-			id: randomUUID(),
+			id: randomUUID$1(),
 			role: "user",
 			content: suggestion.message
 		});
@@ -8029,18 +8300,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] = useState(false);
+	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 = useCallback(() => {
 		configuration?.setModalOpen?.(false);
 	}, [configuration]);
+	const handleToggleDrawer = 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
 	});
@@ -8053,8 +8352,8 @@ function CopilotModalHeader({ title, titleContent, closeButton, children, classN
 			className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "cpk:flex-1",
-					"aria-hidden": "true"
+					className: "cpk:flex cpk:flex-1 cpk:justify-start",
+					children: BoundDrawerLauncher ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center",
@@ -8087,9 +8386,21 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 			"aria-hidden": "true"
 		})
 	});
+	_CopilotModalHeader.DrawerLauncher = ({ className, ...props }) => /* @__PURE__ */ 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__ */ jsx(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
@@ -8447,6 +8758,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 = useMemo(() => threads.map(toDrawerThread), [threads]);
+	const elementRef = useRef(null);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		defineCopilotKitThreadsDrawer();
+		setMounted(true);
+	}, []);
+	const registerDrawer = configuration?.registerDrawer;
+	useEffect(() => {
+		if (!registerDrawer) return;
+		return registerDrawer();
+	}, [registerDrawer]);
+	const [localDrawerOpen, setLocalDrawerOpen] = useState(false);
+	const drawerOpen = configuration ? configuration.drawerOpen : localDrawerOpen;
+	const setDrawerOpen = configuration ? configuration.setDrawerOpen : setLocalDrawerOpen;
+	const setActiveThreadId = configuration?.setActiveThreadId;
+	const startNewThreadConfig = configuration?.startNewThread;
+	const handleThreadSelected = useCallback((threadId) => {
+		if (onThreadSelect) onThreadSelect(threadId);
+		else setActiveThreadId?.(threadId, { explicit: true });
+		findChatInput(elementRef.current)?.focus();
+	}, [onThreadSelect, setActiveThreadId]);
+	const handleNewThread = useCallback(() => {
+		startNewThread();
+		if (onNewThread) onNewThread();
+		else startNewThreadConfig?.();
+	}, [
+		startNewThread,
+		onNewThread,
+		startNewThreadConfig
+	]);
+	const handleArchive = useCallback((threadId) => {
+		archiveThread(threadId).catch((err) => {
+			console.error("CopilotThreadsDrawer: archiveThread failed", err);
+		});
+	}, [archiveThread]);
+	const handleUnarchive = useCallback((threadId) => {
+		unarchiveThread(threadId).catch((err) => {
+			console.error("CopilotThreadsDrawer: unarchiveThread failed", err);
+		});
+	}, [unarchiveThread]);
+	const handleDelete = 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 = useCallback(() => {
+		refetchThreads();
+	}, [refetchThreads]);
+	const handleRetry = useCallback((scope) => {
+		if (scope === "fetch-more") fetchMoreThreads();
+		else refetchThreads();
+	}, [fetchMoreThreads, refetchThreads]);
+	const handleOpenChange = useCallback((open) => {
+		setDrawerOpen(open);
+	}, [setDrawerOpen]);
+	const handleLicensed = useCallback(() => {
+		onLicensed?.();
+	}, [onLicensed]);
+	const handleLoadMore = useCallback(() => {
+		fetchMoreThreads();
+	}, [fetchMoreThreads]);
+	const handlersRef = useRef({
+		handleThreadSelected,
+		handleNewThread,
+		handleArchive,
+		handleUnarchive,
+		handleDelete,
+		handleFilterChange,
+		handleRetry,
+		handleOpenChange,
+		handleLicensed,
+		handleLoadMore
+	});
+	handlersRef.current = {
+		handleThreadSelected,
+		handleNewThread,
+		handleArchive,
+		handleUnarchive,
+		handleDelete,
+		handleFilterChange,
+		handleRetry,
+		handleOpenChange,
+		handleLicensed,
+		handleLoadMore
+	};
+	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]);
+	useEffect(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		el.threads = drawerThreads;
+	}, [drawerThreads, mounted]);
+	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
+	]);
+	useEffect(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		el.open = drawerOpen;
+	}, [drawerOpen, mounted]);
+	useEffect(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		if (label !== void 0) el.label = label;
+	}, [label, mounted]);
+	useEffect(() => {
+		const el = elementRef.current;
+		if (!el) return;
+		if (licenseUrl !== void 0) el.licenseUrl = licenseUrl;
+	}, [licenseUrl, mounted]);
+	const rowChildren = 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__ */ jsx("div", {
+				slot: `row:${drawerThread.id}`,
+				children: content
+			}, drawerThread.id);
+		});
+	}, [
+		renderRow,
+		drawerThreads,
+		threads
+	]);
+	if (!mounted) return null;
+	return React.createElement(COPILOTKIT_THREADS_DRAWER_TAG, {
+		ref: elementRef,
+		"data-testid": dataTestId
+	}, rowChildren);
+}
+CopilotThreadsDrawer.displayName = "CopilotThreadsDrawer";
+
 //#endregion
 //#region src/v2/components/WildcardToolCallRender.tsx
 const WildcardToolCallRender = defineToolCallRenderer({
@@ -9675,7 +10302,7 @@ function useCoAgentStateRenders() {
 //#region src/context/threads-context.tsx
 const ThreadsContext = createContext(void 0);
 function ThreadsProvider({ children, threadId: explicitThreadId }) {
-	const [internalThreadId, setInternalThreadId] = useState(() => randomUUID());
+	const [internalThreadId, setInternalThreadId] = useState(() => randomUUID$1());
 	const [internalIsExplicit, setInternalIsExplicit] = useState(false);
 	const threadId = explicitThreadId ?? internalThreadId;
 	const isThreadIdExplicit = explicitThreadId != null || internalIsExplicit;
@@ -10136,6 +10763,7 @@ function CopilotKit({ children, ...props }) {
 	const showInspector = shouldShowDevConsole(props.enableInspector);
 	const publicApiKey = props.publicApiKey || props.publicLicenseKey;
 	const renderArr = useMemo(() => [{ render: CoAgentStateRenderBridge }], []);
+	const { onError: _onError, ...v2Props } = props;
 	return /* @__PURE__ */ jsx(ToastProvider, {
 		enabled,
 		children: /* @__PURE__ */ jsx(CopilotErrorBoundary, {
@@ -10144,7 +10772,7 @@ function CopilotKit({ children, ...props }) {
 			children: /* @__PURE__ */ jsx(ThreadsProvider, {
 				threadId: props.threadId,
 				children: /* @__PURE__ */ jsx(CopilotKitProvider, {
-					...props,
+					...v2Props,
 					showDevConsole: showInspector,
 					renderCustomMessages: renderArr,
 					useSingleEndpoint: props.useSingleEndpoint ?? true,
@@ -10443,7 +11071,7 @@ function CopilotKitInternal(cpkProps) {
 		});
 	}, [setAuthStates]);
 	const handleSetRegisteredActions = useCallback((actionConfig) => {
-		const key = actionConfig.action.name || randomUUID();
+		const key = actionConfig.action.name || randomUUID$1();
 		setRegisteredActionConfigs((prev) => {
 			const newMap = new Map(prev);
 			newMap.set(key, actionConfig);
@@ -10628,5 +11256,5 @@ function validateProps(props) {
 }
 
 //#endregion
-export { useAgent as $, INTELLIGENCE_TURN_HEAD as A, CopilotChatToolCallsView as B, CopilotChatToggleButton as C, useCopilotChatConfiguration as Ct, CopilotChatView_default as D, CopilotChat as E, CopilotChatSuggestionPill as F, useLearnFromUserAction as G, useLearningContainers as H, CopilotChatReasoningMessage_default as I, useConfigureSuggestions as J, useThreads$1 as K, CopilotChatUserMessage_default as L, getIntelligenceTurnAnchors as M, IntelligenceIndicatorView as N, CopilotChatAttachmentQueue as O, CopilotChatSuggestionView as P, UseAgentUpdate as Q, CopilotChatAttachmentRenderer as R, CopilotModalHeader as S, CopilotChatConfigurationProvider as St, DefaultOpenIcon as T, useAttachments as U, useLearningContainersInCurrentThread as V, useLearnFromUserActionInCurrentThread as W, useAgentContext as X, useSuggestions as Y, useCapabilities as Z, WildcardToolCallRender as _, useCopilotKit as _t, ThreadsProvider as a, CopilotKitProvider as at, CopilotPopupView as b, AudioRecorderError as bt, CoAgentStateRendersProvider as c, useSandboxFunctions as ct, shouldShowDevConsole as d, MCPAppsActivityType as dt, useHumanInTheLoop as et, useToast as f, CopilotKitInspector as ft, useCopilotContext as g, defineToolCallRenderer as gt, CopilotContext as h, useRenderTool as ht, ThreadsContext as i, useRenderCustomMessages as it, IntelligenceIndicator as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, MCPAppsActivityContentSchema as lt, useCopilotMessagesContext as m, useDefaultRenderTool as mt, defaultCopilotContextCategories as n, useFrontendTool as nt, useThreads as o, createA2UIMessageRenderer as ot, CopilotMessagesContext as p, useRenderToolCall as pt, useInterrupt as q, CoAgentStateRenderBridge as r, useRenderActivityMessage as rt, CoAgentStateRendersContext as s, SandboxFunctionsContext as st, CopilotKit as t, useComponent as tt, useAsyncCallback as u, MCPAppsActivityRenderer as ut, CopilotPopup as v, CopilotKitCoreReact as vt, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotChatAudioRecorder as xt, CopilotSidebar as y, CopilotChatInput_default as yt, CopilotChatAssistantMessage_default as z };
-//# sourceMappingURL=copilotkit-UY-H6Kx7.mjs.map
+export { UseAgentUpdate as $, CopilotChatMessageView as A, CopilotChatAssistantMessage_default as B, CopilotModalHeader as C, CopilotChatConfigurationProvider as Ct, CopilotChat as D, DefaultOpenIcon as E, CopilotChatSuggestionView as F, useLearnFromUserActionInCurrentThread as G, useLearningContainersInCurrentThread as H, CopilotChatSuggestionPill as I, useInterrupt as J, useLearnFromUserAction as K, CopilotChatReasoningMessage_default as L, IntelligenceIndicator as M, getIntelligenceTurnAnchors as N, CopilotChatView_default as O, IntelligenceIndicatorView as P, useCapabilities as Q, CopilotChatUserMessage_default as R, CopilotSidebarView as S, CopilotChatAudioRecorder as St, DefaultCloseIcon as T, useLearningContainers as U, CopilotChatToolCallsView as V, useAttachments as W, useSuggestions as X, useConfigureSuggestions as Y, useAgentContext as Z, WildcardToolCallRender as _, useRenderToolCall as _t, ThreadsProvider as a, useFrontendTool as at, CopilotSidebar as b, CopilotChatInput_default as bt, CoAgentStateRendersProvider as c, CopilotKitProvider as ct, shouldShowDevConsole as d, SandboxFunctionsContext as dt, useAgent as et, useToast as f, useSandboxFunctions as ft, useCopilotContext as g, CopilotKitInspector as gt, CopilotContext as h, MCPAppsActivityType as ht, ThreadsContext as i, useComponent as it, INTELLIGENCE_TURN_HEAD as j, CopilotChatAttachmentQueue as k, useCoAgentStateRenders as l, defineToolCallRenderer as lt, useCopilotMessagesContext as m, MCPAppsActivityRenderer as mt, defaultCopilotContextCategories as n, useDefaultRenderTool as nt, useThreads as o, useRenderActivityMessage as ot, CopilotMessagesContext as p, MCPAppsActivityContentSchema as pt, useThreads$1 as q, CoAgentStateRenderBridge as r, useRenderTool as rt, CoAgentStateRendersContext as s, useRenderCustomMessages as st, CopilotKit as t, useHumanInTheLoop as tt, useAsyncCallback as u, createA2UIMessageRenderer as ut, CopilotThreadsDrawer as v, useCopilotKit as vt, CopilotChatToggleButton as w, useCopilotChatConfiguration as wt, CopilotPopupView as x, AudioRecorderError as xt, CopilotPopup as y, CopilotKitCoreReact as yt, CopilotChatAttachmentRenderer as z };
+//# sourceMappingURL=copilotkit-BtRkFsNR.mjs.map