@copilotkit/react-core 1.61.2 → 1.62.0

package/dist/v2/index.umd.js

@@ -1,10 +1,10 @@
 "use client";
 
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('@tanstack/react-virtual'), require('use-stick-to-bottom')) :
-  typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', '@tanstack/react-virtual', 'use-stick-to-bottom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.LitLabsReact,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global._tanstack_react_virtual,global.useStickToBottom));
-})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _lit_labs_react, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, _tanstack_react_virtual, use_stick_to_bottom) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('@tanstack/react-virtual'), require('use-stick-to-bottom'), require('@copilotkit/web-components/threads-drawer')) :
+  typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', '@tanstack/react-virtual', 'use-stick-to-bottom', '@copilotkit/web-components/threads-drawer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.LitLabsReact,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global._tanstack_react_virtual,global.useStickToBottom,global._copilotkit_web_components_threads_drawer));
+})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _lit_labs_react, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, _tanstack_react_virtual, use_stick_to_bottom, _copilotkit_web_components_threads_drawer) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -160,6 +160,25 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		modalHeaderTitle: "CopilotKit Chat",
 		welcomeMessageText: "How can I help you today?"
 	};
+	/**
+	* Mobile breakpoint below which the chat modal and the thread-list drawer are
+	* mutually exclusive. At or above this width both surfaces may coexist. This
+	* mirrors the `(max-width: 767px)` / `(min-width: 768px)` split already used by
+	* CopilotChatInput and CopilotSidebarView.
+	*/
+	const MOBILE_MAX_WIDTH_PX = 767;
+	/**
+	* Reports whether the current viewport is in the mobile range (`<768px`), where
+	* the chat modal and drawer must not be open simultaneously. SSR-safe and
+	* defensive against environments without `matchMedia` (treated as desktop, so
+	* no mutual-exclusion constraint is applied).
+	*
+	* @returns `true` when the viewport is mobile-width, `false` otherwise.
+	*/
+	function isMobileViewport() {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+		return window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH_PX}px)`).matches;
+	}
 	const CopilotChatConfiguration = (0, react.createContext)(null);
 	const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, hasExplicitThreadId, isModalDefaultOpen }) => {
 		const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
@@ -170,12 +189,22 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			...stableLabels
 		}), [stableLabels, parentConfig?.labels]);
 		const resolvedAgentId = agentId ?? parentConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+		const threadIdPropIsAuthoritative = threadId !== void 0 && hasExplicitThreadId !== false;
+		const isThreadIdControlled = threadIdPropIsAuthoritative;
+		const [activeThreadOverride, setActiveThreadOverride] = (0, react.useState)(null);
 		const resolvedThreadId = (0, react.useMemo)(() => {
-			if (threadId) return threadId;
+			if (threadIdPropIsAuthoritative) return threadId;
+			if (activeThreadOverride) return activeThreadOverride.threadId;
 			if (parentConfig?.threadId) return parentConfig.threadId;
+			if (threadId) return threadId;
 			return (0, _copilotkit_shared.randomUUID)();
-		}, [threadId, parentConfig?.threadId]);
-		const resolvedHasExplicitThreadId = (hasExplicitThreadId !== void 0 ? hasExplicitThreadId : !!threadId) || !!parentConfig?.hasExplicitThreadId;
+		}, [
+			threadIdPropIsAuthoritative,
+			threadId,
+			parentConfig?.threadId,
+			activeThreadOverride
+		]);
+		const resolvedHasExplicitThreadId = (threadIdPropIsAuthoritative ? true : activeThreadOverride?.explicit ?? hasExplicitThreadId ?? false) || !!parentConfig?.hasExplicitThreadId;
 		const [internalModalOpen, setInternalModalOpen] = (0, react.useState)(isModalDefaultOpen ?? true);
 		const hasExplicitDefault = isModalDefaultOpen !== void 0;
 		const setAndSync = (0, react.useCallback)((open) => {
@@ -194,20 +223,113 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}, [parentConfig?.isModalOpen, hasExplicitDefault]);
 		const resolvedIsModalOpen = hasExplicitDefault ? internalModalOpen : parentConfig?.isModalOpen ?? internalModalOpen;
 		const resolvedSetModalOpen = hasExplicitDefault ? setAndSync : parentConfig?.setModalOpen ?? setInternalModalOpen;
+		const [ownDrawerOpen, setOwnDrawerOpen] = (0, react.useState)(false);
+		const [ownDrawerCount, setOwnDrawerCount] = (0, react.useState)(0);
+		const modalCloseRef = (0, react.useRef)(() => {});
+		modalCloseRef.current = resolvedSetModalOpen;
+		const registeredModalClosersRef = (0, react.useRef)([]);
+		const ownRegisterModalCloser = (0, react.useCallback)((closeModal) => {
+			registeredModalClosersRef.current.push(closeModal);
+			return () => {
+				registeredModalClosersRef.current = registeredModalClosersRef.current.filter((entry) => entry !== closeModal);
+			};
+		}, []);
+		const ownSetDrawerOpen = (0, react.useCallback)((open) => {
+			setOwnDrawerOpen(open);
+			if (open && isMobileViewport()) {
+				const registered = registeredModalClosersRef.current;
+				(registered.length > 0 ? registered[registered.length - 1] : modalCloseRef.current)(false);
+			}
+		}, []);
+		const ownRegisterDrawer = (0, react.useCallback)(() => {
+			setOwnDrawerCount((count) => count + 1);
+			return () => {
+				setOwnDrawerCount((count) => Math.max(0, count - 1));
+			};
+		}, []);
+		const resolvedDrawerOpen = parentConfig ? parentConfig.drawerOpen : ownDrawerOpen;
+		const resolvedSetDrawerOpen = parentConfig ? parentConfig.setDrawerOpen : ownSetDrawerOpen;
+		const resolvedDrawerRegistered = parentConfig ? parentConfig.drawerRegistered : ownDrawerCount > 0;
+		const resolvedRegisterDrawer = parentConfig ? parentConfig.registerDrawer : ownRegisterDrawer;
+		const resolvedRegisterModalCloser = parentConfig ? parentConfig.ɵregisterModalCloser : ownRegisterModalCloser;
+		(0, react.useEffect)(() => {
+			if (!hasExplicitDefault) return;
+			return resolvedRegisterModalCloser(resolvedSetModalOpen);
+		}, [
+			hasExplicitDefault,
+			resolvedRegisterModalCloser,
+			resolvedSetModalOpen
+		]);
+		const isThreadIdControlledRef = (0, react.useRef)(isThreadIdControlled);
+		isThreadIdControlledRef.current = isThreadIdControlled;
+		const ownSetActiveThreadId = (0, react.useCallback)((id, options) => {
+			setActiveThreadOverride({
+				threadId: id,
+				explicit: options?.explicit ?? true
+			});
+		}, []);
+		const ownStartNewThread = (0, react.useCallback)(() => {
+			setActiveThreadOverride({
+				threadId: (0, _copilotkit_shared.randomUUID)(),
+				explicit: false
+			});
+		}, []);
+		const parentSetActiveThreadId = parentConfig?.setActiveThreadId;
+		const parentStartNewThread = parentConfig?.startNewThread;
+		const resolvedSetActiveThreadId = (0, react.useCallback)((id, options) => {
+			if (isThreadIdControlledRef.current) {
+				console.warn("[CopilotKit] Ignoring setActiveThreadId(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+				return;
+			}
+			if (parentSetActiveThreadId) {
+				parentSetActiveThreadId(id, options);
+				return;
+			}
+			ownSetActiveThreadId(id, options);
+		}, [parentSetActiveThreadId, ownSetActiveThreadId]);
+		const resolvedStartNewThread = (0, react.useCallback)(() => {
+			if (isThreadIdControlledRef.current) {
+				console.warn("[CopilotKit] Ignoring startNewThread(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+				return;
+			}
+			if (parentStartNewThread) {
+				parentStartNewThread();
+				return;
+			}
+			ownStartNewThread();
+		}, [parentStartNewThread, ownStartNewThread]);
+		const setModalOpenWithDrawerExclusion = (0, react.useCallback)((open) => {
+			if (open && isMobileViewport()) resolvedSetDrawerOpen(false);
+			resolvedSetModalOpen(open);
+		}, [resolvedSetModalOpen, resolvedSetDrawerOpen]);
 		const configurationValue = (0, react.useMemo)(() => ({
 			labels: mergedLabels,
 			agentId: resolvedAgentId,
 			threadId: resolvedThreadId,
 			hasExplicitThreadId: resolvedHasExplicitThreadId,
 			isModalOpen: resolvedIsModalOpen,
-			setModalOpen: resolvedSetModalOpen
+			setModalOpen: setModalOpenWithDrawerExclusion,
+			drawerOpen: resolvedDrawerOpen,
+			setDrawerOpen: resolvedSetDrawerOpen,
+			drawerRegistered: resolvedDrawerRegistered,
+			registerDrawer: resolvedRegisterDrawer,
+			ɵregisterModalCloser: resolvedRegisterModalCloser,
+			setActiveThreadId: resolvedSetActiveThreadId,
+			startNewThread: resolvedStartNewThread
 		}), [
 			mergedLabels,
 			resolvedAgentId,
 			resolvedThreadId,
 			resolvedHasExplicitThreadId,
 			resolvedIsModalOpen,
-			resolvedSetModalOpen
+			setModalOpenWithDrawerExclusion,
+			resolvedDrawerOpen,
+			resolvedSetDrawerOpen,
+			resolvedDrawerRegistered,
+			resolvedRegisterDrawer,
+			resolvedRegisterModalCloser,
+			resolvedSetActiveThreadId,
+			resolvedStartNewThread
 		]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfiguration.Provider, {
 			value: configurationValue,
@@ -1128,7 +1250,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			},
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4 cpk:pointer-events-auto",
+				className: "cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4 cpk:pointer-events-auto",
 				children: inputPill
 			}), shouldShowDisclaimer && BoundDisclaimer]
 		});
@@ -1398,325 +1520,43 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		*
 		* Awaiting a zero-delay timeout yields to the macrotask queue. React's
 		* MessageChannel task runs first, committing the pending state and running
-		* useLayoutEffect (which updates the context store). The follow-up runAgent
-		* call then reads fresh context.
-		*/
-		async waitForPendingFrameworkUpdates() {
-			await new Promise((resolve) => setTimeout(resolve, 0));
-		}
-	};
-
-//#endregion
-//#region src/v2/context.ts
-	const CopilotKitContext = (0, react.createContext)(null);
-	const useCopilotKit = () => {
-		const context = (0, react.useContext)(CopilotKitContext);
-		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
-		if (!context) throw new Error("useCopilotKit must be used within CopilotKitProvider");
-		(0, react.useEffect)(() => {
-			const subscription = context.copilotkit.subscribe({
-				onRuntimeConnectionStatusChanged: () => {
-					forceUpdate();
-				},
-				onHeadersChanged: () => {
-					forceUpdate();
-				}
-			});
-			return () => {
-				subscription.unsubscribe();
-			};
-		}, []);
-		return context;
-	};
-	const LicenseContext = (0, react.createContext)({
-		status: null,
-		license: null,
-		checkFeature: () => true,
-		getLimit: () => null
-	});
-	const useLicenseContext = () => (0, react.useContext)(LicenseContext);
-
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-	function defineToolCallRenderer(def) {
-		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
-		return {
-			name: def.name,
-			args: argsSchema,
-			render: def.render,
-			...def.agentId ? { agentId: def.agentId } : {}
-		};
-	}
-
-//#endregion
-//#region src/v2/hooks/use-render-tool.tsx
-	const EMPTY_DEPS$1 = [];
-	/**
-	* 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$1;
-		(0, react.useEffect)(() => {
-			const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
-				name: "*",
-				render: (props) => config.render({
-					...props,
-					parameters: props.args
-				}),
-				...config.agentId ? { agentId: config.agentId } : {}
-			}) : defineToolCallRenderer({
-				name: config.name,
-				args: config.parameters,
-				render: (props) => {
-					if (props.status === _copilotkit_core.ToolCallStatus.InProgress) return config.render({
-						...props,
-						parameters: props.args
-					});
-					if (props.status === _copilotkit_core.ToolCallStatus.Executing) return config.render({
-						...props,
-						parameters: props.args
-					});
-					return config.render({
-						...props,
-						parameters: props.args
-					});
-				},
-				...config.agentId ? { agentId: config.agentId } : {}
-			});
-			copilotkit.addHookRenderToolCall(renderer);
-		}, [
-			config.name,
-			copilotkit,
-			JSON.stringify(extraDeps)
-		]);
-	}
-
-//#endregion
-//#region src/v2/hooks/use-default-render-tool.tsx
-/**
-	* Module-level dedup set so an unknown status value only emits a console
-	* warning the FIRST time we encounter it. Otherwise a stuck/unmapped status
-	* would log on every re-render (potentially many per second).
-	*/
-	const warnedUnknownStatuses = /* @__PURE__ */ new Set();
-	/**
-	* Map a {@link ToolCallStatus} enum value to the documented string-union
-	* status the {@link DefaultRenderProps} contract exposes. Unknown / future
-	* enum members log a warning (once per distinct value) and fall back to
-	* `"inProgress"`.
-	*/
-	function mapToolCallStatus(status) {
-		switch (status) {
-			case _copilotkit_core.ToolCallStatus.Complete: return "complete";
-			case _copilotkit_core.ToolCallStatus.Executing: return "executing";
-			case _copilotkit_core.ToolCallStatus.InProgress: return "inProgress";
-			default: {
-				const key = String(status);
-				if (!warnedUnknownStatuses.has(key)) {
-					warnedUnknownStatuses.add(key);
-					console.warn(`[CopilotKit] Unknown ToolCallStatus "${key}" in default tool-call renderer; falling back to "inProgress".`);
-				}
-				return "inProgress";
-			}
-		}
-	}
-	/**
-	* Convert the framework-internal renderer props (`args`, enum status) into
-	* the documented {@link DefaultRenderProps} shape (`parameters`, string-union
-	* status) so a user `config.render` always sees the documented contract.
-	*/
-	function adaptRendererProps(props) {
-		return {
-			name: props.name,
-			toolCallId: props.toolCallId,
-			parameters: props.args,
-			status: mapToolCallStatus(props.status),
-			result: props.result
-		};
-	}
-	/**
-	* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
-	*
-	* - Call with no config to use CopilotKit's built-in default tool-call card.
-	* - Pass `config.render` to replace the default UI with your own fallback renderer.
-	*
-	* This is useful when you want a generic renderer for tools that do not have a
-	* dedicated `useRenderTool({ name: "..." })` registration.
-	*
-	* @param config - Optional custom wildcard render function.
-	* @param deps - Optional dependencies to refresh registration.
-	*
-	* @example
-	* ```tsx
-	* useDefaultRenderTool();
-	* ```
-	*
-	* @example
-	* ```tsx
-	* useDefaultRenderTool({
-	*   render: ({ name, status }) => <div>{name}: {status}</div>,
-	* });
-	* ```
-	*
-	* @example
-	* ```tsx
-	* useDefaultRenderTool(
-	*   {
-	*     render: ({ name, result }) => (
-	*       <ToolEventRow title={name} payload={result} compact={compactMode} />
-	*     ),
-	*   },
-	*   [compactMode],
-	* );
-	* ```
-	*/
-	function useDefaultRenderTool(config, deps) {
-		const userRender = config?.render;
-		useRenderTool({
-			name: "*",
-			render: userRender ? (raw) => userRender(adaptRendererProps(raw)) : (raw) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(raw) })
-		}, deps);
-	}
-	/**
-	* Guarded JSON.stringify used inside the expanded `<pre>` blocks. A circular
-	* reference would otherwise crash the entire React tree on render.
-	*/
-	function safeStringifyForPre(value) {
-		try {
-			return JSON.stringify(value, null, 2);
-		} catch (err) {
-			console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for default renderer; falling back to String():", err);
-			try {
-				return String(value);
-			} catch (innerErr) {
-				console.warn("[CopilotKit] safeStringifyForPre: value could not be stringified:", innerErr);
-				return "[unserializable]";
-			}
-		}
-	}
-	function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result }) {
-		const [isExpanded, setIsExpanded] = (0, react.useState)(false);
-		const isActive = status === "inProgress" || status === "executing";
-		const isComplete = status === "complete";
-		const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
-		const dotClassName = isActive ? "cpk:bg-amber-500" : isComplete ? "cpk:bg-emerald-500" : "cpk:bg-zinc-400";
-		const badgeClassName = isActive ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : isComplete ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": "copilot-tool-render",
-			"data-tool-name": name,
-			"data-tool-call-id": toolCallId,
-			"data-status": status,
-			"data-args": safeStringifyForAttr(parameters),
-			"data-result": safeStringifyForAttr(result),
-			className: "cpk:mt-2 cpk:pb-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:bg-white/70 cpk:p-4 cpk:shadow-sm cpk:backdrop-blur cpk:dark:border-zinc-800/60 cpk:dark:bg-zinc-900/50",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					"aria-expanded": isExpanded,
-					onClick: () => setIsExpanded(!isExpanded),
-					className: "cpk:flex cpk:w-full cpk:cursor-pointer cpk:select-none cpk:items-center cpk:justify-between cpk:gap-2.5 cpk:border-none cpk:bg-transparent cpk:p-0 cpk:m-0 cpk:text-left cpk:text-inherit",
-					style: { font: "inherit" },
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-								className: `cpk:h-3.5 cpk:w-3.5 cpk:flex-shrink-0 cpk:text-zinc-500 cpk:transition-transform cpk:dark:text-zinc-400 ${isExpanded ? "cpk:rotate-90" : ""}`,
-								fill: "none",
-								viewBox: "0 0 24 24",
-								strokeWidth: 2,
-								stroke: "currentColor",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									d: "M8.25 4.5l7.5 7.5-7.5 7.5"
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"data-testid": "copilot-tool-render-name",
-								className: "cpk:truncate cpk:text-[13px] cpk:font-semibold cpk:text-zinc-900 cpk:dark:text-zinc-100",
-								children: name
-							})
-						]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						"data-testid": "copilot-tool-render-status",
-						className: `cpk:inline-flex cpk:flex-shrink-0 cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-0.5 cpk:text-[11px] cpk:font-medium ${badgeClassName}`,
-						children: statusLabel
-					})]
-				}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cpk:mt-3 cpk:grid cpk:gap-3",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
-						children: "Arguments"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
-						children: safeStringifyForPre(parameters ?? {})
-					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
-						children: "Result"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
-						children: typeof result === "string" ? result : safeStringifyForPre(result)
-					})] })]
-				})]
-			})
-		});
-	}
-	function safeStringifyForAttr(value) {
-		if (value === void 0 || value === null) return "";
-		if (typeof value === "string") return value;
-		try {
-			return JSON.stringify(value);
-		} catch (err) {
-			console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for data-* attribute; falling back to String():", err);
-			try {
-				return String(value);
-			} catch (innerErr) {
-				console.warn("[CopilotKit] safeStringifyForAttr: value could not be stringified:", innerErr);
-				return "";
-			}
+		* useLayoutEffect (which updates the context store). The follow-up runAgent
+		* call then reads fresh context.
+		*/
+		async waitForPendingFrameworkUpdates() {
+			await new Promise((resolve) => setTimeout(resolve, 0));
 		}
-	}
+	};
+
+//#endregion
+//#region src/v2/context.ts
+	const CopilotKitContext = (0, react.createContext)(null);
+	const useCopilotKit = () => {
+		const context = (0, react.useContext)(CopilotKitContext);
+		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
+		if (!context) throw new Error("useCopilotKit must be used within CopilotKitProvider");
+		(0, react.useEffect)(() => {
+			const subscription = context.copilotkit.subscribe({
+				onRuntimeConnectionStatusChanged: () => {
+					forceUpdate();
+				},
+				onHeadersChanged: () => {
+					forceUpdate();
+				}
+			});
+			return () => {
+				subscription.unsubscribe();
+			};
+		}, []);
+		return context;
+	};
+	const LicenseContext = (0, react.createContext)({
+		status: null,
+		license: null,
+		checkFeature: () => true,
+		getLimit: () => null
+	});
+	const useLicenseContext = () => (0, react.useContext)(LicenseContext);
 
 //#endregion
 //#region src/v2/hooks/use-render-tool-call.tsx
@@ -1772,10 +1612,13 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
 		return (0, react.useCallback)(({ toolCall, toolMessage }) => {
 			const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
+			const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+			if (!renderConfig) return null;
+			const RenderComponent = renderConfig.render;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRenderer, {
 				toolCall,
 				toolMessage,
-				RenderComponent: (exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*"))?.render ?? defaultToolCallRenderAdapter,
+				RenderComponent,
 				isExecuting: executingToolCallIds.has(toolCall.id)
 			}, toolCall.id);
 		}, [
@@ -1784,15 +1627,6 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			agentId
 		]);
 	}
-	function defaultToolCallRenderAdapter(props) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, {
-			name: props.name,
-			toolCallId: props.toolCallId,
-			parameters: props.args,
-			status: mapToolCallStatus(props.status),
-			result: props.result
-		});
-	}
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -3274,7 +3108,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		...A2UILifecycleFields
 	}).passthrough();
 	function createA2UIMessageRenderer(options) {
-		const { theme, catalog, loadingComponent, recovery } = options;
+		const { theme, catalog, loadingComponent, recovery, onAction } = options;
 		const showAfterMs = recovery?.showAfterMs ?? 2e3;
 		const showAfterAttempts = recovery?.showAfterAttempts ?? 2;
 		const optionDebugExposure = recovery?.debugExposure ?? "collapsed";
@@ -3350,6 +3184,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						agent,
 						copilotkit,
 						catalog,
+						onAction,
 						onReady: markSurfaceReady
 					}, surfaceId))
 				});
@@ -3370,29 +3205,60 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		};
 	}
 	/**
+	* Orchestrates a single A2UI user action: runs the optional `onAction`
+	* interceptor first, then forwards to the agent unless the interceptor
+	* suppressed it (returned `null`). Exported for unit testing; the wiring lives
+	* in {@link ReactSurfaceHost}.
+	*/
+	async function runA2UIAction({ message, agent, copilotkit, onAction }) {
+		if (!agent) return;
+		const action = message.userAction;
+		const forward = async (forwardAction) => {
+			const a2uiAction = forwardAction !== void 0 ? {
+				...message,
+				userAction: forwardAction
+			} : message;
+			try {
+				copilotkit.setProperties({
+					...copilotkit.properties,
+					a2uiAction
+				});
+				await copilotkit.runAgent({ agent });
+			} finally {
+				if (copilotkit.properties) {
+					const { a2uiAction: _omit, ...rest } = copilotkit.properties;
+					copilotkit.setProperties(rest);
+				}
+			}
+		};
+		if (onAction && action) {
+			const result = await onAction(action, forward);
+			if (result === null) return;
+			if (result) {
+				await forward(result);
+				return;
+			}
+		}
+		await forward();
+	}
+	/**
 	* Renders a single A2UI surface using the React renderer.
 	* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
 	*/
-	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog, onReady }) {
+	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog, onAction, onReady }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
-				onAction: (0, react.useCallback)(async (message) => {
-					if (!agent) return;
-					message.userAction;
-					try {
-						copilotkit.setProperties({
-							...copilotkit.properties,
-							a2uiAction: message
-						});
-						await copilotkit.runAgent({ agent });
-					} finally {
-						if (copilotkit.properties) {
-							const { a2uiAction, ...rest } = copilotkit.properties;
-							copilotkit.setProperties(rest);
-						}
-					}
-				}, [agent, copilotkit]),
+				onAction: (0, react.useCallback)((message) => runA2UIAction({
+					message,
+					agent,
+					copilotkit,
+					onAction
+				}), [
+					agent,
+					copilotkit,
+					onAction
+				]),
 				theme,
 				catalog,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SurfaceMessageProcessor, {
@@ -3463,6 +3329,18 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
 	}
 
+//#endregion
+//#region src/v2/types/defineToolCallRenderer.ts
+	function defineToolCallRenderer(def) {
+		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
+		return {
+			name: def.name,
+			args: argsSchema,
+			render: def.render,
+			...def.agentId ? { agentId: def.agentId } : {}
+		};
+	}
+
 //#endregion
 //#region src/v2/a2ui/A2UIToolCallRenderer.tsx
 /**
@@ -4016,10 +3894,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/v2/hooks/use-frontend-tool.tsx
-	const EMPTY_DEPS = [];
+	const EMPTY_DEPS$1 = [];
 	function useFrontendTool(tool, deps) {
 		const { copilotkit } = useCopilotKit();
-		const extraDeps = deps ?? EMPTY_DEPS;
+		const extraDeps = deps ?? EMPTY_DEPS$1;
 		(0, react.useEffect)(() => {
 			const name = tool.name;
 			if (copilotkit.getTool({
@@ -4057,63 +3935,333 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* - 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.
+	* Use this when you want to display a typed visual component for a tool call
+	* without manually wiring a full frontend tool object.
+	*
+	* When `parameters` is provided, render props are inferred from the schema.
+	* When omitted, the render component may accept any props.
+	*
+	* @typeParam TSchema - Schema describing tool parameters, or `undefined` when no schema is given.
+	* @param config - Tool registration config.
+	* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+	*
+	* @example
+	* ```tsx
+	* // Without parameters — render accepts any props
+	* useComponent({
+	*   name: "showGreeting",
+	*   render: ({ message }: { message: string }) => <div>{message}</div>,
+	* });
+	* ```
+	*
+	* @example
+	* ```tsx
+	* // With parameters — render props inferred from schema
+	* useComponent({
+	*   name: "showWeatherCard",
+	*   parameters: z.object({ city: z.string() }),
+	*   render: ({ city }) => <div>{city}</div>,
+	* });
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useComponent(
+	*   {
+	*     name: "renderProfile",
+	*     parameters: z.object({ userId: z.string() }),
+	*     render: ProfileCard,
+	*     agentId: "support-agent",
+	*   },
+	*   [selectedAgentId],
+	* );
+	* ```
+	*/
+	function useComponent(config, deps) {
+		const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
+		const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
+		useFrontendTool({
+			name: config.name,
+			description: fullDescription,
+			parameters: config.parameters,
+			render: ({ args }) => {
+				const Component = config.render;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
+			},
+			agentId: config.agentId,
+			followUp: config.followUp
+		}, deps);
+	}
+
+//#endregion
+//#region src/v2/hooks/use-render-tool.tsx
+	const EMPTY_DEPS = [];
+	/**
+	* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
+	*
+	* Key behavior:
+	* - deduplicates by `agentId:name` (latest registration wins),
+	* - keeps renderer entries on cleanup so historical chat tool calls can still render,
+	* - refreshes registration when `deps` change.
+	*
+	* @typeParam S - Schema type describing tool call parameters.
+	* @param config - Renderer config for wildcard or named tools.
+	* @param deps - Optional dependencies to refresh registration.
+	*
+	* @example
+	* ```tsx
+	* useRenderTool(
+	*   {
+	*     name: "searchDocs",
+	*     parameters: z.object({ query: z.string() }),
+	*     render: ({ status, parameters, result }) => {
+	*       if (status === "executing") return <div>Searching {parameters.query}</div>;
+	*       if (status === "complete") return <div>{result}</div>;
+	*       return <div>Preparing...</div>;
+	*     },
+	*   },
+	*   [],
+	* );
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useRenderTool(
+	*   {
+	*     name: "summarize",
+	*     parameters: z.object({ text: z.string() }),
+	*     agentId: "research-agent",
+	*     render: ({ name, status }) => <div>{name}: {status}</div>,
+	*   },
+	*   [selectedAgentId],
+	* );
+	* ```
+	*/
+	function useRenderTool(config, deps) {
+		const { copilotkit } = useCopilotKit();
+		const extraDeps = deps ?? EMPTY_DEPS;
+		(0, react.useEffect)(() => {
+			const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
+				name: "*",
+				render: (props) => config.render({
+					...props,
+					parameters: props.args
+				}),
+				...config.agentId ? { agentId: config.agentId } : {}
+			}) : defineToolCallRenderer({
+				name: config.name,
+				args: config.parameters,
+				render: (props) => {
+					if (props.status === _copilotkit_core.ToolCallStatus.InProgress) return config.render({
+						...props,
+						parameters: props.args
+					});
+					if (props.status === _copilotkit_core.ToolCallStatus.Executing) return config.render({
+						...props,
+						parameters: props.args
+					});
+					return config.render({
+						...props,
+						parameters: props.args
+					});
+				},
+				...config.agentId ? { agentId: config.agentId } : {}
+			});
+			copilotkit.addHookRenderToolCall(renderer);
+		}, [
+			config.name,
+			copilotkit,
+			JSON.stringify(extraDeps)
+		]);
+	}
+
+//#endregion
+//#region src/v2/hooks/use-default-render-tool.tsx
+/**
+	* Module-level dedup set so an unknown status value only emits a console
+	* warning the FIRST time we encounter it. Otherwise a stuck/unmapped status
+	* would log on every re-render (potentially many per second).
+	*/
+	const warnedUnknownStatuses = /* @__PURE__ */ new Set();
+	/**
+	* Map a {@link ToolCallStatus} enum value to the documented string-union
+	* status the {@link DefaultRenderProps} contract exposes. Unknown / future
+	* enum members log a warning (once per distinct value) and fall back to
+	* `"inProgress"`.
+	*/
+	function mapToolCallStatus(status) {
+		switch (status) {
+			case _copilotkit_core.ToolCallStatus.Complete: return "complete";
+			case _copilotkit_core.ToolCallStatus.Executing: return "executing";
+			case _copilotkit_core.ToolCallStatus.InProgress: return "inProgress";
+			default: {
+				const key = String(status);
+				if (!warnedUnknownStatuses.has(key)) {
+					warnedUnknownStatuses.add(key);
+					console.warn(`[CopilotKit] Unknown ToolCallStatus "${key}" in default tool-call renderer; falling back to "inProgress".`);
+				}
+				return "inProgress";
+			}
+		}
+	}
+	/**
+	* Convert the framework-internal renderer props (`args`, enum status) into
+	* the documented {@link DefaultRenderProps} shape (`parameters`, string-union
+	* status) so a user `config.render` always sees the documented contract.
+	*/
+	function adaptRendererProps(props) {
+		return {
+			name: props.name,
+			toolCallId: props.toolCallId,
+			parameters: props.args,
+			status: mapToolCallStatus(props.status),
+			result: props.result
+		};
+	}
+	/**
+	* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
+	*
+	* - Call with no config to use CopilotKit's built-in default tool-call card.
+	* - Pass `config.render` to replace the default UI with your own fallback renderer.
 	*
-	* When `parameters` is provided, render props are inferred from the schema.
-	* When omitted, the render component may accept any props.
+	* This is useful when you want a generic renderer for tools that do not have a
+	* dedicated `useRenderTool({ name: "..." })` registration.
 	*
-	* @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`).
+	* @param config - Optional custom wildcard render function.
+	* @param deps - Optional dependencies to refresh registration.
 	*
 	* @example
 	* ```tsx
-	* // Without parameters — render accepts any props
-	* useComponent({
-	*   name: "showGreeting",
-	*   render: ({ message }: { message: string }) => <div>{message}</div>,
-	* });
+	* useDefaultRenderTool();
 	* ```
 	*
 	* @example
 	* ```tsx
-	* // With parameters — render props inferred from schema
-	* useComponent({
-	*   name: "showWeatherCard",
-	*   parameters: z.object({ city: z.string() }),
-	*   render: ({ city }) => <div>{city}</div>,
+	* useDefaultRenderTool({
+	*   render: ({ name, status }) => <div>{name}: {status}</div>,
 	* });
 	* ```
 	*
 	* @example
 	* ```tsx
-	* useComponent(
+	* useDefaultRenderTool(
 	*   {
-	*     name: "renderProfile",
-	*     parameters: z.object({ userId: z.string() }),
-	*     render: ProfileCard,
-	*     agentId: "support-agent",
+	*     render: ({ name, result }) => (
+	*       <ToolEventRow title={name} payload={result} compact={compactMode} />
+	*     ),
 	*   },
-	*   [selectedAgentId],
+	*   [compactMode],
 	* );
 	* ```
 	*/
