@copilotkit/react-core 1.70.2 → 1.71.0

package/dist/{copilotkit-DcFo270Y.cjs → copilotkit-B4Jb1QEy.cjs}

@@ -32,6 +32,7 @@ let _ag_ui_client = require("@ag-ui/client");
 let tailwind_merge = require("tailwind-merge");
 let lucide_react = require("lucide-react");
 let _copilotkit_shared = require("@copilotkit/shared");
+let _copilotkit_react_core_v2_context = require("@copilotkit/react-core/v2/context");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let class_variance_authority = require("class-variance-authority");
@@ -41,7 +42,6 @@ _radix_ui_react_tooltip = __toESM(_radix_ui_react_tooltip);
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 let streamdown = require("streamdown");
-let _copilotkit_react_core_v2_context = require("@copilotkit/react-core/v2/context");
 let zod = require("zod");
 let _copilotkit_a2ui_renderer = require("@copilotkit/a2ui-renderer");
 let zod_to_json_schema = require("zod-to-json-schema");
@@ -106,7 +106,12 @@ const CopilotChatDefaultLabels = {
 	assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
 	assistantMessageToolbarCopyMessageLabel: "Copy",
 	assistantMessageToolbarInspectorLabel: "View in Inspector",
-	assistantMessageToolbarInspectorLocalOnlyLabel: "Development Only",
+	assistantMessageToolbarInspectorDescription: "Open this message in the Inspector",
+	assistantMessageToolbarInspectorLocalOnlyLabel: "Local only",
+	assistantMessageToolbarInspectorLocalOnlyDescription: "Only visible on localhost or loopback hosts in development. Never shown in production.",
+	assistantMessageToolbarInspectorTitle: "CopilotKit Inspector",
+	assistantMessageToolbarInspectorHideLabel: "Hide this icon",
+	assistantMessageToolbarInspectorHideDescription: "Until you reload this page",
 	assistantMessageToolbarThumbsUpLabel: "Good response",
 	assistantMessageToolbarThumbsDownLabel: "Bad response",
 	assistantMessageToolbarReadAloudLabel: "Read aloud",
@@ -147,7 +152,8 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		...parentConfig?.labels,
 		...stableLabels
 	}), [stableLabels, parentConfig?.labels]);
-	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const providerAgentId = (0, _copilotkit_react_core_v2_context.useDefaultAgentId)();
+	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? providerAgentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const threadIdPropIsAuthoritative = threadId !== void 0 && hasExplicitThreadId !== false;
 	const isThreadIdControlled = threadIdPropIsAuthoritative;
 	const [activeThreadOverride, setActiveThreadOverride] = (0, react.useState)(null);
@@ -357,9 +363,9 @@ ControlledModalOpenScope.displayName = "ControlledModalOpenScope";
 
 //#endregion
 //#region src/v2/lib/utils.ts
-const twMerge$9 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
+const twMerge$10 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
 function cn(...inputs) {
-	return twMerge$9((0, clsx.clsx)(inputs));
+	return twMerge$10((0, clsx.clsx)(inputs));
 }
 
 //#endregion
