@copilotkit/react-core 1.57.0-canary.1778229181 → 1.57.1-canary.1778272612

package/dist/{copilotkit-N0YiBG5S.mjs → copilotkit-3XTEoVQO.mjs}

@@ -1416,1167 +1416,1462 @@ const LicenseContext = createContext({
 const useLicenseContext = () => useContext(LicenseContext);
 
 //#endregion
-//#region src/v2/hooks/use-render-tool-call.tsx
-/**
-* Memoized component that renders a single tool call.
-* This prevents unnecessary re-renders when parent components update
-* but the tool call data hasn't changed.
-*/
-const ToolCallRenderer = React.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
-	const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
-	const toolName = toolCall.function.name;
-	if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: ToolCallStatus.Complete,
-		result: toolMessage.content
-	});
-	else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: ToolCallStatus.Executing,
-		result: void 0
-	});
-	else return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		toolCallId: toolCall.id,
-		args,
-		status: ToolCallStatus.InProgress,
-		result: void 0
-	});
-}, (prevProps, nextProps) => {
-	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
-	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
-	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
-	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
-	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
-	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
-	return true;
-});
+//#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 = [];
 /**
-* Hook that returns a function to render tool calls based on the render functions
-* defined in CopilotKitProvider.
+* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
 *
-* @returns A function that takes a tool call and optional tool message and returns the rendered component
+* 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 useRenderToolCall() {
-	const { copilotkit, executingToolCallIds } = useCopilotKit();
-	const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
-	const renderToolCalls = useSyncExternalStore((callback) => {
-		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
-	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
-	return useCallback(({ toolCall, toolMessage }) => {
-		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
-		const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
-		if (!renderConfig) return null;
-		const RenderComponent = renderConfig.render;
-		return /* @__PURE__ */ jsx(ToolCallRenderer, {
-			toolCall,
-			toolMessage,
-			RenderComponent,
-			isExecuting: executingToolCallIds.has(toolCall.id)
-		}, toolCall.id);
+function useRenderTool(config, deps) {
+	const { copilotkit } = useCopilotKit();
+	const extraDeps = deps ?? EMPTY_DEPS$1;
+	useEffect(() => {
+		const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
+			name: "*",
+			render: (props) => config.render({
+				...props,
+				parameters: props.args
+			}),
+			...config.agentId ? { agentId: config.agentId } : {}
+		}) : defineToolCallRenderer({
+			name: config.name,
+			args: config.parameters,
+			render: (props) => config.render({
+				...props,
+				parameters: props.args
+			}),
+			...config.agentId ? { agentId: config.agentId } : {}
+		});
+		copilotkit.addHookRenderToolCall(renderer);
 	}, [
-		renderToolCalls,
-		executingToolCallIds,
-		agentId
+		config.name,
+		copilotkit,
+		JSON.stringify(extraDeps)
 	]);
 }
 
 //#endregion
-//#region src/v2/components/CopilotKitInspector.tsx
-const CopilotKitInspector = ({ core, ...rest }) => {
-	const [InspectorComponent, setInspectorComponent] = React$1.useState(null);
-	React$1.useEffect(() => {
-		let mounted = true;
-		import("@copilotkit/web-inspector").then((mod) => {
-			mod.defineWebInspector?.();
-			const Component = createComponent({
-				tagName: mod.WEB_INSPECTOR_TAG,
-				elementClass: mod.WebInspectorElement,
-				react: React$1
-			});
-			if (mounted) setInspectorComponent(() => Component);
-		});
-		return () => {
-			mounted = false;
-		};
-	}, []);
-	if (!InspectorComponent) return null;
-	return /* @__PURE__ */ jsx(InspectorComponent, {
-		...rest,
-		core: core ?? null
-	});
-};
-CopilotKitInspector.displayName = "CopilotKitInspector";
-
-//#endregion
-//#region src/v2/components/license-warning-banner.tsx
-const LICENSE_BANNER_OFFSET_PX = 52;
-const LICENSE_BANNER_OFFSET_VAR = "--copilotkit-license-banner-offset";
-const BANNER_STYLES = {
-	base: {
-		position: "fixed",
-		bottom: "8px",
-		left: "50%",
-		transform: "translateX(-50%)",
-		zIndex: 99999,
-		display: "inline-flex",
-		alignItems: "center",
-		gap: "12px",
-		whiteSpace: "nowrap",
-		padding: "8px 16px",
-		fontSize: "13px",
-		fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-		borderRadius: "6px",
-		boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
-	},
-	info: {
-		backgroundColor: "#eff6ff",
-		border: "1px solid #93c5fd",
-		color: "#1e40af"
-	},
-	warning: {
-		backgroundColor: "#fffbeb",
-		border: "1px solid #fbbf24",
-		color: "#92400e"
-	},
-	critical: {
-		backgroundColor: "#fef2f2",
-		border: "1px solid #fca5a5",
-		color: "#991b1b"
-	}
-};
-function getSeverityStyle(severity) {
-	switch (severity) {
-		case "warning": return BANNER_STYLES.warning;
-		case "critical": return BANNER_STYLES.critical;
-		default: return BANNER_STYLES.info;
-	}
+//#region src/v2/hooks/use-default-render-tool.tsx
+/**
+* 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) {
+	useRenderTool({
+		name: "*",
+		render: config?.render ?? DefaultToolCallRenderer
+	}, deps);
 }
-function BannerShell({ severity, message, actionLabel, actionUrl, onDismiss }) {
-	useEffect(() => {
-		if (typeof document === "undefined") return;
-		const root = document.documentElement;
-		root.style.setProperty(LICENSE_BANNER_OFFSET_VAR, `${LICENSE_BANNER_OFFSET_PX}px`);
-		return () => {
-			root.style.removeProperty(LICENSE_BANNER_OFFSET_VAR);
-		};
-	}, []);
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			...BANNER_STYLES.base,
-			...getSeverityStyle(severity)
+function DefaultToolCallRenderer({ name, parameters, status, result }) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const statusString = String(status);
+	const isActive = statusString === "inProgress" || statusString === "executing";
+	const isComplete = statusString === "complete";
+	const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
+	const dotColor = isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa";
+	const badgeBg = isActive ? "#fef3c7" : isComplete ? "#d1fae5" : "#f4f4f5";
+	const badgeColor = isActive ? "#92400e" : isComplete ? "#065f46" : "#3f3f46";
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "copilot-tool-render",
+		"data-tool-name": name,
+		"data-status": statusString,
+		"data-args": safeStringifyForAttr(parameters),
+		"data-result": safeStringifyForAttr(result),
+		style: {
+			marginTop: "8px",
+			paddingBottom: "8px"
 		},
-		children: [/* @__PURE__ */ jsx("span", { children: message }), /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			style: {
-				display: "flex",
-				gap: "8px",
-				alignItems: "center"
+				borderRadius: "12px",
+				border: "1px solid #e4e4e7",
+				backgroundColor: "#fafafa",
+				padding: "14px 16px"
 			},
-			children: [/* @__PURE__ */ jsx("a", {
-				href: actionUrl,
-				target: "_blank",
-				rel: "noopener noreferrer",
+			children: [/* @__PURE__ */ jsxs("div", {
+				onClick: () => setIsExpanded(!isExpanded),
 				style: {
-					fontWeight: 600,
-					textDecoration: "underline",
-					color: "inherit"
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: "10px",
+					cursor: "pointer",
+					userSelect: "none"
 				},
-				children: actionLabel
-			}), onDismiss && /* @__PURE__ */ jsx("button", {
-				onClick: onDismiss,
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						minWidth: 0
+					},
+					children: [
+						/* @__PURE__ */ jsx("svg", {
+							style: {
+								height: "14px",
+								width: "14px",
+								color: "#71717a",
+								transition: "transform 0.15s",
+								transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+								flexShrink: 0
+							},
+							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", { style: {
+							display: "inline-block",
+							height: "8px",
+							width: "8px",
+							borderRadius: "50%",
+							backgroundColor: dotColor,
+							flexShrink: 0
+						} }),
+						/* @__PURE__ */ jsx("span", {
+							"data-testid": "copilot-tool-render-name",
+							style: {
+								fontSize: "13px",
+								fontWeight: 600,
+								color: "#18181b",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: name
+						})
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					"data-testid": "copilot-tool-render-status",
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						borderRadius: "9999px",
+						padding: "2px 8px",
+						fontSize: "11px",
+						fontWeight: 500,
+						backgroundColor: badgeBg,
+						color: badgeColor,
+						flexShrink: 0
+					},
+					children: statusLabel
+				})]
+			}), isExpanded && /* @__PURE__ */ jsxs("div", {
 				style: {
-					background: "none",
-					border: "none",
-					cursor: "pointer",
-					color: "inherit",
-					fontSize: "16px"
+					marginTop: "12px",
+					display: "grid",
+					gap: "12px"
 				},
-				children: "×"
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "10px",
+						textTransform: "uppercase",
+						letterSpacing: "0.05em",
+						color: "#71717a"
+					},
+					children: "Arguments"
+				}), /* @__PURE__ */ jsx("pre", {
+					style: {
+						marginTop: "6px",
+						maxHeight: "200px",
+						overflow: "auto",
+						borderRadius: "6px",
+						backgroundColor: "#f4f4f5",
+						padding: "10px",
+						fontSize: "11px",
+						lineHeight: 1.6,
+						color: "#27272a",
+						whiteSpace: "pre-wrap",
+						wordBreak: "break-word"
+					},
+					children: JSON.stringify(parameters ?? {}, null, 2)
+				})] }), result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "10px",
+						textTransform: "uppercase",
+						letterSpacing: "0.05em",
+						color: "#71717a"
+					},
+					children: "Result"
+				}), /* @__PURE__ */ jsx("pre", {
+					style: {
+						marginTop: "6px",
+						maxHeight: "200px",
+						overflow: "auto",
+						borderRadius: "6px",
+						backgroundColor: "#f4f4f5",
+						padding: "10px",
+						fontSize: "11px",
+						lineHeight: 1.6,
+						color: "#27272a",
+						whiteSpace: "pre-wrap",
+						wordBreak: "break-word"
+					},
+					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
+				})] })]
 			})]
-		})]
+		})
 	});
 }
-function LicenseWarningBanner({ type, featureName, expiryDate, graceRemaining, onDismiss }) {
-	switch (type) {
-		case "no_license": return /* @__PURE__ */ jsx(BannerShell, {
-			severity: "info",
-			message: "Powered by CopilotKit",
-			actionLabel: "Get a license",
-			actionUrl: "https://copilotkit.ai/pricing",
-			onDismiss
-		});
-		case "feature_unlicensed": return /* @__PURE__ */ jsx(BannerShell, {
-			severity: "warning",
-			message: `⚠ The "${featureName}" feature requires a CopilotKit license.`,
-			actionLabel: "Get a license",
-			actionUrl: "https://copilotkit.ai/pricing",
-			onDismiss
-		});
-		case "expiring": return /* @__PURE__ */ jsx(BannerShell, {
-			severity: "warning",
-			message: `Your CopilotKit license expires in ${graceRemaining} day${graceRemaining !== 1 ? "s" : ""}. Please renew.`,
-			actionLabel: "Renew",
-			actionUrl: "https://cloud.copilotkit.ai",
-			onDismiss
-		});
-		case "expired": return /* @__PURE__ */ jsx(BannerShell, {
-			severity: "critical",
-			message: `Your CopilotKit license expired${expiryDate ? ` on ${expiryDate}` : ""}. Please renew at copilotkit.ai/pricing`,
-			actionLabel: "Renew now",
-			actionUrl: "https://copilotkit.ai/pricing",
-			onDismiss
-		});
-		case "invalid": return /* @__PURE__ */ jsx(BannerShell, {
-			severity: "critical",
-			message: "Invalid CopilotKit license token. Please check your configuration.",
-			actionLabel: "Get a license",
-			actionUrl: "https://copilotkit.ai/pricing",
-			onDismiss
-		});
-		default: return null;
+function safeStringifyForAttr(value) {
+	if (value === void 0 || value === null) return "";
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value);
+	} catch {
+		return String(value);
 	}
 }
-function InlineFeatureWarning({ featureName }) {
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			padding: "8px 12px",
-			backgroundColor: "#fffbeb",
-			border: "1px solid #fbbf24",
-			borderRadius: "6px",
-			fontSize: "13px",
-			color: "#92400e",
-			fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-		},
-		children: [
-			"⚠ The \"",
-			featureName,
-			"\" feature requires a CopilotKit license.",
-			" ",
-			/* @__PURE__ */ jsx("a", {
-				href: "https://copilotkit.ai/pricing",
-				target: "_blank",
-				rel: "noopener noreferrer",
-				style: {
-					color: "#b45309",
-					textDecoration: "underline"
-				},
-				children: "Get one at copilotkit.ai/pricing"
-			})
-		]
-	});
-}
 
 //#endregion
-//#region src/v2/components/MCPAppsActivityRenderer.tsx
-const PROTOCOL_VERSION = "2025-06-18";
-function buildSandboxHTML(extraCspDomains) {
-	const baseScriptSrc = "'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*";
-	const baseFrameSrc = "* blob: data: http://localhost:* https://localhost:*";
-	const extra = extraCspDomains?.length ? " " + extraCspDomains.join(" ") : "";
-	return `<!doctype html>
-<html>
-<head>
-<meta charset="utf-8" />
-<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: blob: 'unsafe-inline'; media-src * blob: data:; font-src * blob: data:; script-src ${baseScriptSrc + extra}; style-src * blob: data: 'unsafe-inline'; connect-src *; frame-src ${baseFrameSrc + extra}; base-uri 'self';" />
-<style>html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden}*{box-sizing:border-box}iframe{background-color:transparent;border:none;padding:0;overflow:hidden;width:100%;height:100%}</style>
-</head>
-<body>
-<script>
-if(window.self===window.top){throw new Error("This file must be used in an iframe.")}
-const inner=document.createElement("iframe");
-inner.style="width:100%;height:100%;border:none;";
-inner.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms");
-document.body.appendChild(inner);
-window.addEventListener("message",async(event)=>{
-if(event.source===window.parent){
-if(event.data&&event.data.method==="ui/notifications/sandbox-resource-ready"){
-const{html,sandbox}=event.data.params;
-if(typeof sandbox==="string")inner.setAttribute("sandbox",sandbox);
-if(typeof html==="string")inner.srcdoc=html;
-}else if(inner&&inner.contentWindow){
-inner.contentWindow.postMessage(event.data,"*");
-}
-}else if(event.source===inner.contentWindow){
-window.parent.postMessage(event.data,"*");
-}
-});
-window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-ready",params:{}},"*");
-<\/script>
-</body>
-</html>`;
-}
-/**
-* Queue for serializing MCP app requests to an agent.
-* Ensures requests wait for the agent to stop running and are processed one at a time.
-*/
-var MCPAppsRequestQueue = class {
-	constructor() {
-		this.queues = /* @__PURE__ */ new Map();
-		this.processing = /* @__PURE__ */ new Map();
-	}
-	/**
-	* Add a request to the queue for a specific agent thread.
-	* Returns a promise that resolves when the request completes.
-	*/
-	async enqueue(agent, request) {
-		const threadId = agent.threadId || "default";
-		return new Promise((resolve, reject) => {
-			let queue = this.queues.get(threadId);
-			if (!queue) {
-				queue = [];
-				this.queues.set(threadId, queue);
-			}
-			queue.push({
-				execute: request,
-				resolve,
-				reject
-			});
-			this.processQueue(threadId, agent);
-		});
-	}
-	async processQueue(threadId, agent) {
-		if (this.processing.get(threadId)) return;
-		this.processing.set(threadId, true);
-		try {
-			const queue = this.queues.get(threadId);
-			if (!queue) return;
-			while (queue.length > 0) {
-				const item = queue[0];
-				try {
-					await this.waitForAgentIdle(agent);
-					const result = await item.execute();
-					item.resolve(result);
-				} catch (error) {
-					item.reject(error instanceof Error ? error : new Error(String(error)));
-				}
-				queue.shift();
-			}
-		} finally {
-			this.processing.set(threadId, false);
-		}
-	}
-	waitForAgentIdle(agent) {
-		return new Promise((resolve) => {
-			if (!agent.isRunning) {
-				resolve();
-				return;
-			}
-			let done = false;
-			const finish = () => {
-				if (done) return;
-				done = true;
-				clearInterval(checkInterval);
-				sub.unsubscribe();
-				resolve();
-			};
-			const sub = agent.subscribe({
-				onRunFinalized: finish,
-				onRunFailed: finish
-			});
-			const checkInterval = setInterval(() => {
-				if (!agent.isRunning) finish();
-			}, 500);
-		});
-	}
-};
-const mcpAppsRequestQueue = new MCPAppsRequestQueue();
+//#region src/v2/hooks/use-render-tool-call.tsx
 /**
-* Activity type for MCP Apps events - must match the middleware's MCPAppsActivityType
+* Memoized component that renders a single tool call.
+* This prevents unnecessary re-renders when parent components update
+* but the tool call data hasn't changed.
 */
