@copilotkit/react-core 1.61.2 → 1.62.1

package/dist/{copilotkit-Be-o2UaU.mjs → copilotkit-BtRkFsNR.mjs}

@@ -1,9 +1,9 @@
 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 { 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 { 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";
@@ -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;
+		if (threadId) return threadId;
 		return randomUUID$1();
-	}, [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] = 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]
 	});
@@ -1400,307 +1523,25 @@ const useCopilotKit = () => {
 	useEffect(() => {
 		const subscription = context.copilotkit.subscribe({
 			onRuntimeConnectionStatusChanged: () => {
-				forceUpdate();
-			},
-			onHeadersChanged: () => {
-				forceUpdate();
-			}
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, []);
-	return context;
-};
-const LicenseContext = createContext({
-	status: null,
-	license: null,
-	checkFeature: () => true,
-	getLimit: () => null
-});
-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 = [];
-/**
-* 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;
-	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 "";
-		}
-	}
-}
+				forceUpdate();
+			},
+			onHeadersChanged: () => {
+				forceUpdate();
+			}
+		});
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, []);
+	return context;
+};
+const LicenseContext = createContext({
+	status: null,
+	license: null,
+	checkFeature: () => true,
+	getLimit: () => null
+});
+const useLicenseContext = () => useContext(LicenseContext);
 
 //#endregion
 //#region src/v2/hooks/use-render-tool-call.tsx
@@ -1756,10 +1597,13 @@ function useRenderToolCall() {
 	}, () => 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: (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);
 	}, [
@@ -1768,15 +1612,6 @@ function useRenderToolCall() {
 		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
@@ -3258,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";
@@ -3334,6 +3169,7 @@ function createA2UIMessageRenderer(options) {
 					agent,
 					copilotkit,
 					catalog,
+					onAction,
 					onReady: markSurfaceReady
 				}, surfaceId))
 			});
@@ -3354,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, {
@@ -3447,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
 /**
@@ -4000,10 +3879,10 @@ function useRenderActivityMessage() {
 
 //#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;
 	useEffect(() => {
 		const name = tool.name;
 		if (copilotkit.getTool({
@@ -4030,74 +3909,344 @@ function useFrontendTool(tool, deps) {
 		JSON.stringify(extraDeps)
 	]);
 }
-
-//#endregion
-//#region src/v2/hooks/use-component.tsx
+
+//#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 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.
+* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
 *
-* Use this when you want to display a typed visual component for a tool call
-* without manually wiring a full frontend tool object.
+* - 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__ */ 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__ */ 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-human-in-the-loop.tsx
@@ -4835,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.
@@ -4878,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);
@@ -4895,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]);
@@ -4915,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 () => {
@@ -4925,6 +5082,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		};
 	}, [store]);
 	useEffect(() => {
+		if (!enabled) return;
 		copilotkit.registerThreadStore(agentId, store);
 		return () => {
 			copilotkit.unregisterThreadStore(agentId);
@@ -4932,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);
@@ -4958,6 +5122,7 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		setHasDispatchedContext(true);
 	}, [
 		store,
+		enabled,
 		copilotkit.runtimeUrl,
 		runtimeStatus,
 		headersKey,
@@ -4981,9 +5146,16 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		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,
@@ -6170,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
 	});
 });
@@ -7275,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]
 			})
@@ -7318,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]
 		});
@@ -7340,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, {}),
@@ -7379,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
 					})
 				}),
@@ -7412,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,
@@ -7474,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
 			})
 		});
@@ -7489,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,
@@ -7753,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;
@@ -7769,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);
@@ -8119,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
 	});
@@ -8143,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",
@@ -8177,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
@@ -8537,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({
@@ -10719,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-Be-o2UaU.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