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

package/dist/{copilotkit-B3Mb1yVE.cjs → copilotkit-Bz5-ImDl.cjs}

@@ -44,19 +44,120 @@ let streamdown = require("streamdown");
 let zod = require("zod");
 let _lit_labs_react = require("@lit-labs/react");
 let _copilotkit_a2ui_renderer = require("@copilotkit/a2ui-renderer");
-let use_stick_to_bottom = require("use-stick-to-bottom");
-let ts_deepmerge = require("ts-deepmerge");
+let zod_to_json_schema = require("zod-to-json-schema");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
 let react_dom = require("react-dom");
+let use_stick_to_bottom = require("use-stick-to-bottom");
 let react_markdown = require("react-markdown");
 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);
+});
+/**
+* Renders a slot value as a memoized React element.
+* Automatically prevents unnecessary re-renders using shallow prop comparison.
+* Supports ref forwarding.
+*
+* @example
+* renderSlot(customInput, CopilotChatInput, { onSubmit: handleSubmit })
+*/
+function renderSlot(slot, DefaultComponent, props) {
+	return react.default.createElement(MemoizedSlotWrapper, {
+		...props,
+		$slot: slot,
+		$component: DefaultComponent
+	});
+}
+
+//#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",
@@ -76,11 +177,12 @@ const CopilotChatDefaultLabels = {
 const CopilotChatConfiguration = (0, react.createContext)(null);
 const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
 	const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
+	const stableLabels = useShallowStableRef(labels);
 	const mergedLabels = (0, react.useMemo)(() => ({
 		...CopilotChatDefaultLabels,
 		...parentConfig?.labels ?? {},
-		...labels ?? {}
-	}), [labels, parentConfig?.labels]);
+		...stableLabels ?? {}
+	}), [stableLabels, parentConfig?.labels]);
 	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const resolvedThreadId = (0, react.useMemo)(() => {
 		if (threadId) return threadId;
@@ -129,9 +231,9 @@ const useCopilotChatConfiguration = () => {
 
 //#endregion
 //#region src/v2/lib/utils.ts
-const twMerge$8 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
+const twMerge$7 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
 function cn(...inputs) {
-	return twMerge$8((0, clsx.clsx)(inputs));
+	return twMerge$7((0, clsx.clsx)(inputs));
 }
 
 //#endregion
@@ -503,82 +605,11 @@ const CopilotChatAudioRecorder = (0, react.forwardRef)((props, ref) => {
 });
 CopilotChatAudioRecorder.displayName = "CopilotChatAudioRecorder";
 
-//#endregion
-//#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;
-}
-/**
-* 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);
-});
-/**
-* Renders a slot value as a memoized React element.
-* Automatically prevents unnecessary re-renders using shallow prop comparison.
-* Supports ref forwarding.
-*
-* @example
-* renderSlot(customInput, CopilotChatInput, { onSubmit: handleSubmit })
-*/
-function renderSlot(slot, DefaultComponent, props) {
-	return react.default.createElement(MemoizedSlotWrapper, {
-		...props,
-		$slot: slot,
-		$component: DefaultComponent
-	});
-}
-
 //#endregion
 //#region src/v2/components/chat/CopilotChatInput.tsx
 const SLASH_MENU_MAX_VISIBLE_ITEMS = 5;
 const SLASH_MENU_ITEM_HEIGHT_PX = 40;
-function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning = false, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, onAddFile, onChange, value, toolsMenu, autoFocus = true, positioning = "static", keyboardHeight = 0, containerRef, showDisclaimer, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, disclaimer, children, className, ...props }) {
+function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning = false, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, onAddFile, onChange, value, toolsMenu, autoFocus = false, positioning = "static", keyboardHeight = 0, containerRef, showDisclaimer, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, disclaimer, children, className, ...props }) {
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = (0, react.useState)(() => value ?? "");
 	(0, react.useEffect)(() => {
@@ -607,6 +638,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		paddingLeft: 0,
 		paddingRight: 0
 	});
+	const containerCacheRef = (0, react.useRef)(null);
 	const commandItems = (0, react.useMemo)(() => {
 		const entries = [];
 		const seen = /* @__PURE__ */ new Set();
@@ -651,7 +683,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			previousModalStateRef.current = config?.isModalOpen;
 			return;
 		}
-		if (config?.isModalOpen && !previousModalStateRef.current) inputRef.current?.focus();
+		if (config?.isModalOpen && !previousModalStateRef.current) inputRef.current?.focus({ preventScroll: true });
 		previousModalStateRef.current = config?.isModalOpen;
 	}, [config?.isModalOpen, autoFocus]);
 	(0, react.useEffect)(() => {
@@ -894,6 +926,25 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			return nextLayout;
 		});
 	}, []);
+	const updateContainerCache = (0, react.useCallback)(() => {
+		const grid = gridRef.current;
+		const addContainer = addButtonContainerRef.current;
+		const actionsContainer = actionsContainerRef.current;
+		if (!grid || !addContainer || !actionsContainer) return null;
+		const gridStyles = window.getComputedStyle(grid);
+		const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;
+		const paddingRight = parseFloat(gridStyles.paddingRight) || 0;
+		const columnGap = parseFloat(gridStyles.columnGap) || 0;
+		const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;
+		if (gridAvailableWidth <= 0) return null;
+		const addWidth = addContainer.getBoundingClientRect().width;
+		const actionsWidth = actionsContainer.getBoundingClientRect().width;
+		const compactWidth = Math.max(gridAvailableWidth - addWidth - actionsWidth - columnGap * 2, 0);
+		if (compactWidth <= 0) return null;
+		const result = { compactWidth };
+		containerCacheRef.current = result;
+		return result;
+	}, []);
 	const evaluateLayout = (0, react.useCallback)(() => {
 		if (mode !== "input") {
 			updateLayout("compact");
@@ -919,31 +970,31 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		const renderedMultiline = baseline > 0 ? scrollHeight > baseline + 1 : false;
 		let shouldExpand = hasExplicitBreak || renderedMultiline;
 		if (!shouldExpand) {
-			const gridStyles = window.getComputedStyle(grid);
-			const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;
-			const paddingRight = parseFloat(gridStyles.paddingRight) || 0;
-			const columnGap = parseFloat(gridStyles.columnGap) || 0;
-			const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;
-			if (gridAvailableWidth > 0) {
-				const addWidth = addContainer.getBoundingClientRect().width;
-				const actionsWidth = actionsContainer.getBoundingClientRect().width;
-				const compactWidth = Math.max(gridAvailableWidth - addWidth - actionsWidth - columnGap * 2, 0);
-				const canvas = measurementCanvasRef.current ?? document.createElement("canvas");
-				if (!measurementCanvasRef.current) measurementCanvasRef.current = canvas;
-				const context = canvas.getContext("2d");
-				if (context) {
+			const cache = containerCacheRef.current ?? updateContainerCache();
+			if (cache && cache.compactWidth > 0) {
+				const compactInnerWidth = Math.max(cache.compactWidth - (measurementsRef.current.paddingLeft || 0) - (measurementsRef.current.paddingRight || 0), 0);
+				if (compactInnerWidth > 0) {
 					const textareaStyles = window.getComputedStyle(textarea);
-					context.font = textareaStyles.font || `${textareaStyles.fontStyle} ${textareaStyles.fontVariant} ${textareaStyles.fontWeight} ${textareaStyles.fontSize}/${textareaStyles.lineHeight} ${textareaStyles.fontFamily}`;
-					const compactInnerWidth = Math.max(compactWidth - (measurementsRef.current.paddingLeft || 0) - (measurementsRef.current.paddingRight || 0), 0);
-					if (compactInnerWidth > 0) {
-						const lines = resolvedValue.length > 0 ? resolvedValue.split("\n") : [""];
-						let longestWidth = 0;
-						for (const line of lines) {
-							const metrics = context.measureText(line || " ");
-							if (metrics.width > longestWidth) longestWidth = metrics.width;
-						}
-						if (longestWidth > compactInnerWidth) shouldExpand = true;
+					let font = textareaStyles.font;
+					if (!font) {
+						const { fontStyle, fontVariant, fontWeight, fontSize, lineHeight, fontFamily } = textareaStyles;
+						if (fontSize && fontFamily) font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
 					}
+					if (font?.trim()) {
+						const canvas = measurementCanvasRef.current ?? document.createElement("canvas");
+						if (!measurementCanvasRef.current) measurementCanvasRef.current = canvas;
+						const context = canvas.getContext("2d");
+						if (context) {
+							context.font = font;
+							const lines = resolvedValue.length > 0 ? resolvedValue.split("\n") : [""];
+							let longestWidth = 0;
+							for (const line of lines) {
+								const metrics = context.measureText(line || " ");
+								if (metrics.width > longestWidth) longestWidth = metrics.width;
+							}
+							if (longestWidth > compactInnerWidth) shouldExpand = true;
+						} else if (process.env.NODE_ENV !== "production") console.warn("[CopilotChatInput] canvas.getContext('2d') returned null. Text-width-based expansion will be unavailable.");
+					} else if (process.env.NODE_ENV !== "production") console.warn("[CopilotChatInput] Could not resolve textarea font for layout measurement. Text-width-based expansion will be skipped until the next evaluation.");
 				}
 			}
 		}
@@ -953,6 +1004,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		ensureMeasurements,
 		mode,
 		resolvedValue,
+		updateContainerCache,
 		updateLayout
 	]);
 	(0, react.useLayoutEffect)(() => {
@@ -965,11 +1017,17 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		const addContainer = addButtonContainerRef.current;
 		const actionsContainer = actionsContainerRef.current;
 		if (!textarea || !grid || !addContainer || !actionsContainer) return;
-		const scheduleEvaluation = () => {
+		const containerTargets = new Set([
+			grid,
+			addContainer,
+			actionsContainer
+		]);
+		const scheduleEvaluation = (invalidateCache) => {
 			if (ignoreResizeRef.current) {
 				ignoreResizeRef.current = false;
 				return;
 			}
+			if (invalidateCache) containerCacheRef.current = null;
 			if (typeof window === "undefined") {
 				evaluateLayout();
 				return;
@@ -980,8 +1038,13 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 				evaluateLayout();
 			});
 		};
-		const observer = new ResizeObserver(() => {
-			scheduleEvaluation();
+		const observer = new ResizeObserver((entries) => {
+			let shouldInvalidate = false;
+			for (const entry of entries) if (containerTargets.has(entry.target)) {
+				shouldInvalidate = true;
+				break;
+			}
+			scheduleEvaluation(shouldInvalidate);
 		});
 		observer.observe(grid);
 		observer.observe(addContainer);
@@ -1126,6 +1189,8 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	});
 	_CopilotChatInput.AddMenuButton = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+		const [mounted, setMounted] = (0, react.useState)(false);
+		(0, react.useEffect)(() => setMounted(true), []);
 		const menuItems = (0, react.useMemo)(() => {
 			const items = [];
 			if (onAddFile) items.push({
@@ -1156,26 +1221,28 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		}), []);
 		const hasMenuItems = menuItems.length > 0;
 		const isDisabled = disabled || !hasMenuItems;
+		const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			type: "button",
+			"data-testid": "copilot-add-menu-button",
+			variant: "chatInputToolbarSecondary",
+			size: "chatInputToolbarIcon",
+			className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
+			disabled: isDisabled,
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk:size-[20px]" })
+		});
+		if (!mounted) return button;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					type: "button",
-					"data-testid": "copilot-add-menu-button",
-					variant: "chatInputToolbarSecondary",
-					size: "chatInputToolbarIcon",
-					className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
-					disabled: isDisabled,
-					...props,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk:size-[20px]" })
-				})
+				children: button
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
 			side: "bottom",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 				className: "cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Add files and more" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Add attachments" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 					className: "cpk:rounded cpk:bg-[#4a4a4a] cpk:px-1 cpk:py-[1px] cpk:font-mono cpk:text-[11px] cpk:text-white cpk:dark:bg-[#e0e0e0] cpk:dark:text-black",
 					children: "/"
 				})]
@@ -1191,21 +1258,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		(0, react.useImperativeHandle)(ref, () => internalTextareaRef.current);
 		(0, react.useEffect)(() => {
-			const textarea = internalTextareaRef.current;
-			if (!textarea) return;
-			const handleFocus = () => {
-				setTimeout(() => {
-					textarea.scrollIntoView({
-						behavior: "smooth",
-						block: "nearest"
-					});
-				}, 300);
-			};
-			textarea.addEventListener("focus", handleFocus);
-			return () => textarea.removeEventListener("focus", handleFocus);
-		}, []);
-		(0, react.useEffect)(() => {
-			if (autoFocus) internalTextareaRef.current?.focus();
+			if (autoFocus) internalTextareaRef.current?.focus({ preventScroll: true });
 		}, [autoFocus]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 			ref: internalTextareaRef,
@@ -1913,125 +1966,981 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 };
 
 //#endregion
-//#region src/v2/a2ui/A2UIMessageRenderer.tsx
-let initialized = false;
-function ensureInitialized() {
-	if (!initialized) {
-		(0, _copilotkit_a2ui_renderer.initializeDefaultCatalog)();
-		(0, _copilotkit_a2ui_renderer.injectStyles)();
-		initialized = true;
-	}
+//#region src/v2/providers/SandboxFunctionsContext.ts
+const SandboxFunctionsContext = (0, react.createContext)([]);
+function useSandboxFunctions() {
+	return (0, react.useContext)(SandboxFunctionsContext);
 }
-function createA2UIMessageRenderer(options) {
-	const { theme } = 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();
-			(0, react.useEffect)(() => {
-				if (!content || !Array.isArray(content.operations)) {
-					lastSignatureRef.current = null;
-					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)(() => {
-				const groups = /* @__PURE__ */ new Map();
-				for (const operation of operations) {
-					const surfaceId = getOperationSurfaceId(operation) ?? _copilotkit_a2ui_renderer.DEFAULT_SURFACE_ID;
-					if (!groups.has(surfaceId)) groups.set(surfaceId, []);
-					groups.get(surfaceId).push(operation);
-				}
-				return groups;
-			}, [operations]);
-			if (!groupedOperations.size) return null;
-			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, {
-					surfaceId,
-					operations: ops,
-					theme,
-					agent,
-					copilotkit
-				}, surfaceId))
-			});
-		}
-	};
+
+//#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("") : "";
 }
 /**
-* Renders a single A2UI surface using the React renderer.
-* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
+* 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 ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
-	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;
-				try {
-					console.info("[A2UI] Action dispatched", message.userAction);
-					copilotkit.setProperties({
-						...copilotkit.properties ?? {},
-						a2uiAction: message
-					});
-					await copilotkit.runAgent({ agent });
-				} finally {
-					if (copilotkit.properties) {
-						const { a2uiAction, ...rest } = copilotkit.properties;
-						copilotkit.setProperties(rest);
-					}
-				}
-			}, [agent, copilotkit]),
-			theme,
-			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"
-			})]
-		})
-	});
+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()
+});
 /**
-* Processes A2UI operations into the provider's message processor.
-* Must be a child of A2UIProvider to access the actions context.
+* Schema for the generateSandboxedUi tool call arguments.
+* Used by the frontend tool renderer to display placeholder messages.
 */