-const MCPAppsActivityType = "mcp-apps";
-const MCPAppsActivityContentSchema = z.object({
-	result: z.object({
-		content: z.array(z.any()).optional(),
-		structuredContent: z.any().optional(),
-		isError: z.boolean().optional()
-	}),
-	resourceUri: z.string(),
-	serverHash: z.string(),
-	serverId: z.string().optional(),
-	toolInput: z.record(z.unknown()).optional()
+const ToolCallRenderer = React.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
+	const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
+	const toolName = toolCall.function.name;
+	if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.Complete,
+		result: toolMessage.content
+	});
+	else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.Executing,
+		result: void 0
+	});
+	else return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		toolCallId: toolCall.id,
+		args,
+		status: ToolCallStatus.InProgress,
+		result: void 0
+	});
+}, (prevProps, nextProps) => {
+	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
+	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
+	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
+	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
+	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
+	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
+	return true;
 });
-function isRequest(msg) {
-	return "id" in msg && "method" in msg;
-}
-function isNotification(msg) {
-	return !("id" in msg) && "method" in msg;
-}
 /**
-* MCP Apps Extension Activity Renderer
+* Hook that returns a function to render tool calls based on the render functions
+* defined in CopilotKitProvider.
 *
-* Renders MCP Apps UI in a sandboxed iframe with full protocol support.
-* Fetches resource content on-demand via proxied MCP requests.
+* @returns A function that takes a tool call and optional tool message and returns the rendered component
 */
-const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agent }) {
-	const { copilotkit } = useCopilotKit();
-	const containerRef = useRef(null);
-	const iframeRef = useRef(null);
-	const [iframeReady, setIframeReady] = useState(false);
-	const [error, setError] = useState(null);
-	const [isLoading, setIsLoading] = useState(true);
-	const [iframeSize, setIframeSize] = useState({});
-	const [fetchedResource, setFetchedResource] = useState(null);
-	const contentRef = useRef(content);
-	contentRef.current = content;
-	const agentRef = useRef(agent);
-	agentRef.current = agent;
-	const fetchStateRef = useRef({
-		inProgress: false,
-		promise: null,
-		resourceUri: null
-	});
-	const { resourceUri, serverHash, serverId } = content;
-	const sendToIframe = useCallback((msg) => {
-		if (iframeRef.current?.contentWindow) {
-			console.log("[MCPAppsRenderer] Sending to iframe:", msg);
-			iframeRef.current.contentWindow.postMessage(msg, "*");
-		}
-	}, []);
-	const sendResponse = useCallback((id, result) => {
-		sendToIframe({
-			jsonrpc: "2.0",
-			id,
-			result
-		});
-	}, [sendToIframe]);
-	const sendErrorResponse = useCallback((id, code, message) => {
-		sendToIframe({
-			jsonrpc: "2.0",
-			id,
-			error: {
-				code,
-				message
-			}
-		});
-	}, [sendToIframe]);
-	const sendNotification = useCallback((method, params) => {
-		sendToIframe({
-			jsonrpc: "2.0",
-			method,
-			params: params || {}
-		});
-	}, [sendToIframe]);
-	useEffect(() => {
-		if (fetchStateRef.current.inProgress && fetchStateRef.current.resourceUri === resourceUri) {
-			fetchStateRef.current.promise?.then((resource) => {
-				if (resource) {
-					setFetchedResource(resource);
-					setIsLoading(false);
-				}
-			}).catch((err) => {
-				setError(err instanceof Error ? err : new Error(String(err)));
-				setIsLoading(false);
-			});
-			return;
-		}
-		if (!agent) {
-			setError(/* @__PURE__ */ new Error("No agent available to fetch resource"));
-			setIsLoading(false);
-			return;
-		}
-		fetchStateRef.current.inProgress = true;
-		fetchStateRef.current.resourceUri = resourceUri;
-		const fetchPromise = (async () => {
-			try {
-				const resource = (await mcpAppsRequestQueue.enqueue(agent, () => agent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
-					serverHash,
-					serverId,
-					method: "resources/read",
-					params: { uri: resourceUri }
-				} } }))).result?.contents?.[0];
-				if (!resource) throw new Error("No resource content in response");
-				return resource;
-			} catch (err) {
-				console.error("[MCPAppsRenderer] Failed to fetch resource:", err);
-				throw err;
-			} finally {
-				fetchStateRef.current.inProgress = false;
-			}
-		})();
-		fetchStateRef.current.promise = fetchPromise;
-		fetchPromise.then((resource) => {
-			if (resource) {
-				setFetchedResource(resource);
-				setIsLoading(false);
-			}
-		}).catch((err) => {
-			setError(err instanceof Error ? err : new Error(String(err)));
-			setIsLoading(false);
-		});
+function useRenderToolCall() {
+	const { copilotkit, executingToolCallIds } = useCopilotKit();
+	const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
+	const renderToolCalls = useSyncExternalStore((callback) => {
+		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
+	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
+	return useCallback(({ toolCall, toolMessage }) => {
+		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
+		return /* @__PURE__ */ jsx(ToolCallRenderer, {
+			toolCall,
+			toolMessage,
+			RenderComponent: (exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*"))?.render ?? defaultToolCallRenderAdapter,
+			isExecuting: executingToolCallIds.has(toolCall.id)
+		}, toolCall.id);
 	}, [
-		agent,
-		resourceUri,
-		serverHash,
-		serverId
+		renderToolCalls,
+		executingToolCallIds,
+		agentId
 	]);
-	useEffect(() => {
-		if (isLoading || !fetchedResource) return;
-		const container = containerRef.current;
-		if (!container) return;
+}
+function defaultToolCallRenderAdapter(props) {
+	const status = props.status === ToolCallStatus.Complete ? "complete" : props.status === ToolCallStatus.Executing ? "executing" : "inProgress";
+	return /* @__PURE__ */ jsx(DefaultToolCallRenderer, {
+		name: props.name,
+		parameters: props.args,
+		status,
+		result: props.result
+	});
+}
+
+//#endregion
+//#region src/v2/components/CopilotKitInspector.tsx
+const CopilotKitInspector = ({ core, ...rest }) => {
+	const [InspectorComponent, setInspectorComponent] = React$1.useState(null);
+	React$1.useEffect(() => {
 		let mounted = true;
-		let messageHandler = null;
-		let initialListener = null;
-		let createdIframe = null;
-		const setup = async () => {
-			try {
-				const iframe = document.createElement("iframe");
-				createdIframe = iframe;
-				iframe.style.width = "100%";
-				iframe.style.height = "100px";
-				iframe.style.border = "none";
-				iframe.style.backgroundColor = "transparent";
-				iframe.style.display = "block";
-				iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
-				const sandboxReady = new Promise((resolve) => {
-					initialListener = (event) => {
-						if (event.source === iframe.contentWindow) {
-							if (event.data?.method === "ui/notifications/sandbox-proxy-ready") {
-								if (initialListener) {
-									window.removeEventListener("message", initialListener);
-									initialListener = null;
-								}
-								resolve();
-							}
-						}
-					};
-					window.addEventListener("message", initialListener);
-				});
-				if (!mounted) {
-					if (initialListener) {
-						window.removeEventListener("message", initialListener);
-						initialListener = null;
-					}
-					return;
-				}
-				const cspDomains = fetchedResource._meta?.ui?.csp?.resourceDomains;
-				iframe.srcdoc = buildSandboxHTML(cspDomains);
-				iframeRef.current = iframe;
-				container.appendChild(iframe);
-				await sandboxReady;
-				if (!mounted) return;
-				console.log("[MCPAppsRenderer] Sandbox proxy ready");
-				messageHandler = async (event) => {
-					if (event.source !== iframe.contentWindow) return;
-					const msg = event.data;
-					if (!msg || typeof msg !== "object" || msg.jsonrpc !== "2.0") return;
-					console.log("[MCPAppsRenderer] Received from iframe:", msg);
-					if (isRequest(msg)) switch (msg.method) {
-						case "ui/initialize":
-							sendResponse(msg.id, {
-								protocolVersion: PROTOCOL_VERSION,
-								hostInfo: {
-									name: "CopilotKit MCP Apps Host",
-									version: "1.0.0"
-								},
-								hostCapabilities: {
-									openLinks: {},
-									logging: {}
-								},
-								hostContext: {
-									theme: "light",
-									platform: "web"
-								}
-							});
-							break;
-						case "ui/message": {
-							const currentAgent = agentRef.current;
-							if (!currentAgent) {
-								console.warn("[MCPAppsRenderer] ui/message: No agent available");
-								sendResponse(msg.id, { isError: false });
-								break;
-							}
-							try {
-								const params = msg.params;
-								const role = params.role || "user";
-								const textContent = params.content?.filter((c) => c.type === "text" && c.text).map((c) => c.text).join("\n") || "";
-								if (textContent) currentAgent.addMessage({
-									id: crypto.randomUUID(),
-									role,
-									content: textContent
-								});
-								sendResponse(msg.id, { isError: false });
-								if ((params.followUp ?? role === "user") && textContent) mcpAppsRequestQueue.enqueue(currentAgent, () => copilotkit.runAgent({ agent: currentAgent })).catch((err) => console.error("[MCPAppsRenderer] ui/message agent run failed:", err));
-							} catch (err) {
-								console.error("[MCPAppsRenderer] ui/message error:", err);
-								sendResponse(msg.id, { isError: true });
-							}
-							break;
-						}
-						case "ui/open-link": {
-							const url = msg.params?.url;
-							if (url) {
-								window.open(url, "_blank", "noopener,noreferrer");
-								sendResponse(msg.id, { isError: false });
-							} else sendErrorResponse(msg.id, -32602, "Missing url parameter");
-							break;
-						}
-						case "tools/call": {
-							const { serverHash, serverId } = contentRef.current;
-							const currentAgent = agentRef.current;
-							if (!serverHash) {
-								sendErrorResponse(msg.id, -32603, "No server hash available for proxying");
-								break;
-							}
-							if (!currentAgent) {
-								sendErrorResponse(msg.id, -32603, "No agent available for proxying");
-								break;
-							}
-							try {
-								const runResult = await mcpAppsRequestQueue.enqueue(currentAgent, () => currentAgent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
-									serverHash,
-									serverId,
-									method: "tools/call",
-									params: msg.params
-								} } }));
-								sendResponse(msg.id, runResult.result || {});
-							} catch (err) {
-								console.error("[MCPAppsRenderer] tools/call error:", err);
-								sendErrorResponse(msg.id, -32603, String(err));
-							}
-							break;
-						}
-						default: sendErrorResponse(msg.id, -32601, `Method not found: ${msg.method}`);
-					}
-					if (isNotification(msg)) switch (msg.method) {
-						case "ui/notifications/initialized":
-							console.log("[MCPAppsRenderer] Inner iframe initialized");
-							if (mounted) setIframeReady(true);
-							break;
-						case "ui/notifications/size-changed": {
-							const { width, height } = msg.params || {};
-							console.log("[MCPAppsRenderer] Size change:", {
-								width,
-								height
-							});
-							if (mounted) setIframeSize({
-								width: typeof width === "number" ? width : void 0,
-								height: typeof height === "number" ? height : void 0
-							});
-							break;
-						}
-						case "notifications/message":
-							console.log("[MCPAppsRenderer] App log:", msg.params);
-							break;
-					}
-				};
-				window.addEventListener("message", messageHandler);
-				let html;
-				if (fetchedResource.text) html = fetchedResource.text;
-				else if (fetchedResource.blob) html = atob(fetchedResource.blob);
-				else throw new Error("Resource has no text or blob content");
-				sendNotification("ui/notifications/sandbox-resource-ready", { html });
-			} catch (err) {
-				console.error("[MCPAppsRenderer] Setup error:", err);
-				if (mounted) setError(err instanceof Error ? err : new Error(String(err)));
-			}
-		};
-		setup();
+		import("@copilotkit/web-inspector").then((mod) => {
+			mod.defineWebInspector?.();
+			const Component = createComponent({
+				tagName: mod.WEB_INSPECTOR_TAG,
+				elementClass: mod.WebInspectorElement,
+				react: React$1
+			});
+			if (mounted) setInspectorComponent(() => Component);
+		});
 		return () => {
 			mounted = false;
-			if (initialListener) {
-				window.removeEventListener("message", initialListener);
-				initialListener = null;
-			}
-			if (messageHandler) window.removeEventListener("message", messageHandler);
-			if (createdIframe) {
-				createdIframe.remove();
-				createdIframe = null;
-			}
-			iframeRef.current = null;
 		};
-	}, [
-		isLoading,
-		fetchedResource,
-		sendNotification,
-		sendResponse,
-		sendErrorResponse
-	]);
-	useEffect(() => {
-		if (iframeRef.current) {
-			if (iframeSize.width !== void 0) {
-				iframeRef.current.style.minWidth = `min(${iframeSize.width}px, 100%)`;
-				iframeRef.current.style.width = "100%";
-			}
-			if (iframeSize.height !== void 0) iframeRef.current.style.height = `${iframeSize.height}px`;
-		}
-	}, [iframeSize]);
-	useEffect(() => {
-		if (iframeReady && content.toolInput) {
-			console.log("[MCPAppsRenderer] Sending tool input:", content.toolInput);
-			sendNotification("ui/notifications/tool-input", { arguments: content.toolInput });
-		}
-	}, [
-		iframeReady,
-		content.toolInput,
-		sendNotification
-	]);
-	useEffect(() => {
-		if (iframeReady && content.result) {
-			console.log("[MCPAppsRenderer] Sending tool result:", content.result);
-			sendNotification("ui/notifications/tool-result", content.result);
-		}
-	}, [
-		iframeReady,
-		content.result,
-		sendNotification
-	]);
-	const borderStyle = fetchedResource?._meta?.ui?.prefersBorder === true ? {
-		borderRadius: "8px",
-		backgroundColor: "#f9f9f9",
-		border: "1px solid #e0e0e0"
-	} : {};
-	return /* @__PURE__ */ jsxs("div", {
-		ref: containerRef,
-		style: {
-			width: "100%",
-			height: iframeSize.height ? `${iframeSize.height}px` : "auto",
-			minHeight: "100px",
-			overflow: "hidden",
-			position: "relative",
-			...borderStyle
-		},
-		children: [isLoading && /* @__PURE__ */ jsx("div", {
-			style: {
-				padding: "1rem",
-				color: "#666"
-			},
-			children: "Loading..."
-		}), error && /* @__PURE__ */ jsxs("div", {
-			style: {
-				color: "red",
-				padding: "1rem"
-			},
-			children: ["Error: ", error.message]
-		})]
+	}, []);
+	if (!InspectorComponent) return null;
+	return /* @__PURE__ */ jsx(InspectorComponent, {
+		...rest,
+		core: core ?? null
 	});
 };
+CopilotKitInspector.displayName = "CopilotKitInspector";
 
 //#endregion
-//#region src/v2/providers/SandboxFunctionsContext.ts
-const SandboxFunctionsContext = createContext([]);
-function useSandboxFunctions() {
-	return useContext(SandboxFunctionsContext);
+//#region src/v2/components/license-warning-banner.tsx
+const LICENSE_BANNER_OFFSET_PX = 52;
+const LICENSE_BANNER_OFFSET_VAR = "--copilotkit-license-banner-offset";
+const BANNER_STYLES = {
+	base: {
+		position: "fixed",
+		bottom: "8px",
+		left: "50%",
+		transform: "translateX(-50%)",
+		zIndex: 99999,
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "12px",
+		whiteSpace: "nowrap",
+		padding: "8px 16px",
+		fontSize: "13px",
+		fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+		borderRadius: "6px",
+		boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+	},
+	info: {
+		backgroundColor: "#eff6ff",
+		border: "1px solid #93c5fd",
+		color: "#1e40af"
+	},
+	warning: {
+		backgroundColor: "#fffbeb",
+		border: "1px solid #fbbf24",
+		color: "#92400e"
+	},
+	critical: {
+		backgroundColor: "#fef2f2",
+		border: "1px solid #fca5a5",
+		color: "#991b1b"
+	}
+};
+function getSeverityStyle(severity) {
+	switch (severity) {
+		case "warning": return BANNER_STYLES.warning;
+		case "critical": return BANNER_STYLES.critical;
+		default: return BANNER_STYLES.info;
+	}
 }
-
-//#endregion
-//#region src/v2/lib/processPartialHtml.ts
-/**
-* Extracts all complete `<style>` blocks from the raw HTML.
-* Returns the concatenated style tags, suitable for injection into `<head>`.
-*/
-function extractCompleteStyles(html) {
-	const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
-	return matches ? matches.join("") : "";
+function BannerShell({ severity, message, actionLabel, actionUrl, onDismiss }) {
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		root.style.setProperty(LICENSE_BANNER_OFFSET_VAR, `${LICENSE_BANNER_OFFSET_PX}px`);
+		return () => {
+			root.style.removeProperty(LICENSE_BANNER_OFFSET_VAR);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			...BANNER_STYLES.base,
+			...getSeverityStyle(severity)
+		},
+		children: [/* @__PURE__ */ jsx("span", { children: message }), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				gap: "8px",
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ jsx("a", {
+				href: actionUrl,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				style: {
+					fontWeight: 600,
+					textDecoration: "underline",
+					color: "inherit"
+				},
+				children: actionLabel
+			}), onDismiss && /* @__PURE__ */ jsx("button", {
+				onClick: onDismiss,
+				style: {
+					background: "none",
+					border: "none",
+					cursor: "pointer",
+					color: "inherit",
+					fontSize: "16px"
+				},
+				children: "×"
+			})]
+		})]
+	});
 }