-	function useComponent(config, deps) {
-		const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
-		const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
-		useFrontendTool({
-			name: config.name,
-			description: fullDescription,
-			parameters: config.parameters,
-			render: ({ args }) => {
-				const Component = config.render;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
-			},
-			agentId: config.agentId,
-			followUp: config.followUp
+	function useDefaultRenderTool(config, deps) {
+		const userRender = config?.render;
+		useRenderTool({
+			name: "*",
+			render: userRender ? (raw) => userRender(adaptRendererProps(raw)) : (raw) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(raw) })
 		}, deps);
 	}
+	/**
+	* Guarded JSON.stringify used inside the expanded `<pre>` blocks. A circular
+	* reference would otherwise crash the entire React tree on render.
+	*/
+	function safeStringifyForPre(value) {
+		try {
+			return JSON.stringify(value, null, 2);
+		} catch (err) {
+			console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for default renderer; falling back to String():", err);
+			try {
+				return String(value);
+			} catch (innerErr) {
+				console.warn("[CopilotKit] safeStringifyForPre: value could not be stringified:", innerErr);
+				return "[unserializable]";
+			}
+		}
+	}
+	function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result }) {
+		const [isExpanded, setIsExpanded] = (0, react.useState)(false);
+		const isActive = status === "inProgress" || status === "executing";
+		const isComplete = status === "complete";
+		const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
+		const dotClassName = isActive ? "cpk:bg-amber-500" : isComplete ? "cpk:bg-emerald-500" : "cpk:bg-zinc-400";
+		const badgeClassName = isActive ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : isComplete ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "copilot-tool-render",
+			"data-tool-name": name,
+			"data-tool-call-id": toolCallId,
+			"data-status": status,
+			"data-args": safeStringifyForAttr(parameters),
+			"data-result": safeStringifyForAttr(result),
+			className: "cpk:mt-2 cpk:pb-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:bg-white/70 cpk:p-4 cpk:shadow-sm cpk:backdrop-blur cpk:dark:border-zinc-800/60 cpk:dark:bg-zinc-900/50",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					"aria-expanded": isExpanded,
+					onClick: () => setIsExpanded(!isExpanded),
+					className: "cpk:flex cpk:w-full cpk:cursor-pointer cpk:select-none cpk:items-center cpk:justify-between cpk:gap-2.5 cpk:border-none cpk:bg-transparent cpk:p-0 cpk:m-0 cpk:text-left cpk:text-inherit",
+					style: { font: "inherit" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+								className: `cpk:h-3.5 cpk:w-3.5 cpk:flex-shrink-0 cpk:text-zinc-500 cpk:transition-transform cpk:dark:text-zinc-400 ${isExpanded ? "cpk:rotate-90" : ""}`,
+								fill: "none",
+								viewBox: "0 0 24 24",
+								strokeWidth: 2,
+								stroke: "currentColor",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"data-testid": "copilot-tool-render-name",
+								className: "cpk:truncate cpk:text-[13px] cpk:font-semibold cpk:text-zinc-900 cpk:dark:text-zinc-100",
+								children: name
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-testid": "copilot-tool-render-status",
+						className: `cpk:inline-flex cpk:flex-shrink-0 cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-0.5 cpk:text-[11px] cpk:font-medium ${badgeClassName}`,
+						children: statusLabel
+					})]
+				}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cpk:mt-3 cpk:grid cpk:gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
+						children: "Arguments"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
+						children: safeStringifyForPre(parameters ?? {})
+					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
+						children: "Result"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
+						children: typeof result === "string" ? result : safeStringifyForPre(result)
+					})] })]
+				})]
+			})
+		});
+	}
+	function safeStringifyForAttr(value) {
+		if (value === void 0 || value === null) return "";
+		if (typeof value === "string") return value;
+		try {
+			return JSON.stringify(value);
+		} catch (err) {
+			console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload for data-* attribute; falling back to String():", err);
+			try {
+				return String(value);
+			} catch (innerErr) {
+				console.warn("[CopilotKit] safeStringifyForAttr: value could not be stringified:", innerErr);
+				return "";
+			}
+		}
+	}
 
 //#endregion
 //#region src/v2/hooks/use-human-in-the-loop.tsx
