@copilotkit/react-core 1.55.0-next.8 → 1.55.0

package/dist/index.umd.js

@@ -1,10 +1,10 @@
 "use client";
 
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('react'), require('@copilotkit/core'), require('@ag-ui/client'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('react-dom'), require('react-markdown'), require('@copilotkit/runtime-client-gql')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@copilotkit/core', '@ag-ui/client', '@copilotkit/shared', 'react/jsx-runtime', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'react-dom', 'react-markdown', '@copilotkit/runtime-client-gql'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCore = {}), global.React,global.CopilotKitCore,global.AgUIClient,global.CopilotKitShared,global.ReactJsxRuntime,global.Zod,global._lit_labs_react,global.CopilotKitA2UIRenderer,global.ReactDOM,global.ReactMarkdown,global.CopilotKitRuntimeClientGQL));
-})(this, function(exports, react, _copilotkit_core, _ag_ui_client, _copilotkit_shared, react_jsx_runtime, zod, _lit_labs_react, _copilotkit_a2ui_renderer, react_dom, react_markdown, _copilotkit_runtime_client_gql) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('react'), require('@copilotkit/core'), require('@ag-ui/client'), require('tailwind-merge'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('react-markdown'), require('@copilotkit/runtime-client-gql')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@copilotkit/core', '@ag-ui/client', 'tailwind-merge', '@copilotkit/shared', 'react/jsx-runtime', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', 'react-markdown', '@copilotkit/runtime-client-gql'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCore = {}), global.React,global.CopilotKitCore,global.AgUIClient,global.tailwind_merge,global.CopilotKitShared,global.ReactJsxRuntime,global.Zod,global._lit_labs_react,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global.ReactMarkdown,global.CopilotKitRuntimeClientGQL));
+})(this, function(exports, react, _copilotkit_core, _ag_ui_client, tailwind_merge, _copilotkit_shared, react_jsx_runtime, zod, _lit_labs_react, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, react_markdown, _copilotkit_runtime_client_gql) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -36,13 +36,98 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 react = __toESM(react);
 react_markdown = __toESM(react_markdown);
 
+//#region src/v2/lib/slots.tsx
+/**
+	* Shallow equality comparison for objects.
+	*/
+	function shallowEqual(obj1, obj2) {
+		const keys1 = Object.keys(obj1);
+		const keys2 = Object.keys(obj2);
+		if (keys1.length !== keys2.length) return false;
+		for (const key of keys1) if (obj1[key] !== obj2[key]) return false;
+		return true;
+	}
+	/**
+	* Returns true only for plain JS objects (`{}`), excluding arrays, Dates,
+	* class instances, and other exotic objects that happen to have typeof "object".
+	*/
+	function isPlainObject(obj) {
+		return obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
+	}
+	/**
+	* Returns the same reference as long as the value is shallowly equal to the
+	* previous render's value.
+	*
+	* - Identical references bail out immediately (O(1)).
+	* - Plain objects ({}) are shallow-compared key-by-key.
+	* - Arrays, Dates, class instances, functions, and primitives are compared by
+	*   reference only — shallowEqual is never called on non-plain objects, which
+	*   avoids incorrect equality for e.g. [1,2] vs [1,2] (different arrays).
+	*
+	* Typical use: stabilize inline slot props so MemoizedSlotWrapper's shallow
+	* equality check isn't defeated by a new object reference on every render.
+	*/
+	function useShallowStableRef(value) {
+		const ref = (0, react.useRef)(value);
+		if (ref.current === value) return ref.current;
+		if (isPlainObject(ref.current) && isPlainObject(value)) {
+			if (shallowEqual(ref.current, value)) return ref.current;
+		}
+		ref.current = value;
+		return ref.current;
+	}
+	/**
+	* Check if a value is a React component type (function, class, forwardRef, memo, etc.)
+	*/
+	function isReactComponentType(value) {
+		if (typeof value === "function") return true;
+		if (value && typeof value === "object" && "$$typeof" in value && !react.default.isValidElement(value)) return true;
+		return false;
+	}
+	/**
+	* Internal function to render a slot value as a React element (non-memoized).
+	*/
+	function renderSlotElement(slot, DefaultComponent, props) {
+		if (typeof slot === "string") {
+			const existingClassName = props.className;
+			return react.default.createElement(DefaultComponent, {
+				...props,
+				className: (0, tailwind_merge.twMerge)(existingClassName, slot)
+			});
+		}
+		if (isReactComponentType(slot)) return react.default.createElement(slot, props);
+		if (slot && typeof slot === "object" && !react.default.isValidElement(slot)) return react.default.createElement(DefaultComponent, {
+			...props,
+			...slot
+		});
+		return react.default.createElement(DefaultComponent, props);
+	}
+	/**
+	* Internal memoized wrapper component for renderSlot.
+	* Uses forwardRef to support ref forwarding.
+	*/
+	const MemoizedSlotWrapper = react.default.memo(react.default.forwardRef(function MemoizedSlotWrapper(props, ref) {
+		const { $slot, $component, ...rest } = props;
+		return renderSlotElement($slot, $component, ref !== null ? {
+			...rest,
+			ref
+		} : rest);
+	}), (prev, next) => {
+		if (prev.$slot !== next.$slot) return false;
+		if (prev.$component !== next.$component) return false;
+		const { $slot: _ps, $component: _pc, ...prevRest } = prev;
+		const { $slot: _ns, $component: _nc, ...nextRest } = next;
+		return shallowEqual(prevRest, nextRest);
+	});
+
+//#endregion
 //#region src/v2/providers/CopilotChatConfigurationProvider.tsx
 	const CopilotChatDefaultLabels = {
 		chatInputPlaceholder: "Type a message...",
 		chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
 		chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
 		chatInputToolbarFinishTranscribeButtonLabel: "Finish",
-		chatInputToolbarAddButtonLabel: "Add photos or files",
+		chatInputToolbarAddButtonLabel: "Add attachments",
 		chatInputToolbarToolsButtonLabel: "Tools",
 		assistantMessageToolbarCopyCodeLabel: "Copy",
 		assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
@@ -63,14 +148,15 @@ react_markdown = __toESM(react_markdown);
 	const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
 		var _ref, _parentConfig$isModal, _parentConfig$setModa;
 		const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
+		const stableLabels = useShallowStableRef(labels);
 		const mergedLabels = (0, react.useMemo)(() => {
 			var _parentConfig$labels;
 			return {
 				...CopilotChatDefaultLabels,
 				...(_parentConfig$labels = parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.labels) !== null && _parentConfig$labels !== void 0 ? _parentConfig$labels : {},
-				...labels !== null && labels !== void 0 ? labels : {}
+				...stableLabels !== null && stableLabels !== void 0 ? stableLabels : {}
 			};
-		}, [labels, parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.labels]);
+		}, [stableLabels, parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.labels]);
 		const resolvedAgentId = (_ref = agentId !== null && agentId !== void 0 ? agentId : parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.agentId) !== null && _ref !== void 0 ? _ref : _copilotkit_shared.DEFAULT_AGENT_ID;
 		const resolvedThreadId = (0, react.useMemo)(() => {
 			if (threadId) return threadId;
@@ -749,8 +835,417 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 	};
 
+//#endregion
+//#region src/v2/providers/SandboxFunctionsContext.ts
+	const SandboxFunctionsContext = (0, react.createContext)([]);
+	function useSandboxFunctions() {
+		return (0, react.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 = zod.z.object({
+		initialHeight: zod.z.number().optional(),
+		generating: zod.z.boolean().optional(),
+		css: zod.z.string().optional(),
+		cssComplete: zod.z.boolean().optional(),
+		html: zod.z.array(zod.z.string()).optional(),
+		htmlComplete: zod.z.boolean().optional(),
+		jsFunctions: zod.z.string().optional(),
+		jsFunctionsComplete: zod.z.boolean().optional(),
+		jsExpressions: zod.z.array(zod.z.string()).optional(),
+		jsExpressionsComplete: zod.z.boolean().optional()
+	});
+	/**
+	* Schema for the generateSandboxedUi tool call arguments.
+	* Used by the frontend tool renderer to display placeholder messages.
+	*/
+	const GenerateSandboxedUiArgsSchema = zod.z.object({
+		initialHeight: zod.z.number().optional(),
+		placeholderMessages: zod.z.array(zod.z.string()).optional(),
+		css: zod.z.string().optional(),
+		html: zod.z.string().optional(),
+		jsFunctions: zod.z.string().optional(),
+		jsExpressions: zod.z.array(zod.z.string()).optional()
+	});
+	const THROTTLE_MS = 1e3;
+	/**
+	* Returns true when the inner component should re-render immediately
+	* (no throttle delay).
+	*/
+	function shouldFlushImmediately(prev, next) {
+		var _next$jsExpressions$l, _next$jsExpressions, _prev$jsExpressions$l, _prev$jsExpressions, _next$html, _prev$html;
+		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$l = (_next$jsExpressions = next.jsExpressions) === null || _next$jsExpressions === void 0 ? void 0 : _next$jsExpressions.length) !== null && _next$jsExpressions$l !== void 0 ? _next$jsExpressions$l : 0) > ((_prev$jsExpressions$l = prev === null || prev === void 0 || (_prev$jsExpressions = prev.jsExpressions) === null || _prev$jsExpressions === void 0 ? void 0 : _prev$jsExpressions.length) !== null && _prev$jsExpressions$l !== void 0 ? _prev$jsExpressions$l : 0)) return true;
+		if (((_next$html = next.html) === null || _next$html === void 0 ? void 0 : _next$html.length) && (!prev || !((_prev$html = prev.html) === null || _prev$html === void 0 ? void 0 : _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 = (0, react.useRef)(content);
+		latestContentRef.current = content;
+		const [throttledContent, setThrottledContent] = (0, react.useState)(content);
+		const throttledContentRef = (0, react.useRef)(throttledContent);
+		const timerRef = (0, react.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 = (0, react.useCallback)(() => {
+			timerRef.current = null;
+			const latest = latestContentRef.current;
+			throttledContentRef.current = latest;
+			setThrottledContent(latest);
+		}, []);
+		(0, react.useEffect)(() => {
+			if (throttledContentRef.current === content) return;
+			if (timerRef.current === null) timerRef.current = setTimeout(flush, THROTTLE_MS);
+		}, [content, flush]);
+		(0, react.useEffect)(() => {
+			return () => {
+				if (timerRef.current !== null) clearTimeout(timerRef.current);
+			};
+		}, []);
+		return /* @__PURE__ */ (0, react_jsx_runtime.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.default.memo(function OpenGenerativeUIActivityRendererInner({ content }) {
+		var _content$initialHeigh, _content$html, _content$html2, _content$jsExpression;
+		const initialHeight = (_content$initialHeigh = content.initialHeight) !== null && _content$initialHeigh !== void 0 ? _content$initialHeigh : 200;
+		const [autoHeight, setAutoHeight] = (0, react.useState)(null);
+		const sandboxFunctions = useSandboxFunctions();
+		const localApi = (0, react.useMemo)(() => {
+			const api = {};
+			for (const fn of sandboxFunctions) api[fn.name] = fn.handler;
+			return api;
+		}, [sandboxFunctions]);
+		const fullHtml = content.htmlComplete && ((_content$html = content.html) === null || _content$html === void 0 ? void 0 : _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$html2 = content.html) === null || _content$html2 === void 0 ? void 0 : _content$html2.length) ? content.html.join("") : void 0;
+		const previewBody = partialHtml ? processPartialHtml(partialHtml) : void 0;
+		const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : "";
+		const hasPreview = cssReady && !!(previewBody === null || previewBody === void 0 ? void 0 : previewBody.trim());
+		const hasVisibleSandbox = !!fullHtml || hasPreview;
+		const containerRef = (0, react.useRef)(null);
+		const sandboxRef = (0, react.useRef)(null);
+		const previewSandboxRef = (0, react.useRef)(null);
+		const previewReadyRef = (0, react.useRef)(false);
+		const sandboxReadyRef = (0, react.useRef)(false);
+		const executedIndexRef = (0, react.useRef)(0);
+		const pendingQueueRef = (0, react.useRef)([]);
+		const jsFunctionsInjectedRef = (0, react.useRef)(false);
+		(0, react.useEffect)(() => {
+			const container = containerRef.current;
+			if (!container || fullHtml || !hasPreview || previewSandboxRef.current) return;
+			let cancelled = false;
+			import("@jetbrains/websandbox").then((mod) => {
+				var _mod$default$default, _mod$default;
+				if (cancelled) return;
+				const sandbox = ((_mod$default$default = (_mod$default = mod.default) === null || _mod$default === void 0 ? void 0 : _mod$default.default) !== null && _mod$default$default !== void 0 ? _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]);
+		(0, react.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
+		]);
+		(0, react.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) => {
+				var _mod$default$default2, _mod$default2;
+				if (cancelled) return;
+				const sandbox = ((_mod$default$default2 = (_mod$default2 = mod.default) === null || _mod$default2 === void 0 ? void 0 : _mod$default2.default) !== null && _mod$default$default2 !== void 0 ? _mod$default$default2 : 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
+		]);
+		(0, react.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]);
+		(0, react.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$jsExpression = content.jsExpressions) === null || _content$jsExpression === void 0 ? void 0 : _content$jsExpression.length]);
+		const generationDone = content.generating === false;
+		(0, react.useEffect)(() => {
+			const sandbox = sandboxRef.current;
+			if (!generationDone || !sandbox) return;
+			let handled = false;
+			const onMessage = (e) => {
+				var _e$data;
+				if (handled) return;
+				if (e.source === sandbox.iframe.contentWindow && ((_e$data = e.data) === null || _e$data === void 0 ? void 0 : _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 !== null && autoHeight !== void 0 ? autoHeight : initialHeight;
+		const isGenerating = content.generating !== false;
+		return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					width: "48",
+					height: "48",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					style: { animation: "ck-spin 1s linear infinite" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: "#e0e0e0",
+						strokeWidth: "3"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M12 2a10 10 0 0 1 10 10",
+						stroke: "#999",
+						strokeWidth: "3",
+						strokeLinecap: "round"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.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) {
+		var _messages$visibleMess;
+		const [visibleMessageIndex, setVisibleMessageIndex] = (0, react.useState)(0);
+		const prevMessageCountRef = (0, react.useRef)(0);
+		const messages = props.args.placeholderMessages;
+		(0, react.useEffect)(() => {
+			if (!messages || messages.length === 0) return;
+			if (messages.length !== prevMessageCountRef.current) {
+				prevMessageCountRef.current = messages.length;
+				setVisibleMessageIndex(messages.length - 1);
+			}
+			if (props.status === _copilotkit_core.ToolCallStatus.Complete) return;
+			const timer = setInterval(() => {
+				setVisibleMessageIndex((i) => (i + 1) % messages.length);
+			}, 5e3);
+			return () => clearInterval(timer);
+		}, [messages === null || messages === void 0 ? void 0 : messages.length, props.status]);
+		if (props.status === _copilotkit_core.ToolCallStatus.Complete) return null;
+		if (!messages || messages.length === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				padding: "8px 12px",
+				color: "#999",
+				fontSize: "14px"
+			},
+			children: (_messages$visibleMess = messages[visibleMessageIndex]) !== null && _messages$visibleMess !== void 0 ? _messages$visibleMess : 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) {
@@ -760,25 +1255,23 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}
 	}
 	function createA2UIMessageRenderer(options) {
-		const { theme } = options;
+		const { theme, catalog, loadingComponent } = options;
 		return {
 			activityType: "a2ui-surface",
 			content: zod.z.any(),
 			render: ({ content, agent }) => {
 				ensureInitialized();
 				const [operations, setOperations] = (0, react.useState)([]);
-				const lastSignatureRef = (0, react.useRef)(null);
 				const { copilotkit } = useCopilotKit();
+				const lastContentRef = (0, react.useRef)(null);
 				(0, react.useEffect)(() => {
-					if (!content || !Array.isArray(content.operations)) {
-						lastSignatureRef.current = null;
+					if (content === lastContentRef.current) return;
+					lastContentRef.current = content;
+					const incoming = content === null || content === void 0 ? void 0 : content[A2UI_OPERATIONS_KEY];
+					if (!content || !Array.isArray(incoming)) {
 						setOperations([]);
 						return;
 					}
-					const incoming = content.operations;
-					const signature = stringifyOperations(incoming);
-					if (signature && signature === lastSignatureRef.current) return;
-					lastSignatureRef.current = signature;
 					setOperations(incoming);
 				}, [content]);
 				const groupedOperations = (0, react.useMemo)(() => {
@@ -791,7 +1284,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					}
 					return groups;
 				}, [operations]);
-				if (!groupedOperations.size) return null;
+				if (!groupedOperations.size) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(loadingComponent !== null && loadingComponent !== void 0 ? loadingComponent : DefaultA2UILoading, {});
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6",
 					children: Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactSurfaceHost, {
@@ -799,7 +1292,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 						operations: ops,
 						theme,
 						agent,
-						copilotkit
+						copilotkit,
+						catalog
 					}, surfaceId))
 				});
 			}
@@ -809,15 +1303,15 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* Renders a single A2UI surface using the React renderer.
 	* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
 	*/
-	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
+	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
 				onAction: (0, react.useCallback)(async (message) => {
 					if (!agent) return;
+					message.userAction;
 					try {
 						var _copilotkit$propertie;
-						console.info("[A2UI] Action dispatched", message.userAction);
 						copilotkit.setProperties({
 							...(_copilotkit$propertie = copilotkit.properties) !== null && _copilotkit$propertie !== void 0 ? _copilotkit$propertie : {},
 							a2uiAction: message
@@ -831,47 +1325,502 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					}
 				}, [agent, copilotkit]),
 				theme,
+				catalog,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SurfaceMessageProcessor, {
 					surfaceId,
 					operations
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_a2ui_renderer.A2UIRenderer, {
-					surfaceId,
-					className: "cpk:flex cpk:flex-1"
-				})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UISurfaceOrError, { surfaceId })]
 			})
 		});
 	}
 	/**
+	* Renders the A2UI surface, or an error message if processing failed.
+	* Must be a child of A2UIProvider to access the error state.
+	*/
+	function A2UISurfaceOrError({ surfaceId }) {
+		const error = (0, _copilotkit_a2ui_renderer.useA2UIError)();
+		if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:rounded-lg cpk:border cpk:border-red-200 cpk:bg-red-50 cpk:p-3 cpk:text-sm cpk:text-red-700",
+			children: ["A2UI render error: ", error]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_a2ui_renderer.A2UIRenderer, {
+			surfaceId,
+			className: "cpk:flex cpk:flex-1"
+		});
+	}
+	/**
 	* Processes A2UI operations into the provider's message processor.
 	* Must be a child of A2UIProvider to access the actions context.
 	*/
 	function SurfaceMessageProcessor({ surfaceId, operations }) {
-		const { processMessages } = (0, _copilotkit_a2ui_renderer.useA2UIActions)();
-		const lastProcessedRef = (0, react.useRef)("");
+		const { processMessages, getSurface } = (0, _copilotkit_a2ui_renderer.useA2UIActions)();
+		const lastHashRef = (0, react.useRef)("");
 		(0, react.useEffect)(() => {
-			const key = `${surfaceId}-${JSON.stringify(operations)}`;
-			if (key === lastProcessedRef.current) return;
-			lastProcessedRef.current = key;
-			processMessages(operations);
+			const hash = JSON.stringify(operations);
+			if (hash === lastHashRef.current) return;
+			lastHashRef.current = hash;
+			processMessages(getSurface(surfaceId) ? operations.filter((op) => !(op === null || op === void 0 ? void 0 : op.createSurface)) : operations);
 		}, [
 			processMessages,
+			getSurface,
 			surfaceId,
 			operations
 		]);
 		return null;
 	}
+	/**
+	* Default loading component shown while an A2UI surface is generating.
+	* Displays an animated shimmer skeleton.
+	*/
+	function DefaultA2UILoading() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:flex cpk:flex-col cpk:gap-3 cpk:rounded-xl cpk:border cpk:border-gray-100 cpk:bg-gray-50/50 cpk:p-5",
+			style: { minHeight: 120 },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cpk:flex cpk:items-center cpk:gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:h-3 cpk:w-3 cpk:rounded-full cpk:bg-gray-200",
+						style: { animation: "cpk-a2ui-pulse 1.5s ease-in-out infinite" }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cpk:text-xs cpk:font-medium cpk:text-gray-400",
+						children: "Generating UI..."
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:flex cpk:flex-col cpk:gap-2",
+					children: [
+						.8,
+						.6,
+						.4
+					].map((width, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:h-3 cpk:rounded cpk:bg-gray-200/70",
+						style: {
+							width: `${width * 100}%`,
+							animation: `cpk-a2ui-pulse 1.5s ease-in-out ${i * .15}s infinite`
+						}
+					}, i))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
+        @keyframes cpk-a2ui-pulse {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 1; }
+        }
+      ` })
+			]
+		});
+	}
 	function getOperationSurfaceId(operation) {
-		var _ref, _ref2, _ref3, _operation$beginRende, _operation$beginRende2, _operation$surfaceUpd, _operation$dataModelU, _operation$deleteSurf;
+		var _ref, _ref2, _ref3, _operation$createSurf, _operation$createSurf2, _operation$updateComp, _operation$updateData, _operation$deleteSurf;
 		if (!operation || typeof operation !== "object") return null;
 		if (typeof operation.surfaceId === "string") return operation.surfaceId;
-		return (_ref = (_ref2 = (_ref3 = (_operation$beginRende = operation === null || operation === void 0 || (_operation$beginRende2 = operation.beginRendering) === null || _operation$beginRende2 === void 0 ? void 0 : _operation$beginRende2.surfaceId) !== null && _operation$beginRende !== void 0 ? _operation$beginRende : operation === null || operation === void 0 || (_operation$surfaceUpd = operation.surfaceUpdate) === null || _operation$surfaceUpd === void 0 ? void 0 : _operation$surfaceUpd.surfaceId) !== null && _ref3 !== void 0 ? _ref3 : operation === null || operation === void 0 || (_operation$dataModelU = operation.dataModelUpdate) === null || _operation$dataModelU === void 0 ? void 0 : _operation$dataModelU.surfaceId) !== null && _ref2 !== void 0 ? _ref2 : operation === null || operation === void 0 || (_operation$deleteSurf = operation.deleteSurface) === null || _operation$deleteSurf === void 0 ? void 0 : _operation$deleteSurf.surfaceId) !== null && _ref !== void 0 ? _ref : null;
+		return (_ref = (_ref2 = (_ref3 = (_operation$createSurf = operation === null || operation === void 0 || (_operation$createSurf2 = operation.createSurface) === null || _operation$createSurf2 === void 0 ? void 0 : _operation$createSurf2.surfaceId) !== null && _operation$createSurf !== void 0 ? _operation$createSurf : operation === null || operation === void 0 || (_operation$updateComp = operation.updateComponents) === null || _operation$updateComp === void 0 ? void 0 : _operation$updateComp.surfaceId) !== null && _ref3 !== void 0 ? _ref3 : operation === null || operation === void 0 || (_operation$updateData = operation.updateDataModel) === null || _operation$updateData === void 0 ? void 0 : _operation$updateData.surfaceId) !== null && _ref2 !== void 0 ? _ref2 : operation === null || operation === void 0 || (_operation$deleteSurf = operation.deleteSurface) === null || _operation$deleteSurf === void 0 ? void 0 : _operation$deleteSurf.surfaceId) !== null && _ref !== void 0 ? _ref : null;
 	}
-	function stringifyOperations(ops) {
-		try {
-			return JSON.stringify(ops);
-		} catch (error) {
-			return null;
+
+//#endregion
+//#region src/v2/types/defineToolCallRenderer.ts
+	function defineToolCallRenderer(def) {
+		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
+		return {
+			name: def.name,
+			args: argsSchema,
+			render: def.render,
+			...def.agentId ? { agentId: def.agentId } : {}
+		};
+	}
+
+//#endregion
+//#region src/v2/a2ui/A2UIToolCallRenderer.tsx
+/**
+	* Tool name used by the dynamic A2UI generation secondary LLM.
+	* This renderer is auto-registered when A2UI is enabled.
+	*/
+	const RENDER_A2UI_TOOL_NAME = "render_a2ui";
+	/**
+	* Built-in progress indicator for dynamic A2UI generation.
+	* Shows a skeleton wireframe that progressively reveals as tokens stream in.
+	*
+	* Registered automatically when A2UI is enabled. Users can override by
+	* providing their own `useRenderTool({ name: "render_a2ui", ... })`.
+	*/
+	function A2UIProgressIndicator({ parameters }) {
+		const lastRef = (0, react.useRef)({
+			time: 0,
+			tokens: 0
+		});
+		const now = Date.now();
+		let { tokens } = lastRef.current;
+		if (now - lastRef.current.time > 200) {
+			const chars = JSON.stringify(parameters !== null && parameters !== void 0 ? parameters : {}).length;
+			tokens = Math.round(chars / 4);
+			lastRef.current = {
+				time: now,
+				tokens
+			};
 		}
+		const phase = tokens < 50 ? 0 : tokens < 200 ? 1 : tokens < 400 ? 2 : 3;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				margin: "12px 0",
+				maxWidth: 320
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						position: "relative",
+						overflow: "hidden",
+						borderRadius: 12,
+						border: "1px solid rgba(228,228,231,0.8)",
+						backgroundColor: "#fff",
+						boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+						padding: "16px 18px 14px"
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8,
+								marginBottom: 12
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									display: "flex",
+									gap: 4
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+								w: 64,
+								h: 6,
+								bg: "#e4e4e7",
+								opacity: phase >= 1 ? 1 : .4,
+								transition: "opacity 0.5s"
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "grid",
+								gap: 7
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 0,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 36,
+										h: 7,
+										bg: "rgba(147,197,253,0.7)",
+										anim: 0
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 80,
+										h: 7,
+										bg: "rgba(219,234,254,0.8)",
+										anim: .2
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 0,
+									delay: .1,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 100,
+											h: 7,
+											bg: "rgba(24,24,27,0.2)",
+											anim: .3
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 1,
+									delay: .15,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 48,
+											h: 7,
+											bg: "rgba(24,24,27,0.15)",
+											anim: .1
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 40,
+											h: 7,
+											bg: "rgba(153,246,228,0.6)",
+											anim: .5
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 56,
+											h: 7,
+											bg: "rgba(147,197,253,0.6)",
+											anim: .3
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 1,
+									delay: .2,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spacer, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 60,
+											h: 7,
+											bg: "rgba(24,24,27,0.15)",
+											anim: .4
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 2,
+									delay: .25,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 40,
+											h: 7,
+											bg: "rgba(153,246,228,0.5)",
+											anim: .2
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 48,
+											h: 7,
+											bg: "rgba(24,24,27,0.15)",
+											anim: .6
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 64,
+											h: 7,
+											bg: "rgba(147,197,253,0.5)",
+											anim: .1
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 2,
+									delay: .3,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 36,
+										h: 7,
+										bg: "rgba(147,197,253,0.6)",
+										anim: .5
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+										w: 36,
+										h: 7,
+										bg: "rgba(24,24,27,0.12)",
+										anim: .7
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+									show: phase >= 3,
+									delay: .35,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 44,
+											h: 7,
+											bg: "rgba(24,24,27,0.18)",
+											anim: .3
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 56,
+											h: 7,
+											bg: "rgba(153,246,228,0.5)",
+											anim: .8
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+											w: 48,
+											h: 7,
+											bg: "rgba(147,197,253,0.5)",
+											anim: .4
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							pointerEvents: "none",
+							position: "absolute",
+							inset: 0,
+							background: "linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%, transparent 100%)",
+							backgroundSize: "250% 100%",
+							animation: "cpk-a2ui-sweep 3s ease-in-out infinite"
+						} })
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						gap: 8,
+						marginTop: 8
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontSize: 12,
+							color: "#a1a1aa",
+							letterSpacing: "0.025em"
+						},
+						children: "Building interface"
+					}), tokens > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: {
+							fontSize: 11,
+							color: "#d4d4d8",
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [
+							"~",
+							tokens.toLocaleString(),
+							" tokens"
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
+        @keyframes cpk-a2ui-fade {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        @keyframes cpk-a2ui-sweep {
+          0% { background-position: 250% 0; }
+          100% { background-position: -250% 0; }
+        }
+      ` })
+			]
+		});
+	}
+	function Dot() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+			width: 7,
+			height: 7,
+			borderRadius: "50%",
+			backgroundColor: "#d4d4d8",
+			flexShrink: 0
+		} });
+	}
+	function Spacer() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { width: 12 } });
+	}
+	function Bar({ w, h, bg, anim, opacity, transition }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+			width: w,
+			height: h,
+			borderRadius: 9999,
+			backgroundColor: bg,
+			...anim !== void 0 ? { animation: `cpk-a2ui-fade 2.4s ease-in-out ${anim}s infinite` } : {},
+			...opacity !== void 0 ? { opacity } : {},
+			...transition ? { transition } : {}
+		} });
+	}
+	function Row({ children, show, delay = 0 }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				opacity: show ? 1 : 0,
+				transition: `opacity 0.4s ${delay}s`
+			},
+			children
+		});
+	}
+	/**
+	* Registers the built-in `render_a2ui` tool call renderer via the props-based
+	* `setRenderToolCalls` mechanism (not `useRenderTool`).
+	*
+	* This ensures user-registered `useRenderTool({ name: "render_a2ui", ... })`
+	* hooks automatically override the built-in, since the merge logic in
+	* react-core.ts gives hook-based entries priority over prop-based entries.
+	*/
+	function A2UIBuiltInToolCallRenderer() {
+		const { copilotkit } = useCopilotKit();
+		(0, react.useEffect)(() => {
+			var _renderToolCalls;
+			const renderer = defineToolCallRenderer({
+				name: RENDER_A2UI_TOOL_NAME,
+				args: zod.z.any(),
+				render: ({ status, args: parameters }) => {
+					if (status === "complete") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+					const params = parameters;
+					const items = params === null || params === void 0 ? void 0 : params.items;
+					if (Array.isArray(items) && items.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+					const components = params === null || params === void 0 ? void 0 : params.components;
+					if (Array.isArray(components) && components.length > 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIProgressIndicator, { parameters });
+				}
+			});
+			const existing = (_renderToolCalls = copilotkit._renderToolCalls) !== null && _renderToolCalls !== void 0 ? _renderToolCalls : [];
+			copilotkit.setRenderToolCalls([...existing.filter((rc) => rc.name !== RENDER_A2UI_TOOL_NAME), renderer]);
+		}, [copilotkit]);
+		return null;
+	}
+
+//#endregion
+//#region src/v2/hooks/use-agent-context.tsx
+	function useAgentContext(context) {
+		const { description, value } = context;
+		const { copilotkit } = useCopilotKit();
+		const stringValue = (0, react.useMemo)(() => {
+			if (typeof value === "string") return value;
+			return JSON.stringify(value);
+		}, [value]);
+		(0, react.useLayoutEffect)(() => {
+			if (!copilotkit) return;
+			const id = copilotkit.addContext({
+				description,
+				value: stringValue
+			});
+			return () => {
+				copilotkit.removeContext(id);
+			};
+		}, [
+			description,
+			stringValue,
+			copilotkit
+		]);
+	}
+
+//#endregion
+//#region src/v2/a2ui/A2UICatalogContext.tsx
+/**
+	* Renders agent context describing the available A2UI catalog and custom components.
+	* Only mount this component when A2UI is enabled.
+	*
+	* When `includeSchema` is true, the full component schemas (JSON Schema) are also
+	* sent as context using the same description key as the A2UI middleware, so the
+	* middleware can optionally overwrite it with a server-side schema.
+	*/
+	function A2UICatalogContext({ catalog, includeSchema }) {
+		useAgentContext({
+			description: "A2UI catalog capabilities: available catalog IDs and custom component definitions the client can render.",
+			value: (0, _copilotkit_a2ui_renderer.buildCatalogContextValue)(catalog)
+		});
+		const { copilotkit } = useCopilotKit();
+		const schemaValue = (0, react.useMemo)(() => includeSchema !== false ? JSON.stringify((0, _copilotkit_a2ui_renderer.extractCatalogComponentSchemas)(catalog)) : null, [catalog, includeSchema]);
+		(0, react.useLayoutEffect)(() => {
+			if (!copilotkit || !schemaValue) return;
+			const ids = [];
+			ids.push(copilotkit.addContext({
+				description: _copilotkit_a2ui_renderer.A2UI_SCHEMA_CONTEXT_DESCRIPTION,
+				value: schemaValue
+			}));
+			ids.push(copilotkit.addContext({
+				description: "A2UI generation guidelines — protocol rules, tool arguments, path rules, data model format, and form/two-way-binding instructions.",
+				value: _copilotkit_shared.A2UI_DEFAULT_GENERATION_GUIDELINES
+			}));
+			ids.push(copilotkit.addContext({
+				description: "A2UI design guidelines — visual design rules, component hierarchy tips, and action handler patterns.",
+				value: _copilotkit_shared.A2UI_DEFAULT_DESIGN_GUIDELINES
+			}));
+			return () => {
+				for (const id of ids) copilotkit.removeContext(id);
+			};
+		}, [copilotkit, schemaValue]);
+		return null;
 	}
 
 //#endregion
@@ -981,6 +1930,17 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#region src/v2/providers/CopilotKitProvider.tsx
 	const HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
 	const COPILOT_CLOUD_CHAT_URL$1 = "https://api.cloud.copilotkit.ai/copilotkit/v1";
+	const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:
+
+- Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.
+- Neutral base palette: white backgrounds, zinc/slate gray text (#09090b for headings, #71717a for secondary text). One accent color for interactive elements.
+- Use system font stacks (system-ui, -apple-system, sans-serif) at readable sizes (14px body, 600 weight for headings). Tight line-heights.
+- Small, consistent border-radius (6–8px). Cards and containers use border, not shadow, for separation.
+- Buttons: solid fill for primary (dark bg, white text), outline for secondary (border + transparent bg). Subtle hover state (slight opacity or background shift).
+- Use CSS Grid or Flexbox for layout. Ensure the UI looks good at any width.
+- Minimal transitions (150ms) for hover/focus states only. No decorative animations.
+- Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
+	const GENERATE_SANDBOXED_UI_DESCRIPTION = "Generate sandboxed UI. IMPORTANT: The generated code runs in a sandboxed iframe WITHOUT same-origin access. Do NOT use localStorage, sessionStorage, document.cookie, IndexedDB, or fetch/XMLHttpRequest to same-origin URLs. To communicate with the host application, use Websandbox.connection.remote.<functionName>(args) which returns a Promise.\n\nYou CAN use external libraries from CDNs by including <script> or <link> tags in the HTML <head> (e.g., Chart.js, D3, Three.js, x-data-spreadsheet, etc.). CDN resources load normally inside the sandbox.\n\nPARAMETER ORDER IS CRITICAL — generate parameters in exactly this order:\n1. initialHeight + placeholderMessages (shown to user while generating)\n2. css (all styles FIRST — the user sees a placeholder until CSS is complete)\n3. html (streams in live — the user watches the UI build as HTML is generated)\n4. jsFunctions (reusable helper functions)\n5. jsExpressions (applied one-by-one — the user sees each expression take effect)";
 	const CopilotKitContext = (0, react.createContext)({
 		copilotkit: null,
 		executingToolCallIds: /* @__PURE__ */ new Set()
@@ -995,9 +1955,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [value, warningMessage]);
 		return value;
 	}
-	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, licenseToken, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, showDevConsole = false, useSingleEndpoint = false, onError, a2ui }) => {
+	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, licenseToken, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, showDevConsole = false, useSingleEndpoint, onError, a2ui, defaultThrottleMs, inspectorDefaultAnchor }) => {
+		var _openGenerativeUI$des;
 		const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
 		const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = (0, react.useState)(false);
+		const [runtimeOpenGenUIEnabled, setRuntimeOpenGenUIEnabled] = (0, react.useState)(false);
+		const openGenUIActive = runtimeOpenGenUIEnabled || !!openGenerativeUI;
 		const [runtimeLicenseStatus, setRuntimeLicenseStatus] = (0, react.useState)(void 0);
 		(0, react.useEffect)(() => {
 			if (typeof window === "undefined") return;
@@ -1026,12 +1989,25 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				content: MCPAppsActivityContentSchema,
 				render: MCPAppsActivityRenderer
 			}];
+			if (openGenUIActive) renderers.push({
+				activityType: OpenGenerativeUIActivityType,
+				content: OpenGenerativeUIContentSchema,
+				render: OpenGenerativeUIActivityRenderer
+			});
 			if (runtimeA2UIEnabled) {
 				var _a2ui$theme;
-				renderers.unshift(createA2UIMessageRenderer({ theme: (_a2ui$theme = a2ui === null || a2ui === void 0 ? void 0 : a2ui.theme) !== null && _a2ui$theme !== void 0 ? _a2ui$theme : _copilotkit_a2ui_renderer.viewerTheme }));
+				renderers.unshift(createA2UIMessageRenderer({
+					theme: (_a2ui$theme = a2ui === null || a2ui === void 0 ? void 0 : a2ui.theme) !== null && _a2ui$theme !== void 0 ? _a2ui$theme : _copilotkit_a2ui_renderer.viewerTheme,
+					catalog: a2ui === null || a2ui === void 0 ? void 0 : a2ui.catalog,
+					loadingComponent: a2ui === null || a2ui === void 0 ? void 0 : a2ui.loadingComponent
+				}));
 			}
 			return renderers;
-		}, [runtimeA2UIEnabled, a2ui]);
+		}, [
+			runtimeA2UIEnabled,
+			openGenUIActive,
+			a2ui
+		]);
 		const allActivityRenderers = (0, react.useMemo)(() => {
 			return [...renderActivityMessagesList, ...builtInActivityRenderers];
 		}, [renderActivityMessagesList, builtInActivityRenderers]);