-/**
-* Processes raw accumulated HTML for safe preview via innerHTML injection.
-* Pure function, no DOM dependencies.
-*
-* Pipeline (order matters):
-* 1. Strip incomplete tag at end
-* 2. Strip complete <style>, <script>, and <head> blocks
-* 3. Strip incomplete <style>/<script>/<head> blocks
-* 4. Strip incomplete HTML entities
-* 5. Extract body content (or use full string if no <body>)
-*/
-function processPartialHtml(html) {
-	let result = html;
-	result = result.replace(/<[^>]*$/, "");
-	result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
-	result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
-	result = result.replace(/&[a-zA-Z0-9#]*$/, "");
-	const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
-	if (bodyMatch) {
-		result = bodyMatch[1];
-		result = result.replace(/<\/body>[\s\S]*/i, "");
+function LicenseWarningBanner({ type, featureName, expiryDate, graceRemaining, onDismiss }) {
+	switch (type) {
+		case "no_license": return /* @__PURE__ */ jsx(BannerShell, {
+			severity: "info",
+			message: "Powered by CopilotKit",
+			actionLabel: "Get a license",
+			actionUrl: "https://copilotkit.ai/pricing",
+			onDismiss
+		});
+		case "feature_unlicensed": return /* @__PURE__ */ jsx(BannerShell, {
+			severity: "warning",
+			message: `⚠ The "${featureName}" feature requires a CopilotKit license.`,
+			actionLabel: "Get a license",
+			actionUrl: "https://copilotkit.ai/pricing",
+			onDismiss
+		});
+		case "expiring": return /* @__PURE__ */ jsx(BannerShell, {
+			severity: "warning",
+			message: `Your CopilotKit license expires in ${graceRemaining} day${graceRemaining !== 1 ? "s" : ""}. Please renew.`,
+			actionLabel: "Renew",
+			actionUrl: "https://cloud.copilotkit.ai",
+			onDismiss
+		});
+		case "expired": return /* @__PURE__ */ jsx(BannerShell, {
+			severity: "critical",
+			message: `Your CopilotKit license expired${expiryDate ? ` on ${expiryDate}` : ""}. Please renew at copilotkit.ai/pricing`,
+			actionLabel: "Renew now",
+			actionUrl: "https://copilotkit.ai/pricing",
+			onDismiss
+		});
+		case "invalid": return /* @__PURE__ */ jsx(BannerShell, {
+			severity: "critical",
+			message: "Invalid CopilotKit license token. Please check your configuration.",
+			actionLabel: "Get a license",
+			actionUrl: "https://copilotkit.ai/pricing",
+			onDismiss
+		});
+		default: return null;
 	}
-	return result;
+}
+function InlineFeatureWarning({ featureName }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			padding: "8px 12px",
+			backgroundColor: "#fffbeb",
+			border: "1px solid #fbbf24",
+			borderRadius: "6px",
+			fontSize: "13px",
+			color: "#92400e",
+			fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+		},
+		children: [
+			"⚠ The \"",
+			featureName,
+			"\" feature requires a CopilotKit license.",
+			" ",
+			/* @__PURE__ */ jsx("a", {
+				href: "https://copilotkit.ai/pricing",
+				target: "_blank",
+				rel: "noopener noreferrer",
+				style: {
+					color: "#b45309",
+					textDecoration: "underline"
+				},
+				children: "Get one at copilotkit.ai/pricing"
+			})
+		]
+	});
 }
 
 //#endregion
-//#region src/v2/components/OpenGenerativeUIRenderer.tsx
-const OpenGenerativeUIActivityType = "open-generative-ui";
-const OpenGenerativeUIContentSchema = z.object({
-	initialHeight: z.number().optional(),
-	generating: z.boolean().optional(),
-	css: z.string().optional(),
-	cssComplete: z.boolean().optional(),
-	html: z.array(z.string()).optional(),
-	htmlComplete: z.boolean().optional(),
-	jsFunctions: z.string().optional(),
-	jsFunctionsComplete: z.boolean().optional(),
-	jsExpressions: z.array(z.string()).optional(),
-	jsExpressionsComplete: z.boolean().optional()
-});
-/**
-* Schema for the generateSandboxedUi tool call arguments.
-* Used by the frontend tool renderer to display placeholder messages.
-*/
-const GenerateSandboxedUiArgsSchema = z.object({
-	initialHeight: z.number().optional(),
-	placeholderMessages: z.array(z.string()).optional(),
-	css: z.string().optional(),
-	html: z.string().optional(),
-	jsFunctions: z.string().optional(),
-	jsExpressions: z.array(z.string()).optional()
+//#region src/v2/components/MCPAppsActivityRenderer.tsx
+const PROTOCOL_VERSION = "2025-06-18";
+function buildSandboxHTML(extraCspDomains) {
+	const baseScriptSrc = "'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*";
+	const baseFrameSrc = "* blob: data: http://localhost:* https://localhost:*";
+	const extra = extraCspDomains?.length ? " " + extraCspDomains.join(" ") : "";
+	return `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: blob: 'unsafe-inline'; media-src * blob: data:; font-src * blob: data:; script-src ${baseScriptSrc + extra}; style-src * blob: data: 'unsafe-inline'; connect-src *; frame-src ${baseFrameSrc + extra}; base-uri 'self';" />
+<style>html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden}*{box-sizing:border-box}iframe{background-color:transparent;border:none;padding:0;overflow:hidden;width:100%;height:100%}</style>
+</head>
+<body>
+<script>
+if(window.self===window.top){throw new Error("This file must be used in an iframe.")}
+const inner=document.createElement("iframe");
+inner.style="width:100%;height:100%;border:none;";
+inner.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms");
+document.body.appendChild(inner);
+window.addEventListener("message",async(event)=>{
+if(event.source===window.parent){
+if(event.data&&event.data.method==="ui/notifications/sandbox-resource-ready"){
+const{html,sandbox}=event.data.params;
+if(typeof sandbox==="string")inner.setAttribute("sandbox",sandbox);
+if(typeof html==="string")inner.srcdoc=html;
+}else if(inner&&inner.contentWindow){
+inner.contentWindow.postMessage(event.data,"*");
+}
+}else if(event.source===inner.contentWindow){
+window.parent.postMessage(event.data,"*");
+}
 });
-const THROTTLE_MS = 1e3;
+window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-ready",params:{}},"*");
+<\/script>
+</body>
+</html>`;
+}
 /**
-* Returns true when the inner component should re-render immediately
-* (no throttle delay).
+* Queue for serializing MCP app requests to an agent.
+* Ensures requests wait for the agent to stop running and are processed one at a time.
 */
-function shouldFlushImmediately(prev, next) {
-	if (next.cssComplete && (!prev || !prev.cssComplete)) return true;
-	if (next.htmlComplete) return true;
-	if (next.generating === false) return true;
-	if (next.jsFunctions && (!prev || !prev.jsFunctions)) return true;
-	if ((next.jsExpressions?.length ?? 0) > (prev?.jsExpressions?.length ?? 0)) return true;
-	if (next.html?.length && (!prev || !prev.html?.length)) return true;
-	return false;
-}
-/**
-* Outer wrapper — absorbs every parent re-render but only forwards
-* throttled content snapshots to the memoized inner component.
-*/
-const OpenGenerativeUIActivityRenderer = function OpenGenerativeUIActivityRenderer({ content }) {
-	const latestContentRef = useRef(content);
-	latestContentRef.current = content;
-	const [throttledContent, setThrottledContent] = useState(content);
-	const throttledContentRef = useRef(throttledContent);
-	const timerRef = useRef(null);
-	if (throttledContentRef.current !== content) {
-		if (shouldFlushImmediately(throttledContentRef.current, content)) {
-			if (timerRef.current !== null) {
-				clearTimeout(timerRef.current);
-				timerRef.current = null;
+var MCPAppsRequestQueue = class {
+	constructor() {
+		this.queues = /* @__PURE__ */ new Map();
+		this.processing = /* @__PURE__ */ new Map();
+	}
+	/**
+	* Add a request to the queue for a specific agent thread.
+	* Returns a promise that resolves when the request completes.
+	*/
+	async enqueue(agent, request) {
+		const threadId = agent.threadId || "default";
+		return new Promise((resolve, reject) => {
+			let queue = this.queues.get(threadId);
+			if (!queue) {
+				queue = [];
+				this.queues.set(threadId, queue);
 			}
-			throttledContentRef.current = content;
-			setThrottledContent(content);
+			queue.push({
+				execute: request,
+				resolve,
+				reject
+			});
+			this.processQueue(threadId, agent);
+		});
+	}
+	async processQueue(threadId, agent) {
+		if (this.processing.get(threadId)) return;
+		this.processing.set(threadId, true);
+		try {
+			const queue = this.queues.get(threadId);
+			if (!queue) return;
+			while (queue.length > 0) {
+				const item = queue[0];
+				try {
+					await this.waitForAgentIdle(agent);
+					const result = await item.execute();
+					item.resolve(result);
+				} catch (error) {
+					item.reject(error instanceof Error ? error : new Error(String(error)));
+				}
+				queue.shift();
+			}
+		} finally {
+			this.processing.set(threadId, false);
 		}
 	}
-	const flush = useCallback(() => {
-		timerRef.current = null;
-		const latest = latestContentRef.current;
-		throttledContentRef.current = latest;
-		setThrottledContent(latest);
-	}, []);
-	useEffect(() => {
-		if (throttledContentRef.current === content) return;
-		if (timerRef.current === null) timerRef.current = setTimeout(flush, THROTTLE_MS);
-	}, [content, flush]);
-	useEffect(() => {
-		return () => {
-			if (timerRef.current !== null) clearTimeout(timerRef.current);
-		};
-	}, []);
-	return /* @__PURE__ */ jsx(OpenGenerativeUIActivityRendererInner, { content: throttledContent });
+	waitForAgentIdle(agent) {
+		return new Promise((resolve) => {
+			if (!agent.isRunning) {
+				resolve();
+				return;
+			}
+			let done = false;
+			const finish = () => {
+				if (done) return;
+				done = true;
+				clearInterval(checkInterval);
+				sub.unsubscribe();
+				resolve();
+			};
+			const sub = agent.subscribe({
+				onRunFinalized: finish,
+				onRunFailed: finish
+			});
+			const checkInterval = setInterval(() => {
+				if (!agent.isRunning) finish();
+			}, 500);
+		});
+	}
 };
-function ensureHead(html) {
-	if (/<head[\s>]/i.test(html)) return html;
-	return `<head></head>${html}`;
+const mcpAppsRequestQueue = new MCPAppsRequestQueue();
+/**
+* Activity type for MCP Apps events - must match the middleware's MCPAppsActivityType
+*/
+const MCPAppsActivityType = "mcp-apps";
+const MCPAppsActivityContentSchema = z.object({
+	result: z.object({
+		content: z.array(z.any()).optional(),
+		structuredContent: z.any().optional(),
+		isError: z.boolean().optional()
+	}),
+	resourceUri: z.string(),
+	serverHash: z.string(),
+	serverId: z.string().optional(),
+	toolInput: z.record(z.unknown()).optional()
+});
+function isRequest(msg) {
+	return "id" in msg && "method" in msg;
 }
-function injectCssIntoHtml(html, css) {
-	const headCloseIdx = html.indexOf("</head>");
-	if (headCloseIdx !== -1) return html.slice(0, headCloseIdx) + `<style>${css}</style>` + html.slice(headCloseIdx);
-	return `<head><style>${css}</style></head>${html}`;
+function isNotification(msg) {
+	return !("id" in msg) && "method" in msg;
 }
-const OpenGenerativeUIActivityRendererInner = React.memo(function OpenGenerativeUIActivityRendererInner({ content }) {
-	const initialHeight = content.initialHeight ?? 200;
-	const [autoHeight, setAutoHeight] = useState(null);
-	const sandboxFunctions = useSandboxFunctions();
-	const localApi = useMemo(() => {
-		const api = {};
-		for (const fn of sandboxFunctions) api[fn.name] = fn.handler;
-		return api;
-	}, [sandboxFunctions]);
-	const fullHtml = content.htmlComplete && content.html?.length ? content.html.join("") : void 0;
-	const css = content.cssComplete ? content.css : void 0;
-	const cssReady = !!content.cssComplete;
-	const partialHtml = !content.htmlComplete && content.html?.length ? content.html.join("") : void 0;
-	const previewBody = partialHtml ? processPartialHtml(partialHtml) : void 0;
-	const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : "";
-	const hasPreview = cssReady && !!previewBody?.trim();
-	const hasVisibleSandbox = !!fullHtml || hasPreview;
+/**
+* MCP Apps Extension Activity Renderer
+*
+* Renders MCP Apps UI in a sandboxed iframe with full protocol support.
+* Fetches resource content on-demand via proxied MCP requests.
+*/
+const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agent }) {
+	const { copilotkit } = useCopilotKit();
 	const containerRef = useRef(null);
-	const sandboxRef = useRef(null);
-	const previewSandboxRef = useRef(null);
-	const previewReadyRef = useRef(false);
-	const sandboxReadyRef = useRef(false);
-	const executedIndexRef = useRef(0);
-	const pendingQueueRef = useRef([]);
-	const jsFunctionsInjectedRef = useRef(false);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container || fullHtml || !hasPreview || previewSandboxRef.current) return;
-		let cancelled = false;
-		import("@jetbrains/websandbox").then((mod) => {
-			if (cancelled) return;
-			const sandbox = (mod.default?.default ?? mod.default).create({}, {
-				frameContainer: container,
-				frameContent: "<head></head><body></body>",
-				allowAdditionalAttributes: ""
-			});
-			previewSandboxRef.current = sandbox;
-			sandbox.iframe.style.width = "100%";
-			sandbox.iframe.style.height = "100%";
-			sandbox.iframe.style.border = "none";
-			sandbox.iframe.style.backgroundColor = "transparent";
-			sandbox.promise.then(() => {
-				if (cancelled) return;
-				previewReadyRef.current = true;
-				sandbox.run(`
-            var s = document.createElement('style');
-            s.textContent = 'html, body { overflow: hidden !important; }';
-            document.head.appendChild(s);
-          `);
-				const headParts = [];
-				if (css) headParts.push(`<style>${css}</style>`);
-				if (previewStyles) headParts.push(previewStyles);
-				if (headParts.length) sandbox.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
-				if (previewBody) sandbox.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
-			});
-		}).catch((err) => {
-			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+	const iframeRef = useRef(null);
+	const [iframeReady, setIframeReady] = useState(false);
+	const [error, setError] = useState(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [iframeSize, setIframeSize] = useState({});
+	const [fetchedResource, setFetchedResource] = useState(null);
+	const contentRef = useRef(content);
+	contentRef.current = content;
+	const agentRef = useRef(agent);
+	agentRef.current = agent;
+	const fetchStateRef = useRef({
+		inProgress: false,
+		promise: null,
+		resourceUri: null
+	});
+	const sendToIframe = useCallback((msg) => {
+		if (iframeRef.current?.contentWindow) {
+			console.log("[MCPAppsRenderer] Sending to iframe:", msg);
+			iframeRef.current.contentWindow.postMessage(msg, "*");
+		}
+	}, []);
+	const sendResponse = useCallback((id, result) => {
+		sendToIframe({
+			jsonrpc: "2.0",
+			id,
+			result
 		});
-		return () => {
-			cancelled = true;
-		};
-	}, [hasPreview, fullHtml]);
+	}, [sendToIframe]);
+	const sendErrorResponse = useCallback((id, code, message) => {
+		sendToIframe({
+			jsonrpc: "2.0",
+			id,
+			error: {
+				code,
+				message
+			}
+		});
+	}, [sendToIframe]);
+	const sendNotification = useCallback((method, params) => {
+		sendToIframe({
+			jsonrpc: "2.0",
+			method,
+			params: params || {}
+		});
+	}, [sendToIframe]);
 	useEffect(() => {
-		if (!previewSandboxRef.current || !previewReadyRef.current) return;
-		const headParts = [];
-		if (css) headParts.push(`<style>${css}</style>`);
-		if (previewStyles) headParts.push(previewStyles);
-		if (headParts.length) previewSandboxRef.current.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
-		if (!previewBody) return;
-		previewSandboxRef.current.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
-	}, [
-		previewBody,
-		previewStyles,
-		css
-	]);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container || !fullHtml) return;
-		if (previewSandboxRef.current) {
-			previewSandboxRef.current.destroy();
-			previewSandboxRef.current = null;
-			previewReadyRef.current = false;
-		}
-		let cancelled = false;
-		executedIndexRef.current = 0;
-		jsFunctionsInjectedRef.current = false;
-		sandboxReadyRef.current = false;
-		pendingQueueRef.current = [];
-		const htmlContent = css ? injectCssIntoHtml(fullHtml, css) : fullHtml;
-		import("@jetbrains/websandbox").then((mod) => {
-			if (cancelled) return;
-			const sandbox = (mod.default?.default ?? mod.default).create(localApi, {
-				frameContainer: container,
-				frameContent: ensureHead(htmlContent),
-				allowAdditionalAttributes: ""
-			});
-			sandboxRef.current = sandbox;
-			sandbox.iframe.style.width = "100%";
-			sandbox.iframe.style.height = "100%";
-			sandbox.iframe.style.border = "none";
-			sandbox.iframe.style.backgroundColor = "transparent";
-			sandbox.promise.then(() => {
-				if (cancelled) return;
-				sandboxReadyRef.current = true;
-				sandbox.run(`
-            var s = document.createElement('style');
-            s.textContent = 'html, body { overflow: hidden !important; }';
-            document.head.appendChild(s);
-          `);
-				const queue = pendingQueueRef.current;
-				pendingQueueRef.current = [];
-				for (const code of queue) sandbox.run(code);
+		const { resourceUri, serverHash, serverId } = content;
+		if (fetchStateRef.current.inProgress && fetchStateRef.current.resourceUri === resourceUri) {
+			fetchStateRef.current.promise?.then((resource) => {
+				if (resource) {
+					setFetchedResource(resource);
+					setIsLoading(false);
+				}
+			}).catch((err) => {
+				setError(err instanceof Error ? err : new Error(String(err)));
+				setIsLoading(false);
 			});
-		}).catch((err) => {
-			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
-		});
-		return () => {
-			cancelled = true;
-			if (previewSandboxRef.current) {
-				previewSandboxRef.current.destroy();
-				previewSandboxRef.current = null;
-				previewReadyRef.current = false;
-			}
-			if (sandboxRef.current) {
-				sandboxRef.current.destroy();
-				sandboxRef.current = null;
+			return;
+		}
+		if (!agent) {
+			setError(/* @__PURE__ */ new Error("No agent available to fetch resource"));
+			setIsLoading(false);
+			return;
+		}
+		fetchStateRef.current.inProgress = true;
+		fetchStateRef.current.resourceUri = resourceUri;
+		const fetchPromise = (async () => {
+			try {
+				const resource = (await mcpAppsRequestQueue.enqueue(agent, () => agent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
+					serverHash,
+					serverId,
+					method: "resources/read",
+					params: { uri: resourceUri }
+				} } }))).result?.contents?.[0];
+				if (!resource) throw new Error("No resource content in response");
+				return resource;
+			} catch (err) {
+				console.error("[MCPAppsRenderer] Failed to fetch resource:", err);
+				throw err;
+			} finally {
+				fetchStateRef.current.inProgress = false;
 			}
-			sandboxReadyRef.current = false;
-			setAutoHeight(null);
-		};
-	}, [
-		fullHtml,
-		css,
-		localApi
-	]);
-	useEffect(() => {
-		if (!content.jsFunctions || jsFunctionsInjectedRef.current) return;
-		jsFunctionsInjectedRef.current = true;
-		const sandbox = sandboxRef.current;
-		if (sandboxReadyRef.current && sandbox) sandbox.run(content.jsFunctions);
-		else pendingQueueRef.current.push(content.jsFunctions);
-	}, [content.jsFunctions]);
-	useEffect(() => {
-		const expressions = content.jsExpressions;
-		if (!expressions || expressions.length === 0) return;
-		const startIndex = executedIndexRef.current;
-		if (startIndex >= expressions.length) return;
-		const newExprs = expressions.slice(startIndex);
-		executedIndexRef.current = expressions.length;
-		const sandbox = sandboxRef.current;
-		if (sandboxReadyRef.current && sandbox) (async () => {
-			for (const expr of newExprs) await sandbox.run(expr);
 		})();
-		else pendingQueueRef.current.push(...newExprs);
-	}, [content.jsExpressions?.length]);
-	const generationDone = content.generating === false;
-	useEffect(() => {
-		const sandbox = sandboxRef.current;
-		if (!generationDone || !sandbox) return;
-		let handled = false;
-		const onMessage = (e) => {
-			if (handled) return;
-			if (e.source === sandbox.iframe.contentWindow && e.data?.type === "__ck_resize") {
-				handled = true;
-				setAutoHeight(e.data.height);
-				window.removeEventListener("message", onMessage);
+		fetchStateRef.current.promise = fetchPromise;
+		fetchPromise.then((resource) => {
+			if (resource) {
+				setFetchedResource(resource);
+				setIsLoading(false);
 			}
-		};
-		window.addEventListener("message", onMessage);
-		const measureOnce = `
-        (function() {
-          var s = document.createElement('style');
-          s.textContent = 'body { height: auto !important; min-height: 0 !important; }';
-          document.head.appendChild(s);
-          var h = document.body.scrollHeight;
-          var cs = getComputedStyle(document.body);
-          h += parseFloat(cs.marginTop) || 0;
-          h += parseFloat(cs.marginBottom) || 0;
-          s.remove();
-          parent.postMessage({ type: "__ck_resize", height: Math.ceil(h) }, "*");
-        })();
-      `;
-		if (sandboxReadyRef.current) sandbox.run(measureOnce);
-		else pendingQueueRef.current.push(measureOnce);
-		return () => {
-			window.removeEventListener("message", onMessage);
-		};
-	}, [generationDone]);
-	const height = autoHeight ?? initialHeight;
-	const isGenerating = content.generating !== false;
-	return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		style: {
-			position: "relative",
-			width: "100%",
-			height: `${height}px`,
-			borderRadius: "8px",
-			backgroundColor: hasVisibleSandbox ? "transparent" : "#f5f5f5",
-			border: hasVisibleSandbox ? "none" : "1px solid #e0e0e0",
-			display: hasVisibleSandbox ? "block" : "flex",
-			alignItems: hasVisibleSandbox ? void 0 : "center",
-			justifyContent: hasVisibleSandbox ? void 0 : "center",
-			overflow: "hidden"
-		},
-		children: isGenerating && /* @__PURE__ */ jsxs("div", {
-			style: {
-				position: "absolute",
-				inset: 0,
-				zIndex: 10,
-				pointerEvents: "all",
-				backgroundColor: "rgba(255, 255, 255, 0.5)",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center"
-			},
-			children: [/* @__PURE__ */ jsxs("svg", {
-				width: "48",
-				height: "48",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				style: { animation: "ck-spin 1s linear infinite" },
-				children: [/* @__PURE__ */ jsx("circle", {
-					cx: "12",
-					cy: "12",
-					r: "10",
-					stroke: "#e0e0e0",
-					strokeWidth: "3"
-				}), /* @__PURE__ */ jsx("path", {
-					d: "M12 2a10 10 0 0 1 10 10",
-					stroke: "#999",
-					strokeWidth: "3",
-					strokeLinecap: "round"
-				})]
-			}), /* @__PURE__ */ jsx("style", { children: `@keyframes ck-spin { to { transform: rotate(360deg) } }` })]
-		})
-	});
-}, (prev, next) => prev.content === next.content);
-/**
-* Frontend tool renderer for generateSandboxedUi.
-* Displays placeholder messages while the UI is being generated.
-*/
-const OpenGenerativeUIToolRenderer = function OpenGenerativeUIToolRenderer(props) {
-	const [visibleMessageIndex, setVisibleMessageIndex] = useState(0);
-	const prevMessageCountRef = useRef(0);
-	const messages = props.args.placeholderMessages;
+		}).catch((err) => {
+			setError(err instanceof Error ? err : new Error(String(err)));
+			setIsLoading(false);
+		});
+	}, [agent, content]);
 	useEffect(() => {
-		if (!messages || messages.length === 0) return;
-		if (messages.length !== prevMessageCountRef.current) {
-			prevMessageCountRef.current = messages.length;
-			setVisibleMessageIndex(messages.length - 1);
-		}
-		if (props.status === ToolCallStatus.Complete) return;
-		const timer = setInterval(() => {
-			setVisibleMessageIndex((i) => (i + 1) % messages.length);
-		}, 5e3);
-		return () => clearInterval(timer);
-	}, [messages?.length, props.status]);
-	if (props.status === ToolCallStatus.Complete) return null;
-	if (!messages || messages.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			padding: "8px 12px",
-			color: "#999",
-			fontSize: "14px"
-		},
-		children: messages[visibleMessageIndex] ?? messages[0]
-	});
-};
-
-//#endregion
-//#region src/v2/a2ui/A2UIMessageRenderer.tsx
-/**
-* The container key used to wrap A2UI operations for explicit detection.
-* Must match A2UI_OPERATIONS_KEY in @ag-ui/a2ui-middleware and copilotkit.a2ui (Python).
-*/
-const A2UI_OPERATIONS_KEY = "a2ui_operations";
-let initialized = false;
-function ensureInitialized() {
-	if (!initialized) {
-		initializeDefaultCatalog();
-		injectStyles();
-		initialized = true;
-	}
-}
-function createA2UIMessageRenderer(options) {
-	const { theme, catalog, loadingComponent } = options;
-	return {
-		activityType: "a2ui-surface",
-		content: z.any(),
-		render: ({ content, agent }) => {
-			ensureInitialized();
-			const [operations, setOperations] = useState([]);
-			const { copilotkit } = useCopilotKit();
+		if (isLoading || !fetchedResource) return;
+		const container = containerRef.current;
+		if (!container) return;
+		let mounted = true;
+		let messageHandler = null;
+		let initialListener = null;
+		let createdIframe = null;
+		const setup = async () => {
+			try {
+				const iframe = document.createElement("iframe");
+				createdIframe = iframe;
+				iframe.style.width = "100%";
+				iframe.style.height = "100px";
+				iframe.style.border = "none";
+				iframe.style.backgroundColor = "transparent";
+				iframe.style.display = "block";
+				iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+				const sandboxReady = new Promise((resolve) => {
+					initialListener = (event) => {
+						if (event.source === iframe.contentWindow) {
+							if (event.data?.method === "ui/notifications/sandbox-proxy-ready") {
+								if (initialListener) {
+									window.removeEventListener("message", initialListener);
+									initialListener = null;
+								}
+								resolve();
+							}
+						}
+					};
+					window.addEventListener("message", initialListener);
+				});
+				if (!mounted) {
+					if (initialListener) {
+						window.removeEventListener("message", initialListener);
+						initialListener = null;
+					}
+					return;
+				}
+				const cspDomains = fetchedResource._meta?.ui?.csp?.resourceDomains;
+				iframe.srcdoc = buildSandboxHTML(cspDomains);
+				iframeRef.current = iframe;
+				container.appendChild(iframe);
+				await sandboxReady;
+				if (!mounted) return;
+				console.log("[MCPAppsRenderer] Sandbox proxy ready");
+				messageHandler = async (event) => {
+					if (event.source !== iframe.contentWindow) return;
+					const msg = event.data;
+					if (!msg || typeof msg !== "object" || msg.jsonrpc !== "2.0") return;
+					console.log("[MCPAppsRenderer] Received from iframe:", msg);
+					if (isRequest(msg)) switch (msg.method) {
+						case "ui/initialize":
+							sendResponse(msg.id, {
+								protocolVersion: PROTOCOL_VERSION,
+								hostInfo: {
+									name: "CopilotKit MCP Apps Host",
+									version: "1.0.0"
+								},
+								hostCapabilities: {
+									openLinks: {},
+									logging: {}
+								},
+								hostContext: {
+									theme: "light",
+									platform: "web"
+								}
+							});
+							break;
+						case "ui/message": {
+							const currentAgent = agentRef.current;
+							if (!currentAgent) {
+								console.warn("[MCPAppsRenderer] ui/message: No agent available");
+								sendResponse(msg.id, { isError: false });
+								break;
+							}
+							try {
+								const params = msg.params;
+								const role = params.role || "user";
+								const textContent = params.content?.filter((c) => c.type === "text" && c.text).map((c) => c.text).join("\n") || "";
+								if (textContent) currentAgent.addMessage({
+									id: crypto.randomUUID(),
+									role,
+									content: textContent
+								});
+								sendResponse(msg.id, { isError: false });
+								if ((params.followUp ?? role === "user") && textContent) mcpAppsRequestQueue.enqueue(currentAgent, () => copilotkit.runAgent({ agent: currentAgent })).catch((err) => console.error("[MCPAppsRenderer] ui/message agent run failed:", err));
+							} catch (err) {
+								console.error("[MCPAppsRenderer] ui/message error:", err);
+								sendResponse(msg.id, { isError: true });
+							}
+							break;
+						}
+						case "ui/open-link": {
+							const url = msg.params?.url;
+							if (url) {
+								window.open(url, "_blank", "noopener,noreferrer");
+								sendResponse(msg.id, { isError: false });
+							} else sendErrorResponse(msg.id, -32602, "Missing url parameter");
+							break;
+						}
+						case "tools/call": {
+							const { serverHash, serverId } = contentRef.current;
+							const currentAgent = agentRef.current;
+							if (!serverHash) {
+								sendErrorResponse(msg.id, -32603, "No server hash available for proxying");
+								break;
+							}
+							if (!currentAgent) {
+								sendErrorResponse(msg.id, -32603, "No agent available for proxying");
+								break;
+							}
+							try {
+								const runResult = await mcpAppsRequestQueue.enqueue(currentAgent, () => currentAgent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
+									serverHash,
+									serverId,
+									method: "tools/call",
+									params: msg.params
+								} } }));
+								sendResponse(msg.id, runResult.result || {});
+							} catch (err) {
+								console.error("[MCPAppsRenderer] tools/call error:", err);
+								sendErrorResponse(msg.id, -32603, String(err));
+							}
+							break;
+						}
+						default: sendErrorResponse(msg.id, -32601, `Method not found: ${msg.method}`);
+					}
+					if (isNotification(msg)) switch (msg.method) {
+						case "ui/notifications/initialized":
+							console.log("[MCPAppsRenderer] Inner iframe initialized");
+							if (mounted) setIframeReady(true);
+							break;
+						case "ui/notifications/size-changed": {
+							const { width, height } = msg.params || {};
+							console.log("[MCPAppsRenderer] Size change:", {
+								width,
+								height
+							});
+							if (mounted) setIframeSize({
+								width: typeof width === "number" ? width : void 0,
+								height: typeof height === "number" ? height : void 0
+							});
+							break;
+						}
+						case "notifications/message":
+							console.log("[MCPAppsRenderer] App log:", msg.params);
+							break;
+					}
+				};
+				window.addEventListener("message", messageHandler);
+				let html;
+				if (fetchedResource.text) html = fetchedResource.text;
+				else if (fetchedResource.blob) html = atob(fetchedResource.blob);
+				else throw new Error("Resource has no text or blob content");
+				sendNotification("ui/notifications/sandbox-resource-ready", { html });
+			} catch (err) {
+				console.error("[MCPAppsRenderer] Setup error:", err);
+				if (mounted) setError(err instanceof Error ? err : new Error(String(err)));
+			}
+		};
+		setup();
+		return () => {
+			mounted = false;
+			if (initialListener) {
+				window.removeEventListener("message", initialListener);
+				initialListener = null;
+			}
+			if (messageHandler) window.removeEventListener("message", messageHandler);
+			if (createdIframe) {
+				createdIframe.remove();
+				createdIframe = null;
+			}
+			iframeRef.current = null;
+		};
+	}, [
+		isLoading,
+		fetchedResource,
+		sendNotification,
+		sendResponse,
+		sendErrorResponse
+	]);
+	useEffect(() => {
+		if (iframeRef.current) {
+			if (iframeSize.width !== void 0) {
+				iframeRef.current.style.minWidth = `min(${iframeSize.width}px, 100%)`;
+				iframeRef.current.style.width = "100%";
+			}
+			if (iframeSize.height !== void 0) iframeRef.current.style.height = `${iframeSize.height}px`;
+		}
+	}, [iframeSize]);
+	useEffect(() => {
+		if (iframeReady && content.toolInput) {
+			console.log("[MCPAppsRenderer] Sending tool input:", content.toolInput);
+			sendNotification("ui/notifications/tool-input", { arguments: content.toolInput });
+		}
+	}, [
+		iframeReady,
+		content.toolInput,
+		sendNotification
+	]);
+	useEffect(() => {
+		if (iframeReady && content.result) {
+			console.log("[MCPAppsRenderer] Sending tool result:", content.result);
+			sendNotification("ui/notifications/tool-result", content.result);
+		}
+	}, [
+		iframeReady,
+		content.result,
+		sendNotification
+	]);
+	const borderStyle = fetchedResource?._meta?.ui?.prefersBorder === true ? {
+		borderRadius: "8px",
+		backgroundColor: "#f9f9f9",
+		border: "1px solid #e0e0e0"
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		style: {
+			width: "100%",
+			height: iframeSize.height ? `${iframeSize.height}px` : "auto",
+			minHeight: "100px",
+			overflow: "hidden",
+			position: "relative",
+			...borderStyle
+		},
+		children: [isLoading && /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "1rem",
+				color: "#666"
+			},
+			children: "Loading..."
+		}), error && /* @__PURE__ */ jsxs("div", {
+			style: {
+				color: "red",
+				padding: "1rem"
+			},
+			children: ["Error: ", error.message]
+		})]
+	});
+};
+
+//#endregion
+//#region src/v2/providers/SandboxFunctionsContext.ts
+const SandboxFunctionsContext = createContext([]);
+function useSandboxFunctions() {
+	return useContext(SandboxFunctionsContext);
+}
+
+//#endregion
+//#region src/v2/lib/processPartialHtml.ts
+/**
+* Extracts all complete `<style>` blocks from the raw HTML.
+* Returns the concatenated style tags, suitable for injection into `<head>`.
+*/
+function extractCompleteStyles(html) {
+	const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
+	return matches ? matches.join("") : "";
+}
+/**
+* Processes raw accumulated HTML for safe preview via innerHTML injection.
+* Pure function, no DOM dependencies.
+*
+* Pipeline (order matters):
+* 1. Strip incomplete tag at end
+* 2. Strip complete <style>, <script>, and <head> blocks
+* 3. Strip incomplete <style>/<script>/<head> blocks
+* 4. Strip incomplete HTML entities
+* 5. Extract body content (or use full string if no <body>)
+*/
+function processPartialHtml(html) {
+	let result = html;
+	result = result.replace(/<[^>]*$/, "");
+	result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
+	result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
+	result = result.replace(/&[a-zA-Z0-9#]*$/, "");
+	const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
+	if (bodyMatch) {
+		result = bodyMatch[1];
+		result = result.replace(/<\/body>[\s\S]*/i, "");
+	}
+	return result;
+}
+
+//#endregion
+//#region src/v2/components/OpenGenerativeUIRenderer.tsx
+const OpenGenerativeUIActivityType = "open-generative-ui";
+const OpenGenerativeUIContentSchema = z.object({
+	initialHeight: z.number().optional(),
+	generating: z.boolean().optional(),
+	css: z.string().optional(),
+	cssComplete: z.boolean().optional(),
+	html: z.array(z.string()).optional(),
+	htmlComplete: z.boolean().optional(),
+	jsFunctions: z.string().optional(),
+	jsFunctionsComplete: z.boolean().optional(),
+	jsExpressions: z.array(z.string()).optional(),
+	jsExpressionsComplete: z.boolean().optional()
+});
+/**
+* Schema for the generateSandboxedUi tool call arguments.
+* Used by the frontend tool renderer to display placeholder messages.
+*/
+const GenerateSandboxedUiArgsSchema = z.object({
+	initialHeight: z.number().optional(),
+	placeholderMessages: z.array(z.string()).optional(),
+	css: z.string().optional(),
+	html: z.string().optional(),
+	jsFunctions: z.string().optional(),
+	jsExpressions: z.array(z.string()).optional()
+});
+const THROTTLE_MS = 1e3;
+/**
+* Returns true when the inner component should re-render immediately
+* (no throttle delay).
+*/
+function shouldFlushImmediately(prev, next) {
+	if (next.cssComplete && (!prev || !prev.cssComplete)) return true;
+	if (next.htmlComplete) return true;
+	if (next.generating === false) return true;
+	if (next.jsFunctions && (!prev || !prev.jsFunctions)) return true;
+	if ((next.jsExpressions?.length ?? 0) > (prev?.jsExpressions?.length ?? 0)) return true;
+	if (next.html?.length && (!prev || !prev.html?.length)) return true;
+	return false;
+}
+/**
+* Outer wrapper — absorbs every parent re-render but only forwards
+* throttled content snapshots to the memoized inner component.
+*/
+const OpenGenerativeUIActivityRenderer = function OpenGenerativeUIActivityRenderer({ content }) {
+	const latestContentRef = useRef(content);
+	latestContentRef.current = content;
+	const [throttledContent, setThrottledContent] = useState(content);
+	const throttledContentRef = useRef(throttledContent);
+	const timerRef = useRef(null);
+	if (throttledContentRef.current !== content) {
+		if (shouldFlushImmediately(throttledContentRef.current, content)) {
+			if (timerRef.current !== null) {
+				clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+			throttledContentRef.current = content;
+			setThrottledContent(content);
+		}
+	}
+	const flush = useCallback(() => {
+		timerRef.current = null;
+		const latest = latestContentRef.current;
+		throttledContentRef.current = latest;
+		setThrottledContent(latest);
+	}, []);
+	useEffect(() => {
+		if (throttledContentRef.current === content) return;
+		if (timerRef.current === null) timerRef.current = setTimeout(flush, THROTTLE_MS);
+	}, [content, flush]);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current !== null) clearTimeout(timerRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(OpenGenerativeUIActivityRendererInner, { content: throttledContent });
+};
+function ensureHead(html) {
+	if (/<head[\s>]/i.test(html)) return html;
+	return `<head></head>${html}`;
+}
+function injectCssIntoHtml(html, css) {
+	const headCloseIdx = html.indexOf("</head>");
+	if (headCloseIdx !== -1) return html.slice(0, headCloseIdx) + `<style>${css}</style>` + html.slice(headCloseIdx);
+	return `<head><style>${css}</style></head>${html}`;
+}
+const OpenGenerativeUIActivityRendererInner = React.memo(function OpenGenerativeUIActivityRendererInner({ content }) {
+	const initialHeight = content.initialHeight ?? 200;
+	const [autoHeight, setAutoHeight] = useState(null);
+	const sandboxFunctions = useSandboxFunctions();
+	const localApi = useMemo(() => {
+		const api = {};
+		for (const fn of sandboxFunctions) api[fn.name] = fn.handler;
+		return api;
+	}, [sandboxFunctions]);
+	const fullHtml = content.htmlComplete && content.html?.length ? content.html.join("") : void 0;
+	const css = content.cssComplete ? content.css : void 0;
+	const cssReady = !!content.cssComplete;
+	const partialHtml = !content.htmlComplete && content.html?.length ? content.html.join("") : void 0;
+	const previewBody = partialHtml ? processPartialHtml(partialHtml) : void 0;
+	const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : "";
+	const hasPreview = cssReady && !!previewBody?.trim();
+	const hasVisibleSandbox = !!fullHtml || hasPreview;
+	const containerRef = useRef(null);
+	const sandboxRef = useRef(null);
+	const previewSandboxRef = useRef(null);
+	const previewReadyRef = useRef(false);
+	const sandboxReadyRef = useRef(false);
+	const executedIndexRef = useRef(0);
+	const pendingQueueRef = useRef([]);
+	const jsFunctionsInjectedRef = useRef(false);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || fullHtml || !hasPreview || previewSandboxRef.current) return;
+		let cancelled = false;
+		import("@jetbrains/websandbox").then((mod) => {
+			if (cancelled) return;
+			const sandbox = (mod.default?.default ?? mod.default).create({}, {
+				frameContainer: container,
+				frameContent: "<head></head><body></body>",
+				allowAdditionalAttributes: ""
+			});
+			previewSandboxRef.current = sandbox;
+			sandbox.iframe.style.width = "100%";
+			sandbox.iframe.style.height = "100%";
+			sandbox.iframe.style.border = "none";
+			sandbox.iframe.style.backgroundColor = "transparent";
+			sandbox.promise.then(() => {
+				if (cancelled) return;
+				previewReadyRef.current = true;
+				sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+				const headParts = [];
+				if (css) headParts.push(`<style>${css}</style>`);
+				if (previewStyles) headParts.push(previewStyles);
+				if (headParts.length) sandbox.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
+				if (previewBody) sandbox.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
+			});
+		}).catch((err) => {
+			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [hasPreview, fullHtml]);
+	useEffect(() => {
+		if (!previewSandboxRef.current || !previewReadyRef.current) return;
+		const headParts = [];
+		if (css) headParts.push(`<style>${css}</style>`);
+		if (previewStyles) headParts.push(previewStyles);
+		if (headParts.length) previewSandboxRef.current.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
+		if (!previewBody) return;
+		previewSandboxRef.current.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
+	}, [
+		previewBody,
+		previewStyles,
+		css
+	]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || !fullHtml) return;
+		if (previewSandboxRef.current) {
+			previewSandboxRef.current.destroy();
+			previewSandboxRef.current = null;
+			previewReadyRef.current = false;
+		}
+		let cancelled = false;
+		executedIndexRef.current = 0;
+		jsFunctionsInjectedRef.current = false;
+		sandboxReadyRef.current = false;
+		pendingQueueRef.current = [];
+		const htmlContent = css ? injectCssIntoHtml(fullHtml, css) : fullHtml;
+		import("@jetbrains/websandbox").then((mod) => {
+			if (cancelled) return;
+			const sandbox = (mod.default?.default ?? mod.default).create(localApi, {
+				frameContainer: container,
+				frameContent: ensureHead(htmlContent),
+				allowAdditionalAttributes: ""
+			});
+			sandboxRef.current = sandbox;
+			sandbox.iframe.style.width = "100%";
+			sandbox.iframe.style.height = "100%";
+			sandbox.iframe.style.border = "none";
+			sandbox.iframe.style.backgroundColor = "transparent";
+			sandbox.promise.then(() => {
+				if (cancelled) return;
+				sandboxReadyRef.current = true;
+				sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+				const queue = pendingQueueRef.current;
+				pendingQueueRef.current = [];
+				for (const code of queue) sandbox.run(code);
+			});
+		}).catch((err) => {
+			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+		});
+		return () => {
+			cancelled = true;
+			if (previewSandboxRef.current) {
+				previewSandboxRef.current.destroy();
+				previewSandboxRef.current = null;
+				previewReadyRef.current = false;
+			}
+			if (sandboxRef.current) {
+				sandboxRef.current.destroy();
+				sandboxRef.current = null;
+			}
+			sandboxReadyRef.current = false;
+			setAutoHeight(null);
+		};
+	}, [
+		fullHtml,
+		css,
+		localApi
+	]);
+	useEffect(() => {
+		if (!content.jsFunctions || jsFunctionsInjectedRef.current) return;
+		jsFunctionsInjectedRef.current = true;
+		const sandbox = sandboxRef.current;
+		if (sandboxReadyRef.current && sandbox) sandbox.run(content.jsFunctions);
+		else pendingQueueRef.current.push(content.jsFunctions);
+	}, [content.jsFunctions]);
+	useEffect(() => {
+		const expressions = content.jsExpressions;
+		if (!expressions || expressions.length === 0) return;
+		const startIndex = executedIndexRef.current;
+		if (startIndex >= expressions.length) return;
+		const newExprs = expressions.slice(startIndex);
+		executedIndexRef.current = expressions.length;
+		const sandbox = sandboxRef.current;
+		if (sandboxReadyRef.current && sandbox) (async () => {
+			for (const expr of newExprs) await sandbox.run(expr);
+		})();
+		else pendingQueueRef.current.push(...newExprs);
+	}, [content.jsExpressions?.length]);
+	const generationDone = content.generating === false;
+	useEffect(() => {
+		const sandbox = sandboxRef.current;
+		if (!generationDone || !sandbox) return;
+		let handled = false;
+		const onMessage = (e) => {
+			if (handled) return;
+			if (e.source === sandbox.iframe.contentWindow && e.data?.type === "__ck_resize") {
+				handled = true;
+				setAutoHeight(e.data.height);
+				window.removeEventListener("message", onMessage);
+			}
+		};
+		window.addEventListener("message", onMessage);
+		const measureOnce = `
+        (function() {
+          var s = document.createElement('style');
+          s.textContent = 'body { height: auto !important; min-height: 0 !important; }';
+          document.head.appendChild(s);
+          var h = document.body.scrollHeight;
+          var cs = getComputedStyle(document.body);
+          h += parseFloat(cs.marginTop) || 0;
+          h += parseFloat(cs.marginBottom) || 0;
+          s.remove();
+          parent.postMessage({ type: "__ck_resize", height: Math.ceil(h) }, "*");
+        })();
+      `;
+		if (sandboxReadyRef.current) sandbox.run(measureOnce);
+		else pendingQueueRef.current.push(measureOnce);
+		return () => {
+			window.removeEventListener("message", onMessage);
+		};
+	}, [generationDone]);
+	const height = autoHeight ?? initialHeight;
+	const isGenerating = content.generating !== false;
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		style: {
+			position: "relative",
+			width: "100%",
+			height: `${height}px`,
+			borderRadius: "8px",
+			backgroundColor: hasVisibleSandbox ? "transparent" : "#f5f5f5",
+			border: hasVisibleSandbox ? "none" : "1px solid #e0e0e0",
+			display: hasVisibleSandbox ? "block" : "flex",
+			alignItems: hasVisibleSandbox ? void 0 : "center",
+			justifyContent: hasVisibleSandbox ? void 0 : "center",
+			overflow: "hidden"
+		},
+		children: isGenerating && /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				inset: 0,
+				zIndex: 10,
+				pointerEvents: "all",
+				backgroundColor: "rgba(255, 255, 255, 0.5)",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			children: [/* @__PURE__ */ jsxs("svg", {
+				width: "48",
+				height: "48",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				style: { animation: "ck-spin 1s linear infinite" },
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "#e0e0e0",
+					strokeWidth: "3"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M12 2a10 10 0 0 1 10 10",
+					stroke: "#999",
+					strokeWidth: "3",
+					strokeLinecap: "round"
+				})]
+			}), /* @__PURE__ */ jsx("style", { children: `@keyframes ck-spin { to { transform: rotate(360deg) } }` })]
+		})
+	});
+}, (prev, next) => prev.content === next.content);
+/**
+* Frontend tool renderer for generateSandboxedUi.
+* Displays placeholder messages while the UI is being generated.
+*/
+const OpenGenerativeUIToolRenderer = function OpenGenerativeUIToolRenderer(props) {
+	const [visibleMessageIndex, setVisibleMessageIndex] = useState(0);
+	const prevMessageCountRef = useRef(0);
+	const messages = props.args.placeholderMessages;
+	useEffect(() => {
+		if (!messages || messages.length === 0) return;
+		if (messages.length !== prevMessageCountRef.current) {
+			prevMessageCountRef.current = messages.length;
+			setVisibleMessageIndex(messages.length - 1);
+		}
+		if (props.status === ToolCallStatus.Complete) return;
+		const timer = setInterval(() => {
+			setVisibleMessageIndex((i) => (i + 1) % messages.length);
+		}, 5e3);
+		return () => clearInterval(timer);
+	}, [messages?.length, props.status]);
+	if (props.status === ToolCallStatus.Complete) return null;
+	if (!messages || messages.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: "8px 12px",
+			color: "#999",
+			fontSize: "14px"
+		},
+		children: messages[visibleMessageIndex] ?? messages[0]
+	});
+};
+
+//#endregion
+//#region src/v2/a2ui/A2UIMessageRenderer.tsx
+/**
+* The container key used to wrap A2UI operations for explicit detection.
+* Must match A2UI_OPERATIONS_KEY in @ag-ui/a2ui-middleware and copilotkit.a2ui (Python).
+*/
+const A2UI_OPERATIONS_KEY = "a2ui_operations";
+let initialized = false;
+function ensureInitialized() {
+	if (!initialized) {
+		initializeDefaultCatalog();
+		injectStyles();
+		initialized = true;
+	}
+}
+function createA2UIMessageRenderer(options) {
+	const { theme, catalog, loadingComponent } = options;
+	return {
+		activityType: "a2ui-surface",
+		content: z.any(),
+		render: ({ content, agent }) => {
+			ensureInitialized();
+			const [operations, setOperations] = useState([]);
+			const { copilotkit } = useCopilotKit();
 			const lastContentRef = useRef(null);
 			useEffect(() => {
 				if (content === lastContentRef.current) return;
@@ -2728,18 +3023,6 @@ 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
 /**
@@ -3439,215 +3722,53 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = {}, c
 			name: fn.name,
 			description: fn.description,
 			parameters: schemaToJsonSchema(fn.parameters, { zodToJsonSchema })
-		})));
-	}, [sandboxFunctionsList]);
-	useLayoutEffect(() => {
-		if (!copilotkit || !sandboxFunctionsDescriptors || !openGenUIActive) return;
-		const id = copilotkit.addContext({
-			description: "Sandbox functions available in generated sandboxed UI code. Call via: await Websandbox.connection.remote.<functionName>(args)",
-			value: sandboxFunctionsDescriptors
-		});
-		return () => {
-			copilotkit.removeContext(id);
-		};
-	}, [
-		copilotkit,
-		sandboxFunctionsDescriptors,
-		openGenUIActive
-	]);
-	const contextValue = useMemo(() => ({
-		copilotkit,
-		executingToolCallIds
-	}), [copilotkit, executingToolCallIds]);
-	const licenseContextValue = useMemo(() => createLicenseContextValue(null), []);
-	return /* @__PURE__ */ jsx(SandboxFunctionsContext.Provider, {
-		value: sandboxFunctionsList,
-		children: /* @__PURE__ */ jsx(CopilotKitContext.Provider, {
-			value: contextValue,
-			children: /* @__PURE__ */ jsxs(LicenseContext.Provider, {
-				value: licenseContextValue,
-				children: [
-					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UIBuiltInToolCallRenderer, {}),
-					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UICatalogContext, {
-						catalog: a2ui?.catalog,
-						includeSchema: a2ui?.includeSchema
-					}),
-					children,
-					shouldRenderInspector ? /* @__PURE__ */ jsx(CopilotKitInspector, {
-						core: copilotkit,
-						defaultAnchor: inspectorDefaultAnchor
-					}) : null,
-					runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "no_license" }),
-					runtimeLicenseStatus === "expired" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expired" }),
-					runtimeLicenseStatus === "invalid" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "invalid" }),
-					runtimeLicenseStatus === "expiring" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expiring" })
-				]
-			})
-		})
-	});
-};
-
-//#endregion
-//#region src/v2/hooks/use-agent.tsx
-let UseAgentUpdate = /* @__PURE__ */ function(UseAgentUpdate) {
-	UseAgentUpdate["OnMessagesChanged"] = "OnMessagesChanged";
-	UseAgentUpdate["OnStateChanged"] = "OnStateChanged";
-	UseAgentUpdate["OnRunStatusChanged"] = "OnRunStatusChanged";
-	return UseAgentUpdate;
-}({});
-const ALL_UPDATES = [
-	UseAgentUpdate.OnMessagesChanged,
-	UseAgentUpdate.OnStateChanged,
-	UseAgentUpdate.OnRunStatusChanged
-];
-/**
-* Clone a registry agent for per-thread isolation.
-* Copies agent configuration (transport, headers, etc.) but resets conversation
-* state (messages, threadId, state) so each thread starts fresh.
-*/
-function cloneForThread(source, threadId, headers) {
-	const clone = source.clone();
-	if (clone === source) throw new Error(`useAgent: ${source.constructor.name}.clone() returned the same instance. clone() must return a new, independent object.`);
-	clone.threadId = threadId;
-	clone.setMessages([]);
-	clone.setState({});
-	if (clone instanceof HttpAgent) clone.headers = { ...headers };
-	return clone;
-}
-/**
-* Module-level WeakMap: registryAgent → (threadId → clone).
-* Shared across all useAgent() calls so that every component using the same
-* (agentId, threadId) pair receives the same agent instance. Using WeakMap
-* ensures the clone map is garbage-collected when the registry agent is
-* replaced (e.g. after reconnect or hot-reload).
-*/
-const globalThreadCloneMap = /* @__PURE__ */ new WeakMap();
-/**
-* Look up an existing per-thread clone without creating one.
-* Returns undefined when no clone has been created yet for this pair.
-*/
-function getThreadClone(registryAgent, threadId) {
-	if (!registryAgent || !threadId) return void 0;
-	return globalThreadCloneMap.get(registryAgent)?.get(threadId);
-}
-function getOrCreateThreadClone(existing, threadId, headers) {
-	let byThread = globalThreadCloneMap.get(existing);
-	if (!byThread) {
-		byThread = /* @__PURE__ */ new Map();
-		globalThreadCloneMap.set(existing, byThread);
-	}
-	const cached = byThread.get(threadId);
-	if (cached) return cached;
-	const clone = cloneForThread(existing, threadId, headers);
-	byThread.set(threadId, clone);
-	return clone;
-}
-function useAgent({ agentId, threadId, updates, throttleMs } = {}) {
-	agentId ??= DEFAULT_AGENT_ID;
-	const { copilotkit } = useCopilotKit();
-	const providerThrottleMs = copilotkit.defaultThrottleMs;
-	const chatConfig = useCopilotChatConfiguration();
-	threadId ??= chatConfig?.threadId;
-	const [, forceUpdate] = useReducer((x) => x + 1, 0);
-	const updateFlags = useMemo(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
-	const provisionalAgentCache = useRef(/* @__PURE__ */ new Map());
-	const agent = useMemo(() => {
-		const cacheKey = threadId ? `${agentId}:${threadId}` : agentId;
-		const existing = copilotkit.getAgent(agentId);
-		if (existing) {
-			provisionalAgentCache.current.delete(cacheKey);
-			provisionalAgentCache.current.delete(agentId);
-			if (!threadId) return existing;
-			return getOrCreateThreadClone(existing, threadId, copilotkit.headers);
-		}
-		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
-		const status = copilotkit.runtimeConnectionStatus;
-		if (isRuntimeConfigured && (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
-			const cached = provisionalAgentCache.current.get(cacheKey);
-			if (cached) {
-				cached.headers = { ...copilotkit.headers };
-				return cached;
-			}
-			const provisional = new ProxiedCopilotRuntimeAgent({
-				runtimeUrl: copilotkit.runtimeUrl,
-				agentId,
-				transport: copilotkit.runtimeTransport,
-				runtimeMode: "pending"
-			});
-			provisional.headers = { ...copilotkit.headers };
-			if (threadId) provisional.threadId = threadId;
-			provisionalAgentCache.current.set(cacheKey, provisional);
-			return provisional;
-		}
-		if (isRuntimeConfigured && status === CopilotKitCoreRuntimeConnectionStatus.Error) {
-			const cached = provisionalAgentCache.current.get(cacheKey);
-			if (cached) {
-				cached.headers = { ...copilotkit.headers };
-				return cached;
-			}
-			const provisional = new ProxiedCopilotRuntimeAgent({
-				runtimeUrl: copilotkit.runtimeUrl,
-				agentId,
-				transport: copilotkit.runtimeTransport,
-				runtimeMode: "pending"
-			});
-			provisional.headers = { ...copilotkit.headers };
-			if (threadId) provisional.threadId = threadId;
-			provisionalAgentCache.current.set(cacheKey, provisional);
-			return provisional;
-		}
-		const knownAgents = Object.keys(copilotkit.agents ?? {});
-		const runtimePart = isRuntimeConfigured ? `runtimeUrl=${copilotkit.runtimeUrl}` : "no runtimeUrl";
-		throw new Error(`useAgent: Agent '${agentId}' not found after runtime sync (${runtimePart}). ` + (knownAgents.length ? `Known agents: [${knownAgents.join(", ")}]` : "No agents registered.") + " Verify your runtime /info and/or agents__unsafe_dev_only.");
-	}, [
-		agentId,
-		threadId,
-		copilotkit.agents,
-		copilotkit.runtimeConnectionStatus,
-		copilotkit.runtimeUrl,
-		copilotkit.runtimeTransport,
-		JSON.stringify(copilotkit.headers)
-	]);
-	useEffect(() => {
-		if (updateFlags.length === 0) return;
-		let active = true;
-		const handlers = {};
-		let batchScheduled = false;
-		const batchedForceUpdate = () => {
-			if (!active) return;
-			if (!batchScheduled) {
-				batchScheduled = true;
-				queueMicrotask(() => {
-					batchScheduled = false;
-					if (active) forceUpdate();
-				});
-			}
-		};
-		if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) handlers.onMessagesChanged = batchedForceUpdate;
-		if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) handlers.onStateChanged = batchedForceUpdate;
-		if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {
-			handlers.onRunInitialized = batchedForceUpdate;
-			handlers.onRunFinalized = batchedForceUpdate;
-			handlers.onRunFailed = batchedForceUpdate;
-			handlers.onRunErrorEvent = batchedForceUpdate;
-		}
-		const subscription = copilotkit.subscribeToAgentWithOptions(agent, handlers, { throttleMs });
+		})));
+	}, [sandboxFunctionsList]);
+	useLayoutEffect(() => {
+		if (!copilotkit || !sandboxFunctionsDescriptors || !openGenUIActive) return;
+		const id = copilotkit.addContext({
+			description: "Sandbox functions available in generated sandboxed UI code. Call via: await Websandbox.connection.remote.<functionName>(args)",
+			value: sandboxFunctionsDescriptors
+		});
 		return () => {
-			active = false;
-			subscription.unsubscribe();
+			copilotkit.removeContext(id);
 		};
 	}, [
-		agent,
-		forceUpdate,
-		throttleMs,
-		providerThrottleMs,
-		updateFlags
+		copilotkit,
+		sandboxFunctionsDescriptors,
+		openGenUIActive
 	]);