-function SurfaceMessageProcessor({ surfaceId, operations }) {
-	const { processMessages } = (0, _copilotkit_a2ui_renderer.useA2UIActions)();
-	const lastProcessedRef = (0, react.useRef)("");
-	(0, react.useEffect)(() => {
-		const key = `${surfaceId}-${JSON.stringify(operations)}`;
-		if (key === lastProcessedRef.current) return;
-		lastProcessedRef.current = key;
-		processMessages(operations);
+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) {
+	if (next.cssComplete && (!prev || !prev.cssComplete)) return true;
+	if (next.htmlComplete) return true;
+	if (next.generating === false) return true;
+	if (next.jsFunctions && (!prev || !prev.jsFunctions)) return true;
+	if ((next.jsExpressions?.length ?? 0) > (prev?.jsExpressions?.length ?? 0)) return true;
+	if (next.html?.length && (!prev || !prev.html?.length)) return true;
+	return false;
+}
+/**
+* Outer wrapper — absorbs every parent re-render but only forwards
+* throttled content snapshots to the memoized inner component.
+*/
+const OpenGenerativeUIActivityRenderer = function OpenGenerativeUIActivityRenderer({ content }) {
+	const latestContentRef = (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 }) {
+	const initialHeight = content.initialHeight ?? 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?.length ? content.html.join("") : void 0;
+	const css = content.cssComplete ? content.css : void 0;
+	const cssReady = !!content.cssComplete;
+	const partialHtml = !content.htmlComplete && content.html?.length ? content.html.join("") : void 0;
+	const previewBody = partialHtml ? processPartialHtml(partialHtml) : void 0;
+	const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : "";
+	const hasPreview = cssReady && !!previewBody?.trim();
+	const hasVisibleSandbox = !!fullHtml || hasPreview;
+	const containerRef = (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) => {
+			if (cancelled) return;
+			const sandbox = (mod.default?.default ?? mod.default).create({}, {
+				frameContainer: container,
+				frameContent: "<head></head><body></body>",
+				allowAdditionalAttributes: ""
+			});
+			previewSandboxRef.current = sandbox;
+			sandbox.iframe.style.width = "100%";
+			sandbox.iframe.style.height = "100%";
+			sandbox.iframe.style.border = "none";
+			sandbox.iframe.style.backgroundColor = "transparent";
+			sandbox.promise.then(() => {
+				if (cancelled) return;
+				previewReadyRef.current = true;
+				sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+				const headParts = [];
+				if (css) headParts.push(`<style>${css}</style>`);
+				if (previewStyles) headParts.push(previewStyles);
+				if (headParts.length) sandbox.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
+				if (previewBody) sandbox.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
+			});
+		}).catch((err) => {
+			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [hasPreview, fullHtml]);
+	(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) => {
+			if (cancelled) return;
+			const sandbox = (mod.default?.default ?? mod.default).create(localApi, {
+				frameContainer: container,
+				frameContent: ensureHead(htmlContent),
+				allowAdditionalAttributes: ""
+			});
+			sandboxRef.current = sandbox;
+			sandbox.iframe.style.width = "100%";
+			sandbox.iframe.style.height = "100%";
+			sandbox.iframe.style.border = "none";
+			sandbox.iframe.style.backgroundColor = "transparent";
+			sandbox.promise.then(() => {
+				if (cancelled) return;
+				sandboxReadyRef.current = true;
+				sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+				const queue = pendingQueueRef.current;
+				pendingQueueRef.current = [];
+				for (const code of queue) sandbox.run(code);
+			});
+		}).catch((err) => {
+			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+		});
+		return () => {
+			cancelled = true;
+			if (previewSandboxRef.current) {
+				previewSandboxRef.current.destroy();
+				previewSandboxRef.current = null;
+				previewReadyRef.current = false;
+			}
+			if (sandboxRef.current) {
+				sandboxRef.current.destroy();
+				sandboxRef.current = null;
+			}
+			sandboxReadyRef.current = false;
+			setAutoHeight(null);
+		};
+	}, [
+		fullHtml,
+		css,
+		localApi
+	]);
+	(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.jsExpressions?.length]);
+	const generationDone = content.generating === false;
+	(0, react.useEffect)(() => {
+		const sandbox = sandboxRef.current;
+		if (!generationDone || !sandbox) return;
+		let handled = false;
+		const onMessage = (e) => {
+			if (handled) return;
+			if (e.source === sandbox.iframe.contentWindow && e.data?.type === "__ck_resize") {
+				handled = true;
+				setAutoHeight(e.data.height);
+				window.removeEventListener("message", onMessage);
+			}
+		};
+		window.addEventListener("message", onMessage);
+		const measureOnce = `
+        (function() {
+          var s = document.createElement('style');
+          s.textContent = 'body { height: auto !important; min-height: 0 !important; }';
+          document.head.appendChild(s);
+          var h = document.body.scrollHeight;
+          var cs = getComputedStyle(document.body);
+          h += parseFloat(cs.marginTop) || 0;
+          h += parseFloat(cs.marginBottom) || 0;
+          s.remove();
+          parent.postMessage({ type: "__ck_resize", height: Math.ceil(h) }, "*");
+        })();
+      `;
+		if (sandboxReadyRef.current) sandbox.run(measureOnce);
+		else pendingQueueRef.current.push(measureOnce);
+		return () => {
+			window.removeEventListener("message", onMessage);
+		};
+	}, [generationDone]);
+	const height = autoHeight ?? initialHeight;
+	const isGenerating = content.generating !== false;
+	return /* @__PURE__ */ (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) {
+	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?.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[visibleMessageIndex] ?? messages[0]
+	});
+};
+
+//#endregion
+//#region src/v2/a2ui/A2UIMessageRenderer.tsx
+/**
+* The container key used to wrap A2UI operations for explicit detection.
+* Must match A2UI_OPERATIONS_KEY in @ag-ui/a2ui-middleware and copilotkit.a2ui (Python).
+*/
+const A2UI_OPERATIONS_KEY = "a2ui_operations";
+let initialized = false;
+function ensureInitialized() {
+	if (!initialized) {
+		(0, _copilotkit_a2ui_renderer.initializeDefaultCatalog)();
+		(0, _copilotkit_a2ui_renderer.injectStyles)();
+		initialized = true;
+	}
+}
+function createA2UIMessageRenderer(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 { copilotkit } = useCopilotKit();
+			const lastContentRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				if (content === lastContentRef.current) return;
+				lastContentRef.current = content;
+				const incoming = content?.[A2UI_OPERATIONS_KEY];
+				if (!content || !Array.isArray(incoming)) {
+					setOperations([]);
+					return;
+				}
+				setOperations(incoming);
+			}, [content]);
+			const groupedOperations = (0, react.useMemo)(() => {
+				const groups = /* @__PURE__ */ new Map();
+				for (const operation of operations) {
+					const surfaceId = getOperationSurfaceId(operation) ?? _copilotkit_a2ui_renderer.DEFAULT_SURFACE_ID;
+					if (!groups.has(surfaceId)) groups.set(surfaceId, []);
+					groups.get(surfaceId).push(operation);
+				}
+				return groups;
+			}, [operations]);
+			if (!groupedOperations.size) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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, {
+					surfaceId,
+					operations: ops,
+					theme,
+					agent,
+					copilotkit,
+					catalog
+				}, surfaceId))
+			});
+		}
+	};
+}
+/**
+* Renders a single A2UI surface using the React renderer.
+* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
+*/
+function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
+			onAction: (0, react.useCallback)(async (message) => {
+				if (!agent) return;
+				message.userAction;
+				try {
+					copilotkit.setProperties({
+						...copilotkit.properties ?? {},
+						a2uiAction: message
+					});
+					await copilotkit.runAgent({ agent });
+				} finally {
+					if (copilotkit.properties) {
+						const { a2uiAction, ...rest } = copilotkit.properties;
+						copilotkit.setProperties(rest);
+					}
+				}
+			}, [agent, copilotkit]),
+			theme,
+			catalog,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SurfaceMessageProcessor, {
+				surfaceId,
+				operations
+			}), /* @__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, getSurface } = (0, _copilotkit_a2ui_renderer.useA2UIActions)();
+	const lastHashRef = (0, react.useRef)("");
+	(0, react.useEffect)(() => {
+		const hash = JSON.stringify(operations);
+		if (hash === lastHashRef.current) return;
+		lastHashRef.current = hash;
+		processMessages(getSurface(surfaceId) ? operations.filter((op) => !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) {
 	if (!operation || typeof operation !== "object") return null;
 	if (typeof operation.surfaceId === "string") return operation.surfaceId;
-	return operation?.beginRendering?.surfaceId ?? operation?.surfaceUpdate?.surfaceId ?? operation?.dataModelUpdate?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
+	return operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? 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 ?? {}).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)(() => {
+		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?.items;
+				if (Array.isArray(items) && items.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+				const components = 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 = copilotkit._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
@@ -2134,6 +3043,17 @@ var CopilotKitCoreReact = class extends _copilotkit_core.CopilotKitCore {
 //#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()
@@ -2149,9 +3069,11 @@ function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	}, [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 }) => {
 	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;
@@ -2177,9 +3099,22 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 			content: MCPAppsActivityContentSchema,
 			render: MCPAppsActivityRenderer
 		}];
-		if (runtimeA2UIEnabled) renderers.unshift(createA2UIMessageRenderer({ theme: a2ui?.theme ?? _copilotkit_a2ui_renderer.viewerTheme }));
+		if (openGenUIActive) renderers.push({
+			activityType: OpenGenerativeUIActivityType,
+			content: OpenGenerativeUIContentSchema,
+			render: OpenGenerativeUIActivityRenderer
+		});
+		if (runtimeA2UIEnabled) renderers.unshift(createA2UIMessageRenderer({
+			theme: a2ui?.theme ?? _copilotkit_a2ui_renderer.viewerTheme,
+			catalog: a2ui?.catalog,
+			loadingComponent: a2ui?.loadingComponent
+		}));
 		return renderers;
-	}, [runtimeA2UIEnabled, a2ui]);
+	}, [
+		runtimeA2UIEnabled,
+		openGenUIActive,
+		a2ui
+	]);
 	const allActivityRenderers = (0, react.useMemo)(() => {
 		return [...renderActivityMessagesList, ...builtInActivityRenderers];
 	}, [renderActivityMessagesList, builtInActivityRenderers]);
@@ -2205,6 +3140,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	const chatApiEndpoint = runtimeUrl ?? (resolvedPublicKey ? COPILOT_CLOUD_CHAT_URL$1 : void 0);
 	const frontendToolsList = useStableArrayProp(frontendTools, "frontendTools must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.");
 	const humanInTheLoopList = useStableArrayProp(humanInTheLoop, "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead.");
+	const sandboxFunctionsList = useStableArrayProp(openGenerativeUI?.sandboxFunctions, "openGenerativeUI.sandboxFunctions must be a stable array.");
 	const processedHumanInTheLoopTools = (0, react.useMemo)(() => {
 		const processedTools = [];
 		const processedRenderToolCalls = [];
@@ -2235,15 +3171,31 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 			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({
@@ -2258,25 +3210,31 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	}, [
 		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 () => {
@@ -2335,7 +3293,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	}, [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);
@@ -2369,23 +3327,75 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	(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?.designSkill ?? 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?.catalog,
+						includeSchema: 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" })
+				]
+			})
 		})
 	});
 };
@@ -2394,81 +3404,264 @@ const useCopilotKit = () => {
 	const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 	if (!context) throw new Error("useCopilotKit must be used within CopilotKitProvider");
 	(0, react.useEffect)(() => {
-		const subscription = context.copilotkit.subscribe({ onRuntimeConnectionStatusChanged: () => {
-			forceUpdate();
-		} });
+		const subscription = context.copilotkit.subscribe({ onRuntimeConnectionStatusChanged: () => {
+			forceUpdate();
+		} });
+		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) => {
+	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
+	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
+	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
+	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
+	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
+	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
+	return true;
+});
+/**
+* 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() {
+	const { copilotkit, executingToolCallIds } = useCopilotKit();
+	const agentId = useCopilotChatConfiguration()?.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) {
+	if (!registryAgent || !threadId) return void 0;
+	return globalThreadCloneMap.get(registryAgent)?.get(threadId);
+}
+function getOrCreateThreadClone(existing, threadId, headers) {
+	let byThread = globalThreadCloneMap.get(existing);
+	if (!byThread) {
+		byThread = /* @__PURE__ */ new Map();
+		globalThreadCloneMap.set(existing, byThread);
+	}
+	const cached = byThread.get(threadId);
+	if (cached) return cached;
+	const clone = cloneForThread(existing, threadId, headers);
+	byThread.set(threadId, clone);
+	return clone;
+}
+function useAgent({ agentId, threadId, updates, throttleMs } = {}) {
+	agentId ??= _copilotkit_shared.DEFAULT_AGENT_ID;
+	const { copilotkit } = useCopilotKit();
+	const providerThrottleMs = copilotkit.defaultThrottleMs;
+	const chatConfig = useCopilotChatConfiguration();
+	threadId ??= chatConfig?.threadId;
+	const effectiveThrottleMs = (0, react.useMemo)(() => {
+		const resolved = throttleMs ?? providerThrottleMs ?? 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 ?? ALL_UPDATES, [JSON.stringify(updates)]);
+	const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const agent = (0, react.useMemo)(() => {
+		const cacheKey = threadId ? `${agentId}:${threadId}` : agentId;
+		const existing = copilotkit.getAgent(agentId);
+		if (existing) {
+			provisionalAgentCache.current.delete(cacheKey);
+			provisionalAgentCache.current.delete(agentId);
+			if (!threadId) return existing;
+			return getOrCreateThreadClone(existing, threadId, copilotkit.headers);
+		}
+		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
+		const status = copilotkit.runtimeConnectionStatus;
+		if (isRuntimeConfigured && (status === _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 ?? {});
+		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();
 		};
-	}, []);
-	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) => {
-	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
-	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
-	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
-	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
-	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
-	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
-	return true;
-});
-/**
-* 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() {
-	const { copilotkit, executingToolCallIds } = useCopilotKit();
-	const agentId = useCopilotChatConfiguration()?.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
+		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
@@ -2488,7 +3681,8 @@ function useRenderCustomMessages() {
 		const { message, position } = params;
 		const resolvedRunId = copilotkit.getRunIdForMessage(agentId, threadId, message.id) ?? copilotkit.getRunIdsForThread(agentId, threadId).slice(-1)[0];
 		const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
-		const agent = copilotkit.getAgent(agentId);
+		const registryAgent = copilotkit.getAgent(agentId);
+		const agent = getThreadClone(registryAgent, threadId) ?? 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);
@@ -2520,7 +3714,8 @@ function useRenderCustomMessages() {
 //#region src/v2/hooks/use-render-activity-message.tsx
 function useRenderActivityMessage() {
 	const { copilotkit } = useCopilotKit();
-	const agentId = useCopilotChatConfiguration()?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const config = useCopilotChatConfiguration();
+	const agentId = config?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const renderers = copilotkit.renderActivityMessages;
 	const findRenderer = (0, react.useCallback)((activityType) => {
 		if (!renderers.length) return null;
@@ -2536,7 +3731,8 @@ function useRenderActivityMessage() {
 			return null;
 		}
 		const Component = renderer.render;
-		const agent = copilotkit.getAgent(agentId);
+		const registryAgent = copilotkit.getAgent(agentId);
+		const agent = getThreadClone(registryAgent, config?.threadId) ?? registryAgent;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 			activityType: message.activityType,
 			content: parseResult.data,
@@ -2545,6 +3741,7 @@ function useRenderActivityMessage() {
 		}, message.id);
 	}, [
 		agentId,
+		config?.threadId,
 		copilotkit,
 		findRenderer
 	]);
@@ -2570,7 +3767,7 @@ function useFrontendTool(tool, deps) {
 			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,
@@ -2655,18 +3852,6 @@ function useComponent(config, deps) {
 	}, deps);
 }
 
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-function defineToolCallRenderer(def) {
-	const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
-	return {
-		name: def.name,
-		args: argsSchema,
-		render: def.render,
-		...def.agentId ? { agentId: def.agentId } : {}
-	};
-}
-
 //#endregion
 //#region src/v2/hooks/use-render-tool.tsx
 const EMPTY_DEPS = [];
@@ -2920,190 +4105,79 @@ function DefaultToolCallRenderer({ name, parameters, status, result }) {
 						fontSize: "11px",
 						lineHeight: 1.6,
 						color: "#27272a",
-						whiteSpace: "pre-wrap",
-						wordBreak: "break-word"
-					},
-					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
-				})] })]
-			})]
-		})
-	});
-}
-
-//#endregion
-//#region src/v2/hooks/use-human-in-the-loop.tsx
-function useHumanInTheLoop(tool, deps) {
-	const { copilotkit } = useCopilotKit();
-	const resolvePromiseRef = (0, react.useRef)(null);
-	const respond = (0, react.useCallback)(async (result) => {
-		if (resolvePromiseRef.current) {
-			resolvePromiseRef.current(result);
-			resolvePromiseRef.current = null;
-		}
-	}, []);
-	const handler = (0, react.useCallback)(async () => {
-		return new Promise((resolve) => {
-			resolvePromiseRef.current = resolve;
-		});
-	}, []);
-	const RenderComponent = (0, react.useCallback)((props) => {
-		const ToolComponent = tool.render;
-		if (props.status === "inProgress") {
-			const enhancedProps = {
-				...props,
-				name: tool.name,
-				description: tool.description || "",
-				respond: void 0
-			};
-			return react.default.createElement(ToolComponent, enhancedProps);
-		} else if (props.status === "executing") {
-			const enhancedProps = {
-				...props,
-				name: tool.name,
-				description: tool.description || "",
-				respond
-			};
-			return react.default.createElement(ToolComponent, enhancedProps);
-		} else if (props.status === "complete") {
-			const enhancedProps = {
-				...props,
-				name: tool.name,
-				description: tool.description || "",
-				respond: void 0
-			};
-			return react.default.createElement(ToolComponent, enhancedProps);
-		}
-		return react.default.createElement(ToolComponent, props);
-	}, [
-		tool.render,
-		tool.name,
-		tool.description,
-		respond
-	]);
-	useFrontendTool({
-		...tool,
-		handler,
-		render: RenderComponent
-	}, deps);
-	(0, react.useEffect)(() => {
-		return () => {
-			copilotkit.removeHookRenderToolCall(tool.name, tool.agentId);
-		};
-	}, [
-		copilotkit,
-		tool.name,
-		tool.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
-];
-function useAgent({ agentId, updates } = {}) {
-	agentId ??= _copilotkit_shared.DEFAULT_AGENT_ID;
-	const { copilotkit } = useCopilotKit();
-	const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
-	const updateFlags = (0, react.useMemo)(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
-	const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const agent = (0, react.useMemo)(() => {
-		const existing = copilotkit.getAgent(agentId);
-		if (existing) {
-			provisionalAgentCache.current.delete(agentId);
-			return existing;
-		}
-		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
-		const status = copilotkit.runtimeConnectionStatus;
-		if (isRuntimeConfigured && (status === _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 ?? {});
-		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 };
+						whiteSpace: "pre-wrap",
+						wordBreak: "break-word"
+					},
+					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
+				})] })]
+			})]
+		})
+	});
 }
 
 //#endregion
-//#region src/v2/hooks/use-agent-context.tsx
-function useAgentContext(context) {
-	const { description, value } = context;
+//#region src/v2/hooks/use-human-in-the-loop.tsx
+function useHumanInTheLoop(tool, deps) {
 	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
+	const resolvePromiseRef = (0, react.useRef)(null);
+	const respond = (0, react.useCallback)(async (result) => {
+		if (resolvePromiseRef.current) {
+			resolvePromiseRef.current(result);
+			resolvePromiseRef.current = null;
+		}
+	}, []);
+	const handler = (0, react.useCallback)(async () => {
+		return new Promise((resolve) => {
+			resolvePromiseRef.current = resolve;
 		});
+	}, []);
+	const RenderComponent = (0, react.useCallback)((props) => {
+		const ToolComponent = tool.render;
+		if (props.status === "inProgress") {
+			const enhancedProps = {
+				...props,
+				name: tool.name,
+				description: tool.description || "",
+				respond: void 0
+			};
+			return react.default.createElement(ToolComponent, enhancedProps);
+		} else if (props.status === "executing") {
+			const enhancedProps = {
+				...props,
+				name: tool.name,
+				description: tool.description || "",
+				respond
+			};
+			return react.default.createElement(ToolComponent, enhancedProps);
+		} else if (props.status === "complete") {
+			const enhancedProps = {
+				...props,
+				name: tool.name,
+				description: tool.description || "",
+				respond: void 0
+			};
+			return react.default.createElement(ToolComponent, enhancedProps);
+		}
+		return react.default.createElement(ToolComponent, props);
+	}, [
+		tool.render,
+		tool.name,
+		tool.description,
+		respond
+	]);
+	useFrontendTool({
+		...tool,
+		handler,
+		render: RenderComponent
+	}, deps);
+	(0, react.useEffect)(() => {
 		return () => {
-			copilotkit.removeContext(id);
+			copilotkit.removeHookRenderToolCall(tool.name, tool.agentId);
 		};
 	}, [
-		description,
-		stringValue,
-		copilotkit
+		copilotkit,
+		tool.name,
+		tool.agentId
 	]);
 }
 
@@ -3516,11 +4590,19 @@ function useThreadStoreSelector(store, selector) {
 function useThreads$1({ agentId, includeArchived, limit }) {
 	const { copilotkit } = useCopilotKit();
 	const [store] = (0, react.useState)(() => (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch }));
-	const threads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
+	const coreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
+	const threads = (0, react.useMemo)(() => coreThreads.map(({ id, agentId, name, archived, createdAt, updatedAt }) => ({
+		id,
+		agentId,
+		name,
+		archived,
+		createdAt,
+		updatedAt
+	})), [coreThreads]);
 	const storeIsLoading = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsIsLoading);
 	const storeError = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsError);
-	const hasNextPage = useThreadStoreSelector(store, _copilotkit_core.ɵselectHasNextPage);
-	const isFetchingNextPage = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsFetchingNextPage);
+	const hasMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectHasNextPage);
+	const isFetchingMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsFetchingNextPage);
 	const headersKey = (0, react.useMemo)(() => {
 		return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 	}, [copilotkit.headers]);
@@ -3563,15 +4645,173 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		threads,
 		isLoading,
 		error,
-		hasNextPage,
-		isFetchingNextPage,
-		fetchNextPage: (0, react.useCallback)(() => store.fetchNextPage(), [store]),
+		hasMoreThreads,
+		isFetchingMoreThreads,
+		fetchMoreThreads: (0, react.useCallback)(() => store.fetchNextPage(), [store]),
 		renameThread,
 		archiveThread,
 		deleteThread
 	};
 }
 
+//#endregion
+//#region src/v2/hooks/use-attachments.tsx
+/**
+* Hook that manages file attachment state — uploads, drag-and-drop, paste,
+* and lifecycle. All returned callbacks are referentially stable across
+* renders (via useCallback) to avoid destabilizing downstream memoization.
+*/
+function useAttachments({ config }) {
+	const enabled = config?.enabled ?? false;
+	const [attachments, setAttachments] = (0, react.useState)([]);
+	const [dragOver, setDragOver] = (0, react.useState)(false);
+	const fileInputRef = (0, react.useRef)(null);
+	const containerRef = (0, react.useRef)(null);
+	const configRef = (0, react.useRef)(config);
+	configRef.current = config;
+	const attachmentsRef = (0, react.useRef)([]);
+	attachmentsRef.current = attachments;
+	const processFiles = (0, react.useCallback)(async (files) => {
+		const cfg = configRef.current;
+		const accept = cfg?.accept ?? "*/*";
+		const maxSize = cfg?.maxSize ?? 20 * 1024 * 1024;
+		const rejectedFiles = files.filter((file) => !(0, _copilotkit_shared.matchesAcceptFilter)(file, accept));
+		for (const file of rejectedFiles) cfg?.onUploadFailed?.({
+			reason: "invalid-type",
+			file,
+			message: `File "${file.name}" is not accepted. Supported types: ${accept}`
+		});
+		const validFiles = files.filter((file) => (0, _copilotkit_shared.matchesAcceptFilter)(file, accept));
+		for (const file of validFiles) {
+			if ((0, _copilotkit_shared.exceedsMaxSize)(file, maxSize)) {
+				cfg?.onUploadFailed?.({
+					reason: "file-too-large",
+					file,
+					message: `File "${file.name}" exceeds the maximum size of ${(0, _copilotkit_shared.formatFileSize)(maxSize)}`
+				});
+				continue;
+			}
+			const modality = (0, _copilotkit_shared.getModalityFromMimeType)(file.type);
+			const placeholderId = (0, _copilotkit_shared.randomUUID)();
+			const placeholder = {
+				id: placeholderId,
+				type: modality,
+				source: {
+					type: "data",
+					value: "",
+					mimeType: file.type
+				},
+				filename: file.name,
+				size: file.size,
+				status: "uploading"
+			};
+			setAttachments((prev) => [...prev, placeholder]);
+			try {
+				let source;
+				let uploadMetadata;
+				if (cfg?.onUpload) {
+					const { metadata: meta, ...uploadSource } = await cfg.onUpload(file);
+					source = uploadSource;
+					uploadMetadata = meta;
+				} else source = {
+					type: "data",
+					value: await (0, _copilotkit_shared.readFileAsBase64)(file),
+					mimeType: file.type
+				};
+				let thumbnail;
+				if (modality === "video") thumbnail = await (0, _copilotkit_shared.generateVideoThumbnail)(file);
+				setAttachments((prev) => prev.map((att) => att.id === placeholderId ? {
+					...att,
+					source,
+					status: "ready",
+					thumbnail,
+					metadata: uploadMetadata
+				} : att));
+			} catch (error) {
+				setAttachments((prev) => prev.filter((att) => att.id !== placeholderId));
+				console.error(`[CopilotKit] Failed to upload "${file.name}":`, error);
+				cfg?.onUploadFailed?.({
+					reason: "upload-failed",
+					file,
+					message: error instanceof Error ? error.message : `Failed to upload "${file.name}"`
+				});
+			}
+		}
+	}, []);
+	const handleFileUpload = (0, react.useCallback)(async (e) => {
+		if (!e.target.files?.length) return;
+		try {
+			await processFiles(Array.from(e.target.files));
+		} catch (error) {
+			console.error("[CopilotKit] Upload error:", error);
+		}
+	}, [processFiles]);
+	const handleDragOver = (0, react.useCallback)((e) => {
+		if (!configRef.current?.enabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(true);
+	}, []);
+	const handleDragLeave = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(false);
+	}, []);
+	const handleDrop = (0, react.useCallback)(async (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(false);
+		if (!configRef.current?.enabled) return;
+		const files = Array.from(e.dataTransfer.files);
+		if (files.length > 0) try {
+			await processFiles(files);
+		} catch (error) {
+			console.error("[CopilotKit] Drop error:", error);
+		}
+	}, [processFiles]);
+	(0, react.useEffect)(() => {
+		if (!enabled) return;
+		const handlePaste = async (e) => {
+			const target = e.target;
+			if (!target || !containerRef.current?.contains(target)) return;
+			const accept = configRef.current?.accept ?? "*/*";
+			const fileItems = Array.from(e.clipboardData?.items || []).filter((item) => item.kind === "file" && item.getAsFile() !== null && (0, _copilotkit_shared.matchesAcceptFilter)(item.getAsFile(), accept));
+			if (fileItems.length === 0) return;
+			e.preventDefault();
+			const files = fileItems.map((item) => item.getAsFile()).filter((f) => f !== null);
+			try {
+				await processFiles(files);
+			} catch (error) {
+				console.error("[CopilotKit] Paste error:", error);
+			}
+		};
+		document.addEventListener("paste", handlePaste);
+		return () => document.removeEventListener("paste", handlePaste);
+	}, [enabled, processFiles]);
+	return {
+		attachments,
+		enabled,
+		dragOver,
+		fileInputRef,
+		containerRef,
+		processFiles,
+		handleFileUpload,
+		handleDragOver,
+		handleDragLeave,
+		handleDrop,
+		removeAttachment: (0, react.useCallback)((id) => {
+			setAttachments((prev) => prev.filter((a) => a.id !== id));
+		}, []),
+		consumeAttachments: (0, react.useCallback)(() => {
+			const ready = attachmentsRef.current.filter((a) => a.status === "ready");
+			if (ready.length === 0) return ready;
+			setAttachments((prev) => prev.filter((a) => a.status !== "ready"));
+			if (fileInputRef.current) fileInputRef.current.value = "";
+			return ready;
+		}, [])
+	};
+}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatToolCallsView.tsx
 function CopilotChatToolCallsView({ message, messages = [] }) {
@@ -3688,9 +4928,19 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp,
 	_CopilotChatAssistantMessage.CopyButton = ({ className, title, onClick, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		const [copied, setCopied] = (0, react.useState)(false);
+		const timerRef = (0, react.useRef)(null);
+		(0, react.useEffect)(() => {
+			return () => {
+				if (timerRef.current !== null) clearTimeout(timerRef.current);
+			};
+		}, []);
 		const handleClick = (event) => {
 			setCopied(true);
-			setTimeout(() => setCopied(false), 2e3);
+			if (timerRef.current !== null) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => {
+				timerRef.current = null;
+				setCopied(false);
+			}, 2e3);
 			if (onClick) onClick(event);
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
@@ -3748,6 +4998,79 @@ CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantM
 CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
+//#endregion
+//#region src/v2/components/chat/CopilotChatAttachmentRenderer.tsx
+const ImageAttachment = (0, react.memo)(function ImageAttachment({ src, className }) {
+	const [error, setError] = (0, react.useState)(false);
+	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:rounded-lg cpk:bg-muted cpk:p-4 cpk:text-sm cpk:text-muted-foreground", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Failed to load image" })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		alt: "Image attachment",
+		className: cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className),
+		onError: () => setError(true)
+	});
+});
+const AudioAttachment = (0, react.memo)(function AudioAttachment({ src, filename, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("cpk:flex cpk:flex-col cpk:gap-1", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+			src,
+			controls: true,
+			preload: "metadata",
+			className: "cpk:max-w-[300px] cpk:w-full cpk:h-10"
+		}), filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cpk:text-xs cpk:text-muted-foreground cpk:truncate cpk:max-w-[300px]",
+			children: filename
+		})]
+	});
+});
+const VideoAttachment = (0, react.memo)(function VideoAttachment({ src, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+		src,
+		controls: true,
+		preload: "metadata",
+		className: cn("cpk:max-w-[400px] cpk:w-full cpk:rounded-lg", className)
+	});
+});
+const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ source, filename, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("cpk:inline-flex cpk:items-center cpk:gap-2 cpk:px-3 cpk:py-2 cpk:border cpk:border-border cpk:rounded-lg cpk:bg-muted", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cpk:text-xs cpk:font-bold cpk:uppercase",
+			children: (0, _copilotkit_shared.getDocumentIcon)(source.mimeType ?? "")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cpk:text-sm cpk:text-muted-foreground cpk:truncate",
+			children: filename || source.mimeType || "Unknown type"
+		})]
+	});
+});
+const CopilotChatAttachmentRenderer = ({ type, source, filename, className }) => {
+	const src = (0, _copilotkit_shared.getSourceUrl)(source);
+	switch (type) {
+		case "image": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageAttachment, {
+			src,
+			className
+		});
+		case "audio": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioAttachment, {
+			src,
+			filename,
+			className
+		});
+		case "video": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoAttachment, {
+			src,
+			className
+		});
+		case "document": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentAttachment, {
+			source,
+			filename,
+			className
+		});
+	}
+};
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatUserMessage.tsx
 function flattenUserMessageContent(content) {
@@ -3758,8 +5081,17 @@ function flattenUserMessageContent(content) {
 		return "";
 	}).filter((text) => text.length > 0).join("\n");
 }