@@ -1057,6 +2033,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const chatApiEndpoint = runtimeUrl !== null && runtimeUrl !== void 0 ? runtimeUrl : resolvedPublicKey ? COPILOT_CLOUD_CHAT_URL$1 : void 0;
 		const frontendToolsList = useStableArrayProp(frontendTools, "frontendTools must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.");
 		const humanInTheLoopList = useStableArrayProp(humanInTheLoop, "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead.");
+		const sandboxFunctionsList = useStableArrayProp(openGenerativeUI === null || openGenerativeUI === void 0 ? void 0 : openGenerativeUI.sandboxFunctions, "openGenerativeUI.sandboxFunctions must be a stable array.");
 		const processedHumanInTheLoopTools = (0, react.useMemo)(() => {
 			const processedTools = [];
 			const processedRenderToolCalls = [];
@@ -1087,15 +2064,31 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				renderToolCalls: processedRenderToolCalls
 			};
 		}, [humanInTheLoopList]);
+		const builtInFrontendTools = (0, react.useMemo)(() => {
+			if (!openGenUIActive) return [];
+			return [{
+				name: "generateSandboxedUi",
+				description: GENERATE_SANDBOXED_UI_DESCRIPTION,
+				parameters: GenerateSandboxedUiArgsSchema,
+				handler: async () => "UI generated",
+				followUp: true,
+				render: OpenGenerativeUIToolRenderer
+			}];
+		}, [openGenUIActive]);
 		const allTools = (0, react.useMemo)(() => {
 			const tools = [];
 			tools.push(...frontendToolsList);
+			tools.push(...builtInFrontendTools);
 			tools.push(...processedHumanInTheLoopTools.tools);
 			return tools;
-		}, [frontendToolsList, processedHumanInTheLoopTools]);
+		}, [
+			frontendToolsList,
+			builtInFrontendTools,
+			processedHumanInTheLoopTools
+		]);
 		const allRenderToolCalls = (0, react.useMemo)(() => {
 			const combined = [...renderToolCallsList];
-			frontendToolsList.forEach((tool) => {
+			[...frontendToolsList, ...builtInFrontendTools].forEach((tool) => {
 				if (tool.render) {
 					const args = tool.parameters || (tool.name === "*" ? zod.z.any() : void 0);
 					if (args) combined.push({
@@ -1110,25 +2103,31 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [
 			renderToolCallsList,
 			frontendToolsList,
+			builtInFrontendTools,
 			processedHumanInTheLoopTools
 		]);
 		const copilotkitRef = (0, react.useRef)(null);
-		if (copilotkitRef.current === null) copilotkitRef.current = new CopilotKitCoreReact({
-			runtimeUrl: chatApiEndpoint,
-			runtimeTransport: useSingleEndpoint ? "single" : "rest",
-			headers: mergedHeaders,
-			credentials,
-			properties,
-			agents__unsafe_dev_only: mergedAgents,
-			tools: allTools,
-			renderToolCalls: allRenderToolCalls,
-			renderActivityMessages: allActivityRenderers,
-			renderCustomMessages: renderCustomMessagesList
-		});
+		if (copilotkitRef.current === null) {
+			copilotkitRef.current = new CopilotKitCoreReact({
+				runtimeUrl: chatApiEndpoint,
+				runtimeTransport: useSingleEndpoint === true ? "single" : useSingleEndpoint === false ? "rest" : "auto",
+				headers: mergedHeaders,
+				credentials,
+				properties,
+				agents__unsafe_dev_only: mergedAgents,
+				tools: allTools,
+				renderToolCalls: allRenderToolCalls,
+				renderActivityMessages: allActivityRenderers,
+				renderCustomMessages: renderCustomMessagesList
+			});
+			if (defaultThrottleMs !== void 0) copilotkitRef.current.setDefaultThrottleMs(defaultThrottleMs);
+		}
 		const copilotkit = copilotkitRef.current;
 		(0, react.useEffect)(() => {
+			setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
 			const subscription = copilotkit.subscribe({ onRuntimeConnectionStatusChanged: () => {
 				setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
+				setRuntimeOpenGenUIEnabled(copilotkit.openGenerativeUIEnabled);
 				setRuntimeLicenseStatus(copilotkit.licenseStatus);
 			} });
 			return () => {
@@ -1188,7 +2187,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [copilotkit]);
 		(0, react.useEffect)(() => {
 			copilotkit.setRuntimeUrl(chatApiEndpoint);
-			copilotkit.setRuntimeTransport(useSingleEndpoint ? "single" : "rest");
+			copilotkit.setRuntimeTransport(useSingleEndpoint === true ? "single" : useSingleEndpoint === false ? "rest" : "auto");
 			copilotkit.setHeaders(mergedHeaders);
 			copilotkit.setCredentials(credentials);
 			copilotkit.setProperties(properties);
@@ -1222,23 +2221,75 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		(0, react.useEffect)(() => {
 			didMountRef.current = true;
 		}, []);
+		(0, react.useEffect)(() => {
+			if (defaultThrottleMs !== void 0 && (!Number.isFinite(defaultThrottleMs) || defaultThrottleMs < 0)) console.error(`CopilotKitProvider: defaultThrottleMs must be a non-negative finite number, got ${defaultThrottleMs}. useAgent hooks without an explicit throttleMs will fall back to unthrottled.`);
+			copilotkit.setDefaultThrottleMs(defaultThrottleMs);
+		}, [copilotkit, defaultThrottleMs]);
+		const designSkill = (_openGenerativeUI$des = openGenerativeUI === null || openGenerativeUI === void 0 ? void 0 : openGenerativeUI.designSkill) !== null && _openGenerativeUI$des !== void 0 ? _openGenerativeUI$des : DEFAULT_DESIGN_SKILL;
+		(0, react.useLayoutEffect)(() => {
+			if (!copilotkit || !openGenUIActive) return;
+			const id = copilotkit.addContext({
+				description: "Design guidelines for the generateSandboxedUi tool. Follow these when building UI.",
+				value: designSkill
+			});
+			return () => {
+				copilotkit.removeContext(id);
+			};
+		}, [
+			copilotkit,
+			designSkill,
+			openGenUIActive
+		]);
+		const sandboxFunctionsDescriptors = (0, react.useMemo)(() => {
+			if (sandboxFunctionsList.length === 0) return null;
+			return JSON.stringify(sandboxFunctionsList.map((fn) => ({
+				name: fn.name,
+				description: fn.description,
+				parameters: (0, _copilotkit_shared.schemaToJsonSchema)(fn.parameters, { zodToJsonSchema: zod_to_json_schema.zodToJsonSchema })
+			})));
+		}, [sandboxFunctionsList]);
+		(0, react.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 = (0, react.useMemo)(() => ({
 			copilotkit,
 			executingToolCallIds
 		}), [copilotkit, executingToolCallIds]);
 		const licenseContextValue = (0, react.useMemo)(() => (0, _copilotkit_shared.createLicenseContextValue)(null), []);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitContext.Provider, {
-			value: contextValue,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LicenseContext.Provider, {
-				value: licenseContextValue,
-				children: [
-					children,
-					shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, { core: copilotkit }) : null,
-					runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "no_license" }),
-					runtimeLicenseStatus === "expired" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expired" }),
-					runtimeLicenseStatus === "invalid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "invalid" }),
-					runtimeLicenseStatus === "expiring" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expiring" })
-				]
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SandboxFunctionsContext.Provider, {
+			value: sandboxFunctionsList,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitContext.Provider, {
+				value: contextValue,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LicenseContext.Provider, {
+					value: licenseContextValue,
+					children: [
+						runtimeA2UIEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
+						runtimeA2UIEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
+							catalog: a2ui === null || a2ui === void 0 ? void 0 : a2ui.catalog,
+							includeSchema: a2ui === null || a2ui === void 0 ? void 0 : a2ui.includeSchema
+						}),
+						children,
+						shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, {
+							core: copilotkit,
+							defaultAnchor: inspectorDefaultAnchor
+						}) : null,
+						runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "no_license" }),
+						runtimeLicenseStatus === "expired" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expired" }),
+						runtimeLicenseStatus === "invalid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "invalid" }),
+						runtimeLicenseStatus === "expiring" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expiring" })
+					]
+				})
 			})
 		});
 	};
@@ -1253,78 +2304,265 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return () => {
 				subscription.unsubscribe();
 			};
-		}, []);
-		return context;
-	};
-
-//#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.default.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
-		const args = (0, react.useMemo)(() => (0, _copilotkit_shared.partialJSONParse)(toolCall.function.arguments), [toolCall.function.arguments]);
-		const toolName = toolCall.function.name;
-		if (toolMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
-			name: toolName,
-			args,
-			status: _copilotkit_core.ToolCallStatus.Complete,
-			result: toolMessage.content
-		});
-		else if (isExecuting) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
-			name: toolName,
-			args,
-			status: _copilotkit_core.ToolCallStatus.Executing,
-			result: void 0
-		});
-		else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
-			name: toolName,
-			args,
-			status: _copilotkit_core.ToolCallStatus.InProgress,
-			result: void 0
-		});
-	}, (prevProps, nextProps) => {
-		var _prevProps$toolMessag, _nextProps$toolMessag;
-		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$toolMessag = prevProps.toolMessage) === null || _prevProps$toolMessag === void 0 ? void 0 : _prevProps$toolMessag.content) !== ((_nextProps$toolMessag = nextProps.toolMessage) === null || _nextProps$toolMessag === void 0 ? void 0 : _nextProps$toolMessag.content)) return false;
-		if (prevProps.isExecuting !== nextProps.isExecuting) return false;
-		if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
-		return true;
-	});
-	/**
-	* Hook that returns a function to render tool calls based on the render functions
-	* defined in CopilotKitProvider.
-	*
-	* @returns A function that takes a tool call and optional tool message and returns the rendered component
-	*/
-	function useRenderToolCall$1() {
-		var _config$agentId;
-		const { copilotkit, executingToolCallIds } = useCopilotKit();
-		const config = useCopilotChatConfiguration();
-		const agentId = (_config$agentId = config === null || config === void 0 ? void 0 : config.agentId) !== null && _config$agentId !== void 0 ? _config$agentId : _copilotkit_shared.DEFAULT_AGENT_ID;
-		const renderToolCalls = (0, react.useSyncExternalStore)((callback) => {
-			return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
-		}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
-		return (0, react.useCallback)(({ toolCall, toolMessage }) => {
-			const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
-			const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
-			if (!renderConfig) return null;
-			const RenderComponent = renderConfig.render;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRenderer, {
-				toolCall,
-				toolMessage,
-				RenderComponent,
-				isExecuting: executingToolCallIds.has(toolCall.id)
-			}, toolCall.id);
+		}, []);
+		return context;
+	};
+
+//#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.default.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
+		const args = (0, react.useMemo)(() => (0, _copilotkit_shared.partialJSONParse)(toolCall.function.arguments), [toolCall.function.arguments]);
+		const toolName = toolCall.function.name;
+		if (toolMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
+			name: toolName,
+			args,
+			status: _copilotkit_core.ToolCallStatus.Complete,
+			result: toolMessage.content
+		});
+		else if (isExecuting) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
+			name: toolName,
+			args,
+			status: _copilotkit_core.ToolCallStatus.Executing,
+			result: void 0
+		});
+		else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderComponent, {
+			name: toolName,
+			args,
+			status: _copilotkit_core.ToolCallStatus.InProgress,
+			result: void 0
+		});
+	}, (prevProps, nextProps) => {
+		var _prevProps$toolMessag, _nextProps$toolMessag;
+		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$toolMessag = prevProps.toolMessage) === null || _prevProps$toolMessag === void 0 ? void 0 : _prevProps$toolMessag.content) !== ((_nextProps$toolMessag = nextProps.toolMessage) === null || _nextProps$toolMessag === void 0 ? void 0 : _nextProps$toolMessag.content)) return false;
+		if (prevProps.isExecuting !== nextProps.isExecuting) return false;
+		if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
+		return true;
+	});
+	/**
+	* Hook that returns a function to render tool calls based on the render functions
+	* defined in CopilotKitProvider.
+	*
+	* @returns A function that takes a tool call and optional tool message and returns the rendered component
+	*/
+	function useRenderToolCall$1() {
+		var _config$agentId;
+		const { copilotkit, executingToolCallIds } = useCopilotKit();
+		const config = useCopilotChatConfiguration();
+		const agentId = (_config$agentId = config === null || config === void 0 ? void 0 : config.agentId) !== null && _config$agentId !== void 0 ? _config$agentId : _copilotkit_shared.DEFAULT_AGENT_ID;
+		const renderToolCalls = (0, react.useSyncExternalStore)((callback) => {
+			return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
+		}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
+		return (0, react.useCallback)(({ toolCall, toolMessage }) => {
+			const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
+			const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+			if (!renderConfig) return null;
+			const RenderComponent = renderConfig.render;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRenderer, {
+				toolCall,
+				toolMessage,
+				RenderComponent,
+				isExecuting: executingToolCallIds.has(toolCall.id)
+			}, toolCall.id);
+		}, [
+			renderToolCalls,
+			executingToolCallIds,
+			agentId
+		]);
+	}
+
+//#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 _ag_ui_client.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) {
+		var _globalThreadCloneMap;
+		if (!registryAgent || !threadId) return void 0;
+		return (_globalThreadCloneMap = globalThreadCloneMap.get(registryAgent)) === null || _globalThreadCloneMap === void 0 ? void 0 : _globalThreadCloneMap.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 } = {}) {
+		var _agentId, _threadId;
+		(_agentId = agentId) !== null && _agentId !== void 0 || (agentId = _copilotkit_shared.DEFAULT_AGENT_ID);
+		const { copilotkit } = useCopilotKit();
+		const providerThrottleMs = copilotkit.defaultThrottleMs;
+		const chatConfig = useCopilotChatConfiguration();
+		(_threadId = threadId) !== null && _threadId !== void 0 || (threadId = chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.threadId);
+		const effectiveThrottleMs = (0, react.useMemo)(() => {
+			var _ref;
+			const resolved = (_ref = throttleMs !== null && throttleMs !== void 0 ? throttleMs : providerThrottleMs) !== null && _ref !== void 0 ? _ref : 0;
+			if (!Number.isFinite(resolved) || resolved < 0) {
+				const source = throttleMs !== void 0 ? "hook-level throttleMs" : "provider-level defaultThrottleMs";
+				console.error(`useAgent: ${source} must be a non-negative finite number, got ${resolved}. Falling back to unthrottled.`);
+				return 0;
+			}
+			return resolved;
+		}, [throttleMs, providerThrottleMs]);
+		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
+		const updateFlags = (0, react.useMemo)(() => updates !== null && updates !== void 0 ? updates : ALL_UPDATES, [JSON.stringify(updates)]);
+		const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
+		const agent = (0, react.useMemo)(() => {
+			var _copilotkit$agents;
+			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 === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
+				const cached = provisionalAgentCache.current.get(cacheKey);
+				if (cached) {
+					cached.headers = { ...copilotkit.headers };
+					return cached;
+				}
+				const provisional = new _copilotkit_core.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 === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Error) {
+				const cached = provisionalAgentCache.current.get(cacheKey);
+				if (cached) {
+					cached.headers = { ...copilotkit.headers };
+					return cached;
+				}
+				const provisional = new _copilotkit_core.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 = copilotkit.agents) !== null && _copilotkit$agents !== void 0 ? _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)
+		]);
+		(0, react.useEffect)(() => {
+			if (updateFlags.length === 0) return;
+			const handlers = {};
+			let timerId = null;
+			let active = true;
+			if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {
+				const ms = effectiveThrottleMs;
+				if (ms > 0) {
+					let throttleActive = false;
+					let pending = false;
+					const throttledNotify = () => {
+						if (!active) return;
+						if (!throttleActive) {
+							throttleActive = true;
+							pending = false;
+							forceUpdate();
+							timerId = setTimeout(function trailingEdge() {
+								timerId = null;
+								if (active && pending) {
+									pending = false;
+									forceUpdate();
+									timerId = setTimeout(trailingEdge, ms);
+								} else throttleActive = false;
+							}, ms);
+						} else pending = true;
+					};
+					handlers.onMessagesChanged = throttledNotify;
+				} else handlers.onMessagesChanged = forceUpdate;
+			}
+			if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) handlers.onStateChanged = forceUpdate;
+			if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {
+				handlers.onRunInitialized = forceUpdate;
+				handlers.onRunFinalized = forceUpdate;
+				handlers.onRunFailed = forceUpdate;
+			}
+			const subscription = agent.subscribe(handlers);
+			return () => {
+				active = false;
+				if (timerId !== null) clearTimeout(timerId);
+				subscription.unsubscribe();
+			};
 		}, [
-			renderToolCalls,
-			executingToolCallIds,
-			agentId
+			agent,
+			forceUpdate,
+			effectiveThrottleMs,
+			updateFlags
 		]);