-	useEffect(() => {
-		if (agent instanceof HttpAgent) agent.headers = { ...copilotkit.headers };
-	}, [agent, JSON.stringify(copilotkit.headers)]);
-	return { agent };
-}
+	const contextValue = useMemo(() => ({
+		copilotkit,
+		executingToolCallIds
+	}), [copilotkit, executingToolCallIds]);
+	const licenseContextValue = useMemo(() => createLicenseContextValue(null), []);
+	return /* @__PURE__ */ jsx(SandboxFunctionsContext.Provider, {
+		value: sandboxFunctionsList,
+		children: /* @__PURE__ */ jsx(CopilotKitContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsxs(LicenseContext.Provider, {
+				value: licenseContextValue,
+				children: [
+					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UIBuiltInToolCallRenderer, {}),
+					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UICatalogContext, {
+						catalog: a2ui?.catalog,
+						includeSchema: a2ui?.includeSchema
+					}),
+					children,
+					shouldRenderInspector ? /* @__PURE__ */ jsx(CopilotKitInspector, {
+						core: copilotkit,
+						defaultAnchor: inspectorDefaultAnchor
+					}) : null,
+					runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "no_license" }),
+					runtimeLicenseStatus === "expired" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expired" }),
+					runtimeLicenseStatus === "invalid" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "invalid" }),
+					runtimeLicenseStatus === "expiring" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expiring" })
+				]
+			})
+		})
+	});
+};
 
 //#endregion
 //#region src/v2/hooks/use-render-custom-messages.tsx