@@ -4851,7 +4999,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
 			const subscription = store.select(selector).subscribe(onStoreChange);
 			return () => subscription.unsubscribe();
-		}, [store, selector]), () => selector(store.getState()));
+		}, [store, selector]), () => selector(store.getState()), () => selector(store.getServerState()));
 	}
 	/**
 	* React hook for listing and managing Intelligence platform threads.
@@ -4894,7 +5042,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* }
 	* ```
 	*/
-	function useThreads({ agentId, includeArchived, limit }) {
+	function useThreads({ agentId, includeArchived, limit, enabled = true }) {
 		const { copilotkit } = useCopilotKit();
 		const [store] = (0, react.useState)(() => (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch }));
 		const coreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
@@ -4911,6 +5059,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const storeError = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsError);
 		const hasMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectHasNextPage);
 		const isFetchingMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsFetchingNextPage);
+		const isMutating = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsMutating);
 		const headersKey = (0, react.useMemo)(() => {
 			return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 		}, [copilotkit.headers]);
@@ -4931,9 +5080,16 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return /* @__PURE__ */ new Error("Thread mutations are not available on this CopilotKit runtime");
 		}, [threadMutationsSupported]);
 		const [hasDispatchedContext, setHasDispatchedContext] = (0, react.useState)(false);