+		(0, react.useEffect)(() => {
+			if (agent instanceof _ag_ui_client.HttpAgent) agent.headers = { ...copilotkit.headers };
+		}, [agent, JSON.stringify(copilotkit.headers)]);
+		return { agent };
 	}
 
 //#endregion
@@ -1340,12 +2578,13 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			return aHasAgent ? -1 : 1;
 		});
 		return function(params) {
-			var _copilotkit$getRunIdF;
+			var _copilotkit$getRunIdF, _getThreadClone;
 			if (!customMessageRenderers.length) return null;
 			const { message, position } = params;
 			const resolvedRunId = (_copilotkit$getRunIdF = copilotkit.getRunIdForMessage(agentId, threadId, message.id)) !== null && _copilotkit$getRunIdF !== void 0 ? _copilotkit$getRunIdF : copilotkit.getRunIdsForThread(agentId, threadId).slice(-1)[0];
 			const runId = resolvedRunId !== null && resolvedRunId !== void 0 ? resolvedRunId : `missing-run-id:${message.id}`;
-			const agent = copilotkit.getAgent(agentId);
+			const registryAgent = copilotkit.getAgent(agentId);
+			const agent = (_getThreadClone = getThreadClone(registryAgent, threadId)) !== null && _getThreadClone !== void 0 ? _getThreadClone : registryAgent;
 			if (!agent) throw new Error("Agent not found");
 			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);