@@ -3666,8 +3787,7 @@ function useRenderCustomMessages() {
 		const { message, position } = params;
 		const resolvedRunId = copilotkit.getRunIdForMessage(agentId, threadId, message.id) ?? copilotkit.getRunIdsForThread(agentId, threadId).slice(-1)[0];
 		const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
-		const registryAgent = copilotkit.getAgent(agentId);
-		const agent = getThreadClone(registryAgent, threadId) ?? registryAgent;
+		const agent = copilotkit.getAgent(agentId);
 		if (!agent) return null;
 		const messagesIdsInRun = resolvedRunId ? agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === resolvedRunId).map((msg) => msg.id) : [message.id];
 		const rawMessageIndex = agent.messages.findIndex((msg) => msg.id === message.id);
@@ -3676,426 +3796,161 @@ function useRenderCustomMessages() {
 		const numberOfMessagesInRun = resolvedRunId ? messagesIdsInRun.length : 1;
 		const stateSnapshot = resolvedRunId ? copilotkit.getStateByRun(agentId, threadId, resolvedRunId) : void 0;
 		let result = null;
-		for (const renderer of customMessageRenderers) {
-			if (!renderer.render) continue;
-			const Component = renderer.render;
-			result = /* @__PURE__ */ jsx(Component, {
-				message,
-				position,
-				runId,
-				messageIndex,
-				messageIndexInRun,
-				numberOfMessagesInRun,
-				agentId,
-				stateSnapshot
-			}, `${runId}-${message.id}-${position}`);
-			if (result) break;
-		}
-		return result;
-	};
-}
-
-//#endregion
-//#region src/v2/hooks/use-render-activity-message.tsx
-function useRenderActivityMessage() {
-	const { copilotkit } = useCopilotKit();
-	const config = useCopilotChatConfiguration();
-	const agentId = config?.agentId ?? DEFAULT_AGENT_ID;
-	const renderers = copilotkit.renderActivityMessages;
-	const findRenderer = useCallback((activityType) => {
-		if (!renderers.length) return null;
-		const matches = renderers.filter((renderer) => renderer.activityType === activityType);
-		return matches.find((candidate) => candidate.agentId === agentId) ?? matches.find((candidate) => candidate.agentId === void 0) ?? renderers.find((candidate) => candidate.activityType === "*") ?? null;
-	}, [agentId, renderers]);
-	const renderActivityMessage = useCallback((message) => {
-		const renderer = findRenderer(message.activityType);
-		if (!renderer) return null;
-		const parseResult = renderer.content.safeParse(message.content);
-		if (!parseResult.success) {
-			console.warn(`Failed to parse content for activity message '${message.activityType}':`, parseResult.error);
-			return null;
-		}
-		const Component = renderer.render;
-		const registryAgent = copilotkit.getAgent(agentId);
-		const agent = getThreadClone(registryAgent, config?.threadId) ?? registryAgent;
-		return /* @__PURE__ */ jsx(Component, {
-			activityType: message.activityType,
-			content: parseResult.data,
-			message,
-			agent
-		}, message.id);
-	}, [
-		agentId,
-		config?.threadId,
-		copilotkit,
-		findRenderer
-	]);
-	return useMemo(() => ({
-		renderActivityMessage,
-		findRenderer
-	}), [renderActivityMessage, findRenderer]);
-}
-
-//#endregion
-//#region src/v2/hooks/use-frontend-tool.tsx
-const EMPTY_DEPS$1 = [];
-function useFrontendTool(tool, deps) {
-	const { copilotkit } = useCopilotKit();
-	const extraDeps = deps ?? EMPTY_DEPS$1;
-	useEffect(() => {
-		const name = tool.name;
-		if (copilotkit.getTool({
-			toolName: name,
-			agentId: tool.agentId
-		})) {
-			console.warn(`Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`);
-			copilotkit.removeTool(name, tool.agentId);
-		}
-		copilotkit.addTool(tool);
-		if (tool.render) copilotkit.addHookRenderToolCall({
-			name,
-			args: tool.parameters,
-			agentId: tool.agentId,
-			render: tool.render
-		});
-		return () => {
-			copilotkit.removeTool(name, tool.agentId);
-		};
-	}, [
-		tool.name,
-		tool.available,
-		copilotkit,
-		JSON.stringify(extraDeps)
-	]);
-}
-
-//#endregion
-//#region src/v2/hooks/use-component.tsx
-/**
-* Registers a React component as a frontend tool renderer in chat.
-*
-* This hook is a convenience wrapper around `useFrontendTool` that:
-* - builds a model-facing tool description,
-* - forwards optional schema parameters (any Standard Schema V1 compatible library),
-* - renders your component with tool call parameters.
-*
-* Use this when you want to display a typed visual component for a tool call
-* without manually wiring a full frontend tool object.
-*
-* When `parameters` is provided, render props are inferred from the schema.
-* When omitted, the render component may accept any props.
-*
-* @typeParam TSchema - Schema describing tool parameters, or `undefined` when no schema is given.
-* @param config - Tool registration config.
-* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
-*
-* @example
-* ```tsx
-* // Without parameters — render accepts any props
-* useComponent({
-*   name: "showGreeting",
-*   render: ({ message }: { message: string }) => <div>{message}</div>,
-* });
-* ```
-*
-* @example
-* ```tsx
-* // With parameters — render props inferred from schema
-* useComponent({
-*   name: "showWeatherCard",
-*   parameters: z.object({ city: z.string() }),
-*   render: ({ city }) => <div>{city}</div>,
-* });
-* ```
-*
-* @example
-* ```tsx
-* useComponent(
-*   {
-*     name: "renderProfile",
-*     parameters: z.object({ userId: z.string() }),
-*     render: ProfileCard,
-*     agentId: "support-agent",
-*   },
-*   [selectedAgentId],
-* );
-* ```
-*/
-function useComponent(config, deps) {
-	const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
-	const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
-	useFrontendTool({
-		name: config.name,
-		description: fullDescription,
-		parameters: config.parameters,
-		render: ({ args }) => {
-			const Component = config.render;
-			return /* @__PURE__ */ jsx(Component, { ...args });
-		},
-		agentId: config.agentId
-	}, 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) {
+		for (const renderer of customMessageRenderers) {
+			if (!renderer.render) continue;
+			const Component = renderer.render;
+			result = /* @__PURE__ */ jsx(Component, {
+				message,
+				position,
+				runId,
+				messageIndex,
+				messageIndexInRun,
+				numberOfMessagesInRun,
+				agentId,
+				stateSnapshot
+			}, `${runId}-${message.id}-${position}`);
+			if (result) break;
+		}
+		return result;
+	};
+}
+
+//#endregion
+//#region src/v2/hooks/use-render-activity-message.tsx
+function useRenderActivityMessage() {
 	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) => config.render({
-				...props,
-				parameters: props.args
-			}),
-			...config.agentId ? { agentId: config.agentId } : {}
-		});
-		copilotkit.addHookRenderToolCall(renderer);
+	const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
+	const renderers = copilotkit.renderActivityMessages;
+	const findRenderer = useCallback((activityType) => {
+		if (!renderers.length) return null;
+		const matches = renderers.filter((renderer) => renderer.activityType === activityType);
+		return matches.find((candidate) => candidate.agentId === agentId) ?? matches.find((candidate) => candidate.agentId === void 0) ?? renderers.find((candidate) => candidate.activityType === "*") ?? null;
+	}, [agentId, renderers]);
+	const renderActivityMessage = useCallback((message) => {
+		const renderer = findRenderer(message.activityType);
+		if (!renderer) return null;
+		const parseResult = renderer.content.safeParse(message.content);
+		if (!parseResult.success) {
+			console.warn(`Failed to parse content for activity message '${message.activityType}':`, parseResult.error);
+			return null;
+		}
+		const Component = renderer.render;
+		const agent = copilotkit.getAgent(agentId);
+		return /* @__PURE__ */ jsx(Component, {
+			activityType: message.activityType,
+			content: parseResult.data,
+			message,
+			agent
+		}, message.id);
 	}, [
-		config.name,
+		agentId,
 		copilotkit,
-		JSON.stringify(extraDeps)
+		findRenderer
 	]);