+function getMediaParts(content) {
+	if (!content || typeof content === "string") return [];
+	return content.filter((part) => part.type === "image" || part.type === "audio" || part.type === "video" || part.type === "document");
+}
+function getFilename(part) {
+	const meta = part.metadata;
+	if (meta != null && typeof meta === "object" && "filename" in meta && typeof meta.filename === "string") return meta.filename;
+}
 function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfBranches, onSwitchToBranch, additionalToolbarItems, messageRenderer, toolbar, copyButton, editButton, branchNavigation, children, className, ...props }) {
 	const flattenedContent = (0, react.useMemo)(() => flattenUserMessageContent(message.content), [message.content]);
+	const mediaParts = (0, react.useMemo)(() => getMediaParts(message.content), [message.content]);
 	const BoundMessageRenderer = renderSlot(messageRenderer, CopilotChatUserMessage.MessageRenderer, { content: flattenedContent });
 	const BoundCopyButton = renderSlot(copyButton, CopilotChatUserMessage.CopyButton, { onClick: async () => {
 		if (flattenedContent) try {
@@ -3806,7 +5138,18 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitUserMessage cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10", className),
 		"data-message-id": message.id,
 		...props,
-		children: [BoundMessageRenderer, BoundToolbar]
+		children: [
+			BoundMessageRenderer,
+			mediaParts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:flex cpk:flex-col cpk:items-end cpk:gap-2 cpk:mt-2",
+				children: mediaParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentRenderer, {
+					type: part.type,
+					source: part.source,
+					filename: getFilename(part)
+				}, index))
+			}),
+			BoundToolbar
+		]
 	});
 }
 (function(_CopilotChatUserMessage) {
@@ -4104,6 +5447,7 @@ const CopilotChatSuggestionView = react.default.forwardRef(function CopilotChatS
 		const isLoading = loadingSet.has(index) || suggestion.isLoading === true;
 		const pill = renderSlot(suggestionSlot, CopilotChatSuggestionPill, {
 			children: suggestion.title,
+			className: suggestion.className,
 			isLoading,
 			type: "button",
 			onClick: () => onSelectSuggestion?.(suggestion, index)
@@ -4140,9 +5484,43 @@ const CopilotChatSuggestionView = react.default.forwardRef(function CopilotChatS
 });
 CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
 
+//#endregion
+//#region src/v2/components/chat/scroll-element-context.ts
+/**
+* Provides the scroll container element to child components that need it for
+* virtualization. Set by CopilotChatView.ScrollView; consumed by
+* CopilotChatMessageView to feed useVirtualizer's getScrollElement.
+*
+* Carries the element itself (not a ref) so that context consumers re-render
+* reactively when the scroll container is first mounted.
+*/
+const ScrollElementContext = react.default.createContext(null);
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatMessageView.tsx
 /**
+* Resolves a slot value into a { Component, slotProps } pair, handling the three
+* slot forms: a component type, a className string, or a partial-props object.
+*/
+function resolveSlotComponent(slot, DefaultComponent) {
+	if (isReactComponentType(slot)) return {
+		Component: slot,
+		slotProps: void 0
+	};
+	if (typeof slot === "string") return {
+		Component: DefaultComponent,
+		slotProps: { className: slot }
+	};
+	if (slot && typeof slot === "object") return {
+		Component: DefaultComponent,
+		slotProps: slot
+	};
+	return {
+		Component: DefaultComponent,
+		slotProps: void 0
+	};
+}
+/**
 * Memoized wrapper for assistant messages to prevent re-renders when other messages change.
 */
 const MemoizedAssistantMessage = react.default.memo(function MemoizedAssistantMessage({ message, messages, isRunning, AssistantMessageComponent, slotProps }) {
@@ -4161,7 +5539,6 @@ const MemoizedAssistantMessage = react.default.memo(function MemoizedAssistantMe
 	if (prevToolCalls && nextToolCalls) for (let i = 0; i < prevToolCalls.length; i++) {
 		const prevTc = prevToolCalls[i];
 		const nextTc = nextToolCalls[i];
-		if (!prevTc || !nextTc) return false;
 		if (prevTc.id !== nextTc.id) return false;
 		if (prevTc.function.arguments !== nextTc.function.arguments) return false;
 	}
@@ -4240,6 +5617,7 @@ const MemoizedCustomMessage = react.default.memo(function MemoizedCustomMessage(
 	if (JSON.stringify(prevProps.stateSnapshot) !== JSON.stringify(nextProps.stateSnapshot)) return false;
 	return true;
 });
+const VIRTUALIZE_THRESHOLD = 50;
 function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, isRunning = false, children, className, ...props }) {
 	const renderCustomMessage = useRenderCustomMessages();
 	const { renderActivityMessage } = useRenderActivityMessage();
@@ -4248,12 +5626,14 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 	(0, react.useEffect)(() => {
 		if (!config?.agentId) return;
-		const agent = copilotkit.getAgent(config.agentId);
+		const registryAgent = copilotkit.getAgent(config.agentId);
+		const agent = getThreadClone(registryAgent, config.threadId) ?? registryAgent;
 		if (!agent) return;
 		const subscription = agent.subscribe({ onStateChanged: forceUpdate });
 		return () => subscription.unsubscribe();
 	}, [
 		config?.agentId,
+		config?.threadId,
 		copilotkit,
 		forceUpdate
 	]);
@@ -4271,9 +5651,34 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		if (!resolvedRunId) return void 0;
 		return copilotkit.getStateByRun(config.agentId, config.threadId, resolvedRunId);
 	};
-	const deduplicatedMessages = [...new Map(messages.map((m) => [m.id, m])).values()];
+	const deduplicatedMessages = (0, react.useMemo)(() => [...new Map(messages.map((m) => [m.id, m])).values()], [messages]);
 	if (process.env.NODE_ENV === "development" && deduplicatedMessages.length < messages.length) console.warn(`CopilotChatMessageView: Deduplicated ${messages.length - deduplicatedMessages.length} message(s) with duplicate IDs.`);
-	const messageElements = deduplicatedMessages.flatMap((message) => {
+	const { Component: AssistantComponent, slotProps: assistantSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(assistantMessage, CopilotChatAssistantMessage_default), [assistantMessage]);
+	const { Component: UserComponent, slotProps: userSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(userMessage, CopilotChatUserMessage_default), [userMessage]);
+	const { Component: ReasoningComponent, slotProps: reasoningSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(reasoningMessage, CopilotChatReasoningMessage_default), [reasoningMessage]);
+	const scrollElementFromCtx = (0, react.useContext)(ScrollElementContext);
+	const scrollElement = scrollElementFromCtx && scrollElementFromCtx.clientHeight > 0 ? scrollElementFromCtx : null;
+	(0, react.useEffect)(() => {
+		if (process.env.NODE_ENV !== "production" && scrollElementFromCtx && scrollElementFromCtx.clientHeight === 0) console.warn("[CopilotKit] Chat scroll container has clientHeight=0 — virtualization disabled. Ensure the chat is rendered in a visible container with a non-zero height.");
+	}, [scrollElementFromCtx]);
+	const shouldVirtualize = !!scrollElement && !children && deduplicatedMessages.length > VIRTUALIZE_THRESHOLD;
+	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: shouldVirtualize ? deduplicatedMessages.length : 0,
+		getScrollElement: () => scrollElement,
+		estimateSize: () => 100,
+		overscan: 5,
+		measureElement: (el) => el?.getBoundingClientRect().height ?? 0,
+		initialRect: {
+			width: 0,
+			height: 600
+		}
+	});
+	const firstMessageId = deduplicatedMessages[0]?.id;
+	(0, react.useLayoutEffect)(() => {
+		if (!shouldVirtualize || !deduplicatedMessages.length) return;
+		virtualizer.scrollToIndex(deduplicatedMessages.length - 1, { align: "end" });
+	}, [shouldVirtualize, firstMessageId]);
+	const renderMessageBlock = (message) => {
 		const elements = [];
 		const stateSnapshot = getStateSnapshotForMessage(message.id);
 		if (renderCustomMessage) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCustomMessage, {
@@ -4282,58 +5687,38 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			renderCustomMessage,
 			stateSnapshot
 		}, `${message.id}-custom-before`));
-		if (message.role === "assistant") {
-			let AssistantComponent = CopilotChatAssistantMessage_default;
-			let assistantSlotProps;
-			if (isReactComponentType(assistantMessage)) AssistantComponent = assistantMessage;
-			else if (typeof assistantMessage === "string") assistantSlotProps = { className: assistantMessage };
-			else if (assistantMessage && typeof assistantMessage === "object") assistantSlotProps = assistantMessage;
-			elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedAssistantMessage, {
-				message,
-				messages,
-				isRunning,
-				AssistantMessageComponent: AssistantComponent,
-				slotProps: assistantSlotProps
-			}, message.id));
-		} else if (message.role === "user") {
-			let UserComponent = CopilotChatUserMessage_default;
-			let userSlotProps;
-			if (isReactComponentType(userMessage)) UserComponent = userMessage;
-			else if (typeof userMessage === "string") userSlotProps = { className: userMessage };
-			else if (userMessage && typeof userMessage === "object") userSlotProps = userMessage;
-			elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedUserMessage, {
-				message,
-				UserMessageComponent: UserComponent,
-				slotProps: userSlotProps
-			}, message.id));
-		} else if (message.role === "activity") {
-			const activityMsg = message;
-			elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedActivityMessage, {
-				message: activityMsg,
-				renderActivityMessage
-			}, message.id));
-		} else if (message.role === "reasoning") {
-			let ReasoningComponent = CopilotChatReasoningMessage_default;
-			let reasoningSlotProps;
-			if (isReactComponentType(reasoningMessage)) ReasoningComponent = reasoningMessage;
-			else if (typeof reasoningMessage === "string") reasoningSlotProps = { className: reasoningMessage };
-			else if (reasoningMessage && typeof reasoningMessage === "object") reasoningSlotProps = reasoningMessage;
-			elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReasoningMessage, {
-				message,
-				messages,
-				isRunning,
-				ReasoningMessageComponent: ReasoningComponent,
-				slotProps: reasoningSlotProps
-			}, message.id));
-		}
+		if (message.role === "assistant") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedAssistantMessage, {
+			message,
+			messages,
+			isRunning,
+			AssistantMessageComponent: AssistantComponent,
+			slotProps: assistantSlotProps
+		}, message.id));
+		else if (message.role === "user") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedUserMessage, {
+			message,
+			UserMessageComponent: UserComponent,
+			slotProps: userSlotProps
+		}, message.id));
+		else if (message.role === "activity") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedActivityMessage, {
+			message,
+			renderActivityMessage
+		}, message.id));
+		else if (message.role === "reasoning") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReasoningMessage, {
+			message,
+			messages,
+			isRunning,
+			ReasoningMessageComponent: ReasoningComponent,
+			slotProps: reasoningSlotProps
+		}, message.id));
 		if (renderCustomMessage) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCustomMessage, {
 			message,
 			position: "after",
 			renderCustomMessage,
 			stateSnapshot
 		}, `${message.id}-custom-after`));