@@ -504,6 +510,14 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		...props
 	});
 }
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Label, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:font-medium cpk:data-[inset]:pl-8", className),
+		...props
+	});
+}
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, {
 		"data-slot": "dropdown-menu-separator",
@@ -1549,6 +1563,29 @@ const ToolCallRenderer = react.default.memo(function ToolCallRenderer({ toolCall
 	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
 	return true;
 });
+const IS_DEVELOPMENT$1 = process.env.NODE_ENV !== "production";
+/**
+* Reports tool calls that resolved to no renderer.
+*
+* A tool call with no renderer paints an empty message container and says
+* nothing else, so the only signal a developer gets today is a blank space in
+* the chat. This names the call and the renderers that *are* registered, which
+* is the whole diagnosis when the cause is a name that does not match.
+*
+* @param toolNames - The unmatched tool names collected during render.
+* @param registered - The registry as it stands now, re-read at report time.
+* @param alreadyWarned - Names already reported, mutated to keep this once per name.
+*/
+function warnAboutUnrenderedToolCalls(toolNames, registered, alreadyWarned) {
+	const registeredNames = Array.from(new Set(registered.map((rc) => rc.name)));
+	const hasWildcard = registeredNames.includes("*");
+	for (const toolName of toolNames) {
+		if (hasWildcard || registeredNames.includes(toolName)) continue;
+		if (alreadyWarned.has(toolName)) continue;
+		alreadyWarned.add(toolName);
+		console.warn(`[CopilotKit] The agent called the tool "${toolName}", and no renderer is registered for it, so that message rendered nothing. ` + (registeredNames.length === 0 ? "No tool-call renderers are registered. " : `Registered renderers: ${registeredNames.map((name) => `"${name}"`).join(", ")}. `) + `Register one with useRenderTool({ name: "${toolName}", ... }), or call useDefaultRenderTool() for a built-in card that covers every tool the agent calls. This warning is development-only.`);
+	}
+}
 /**
 * Hook that returns a function to render tool calls based on the render functions
 * defined in CopilotKitProvider.
@@ -1558,13 +1595,18 @@ const ToolCallRenderer = react.default.memo(function ToolCallRenderer({ toolCall
 function useRenderToolCall() {
 	const { copilotkit, executingToolCallIds } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const agentId = useCopilotChatConfiguration()?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const unrenderedToolNames = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const warnedToolNames = (0, react.useRef)(/* @__PURE__ */ new Set());
 	const renderToolCalls = (0, react.useSyncExternalStore)((callback) => {
 		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
 	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
-	return (0, react.useCallback)(({ toolCall, toolMessage }) => {
+	const renderToolCall = (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;
+		if (!renderConfig) {
+			if (IS_DEVELOPMENT$1) unrenderedToolNames.current.add(toolCall.function.name);
+			return null;
+		}
 		const RenderComponent = renderConfig.render;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRenderer, {
 			toolCall,
@@ -1577,25 +1619,43 @@ function useRenderToolCall() {
 		executingToolCallIds,
 		agentId
 	]);
+	(0, react.useEffect)(() => {
+		if (!IS_DEVELOPMENT$1) return;
+		if (unrenderedToolNames.current.size === 0) return;
+		const timer = setTimeout(() => {
+			const pending = Array.from(unrenderedToolNames.current);
+			unrenderedToolNames.current.clear();
+			warnAboutUnrenderedToolCalls(pending, copilotkit.renderToolCalls, warnedToolNames.current);
+		}, 0);
+		return () => clearTimeout(timer);
+	});
+	return renderToolCall;
 }
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
-const CopilotKitInspector = ({ core, openRequest }) => {
+const CopilotKitInspector = ({ core, openRequest, onVisibilityChange }) => {
 	const mountRef = react.useRef(null);
 	const inspectorRef = react.useRef(null);
 	const latestCoreRef = react.useRef(core ?? null);
 	const latestOpenRequestRef = react.useRef(openRequest);
+	const visibilityCallbackRef = react.useRef(onVisibilityChange);
+	visibilityCallbackRef.current = onVisibilityChange;
 	latestCoreRef.current = core ?? null;
 	latestOpenRequestRef.current = openRequest;
 	react.useEffect(() => {
 		let mounted = true;
 		let inspector = null;
+		const handleVisibilityChange = (event) => {
+			const visible = event.detail?.visible;
+			visibilityCallbackRef.current?.(visible === true);
+		};
 		import("@copilotkit/web-inspector").then((mod) => {
 			if (!mounted || !mountRef.current) return;
 			mod.defineWebInspector?.();
 			inspector = mountRef.current.ownerDocument.createElement(mod.WEB_INSPECTOR_TAG);
 			mod.configureWebInspectorElement(inspector, latestCoreRef.current);
+			inspector.addEventListener("cpk-inspector-visibility-change", handleVisibilityChange);
 			mountRef.current.appendChild(inspector);
 			inspectorRef.current = inspector;
 			const request = latestOpenRequestRef.current;
@@ -1605,7 +1665,9 @@ const CopilotKitInspector = ({ core, openRequest }) => {
 		});
 		return () => {
 			mounted = false;
+			inspector?.removeEventListener("cpk-inspector-visibility-change", handleVisibilityChange);
 			inspector?.remove();
+			visibilityCallbackRef.current?.(false);
 			if (inspectorRef.current === inspector) inspectorRef.current = null;
 		};
 	}, []);
@@ -3055,6 +3117,95 @@ const A2UISurfaceContentSchema = zod.z.object({
 	a2ui_operations: zod.z.array(zod.z.any()).optional(),
 	...A2UILifecycleFields
 }).passthrough();
+const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
+/**
+* How long to wait for a surface to report its first paint before giving up on
+* the loader cross-over. Reaching it also means `onReady` never fired, which is
+* the signal the warning below reports.
+*/
+const PAINT_FALLBACK_MS = 8e3;
+/**
+* Names the operation kinds a surface received, for a warning that has to say
+* what did arrive as well as what did not.
+*
+* @param operations - The operations grouped under one surface.
+* @returns A comma-separated list of operation keys, or "none".
+*/
+function describeOperationKinds(operations) {
+	const kinds = /* @__PURE__ */ new Set();
+	for (const operation of operations) {
+		if (!operation || typeof operation !== "object") continue;
+		for (const key of Object.keys(operation)) if (key !== "version") kinds.add(key);
+	}
+	return kinds.size === 0 ? "none" : Array.from(kinds).join(", ");
+}
+/**
+* Reports surfaces that received operations and never painted.
+*
+* Reaching {@link PAINT_FALLBACK_MS} with no `onReady` means the operations were
+* accepted, were not malformed enough to raise the provider's error state, and
+* still put nothing on screen. Left alone that is invisible: the loader drops,
+* the turn finishes, and the only trace is an empty placeholder above the reply.
+*
+* `surfaceHasRenderableContent` already knows which half is missing, so the
+* warning says which rather than making the reader re-derive it.
+*
+* @param grouped - Operations grouped by surface id.
+*/
+function warnAboutUnpaintedSurfaces(grouped) {
+	for (const [surfaceId, operations] of grouped) {
+		if (surfaceHasRenderableContent(operations)) continue;
+		const cause = operations.filter((o) => o?.updateComponents).length === 0 ? "no updateComponents operation arrived, so the surface was never given anything to draw" : "its components address their values by \"path\" and no updateDataModel carried a non-empty value, so every bound component drew empty";
+		console.warn(`[CopilotKit] A2UI surface "${surfaceId}" received operations and never painted after ${String(PAINT_FALLBACK_MS)}ms: ${cause}. Operations received: ${describeOperationKinds(operations)}. The payload was accepted, so check what the agent sent rather than the client wiring. This warning is development-only.`);
+	}
+}
+/**
+* Names the component ids a surface was sent, for a warning about the one id
+* that is missing.
+*
+* @param operations - The operations grouped under one surface.
+* @returns A quoted, comma-separated list of ids, or "none".
+*/
+function describeComponentIds(operations) {
+	const ids = [];
+	for (const operation of operations) {
+		const components = operation?.updateComponents?.components;
+		if (!Array.isArray(components)) continue;
+		for (const component of components) {
+			const id = component?.id;
+			if (typeof id === "string" && !ids.includes(id)) ids.push(id);
+		}
+	}
+	return ids.length === 0 ? "none" : ids.map((id) => `"${id}"`).join(", ");
+}
+/**
+* Reports a surface that is still waiting for its {@link ROOT_COMPONENT_ID}
+* component once its operations have stopped arriving.
+*
+* Both renderers begin walking a surface at that one id, and treat an id they
+* cannot find as not arrived yet — an animated placeholder. That is right while
+* operations stream. Once they have stopped it is not waiting, it is stuck, and
+* every other check calls it healthy: the surface exists, `processMessages` did
+* not throw, the component types were never reached, and
+* `surfaceHasRenderableContent` says yes on the strength of components plus a
+* data model, so `onReady` fires and the never-painted report is suppressed.
+* A complete, accepted payload therefore animates a grey box forever in silence.
+*
+* Reads the live components model rather than scanning the operations for the
+* id, so it covers every way the root can fail to resolve — not only a payload
+* that never named one.
+*
+* @param surfaceId - The surface the operations were addressed to.
+* @param operations - The operations processed for that surface.
+* @param surface - The live surface model, already known to exist.
+*/
+function warnAboutUnresolvedRoot(surfaceId, operations, surface) {
+	if (surface?.componentsModel?.get?.(_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID)) return;
+	const componentOps = operations.filter((o) => o?.updateComponents);
+	if (componentOps.length === 0) return;
+	const cause = componentOps.some((o) => o.updateComponents?.components?.some?.((c) => c?.id === _copilotkit_a2ui_renderer.ROOT_COMPONENT_ID)) ? `a component with id "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}" WAS sent, so the components did not reach the surface's model — check for an A2UI render error above, or a catalog that took none of them` : `the components it received are named ${describeComponentIds(operations)}, and none of them is "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}" — rename the entry-point component to "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}", and make every other component reachable from it through child/children`;
+	console.warn(`[CopilotKit] A2UI surface "${surfaceId}" has no "${_copilotkit_a2ui_renderer.ROOT_COMPONENT_ID}" component ${String(PAINT_FALLBACK_MS)}ms after its last operations were processed, so it is showing the placeholder for a component that has not arrived yet and will keep showing it: ${cause}. Operations received: ${describeOperationKinds(operations)}. This warning is development-only.`);
+}
 function createA2UIMessageRenderer(options) {
 	const { theme, catalog, loadingComponent, recovery, onAction } = options;
 	const showAfterMs = recovery?.showAfterMs ?? 2e3;
@@ -3088,6 +3239,8 @@ function createA2UIMessageRenderer(options) {
 				return groups;
 			}, [operations]);
 			const hasOps = groupedOperations.size > 0;
+			const groupedOperationsRef = (0, react.useRef)(groupedOperations);
+			groupedOperationsRef.current = groupedOperations;
 			const renderLifecycle = (c) => {
 				const status = c?.status;
 				const debugExposure = resolveDebugExposure(c, optionDebugExposure);
@@ -3119,7 +3272,10 @@ function createA2UIMessageRenderer(options) {
 					readyRef.current = false;
 					return;
 				}
-				const t = setTimeout(() => setSurfaceReady(true), 8e3);
+				const t = setTimeout(() => {
+					setSurfaceReady(true);
+					if (IS_DEVELOPMENT && !readyRef.current) warnAboutUnpaintedSurfaces(groupedOperationsRef.current);
+				}, PAINT_FALLBACK_MS);
 				return () => clearTimeout(t);
 			}, [hasOps]);
 			if (!hasOps) return renderLifecycle(content);
@@ -3243,8 +3399,21 @@ function SurfaceMessageProcessor({ surfaceId, operations, onReady }) {
 		const hash = JSON.stringify(operations);
 		if (hash === lastHashRef.current) return;
 		lastHashRef.current = hash;
-		processMessages(getSurface(surfaceId) ? operations.filter((op) => !op?.createSurface) : operations);
+		const ops = getSurface(surfaceId) ? operations.filter((op) => !op?.createSurface) : operations;
+		processMessages(ops);
 		if (onReady && surfaceHasRenderableContent(operations)) onReady();
+		if (!IS_DEVELOPMENT) return;
+		if (!getSurface(surfaceId)) {
+			const missingSurfaceCheck = setTimeout(() => {
+				if (getSurface(surfaceId)) return;
+				console.warn(`[CopilotKit] A2UI processed ${String(ops.length)} operation(s) addressed to surface "${surfaceId}" and no surface by that id exists, so this card rendered nothing. Operations received: ${describeOperationKinds(ops)}. A createSurface for "${surfaceId}" has to arrive before, or with, the operations that target it. This warning is development-only.`);
+			}, 0);
+			return () => clearTimeout(missingSurfaceCheck);
+		}
+		const unresolvedRootCheck = setTimeout(() => {
+			warnAboutUnresolvedRoot(surfaceId, operations, getSurface(surfaceId));
+		}, PAINT_FALLBACK_MS);
+		return () => clearTimeout(unresolvedRootCheck);
 	}, [
 		processMessages,
 		getSurface,
@@ -3271,10 +3440,26 @@ function surfaceHasRenderableContent(operations) {
 		return Object.values(v).some((x) => Array.isArray(x) ? x.length > 0 : x !== null && x !== void 0 && x !== "");
 	});
 }
+/**
+* Resolves the surface an operation addresses.
+*
+* The nested v0.9 `surfaceId` wins, because that is the id `MessageProcessor`
+* creates the surface under. Grouping by a top-level `surfaceId` instead files
+* the operations against a surface that never exists, which paints nothing —
+* the silence the missing-surface report above now names. A top-level
+* `surfaceId` is not the v0.9 shape, so it is honoured only when no nested id is
+* present. `getSurfaceId` in `@copilotkit/a2ui-renderer`'s web-components path
+* resolves it in the same order; the two disagreeing is what OSS-1048 recorded.
+*
+* @param operation - One A2UI operation, of any shape.
+* @returns The surface id, or null when the operation names none.
+*/
 function getOperationSurfaceId(operation) {
 	if (!operation || typeof operation !== "object") return null;
+	const nested = operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId;
+	if (typeof nested === "string") return nested;
 	if (typeof operation.surfaceId === "string") return operation.surfaceId;
-	return operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
+	return null;
 }
 
 //#endregion
@@ -3488,6 +3673,9 @@ const COPILOT_CLOUD_CHAT_URL$1 = "https://api.cloud.copilotkit.ai/copilotkit/v1"
 const EMPTY_HEADERS = Object.freeze({});
 const EMPTY_PROPERTIES = Object.freeze({});
 const EMPTY_AGENTS = Object.freeze({});
+/** Registration name of a catch-all tool: handles any otherwise-unhandled call. */
+const WILDCARD_TOOL_NAME$1 = "*";
+const HUMAN_IN_THE_LOOP_ABORTED_MESSAGE = "Human-in-the-loop interaction aborted";
 const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:
 
 - Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.
@@ -3508,14 +3696,19 @@ function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	}, [value, warningMessage]);
 	return value;
 }
-const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, useSingleEndpoint, onError, a2ui, defaultThrottleMs, debug }) => {
+const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, useSingleEndpoint, onError, a2ui, defaultThrottleMs, debug }) => {
 	const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
+	const [inspectorVisible, setInspectorVisible] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		setShouldRenderInspector((0, _copilotkit_shared.shouldEnableInspector)({
 			enableInspector,
 			isBrowser: true,
 			isDevelopment: process.env.NODE_ENV === "development"
-		}));
+		}) && [
+			"localhost",
+			"127.0.0.1",
+			"[::1]"
+		].includes(window.location.hostname));
 	}, [enableInspector]);
 	const [inspectorOpenRequest, setInspectorOpenRequest] = (0, react.useState)(null);
 	const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = (0, react.useState)(false);