-}
-
-//#endregion
-//#region src/v2/hooks/use-default-render-tool.tsx
-/**
-* 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) {
-	useRenderTool({
-		name: "*",
-		render: config?.render ?? DefaultToolCallRenderer
-	}, deps);
-}
-function DefaultToolCallRenderer({ name, parameters, status, result }) {
-	const [isExpanded, setIsExpanded] = useState(false);
-	const statusString = String(status);
-	const isActive = statusString === "inProgress" || statusString === "executing";
-	const isComplete = statusString === "complete";
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			marginTop: "8px",
-			paddingBottom: "8px"
-		},
-		children: /* @__PURE__ */ jsxs("div", {
-			style: {
-				borderRadius: "12px",
-				border: "1px solid #e4e4e7",
-				backgroundColor: "#fafafa",
-				padding: "14px 16px"
-			},
-			children: [/* @__PURE__ */ jsxs("div", {
-				onClick: () => setIsExpanded(!isExpanded),
-				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					gap: "10px",
-					cursor: "pointer",
-					userSelect: "none"
-				},
-				children: [/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: "8px",
-						minWidth: 0
-					},
-					children: [
-						/* @__PURE__ */ jsx("svg", {
-							style: {
-								height: "14px",
-								width: "14px",
-								color: "#71717a",
-								transition: "transform 0.15s",
-								transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-								flexShrink: 0
-							},
-							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", { style: {
-							display: "inline-block",
-							height: "8px",
-							width: "8px",
-							borderRadius: "50%",
-							backgroundColor: isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa",
-							flexShrink: 0
-						} }),
-						/* @__PURE__ */ jsx("span", {
-							style: {
-								fontSize: "13px",
-								fontWeight: 600,
-								color: "#18181b",
-								overflow: "hidden",
-								textOverflow: "ellipsis",
-								whiteSpace: "nowrap"
-							},
-							children: name
-						})
-					]
-				}), /* @__PURE__ */ jsx("span", {
-					style: {
-						display: "inline-flex",
-						alignItems: "center",
-						borderRadius: "9999px",
-						padding: "2px 8px",
-						fontSize: "11px",
-						fontWeight: 500,
-						backgroundColor: isActive ? "#fef3c7" : isComplete ? "#d1fae5" : "#f4f4f5",
-						color: isActive ? "#92400e" : isComplete ? "#065f46" : "#3f3f46",
-						flexShrink: 0
-					},
-					children: isActive ? "Running" : isComplete ? "Done" : status
-				})]
-			}), isExpanded && /* @__PURE__ */ jsxs("div", {
-				style: {
-					marginTop: "12px",
-					display: "grid",
-					gap: "12px"
-				},
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					style: {
-						fontSize: "10px",
-						textTransform: "uppercase",
-						letterSpacing: "0.05em",
-						color: "#71717a"
-					},
-					children: "Arguments"
-				}), /* @__PURE__ */ jsx("pre", {
-					style: {
-						marginTop: "6px",
-						maxHeight: "200px",
-						overflow: "auto",
-						borderRadius: "6px",
-						backgroundColor: "#f4f4f5",
-						padding: "10px",
-						fontSize: "11px",
-						lineHeight: 1.6,
-						color: "#27272a",
-						whiteSpace: "pre-wrap",
-						wordBreak: "break-word"
-					},
-					children: JSON.stringify(parameters ?? {}, null, 2)
-				})] }), result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					style: {
-						fontSize: "10px",
-						textTransform: "uppercase",
-						letterSpacing: "0.05em",
-						color: "#71717a"
-					},
-					children: "Result"
-				}), /* @__PURE__ */ jsx("pre", {
-					style: {
-						marginTop: "6px",
-						maxHeight: "200px",
-						overflow: "auto",
-						borderRadius: "6px",
-						backgroundColor: "#f4f4f5",
-						padding: "10px",
-						fontSize: "11px",
-						lineHeight: 1.6,
-						color: "#27272a",
-						whiteSpace: "pre-wrap",
-						wordBreak: "break-word"
-					},
-					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
-				})] })]
-			})]
-		})
-	});
+	return useMemo(() => ({
+		renderActivityMessage,
+		findRenderer
+	}), [renderActivityMessage, findRenderer]);
+}
+
+//#endregion
+//#region src/v2/hooks/use-frontend-tool.tsx
+const EMPTY_DEPS = [];
+function useFrontendTool(tool, deps) {
+	const { copilotkit } = useCopilotKit();
+	const extraDeps = deps ?? EMPTY_DEPS;
+	useEffect(() => {
+		const name = tool.name;
+		if (copilotkit.getTool({
+			toolName: name,
+			agentId: tool.agentId
+		})) {
+			console.warn(`Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`);
+			copilotkit.removeTool(name, tool.agentId);
+		}
+		copilotkit.addTool(tool);
+		if (tool.render) copilotkit.addHookRenderToolCall({
+			name,
+			args: tool.parameters,
+			agentId: tool.agentId,
+			render: tool.render
+		});
+		return () => {
+			copilotkit.removeTool(name, tool.agentId);
+		};
+	}, [
+		tool.name,
+		tool.available,
+		copilotkit,
+		JSON.stringify(extraDeps)
+	]);
+}
+
+//#endregion
+//#region src/v2/hooks/use-component.tsx
+/**
+* Registers a React component as a frontend tool renderer in chat.
+*
+* This hook is a convenience wrapper around `useFrontendTool` that:
+* - builds a model-facing tool description,
+* - forwards optional schema parameters (any Standard Schema V1 compatible library),
+* - renders your component with tool call parameters.
+*
+* Use this when you want to display a typed visual component for a tool call
+* without manually wiring a full frontend tool object.
+*
+* When `parameters` is provided, render props are inferred from the schema.
+* When omitted, the render component may accept any props.
+*
+* @typeParam TSchema - Schema describing tool parameters, or `undefined` when no schema is given.
+* @param config - Tool registration config.
+* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+*
+* @example
+* ```tsx
+* // Without parameters — render accepts any props
+* useComponent({
+*   name: "showGreeting",
+*   render: ({ message }: { message: string }) => <div>{message}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* // With parameters — render props inferred from schema
+* useComponent({
+*   name: "showWeatherCard",
+*   parameters: z.object({ city: z.string() }),
+*   render: ({ city }) => <div>{city}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* useComponent(
+*   {
+*     name: "renderProfile",
+*     parameters: z.object({ userId: z.string() }),
+*     render: ProfileCard,
+*     agentId: "support-agent",
+*   },
+*   [selectedAgentId],
+* );
+* ```
+*/
+function useComponent(config, deps) {
+	const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
+	const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
+	useFrontendTool({
+		name: config.name,
+		description: fullDescription,
+		parameters: config.parameters,
+		render: ({ args }) => {
+			const Component = config.render;
+			return /* @__PURE__ */ jsx(Component, { ...args });
+		},
+		agentId: config.agentId
+	}, deps);
 }
 
 //#endregion