-		return elements;
-	}).filter(Boolean);
+		return elements.filter(Boolean);
+	};
+	const messageElements = shouldVirtualize ? [] : deduplicatedMessages.flatMap(renderMessageBlock);
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
 		style: { display: "contents" },
@@ -4347,27 +5732,353 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	const lastMessage = messages[messages.length - 1];
 	const showCursor = isRunning && lastMessage?.role !== "reasoning";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-copilotkit": true,
-		"data-testid": "copilot-message-list",
-		className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
-		...props,
+		"data-copilotkit": true,
+		"data-testid": "copilot-message-list",
+		className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
+		...props,
+		children: [
+			shouldVirtualize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					height: virtualizer.getTotalSize(),
+					position: "relative"
+				},
+				children: virtualizer.getVirtualItems().map((virtualItem) => {
+					const message = deduplicatedMessages[virtualItem.index];
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-index": virtualItem.index,
+						ref: virtualizer.measureElement,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							width: "100%",
+							transform: `translateY(${virtualItem.start}px)`
+						},
+						children: renderMessageBlock(message)
+					}, message.id);
+				})
+			}) : messageElements,
+			interruptElement,
+			showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:mt-2",
+				children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+			})
+		]
+	});
+}
+CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "copilot-loading-cursor",
+		className: (0, tailwind_merge.twMerge)("cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse-cursor cpk:ml-1", className),
+		...props
+	});
+};
+
+//#endregion
+//#region src/v2/components/chat/CopilotChatAttachmentQueue.tsx
+const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className }) => {
+	if (attachments.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("cpk:flex cpk:flex-wrap cpk:gap-2 cpk:p-2", className),
+		children: attachments.map((attachment) => {
+			const isMedia = attachment.type === "image" || attachment.type === "video";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cn("cpk:relative cpk:inline-flex cpk:rounded-lg cpk:overflow-hidden cpk:border cpk:border-border", isMedia ? "cpk:w-[72px] cpk:h-[72px]" : attachment.type === "audio" ? "cpk:min-w-[200px] cpk:max-w-[280px] cpk:flex-col cpk:p-1 cpk:pr-8" : "cpk:p-2 cpk:px-3 cpk:pr-8 cpk:max-w-[240px]"),
+				children: [
+					attachment.status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadingOverlay, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentPreview, { attachment }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: () => onRemoveAttachment(attachment.id),
+						className: cn("cpk:absolute cpk:bg-black/60 cpk:text-white cpk:border-none cpk:rounded-full cpk:w-5 cpk:h-5 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:text-[10px] cpk:z-20", isMedia ? "cpk:top-1 cpk:right-1" : "cpk:top-1.5 cpk:right-1.5"),
+						"aria-label": "Remove attachment",
+						children: "✕"
+					})
+				]
+			}, attachment.id);
+		})
+	});
+};
+function UploadingOverlay() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/40 cpk:z-10",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk:w-5 cpk:h-5 cpk:border-2 cpk:border-white cpk:border-t-transparent cpk:rounded-full cpk:animate-spin" })
+	});
+}
+function AttachmentPreview({ attachment }) {
+	if (attachment.status === "uploading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk:w-full cpk:h-full" });
+	switch (attachment.type) {
+		case "image": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePreview, { attachment });
+		case "audio": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioPreview, { attachment });
+		case "video": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPreview, { attachment });
+		case "document": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentPreview, { attachment });
+	}
+}
+function Lightbox({ onClose, children }) {
+	(0, react.useEffect)(() => {
+		const handleKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handleKey);
+		return () => document.removeEventListener("keydown", handleKey);
+	}, [onClose]);
+	if (typeof document === "undefined") return null;
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in",
+		onClick: onClose,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onClick: onClose,
+			className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
+			"aria-label": "Close preview",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:w-5 cpk:h-5" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			onClick: (e) => e.stopPropagation(),
+			children
+		})]
+	}), document.body);
+}
+/**
+* Hook that manages lightbox open/close and uses the View Transition API to
+* morph the thumbnail into fullscreen content.
+*
+* The trick: `view-transition-name` must live on exactly ONE element at a time.
+* - Old state (thumbnail visible): name is on the thumbnail.
+* - New state (lightbox visible): name moves to the lightbox content.
+* `flushSync` ensures React commits the DOM change synchronously inside the
+* `startViewTransition` callback so the API can snapshot old → new correctly.
+*/
+function useLightbox() {
+	const thumbnailRef = (0, react.useRef)(null);
+	const [open, setOpen] = (0, react.useState)(false);
+	const vtName = (0, react.useId)();
+	return {
+		thumbnailRef,
+		vtName,
+		open,
+		openLightbox: (0, react.useCallback)(() => {
+			const thumb = thumbnailRef.current;
+			const doc = document;
+			if (doc.startViewTransition && thumb) {
+				thumb.style.viewTransitionName = vtName;
+				doc.startViewTransition(() => {
+					thumb.style.viewTransitionName = "";
+					(0, react_dom.flushSync)(() => setOpen(true));
+				});
+			} else setOpen(true);
+		}, []),
+		closeLightbox: (0, react.useCallback)(() => {
+			const thumb = thumbnailRef.current;
+			const doc = document;
+			if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
+				(0, react_dom.flushSync)(() => setOpen(false));
+				thumb.style.viewTransitionName = vtName;
+			}).finished.then(() => {
+				thumb.style.viewTransitionName = "";
+			}).catch(() => {
+				thumb.style.viewTransitionName = "";
+			});
+			else setOpen(false);
+		}, [])
+	};
+}
+function ImagePreview({ attachment }) {
+	const src = (0, _copilotkit_shared.getSourceUrl)(attachment.source);
+	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		ref: thumbnailRef,
+		src,
+		alt: attachment.filename || "Image attachment",
+		className: "cpk:w-full cpk:h-full cpk:object-cover cpk:cursor-pointer",
+		onClick: openLightbox
+	}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+		onClose: closeLightbox,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			style: { viewTransitionName: vtName },
+			src,
+			alt: attachment.filename || "Image attachment",
+			className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
+		})
+	})] });
+}
+function AudioPreview({ attachment }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "cpk:flex cpk:flex-col cpk:gap-1 cpk:w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+			src: (0, _copilotkit_shared.getSourceUrl)(attachment.source),
+			controls: true,
+			preload: "metadata",
+			className: "cpk:w-full cpk:h-8"
+		}), attachment.filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cpk:text-xs cpk:font-medium cpk:overflow-hidden cpk:text-ellipsis cpk:whitespace-nowrap",
+			children: attachment.filename
+		})]
+	});
+}
+function VideoPreview({ attachment }) {
+	const src = (0, _copilotkit_shared.getSourceUrl)(attachment.source);
+	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: thumbnailRef,
+			className: "cpk:w-full cpk:h-full",
+			children: attachment.thumbnail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: attachment.thumbnail,
+				alt: attachment.filename || "Video thumbnail",
+				className: "cpk:w-full cpk:h-full cpk:object-cover"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+				src,
+				preload: "metadata",
+				muted: true,
+				className: "cpk:w-full cpk:h-full cpk:object-cover"
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onClick: openLightbox,
+			className: "cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:z-10 cpk:cursor-pointer cpk:bg-black/20 cpk:border-none cpk:p-0",
+			"aria-label": "Play video",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:w-8 cpk:h-8 cpk:rounded-full cpk:bg-black/60 cpk:flex cpk:items-center cpk:justify-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "cpk:w-4 cpk:h-4 cpk:text-white cpk:ml-0.5" })
+			})
+		}),
+		open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+			onClose: closeLightbox,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+				style: { viewTransitionName: vtName },
+				src,
+				controls: true,
+				autoPlay: true,
+				className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:rounded-lg"
+			})
+		})
+	] });
+}
+function isPdf(mimeType) {
+	return !!mimeType && mimeType.includes("pdf");
+}
+function isText(mimeType) {
+	return !!mimeType && mimeType.startsWith("text/");
+}
+function canPreviewInBrowser(mimeType) {
+	return isPdf(mimeType) || isText(mimeType);
+}
+/**
+* Convert a base64-encoded data source to a blob: URL that browsers will
+* render inside an iframe (data: URLs are blocked for PDFs in most browsers).
+*/
+function useBlobUrl(attachment) {
+	const [url, setUrl] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (attachment.source.type !== "data") return;
+		try {
+			const binary = atob(attachment.source.value);
+			const bytes = new Uint8Array(binary.length);
+			for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+			const blob = new Blob([bytes], { type: attachment.source.mimeType || "application/octet-stream" });
+			const blobUrl = URL.createObjectURL(blob);
+			setUrl(blobUrl);
+			return () => URL.revokeObjectURL(blobUrl);
+		} catch (error) {
+			console.error("[CopilotKit] Failed to decode attachment data:", error);
+			setUrl(null);
+		}
+	}, [
+		attachment.source.type,
+		attachment.source.value,
+		attachment.source.mimeType
+	]);
+	if (attachment.source.type === "url") return attachment.source.value;
+	return url;
+}
+function DocumentLightboxContent({ attachment, vtName }) {
+	const mimeType = attachment.source.mimeType;
+	const blobUrl = useBlobUrl(attachment);
+	if (isPdf(mimeType)) {
+		if (!blobUrl) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+			style: { viewTransitionName: vtName },
+			src: blobUrl,
+			title: attachment.filename || "PDF preview",
+			className: "cpk:w-[90vw] cpk:h-[90vh] cpk:max-w-[1000px] cpk:rounded-lg cpk:bg-white"
+		});
+	}
+	if (isText(mimeType)) {
+		const textContent = attachment.source.type === "data" ? (() => {
+			try {
+				return atob(attachment.source.value);
+			} catch {
+				return attachment.source.value;
+			}
+		})() : null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: { viewTransitionName: vtName },
+			className: "cpk:w-[90vw] cpk:max-w-[800px] cpk:max-h-[90vh] cpk:overflow-auto cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900 cpk:p-6",
+			children: [attachment.filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:text-sm cpk:font-medium cpk:text-gray-500 cpk:dark:text-gray-400 cpk:mb-4 cpk:pb-2 cpk:border-b cpk:border-gray-200 cpk:dark:border-gray-700",
+				children: attachment.filename
+			}), textContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: "cpk:text-sm cpk:whitespace-pre-wrap cpk:break-words cpk:text-gray-800 cpk:dark:text-gray-200 cpk:font-mono cpk:m-0",
+				children: textContent
+			}) : blobUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+				src: blobUrl,
+				title: attachment.filename || "Text preview",
+				className: "cpk:w-full cpk:h-[80vh] cpk:border-none"
+			}) : null]
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: { viewTransitionName: vtName },
+		className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-4 cpk:p-8 cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900",
 		children: [
-			messageElements,
-			interruptElement,
-			showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:mt-2",
-				children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:w-16 cpk:h-16 cpk:rounded-xl cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-xl cpk:font-bold",
+				children: (0, _copilotkit_shared.getDocumentIcon)(mimeType ?? "")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cpk:text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:text-base cpk:font-medium cpk:text-gray-800 cpk:dark:text-gray-200",
+					children: attachment.filename || "Document"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cpk:text-sm cpk:text-gray-500 cpk:dark:text-gray-400 cpk:mt-1",
+					children: [mimeType || "Unknown type", attachment.size != null && ` · ${(0, _copilotkit_shared.formatFileSize)(attachment.size)}`]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:text-xs cpk:text-gray-400 cpk:dark:text-gray-500",
+				children: "No preview available for this file type"
 			})
 		]
 	});
 }
-CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-testid": "copilot-loading-cursor",
-		className: (0, tailwind_merge.twMerge)("cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse-cursor cpk:ml-1", className),
-		...props
-	});
-};
+function DocumentPreview({ attachment }) {
+	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+	const mimeType = attachment.source.mimeType;
+	const previewable = canPreviewInBrowser(mimeType);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: thumbnailRef,
+		className: cn("cpk:flex cpk:items-center cpk:gap-2", previewable && "cpk:cursor-pointer"),
+		onClick: previewable ? openLightbox : void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cpk:w-8 cpk:h-8 cpk:rounded-md cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-[10px] cpk:font-semibold cpk:shrink-0",
+			children: (0, _copilotkit_shared.getDocumentIcon)(mimeType ?? "")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:flex cpk:flex-col cpk:min-w-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-xs cpk:font-medium cpk:break-all cpk:leading-tight",
+				children: attachment.filename || "Document"
+			}), attachment.size != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-[11px] cpk:text-muted-foreground",
+				children: (0, _copilotkit_shared.formatFileSize)(attachment.size)
+			})]
+		})]
+	}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
+		onClose: closeLightbox,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentLightboxContent, {
+			attachment,
+			vtName
+		})
+	})] });
+}
 
 //#endregion
 //#region src/v2/hooks/use-keyboard-height.tsx