-		const preConnectLoading = !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
-		const isLoading = runtimeError || threadEndpointsError ? false : preConnectLoading || storeIsLoading;
-		const error = runtimeError ?? threadEndpointsError ?? storeError;
+		const preConnectLoading = enabled && !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
+		const [configErrorDismissed, setConfigErrorDismissed] = (0, react.useState)(false);
+		(0, react.useEffect)(() => {
+			setConfigErrorDismissed(false);
+		}, [runtimeError, threadEndpointsError]);
+		const activeRuntimeError = configErrorDismissed ? null : runtimeError;
+		const activeThreadEndpointsError = configErrorDismissed ? null : threadEndpointsError;
+		const isLoading = activeRuntimeError || activeThreadEndpointsError ? false : preConnectLoading || storeIsLoading;
+		const error = activeRuntimeError ?? activeThreadEndpointsError ?? storeError;
+		const listError = storeError;
 		(0, react.useEffect)(() => {
 			store.start();
 			return () => {
@@ -4941,6 +5097,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			};
 		}, [store]);
 		(0, react.useEffect)(() => {
+			if (!enabled) return;
 			copilotkit.registerThreadStore(agentId, store);
 			return () => {
 				copilotkit.unregisterThreadStore(agentId);
@@ -4948,9 +5105,15 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [
 			copilotkit,
 			agentId,
-			store
+			store,
+			enabled
 		]);
 		(0, react.useEffect)(() => {
+			if (!enabled) {
+				store.setContext(null);
+				setHasDispatchedContext(false);
+				return;
+			}
 			if (!copilotkit.runtimeUrl) {
 				store.setContext(null);
 				setHasDispatchedContext(false);
@@ -4974,6 +5137,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			setHasDispatchedContext(true);
 		}, [
 			store,
+			enabled,
 			copilotkit.runtimeUrl,
 			runtimeStatus,
 			headersKey,
@@ -4997,9 +5161,16 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			threads,
 			isLoading,
 			error,
+			listError,
 			hasMoreThreads,
 			isFetchingMoreThreads,
+			isMutating,
 			fetchMoreThreads: (0, react.useCallback)(() => store.fetchNextPage(), [store]),
+			refetchThreads: (0, react.useCallback)(() => store.refetchThreads(), [store]),
+			startNewThread: (0, react.useCallback)(() => {
+				setConfigErrorDismissed(true);
+				store.startNewThread();
+			}, [store]),
 			renameThread,
 			archiveThread,
 			unarchiveThread,
@@ -6186,7 +6357,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			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
 		});
 	});
@@ -7291,7 +7462,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "cpk:max-w-3xl cpk:mx-auto",
 					children: [BoundMessageView, hasSuggestions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:pl-0 cpk:pr-4 cpk:sm:px-0 cpk:mt-4",
+						className: "cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0 cpk:mt-4",
 						children: BoundSuggestionView
 					}) : null]
 				})