@@ -1389,7 +2628,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				copilotkit.removeTool(name, tool.agentId);
 			}
 			copilotkit.addTool(tool);
-			if (tool.render && tool.parameters) copilotkit.addHookRenderToolCall({
+			if (tool.render) copilotkit.addHookRenderToolCall({
 				name,
 				args: tool.parameters,
 				agentId: tool.agentId,
@@ -1407,18 +2646,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		]);
 	}
 
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-	function defineToolCallRenderer(def) {
-		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
-		return {
-			name: def.name,
-			args: argsSchema,
-			render: def.render,
-			...def.agentId ? { agentId: def.agentId } : {}
-		};
-	}
-
 //#endregion
 //#region src/v2/hooks/use-human-in-the-loop.tsx
 	function useHumanInTheLoop$1(tool, deps) {
@@ -1485,94 +2712,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		]);
 	}
 
-//#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 } = {}) {
-		var _agentId;
-		(_agentId = agentId) !== null && _agentId !== void 0 || (agentId = _copilotkit_shared.DEFAULT_AGENT_ID);
-		const { copilotkit } = useCopilotKit();
-		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
-		const updateFlags = (0, react.useMemo)(() => updates !== null && updates !== void 0 ? updates : ALL_UPDATES, [JSON.stringify(updates)]);
-		const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
-		const agent = (0, react.useMemo)(() => {
-			var _copilotkit$agents;
-			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 === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
-				const cached = provisionalAgentCache.current.get(agentId);
-				if (cached) {
-					cached.headers = { ...copilotkit.headers };
-					return cached;
-				}
-				const provisional = new _copilotkit_core.ProxiedCopilotRuntimeAgent({
-					runtimeUrl: copilotkit.runtimeUrl,
-					agentId,
-					transport: copilotkit.runtimeTransport,
-					runtimeMode: "pending"
-				});
-				provisional.headers = { ...copilotkit.headers };
-				provisionalAgentCache.current.set(agentId, provisional);
-				return provisional;
-			}
-			if (isRuntimeConfigured && status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Error) {
-				const provisional = new _copilotkit_core.ProxiedCopilotRuntimeAgent({
-					runtimeUrl: copilotkit.runtimeUrl,
-					agentId,
-					transport: copilotkit.runtimeTransport,
-					runtimeMode: "pending"
-				});
-				provisional.headers = { ...copilotkit.headers };
-				return provisional;
-			}
-			const knownAgents = Object.keys((_copilotkit$agents = copilotkit.agents) !== null && _copilotkit$agents !== void 0 ? _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)
-		]);
-		(0, react.useEffect)(() => {
-			if (updateFlags.length === 0) return;
-			const handlers = {};
-			if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) handlers.onMessagesChanged = () => {
-				forceUpdate();
-			};
-			if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) handlers.onStateChanged = forceUpdate;
-			if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {
-				handlers.onRunInitialized = forceUpdate;
-				handlers.onRunFinalized = forceUpdate;
-				handlers.onRunFailed = forceUpdate;
-			}
-			const subscription = agent.subscribe(handlers);
-			return () => subscription.unsubscribe();
-		}, [
-			agent,
-			forceUpdate,
-			JSON.stringify(updateFlags)
-		]);
-		return { agent };
-	}
-
 //#endregion
 //#region src/v2/hooks/use-suggestions.tsx
 	function useSuggestions({ agentId } = {}) {
@@ -2248,6 +3387,227 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		if (!context) throw new Error("useToast must be used within a ToastProvider");
 		return context;
 	}