@@ -4164,6 +4019,118 @@ function useHumanInTheLoop(tool, deps) {
 	]);
 }
 
+//#endregion
+//#region src/v2/hooks/use-agent.tsx
+let UseAgentUpdate = /* @__PURE__ */ function(UseAgentUpdate) {
+	UseAgentUpdate["OnMessagesChanged"] = "OnMessagesChanged";
+	UseAgentUpdate["OnStateChanged"] = "OnStateChanged";
+	UseAgentUpdate["OnRunStatusChanged"] = "OnRunStatusChanged";
+	return UseAgentUpdate;
+}({});
+const ALL_UPDATES = [
+	UseAgentUpdate.OnMessagesChanged,
+	UseAgentUpdate.OnStateChanged,
+	UseAgentUpdate.OnRunStatusChanged
+];
+function useAgent({ agentId, updates, throttleMs } = {}) {
+	agentId ??= DEFAULT_AGENT_ID;
+	const { copilotkit } = useCopilotKit();
+	const providerThrottleMs = copilotkit.defaultThrottleMs;
+	const [, forceUpdate] = useReducer((x) => x + 1, 0);
+	const updateFlags = useMemo(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
+	const provisionalAgentCache = useRef(/* @__PURE__ */ new Map());
+	const agent = useMemo(() => {
+		const existing = copilotkit.getAgent(agentId);
+		if (existing) {
+			provisionalAgentCache.current.delete(agentId);
+			return existing;
+		}
+		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
+		const status = copilotkit.runtimeConnectionStatus;
+		if (isRuntimeConfigured && (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
+			const cached = provisionalAgentCache.current.get(agentId);
+			if (cached) {
+				cached.headers = { ...copilotkit.headers };
+				return cached;
+			}
+			const provisional = new ProxiedCopilotRuntimeAgent({
+				runtimeUrl: copilotkit.runtimeUrl,
+				agentId,
+				transport: copilotkit.runtimeTransport,
+				runtimeMode: "pending"
+			});
+			provisional.headers = { ...copilotkit.headers };
+			provisionalAgentCache.current.set(agentId, provisional);
+			return provisional;
+		}
+		if (isRuntimeConfigured && status === CopilotKitCoreRuntimeConnectionStatus.Error) {
+			const cached = provisionalAgentCache.current.get(agentId);
+			if (cached) {
+				cached.headers = { ...copilotkit.headers };
+				return cached;
+			}
+			const provisional = new ProxiedCopilotRuntimeAgent({
+				runtimeUrl: copilotkit.runtimeUrl,
+				agentId,
+				transport: copilotkit.runtimeTransport,
+				runtimeMode: "pending"
+			});
+			provisional.headers = { ...copilotkit.headers };
+			provisionalAgentCache.current.set(agentId, provisional);
+			return provisional;
+		}
+		const knownAgents = Object.keys(copilotkit.agents ?? {});
+		const runtimePart = isRuntimeConfigured ? `runtimeUrl=${copilotkit.runtimeUrl}` : "no runtimeUrl";
+		throw new Error(`useAgent: Agent '${agentId}' not found after runtime sync (${runtimePart}). ` + (knownAgents.length ? `Known agents: [${knownAgents.join(", ")}]` : "No agents registered.") + " Verify your runtime /info and/or agents__unsafe_dev_only.");
+	}, [
+		agentId,
+		copilotkit.agents,
+		copilotkit.runtimeConnectionStatus,
+		copilotkit.runtimeUrl,
+		copilotkit.runtimeTransport,
+		JSON.stringify(copilotkit.headers)
+	]);
+	useEffect(() => {
+		if (updateFlags.length === 0) return;
+		let active = true;
+		const handlers = {};
+		let batchScheduled = false;
+		const batchedForceUpdate = () => {
+			if (!active) return;
+			if (!batchScheduled) {
+				batchScheduled = true;
+				queueMicrotask(() => {
+					batchScheduled = false;
+					if (active) forceUpdate();
+				});
+			}
+		};
+		if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) handlers.onMessagesChanged = batchedForceUpdate;
+		if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) handlers.onStateChanged = batchedForceUpdate;
+		if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {
+			handlers.onRunInitialized = batchedForceUpdate;
+			handlers.onRunFinalized = batchedForceUpdate;
+			handlers.onRunFailed = batchedForceUpdate;
+			handlers.onRunErrorEvent = batchedForceUpdate;
+		}
+		const subscription = copilotkit.subscribeToAgentWithOptions(agent, handlers, { throttleMs });
+		return () => {
+			active = false;
+			subscription.unsubscribe();
+		};
+	}, [
+		agent,
+		forceUpdate,
+		throttleMs,
+		providerThrottleMs,
+		updateFlags
+	]);
+	useEffect(() => {
+		if (agent instanceof HttpAgent) agent.headers = { ...copilotkit.headers };
+	}, [agent, JSON.stringify(copilotkit.headers)]);
+	return { agent };
+}
+
 //#endregion
 //#region src/v2/hooks/use-capabilities.tsx
 /**
@@ -5629,6 +5596,190 @@ CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
 */
 const ScrollElementContext = React.createContext(null);
 