@@ -4413,7 +6124,19 @@ function useKeyboardHeight() {
 //#endregion
 //#region src/v2/components/chat/CopilotChatView.tsx
 const FEATHER_HEIGHT = 96;
-function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, disclaimer, children, className, ...props }) {
+function DropOverlay() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("cpk:absolute cpk:inset-0 cpk:z-50 cpk:pointer-events-none", "cpk:flex cpk:items-center cpk:justify-center", "cpk:bg-primary/5 cpk:backdrop-blur-[2px]", "cpk:border-2 cpk:border-dashed cpk:border-primary/40 cpk:rounded-lg cpk:m-2"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-2 cpk:text-primary/70",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "cpk:w-8 cpk:h-8" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-sm cpk:font-medium",
+				children: "Drop files here"
+			})]
+		})
+	});
+}
+function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, attachments, onRemoveAttachment, onAddFile, dragOver, onDragOver, onDragLeave, onDrop, disclaimer, children, className, ...props }) {
 	const inputContainerRef = (0, react.useRef)(null);
 	const [inputContainerHeight, setInputContainerHeight] = (0, react.useState)(0);
 	const [isResizing, setIsResizing] = (0, react.useState)(false);
@@ -4460,6 +6183,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		onCancelTranscribe,
 		onFinishTranscribe,
 		onFinishTranscribeWithAudio,
+		onAddFile,
 		positioning: "static",
 		keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
 		containerRef: inputContainerRef,
@@ -4500,21 +6224,34 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			onCancelTranscribe,
 			onFinishTranscribe,
 			onFinishTranscribeWithAudio,
+			onAddFile,
 			positioning: "static",
 			showDisclaimer: true,
 			...disclaimer !== void 0 ? { disclaimer } : {}
 		});