+	function formatBannerMessage(message) {
+		const jsonMatch = message.match(/'message':\s*'([^']+)'/);
+		if (jsonMatch) return jsonMatch[1];
+		let cleaned = message.split(" - ")[0];
+		cleaned = cleaned.split(": Error code")[0];
+		cleaned = cleaned.replace(/:\s*\d{3}$/, "");
+		cleaned = cleaned.replace(/See more:.*$/g, "");
+		cleaned = cleaned.trim();
+		return cleaned || "An error occurred.";
+	}
+	function extractUrl(message) {
+		const markdownMatch = /\[([^\]]+)\]\(([^)]+)\)/.exec(message);
+		if (markdownMatch) return {
+			url: markdownMatch[2],
+			text: "See More"
+		};
+		const plainMatch = /(https?:\/\/[^\s)]+)/.exec(message);
+		if (plainMatch) return {
+			url: plainMatch[0].replace(/[.,;:'"]*$/, ""),
+			text: "See More"
+		};
+		return null;
+	}
+	function BannerErrorDisplay({ bannerError, onDismiss }) {
+		const [detailsExpanded, setDetailsExpanded] = (0, react.useState)(false);
+		const colors = getErrorColors(getErrorSeverity(bannerError));
+		const details = bannerError.details;
+		const link = extractUrl(bannerError.message);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				position: "fixed",
+				bottom: "20px",
+				left: "50%",
+				transform: "translateX(-50%)",
+				zIndex: 9999,
+				backgroundColor: colors.background,
+				border: `1px solid ${colors.border}`,
+				borderLeft: `4px solid ${colors.border}`,
+				borderRadius: "8px",
+				padding: "12px 16px",
+				fontSize: "13px",
+				boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+				backdropFilter: "blur(8px)",
+				maxWidth: "min(90vw, 700px)",
+				width: "100%",
+				boxSizing: "border-box",
+				overflow: "hidden"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					gap: "10px"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						flex: 1,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+						width: "12px",
+						height: "12px",
+						borderRadius: "50%",
+						backgroundColor: colors.border,
+						flexShrink: 0
+					} }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "10px",
+							flex: 1,
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									color: colors.text,
+									lineHeight: "1.4",
+									fontWeight: "400",
+									fontSize: "13px",
+									flex: 1,
+									wordBreak: "break-all",
+									overflowWrap: "break-word",
+									maxWidth: "550px",
+									overflow: "hidden",
+									display: "-webkit-box",
+									WebkitLineClamp: 10,
+									WebkitBoxOrient: "vertical"
+								},
+								children: formatBannerMessage(bannerError.message)
+							}),
+							link && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: () => window.open(link.url, "_blank", "noopener,noreferrer"),
+								style: {
+									background: colors.border,
+									color: "white",
+									border: "none",
+									borderRadius: "5px",
+									padding: "4px 10px",
+									fontSize: "11px",
+									fontWeight: "500",
+									cursor: "pointer",
+									transition: "all 0.2s ease",
+									flexShrink: 0
+								},
+								onMouseEnter: (e) => {
+									e.currentTarget.style.opacity = "0.9";
+									e.currentTarget.style.transform = "translateY(-1px)";
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.opacity = "1";
+									e.currentTarget.style.transform = "translateY(0)";
+								},
+								children: link.text
+							}),
+							details && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: () => setDetailsExpanded(!detailsExpanded),
+								style: {
+									background: "transparent",
+									border: `1px solid ${colors.border}`,
+									borderRadius: "5px",
+									padding: "4px 10px",
+									fontSize: "11px",
+									fontWeight: "500",
+									cursor: "pointer",
+									color: colors.text,
+									flexShrink: 0,
+									transition: "all 0.2s ease"
+								},
+								onMouseEnter: (e) => {
+									e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.background = "transparent";
+								},
+								children: detailsExpanded ? "Hide Details" : "Show Details"
+							})
+						]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					onClick: onDismiss,
+					style: {
+						background: "transparent",
+						border: "none",
+						color: colors.text,
+						cursor: "pointer",
+						padding: "2px",
+						borderRadius: "3px",
+						fontSize: "14px",
+						lineHeight: "1",
+						opacity: .6,
+						transition: "all 0.2s ease",
+						flexShrink: 0
+					},
+					title: "Dismiss",
+					onMouseEnter: (e) => {
+						e.currentTarget.style.opacity = "1";
+						e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.opacity = "0.6";
+						e.currentTarget.style.background = "transparent";
+					},
+					children: "x"
+				})]
+			}), detailsExpanded && details && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					marginTop: "10px",
+					padding: "10px",
+					background: "rgba(0, 0, 0, 0.04)",
+					borderRadius: "6px",
+					fontSize: "11px",
+					fontFamily: "monospace",
+					color: colors.text,
+					lineHeight: "1.5",
+					maxHeight: "200px",
+					overflowY: "auto",
+					whiteSpace: "pre-wrap",
+					wordBreak: "break-all"
+				},
+				children: [
+					details.code && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Code:" }),
+						" ",
+						details.code
+					] }),
+					details.originalMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: { marginTop: "4px" },
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Message:" }),
+							" ",
+							details.originalMessage
+						]
+					}),
+					details.context && Object.keys(details.context).length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: { marginTop: "4px" },
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Context:" }),
+							" ",
+							JSON.stringify(details.context, null, 2)
+						]
+					}),
+					details.stack && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							marginTop: "4px",
+							opacity: .7
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Stack:" }),
+							"\n",
+							details.stack
+						]
+					})
+				]
+			})]
+		});
+	}
 	function ToastProvider({ enabled, children }) {
 		const [toasts, setToasts] = (0, react.useState)([]);
 		const [bannerError, setBannerErrorState] = (0, react.useState)(null);
@@ -2286,156 +3646,10 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastContext.Provider, {
 			value,
-			children: [bannerError && (() => {
-				const colors = getErrorColors(getErrorSeverity(bannerError));
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						position: "fixed",
-						bottom: "20px",
-						left: "50%",
-						transform: "translateX(-50%)",
-						zIndex: 9999,
-						backgroundColor: colors.background,
-						border: `1px solid ${colors.border}`,
-						borderLeft: `4px solid ${colors.border}`,
-						borderRadius: "8px",
-						padding: "12px 16px",
-						fontSize: "13px",
-						boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-						backdropFilter: "blur(8px)",
-						maxWidth: "min(90vw, 700px)",
-						width: "100%",
-						boxSizing: "border-box",
-						overflow: "hidden"
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							justifyContent: "space-between",
-							alignItems: "center",
-							gap: "10px"
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "8px",
-								flex: 1,
-								minWidth: 0
-							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-								width: "12px",
-								height: "12px",
-								borderRadius: "50%",
-								backgroundColor: colors.border,
-								flexShrink: 0
-							} }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "10px",
-									flex: 1,
-									minWidth: 0
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									style: {
-										color: colors.text,
-										lineHeight: "1.4",
-										fontWeight: "400",
-										fontSize: "13px",
-										flex: 1,
-										wordBreak: "break-all",
-										overflowWrap: "break-word",
-										maxWidth: "550px",
-										overflow: "hidden",
-										display: "-webkit-box",
-										WebkitLineClamp: 10,
-										WebkitBoxOrient: "vertical"
-									},
-									children: (() => {
-										let message = bannerError.message;
-										const jsonMatch = message.match(/'message':\s*'([^']+)'/);
-										if (jsonMatch) return jsonMatch[1];
-										message = message.split(" - ")[0];
-										message = message.split(": Error code")[0];
-										message = message.replace(/:\s*\d{3}$/, "");
-										message = message.replace(/See more:.*$/g, "");
-										message = message.trim();
-										return message || "Configuration error occurred.";
-									})()
-								}), (() => {
-									const message = bannerError.message;
-									const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-									const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
-									let url = null;
-									let buttonText = "See More";
-									const markdownMatch = markdownLinkRegex.exec(message);
-									if (markdownMatch) {
-										url = markdownMatch[2];
-										buttonText = "See More";
-									} else {
-										const urlMatch = plainUrlRegex.exec(message);
-										if (urlMatch) {
-											url = urlMatch[0].replace(/[.,;:'"]*$/, "");
-											buttonText = "See More";
-										}
-									}
-									if (!url) return null;
-									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
-										style: {
-											background: colors.border,
-											color: "white",
-											border: "none",
-											borderRadius: "5px",
-											padding: "4px 10px",
-											fontSize: "11px",
-											fontWeight: "500",
-											cursor: "pointer",
-											transition: "all 0.2s ease",
-											flexShrink: 0
-										},
-										onMouseEnter: (e) => {
-											e.currentTarget.style.opacity = "0.9";
-											e.currentTarget.style.transform = "translateY(-1px)";
-										},
-										onMouseLeave: (e) => {
-											e.currentTarget.style.opacity = "1";
-											e.currentTarget.style.transform = "translateY(0)";
-										},
-										children: buttonText
-									});
-								})()]
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							onClick: () => setBannerError(null),
-							style: {
-								background: "transparent",
-								border: "none",
-								color: colors.text,
-								cursor: "pointer",
-								padding: "2px",
-								borderRadius: "3px",
-								fontSize: "14px",
-								lineHeight: "1",
-								opacity: .6,
-								transition: "all 0.2s ease",
-								flexShrink: 0
-							},
-							title: "Dismiss",
-							onMouseEnter: (e) => {
-								e.currentTarget.style.opacity = "1";
-								e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
-							},
-							onMouseLeave: (e) => {
-								e.currentTarget.style.opacity = "0.6";
-								e.currentTarget.style.background = "transparent";
-							},
-							children: "×"
-						})]
-					})
-				});
-			})(), children]
+			children: [bannerError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerErrorDisplay, {
+				bannerError,
+				onDismiss: () => setBannerError(null)
+			}), children]
 		});
 	}
 