@@ -3531,9 +3724,15 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		setInspectorOpenRequest({ ...request });
 	}, []);
 	const inspectorContextValue = (0, react.useMemo)(() => ({
-		isInspectorEnabled: shouldRenderInspector,
+		providerEnableInspector: enableInspector,
+		isInspectorEnabled: shouldRenderInspector && inspectorVisible,
 		openInspector: requestInspectorOpen
-	}), [shouldRenderInspector, requestInspectorOpen]);
+	}), [
+		enableInspector,
+		shouldRenderInspector,
+		inspectorVisible,
+		requestInspectorOpen
+	]);
 	const renderToolCallsList = useStableArrayProp(renderToolCalls, "renderToolCalls must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.", (initial, next) => {
 		const key = (rc) => `${rc?.agentId ?? ""}:${rc?.name ?? ""}`;
 		const setFrom = (arr) => new Set(arr.map(key));
@@ -3606,6 +3805,11 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 	}
 	const chatApiEndpoint = runtimeUrl ?? (resolvedPublicKey ? COPILOT_CLOUD_CHAT_URL$1 : void 0);
 	const frontendToolsList = useStableArrayProp(frontendTools, "frontendTools must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.");
+	/**
+	* A `humanInTheLoop` prop tool call that is parked, waiting on the user.
+	* Keyed by tool call id, so parallel calls of one tool stay independent.
+	*/
+	const pendingHumanInTheLoopRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const humanInTheLoopList = useStableArrayProp(humanInTheLoop, "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead.");
 	const sandboxFunctionsList = useStableArrayProp(openGenerativeUI?.sandboxFunctions, "openGenerativeUI.sandboxFunctions must be a stable array.");
 	const processedHumanInTheLoopTools = (0, react.useMemo)(() => {
@@ -3618,20 +3822,52 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 				parameters: tool.parameters,
 				followUp: tool.followUp,
 				...tool.agentId && { agentId: tool.agentId },
-				handler: async () => {
-					return new Promise((resolve) => {
-						console.warn(`Human-in-the-loop tool '${tool.name}' called but no interactive handler is set up.`);
-						resolve(void 0);
+				handler: async (_args, context) => {
+					const signal = context?.signal;
+					const key = context?.toolCall?.id ?? tool.name;
+					return new Promise((resolve, reject) => {
+						if (signal?.aborted) {
+							reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
+							return;
+						}
+						const pending = { resolve };
+						pendingHumanInTheLoopRef.current.set(key, pending);
+						if (signal) {
+							const onAbort = () => {
+								pendingHumanInTheLoopRef.current.delete(key);
+								reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
+							};
+							signal.addEventListener("abort", onAbort, { once: true });
+							pending.detachAbort = () => {
+								signal.removeEventListener("abort", onAbort);
+							};
+						}
 					});
 				}
 			};
 			processedTools.push(frontendTool);
-			if (tool.render) processedRenderToolCalls.push({
-				name: tool.name,
-				args: tool.parameters,
-				render: tool.render,
-				...tool.agentId && { agentId: tool.agentId }
-			});
+			if (tool.render) {
+				const ToolComponent = tool.render;
+				const RenderComponent = (props) => (0, react.createElement)(ToolComponent, {
+					...props,
+					name: tool.name === WILDCARD_TOOL_NAME$1 ? props.name : tool.name,
+					description: tool.description || "",
+					agentId: tool.agentId,
+					respond: props.status === _copilotkit_core.ToolCallStatus.Executing ? async (result) => {
+						const pending = pendingHumanInTheLoopRef.current.get(props.toolCallId);
+						if (!pending) return;
+						pending.detachAbort?.();
+						pendingHumanInTheLoopRef.current.delete(props.toolCallId);
+						pending.resolve(result);
+					} : void 0
+				});
+				processedRenderToolCalls.push({
+					name: tool.name,
+					args: tool.parameters,
+					render: RenderComponent,
+					...tool.agentId && { agentId: tool.agentId }
+				});
+			}
 		});
 		return {
 			tools: processedTools,
@@ -3893,9 +4129,13 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotKitInspectorContextProvider, {
 						value: inspectorContextValue,
-						children: [children, shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_react_core_v2_context.CopilotKitAgentIdContext.Provider, {
+							value: agentId,
+							children
+						}), shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, {
 							core: copilotkit,
-							openRequest: inspectorOpenRequest
+							openRequest: inspectorOpenRequest,
+							onVisibilityChange: setInspectorVisible
 						}) : null]
 					}),
 					runtimeLicenseWarningStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "no_license" }),