@@ -7334,7 +7505,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				onDragOver,
 				onDragLeave,
 				onDrop,
-				className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+				className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 				...props,
 				children: [dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}), BoundWelcomeScreen]
 			});
@@ -7356,7 +7527,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			onDragOver,
 			onDragLeave,
 			onDrop,
-			className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+			className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 			...props,
 			children: [
 				dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
@@ -7395,7 +7566,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 							minHeight: 0
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 							children
 						})
 					}),
@@ -7428,7 +7599,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 							...props,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								ref: contentRef,
-								className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+								className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 								children
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								ref: spacerRef,
@@ -7490,7 +7661,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			if (!hasMounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+					className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 					children
 				})
 			});
@@ -7505,7 +7676,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								ref: contentRef,
-								className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+								className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
 								children
 							}),
 							BoundFeather,
@@ -7769,9 +7940,17 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
 		const [lastConnectedThreadId, setLastConnectedThreadId] = (0, react.useState)(null);
 		const isConnecting = hasExplicitThreadId && lastConnectedThreadId !== resolvedThreadId;
+		const previousThreadIdRef = (0, react.useRef)(null);
+		const hasExplicitThreadIdRef = (0, react.useRef)(hasExplicitThreadId);
+		hasExplicitThreadIdRef.current = hasExplicitThreadId;
 		(0, react.useEffect)(() => {
+			const threadChanged = previousThreadIdRef.current !== resolvedThreadId;
+			previousThreadIdRef.current = resolvedThreadId;
 			agent.threadId = resolvedThreadId;
-			if (!hasExplicitThreadId) return;
+			if (!hasExplicitThreadId) {
+				if (threadChanged && agent.messages.length > 0) agent.setMessages([]);
+				return;
+			}
 			let detached = false;
 			const connectAbortController = new AbortController();
 			if (agent instanceof _ag_ui_client.HttpAgent) agent.abortController = connectAbortController;
@@ -7785,6 +7964,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					if (!detached) (typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 16))(() => {
 						if (!detached) setLastConnectedThreadId(resolvedThreadId);
 					});
+					else if (!hasExplicitThreadIdRef.current) agentToConnect.setMessages([]);
 				}
 			};
 			connect(agent);