@@ -3476,12 +4690,21 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { agent } = useAgent({ agentId: resolvedAgentId });
 		usePredictStateSubscription(agent);
 		(0, react.useEffect)(() => {
-			const subscription = copilotkit.subscribe({ onError: ({ error }) => {
-				setBannerError(new _copilotkit_shared.CopilotKitLowLevelError({
+			const subscription = copilotkit.subscribe({ onError: ({ error, code, context }) => {
+				if (error.name === "AbortError" || error.message === "Fetch is aborted" || error.message === "signal is aborted without reason" || error.message === "component unmounted" || !error.message) return;
+				if (process.env.NODE_ENV === "development") console.error("[CopilotKit] Agent error:", error.message, "\n  Code:", code, "\n  Context:", context, "\n  Stack:", error.stack);
+				const ckError = new _copilotkit_shared.CopilotKitLowLevelError({
 					error,
 					message: error.message,
 					url: typeof window !== "undefined" ? window.location.href : ""
-				}));
+				});
+				ckError.details = {
+					code,
+					context,
+					stack: error.stack,
+					originalMessage: error.message
+				};
+				setBannerError(ckError);
 			} });
 			return () => {
 				subscription.unsubscribe();
@@ -3967,7 +5190,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotListeners, {}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitErrorBridge, {}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CoAgentStateRendersProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagesTapProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotMessages, { children: [memoizedChildren, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RegisteredActionsRenderer, {})] }) }), bannerError && showDevConsole && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBanner, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CoAgentStateRendersProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagesTapProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotMessages, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: memoizedChildren }, "children"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RegisteredActionsRenderer, {}, "actions")] }) }), bannerError && showDevConsole && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBanner, {
 						severity: bannerError.severity,
 						message: bannerError.message,
 						onClose: () => setBannerError(null),
@@ -4037,7 +5260,11 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const existingConfig = useCopilotChatConfiguration();
 		const [agentAvailable, setAgentAvailable] = (0, react.useState)(false);
 		const resolvedAgentId = (_existingConfig$agent = existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.agentId) !== null && _existingConfig$agent !== void 0 ? _existingConfig$agent : "default";
-		const { agent } = useAgent({ agentId: resolvedAgentId });
+		const { agent } = useAgent({
+			agentId: resolvedAgentId,
+			threadId: existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.threadId
+		});
+		const lastConnectedAgentRef = (0, react.useRef)(null);
 		(0, react.useEffect)(() => {
 			let detached = false;
 			const connectAbortController = new AbortController();
@@ -4052,11 +5279,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					if (error instanceof _ag_ui_client.AGUIConnectNotImplementedError) {} else console.error("CopilotChat: connectAgent failed", error);
 				}
 			};
-			if (agent && (existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.threadId) && agent.threadId !== existingConfig.threadId && copilotkit.runtimeConnectionStatus === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) {
-				agent.threadId = existingConfig.threadId;
+			if (agent && agent !== lastConnectedAgentRef.current && copilotkit.runtimeConnectionStatus === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) {
+				lastConnectedAgentRef.current = agent;
 				connect(agent);
 			}
 			return () => {
+				lastConnectedAgentRef.current = null;
 				detached = true;
 				connectAbortController.abort();
 				agent === null || agent === void 0 || agent.detachActiveRun();