-		const BoundWelcomeScreen = renderSlot(welcomeScreen === true ? void 0 : welcomeScreen, CopilotChatView.WelcomeScreen, {
-			input: BoundInputForWelcome,
+		const welcomeScreenSlot = welcomeScreen === true ? void 0 : welcomeScreen;
+		const inputWithAttachments = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "cpk:w-full",
+			children: [attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
+				attachments,
+				onRemoveAttachment: (id) => onRemoveAttachment?.(id),
+				className: "cpk:mb-2"
+			}), BoundInputForWelcome]
+		});
+		const BoundWelcomeScreen = renderSlot(welcomeScreenSlot, CopilotChatView.WelcomeScreen, {
+			input: inputWithAttachments,
 			suggestionView: BoundSuggestionView ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
 		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-chat",
 			"data-copilot-running": isRunning ? "true" : "false",
-			className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+			onDragOver,
+			onDragLeave,
+			onDrop,
+			className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 			...props,
-			children: BoundWelcomeScreen
+			children: [dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}), BoundWelcomeScreen]
 		});
 	}
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4531,39 +6268,66 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		"data-copilotkit": true,
 		"data-testid": "copilot-chat",
 		"data-copilot-running": isRunning ? "true" : "false",
-		className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+		onDragOver,
+		onDragLeave,
+		onDrop,
+		className: cn("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 		...props,
-		children: [BoundScrollView, BoundInput]
+		children: [
+			dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
+			BoundScrollView,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:max-w-3xl cpk:mx-auto cpk:w-full",
+				children: attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
+					attachments,
+					onRemoveAttachment: (id) => onRemoveAttachment?.(id),
+					className: "cpk:px-4"
+				})
+			}),
+			BoundInput
+		]
 	});
 }
 (function(_CopilotChatView) {
 	const ScrollContent = ({ children, scrollToBottomButton, feather, inputContainerHeight, isResizing }) => {
-		const { isAtBottom, scrollToBottom } = (0, use_stick_to_bottom.useStickToBottomContext)();
+		const { isAtBottom, scrollToBottom, scrollRef } = (0, use_stick_to_bottom.useStickToBottomContext)();
+		const [scrollEl, setScrollEl] = (0, react.useState)(null);
+		(0, react.useLayoutEffect)(() => {
+			setScrollEl(scrollRef.current ?? null);
+		}, []);
 		const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom.Content, {
-				className: "cpk:overflow-y-auto cpk:overflow-x-hidden",
-				style: {
-					flex: "1 1 0%",
-					minHeight: 0
-				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
-					children
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
+			value: scrollEl,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom.Content, {
+					className: "cpk:overflow-y-auto cpk:overflow-x-hidden",
+					style: {
+						flex: "1 1 0%",
+						minHeight: 0
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+						children
+					})
+				}),
+				BoundFeather,
+				!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
+					style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
+					children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 				})
-			}),
-			BoundFeather,
-			!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
-				style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
-				children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
-			})
-		] });
+			] })
+		});
 	};
 	_CopilotChatView.ScrollView = ({ children, autoScroll = true, scrollToBottomButton, feather, inputContainerHeight = 0, isResizing = false, className, ...props }) => {
 		const [hasMounted, setHasMounted] = (0, react.useState)(false);
 		const { scrollRef, contentRef, scrollToBottom } = (0, use_stick_to_bottom.useStickToBottom)();
 		const [showScrollButton, setShowScrollButton] = (0, react.useState)(false);
+		const [nonAutoScrollEl, setNonAutoScrollEl] = (0, react.useState)(null);
+		const nonAutoScrollRefCallback = (0, react.useCallback)((el) => {
+			scrollRef.current = el;
+			setNonAutoScrollEl(el);
+		}, []);
 		(0, react.useEffect)(() => {
 			setHasMounted(true);
 		}, []);
@@ -4592,23 +6356,26 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 		if (!autoScroll) {
 			const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				ref: scrollRef,
-				className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden cpk:relative", className),
-				...props,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						ref: contentRef,
-						className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
-						children
-					}),
-					BoundFeather,
-					showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
-						style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
-						children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
-					})
-				]
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
+				value: nonAutoScrollEl,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: nonAutoScrollRefCallback,
+					className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden cpk:relative", className),
+					...props,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							ref: contentRef,
+							className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							children
+						}),
+						BoundFeather,
+						showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
+							style: { bottom: `${inputContainerHeight + FEATHER_HEIGHT + 16}px` },
+							children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
+						})
+					]
+				})
 			});
 		}
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom, {
@@ -4800,11 +6567,15 @@ async function transcribeAudio(core, audioBlob, filename = "recording.webm") {
 
 //#endregion
 //#region src/v2/components/chat/CopilotChat.tsx
-function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, onError, ...props }) {
+function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, attachments: attachmentsConfig, onError, throttleMs, ...props }) {
 	const existingConfig = useCopilotChatConfiguration();
 	const resolvedAgentId = agentId ?? existingConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const resolvedThreadId = (0, react.useMemo)(() => threadId ?? existingConfig?.threadId ?? (0, _copilotkit_shared.randomUUID)(), [threadId, existingConfig?.threadId]);
-	const { agent } = useAgent({ agentId: resolvedAgentId });
+	const { agent } = useAgent({
+		agentId: resolvedAgentId,
+		threadId: resolvedThreadId,
+		throttleMs
+	});
 	const { copilotkit } = useCopilotKit();
 	const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
 	const { checkFeature } = useLicenseContext();
@@ -4833,6 +6604,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const [inputValue, setInputValue] = (0, react.useState)("");
 	const [transcriptionError, setTranscriptionError] = (0, react.useState)(null);
 	const [isTranscribing, setIsTranscribing] = (0, react.useState)(false);
+	const { attachments: selectedAttachments, enabled: attachmentsEnabled, dragOver, fileInputRef, containerRef: chatContainerRef, handleFileUpload, handleDragOver, handleDragLeave, handleDrop, removeAttachment, consumeAttachments } = useAttachments({ config: attachmentsConfig });
 	const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
 	const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
 	const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
@@ -4848,7 +6620,6 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 				console.error("CopilotChat: connectAgent failed", error);
 			}
 		};