+//#endregion
+//#region src/v2/components/intelligence-indicator/IntelligenceIndicator.tsx
+/**
+* Grace window before showing the spinner. A matching tool call must
+* remain unresolved (no `tool`-role result message in `agent.messages`)
+* for at least this long before the pill appears. This filters out
+* history-replay flashes — during `connectAgent` replay, tool calls and
+* their results arrive back-to-back in sub-millisecond bursts, so the
+* timer is cancelled before it fires. Live runs cross the threshold
+* easily because the tool actually has to execute.
+*/
+const PENDING_THRESHOLD_MS = 100;
+/** Hold the checkmark briefly before fading out. */
+const CHECK_HOLD_MS = 800;
+/**
+* Duration of the fade-out animation. Must match
+* `cpk-intelligence-pill-fade-out` keyframes in `v2/styles/globals.css`.
+*/
+const FADE_OUT_ANIMATION_MS = 480;
+/**
+* Tool-name regex patterns that trigger the indicator. Currently
+* hardcoded to the Intelligence MCP server's canonical tool name. If
+* we add per-instance customization later (e.g. a `CopilotKitProvider`
+* prop or a runtime-info field), this constant becomes the fallback.
+*/
+const DEFAULT_TOOL_PATTERNS = [/^copilotkit_knowledge_base_shell$/];
+const isMatchingToolCallName = (name) => typeof name === "string" && DEFAULT_TOOL_PATTERNS.some((p) => p.test(name));
+/**
+* "Tool-call-like" messages do NOT count as a real follow-up: tool
+* result messages, assistant messages that carry tool calls, and
+* empty-content assistant messages (which some providers emit as a
+* standalone wrapper around a batch of tool calls). A real follow-up
+* is anything else — most importantly an assistant message with prose
+* content, or a fresh user message.
+*/
+const isToolCallLikeMessage = (m) => {
+	if (m.role === "tool") return true;
+	if (m.role === "assistant") {
+		if ((Array.isArray(m.toolCalls) ? m.toolCalls : []).length > 0) return true;
+		const content = m.content;
+		return typeof content !== "string" || content.trim().length === 0;
+	}
+	return false;
+};
+/**
+* The "Using CopilotKit Intelligence" pill. Auto-mounted by
+* `CopilotChatMessageView` for every message slot when
+* `copilotkit.intelligence` is configured — callers do not register
+* this themselves. Self-gates so only the canonical message renders a
+* pill.
+*
+* Render gates (all must hold):
+*   1. `copilotkit.intelligence !== undefined`
+*   2. The message is an assistant message with at least one tool call
+*      whose name matches {@link DEFAULT_TOOL_PATTERNS}
+*   3. The message is the *latest* such matching-assistant message in
+*      `agent.messages` — tool-result messages and prose-only assistant
+*      messages don't invalidate the slot, so the pill stays
+*      continuously through a multi-step tool chain.
+*   4. The phase machine is past `idle` (the pending-grace timer fired)
+*      and not yet `hidden`.
+*
+* Phase machine (per-instance, all timers local):
+*   - Starts in `idle` — nothing rendered.
+*   - `idle → spinner` once a matching tool call has been pending
+*     (no `tool`-role result with a matching `toolCallId`) for
+*     {@link PENDING_THRESHOLD_MS}. Replay flashes (tool call + result
+*     in the same tick) never cross this threshold.
+*   - `spinner → check` as soon as EITHER `agent.isRunning` flips
+*     false OR a non-tool-call-like message appears later in
+*     `agent.messages` (i.e. the agent has produced a "real"
+*     follow-up — prose answer or a new user turn).
+*   - `check → fading` after {@link CHECK_HOLD_MS}.
+*   - `fading → hidden` after {@link FADE_OUT_ANIMATION_MS}.
+*
+* Once `hidden`, the phase is sticky — a finished pill never re-spawns
+* on the same message. New runs mount fresh indicator instances on
+* their own assistant messages.
+*
+* The "exactly one pill at a time" guarantee is structural: only one
+* message satisfies the latest-matching-assistant gate at any moment.
+*/
+function IntelligenceIndicator(props) {
+	const { message, agentId, label = "Using CopilotKit Intelligence" } = props;
+	const { copilotkit } = useCopilotKit();
+	const config = useCopilotChatConfiguration();
+	const { agent } = useAgent({
+		agentId,
+		updates: [UseAgentUpdate.OnRunStatusChanged, UseAgentUpdate.OnMessagesChanged]
+	});
+	const matchingToolCallIds = useMemo(() => {
+		if (message.role !== "assistant") return [];
+		const tcs = Array.isArray(message.toolCalls) ? message.toolCalls : [];
+		const ids = [];
+		for (const tc of tcs) if (isMatchingToolCallName(tc?.function?.name) && tc?.id) ids.push(tc.id);
+		return ids;
+	}, [message]);
+	const hasPending = useMemo(() => {
+		if (matchingToolCallIds.length === 0) return false;
+		const resolved = /* @__PURE__ */ new Set();
+		for (const m of agent.messages) if (m.role === "tool" && m.toolCallId) resolved.add(m.toolCallId);
+		return matchingToolCallIds.some((id) => !resolved.has(id));
+	}, [matchingToolCallIds, agent.messages]);
+	const sawRealFollowup = useMemo(() => {
+		const idx = agent.messages.findIndex((m) => m.id === message.id);
+		if (idx < 0) return false;
+		for (let i = idx + 1; i < agent.messages.length; i += 1) if (!isToolCallLikeMessage(agent.messages[i])) return true;
+		return false;
+	}, [agent.messages, message.id]);
+	const [phase, setPhase] = useState("idle");
+	useEffect(() => {
+		if (phase !== "idle") return void 0;
+		if (!hasPending) return void 0;
+		const t = setTimeout(() => setPhase("spinner"), PENDING_THRESHOLD_MS);
+		return () => clearTimeout(t);
+	}, [phase, hasPending]);
+	useEffect(() => {
+		if (phase !== "spinner") return void 0;
+		if (!agent.isRunning || sawRealFollowup) setPhase("check");
+	}, [
+		phase,
+		agent.isRunning,
+		sawRealFollowup
+	]);
+	useEffect(() => {
+		if (phase !== "check") return void 0;
+		const t = setTimeout(() => setPhase("fading"), CHECK_HOLD_MS);
+		return () => clearTimeout(t);
+	}, [phase]);
+	useEffect(() => {
+		if (phase !== "fading") return void 0;
+		const t = setTimeout(() => setPhase("hidden"), FADE_OUT_ANIMATION_MS);
+		return () => clearTimeout(t);
+	}, [phase]);
+	if (copilotkit.intelligence === void 0) return null;
+	if (!config) return null;
+	if (phase === "idle" || phase === "hidden") return null;
+	if (message.role !== "assistant") return null;
+	if (!(Array.isArray(message.toolCalls) ? message.toolCalls : []).some((tc) => isMatchingToolCallName(tc?.function?.name))) return null;
+	let latestMatchingAssistantId;
+	for (let i = agent.messages.length - 1; i >= 0; i -= 1) {
+		const m = agent.messages[i];
+		if (m.role !== "assistant") continue;
+		if ((Array.isArray(m.toolCalls) ? m.toolCalls : []).some((tc) => isMatchingToolCallName(tc?.function?.name))) {
+			latestMatchingAssistantId = m.id;
+			break;
+		}
+	}
+	if (latestMatchingAssistantId !== message.id) return null;
+	const showSpinner = phase === "spinner";
+	const isFading = phase === "fading";
+	return /* @__PURE__ */ jsxs("span", {
+		className: "cpk-intelligence-pill" + (isFading ? " cpk-intelligence-pill--fading" : ""),
+		role: "status",
+		"aria-live": "polite",
+		"aria-hidden": isFading || void 0,
+		"data-testid": `cpk-intelligence-pill-${message.id}`,
+		title: label,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			className: "cpk-intelligence-pill__icon",
+			viewBox: "0 0 24 24",
+			width: "14",
+			height: "14",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9",
+				fill: "none",
+				strokeWidth: "2.5",
+				strokeLinecap: "round",
+				className: "cpk-intelligence-pill__ring" + (showSpinner ? "" : " cpk-intelligence-pill__ring--done")
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M8 12.5l3 3 5-6",
+				fill: "none",
+				strokeWidth: "2.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				className: "cpk-intelligence-pill__check" + (showSpinner ? "" : " cpk-intelligence-pill__check--shown")
+			})]
+		}), /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatMessageView.tsx
 /**
@@ -5786,14 +5937,12 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	const [, forceUpdate] = useReducer((x) => x + 1, 0);
 	useEffect(() => {
 		if (!config?.agentId) return;
-		const registryAgent = copilotkit.getAgent(config.agentId);
-		const agent = getThreadClone(registryAgent, config.threadId) ?? registryAgent;
+		const agent = copilotkit.getAgent(config.agentId);
 		if (!agent) return;
 		const subscription = agent.subscribe({ onStateChanged: forceUpdate });
 		return () => subscription.unsubscribe();
 	}, [
 		config?.agentId,
-		config?.threadId,
 		copilotkit,
 		forceUpdate
 	]);
@@ -5876,6 +6025,10 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			renderCustomMessage,
 			stateSnapshot
 		}, `${message.id}-custom-after`));
+		if (copilotkit.intelligence !== void 0 && message.role === "assistant") elements.push(/* @__PURE__ */ jsx(IntelligenceIndicator, {
+			message,
+			agentId: config?.agentId ?? DEFAULT_AGENT_ID
+		}, `${message.id}-intelligence`));
 		return elements.filter(Boolean);
 	};
 	const messageElements = shouldVirtualize ? [] : deduplicatedMessages.flatMap(renderMessageBlock);
@@ -6824,7 +6977,6 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const hasExplicitThreadId = !!threadId || !!existingConfig?.hasExplicitThreadId;
 	const { agent } = useAgent({
 		agentId: resolvedAgentId,
-		threadId: resolvedThreadId,
 		throttleMs
 	});
 	const { copilotkit } = useCopilotKit();
@@ -6866,6 +7018,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		let detached = false;
 		const connectAbortController = new AbortController();
 		if (agent instanceof HttpAgent) agent.abortController = connectAbortController;
+		agent.threadId = resolvedThreadId;
 		const connect = async (agent) => {
 			try {
 				await copilotkit.connectAgent({ agent });
@@ -7274,18 +7427,19 @@ CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
 //#region src/v2/components/chat/CopilotSidebarView.tsx
 const DEFAULT_SIDEBAR_WIDTH = 480;
 const SIDEBAR_TRANSITION_MS = 260;
-function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, ...props }) {
+function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, position = "right", ...props }) {
 	return /* @__PURE__ */ jsx(CopilotChatConfigurationProvider, {
 		isModalDefaultOpen: defaultOpen,
 		children: /* @__PURE__ */ jsx(CopilotSidebarViewInternal, {
 			header,
 			toggleButton,
 			width,
+			position,
 			...props
 		})
 	});
 }
-function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
+function CopilotSidebarViewInternal({ header, toggleButton, width, position = "right", ...props }) {
 	const isSidebarOpen = useCopilotChatConfiguration()?.isModalOpen ?? false;
 	const sidebarRef = useRef(null);
 	const [sidebarWidth, setSidebarWidth] = useState(width ?? DEFAULT_SIDEBAR_WIDTH);
@@ -7318,26 +7472,33 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
 	useLayoutEffect(() => {
 		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
 		if (!window.matchMedia("(min-width: 768px)").matches) return;
+		const marginStyleProp = position === "left" ? "marginInlineStart" : "marginInlineEnd";
+		const transitionCssProp = position === "left" ? "margin-inline-start" : "margin-inline-end";
 		if (isSidebarOpen) {
-			if (hasMounted.current) document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
-			document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);
+			if (hasMounted.current) document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
+			document.body.style[marginStyleProp] = widthToMargin(sidebarWidth);
 		} else if (hasMounted.current) {
-			document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
-			document.body.style.marginInlineEnd = "";
+			document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
+			document.body.style[marginStyleProp] = "";
 		}
 		hasMounted.current = true;
 		return () => {
-			document.body.style.marginInlineEnd = "";
+			document.body.style[marginStyleProp] = "";
 			document.body.style.transition = "";
 		};
-	}, [isSidebarOpen, sidebarWidth]);
+	}, [
+		isSidebarOpen,
+		sidebarWidth,
+		position
+	]);
 	const headerElement = renderSlot(header, CopilotModalHeader, {});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSlot(toggleButton, CopilotChatToggleButton, {}), /* @__PURE__ */ jsx("aside", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSlot(toggleButton, CopilotChatToggleButton, position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {}), /* @__PURE__ */ jsx("aside", {
 		ref: sidebarRef,
 		"data-copilotkit": true,
 		"data-testid": "copilot-sidebar",
 		"data-copilot-sidebar": true,
-		className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
+		"data-position": position,
+		className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:top-0 cpk:z-[1200] cpk:flex", position === "left" ? "cpk:left-0" : "cpk:right-0", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", position === "left" ? "cpk:border-r" : "cpk:border-l", "cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : position === "left" ? "cpk:-translate-x-full cpk:pointer-events-none" : "cpk:translate-x-full cpk:pointer-events-none"),
 		style: {
 			["--sidebar-width"]: widthToCss(sidebarWidth),
 			paddingTop: "env(safe-area-inset-top)",
@@ -7544,7 +7705,7 @@ var CopilotPopupView_default = CopilotPopupView;
 
 //#endregion
 //#region src/v2/components/chat/CopilotSidebar.tsx
-function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps }) {
+function CopilotSidebar({ header, toggleButton, defaultOpen, width, position, ...chatProps }) {
 	const { checkFeature } = useLicenseContext();
 	const isSidebarLicensed = checkFeature("sidebar");
 	useEffect(() => {
@@ -7552,13 +7713,14 @@ function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps
 	}, [isSidebarLicensed]);
 	const SidebarViewOverride = useMemo(() => {
 		const Component = (viewProps) => {
-			const { header: viewHeader, toggleButton: viewToggleButton, width: viewWidth, defaultOpen: viewDefaultOpen, ...restProps } = viewProps;
+			const { header: viewHeader, toggleButton: viewToggleButton, width: viewWidth, defaultOpen: viewDefaultOpen, position: viewPosition, ...restProps } = viewProps;
 			return /* @__PURE__ */ jsx(CopilotSidebarView, {
 				...restProps,
 				header: header ?? viewHeader,
 				toggleButton: toggleButton ?? viewToggleButton,
 				width: width ?? viewWidth,
-				defaultOpen: defaultOpen ?? viewDefaultOpen
+				defaultOpen: defaultOpen ?? viewDefaultOpen,
+				position: position ?? viewPosition
 			});
 		};
 		return Object.assign(Component, CopilotChatView_default);
@@ -7566,7 +7728,8 @@ function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps
 		header,
 		toggleButton,
 		width,
-		defaultOpen
+		defaultOpen,
+		position
 	]);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!isSidebarLicensed && /* @__PURE__ */ jsx(InlineFeatureWarning, { featureName: "Sidebar" }), /* @__PURE__ */ jsx(CopilotChat, {
 		welcomeScreen: CopilotSidebarView.WelcomeScreen,
@@ -9806,5 +9969,5 @@ function validateProps(props) {
 }
 
 //#endregion
-export { useAgentContext as $, CopilotChatSuggestionView as A, useConfigureSuggestions as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, CopilotChatAssistantMessage_default as F, useRenderTool as G, useCapabilities as H, CopilotChatToolCallsView as I, useRenderActivityMessage as J, useComponent as K, useAttachments as L, CopilotChatReasoningMessage_default as M, CopilotChatUserMessage_default as N, CopilotChatAttachmentQueue as O, CopilotChatAttachmentRenderer as P, CopilotKitProvider as Q, useThreads$1 as R, CopilotModalHeader as S, DefaultOpenIcon as T, useHumanInTheLoop as U, useSuggestions as V, useDefaultRenderTool as W, UseAgentUpdate as X, useRenderCustomMessages as Y, useAgent as Z, WildcardToolCallRender as _, ThreadsProvider as a, MCPAppsActivityRenderer as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, useRenderToolCall as ct, shouldShowDevConsole as d, CopilotChatInput_default as dt, defineToolCallRenderer as et, useToast as f, AudioRecorderError as ft, useCopilotContext as g, CopilotContext as h, useCopilotChatConfiguration as ht, ThreadsContext as i, MCPAppsActivityContentSchema as it, CopilotChatSuggestionPill as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, useCopilotKit as lt, useCopilotMessagesContext as m, CopilotChatConfigurationProvider as mt, defaultCopilotContextCategories as n, SandboxFunctionsContext as nt, useThreads as o, MCPAppsActivityType as ot, CopilotMessagesContext as p, CopilotChatAudioRecorder as pt, useFrontendTool as q, CoAgentStateRenderBridge as r, useSandboxFunctions as rt, CoAgentStateRendersContext as s, CopilotKitInspector as st, CopilotKit as t, createA2UIMessageRenderer as tt, useAsyncCallback as u, CopilotKitCoreReact as ut, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useInterrupt as z };
-//# sourceMappingURL=copilotkit-N0YiBG5S.mjs.map
+export { createA2UIMessageRenderer as $, IntelligenceIndicator as A, useInterrupt as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, CopilotChatAttachmentRenderer as F, useAgent as G, useSuggestions as H, CopilotChatAssistantMessage_default as I, useFrontendTool as J, useHumanInTheLoop as K, CopilotChatToolCallsView as L, CopilotChatSuggestionPill as M, CopilotChatReasoningMessage_default as N, CopilotChatAttachmentQueue as O, CopilotChatUserMessage_default as P, useAgentContext as Q, useAttachments as R, CopilotModalHeader as S, DefaultOpenIcon as T, useCapabilities as U, useConfigureSuggestions as V, UseAgentUpdate as W, useRenderCustomMessages as X, useRenderActivityMessage as Y, CopilotKitProvider as Z, WildcardToolCallRender as _, ThreadsProvider as a, CopilotKitInspector as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, useRenderTool as ct, shouldShowDevConsole as d, CopilotKitCoreReact as dt, SandboxFunctionsContext as et, useToast as f, CopilotChatInput_default as ft, useCopilotContext as g, useCopilotChatConfiguration as gt, CopilotContext as h, CopilotChatConfigurationProvider as ht, ThreadsContext as i, MCPAppsActivityType as it, CopilotChatSuggestionView as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, defineToolCallRenderer as lt, useCopilotMessagesContext as m, CopilotChatAudioRecorder as mt, defaultCopilotContextCategories as n, MCPAppsActivityContentSchema as nt, useThreads as o, useRenderToolCall as ot, CopilotMessagesContext as p, AudioRecorderError as pt, useComponent as q, CoAgentStateRenderBridge as r, MCPAppsActivityRenderer as rt, CoAgentStateRendersContext as s, useDefaultRenderTool as st, CopilotKit as t, useSandboxFunctions as tt, useAsyncCallback as u, useCopilotKit as ut, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useThreads$1 as z };
+//# sourceMappingURL=copilotkit-3XTEoVQO.mjs.map