@@ -4477,7 +4717,8 @@ function useAgent({ agentId, threadId, runtimeAgentId, updates, throttleMs } = {
 	if (runtimeAgentId != null && threadId == null) throw new Error(`useAgent: \`runtimeAgentId\` requires \`threadId\`. A proxied agent exists to scope a thread to a private instance; without a threadId it behaves like the shared agent while adding a registration and a local agentId to keep unique. Either pass the thread, e.g. useAgent({ agentId: "${agentId ?? "chat-1"}", runtimeAgentId: "${runtimeAgentId}", threadId }), or bind to the agent directly with useAgent({ agentId: "${runtimeAgentId}" }).`);
 	if (runtimeAgentId != null && agentId == null) throw new Error(`useAgent: \`runtimeAgentId\` requires an explicit \`agentId\`. The proxied agent is registered under \`agentId\`, and the usual fallbacks (chat configuration, then "${_copilotkit_shared.DEFAULT_AGENT_ID}") name agents that already exist — registering over one throws or shadows it. Pick a local id for this hook, e.g. useAgent({ agentId: "chat-1", runtimeAgentId: "${runtimeAgentId}", threadId }).`);
 	const chatConfig = useCopilotChatConfiguration();
-	const resolvedAgentId = agentId ?? chatConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const providerAgentId = (0, _copilotkit_react_core_v2_context.useDefaultAgentId)();
+	const resolvedAgentId = agentId ?? chatConfig?.agentId ?? providerAgentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const providerThrottleMs = copilotkit.defaultThrottleMs;
 	const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
@@ -4705,7 +4946,12 @@ function useAgentContext(context) {
 function useSuggestions({ agentId } = {}) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const config = useCopilotChatConfiguration();
-	const resolvedAgentId = (0, react.useMemo)(() => agentId ?? config?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID, [agentId, config?.agentId]);
+	const providerAgentId = (0, _copilotkit_react_core_v2_context.useDefaultAgentId)();
+	const resolvedAgentId = (0, react.useMemo)(() => agentId ?? config?.agentId ?? providerAgentId ?? _copilotkit_shared.DEFAULT_AGENT_ID, [
+		agentId,
+		config?.agentId,
+		providerAgentId
+	]);
 	const [suggestions, setSuggestions] = (0, react.useState)(() => {
 		return copilotkit.getSuggestions(resolvedAgentId).suggestions;
 	});
@@ -6009,6 +6255,289 @@ function CopilotChatToolCallsView({ message, messages = [] }) {
 	}) });
 }
 