@@ -8135,18 +8315,46 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/v2/components/chat/CopilotModalHeader.tsx
-	function CopilotModalHeader({ title, titleContent, closeButton, children, className, ...rest }) {
+/**
+	* Reactively tracks whether the viewport is in the mobile range (≤767px) — the
+	* same breakpoint the drawer + chat coordination use. SSR-safe: starts `false`
+	* (desktop) so the server render and first client render agree, then syncs on
+	* mount and on resize.
+	*/
+	function useIsMobileViewport() {
+		const [isMobile, setIsMobile] = (0, react.useState)(false);
+		(0, react.useEffect)(() => {
+			if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+			const mql = window.matchMedia("(max-width: 767px)");
+			const update = () => setIsMobile(mql.matches);
+			update();
+			mql.addEventListener("change", update);
+			return () => mql.removeEventListener("change", update);
+		}, []);
+		return isMobile;
+	}
+	function CopilotModalHeader({ title, titleContent, closeButton, drawerLauncher, children, className, ...rest }) {
 		const configuration = useCopilotChatConfiguration();
 		const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
 		const resolvedTitle = title ?? fallbackTitle;
+		const isMobile = useIsMobileViewport();
+		const drawerRegistered = (configuration?.drawerRegistered ?? false) && isMobile;
 		const handleClose = (0, react.useCallback)(() => {
 			configuration?.setModalOpen?.(false);
 		}, [configuration]);
+		const handleToggleDrawer = (0, react.useCallback)(() => {
+			configuration?.setDrawerOpen?.(!configuration.drawerOpen);
+		}, [configuration]);
 		const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, { children: resolvedTitle });
 		const BoundCloseButton = renderSlot(closeButton, CopilotModalHeader.CloseButton, { onClick: handleClose });
+		const BoundDrawerLauncher = drawerRegistered ? renderSlot(drawerLauncher, CopilotModalHeader.DrawerLauncher, {
+			onClick: handleToggleDrawer,
+			"aria-expanded": configuration?.drawerOpen ?? false
+		}) : null;
 		if (children) return children({
 			titleContent: BoundTitle,
 			closeButton: BoundCloseButton,
+			drawerLauncher: BoundDrawerLauncher,
 			title: resolvedTitle,
 			...rest
 		});
@@ -8159,8 +8367,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:flex-1",
-						"aria-hidden": "true"
+						className: "cpk:flex cpk:flex-1 cpk:justify-start",
+						children: BoundDrawerLauncher ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center",
@@ -8193,9 +8401,21 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				"aria-hidden": "true"
 			})
 		});