-		agent.threadId = resolvedThreadId;
 		connect(agent);
 		return () => {
 			detached = true;
@@ -4861,7 +6632,31 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		resolvedAgentId
 	]);
 	const onSubmitInput = (0, react.useCallback)(async (value) => {
-		agent.addMessage({
+		if (selectedAttachments.some((a) => a.status === "uploading")) {
+			console.error("[CopilotKit] Cannot send while attachments are uploading");
+			return;
+		}
+		const readyAttachments = consumeAttachments();
+		if (readyAttachments.length > 0) {
+			const contentParts = [];
+			if (value.trim()) contentParts.push({
+				type: "text",
+				text: value
+			});
+			for (const att of readyAttachments) contentParts.push({
+				type: att.type,
+				source: att.source,
+				metadata: {
+					...att.filename ? { filename: att.filename } : {},
+					...att.metadata
+				}
+			});
+			agent.addMessage({
+				id: (0, _copilotkit_shared.randomUUID)(),
+				role: "user",
+				content: contentParts
+			});
+		} else agent.addMessage({
 			id: (0, _copilotkit_shared.randomUUID)(),
 			role: "user",
 			content: value
@@ -4872,7 +6667,11 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		} catch (error) {
 			console.error("CopilotChat: runAgent failed", error);
 		}
-	}, [agent]);
+	}, [
+		agent,
+		selectedAttachments,
+		consumeAttachments
+	]);
 	const handleSelectSuggestion = (0, react.useCallback)(async (suggestion) => {
 		agent.addMessage({
 			id: (0, _copilotkit_shared.randomUUID)(),
@@ -4959,21 +6758,33 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 			return () => clearTimeout(timer);
 		}
 	}, [transcriptionError]);
-	const mergedProps = (0, ts_deepmerge.merge)({
+	const stableMessageView = useShallowStableRef(typeof providedMessageView === "string" ? { className: providedMessageView } : providedMessageView);
+	const stableSuggestionView = useShallowStableRef(providedSuggestionView);
+	const handleAddFile = (0, react.useCallback)(() => {
+		setTimeout(() => {
+			fileInputRef.current?.click();
+		}, 100);
+	}, []);
+	const mergedProps = {
 		isRunning: agent.isRunning,
 		suggestions: autoSuggestions,
 		onSelectSuggestion: handleSelectSuggestion,
-		suggestionView: providedSuggestionView
-	}, {
-		...restProps,
-		...typeof providedMessageView === "string" ? { messageView: { className: providedMessageView } } : providedMessageView !== void 0 ? { messageView: providedMessageView } : {}
-	});
+		suggestionView: stableSuggestionView,
+		...restProps
+	};
+	if (stableMessageView !== void 0) mergedProps.messageView = stableMessageView;
 	const hasMessages = agent.messages.length > 0;
 	const effectiveStopHandler = agent.isRunning && hasMessages ? providedStopHandler ?? stopCurrentRun : providedStopHandler;
 	const showTranscription = isTranscriptionEnabled && isMediaRecorderSupported;
 	const effectiveMode = isTranscribing ? "processing" : transcribeMode;
-	const RenderedChatView = renderSlot(chatView, CopilotChatView, (0, ts_deepmerge.merge)(mergedProps, {
-		messages: (0, react.useMemo)(() => [...agent.messages], [JSON.stringify(agent.messages)]),
+	const messages = (0, react.useMemo)(() => [...agent.messages], [agent.messages.map((m) => {
+		const contentKey = typeof m.content === "string" ? m.content.length : Array.isArray(m.content) ? m.content.length : 0;
+		const toolCallsKey = "toolCalls" in m && Array.isArray(m.toolCalls) ? m.toolCalls.map((tc) => `${tc.id}:${tc.function?.arguments?.length ?? 0}`).join(";") : "";
+		return `${m.id}:${m.role}:${contentKey}:${toolCallsKey}`;
+	}).join(",")]);
+	const RenderedChatView = renderSlot(chatView, CopilotChatView, {
+		...mergedProps,
+		messages,
 		onSubmitMessage: onSubmitInput,
 		onStop: effectiveStopHandler,
 		inputMode: effectiveMode,
@@ -4982,32 +6793,51 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		onStartTranscribe: showTranscription ? handleStartTranscribe : void 0,
 		onCancelTranscribe: showTranscription ? handleCancelTranscribe : void 0,
 		onFinishTranscribe: showTranscription ? handleFinishTranscribe : void 0,
-		onFinishTranscribeWithAudio: showTranscription ? handleFinishTranscribeWithAudio : void 0
-	}));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotChatConfigurationProvider, {
+		onFinishTranscribeWithAudio: showTranscription ? handleFinishTranscribeWithAudio : void 0,
+		attachments: selectedAttachments,
+		onRemoveAttachment: removeAttachment,
+		onAddFile: attachmentsEnabled ? handleAddFile : void 0,
+		dragOver,
+		onDragOver: handleDragOver,
+		onDragLeave: handleDragLeave,
+		onDrop: handleDrop
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
 		agentId: resolvedAgentId,
 		threadId: resolvedThreadId,
 		labels,
 		isModalDefaultOpen,
-		children: [
-			!isChatLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Chat" }),
-			transcriptionError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: {
-					position: "absolute",
-					bottom: "100px",
-					left: "50%",
-					transform: "translateX(-50%)",
-					backgroundColor: "#ef4444",
-					color: "white",
-					padding: "8px 16px",
-					borderRadius: "8px",
-					fontSize: "14px",
-					zIndex: 50
-				},
-				children: transcriptionError
-			}),
-			RenderedChatView
-		]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: chatContainerRef,
+			style: { display: "contents" },
+			children: [
+				attachmentsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "file",
+					multiple: true,
+					ref: fileInputRef,
+					onChange: handleFileUpload,
+					accept: attachmentsConfig?.accept ?? "*/*",
+					style: { display: "none" }
+				}),
+				!isChatLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Chat" }),
+				transcriptionError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						position: "absolute",
+						bottom: "100px",
+						left: "50%",
+						transform: "translateX(-50%)",
+						backgroundColor: "#ef4444",
+						color: "white",
+						padding: "8px 16px",
+						borderRadius: "8px",
+						fontSize: "14px",
+						zIndex: 50
+					},
+					children: transcriptionError
+				}),
+				RenderedChatView
+			]
+		})
 	});
 }
 (function(_CopilotChat) {
@@ -5872,6 +7702,227 @@ function useToast() {
 	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);
@@ -5909,156 +7960,10 @@ function ToastProvider({ enabled, children }) {
 	};
 	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]
 	});
 }
 
@@ -7065,12 +8970,21 @@ function CopilotListeners() {
 	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();
@@ -7544,7 +9458,7 @@ function CopilotKitInternal(cpkProps) {
 			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),
@@ -7624,6 +9538,18 @@ Object.defineProperty(exports, 'CopilotChatAssistantMessage_default', {
     return CopilotChatAssistantMessage_default;
   }
 });
+Object.defineProperty(exports, 'CopilotChatAttachmentQueue', {
+  enumerable: true,
+  get: function () {
+    return CopilotChatAttachmentQueue;
+  }
+});
+Object.defineProperty(exports, 'CopilotChatAttachmentRenderer', {
+  enumerable: true,
+  get: function () {
+    return CopilotChatAttachmentRenderer;
+  }
+});
 Object.defineProperty(exports, 'CopilotChatAudioRecorder', {
   enumerable: true,
   get: function () {
@@ -7786,6 +9712,12 @@ Object.defineProperty(exports, 'MCPAppsActivityType', {
     return MCPAppsActivityType;
   }
 });
+Object.defineProperty(exports, 'SandboxFunctionsContext', {
+  enumerable: true,
+  get: function () {
+    return SandboxFunctionsContext;
+  }
+});
 Object.defineProperty(exports, 'ThreadsContext', {
   enumerable: true,
   get: function () {
@@ -7858,6 +9790,12 @@ Object.defineProperty(exports, 'useAsyncCallback', {
     return useAsyncCallback;
   }
 });
+Object.defineProperty(exports, 'useAttachments', {
+  enumerable: true,
+  get: function () {
+    return useAttachments;
+  }
+});
 Object.defineProperty(exports, 'useCoAgentStateRenders', {
   enumerable: true,
   get: function () {
@@ -7948,6 +9886,12 @@ Object.defineProperty(exports, 'useRenderToolCall', {
     return useRenderToolCall;
   }
 });
+Object.defineProperty(exports, 'useSandboxFunctions', {
+  enumerable: true,
+  get: function () {
+    return useSandboxFunctions;
+  }
+});
 Object.defineProperty(exports, 'useSuggestions', {
   enumerable: true,
   get: function () {
@@ -7972,4 +9916,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-B3Mb1yVE.cjs.map
+//# sourceMappingURL=copilotkit-Bz5-ImDl.cjs.map