+//#endregion
+//#region src/v2/components/chat/CopilotChatInspectorButton.tsx
+let shortcutsHidden = false;
+const listeners = /* @__PURE__ */ new Set();
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+const getSnapshot = () => shortcutsHidden;
+const getServerSnapshot = () => false;
+function useInspectorShortcutsHidden() {
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+function hideShortcuts() {
+	shortcutsHidden = true;
+	listeners.forEach((listener) => listener());
+}
+function InspectorKiteIcon({ className, ...props }) {
+	const id = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		...props,
+		"aria-hidden": "true",
+		className: (0, tailwind_merge.twMerge)("cpk:size-4", className),
+		viewBox: "4.57 3.36 17.8 17.8",
+		fill: "none",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M6.36084 10.9855C8.34277 8.393 9.98843 5.82939 10.6204 3.75914C10.6382 3.70281 10.7043 3.67888 10.7534 3.7114C12.9536 5.16894 16.9635 6.12833 20.5086 6.15085C20.5703 6.15124 20.6124 6.2114 20.5895 6.26829C19.4109 9.25938 17.9705 14.6189 17.9148 20.7392C17.9148 20.8301 17.7873 20.8627 17.7419 20.7837C15.7236 17.2522 9.26021 12.2898 6.39414 11.1186C6.34112 11.0968 6.32556 11.0313 6.36084 10.9855Z",
+				fill: `url(#${id}-paint0_linear)`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M13.0475 9.39974C9.95016 10.3806 7.11935 10.9259 6.44331 11.0498C6.40027 11.0577 6.39115 11.1172 6.43152 11.134C9.3203 12.3347 15.7516 17.2826 17.7511 20.7998C17.7551 20.8075 17.7647 20.8103 17.7728 20.8068C17.7809 20.803 17.7853 20.793 17.7819 20.7844L13.0475 9.39974Z",
+				fill: `url(#${id}-paint1_linear)`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M10.762 3.705C13.4137 5.15161 16.4787 5.80132 20.545 6.14367C20.5703 6.14585 20.5787 6.18008 20.5557 6.19197C20.0359 6.45923 17.0574 7.97512 14.8455 8.78701C14.2524 9.00453 13.6564 9.20632 13.0692 9.39249C13.0562 9.39656 13.0419 9.39015 13.0369 9.37774L10.7005 3.75979C10.6849 3.72196 10.7257 3.68538 10.762 3.705Z",
+				fill: `url(#${id}-paint2_linear)`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M10.7145 3.79041L17.8305 20.7659",
+				stroke: "#513C9F",
+				strokeWidth: "0.17284",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M6.44531 11.0476C6.44531 11.0476 10.375 10.3422 14.0686 9.06804C17.7623 7.7939 20.5122 6.23373 20.5122 6.23373",
+				stroke: "#513C9F",
+				strokeWidth: "0.17284",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M11.6914 5.93518L9.05534 14.7068M9.05534 14.7068H15.3203M9.05534 14.7068L0.15625 26.3646",
+				stroke: "#ABABAB",
+				strokeWidth: "0.302474",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M6.02539 23.9646L4.85806 24.1287C5.46272 25.7287 6.70381 26.4276 8.18528 26.4276C11.8147 26.4276 10.707 22.3227 12.8103 22.3227C14.3358 22.3227 13.7155 25.6498 16.9992 25.6498C19.0029 25.6498 19.2028 23.631 18.8607 22.7625C18.8589 22.7572 18.8568 22.7524 18.8538 22.7476L18.3166 21.9253C18.2817 21.8706 18.1968 21.8912 18.1907 21.9562L18.0908 22.9529C18.0838 23.0222 18.0857 23.0913 18.0936 23.1605C18.1764 23.8491 18.2291 25.5202 16.9992 25.5202C15.7015 25.5202 15.3895 22.2362 12.8103 22.2362C9.78393 22.2362 10.1726 26.298 8.31487 26.298C7.08938 26.298 6.15447 24.9153 6.02539 23.9646Z",
+				fill: `url(#${id}-paint3_linear)`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+					id: `${id}-paint0_linear`,
+					x1: "15.5372",
+					y1: "5.0278",
+					x2: "12.0802",
+					y2: "14.534",
+					gradientUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#6430AB" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "1",
+						stopColor: "#AA89D8"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+					id: `${id}-paint1_linear`,
+					x1: "12.8583",
+					y1: "10.3858",
+					x2: "8.40764",
+					y2: "18.9846",
+					gradientUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#005DBB" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "1",
+						stopColor: "#3D92E8"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+					id: `${id}-paint2_linear`,
+					x1: "14.8452",
+					y1: "5.02774",
+					x2: "13.5047",
+					y2: "9.21911",
+					gradientUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#1B70C4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "1",
+						stopColor: "#54A4F2"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+					id: `${id}-paint3_linear`,
+					x1: "4.85806",
+					y1: "24.2455",
+					x2: "18.9963",
+					y2: "24.2455",
+					gradientUnits: "userSpaceOnUse",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#4497EA" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+							offset: "0.254755",
+							stopColor: "#1463B2"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+							offset: "0.498725",
+							stopColor: "#0A437D"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+							offset: "0.666667",
+							stopColor: "#2476C8"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+							offset: "0.972542",
+							stopColor: "#0C549A"
+						})
+					]
+				})
+			] })
+		]
+	});
+}
+function CopilotChatInspectorButton({ title, className, onClick, onPointerDown, onPointerEnter, onPointerLeave, onKeyDown, disabled, ...props }) {
+	const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+	const { isInspectorEnabled } = useCopilotKitInspector();
+	const hidden = useInspectorShortcutsHidden();
+	const [open, setOpen] = (0, react.useState)(false);
+	const [dark, setDark] = (0, react.useState)(false);
+	const trigger = (0, react.useRef)(null);
+	const closeTimer = (0, react.useRef)(null);
+	const openedByHover = (0, react.useRef)(false);
+	const primaryLabel = title || labels.assistantMessageToolbarInspectorLabel;
+	const cancelClose = () => {
+		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+		closeTimer.current = null;
+	};
+	(0, react.useEffect)(() => cancelClose, []);
+	const changeOpen = (next) => {
+		cancelClose();
+		if (next) setDark(!!trigger.current?.closest(".dark"));
+		setOpen(next);
+	};
+	const scheduleClose = () => {
+		cancelClose();
+		closeTimer.current = setTimeout(() => {
+			if (openedByHover.current) setOpen(false);
+		}, 180);
+	};
+	if (!isInspectorEnabled || hidden) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenu, {
+		open,
+		onOpenChange: changeOpen,
+		modal: false,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				...props,
+				ref: trigger,
+				type: "button",
+				disabled,
+				variant: "assistantMessageToolbarButton",
+				size: "icon",
+				"data-testid": "copilot-inspector-button",
+				"aria-label": `${labels.assistantMessageToolbarInspectorTitle} (${labels.assistantMessageToolbarInspectorLocalOnlyLabel.toLowerCase()})`,
+				className: (0, tailwind_merge.twMerge)("cpk:size-8 cpk:p-1.5", className),
+				onPointerEnter: (event) => {
+					onPointerEnter?.(event);
+					if (!disabled && event.pointerType !== "touch") {
+						openedByHover.current = true;
+						changeOpen(true);
+					}
+				},
+				onPointerLeave: (event) => {
+					onPointerLeave?.(event);
+					scheduleClose();
+				},
+				onPointerDown: (event) => {
+					onPointerDown?.(event);
+					event.preventDefault();
+				},
+				onClick: (event) => {
+					changeOpen(false);
+					onClick?.(event);
+				},
+				onKeyDown: (event) => {
+					openedByHover.current = false;
+					onKeyDown?.(event);
+					if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+						event.preventDefault();
+						event.currentTarget.click();
+					}
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Wrench, {
+					"aria-hidden": "true",
+					className: "cpk:size-4",
+					"data-testid": "copilot-inspector-icon"
+				})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuContent, {
+			align: "start",
+			side: "top",
+			sideOffset: 6,
+			className: (0, tailwind_merge.twMerge)("cpk:w-64 cpk:p-1 cpk:text-sm", dark && "dark"),
+			onPointerEnter: cancelClose,
+			onPointerLeave: scheduleClose,
+			onKeyDown: () => {
+				openedByHover.current = false;
+			},
+			onOpenAutoFocus: (event) => {
+				if (openedByHover.current) event.preventDefault();
+			},
+			onCloseAutoFocus: (event) => {
+				if (openedByHover.current) event.preventDefault();
+			},
+			onFocusOutside: () => changeOpen(false),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuLabel, {
+					className: "cpk:flex cpk:items-center cpk:justify-between cpk:gap-3 cpk:px-2 cpk:py-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cpk:text-xs cpk:font-medium",
+						children: labels.assistantMessageToolbarInspectorTitle
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, {
+						delayDuration: 1e3,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								tabIndex: 0,
+								className: "cpk:cursor-help cpk:rounded cpk:bg-muted cpk:px-1.5 cpk:py-0.5 cpk:text-[10px] cpk:font-normal cpk:text-muted-foreground",
+								children: labels.assistantMessageToolbarInspectorLocalOnlyLabel
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+							side: "top",
+							sideOffset: 6,
+							className: (0, tailwind_merge.twMerge)("cpk:max-w-48 cpk:text-wrap", dark && "dark"),
+							onPointerEnter: cancelClose,
+							onPointerLeave: scheduleClose,
+							children: labels.assistantMessageToolbarInspectorLocalOnlyDescription
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick,
+						className: "cpk:w-full cpk:cursor-pointer cpk:items-start cpk:text-left",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InspectorKiteIcon, { className: "cpk:mt-0.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cpk:block",
+							children: primaryLabel
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cpk:block cpk:text-xs cpk:text-muted-foreground",
+							children: labels.assistantMessageToolbarInspectorDescription
+						})] })]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuItem, {
+					onSelect: hideShortcuts,
+					className: "cpk:cursor-pointer cpk:items-start",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EyeOff, {
+						"aria-hidden": "true",
+						className: "cpk:mt-0.5"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cpk:block",
+						children: labels.assistantMessageToolbarInspectorHideLabel
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cpk:block cpk:text-xs cpk:text-muted-foreground",
+						children: labels.assistantMessageToolbarInspectorHideDescription
+					})] })]
+				})
+			]
+		})]
+	});
+}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatAssistantMessage.tsx
 /**
@@ -6029,30 +6558,32 @@ function BoundInspectorButton({ inspectorButton, messageId, openInspector, ...pr
 function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp, onThumbsDown, onReadAloud, onRegenerate, additionalToolbarItems, toolbarVisible = true, markdownRenderer, toolbar, copyButton, inspectorButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton, toolCallsView, children, className, ...props }) {
 	useKatexStyles();
 	const { isInspectorEnabled, openInspector } = useCopilotKitInspector();
+	const shortcutsHidden = useInspectorShortcutsHidden();
+	const showInspectorShortcut = isInspectorEnabled && !shortcutsHidden;
 	const boundMarkdownRenderer = renderSlot(markdownRenderer, CopilotChatAssistantMessage.MarkdownRenderer, { content: message.content || "" });
 	const boundCopyButton = renderSlot(copyButton, CopilotChatAssistantMessage.CopyButton, { onClick: async () => {
 		if (message.content) return await (0, _copilotkit_shared.copyToClipboard)(message.content);
 		return false;
 	} });
 	const boundThumbsUpButton = renderSlot(thumbsUpButton, CopilotChatAssistantMessage.ThumbsUpButton, { onClick: onThumbsUp ? () => onThumbsUp(message) : void 0 });
-	const boundInspectorButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundInspectorButton, {
+	const boundInspectorButton = showInspectorShortcut ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundInspectorButton, {
 		inspectorButton,
 		messageId: message.id,
 		openInspector
-	});
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
 	const boundThumbsDownButton = renderSlot(thumbsDownButton, CopilotChatAssistantMessage.ThumbsDownButton, { onClick: onThumbsDown ? () => onThumbsDown(message) : void 0 });
 	const boundReadAloudButton = renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud ? () => onReadAloud(message) : void 0 });
 	const boundRegenerateButton = renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate ? () => onRegenerate(message) : void 0 });
 	const boundToolbar = renderSlot(toolbar, CopilotChatAssistantMessage.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "cpk:flex cpk:items-center cpk:gap-1",
+		className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-1",
 		children: [
 			boundCopyButton,
-			isInspectorEnabled && boundInspectorButton,
 			(onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
 			(onThumbsDown || thumbsDownButton) && boundThumbsDownButton,
 			(onReadAloud || readAloudButton) && boundReadAloudButton,
 			(onRegenerate || regenerateButton) && boundRegenerateButton,
-			additionalToolbarItems
+			additionalToolbarItems,
+			showInspectorShortcut && boundInspectorButton
 		]
 	}) });
 	const boundToolCallsView = renderSlot(toolCallsView, CopilotChatToolCallsView, {
@@ -6061,7 +6592,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp,
 	});
 	const hasContent = !!(message.content && message.content.trim().length > 0);
 	const isLatestAssistantMessage = message.role === "assistant" && messages?.[messages.length - 1]?.id === message.id;
-	const shouldShowToolbar = toolbarVisible && (hasContent || isInspectorEnabled) && !(isRunning && isLatestAssistantMessage);
+	const shouldShowToolbar = toolbarVisible && (hasContent || showInspectorShortcut) && !(isRunning && isLatestAssistantMessage);
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
 		style: { display: "contents" },
@@ -6102,110 +6633,6 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp,
 		]
 	});
 }
-function CopilotKitColoredIcon() {
-	const gradientId = (0, react.useId)().replace(/:/g, "");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		"aria-hidden": "true",
-		className: "cpk:size-5",
-		"data-testid": "copilot-inspector-icon",
-		viewBox: "0 0 24 24",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M8.162 7.758c2.093-2.738 3.831-5.445 4.498-7.63a.093.093 0 01.14-.051c2.324 1.539 6.558 2.552 10.301 2.576a.09.09 0 01.085.124c-1.243 3.158-2.765 8.817-2.823 15.28-.001.095-.135.13-.183.046-2.131-3.729-8.955-8.968-11.982-10.205a.09.09 0 01-.036-.14z",
-				fill: `url(#${gradientId}-purple)`
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M15.223 6.083A61.492 61.492 0 018.25 7.827c-.045.008-.055.071-.012.089 3.05 1.267 9.84 6.492 11.952 10.206a.017.017 0 00.022.007.018.018 0 00.01-.024l-4.999-12.02z",
-				fill: `url(#${gradientId}-blue)`
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M12.81.07c2.8 1.528 6.037 2.214 10.33 2.575.028.002.036.039.012.051-.55.282-3.695 1.883-6.03 2.74-.626.23-1.256.443-1.876.64a.028.028 0 01-.033-.016L12.746.128c-.017-.04.027-.078.065-.058z",
-				fill: `url(#${gradientId}-light-blue)`
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				className: "cpk:fill-[#513C9F] cpk:dark:fill-[#B99AE8]",
-				d: "M12.725.075c.046-.019.1.003.119.05l7.514 17.923a.091.091 0 01-.148.1l-.02-.03L12.675.195a.091.091 0 01.049-.12z"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				className: "cpk:fill-[#513C9F] cpk:dark:fill-[#B99AE8]",
-				d: "M23.06 2.66c.044-.025.1-.01.125.034.025.044.009.1-.035.124v.001l-.008.004-.025.015-.1.054a41.384 41.384 0 01-1.811.92A47.05 47.05 0 0116.33 5.82c-1.954.674-3.97 1.197-5.497 1.552a66.27 66.27 0 01-2.38.507l-.138.026-.036.007h-.01l-.002.002a.091.091 0 11-.033-.18l.016.09-.015-.09h.002l.01-.002.035-.007.137-.025a66.16 66.16 0 002.373-.506c1.524-.354 3.533-.876 5.479-1.547a46.857 46.857 0 006.276-2.709c.166-.087.295-.156.381-.204l.099-.054.024-.014.008-.004z"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				className: "cpk:fill-[#ABABAB] cpk:dark:fill-[#D4D4D4]",
-				d: "M13.838 2.272a.16.16 0 01.107.2l-2.72 9.055h6.4l.061.013a.16.16 0 010 .295l-.061.013h-6.541L.679 24.099l-.05.04a.16.16 0 01-.194-.245l10.43-12.285 2.773-9.23a.16.16 0 01.2-.107z"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M7.809 21.461l-1.232.173c.638 1.69 1.949 2.427 3.514 2.427 3.831 0 2.661-4.334 4.883-4.334 1.61 0 .956 3.513 4.423 3.513 2.116 0 2.326-2.131 1.966-3.048l-.008-.016-.567-.868c-.037-.058-.127-.036-.133.032l-.106 1.053a1.01 1.01 0 00.003.219c.088.727.144 2.491-1.155 2.491-1.37 0-1.7-3.467-4.423-3.467-3.196 0-2.785 4.289-4.747 4.289-1.294 0-2.28-1.46-2.418-2.464z",
-				fill: `url(#${gradientId}-tail)`
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-					gradientUnits: "userSpaceOnUse",
-					id: `${gradientId}-purple`,
-					x1: "17.852",
-					x2: "14.202",
-					y1: "1.467",
-					y2: "11.504",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { className: "cpk:[stop-color:#6430AB] cpk:dark:[stop-color:#B792F0]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-						className: "cpk:[stop-color:#AA89D8] cpk:dark:[stop-color:#D3BDF7]",
-						offset: "1"
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-					gradientUnits: "userSpaceOnUse",
-					id: `${gradientId}-blue`,
-					x1: "15.024",
-					x2: "10.324",
-					y1: "7.125",
-					y2: "16.204",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { className: "cpk:[stop-color:#005DBB] cpk:dark:[stop-color:#4D9FEF]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-						className: "cpk:[stop-color:#3D92E8] cpk:dark:[stop-color:#84C0FA]",
-						offset: "1"
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-					gradientUnits: "userSpaceOnUse",
-					id: `${gradientId}-light-blue`,
-					x1: "17.122",
-					x2: "15.707",
-					y1: "1.467",
-					y2: "5.892",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { className: "cpk:[stop-color:#1B70C4] cpk:dark:[stop-color:#61ACF2]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-						className: "cpk:[stop-color:#54A4F2] cpk:dark:[stop-color:#9ACDFF]",
-						offset: "1"
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-					gradientUnits: "userSpaceOnUse",
-					id: `${gradientId}-tail`,
-					x1: "6.577",
-					x2: "21.506",
-					y1: "21.758",
-					y2: "21.758",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { className: "cpk:[stop-color:#4497EA] cpk:dark:[stop-color:#79BCF5]" }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-							className: "cpk:[stop-color:#1463B2] cpk:dark:[stop-color:#4594D8]",
-							offset: ".255"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-							className: "cpk:[stop-color:#0A437D] cpk:dark:[stop-color:#347CB7]",
-							offset: ".499"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-							className: "cpk:[stop-color:#2476C8] cpk:dark:[stop-color:#58A4E5]",
-							offset: ".667"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-							className: "cpk:[stop-color:#0C549A] cpk:dark:[stop-color:#3C87C7]",
-							offset: ".973"
-						})
-					]
-				})
-			] })
-		]
-	});
-}
 (function(_CopilotChatAssistantMessage) {
 	_CopilotChatAssistantMessage.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(streamdown.Streamdown, {
 		className,
@@ -6263,30 +6690,7 @@ function CopilotKitColoredIcon() {
 			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "cpk:size-[18px]" })
 		});
 	};
-	_CopilotChatAssistantMessage.InspectorButton = ({ title, className, ...props }) => {
-		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
-		const primaryLabel = title || labels.assistantMessageToolbarInspectorLabel;
-		const accessibleLabel = `${primaryLabel} (local only)`;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarButton, {
-			"data-testid": "copilot-inspector-button",
-			title: accessibleLabel,
-			className: (0, tailwind_merge.twMerge)("cpk:w-auto cpk:gap-1.5 cpk:px-2", className),
-			tooltipClassName: "cpk:max-w-64 cpk:text-left cpk:leading-4",
-			tooltip: "View this message in the Inspector to get more information. This button and the inspector only display during local development (localhost, dev env).",
-			...props,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitColoredIcon, {}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cpk:font-medium",
-					children: primaryLabel
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cpk:text-xs cpk:text-muted-foreground",
-					children: "(local only)"
-				})
-			]
-		});
-	};
+	_CopilotChatAssistantMessage.InspectorButton = CopilotChatInspectorButton;
 	_CopilotChatAssistantMessage.ThumbsUpButton = ({ title, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
@@ -8536,9 +8940,15 @@ function useInspectorThreadOverride(args) {
 
 //#endregion
 //#region src/v2/components/chat/CopilotChat.tsx
-function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, attachments: attachmentsConfig, onError, throttleMs, ...props }) {
+function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isModalDefaultOpen, attachments: attachmentsConfig, onError, throttleMs, ...props }) {
 	const existingConfig = useCopilotChatConfiguration();
-	const resolvedAgentId = agentId ?? existingConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const inspector = useCopilotKitInspector();
+	const inspectorContextValue = (0, react.useMemo)(() => ({
+		...inspector,
+		isInspectorEnabled: inspector.isInspectorEnabled && (inspector.providerEnableInspector ?? inspectorTools ?? true)
+	}), [inspector, inspectorTools]);
+	const providerAgentId = (0, _copilotkit_react_core_v2_context.useDefaultAgentId)();
+	const resolvedAgentId = agentId ?? existingConfig?.agentId ?? providerAgentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const providedThreadId = threadId ?? existingConfig?.threadId;
 	const baseThreadId = (0, react.useMemo)(() => providedThreadId ?? (0, _copilotkit_shared.randomUUID)(), [providedThreadId]);
 	const baseHasExplicitThreadId = !!threadId || !!existingConfig?.hasExplicitThreadId;
@@ -9111,7 +9521,10 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LastUserMessageContext.Provider, {
 					value: lastUserMessageState,
-					children: RenderedChatView
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspectorContextProvider, {
+						value: inspectorContextValue,
+						children: RenderedChatView
+					})
 				})
 			]
 		})
@@ -9819,7 +10232,8 @@ function CopilotThreadsDrawer({ agentId, onThreadSelect, onNewThread, onLicensed
 	const featureLicensed = checkFeature("threads");
 	const licensed = licensePresent && featureLicensed;
 	const licensePending = status === null;
-	const resolvedAgentId = agentId ?? configuration?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const providerAgentId = (0, _copilotkit_react_core_v2_context.useDefaultAgentId)();
+	const resolvedAgentId = agentId ?? configuration?.agentId ?? providerAgentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const activeThreadId = configuration?.threadId ?? null;
 	const { threads, isLoading, listError, fetchMoreError, hasMoreThreads, isFetchingMoreThreads, archiveThread, unarchiveThread, deleteThread, fetchMoreThreads, refetchThreads, startNewThread } = useThreads$1({
 		agentId: resolvedAgentId,
@@ -12793,4 +13207,4 @@ Object.defineProperty(exports, 'ɵrunMcpFollowUp', {
     return ɵrunMcpFollowUp;
   }
 });
-//# sourceMappingURL=copilotkit-DcFo270Y.cjs.map
+//# sourceMappingURL=copilotkit-B4Jb1QEy.cjs.map