+		_CopilotModalHeader.DrawerLauncher = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"data-testid": "copilot-threads-drawer-launcher",
+			className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
+			"aria-label": "Open threads",
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftOpen, {
+				className: "cpk:h-4 cpk:w-4",
+				"aria-hidden": "true"
+			})
+		});
 	})(CopilotModalHeader || (CopilotModalHeader = {}));
 	CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 	CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
+	CopilotModalHeader.DrawerLauncher.displayName = "CopilotModalHeader.DrawerLauncher";
 
 //#endregion
 //#region src/v2/components/chat/CopilotSidebarView.tsx
@@ -8553,6 +8773,322 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	}
 	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({
+			agentId: resolvedAgentId,
+			includeArchived: true,
+			enabled: licensed,
+			...limit !== void 0 ? { limit } : {}
+		});
+		const drawerThreads = (0, react.useMemo)(() => threads.map(toDrawerThread), [threads]);
+		const elementRef = (0, react.useRef)(null);
+		const [mounted, setMounted] = (0, react.useState)(false);
+		(0, react.useEffect)(() => {
+			(0, _copilotkit_web_components_threads_drawer.defineCopilotKitThreadsDrawer)();
+			setMounted(true);
+		}, []);
+		const registerDrawer = configuration?.registerDrawer;
+		(0, react.useEffect)(() => {
+			if (!registerDrawer) return;
+			return registerDrawer();
+		}, [registerDrawer]);
+		const [localDrawerOpen, setLocalDrawerOpen] = (0, react.useState)(false);
+		const drawerOpen = configuration ? configuration.drawerOpen : localDrawerOpen;
+		const setDrawerOpen = configuration ? configuration.setDrawerOpen : setLocalDrawerOpen;
+		const setActiveThreadId = configuration?.setActiveThreadId;
+		const startNewThreadConfig = configuration?.startNewThread;
+		const handleThreadSelected = (0, react.useCallback)((threadId) => {
+			if (onThreadSelect) onThreadSelect(threadId);
+			else setActiveThreadId?.(threadId, { explicit: true });
+			findChatInput(elementRef.current)?.focus();
+		}, [onThreadSelect, setActiveThreadId]);
+		const handleNewThread = (0, react.useCallback)(() => {
+			startNewThread();
+			if (onNewThread) onNewThread();
+			else startNewThreadConfig?.();
+		}, [
+			startNewThread,
+			onNewThread,
+			startNewThreadConfig
+		]);
+		const handleArchive = (0, react.useCallback)((threadId) => {
+			archiveThread(threadId).catch((err) => {
+				console.error("CopilotThreadsDrawer: archiveThread failed", err);
+			});
+		}, [archiveThread]);
+		const handleUnarchive = (0, react.useCallback)((threadId) => {
+			unarchiveThread(threadId).catch((err) => {
+				console.error("CopilotThreadsDrawer: unarchiveThread failed", err);
+			});
+		}, [unarchiveThread]);
+		const handleDelete = (0, react.useCallback)((threadId) => {
+			const isActive = threadId === activeThreadId;
+			deleteThread(threadId).then(() => {
+				if (isActive) {
+					startNewThread();
+					if (onNewThread) onNewThread();
+					else startNewThreadConfig?.();
+				}
+			}).catch((err) => {
+				console.error("CopilotThreadsDrawer: deleteThread failed", err);
+			});
+		}, [
+			deleteThread,
+			activeThreadId,
+			startNewThread,
+			onNewThread,
+			startNewThreadConfig
+		]);
+		const handleFilterChange = (0, react.useCallback)(() => {
+			refetchThreads();
+		}, [refetchThreads]);
+		const handleRetry = (0, react.useCallback)((scope) => {
+			if (scope === "fetch-more") fetchMoreThreads();
+			else refetchThreads();
+		}, [fetchMoreThreads, refetchThreads]);
+		const handleOpenChange = (0, react.useCallback)((open) => {
+			setDrawerOpen(open);
+		}, [setDrawerOpen]);
+		const handleLicensed = (0, react.useCallback)(() => {
+			onLicensed?.();
+		}, [onLicensed]);
+		const handleLoadMore = (0, react.useCallback)(() => {
+			fetchMoreThreads();
+		}, [fetchMoreThreads]);
+		const handlersRef = (0, react.useRef)({
+			handleThreadSelected,
+			handleNewThread,
+			handleArchive,
+			handleUnarchive,
+			handleDelete,
+			handleFilterChange,
+			handleRetry,
+			handleOpenChange,
+			handleLicensed,
+			handleLoadMore
+		});
+		handlersRef.current = {
+			handleThreadSelected,
+			handleNewThread,
+			handleArchive,
+			handleUnarchive,
+			handleDelete,
+			handleFilterChange,
+			handleRetry,
+			handleOpenChange,
+			handleLicensed,
+			handleLoadMore
+		};
+		(0, react.useEffect)(() => {
+			const el = elementRef.current;
+			if (!el) return;
+			const onThreadSelected = (event) => {
+				const detail = event.detail;
+				handlersRef.current.handleThreadSelected(detail.threadId);
+			};
+			const onNewThreadEvent = () => handlersRef.current.handleNewThread();
+			const onArchive = (event) => {
+				const detail = event.detail;
+				handlersRef.current.handleArchive(detail.threadId);
+			};
+			const onUnarchive = (event) => {
+				const detail = event.detail;
+				handlersRef.current.handleUnarchive(detail.threadId);
+			};
+			const onDelete = (event) => {
+				const detail = event.detail;
+				handlersRef.current.handleDelete(detail.threadId);
+			};
+			const onFilterChange = (_event) => {
+				handlersRef.current.handleFilterChange();
+			};
+			const onOpenChangeEvent = (event) => {
+				const detail = event.detail;
+				handlersRef.current.handleOpenChange(detail.open);
+			};
+			const onRetry = (event) => {
+				const detail = event.detail;
+				handlersRef.current.handleRetry(detail.scope);
+			};
+			const onLicensedEvent = () => handlersRef.current.handleLicensed();
+			const onLoadMore = () => handlersRef.current.handleLoadMore();
+			el.addEventListener("thread-selected", onThreadSelected);
+			el.addEventListener("new-thread", onNewThreadEvent);
+			el.addEventListener("archive", onArchive);
+			el.addEventListener("unarchive", onUnarchive);
+			el.addEventListener("delete", onDelete);
+			el.addEventListener("filter-change", onFilterChange);
+			el.addEventListener("open-change", onOpenChangeEvent);
+			el.addEventListener("retry", onRetry);
+			el.addEventListener("licensed", onLicensedEvent);
+			el.addEventListener("load-more", onLoadMore);
+			return () => {
+				el.removeEventListener("thread-selected", onThreadSelected);
+				el.removeEventListener("new-thread", onNewThreadEvent);
+				el.removeEventListener("archive", onArchive);
+				el.removeEventListener("unarchive", onUnarchive);
+				el.removeEventListener("delete", onDelete);
+				el.removeEventListener("filter-change", onFilterChange);
+				el.removeEventListener("open-change", onOpenChangeEvent);
+				el.removeEventListener("retry", onRetry);
+				el.removeEventListener("licensed", onLicensedEvent);
+				el.removeEventListener("load-more", onLoadMore);
+			};
+		}, [mounted]);
+		(0, react.useEffect)(() => {
+			const el = elementRef.current;
+			if (!el) return;
+			el.threads = drawerThreads;
+		}, [drawerThreads, mounted]);
+		(0, react.useEffect)(() => {
+			const el = elementRef.current;
+			if (!el) return;
+			el.loading = isLoading || licensePending;
+			el.error = listError ? listError.message : null;
+			el.activeThreadId = activeThreadId;
+			el.licensed = licensed || licensePending;
+			el.hasMore = hasMoreThreads;
+			el.fetchingMore = isFetchingMoreThreads;
+		}, [
+			isLoading,
+			listError,
+			activeThreadId,
+			licensed,
+			licensePending,
+			hasMoreThreads,
+			isFetchingMoreThreads,
+			mounted
+		]);
+		(0, react.useEffect)(() => {
+			const el = elementRef.current;
+			if (!el) return;
+			el.open = drawerOpen;
+		}, [drawerOpen, mounted]);
+		(0, react.useEffect)(() => {
+			const el = elementRef.current;
+			if (!el) return;
+			if (label !== void 0) el.label = label;
+		}, [label, mounted]);
+		(0, react.useEffect)(() => {
+			const el = elementRef.current;
+			if (!el) return;
+			if (licenseUrl !== void 0) el.licenseUrl = licenseUrl;
+		}, [licenseUrl, mounted]);
+		const rowChildren = (0, react.useMemo)(() => {
+			if (!renderRow) return null;
+			return drawerThreads.map((drawerThread) => {
+				const fullThread = threads.find((t) => t.id === drawerThread.id);
+				if (!fullThread) return null;
+				const content = renderRow(fullThread);
+				if (content === null || content === void 0) return null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					slot: `row:${drawerThread.id}`,
+					children: content
+				}, drawerThread.id);
+			});
+		}, [
+			renderRow,
+			drawerThreads,
+			threads
+		]);
+		if (!mounted) return null;
+		return react.default.createElement(_copilotkit_web_components_threads_drawer.COPILOTKIT_THREADS_DRAWER_TAG, {
+			ref: elementRef,
+			"data-testid": dataTestId
+		}, rowChildren);
+	}
+	CopilotThreadsDrawer.displayName = "CopilotThreadsDrawer";
+
 //#endregion
 //#region src/v2/components/WildcardToolCallRender.tsx
 	const WildcardToolCallRender = defineToolCallRenderer({
@@ -10668,6 +11204,7 @@ Object.defineProperty(exports, 'CopilotSidebarView', {
     return CopilotSidebarView;
   }
 });
+exports.CopilotThreadsDrawer = CopilotThreadsDrawer;
 exports.INTELLIGENCE_TURN_HEAD = INTELLIGENCE_TURN_HEAD;
 exports.IntelligenceIndicator = IntelligenceIndicator;
 exports.IntelligenceIndicatorView = IntelligenceIndicatorView;