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

package/dist/{copilotkit-DNYSFuz5.mjs → copilotkit-BY5S1-0P.mjs}

@@ -1,10 +1,10 @@
 import * as React$1 from "react";
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import React, { createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { CopilotKitCore, CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent, ToolCallStatus, ɵcreateThreadStore, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
 import { HttpAgent } from "@ag-ui/client";
 import { extendTailwindMerge, twMerge } from "tailwind-merge";
-import { ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, Copy, Edit, Loader2, MessageCircle, Mic, Plus, RefreshCw, Square, ThumbsDown, ThumbsUp, Volume2, X } from "lucide-react";
-import { COPILOT_CLOUD_API_URL, COPILOT_CLOUD_CHAT_URL, COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, ConfigurationError, CopilotKitAgentDiscoveryError, CopilotKitApiDiscoveryError, CopilotKitError, CopilotKitErrorCode, CopilotKitLowLevelError, CopilotKitRemoteEndpointDiscoveryError, DEFAULT_AGENT_ID, ErrorVisibility, MissingPublicApiKeyError, Severity, TranscriptionErrorCode, TranscriptionErrorCode as TranscriptionErrorCode$1, createLicenseContextValue, dataToUUID, parseJson, partialJSONParse, randomId, randomUUID } from "@copilotkit/shared";
+import { ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, Copy, Edit, Loader2, MessageCircle, Mic, Play, Plus, RefreshCw, Square, ThumbsDown, ThumbsUp, Upload, Volume2, X } from "lucide-react";
+import { A2UI_DEFAULT_DESIGN_GUIDELINES, A2UI_DEFAULT_GENERATION_GUIDELINES, COPILOT_CLOUD_API_URL, COPILOT_CLOUD_CHAT_URL, COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, ConfigurationError, CopilotKitAgentDiscoveryError, CopilotKitApiDiscoveryError, CopilotKitError, CopilotKitErrorCode, CopilotKitLowLevelError, CopilotKitRemoteEndpointDiscoveryError, DEFAULT_AGENT_ID, ErrorVisibility, MissingPublicApiKeyError, Severity, TranscriptionErrorCode, TranscriptionErrorCode as TranscriptionErrorCode$1, createLicenseContextValue, dataToUUID, exceedsMaxSize, formatFileSize, generateVideoThumbnail, getDocumentIcon, getModalityFromMimeType, getSourceUrl, matchesAcceptFilter, parseJson, partialJSONParse, randomId, randomUUID, readFileAsBase64, schemaToJsonSchema } from "@copilotkit/shared";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -14,19 +14,120 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Streamdown } from "streamdown";
 import { z } from "zod";
 import { createComponent } from "@lit-labs/react";
-import { A2UIProvider, A2UIRenderer, DEFAULT_SURFACE_ID, initializeDefaultCatalog, injectStyles, useA2UIActions, viewerTheme } from "@copilotkit/a2ui-renderer";
+import { A2UIProvider, A2UIRenderer, A2UI_SCHEMA_CONTEXT_DESCRIPTION, DEFAULT_SURFACE_ID, buildCatalogContextValue, extractCatalogComponentSchemas, initializeDefaultCatalog, injectStyles, useA2UIActions, useA2UIError, viewerTheme } from "@copilotkit/a2ui-renderer";
+import { zodToJsonSchema } from "zod-to-json-schema";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { createPortal, flushSync } from "react-dom";
 import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
-import { merge } from "ts-deepmerge";
-import { flushSync } from "react-dom";
 import ReactMarkdown from "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 = 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.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.createElement(DefaultComponent, {
+			...props,
+			className: twMerge(existingClassName, slot)
+		});
+	}
+	if (isReactComponentType(slot)) return React.createElement(slot, props);
+	if (slot && typeof slot === "object" && !React.isValidElement(slot)) return React.createElement(DefaultComponent, {
+		...props,
+		...slot
+	});
+	return React.createElement(DefaultComponent, props);
+}
+/**
+* Internal memoized wrapper component for renderSlot.
+* Uses forwardRef to support ref forwarding.
+*/
+const MemoizedSlotWrapper = React.memo(React.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.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",
@@ -46,11 +147,12 @@ const CopilotChatDefaultLabels = {
 const CopilotChatConfiguration = createContext(null);
 const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
 	const parentConfig = useContext(CopilotChatConfiguration);
+	const stableLabels = useShallowStableRef(labels);
 	const mergedLabels = useMemo(() => ({
 		...CopilotChatDefaultLabels,
 		...parentConfig?.labels ?? {},
-		...labels ?? {}
-	}), [labels, parentConfig?.labels]);
+		...stableLabels ?? {}
+	}), [stableLabels, parentConfig?.labels]);
 	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;
 	const resolvedThreadId = useMemo(() => {
 		if (threadId) return threadId;
@@ -473,82 +575,11 @@ const CopilotChatAudioRecorder = 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.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.createElement(DefaultComponent, {
-			...props,
-			className: twMerge(existingClassName, slot)
-		});
-	}
-	if (isReactComponentType(slot)) return React.createElement(slot, props);
-	if (slot && typeof slot === "object" && !React.isValidElement(slot)) return React.createElement(DefaultComponent, {
-		...props,
-		...slot
-	});
-	return React.createElement(DefaultComponent, props);
-}
-/**
-* Internal memoized wrapper component for renderSlot.
-* Uses forwardRef to support ref forwarding.
-*/
-const MemoizedSlotWrapper = React.memo(React.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.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] = useState(() => value ?? "");
 	useEffect(() => {
@@ -577,6 +608,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		paddingLeft: 0,
 		paddingRight: 0
 	});
+	const containerCacheRef = useRef(null);
 	const commandItems = useMemo(() => {
 		const entries = [];
 		const seen = /* @__PURE__ */ new Set();
@@ -621,7 +653,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]);
 	useEffect(() => {
@@ -864,6 +896,25 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			return nextLayout;
 		});
 	}, []);
+	const updateContainerCache = 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 = useCallback(() => {
 		if (mode !== "input") {
 			updateLayout("compact");
@@ -889,31 +940,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.");
 				}
 			}
 		}
@@ -923,6 +974,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		ensureMeasurements,
 		mode,
 		resolvedValue,
+		updateContainerCache,
 		updateLayout
 	]);
 	useLayoutEffect(() => {
@@ -935,11 +987,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;
@@ -950,8 +1008,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);
@@ -1096,6 +1159,8 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	});
 	_CopilotChatInput.AddMenuButton = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+		const [mounted, setMounted] = useState(false);
+		useEffect(() => setMounted(true), []);
 		const menuItems = useMemo(() => {
 			const items = [];
 			if (onAddFile) items.push({
@@ -1126,26 +1191,28 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		}), []);
 		const hasMenuItems = menuItems.length > 0;
 		const isDisabled = disabled || !hasMenuItems;
+		const button = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			"data-testid": "copilot-add-menu-button",
+			variant: "chatInputToolbarSecondary",
+			size: "chatInputToolbarIcon",
+			className: twMerge("cpk:ml-1", className),
+			disabled: isDisabled,
+			...props,
+			children: /* @__PURE__ */ jsx(Plus, { className: "cpk:size-[20px]" })
+		});
+		if (!mounted) return button;
 		return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					"data-testid": "copilot-add-menu-button",
-					variant: "chatInputToolbarSecondary",
-					size: "chatInputToolbarIcon",
-					className: twMerge("cpk:ml-1", className),
-					disabled: isDisabled,
-					...props,
-					children: /* @__PURE__ */ jsx(Plus, { className: "cpk:size-[20px]" })
-				})
+				children: button
 			})
 		}), /* @__PURE__ */ jsx(TooltipContent, {
 			side: "bottom",
 			children: /* @__PURE__ */ jsxs("p", {
 				className: "cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium",
-				children: [/* @__PURE__ */ jsx("span", { children: "Add files and more" }), /* @__PURE__ */ jsx("code", {
+				children: [/* @__PURE__ */ jsx("span", { children: "Add attachments" }), /* @__PURE__ */ 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: "/"
 				})]
@@ -1161,21 +1228,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		useImperativeHandle(ref, () => internalTextareaRef.current);
 		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);
-		}, []);
-		useEffect(() => {
-			if (autoFocus) internalTextareaRef.current?.focus();
+			if (autoFocus) internalTextareaRef.current?.focus({ preventScroll: true });
 		}, [autoFocus]);
 		return /* @__PURE__ */ jsx("textarea", {
 			ref: internalTextareaRef,
@@ -1883,125 +1936,981 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agen
 };
 
 //#endregion
-//#region src/v2/a2ui/A2UIMessageRenderer.tsx
-let initialized = false;
-function ensureInitialized() {
-	if (!initialized) {
-		initializeDefaultCatalog();
-		injectStyles();
-		initialized = true;
-	}
-}
-function createA2UIMessageRenderer(options) {
-	const { theme } = options;
-	return {
-		activityType: "a2ui-surface",
-		content: z.any(),
-		render: ({ content, agent }) => {
-			ensureInitialized();
-			const [operations, setOperations] = useState([]);
-			const lastSignatureRef = useRef(null);
-			const { copilotkit } = useCopilotKit();
-			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 = useMemo(() => {
-				const groups = /* @__PURE__ */ new Map();
-				for (const operation of operations) {
-					const surfaceId = getOperationSurfaceId(operation) ?? 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__ */ 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__ */ jsx(ReactSurfaceHost, {
-					surfaceId,
-					operations: ops,
-					theme,
-					agent,
-					copilotkit
-				}, surfaceId))
-			});
-		}
-	};
+//#region src/v2/providers/SandboxFunctionsContext.ts
+const SandboxFunctionsContext = createContext([]);
+function useSandboxFunctions() {
+	return useContext(SandboxFunctionsContext);
 }
+
+//#endregion
+//#region src/v2/lib/processPartialHtml.ts
 /**
-* Renders a single A2UI surface using the React renderer.
-* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
+* Extracts all complete `<style>` blocks from the raw HTML.
+* Returns the concatenated style tags, suitable for injection into `<head>`.
 */
-function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
-		children: /* @__PURE__ */ jsxs(A2UIProvider, {
-			onAction: useCallback(async (message) => {
-				if (!agent) return;
-				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__ */ jsx(SurfaceMessageProcessor, {
-				surfaceId,
-				operations
-			}), /* @__PURE__ */ jsx(A2UIRenderer, {
-				surfaceId,
-				className: "cpk:flex cpk:flex-1"
-			})]
-		})
-	});
+function extractCompleteStyles(html) {
+	const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
+	return matches ? matches.join("") : "";
 }
 /**
-* Processes A2UI operations into the provider's message processor.
-* Must be a child of A2UIProvider to access the actions context.
+* 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 SurfaceMessageProcessor({ surfaceId, operations }) {
-	const { processMessages } = useA2UIActions();
-	const lastProcessedRef = useRef("");
-	useEffect(() => {
-		const key = `${surfaceId}-${JSON.stringify(operations)}`;
-		if (key === lastProcessedRef.current) return;
-		lastProcessedRef.current = key;
-		processMessages(operations);
-	}, [
-		processMessages,
-		surfaceId,
-		operations
-	]);
-	return null;
+function processPartialHtml(html) {
+	let result = html;
+	result = result.replace(/<[^>]*$/, "");
+	result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
+	result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
+	result = result.replace(/&[a-zA-Z0-9#]*$/, "");
+	const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
+	if (bodyMatch) {
+		result = bodyMatch[1];
+		result = result.replace(/<\/body>[\s\S]*/i, "");
+	}
+	return result;
+}
+
+//#endregion
+//#region src/v2/components/OpenGenerativeUIRenderer.tsx
+const OpenGenerativeUIActivityType = "open-generative-ui";
+const OpenGenerativeUIContentSchema = z.object({
+	initialHeight: z.number().optional(),
+	generating: z.boolean().optional(),
+	css: z.string().optional(),
+	cssComplete: z.boolean().optional(),
+	html: z.array(z.string()).optional(),
+	htmlComplete: z.boolean().optional(),
+	jsFunctions: z.string().optional(),
+	jsFunctionsComplete: z.boolean().optional(),
+	jsExpressions: z.array(z.string()).optional(),
+	jsExpressionsComplete: z.boolean().optional()
+});
+/**
+* Schema for the generateSandboxedUi tool call arguments.
+* Used by the frontend tool renderer to display placeholder messages.
+*/
+const GenerateSandboxedUiArgsSchema = z.object({
+	initialHeight: z.number().optional(),
+	placeholderMessages: z.array(z.string()).optional(),
+	css: z.string().optional(),
+	html: z.string().optional(),
+	jsFunctions: z.string().optional(),
+	jsExpressions: z.array(z.string()).optional()
+});
+const THROTTLE_MS = 1e3;
+/**
+* Returns true when the inner component should re-render immediately
+* (no throttle delay).
+*/
+function shouldFlushImmediately(prev, next) {
+	if (next.cssComplete && (!prev || !prev.cssComplete)) return true;
+	if (next.htmlComplete) return true;
+	if (next.generating === false) return true;
+	if (next.jsFunctions && (!prev || !prev.jsFunctions)) return true;
+	if ((next.jsExpressions?.length ?? 0) > (prev?.jsExpressions?.length ?? 0)) return true;
+	if (next.html?.length && (!prev || !prev.html?.length)) return true;
+	return false;
+}
+/**
+* Outer wrapper — absorbs every parent re-render but only forwards
+* throttled content snapshots to the memoized inner component.
+*/
+const OpenGenerativeUIActivityRenderer = function OpenGenerativeUIActivityRenderer({ content }) {
+	const latestContentRef = useRef(content);
+	latestContentRef.current = content;
+	const [throttledContent, setThrottledContent] = useState(content);
+	const throttledContentRef = useRef(throttledContent);
+	const timerRef = useRef(null);
+	if (throttledContentRef.current !== content) {
+		if (shouldFlushImmediately(throttledContentRef.current, content)) {
+			if (timerRef.current !== null) {
+				clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+			throttledContentRef.current = content;
+			setThrottledContent(content);
+		}
+	}
+	const flush = useCallback(() => {
+		timerRef.current = null;
+		const latest = latestContentRef.current;
+		throttledContentRef.current = latest;
+		setThrottledContent(latest);
+	}, []);
+	useEffect(() => {
+		if (throttledContentRef.current === content) return;
+		if (timerRef.current === null) timerRef.current = setTimeout(flush, THROTTLE_MS);
+	}, [content, flush]);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current !== null) clearTimeout(timerRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(OpenGenerativeUIActivityRendererInner, { content: throttledContent });
+};
+function ensureHead(html) {
+	if (/<head[\s>]/i.test(html)) return html;
+	return `<head></head>${html}`;
+}
+function injectCssIntoHtml(html, css) {
+	const headCloseIdx = html.indexOf("</head>");
+	if (headCloseIdx !== -1) return html.slice(0, headCloseIdx) + `<style>${css}</style>` + html.slice(headCloseIdx);
+	return `<head><style>${css}</style></head>${html}`;
+}
+const OpenGenerativeUIActivityRendererInner = React.memo(function OpenGenerativeUIActivityRendererInner({ content }) {
+	const initialHeight = content.initialHeight ?? 200;
+	const [autoHeight, setAutoHeight] = useState(null);
+	const sandboxFunctions = useSandboxFunctions();
+	const localApi = useMemo(() => {
+		const api = {};
+		for (const fn of sandboxFunctions) api[fn.name] = fn.handler;
+		return api;
+	}, [sandboxFunctions]);
+	const fullHtml = content.htmlComplete && content.html?.length ? content.html.join("") : void 0;
+	const css = content.cssComplete ? content.css : void 0;
+	const cssReady = !!content.cssComplete;
+	const partialHtml = !content.htmlComplete && content.html?.length ? content.html.join("") : void 0;
+	const previewBody = partialHtml ? processPartialHtml(partialHtml) : void 0;
+	const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : "";
+	const hasPreview = cssReady && !!previewBody?.trim();
+	const hasVisibleSandbox = !!fullHtml || hasPreview;
+	const containerRef = useRef(null);
+	const sandboxRef = useRef(null);
+	const previewSandboxRef = useRef(null);
+	const previewReadyRef = useRef(false);
+	const sandboxReadyRef = useRef(false);
+	const executedIndexRef = useRef(0);
+	const pendingQueueRef = useRef([]);
+	const jsFunctionsInjectedRef = useRef(false);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || fullHtml || !hasPreview || previewSandboxRef.current) return;
+		let cancelled = false;
+		import("@jetbrains/websandbox").then((mod) => {
+			if (cancelled) return;
+			const sandbox = (mod.default?.default ?? mod.default).create({}, {
+				frameContainer: container,
+				frameContent: "<head></head><body></body>",
+				allowAdditionalAttributes: ""
+			});
+			previewSandboxRef.current = sandbox;
+			sandbox.iframe.style.width = "100%";
+			sandbox.iframe.style.height = "100%";
+			sandbox.iframe.style.border = "none";
+			sandbox.iframe.style.backgroundColor = "transparent";
+			sandbox.promise.then(() => {
+				if (cancelled) return;
+				previewReadyRef.current = true;
+				sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+				const headParts = [];
+				if (css) headParts.push(`<style>${css}</style>`);
+				if (previewStyles) headParts.push(previewStyles);
+				if (headParts.length) sandbox.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
+				if (previewBody) sandbox.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
+			});
+		}).catch((err) => {
+			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [hasPreview, fullHtml]);
+	useEffect(() => {
+		if (!previewSandboxRef.current || !previewReadyRef.current) return;
+		const headParts = [];
+		if (css) headParts.push(`<style>${css}</style>`);
+		if (previewStyles) headParts.push(previewStyles);
+		if (headParts.length) previewSandboxRef.current.run(`document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`);
+		if (!previewBody) return;
+		previewSandboxRef.current.run(`document.body.innerHTML = ${JSON.stringify(previewBody)}`);
+	}, [
+		previewBody,
+		previewStyles,
+		css
+	]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || !fullHtml) return;
+		if (previewSandboxRef.current) {
+			previewSandboxRef.current.destroy();
+			previewSandboxRef.current = null;
+			previewReadyRef.current = false;
+		}
+		let cancelled = false;
+		executedIndexRef.current = 0;
+		jsFunctionsInjectedRef.current = false;
+		sandboxReadyRef.current = false;
+		pendingQueueRef.current = [];
+		const htmlContent = css ? injectCssIntoHtml(fullHtml, css) : fullHtml;
+		import("@jetbrains/websandbox").then((mod) => {
+			if (cancelled) return;
+			const sandbox = (mod.default?.default ?? mod.default).create(localApi, {
+				frameContainer: container,
+				frameContent: ensureHead(htmlContent),
+				allowAdditionalAttributes: ""
+			});
+			sandboxRef.current = sandbox;
+			sandbox.iframe.style.width = "100%";
+			sandbox.iframe.style.height = "100%";
+			sandbox.iframe.style.border = "none";
+			sandbox.iframe.style.backgroundColor = "transparent";
+			sandbox.promise.then(() => {
+				if (cancelled) return;
+				sandboxReadyRef.current = true;
+				sandbox.run(`
+            var s = document.createElement('style');
+            s.textContent = 'html, body { overflow: hidden !important; }';
+            document.head.appendChild(s);
+          `);
+				const queue = pendingQueueRef.current;
+				pendingQueueRef.current = [];
+				for (const code of queue) sandbox.run(code);
+			});
+		}).catch((err) => {
+			console.error("[OpenGenerativeUI] Failed to load sandbox module:", err);
+		});
+		return () => {
+			cancelled = true;
+			if (previewSandboxRef.current) {
+				previewSandboxRef.current.destroy();
+				previewSandboxRef.current = null;
+				previewReadyRef.current = false;
+			}
+			if (sandboxRef.current) {
+				sandboxRef.current.destroy();
+				sandboxRef.current = null;
+			}
+			sandboxReadyRef.current = false;
+			setAutoHeight(null);
+		};
+	}, [
+		fullHtml,
+		css,
+		localApi
+	]);
+	useEffect(() => {
+		if (!content.jsFunctions || jsFunctionsInjectedRef.current) return;
+		jsFunctionsInjectedRef.current = true;
+		const sandbox = sandboxRef.current;
+		if (sandboxReadyRef.current && sandbox) sandbox.run(content.jsFunctions);
+		else pendingQueueRef.current.push(content.jsFunctions);
+	}, [content.jsFunctions]);
+	useEffect(() => {
+		const expressions = content.jsExpressions;
+		if (!expressions || expressions.length === 0) return;
+		const startIndex = executedIndexRef.current;
+		if (startIndex >= expressions.length) return;
+		const newExprs = expressions.slice(startIndex);
+		executedIndexRef.current = expressions.length;
+		const sandbox = sandboxRef.current;
+		if (sandboxReadyRef.current && sandbox) (async () => {
+			for (const expr of newExprs) await sandbox.run(expr);
+		})();
+		else pendingQueueRef.current.push(...newExprs);
+	}, [content.jsExpressions?.length]);
+	const generationDone = content.generating === false;
+	useEffect(() => {
+		const sandbox = sandboxRef.current;
+		if (!generationDone || !sandbox) return;
+		let handled = false;
+		const onMessage = (e) => {
+			if (handled) return;
+			if (e.source === sandbox.iframe.contentWindow && e.data?.type === "__ck_resize") {
+				handled = true;
+				setAutoHeight(e.data.height);
+				window.removeEventListener("message", onMessage);
+			}
+		};
+		window.addEventListener("message", onMessage);
+		const measureOnce = `
+        (function() {
+          var s = document.createElement('style');
+          s.textContent = 'body { height: auto !important; min-height: 0 !important; }';
+          document.head.appendChild(s);
+          var h = document.body.scrollHeight;
+          var cs = getComputedStyle(document.body);
+          h += parseFloat(cs.marginTop) || 0;
+          h += parseFloat(cs.marginBottom) || 0;
+          s.remove();
+          parent.postMessage({ type: "__ck_resize", height: Math.ceil(h) }, "*");
+        })();
+      `;
+		if (sandboxReadyRef.current) sandbox.run(measureOnce);
+		else pendingQueueRef.current.push(measureOnce);
+		return () => {
+			window.removeEventListener("message", onMessage);
+		};
+	}, [generationDone]);
+	const height = autoHeight ?? initialHeight;
+	const isGenerating = content.generating !== false;
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		style: {
+			position: "relative",
+			width: "100%",
+			height: `${height}px`,
+			borderRadius: "8px",
+			backgroundColor: hasVisibleSandbox ? "transparent" : "#f5f5f5",
+			border: hasVisibleSandbox ? "none" : "1px solid #e0e0e0",
+			display: hasVisibleSandbox ? "block" : "flex",
+			alignItems: hasVisibleSandbox ? void 0 : "center",
+			justifyContent: hasVisibleSandbox ? void 0 : "center",
+			overflow: "hidden"
+		},
+		children: isGenerating && /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				inset: 0,
+				zIndex: 10,
+				pointerEvents: "all",
+				backgroundColor: "rgba(255, 255, 255, 0.5)",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			children: [/* @__PURE__ */ jsxs("svg", {
+				width: "48",
+				height: "48",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				style: { animation: "ck-spin 1s linear infinite" },
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "#e0e0e0",
+					strokeWidth: "3"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M12 2a10 10 0 0 1 10 10",
+					stroke: "#999",
+					strokeWidth: "3",
+					strokeLinecap: "round"
+				})]
+			}), /* @__PURE__ */ jsx("style", { children: `@keyframes ck-spin { to { transform: rotate(360deg) } }` })]
+		})
+	});
+}, (prev, next) => prev.content === next.content);
+/**
+* Frontend tool renderer for generateSandboxedUi.
+* Displays placeholder messages while the UI is being generated.
+*/
+const OpenGenerativeUIToolRenderer = function OpenGenerativeUIToolRenderer(props) {
+	const [visibleMessageIndex, setVisibleMessageIndex] = useState(0);
+	const prevMessageCountRef = useRef(0);
+	const messages = props.args.placeholderMessages;
+	useEffect(() => {
+		if (!messages || messages.length === 0) return;
+		if (messages.length !== prevMessageCountRef.current) {
+			prevMessageCountRef.current = messages.length;
+			setVisibleMessageIndex(messages.length - 1);
+		}
+		if (props.status === ToolCallStatus.Complete) return;
+		const timer = setInterval(() => {
+			setVisibleMessageIndex((i) => (i + 1) % messages.length);
+		}, 5e3);
+		return () => clearInterval(timer);
+	}, [messages?.length, props.status]);
+	if (props.status === ToolCallStatus.Complete) return null;
+	if (!messages || messages.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: "8px 12px",
+			color: "#999",
+			fontSize: "14px"
+		},
+		children: messages[visibleMessageIndex] ?? messages[0]
+	});
+};
+
+//#endregion
+//#region src/v2/a2ui/A2UIMessageRenderer.tsx
+/**
+* The container key used to wrap A2UI operations for explicit detection.
+* Must match A2UI_OPERATIONS_KEY in @ag-ui/a2ui-middleware and copilotkit.a2ui (Python).
+*/
+const A2UI_OPERATIONS_KEY = "a2ui_operations";
+let initialized = false;
+function ensureInitialized() {
+	if (!initialized) {
+		initializeDefaultCatalog();
+		injectStyles();
+		initialized = true;
+	}
+}
+function createA2UIMessageRenderer(options) {
+	const { theme, catalog, loadingComponent } = options;
+	return {
+		activityType: "a2ui-surface",
+		content: z.any(),
+		render: ({ content, agent }) => {
+			ensureInitialized();
+			const [operations, setOperations] = useState([]);
+			const { copilotkit } = useCopilotKit();
+			const lastContentRef = useRef(null);
+			useEffect(() => {
+				if (content === lastContentRef.current) return;
+				lastContentRef.current = content;
+				const incoming = content?.[A2UI_OPERATIONS_KEY];
+				if (!content || !Array.isArray(incoming)) {
+					setOperations([]);
+					return;
+				}
+				setOperations(incoming);
+			}, [content]);
+			const groupedOperations = useMemo(() => {
+				const groups = /* @__PURE__ */ new Map();
+				for (const operation of operations) {
+					const surfaceId = getOperationSurfaceId(operation) ?? DEFAULT_SURFACE_ID;
+					if (!groups.has(surfaceId)) groups.set(surfaceId, []);
+					groups.get(surfaceId).push(operation);
+				}
+				return groups;
+			}, [operations]);
+			if (!groupedOperations.size) return /* @__PURE__ */ jsx(loadingComponent ?? DefaultA2UILoading, {});
+			return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
+		className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
+		children: /* @__PURE__ */ jsxs(A2UIProvider, {
+			onAction: useCallback(async (message) => {
+				if (!agent) return;
+				message.userAction;
+				try {
+					copilotkit.setProperties({
+						...copilotkit.properties ?? {},
+						a2uiAction: message
+					});
+					await copilotkit.runAgent({ agent });
+				} finally {
+					if (copilotkit.properties) {
+						const { a2uiAction, ...rest } = copilotkit.properties;
+						copilotkit.setProperties(rest);
+					}
+				}
+			}, [agent, copilotkit]),
+			theme,
+			catalog,
+			children: [/* @__PURE__ */ jsx(SurfaceMessageProcessor, {
+				surfaceId,
+				operations
+			}), /* @__PURE__ */ 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 = useA2UIError();
+	if (error) return /* @__PURE__ */ 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__ */ jsx(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 } = useA2UIActions();
+	const lastHashRef = useRef("");
+	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__ */ 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__ */ jsxs("div", {
+				className: "cpk:flex cpk:items-center cpk:gap-2",
+				children: [/* @__PURE__ */ 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__ */ jsx("span", {
+					className: "cpk:text-xs cpk:font-medium cpk:text-gray-400",
+					children: "Generating UI..."
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "cpk:flex cpk:flex-col cpk:gap-2",
+				children: [
+					.8,
+					.6,
+					.4
+				].map((width, i) => /* @__PURE__ */ 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__ */ 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;
+}
+
+//#endregion
+//#region src/v2/types/defineToolCallRenderer.ts
+function defineToolCallRenderer(def) {
+	const argsSchema = def.name === "*" && !def.args ? z.any() : def.args;
+	return {
+		name: def.name,
+		args: argsSchema,
+		render: def.render,
+		...def.agentId ? { agentId: def.agentId } : {}
+	};
+}
+
+//#endregion
+//#region src/v2/a2ui/A2UIToolCallRenderer.tsx
+/**
+* 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 = 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__ */ jsxs("div", {
+		style: {
+			margin: "12px 0",
+			maxWidth: 320
+		},
+		children: [
+			/* @__PURE__ */ 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__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 8,
+							marginBottom: 12
+						},
+						children: [/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								gap: 4
+							},
+							children: [
+								/* @__PURE__ */ jsx(Dot, {}),
+								/* @__PURE__ */ jsx(Dot, {}),
+								/* @__PURE__ */ jsx(Dot, {})
+							]
+						}), /* @__PURE__ */ jsx(Bar, {
+							w: 64,
+							h: 6,
+							bg: "#e4e4e7",
+							opacity: phase >= 1 ? 1 : .4,
+							transition: "opacity 0.5s"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "grid",
+							gap: 7
+						},
+						children: [
+							/* @__PURE__ */ jsxs(Row, {
+								show: phase >= 0,
+								children: [/* @__PURE__ */ jsx(Bar, {
+									w: 36,
+									h: 7,
+									bg: "rgba(147,197,253,0.7)",
+									anim: 0
+								}), /* @__PURE__ */ jsx(Bar, {
+									w: 80,
+									h: 7,
+									bg: "rgba(219,234,254,0.8)",
+									anim: .2
+								})]
+							}),
+							/* @__PURE__ */ jsxs(Row, {
+								show: phase >= 0,
+								delay: .1,
+								children: [
+									/* @__PURE__ */ jsx(Spacer, {}),
+									/* @__PURE__ */ jsx(Dot, {}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 100,
+										h: 7,
+										bg: "rgba(24,24,27,0.2)",
+										anim: .3
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(Row, {
+								show: phase >= 1,
+								delay: .15,
+								children: [
+									/* @__PURE__ */ jsx(Spacer, {}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 48,
+										h: 7,
+										bg: "rgba(24,24,27,0.15)",
+										anim: .1
+									}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 40,
+										h: 7,
+										bg: "rgba(153,246,228,0.6)",
+										anim: .5
+									}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 56,
+										h: 7,
+										bg: "rgba(147,197,253,0.6)",
+										anim: .3
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(Row, {
+								show: phase >= 1,
+								delay: .2,
+								children: [
+									/* @__PURE__ */ jsx(Spacer, {}),
+									/* @__PURE__ */ jsx(Dot, {}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 60,
+										h: 7,
+										bg: "rgba(24,24,27,0.15)",
+										anim: .4
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(Row, {
+								show: phase >= 2,
+								delay: .25,
+								children: [
+									/* @__PURE__ */ jsx(Bar, {
+										w: 40,
+										h: 7,
+										bg: "rgba(153,246,228,0.5)",
+										anim: .2
+									}),
+									/* @__PURE__ */ jsx(Dot, {}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 48,
+										h: 7,
+										bg: "rgba(24,24,27,0.15)",
+										anim: .6
+									}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 64,
+										h: 7,
+										bg: "rgba(147,197,253,0.5)",
+										anim: .1
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(Row, {
+								show: phase >= 2,
+								delay: .3,
+								children: [/* @__PURE__ */ jsx(Bar, {
+									w: 36,
+									h: 7,
+									bg: "rgba(147,197,253,0.6)",
+									anim: .5
+								}), /* @__PURE__ */ jsx(Bar, {
+									w: 36,
+									h: 7,
+									bg: "rgba(24,24,27,0.12)",
+									anim: .7
+								})]
+							}),
+							/* @__PURE__ */ jsxs(Row, {
+								show: phase >= 3,
+								delay: .35,
+								children: [
+									/* @__PURE__ */ jsx(Dot, {}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 44,
+										h: 7,
+										bg: "rgba(24,24,27,0.18)",
+										anim: .3
+									}),
+									/* @__PURE__ */ jsx(Dot, {}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 56,
+										h: 7,
+										bg: "rgba(153,246,228,0.5)",
+										anim: .8
+									}),
+									/* @__PURE__ */ jsx(Bar, {
+										w: 48,
+										h: 7,
+										bg: "rgba(147,197,253,0.5)",
+										anim: .4
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ 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__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					gap: 8,
+					marginTop: 8
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 12,
+						color: "#a1a1aa",
+						letterSpacing: "0.025em"
+					},
+					children: "Building interface"
+				}), tokens > 0 && /* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: 11,
+						color: "#d4d4d8",
+						fontVariantNumeric: "tabular-nums"
+					},
+					children: [
+						"~",
+						tokens.toLocaleString(),
+						" tokens"
+					]
+				})]
+			}),
+			/* @__PURE__ */ 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__ */ jsx("div", { style: {
+		width: 7,
+		height: 7,
+		borderRadius: "50%",
+		backgroundColor: "#d4d4d8",
+		flexShrink: 0
+	} });
+}
+function Spacer() {
+	return /* @__PURE__ */ jsx("div", { style: { width: 12 } });
+}
+function Bar({ w, h, bg, anim, opacity, transition }) {
+	return /* @__PURE__ */ 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__ */ jsx("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 6,
+			opacity: show ? 1 : 0,
+			transition: `opacity 0.4s ${delay}s`
+		},
+		children
+	});
 }
-function stringifyOperations(ops) {
-	try {
-		return JSON.stringify(ops);
-	} catch (error) {
-		return null;
-	}
+/**
+* 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();
+	useEffect(() => {
+		const renderer = defineToolCallRenderer({
+			name: RENDER_A2UI_TOOL_NAME,
+			args: z.any(),
+			render: ({ status, args: parameters }) => {
+				if (status === "complete") return /* @__PURE__ */ jsx(Fragment$1, {});
+				const params = parameters;
+				const items = params?.items;
+				if (Array.isArray(items) && items.length > 0) return /* @__PURE__ */ jsx(Fragment$1, {});
+				const components = params?.components;
+				if (Array.isArray(components) && components.length > 2) return /* @__PURE__ */ jsx(Fragment$1, {});
+				return /* @__PURE__ */ 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 = useMemo(() => {
+		if (typeof value === "string") return value;
+		return JSON.stringify(value);
+	}, [value]);
+	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: buildCatalogContextValue(catalog)
+	});
+	const { copilotkit } = useCopilotKit();
+	const schemaValue = useMemo(() => includeSchema !== false ? JSON.stringify(extractCatalogComponentSchemas(catalog)) : null, [catalog, includeSchema]);
+	useLayoutEffect(() => {
+		if (!copilotkit || !schemaValue) return;
+		const ids = [];
+		ids.push(copilotkit.addContext({
+			description: 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: A2UI_DEFAULT_GENERATION_GUIDELINES
+		}));
+		ids.push(copilotkit.addContext({
+			description: "A2UI design guidelines — visual design rules, component hierarchy tips, and action handler patterns.",
+			value: A2UI_DEFAULT_DESIGN_GUIDELINES
+		}));
+		return () => {
+			for (const id of ids) copilotkit.removeContext(id);
+		};
+	}, [copilotkit, schemaValue]);
+	return null;
 }
 
 //#endregion
@@ -2104,6 +3013,17 @@ var CopilotKitCoreReact = class extends 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 = createContext({
 	copilotkit: null,
 	executingToolCallIds: /* @__PURE__ */ new Set()
@@ -2119,9 +3039,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] = useState(false);
 	const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = useState(false);
+	const [runtimeOpenGenUIEnabled, setRuntimeOpenGenUIEnabled] = useState(false);
+	const openGenUIActive = runtimeOpenGenUIEnabled || !!openGenerativeUI;
 	const [runtimeLicenseStatus, setRuntimeLicenseStatus] = useState(void 0);
 	useEffect(() => {
 		if (typeof window === "undefined") return;
@@ -2147,9 +3069,22 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 			content: MCPAppsActivityContentSchema,
 			render: MCPAppsActivityRenderer
 		}];
-		if (runtimeA2UIEnabled) renderers.unshift(createA2UIMessageRenderer({ theme: a2ui?.theme ?? viewerTheme }));
+		if (openGenUIActive) renderers.push({
+			activityType: OpenGenerativeUIActivityType,
+			content: OpenGenerativeUIContentSchema,
+			render: OpenGenerativeUIActivityRenderer
+		});
+		if (runtimeA2UIEnabled) renderers.unshift(createA2UIMessageRenderer({
+			theme: a2ui?.theme ?? viewerTheme,
+			catalog: a2ui?.catalog,
+			loadingComponent: a2ui?.loadingComponent
+		}));
 		return renderers;
-	}, [runtimeA2UIEnabled, a2ui]);
+	}, [
+		runtimeA2UIEnabled,
+		openGenUIActive,
+		a2ui
+	]);
 	const allActivityRenderers = useMemo(() => {
 		return [...renderActivityMessagesList, ...builtInActivityRenderers];
 	}, [renderActivityMessagesList, builtInActivityRenderers]);
@@ -2175,6 +3110,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 = useMemo(() => {
 		const processedTools = [];
 		const processedRenderToolCalls = [];
@@ -2205,15 +3141,31 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 			renderToolCalls: processedRenderToolCalls
 		};
 	}, [humanInTheLoopList]);
+	const builtInFrontendTools = 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 = useMemo(() => {
 		const tools = [];
 		tools.push(...frontendToolsList);
+		tools.push(...builtInFrontendTools);
 		tools.push(...processedHumanInTheLoopTools.tools);
 		return tools;
-	}, [frontendToolsList, processedHumanInTheLoopTools]);
+	}, [
+		frontendToolsList,
+		builtInFrontendTools,
+		processedHumanInTheLoopTools
+	]);
 	const allRenderToolCalls = useMemo(() => {
 		const combined = [...renderToolCallsList];
-		frontendToolsList.forEach((tool) => {
+		[...frontendToolsList, ...builtInFrontendTools].forEach((tool) => {
 			if (tool.render) {
 				const args = tool.parameters || (tool.name === "*" ? z.any() : void 0);
 				if (args) combined.push({
@@ -2228,25 +3180,31 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	}, [
 		renderToolCallsList,
 		frontendToolsList,
+		builtInFrontendTools,
 		processedHumanInTheLoopTools
 	]);
 	const copilotkitRef = 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;
 	useEffect(() => {
+		setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
 		const subscription = copilotkit.subscribe({ onRuntimeConnectionStatusChanged: () => {
 			setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
+			setRuntimeOpenGenUIEnabled(copilotkit.openGenerativeUIEnabled);
 			setRuntimeLicenseStatus(copilotkit.licenseStatus);
 		} });
 		return () => {
@@ -2305,7 +3263,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	}, [copilotkit]);
 	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);
@@ -2339,23 +3297,75 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, p
 	useEffect(() => {
 		didMountRef.current = true;
 	}, []);
+	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;
+	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 = useMemo(() => {
+		if (sandboxFunctionsList.length === 0) return null;
+		return JSON.stringify(sandboxFunctionsList.map((fn) => ({
+			name: fn.name,
+			description: fn.description,
+			parameters: schemaToJsonSchema(fn.parameters, { zodToJsonSchema })
+		})));
+	}, [sandboxFunctionsList]);
+	useLayoutEffect(() => {
+		if (!copilotkit || !sandboxFunctionsDescriptors || !openGenUIActive) return;
+		const id = copilotkit.addContext({
+			description: "Sandbox functions available in generated sandboxed UI code. Call via: await Websandbox.connection.remote.<functionName>(args)",
+			value: sandboxFunctionsDescriptors
+		});
+		return () => {
+			copilotkit.removeContext(id);
+		};
+	}, [
+		copilotkit,
+		sandboxFunctionsDescriptors,
+		openGenUIActive
+	]);
 	const contextValue = useMemo(() => ({
 		copilotkit,
 		executingToolCallIds
 	}), [copilotkit, executingToolCallIds]);
 	const licenseContextValue = useMemo(() => createLicenseContextValue(null), []);
-	return /* @__PURE__ */ jsx(CopilotKitContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsxs(LicenseContext.Provider, {
-			value: licenseContextValue,
-			children: [
-				children,
-				shouldRenderInspector ? /* @__PURE__ */ jsx(CopilotKitInspector, { core: copilotkit }) : null,
-				runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "no_license" }),
-				runtimeLicenseStatus === "expired" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expired" }),
-				runtimeLicenseStatus === "invalid" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "invalid" }),
-				runtimeLicenseStatus === "expiring" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expiring" })
-			]
+	return /* @__PURE__ */ jsx(SandboxFunctionsContext.Provider, {
+		value: sandboxFunctionsList,
+		children: /* @__PURE__ */ jsx(CopilotKitContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsxs(LicenseContext.Provider, {
+				value: licenseContextValue,
+				children: [
+					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UIBuiltInToolCallRenderer, {}),
+					runtimeA2UIEnabled && /* @__PURE__ */ jsx(A2UICatalogContext, {
+						catalog: a2ui?.catalog,
+						includeSchema: a2ui?.includeSchema
+					}),
+					children,
+					shouldRenderInspector ? /* @__PURE__ */ jsx(CopilotKitInspector, {
+						core: copilotkit,
+						defaultAnchor: inspectorDefaultAnchor
+					}) : null,
+					runtimeLicenseStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "no_license" }),
+					runtimeLicenseStatus === "expired" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expired" }),
+					runtimeLicenseStatus === "invalid" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "invalid" }),
+					runtimeLicenseStatus === "expiring" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expiring" })
+				]
+			})
 		})
 	});
 };
@@ -2370,75 +3380,258 @@ const useCopilotKit = () => {
 		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.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
-	const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
-	const toolName = toolCall.function.name;
-	if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		args,
-		status: ToolCallStatus.Complete,
-		result: toolMessage.content
-	});
-	else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		args,
-		status: ToolCallStatus.Executing,
-		result: void 0
-	});
-	else return /* @__PURE__ */ jsx(RenderComponent, {
-		name: toolName,
-		args,
-		status: ToolCallStatus.InProgress,
-		result: void 0
-	});
-}, (prevProps, nextProps) => {
-	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
-	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
-	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
-	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
-	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
-	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
-	return true;
-});
-/**
-* 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 ?? DEFAULT_AGENT_ID;
-	const renderToolCalls = useSyncExternalStore((callback) => {
-		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
-	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
-	return useCallback(({ toolCall, toolMessage }) => {
-		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
-		const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
-		if (!renderConfig) return null;
-		const RenderComponent = renderConfig.render;
-		return /* @__PURE__ */ jsx(ToolCallRenderer, {
-			toolCall,
-			toolMessage,
-			RenderComponent,
-			isExecuting: executingToolCallIds.has(toolCall.id)
-		}, toolCall.id);
+	}, []);
+	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.memo(function ToolCallRenderer({ toolCall, toolMessage, RenderComponent, isExecuting }) {
+	const args = useMemo(() => partialJSONParse(toolCall.function.arguments), [toolCall.function.arguments]);
+	const toolName = toolCall.function.name;
+	if (toolMessage) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		args,
+		status: ToolCallStatus.Complete,
+		result: toolMessage.content
+	});
+	else if (isExecuting) return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		args,
+		status: ToolCallStatus.Executing,
+		result: void 0
+	});
+	else return /* @__PURE__ */ jsx(RenderComponent, {
+		name: toolName,
+		args,
+		status: ToolCallStatus.InProgress,
+		result: void 0
+	});
+}, (prevProps, nextProps) => {
+	if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
+	if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
+	if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
+	if (prevProps.toolMessage?.content !== nextProps.toolMessage?.content) return false;
+	if (prevProps.isExecuting !== nextProps.isExecuting) return false;
+	if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
+	return true;
+});
+/**
+* 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 ?? DEFAULT_AGENT_ID;
+	const renderToolCalls = useSyncExternalStore((callback) => {
+		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
+	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
+	return useCallback(({ toolCall, toolMessage }) => {
+		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
+		const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+		if (!renderConfig) return null;
+		const RenderComponent = renderConfig.render;
+		return /* @__PURE__ */ jsx(ToolCallRenderer, {
+			toolCall,
+			toolMessage,
+			RenderComponent,
+			isExecuting: executingToolCallIds.has(toolCall.id)
+		}, toolCall.id);
+	}, [
+		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 HttpAgent) clone.headers = { ...headers };
+	return clone;
+}
+/**
+* Module-level WeakMap: registryAgent → (threadId → clone).
+* Shared across all useAgent() calls so that every component using the same
+* (agentId, threadId) pair receives the same agent instance. Using WeakMap
+* ensures the clone map is garbage-collected when the registry agent is
+* replaced (e.g. after reconnect or hot-reload).
+*/
+const globalThreadCloneMap = /* @__PURE__ */ new WeakMap();
+/**
+* Look up an existing per-thread clone without creating one.
+* Returns undefined when no clone has been created yet for this pair.
+*/
+function getThreadClone(registryAgent, threadId) {
+	if (!registryAgent || !threadId) return void 0;
+	return globalThreadCloneMap.get(registryAgent)?.get(threadId);
+}
+function getOrCreateThreadClone(existing, threadId, headers) {
+	let byThread = globalThreadCloneMap.get(existing);
+	if (!byThread) {
+		byThread = /* @__PURE__ */ new Map();
+		globalThreadCloneMap.set(existing, byThread);
+	}
+	const cached = byThread.get(threadId);
+	if (cached) return cached;
+	const clone = cloneForThread(existing, threadId, headers);
+	byThread.set(threadId, clone);
+	return clone;
+}
+function useAgent({ agentId, threadId, updates, throttleMs } = {}) {
+	agentId ??= DEFAULT_AGENT_ID;
+	const { copilotkit } = useCopilotKit();
+	const providerThrottleMs = copilotkit.defaultThrottleMs;
+	const chatConfig = useCopilotChatConfiguration();
+	threadId ??= chatConfig?.threadId;
+	const effectiveThrottleMs = 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] = useReducer((x) => x + 1, 0);
+	const updateFlags = useMemo(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
+	const provisionalAgentCache = useRef(/* @__PURE__ */ new Map());
+	const agent = useMemo(() => {
+		const cacheKey = threadId ? `${agentId}:${threadId}` : agentId;
+		const existing = copilotkit.getAgent(agentId);
+		if (existing) {
+			provisionalAgentCache.current.delete(cacheKey);
+			provisionalAgentCache.current.delete(agentId);
+			if (!threadId) return existing;
+			return getOrCreateThreadClone(existing, threadId, copilotkit.headers);
+		}
+		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
+		const status = copilotkit.runtimeConnectionStatus;
+		if (isRuntimeConfigured && (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
+			const cached = provisionalAgentCache.current.get(cacheKey);
+			if (cached) {
+				cached.headers = { ...copilotkit.headers };
+				return cached;
+			}
+			const provisional = new ProxiedCopilotRuntimeAgent({
+				runtimeUrl: copilotkit.runtimeUrl,
+				agentId,
+				transport: copilotkit.runtimeTransport,
+				runtimeMode: "pending"
+			});
+			provisional.headers = { ...copilotkit.headers };
+			if (threadId) provisional.threadId = threadId;
+			provisionalAgentCache.current.set(cacheKey, provisional);
+			return provisional;
+		}
+		if (isRuntimeConfigured && status === CopilotKitCoreRuntimeConnectionStatus.Error) {
+			const cached = provisionalAgentCache.current.get(cacheKey);
+			if (cached) {
+				cached.headers = { ...copilotkit.headers };
+				return cached;
+			}
+			const provisional = new ProxiedCopilotRuntimeAgent({
+				runtimeUrl: copilotkit.runtimeUrl,
+				agentId,
+				transport: copilotkit.runtimeTransport,
+				runtimeMode: "pending"
+			});
+			provisional.headers = { ...copilotkit.headers };
+			if (threadId) provisional.threadId = threadId;
+			provisionalAgentCache.current.set(cacheKey, provisional);
+			return provisional;
+		}
+		const knownAgents = Object.keys(copilotkit.agents ?? {});
+		const runtimePart = isRuntimeConfigured ? `runtimeUrl=${copilotkit.runtimeUrl}` : "no runtimeUrl";
+		throw new Error(`useAgent: Agent '${agentId}' not found after runtime sync (${runtimePart}). ` + (knownAgents.length ? `Known agents: [${knownAgents.join(", ")}]` : "No agents registered.") + " Verify your runtime /info and/or agents__unsafe_dev_only.");
+	}, [
+		agentId,
+		threadId,
+		copilotkit.agents,
+		copilotkit.runtimeConnectionStatus,
+		copilotkit.runtimeUrl,
+		copilotkit.runtimeTransport,
+		JSON.stringify(copilotkit.headers)
+	]);
+	useEffect(() => {
+		if (updateFlags.length === 0) return;
+		const handlers = {};
+		let timerId = null;
+		let active = true;
+		if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {
+			const ms = effectiveThrottleMs;
+			if (ms > 0) {
+				let throttleActive = false;
+				let pending = false;
+				const throttledNotify = () => {
+					if (!active) return;
+					if (!throttleActive) {
+						throttleActive = true;
+						pending = false;
+						forceUpdate();
+						timerId = setTimeout(function trailingEdge() {
+							timerId = null;
+							if (active && pending) {
+								pending = false;
+								forceUpdate();
+								timerId = setTimeout(trailingEdge, ms);
+							} else throttleActive = false;
+						}, ms);
+					} else pending = true;
+				};
+				handlers.onMessagesChanged = throttledNotify;
+			} else handlers.onMessagesChanged = forceUpdate;
+		}
+		if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) handlers.onStateChanged = forceUpdate;
+		if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {
+			handlers.onRunInitialized = forceUpdate;
+			handlers.onRunFinalized = forceUpdate;
+			handlers.onRunFailed = forceUpdate;
+		}
+		const subscription = agent.subscribe(handlers);
+		return () => {
+			active = false;
+			if (timerId !== null) clearTimeout(timerId);
+			subscription.unsubscribe();
+		};
 	}, [
-		renderToolCalls,
-		executingToolCallIds,
-		agentId
+		agent,
+		forceUpdate,
+		effectiveThrottleMs,
+		updateFlags
 	]);
+	useEffect(() => {
+		if (agent instanceof HttpAgent) agent.headers = { ...copilotkit.headers };
+	}, [agent, JSON.stringify(copilotkit.headers)]);
+	return { agent };
 }
 
 //#endregion
@@ -2458,7 +3651,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);
@@ -2490,7 +3684,8 @@ function useRenderCustomMessages() {
 //#region src/v2/hooks/use-render-activity-message.tsx
 function useRenderActivityMessage() {
 	const { copilotkit } = useCopilotKit();
-	const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
+	const config = useCopilotChatConfiguration();
+	const agentId = config?.agentId ?? DEFAULT_AGENT_ID;
 	const renderers = copilotkit.renderActivityMessages;
 	const findRenderer = useCallback((activityType) => {
 		if (!renderers.length) return null;
@@ -2506,7 +3701,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__ */ jsx(Component, {
 			activityType: message.activityType,
 			content: parseResult.data,
@@ -2515,6 +3711,7 @@ function useRenderActivityMessage() {
 		}, message.id);
 	}, [
 		agentId,
+		config?.threadId,
 		copilotkit,
 		findRenderer
 	]);
@@ -2540,7 +3737,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,
@@ -2625,18 +3822,6 @@ function useComponent(config, deps) {
 	}, deps);
 }
 
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-function defineToolCallRenderer(def) {
-	const argsSchema = def.name === "*" && !def.args ? z.any() : def.args;
-	return {
-		name: def.name,
-		args: argsSchema,
-		render: def.render,
-		...def.agentId ? { agentId: def.agentId } : {}
-	};
-}
-
 //#endregion
 //#region src/v2/hooks/use-render-tool.tsx
 const EMPTY_DEPS = [];
@@ -2874,206 +4059,95 @@ function DefaultToolCallRenderer({ name, parameters, status, result }) {
 				})] }), result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 					style: {
 						fontSize: "10px",
-						textTransform: "uppercase",
-						letterSpacing: "0.05em",
-						color: "#71717a"
-					},
-					children: "Result"
-				}), /* @__PURE__ */ jsx("pre", {
-					style: {
-						marginTop: "6px",
-						maxHeight: "200px",
-						overflow: "auto",
-						borderRadius: "6px",
-						backgroundColor: "#f4f4f5",
-						padding: "10px",
-						fontSize: "11px",
-						lineHeight: 1.6,
-						color: "#27272a",
-						whiteSpace: "pre-wrap",
-						wordBreak: "break-word"
-					},
-					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
-				})] })]
-			})]
-		})
-	});
-}
-
-//#endregion
-//#region src/v2/hooks/use-human-in-the-loop.tsx
-function useHumanInTheLoop(tool, deps) {
-	const { copilotkit } = useCopilotKit();
-	const resolvePromiseRef = useRef(null);
-	const respond = useCallback(async (result) => {
-		if (resolvePromiseRef.current) {
-			resolvePromiseRef.current(result);
-			resolvePromiseRef.current = null;
-		}
-	}, []);
-	const handler = useCallback(async () => {
-		return new Promise((resolve) => {
-			resolvePromiseRef.current = resolve;
-		});
-	}, []);
-	const RenderComponent = useCallback((props) => {
-		const ToolComponent = tool.render;
-		if (props.status === "inProgress") {
-			const enhancedProps = {
-				...props,
-				name: tool.name,
-				description: tool.description || "",
-				respond: void 0
-			};
-			return React.createElement(ToolComponent, enhancedProps);
-		} else if (props.status === "executing") {
-			const enhancedProps = {
-				...props,
-				name: tool.name,
-				description: tool.description || "",
-				respond
-			};
-			return React.createElement(ToolComponent, enhancedProps);
-		} else if (props.status === "complete") {
-			const enhancedProps = {
-				...props,
-				name: tool.name,
-				description: tool.description || "",
-				respond: void 0
-			};
-			return React.createElement(ToolComponent, enhancedProps);
-		}
-		return React.createElement(ToolComponent, props);
-	}, [
-		tool.render,
-		tool.name,
-		tool.description,
-		respond
-	]);
-	useFrontendTool({
-		...tool,
-		handler,
-		render: RenderComponent
-	}, deps);
-	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 ??= DEFAULT_AGENT_ID;
-	const { copilotkit } = useCopilotKit();
-	const [, forceUpdate] = useReducer((x) => x + 1, 0);
-	const updateFlags = useMemo(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
-	const provisionalAgentCache = useRef(/* @__PURE__ */ new Map());
-	const agent = useMemo(() => {
-		const existing = copilotkit.getAgent(agentId);
-		if (existing) {
-			provisionalAgentCache.current.delete(agentId);
-			return existing;
-		}
-		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
-		const status = copilotkit.runtimeConnectionStatus;
-		if (isRuntimeConfigured && (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
-			const cached = provisionalAgentCache.current.get(agentId);
-			if (cached) {
-				cached.headers = { ...copilotkit.headers };
-				return cached;
-			}
-			const provisional = new ProxiedCopilotRuntimeAgent({
-				runtimeUrl: copilotkit.runtimeUrl,
-				agentId,
-				transport: copilotkit.runtimeTransport,
-				runtimeMode: "pending"
-			});
-			provisional.headers = { ...copilotkit.headers };
-			provisionalAgentCache.current.set(agentId, provisional);
-			return provisional;
-		}
-		if (isRuntimeConfigured && status === CopilotKitCoreRuntimeConnectionStatus.Error) {
-			const provisional = new 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)
-	]);
-	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 };
+						textTransform: "uppercase",
+						letterSpacing: "0.05em",
+						color: "#71717a"
+					},
+					children: "Result"
+				}), /* @__PURE__ */ jsx("pre", {
+					style: {
+						marginTop: "6px",
+						maxHeight: "200px",
+						overflow: "auto",
+						borderRadius: "6px",
+						backgroundColor: "#f4f4f5",
+						padding: "10px",
+						fontSize: "11px",
+						lineHeight: 1.6,
+						color: "#27272a",
+						whiteSpace: "pre-wrap",
+						wordBreak: "break-word"
+					},
+					children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
+				})] })]
+			})]
+		})
+	});
 }
 
 //#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 = useMemo(() => {
-		if (typeof value === "string") return value;
-		return JSON.stringify(value);
-	}, [value]);
-	useLayoutEffect(() => {
-		if (!copilotkit) return;
-		const id = copilotkit.addContext({
-			description,
-			value: stringValue
+	const resolvePromiseRef = useRef(null);
+	const respond = useCallback(async (result) => {
+		if (resolvePromiseRef.current) {
+			resolvePromiseRef.current(result);
+			resolvePromiseRef.current = null;
+		}
+	}, []);
+	const handler = useCallback(async () => {
+		return new Promise((resolve) => {
+			resolvePromiseRef.current = resolve;
 		});
+	}, []);
+	const RenderComponent = useCallback((props) => {
+		const ToolComponent = tool.render;
+		if (props.status === "inProgress") {
+			const enhancedProps = {
+				...props,
+				name: tool.name,
+				description: tool.description || "",
+				respond: void 0
+			};
+			return React.createElement(ToolComponent, enhancedProps);
+		} else if (props.status === "executing") {
+			const enhancedProps = {
+				...props,
+				name: tool.name,
+				description: tool.description || "",
+				respond
+			};
+			return React.createElement(ToolComponent, enhancedProps);
+		} else if (props.status === "complete") {
+			const enhancedProps = {
+				...props,
+				name: tool.name,
+				description: tool.description || "",
+				respond: void 0
+			};
+			return React.createElement(ToolComponent, enhancedProps);
+		}
+		return React.createElement(ToolComponent, props);
+	}, [
+		tool.render,
+		tool.name,
+		tool.description,
+		respond
+	]);
+	useFrontendTool({
+		...tool,
+		handler,
+		render: RenderComponent
+	}, deps);
+	useEffect(() => {
 		return () => {
-			copilotkit.removeContext(id);
+			copilotkit.removeHookRenderToolCall(tool.name, tool.agentId);
 		};
 	}, [
-		description,
-		stringValue,
-		copilotkit
+		copilotkit,
+		tool.name,
+		tool.agentId
 	]);
 }
 
@@ -3486,11 +4560,19 @@ function useThreadStoreSelector(store, selector) {
 function useThreads$1({ agentId, includeArchived, limit }) {
 	const { copilotkit } = useCopilotKit();
 	const [store] = useState(() => ɵcreateThreadStore({ fetch: globalThis.fetch }));
-	const threads = useThreadStoreSelector(store, ɵselectThreads);
+	const coreThreads = useThreadStoreSelector(store, ɵselectThreads);
+	const threads = useMemo(() => coreThreads.map(({ id, agentId, name, archived, createdAt, updatedAt }) => ({
+		id,
+		agentId,
+		name,
+		archived,
+		createdAt,
+		updatedAt
+	})), [coreThreads]);
 	const storeIsLoading = useThreadStoreSelector(store, ɵselectThreadsIsLoading);
 	const storeError = useThreadStoreSelector(store, ɵselectThreadsError);
-	const hasNextPage = useThreadStoreSelector(store, ɵselectHasNextPage);
-	const isFetchingNextPage = useThreadStoreSelector(store, ɵselectIsFetchingNextPage);
+	const hasMoreThreads = useThreadStoreSelector(store, ɵselectHasNextPage);
+	const isFetchingMoreThreads = useThreadStoreSelector(store, ɵselectIsFetchingNextPage);
 	const headersKey = useMemo(() => {
 		return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 	}, [copilotkit.headers]);
@@ -3533,15 +4615,173 @@ function useThreads$1({ agentId, includeArchived, limit }) {
 		threads,
 		isLoading,
 		error,
-		hasNextPage,
-		isFetchingNextPage,
-		fetchNextPage: useCallback(() => store.fetchNextPage(), [store]),
+		hasMoreThreads,
+		isFetchingMoreThreads,
+		fetchMoreThreads: 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] = useState([]);
+	const [dragOver, setDragOver] = useState(false);
+	const fileInputRef = useRef(null);
+	const containerRef = useRef(null);
+	const configRef = useRef(config);
+	configRef.current = config;
+	const attachmentsRef = useRef([]);
+	attachmentsRef.current = attachments;
+	const processFiles = useCallback(async (files) => {
+		const cfg = configRef.current;
+		const accept = cfg?.accept ?? "*/*";
+		const maxSize = cfg?.maxSize ?? 20 * 1024 * 1024;
+		const rejectedFiles = files.filter((file) => !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) => matchesAcceptFilter(file, accept));
+		for (const file of validFiles) {
+			if (exceedsMaxSize(file, maxSize)) {
+				cfg?.onUploadFailed?.({
+					reason: "file-too-large",
+					file,
+					message: `File "${file.name}" exceeds the maximum size of ${formatFileSize(maxSize)}`
+				});
+				continue;
+			}
+			const modality = getModalityFromMimeType(file.type);
+			const placeholderId = 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 readFileAsBase64(file),
+					mimeType: file.type
+				};
+				let thumbnail;
+				if (modality === "video") thumbnail = await 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 = 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 = useCallback((e) => {
+		if (!configRef.current?.enabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(true);
+	}, []);
+	const handleDragLeave = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragOver(false);
+	}, []);
+	const handleDrop = 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]);
+	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 && 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: useCallback((id) => {
+			setAttachments((prev) => prev.filter((a) => a.id !== id));
+		}, []),
+		consumeAttachments: 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 = [] }) {
@@ -3658,9 +4898,19 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp,
 	_CopilotChatAssistantMessage.CopyButton = ({ className, title, onClick, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		const [copied, setCopied] = useState(false);
+		const timerRef = useRef(null);
+		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__ */ jsx(ToolbarButton, {
@@ -3718,6 +4968,79 @@ CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantM
 CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
+//#endregion
+//#region src/v2/components/chat/CopilotChatAttachmentRenderer.tsx
+const ImageAttachment = memo(function ImageAttachment({ src, className }) {
+	const [error, setError] = useState(false);
+	if (error) return /* @__PURE__ */ 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__ */ jsx("span", { children: "Failed to load image" })
+	});
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt: "Image attachment",
+		className: cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className),
+		onError: () => setError(true)
+	});
+});
+const AudioAttachment = memo(function AudioAttachment({ src, filename, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("cpk:flex cpk:flex-col cpk:gap-1", className),
+		children: [/* @__PURE__ */ jsx("audio", {
+			src,
+			controls: true,
+			preload: "metadata",
+			className: "cpk:max-w-[300px] cpk:w-full cpk:h-10"
+		}), filename && /* @__PURE__ */ jsx("span", {
+			className: "cpk:text-xs cpk:text-muted-foreground cpk:truncate cpk:max-w-[300px]",
+			children: filename
+		})]
+	});
+});
+const VideoAttachment = memo(function VideoAttachment({ src, className }) {
+	return /* @__PURE__ */ jsx("video", {
+		src,
+		controls: true,
+		preload: "metadata",
+		className: cn("cpk:max-w-[400px] cpk:w-full cpk:rounded-lg", className)
+	});
+});
+const DocumentAttachment = memo(function DocumentAttachment({ source, filename, className }) {
+	return /* @__PURE__ */ 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__ */ jsx("span", {
+			className: "cpk:text-xs cpk:font-bold cpk:uppercase",
+			children: getDocumentIcon(source.mimeType ?? "")
+		}), /* @__PURE__ */ 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 = getSourceUrl(source);
+	switch (type) {
+		case "image": return /* @__PURE__ */ jsx(ImageAttachment, {
+			src,
+			className
+		});
+		case "audio": return /* @__PURE__ */ jsx(AudioAttachment, {
+			src,
+			filename,
+			className
+		});
+		case "video": return /* @__PURE__ */ jsx(VideoAttachment, {
+			src,
+			className
+		});
+		case "document": return /* @__PURE__ */ jsx(DocumentAttachment, {
+			source,
+			filename,
+			className
+		});
+	}
+};
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatUserMessage.tsx
 function flattenUserMessageContent(content) {
@@ -3728,8 +5051,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 = useMemo(() => flattenUserMessageContent(message.content), [message.content]);
+	const mediaParts = 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 {
@@ -3776,7 +5108,18 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		className: 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__ */ jsx("div", {
+				className: "cpk:flex cpk:flex-col cpk:items-end cpk:gap-2 cpk:mt-2",
+				children: mediaParts.map((part, index) => /* @__PURE__ */ jsx(CopilotChatAttachmentRenderer, {
+					type: part.type,
+					source: part.source,
+					filename: getFilename(part)
+				}, index))
+			}),
+			BoundToolbar
+		]
 	});
 }
 (function(_CopilotChatUserMessage) {
@@ -4074,6 +5417,7 @@ const CopilotChatSuggestionView = React.forwardRef(function CopilotChatSuggestio
 		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)
@@ -4110,9 +5454,43 @@ const CopilotChatSuggestionView = React.forwardRef(function CopilotChatSuggestio
 });
 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.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.memo(function MemoizedAssistantMessage({ message, messages, isRunning, AssistantMessageComponent, slotProps }) {
@@ -4131,7 +5509,6 @@ const MemoizedAssistantMessage = React.memo(function MemoizedAssistantMessage({
 	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;
 	}
@@ -4210,6 +5587,7 @@ const MemoizedCustomMessage = React.memo(function MemoizedCustomMessage({ messag
 	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();
@@ -4218,12 +5596,14 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	const [, forceUpdate] = useReducer((x) => x + 1, 0);
 	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
 	]);
@@ -4241,9 +5621,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 = 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 } = useMemo(() => resolveSlotComponent(assistantMessage, CopilotChatAssistantMessage_default), [assistantMessage]);
+	const { Component: UserComponent, slotProps: userSlotProps } = useMemo(() => resolveSlotComponent(userMessage, CopilotChatUserMessage_default), [userMessage]);
+	const { Component: ReasoningComponent, slotProps: reasoningSlotProps } = useMemo(() => resolveSlotComponent(reasoningMessage, CopilotChatReasoningMessage_default), [reasoningMessage]);
+	const scrollElementFromCtx = useContext(ScrollElementContext);
+	const scrollElement = scrollElementFromCtx && scrollElementFromCtx.clientHeight > 0 ? scrollElementFromCtx : null;
+	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 = 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;
+	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__ */ jsx(MemoizedCustomMessage, {
@@ -4252,58 +5657,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__ */ 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__ */ jsx(MemoizedUserMessage, {
-				message,
-				UserMessageComponent: UserComponent,
-				slotProps: userSlotProps
-			}, message.id));
-		} else if (message.role === "activity") {
-			const activityMsg = message;
-			elements.push(/* @__PURE__ */ 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__ */ jsx(MemoizedReasoningMessage, {
-				message,
-				messages,
-				isRunning,
-				ReasoningMessageComponent: ReasoningComponent,
-				slotProps: reasoningSlotProps
-			}, message.id));
-		}
+		if (message.role === "assistant") elements.push(/* @__PURE__ */ jsx(MemoizedAssistantMessage, {
+			message,
+			messages,
+			isRunning,
+			AssistantMessageComponent: AssistantComponent,
+			slotProps: assistantSlotProps
+		}, message.id));
+		else if (message.role === "user") elements.push(/* @__PURE__ */ jsx(MemoizedUserMessage, {
+			message,
+			UserMessageComponent: UserComponent,
+			slotProps: userSlotProps
+		}, message.id));
+		else if (message.role === "activity") elements.push(/* @__PURE__ */ jsx(MemoizedActivityMessage, {
+			message,
+			renderActivityMessage
+		}, message.id));
+		else if (message.role === "reasoning") elements.push(/* @__PURE__ */ jsx(MemoizedReasoningMessage, {
+			message,
+			messages,
+			isRunning,
+			ReasoningMessageComponent: ReasoningComponent,
+			slotProps: reasoningSlotProps
+		}, message.id));
 		if (renderCustomMessage) elements.push(/* @__PURE__ */ 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__ */ jsx("div", {
 		"data-copilotkit": true,
 		style: { display: "contents" },
@@ -4314,30 +5699,356 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			interruptElement
 		})
 	});
-	const lastMessage = messages[messages.length - 1];
-	const showCursor = isRunning && lastMessage?.role !== "reasoning";
+	const lastMessage = messages[messages.length - 1];
+	const showCursor = isRunning && lastMessage?.role !== "reasoning";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-copilotkit": true,
+		"data-testid": "copilot-message-list",
+		className: twMerge("copilotKitMessages cpk:flex cpk:flex-col", className),
+		...props,
+		children: [
+			shouldVirtualize ? /* @__PURE__ */ jsx("div", {
+				style: {
+					height: virtualizer.getTotalSize(),
+					position: "relative"
+				},
+				children: virtualizer.getVirtualItems().map((virtualItem) => {
+					const message = deduplicatedMessages[virtualItem.index];
+					return /* @__PURE__ */ 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__ */ jsx("div", {
+				className: "cpk:mt-2",
+				children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+			})
+		]
+	});
+}
+CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "copilot-loading-cursor",
+		className: 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__ */ 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__ */ 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__ */ jsx(UploadingOverlay, {}),
+					/* @__PURE__ */ jsx(AttachmentPreview, { attachment }),
+					/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "cpk:w-full cpk:h-full" });
+	switch (attachment.type) {
+		case "image": return /* @__PURE__ */ jsx(ImagePreview, { attachment });
+		case "audio": return /* @__PURE__ */ jsx(AudioPreview, { attachment });
+		case "video": return /* @__PURE__ */ jsx(VideoPreview, { attachment });
+		case "document": return /* @__PURE__ */ jsx(DocumentPreview, { attachment });
+	}
+}
+function Lightbox({ onClose, children }) {
+	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 createPortal(/* @__PURE__ */ 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__ */ 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__ */ jsx(X, { className: "cpk:w-5 cpk:h-5" })
+		}), /* @__PURE__ */ 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 = useRef(null);
+	const [open, setOpen] = useState(false);
+	const vtName = useId();
+	return {
+		thumbnailRef,
+		vtName,
+		open,
+		openLightbox: useCallback(() => {
+			const thumb = thumbnailRef.current;
+			const doc = document;
+			if (doc.startViewTransition && thumb) {
+				thumb.style.viewTransitionName = vtName;
+				doc.startViewTransition(() => {
+					thumb.style.viewTransitionName = "";
+					flushSync(() => setOpen(true));
+				});
+			} else setOpen(true);
+		}, []),
+		closeLightbox: useCallback(() => {
+			const thumb = thumbnailRef.current;
+			const doc = document;
+			if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
+				flushSync(() => setOpen(false));
+				thumb.style.viewTransitionName = vtName;
+			}).finished.then(() => {
+				thumb.style.viewTransitionName = "";
+			}).catch(() => {
+				thumb.style.viewTransitionName = "";
+			});
+			else setOpen(false);
+		}, [])
+	};
+}
+function ImagePreview({ attachment }) {
+	const src = getSourceUrl(attachment.source);
+	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsx(Lightbox, {
+		onClose: closeLightbox,
+		children: /* @__PURE__ */ 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__ */ jsxs("div", {
+		className: "cpk:flex cpk:flex-col cpk:gap-1 cpk:w-full",
+		children: [/* @__PURE__ */ jsx("audio", {
+			src: getSourceUrl(attachment.source),
+			controls: true,
+			preload: "metadata",
+			className: "cpk:w-full cpk:h-8"
+		}), attachment.filename && /* @__PURE__ */ 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 = getSourceUrl(attachment.source);
+	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", {
+			ref: thumbnailRef,
+			className: "cpk:w-full cpk:h-full",
+			children: attachment.thumbnail ? /* @__PURE__ */ jsx("img", {
+				src: attachment.thumbnail,
+				alt: attachment.filename || "Video thumbnail",
+				className: "cpk:w-full cpk:h-full cpk:object-cover"
+			}) : /* @__PURE__ */ jsx("video", {
+				src,
+				preload: "metadata",
+				muted: true,
+				className: "cpk:w-full cpk:h-full cpk:object-cover"
+			})
+		}),
+		/* @__PURE__ */ 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__ */ 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__ */ jsx(Play, { className: "cpk:w-4 cpk:h-4 cpk:text-white cpk:ml-0.5" })
+			})
+		}),
+		open && /* @__PURE__ */ jsx(Lightbox, {
+			onClose: closeLightbox,
+			children: /* @__PURE__ */ 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] = useState(null);
+	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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("iframe", {
+				src: blobUrl,
+				title: attachment.filename || "Text preview",
+				className: "cpk:w-full cpk:h-[80vh] cpk:border-none"
+			}) : null]
+		});
+	}
 	return /* @__PURE__ */ jsxs("div", {
-		"data-copilotkit": true,
-		"data-testid": "copilot-message-list",
-		className: twMerge("copilotKitMessages cpk:flex cpk:flex-col", className),
-		...props,
+		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__ */ jsx("div", {
-				className: "cpk:mt-2",
-				children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+			/* @__PURE__ */ 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: getDocumentIcon(mimeType ?? "")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "cpk:text-center",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "cpk:text-base cpk:font-medium cpk:text-gray-800 cpk:dark:text-gray-200",
+					children: attachment.filename || "Document"
+				}), /* @__PURE__ */ 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 && ` · ${formatFileSize(attachment.size)}`]
+				})]
+			}),
+			/* @__PURE__ */ 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__ */ jsx("div", {
-		"data-testid": "copilot-loading-cursor",
-		className: 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ 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: getDocumentIcon(mimeType ?? "")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "cpk:flex cpk:flex-col cpk:min-w-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "cpk:text-xs cpk:font-medium cpk:break-all cpk:leading-tight",
+				children: attachment.filename || "Document"
+			}), attachment.size != null && /* @__PURE__ */ jsx("span", {
+				className: "cpk:text-[11px] cpk:text-muted-foreground",
+				children: formatFileSize(attachment.size)
+			})]
+		})]
+	}), open && /* @__PURE__ */ jsx(Lightbox, {
+		onClose: closeLightbox,
+		children: /* @__PURE__ */ jsx(DocumentLightboxContent, {
+			attachment,
+			vtName
+		})
+	})] });
+}
 
 //#endregion
 //#region src/v2/hooks/use-keyboard-height.tsx
@@ -4383,7 +6094,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__ */ 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__ */ jsxs("div", {
+			className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-2 cpk:text-primary/70",
+			children: [/* @__PURE__ */ jsx(Upload, { className: "cpk:w-8 cpk:h-8" }), /* @__PURE__ */ 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 = useRef(null);
 	const [inputContainerHeight, setInputContainerHeight] = useState(0);
 	const [isResizing, setIsResizing] = useState(false);
@@ -4430,6 +6153,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		onCancelTranscribe,
 		onFinishTranscribe,
 		onFinishTranscribeWithAudio,
+		onAddFile,
 		positioning: "static",
 		keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
 		containerRef: inputContainerRef,
@@ -4470,21 +6194,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__ */ jsxs("div", {
+			className: "cpk:w-full",
+			children: [attachments && attachments.length > 0 && /* @__PURE__ */ jsx(CopilotChatAttachmentQueue, {
+				attachments,
+				onRemoveAttachment: (id) => onRemoveAttachment?.(id),
+				className: "cpk:mb-2"
+			}), BoundInputForWelcome]
+		});
+		const BoundWelcomeScreen = renderSlot(welcomeScreenSlot, CopilotChatView.WelcomeScreen, {
+			input: inputWithAttachments,
 			suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx(Fragment$1, {})
 		});
-		return /* @__PURE__ */ jsx("div", {
+		return /* @__PURE__ */ jsxs("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-chat",
 			"data-copilot-running": isRunning ? "true" : "false",
-			className: 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__ */ jsx(DropOverlay, {}), BoundWelcomeScreen]
 		});
 	}
 	if (children) return /* @__PURE__ */ jsx("div", {
@@ -4501,39 +6238,66 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		"data-copilotkit": true,
 		"data-testid": "copilot-chat",
 		"data-copilot-running": isRunning ? "true" : "false",
-		className: 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__ */ jsx(DropOverlay, {}),
+			BoundScrollView,
+			/* @__PURE__ */ jsx("div", {
+				className: "cpk:max-w-3xl cpk:mx-auto cpk:w-full",
+				children: attachments && attachments.length > 0 && /* @__PURE__ */ jsx(CopilotChatAttachmentQueue, {
+					attachments,
+					onRemoveAttachment: (id) => onRemoveAttachment?.(id),
+					className: "cpk:px-4"
+				})
+			}),
+			BoundInput
+		]
 	});
 }
 (function(_CopilotChatView) {
 	const ScrollContent = ({ children, scrollToBottomButton, feather, inputContainerHeight, isResizing }) => {
-		const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+		const { isAtBottom, scrollToBottom, scrollRef } = useStickToBottomContext();
+		const [scrollEl, setScrollEl] = useState(null);
+		useLayoutEffect(() => {
+			setScrollEl(scrollRef.current ?? null);
+		}, []);
 		const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(StickToBottom.Content, {
-				className: "cpk:overflow-y-auto cpk:overflow-x-hidden",
-				style: {
-					flex: "1 1 0%",
-					minHeight: 0
-				},
-				children: /* @__PURE__ */ jsx("div", {
-					className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
-					children
+		return /* @__PURE__ */ jsx(ScrollElementContext.Provider, {
+			value: scrollEl,
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(StickToBottom.Content, {
+					className: "cpk:overflow-y-auto cpk:overflow-x-hidden",
+					style: {
+						flex: "1 1 0%",
+						minHeight: 0
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						className: "cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+						children
+					})
+				}),
+				BoundFeather,
+				!isAtBottom && !isResizing && /* @__PURE__ */ 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__ */ 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] = useState(false);
 		const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
 		const [showScrollButton, setShowScrollButton] = useState(false);
+		const [nonAutoScrollEl, setNonAutoScrollEl] = useState(null);
+		const nonAutoScrollRefCallback = useCallback((el) => {
+			scrollRef.current = el;
+			setNonAutoScrollEl(el);
+		}, []);
 		useEffect(() => {
 			setHasMounted(true);
 		}, []);
@@ -4562,23 +6326,26 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 		if (!autoScroll) {
 			const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
-			return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(ScrollElementContext.Provider, {
+				value: nonAutoScrollEl,
+				children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(StickToBottom, {
@@ -4770,11 +6537,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 ?? DEFAULT_AGENT_ID;
 	const resolvedThreadId = useMemo(() => threadId ?? existingConfig?.threadId ?? 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();
@@ -4803,6 +6574,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 	const [inputValue, setInputValue] = useState("");
 	const [transcriptionError, setTranscriptionError] = useState(null);
 	const [isTranscribing, setIsTranscribing] = 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;
@@ -4818,7 +6590,6 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 				console.error("CopilotChat: connectAgent failed", error);
 			}
 		};
-		agent.threadId = resolvedThreadId;
 		connect(agent);
 		return () => {
 			detached = true;
@@ -4831,7 +6602,31 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		resolvedAgentId
 	]);
 	const onSubmitInput = 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: randomUUID(),
+				role: "user",
+				content: contentParts
+			});
+		} else agent.addMessage({
 			id: randomUUID(),
 			role: "user",
 			content: value
@@ -4842,7 +6637,11 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 		} catch (error) {
 			console.error("CopilotChat: runAgent failed", error);
 		}
-	}, [agent]);
+	}, [
+		agent,
+		selectedAttachments,
+		consumeAttachments
+	]);
 	const handleSelectSuggestion = useCallback(async (suggestion) => {
 		agent.addMessage({
 			id: randomUUID(),
@@ -4929,21 +6728,33 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 			return () => clearTimeout(timer);
 		}
 	}, [transcriptionError]);
-	const mergedProps = merge({
+	const stableMessageView = useShallowStableRef(typeof providedMessageView === "string" ? { className: providedMessageView } : providedMessageView);
+	const stableSuggestionView = useShallowStableRef(providedSuggestionView);
+	const handleAddFile = 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, merge(mergedProps, {
-		messages: useMemo(() => [...agent.messages], [JSON.stringify(agent.messages)]),
+	const messages = 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,
@@ -4952,32 +6763,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__ */ 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__ */ jsx(CopilotChatConfigurationProvider, {
 		agentId: resolvedAgentId,
 		threadId: resolvedThreadId,
 		labels,
 		isModalDefaultOpen,
-		children: [
-			!isChatLicensed && /* @__PURE__ */ jsx(InlineFeatureWarning, { featureName: "Chat" }),
-			transcriptionError && /* @__PURE__ */ 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__ */ jsxs("div", {
+			ref: chatContainerRef,
+			style: { display: "contents" },
+			children: [
+				attachmentsEnabled && /* @__PURE__ */ jsx("input", {
+					type: "file",
+					multiple: true,
+					ref: fileInputRef,
+					onChange: handleFileUpload,
+					accept: attachmentsConfig?.accept ?? "*/*",
+					style: { display: "none" }
+				}),
+				!isChatLicensed && /* @__PURE__ */ jsx(InlineFeatureWarning, { featureName: "Chat" }),
+				transcriptionError && /* @__PURE__ */ 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) {
@@ -5842,6 +7672,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] = useState(false);
+	const colors = getErrorColors(getErrorSeverity(bannerError));
+	const details = bannerError.details;
+	const link = extractUrl(bannerError.message);
+	return /* @__PURE__ */ 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__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				alignItems: "center",
+				gap: "10px"
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "8px",
+					flex: 1,
+					minWidth: 0
+				},
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					width: "12px",
+					height: "12px",
+					borderRadius: "50%",
+					backgroundColor: colors.border,
+					flexShrink: 0
+				} }), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "10px",
+						flex: 1,
+						minWidth: 0
+					},
+					children: [
+						/* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("strong", { children: "Code:" }),
+					" ",
+					details.code
+				] }),
+				details.originalMessage && /* @__PURE__ */ jsxs("div", {
+					style: { marginTop: "4px" },
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "Message:" }),
+						" ",
+						details.originalMessage
+					]
+				}),
+				details.context && Object.keys(details.context).length > 0 && /* @__PURE__ */ jsxs("div", {
+					style: { marginTop: "4px" },
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "Context:" }),
+						" ",
+						JSON.stringify(details.context, null, 2)
+					]
+				}),
+				details.stack && /* @__PURE__ */ jsxs("div", {
+					style: {
+						marginTop: "4px",
+						opacity: .7
+					},
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "Stack:" }),
+						"\n",
+						details.stack
+					]
+				})
+			]
+		})]
+	});
+}
 function ToastProvider({ enabled, children }) {
 	const [toasts, setToasts] = useState([]);
 	const [bannerError, setBannerErrorState] = useState(null);
@@ -5879,156 +7930,10 @@ function ToastProvider({ enabled, children }) {
 	};
 	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
 		value,
-		children: [bannerError && (() => {
-			const colors = getErrorColors(getErrorSeverity(bannerError));
-			return /* @__PURE__ */ 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__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-						gap: "10px"
-					},
-					children: [/* @__PURE__ */ jsxs("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "8px",
-							flex: 1,
-							minWidth: 0
-						},
-						children: [/* @__PURE__ */ jsx("div", { style: {
-							width: "12px",
-							height: "12px",
-							borderRadius: "50%",
-							backgroundColor: colors.border,
-							flexShrink: 0
-						} }), /* @__PURE__ */ jsxs("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "10px",
-								flex: 1,
-								minWidth: 0
-							},
-							children: [/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(BannerErrorDisplay, {
+			bannerError,
+			onDismiss: () => setBannerError(null)
+		}), children]
 	});
 }
 
@@ -7035,12 +8940,21 @@ function CopilotListeners() {
 	const { agent } = useAgent({ agentId: resolvedAgentId });
 	usePredictStateSubscription(agent);
 	useEffect(() => {
-		const subscription = copilotkit.subscribe({ onError: ({ error }) => {
-			setBannerError(new 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 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();
@@ -7514,7 +9428,7 @@ function CopilotKitInternal(cpkProps) {
 			children: [
 				/* @__PURE__ */ jsx(CopilotListeners, {}),
 				/* @__PURE__ */ jsx(CopilotKitErrorBridge, {}),
-				/* @__PURE__ */ jsxs(CoAgentStateRendersProvider, { children: [/* @__PURE__ */ jsx(MessagesTapProvider, { children: /* @__PURE__ */ jsxs(CopilotMessages, { children: [memoizedChildren, /* @__PURE__ */ jsx(RegisteredActionsRenderer, {})] }) }), bannerError && showDevConsole && /* @__PURE__ */ jsx(UsageBanner, {
+				/* @__PURE__ */ jsxs(CoAgentStateRendersProvider, { children: [/* @__PURE__ */ jsx(MessagesTapProvider, { children: /* @__PURE__ */ jsxs(CopilotMessages, { children: [/* @__PURE__ */ jsx(React.Fragment, { children: memoizedChildren }, "children"), /* @__PURE__ */ jsx(RegisteredActionsRenderer, {}, "actions")] }) }), bannerError && showDevConsole && /* @__PURE__ */ jsx(UsageBanner, {
 					severity: bannerError.severity,
 					message: bannerError.message,
 					onClose: () => setBannerError(null),
@@ -7558,5 +9472,5 @@ function validateProps(props) {
 }
 
 //#endregion
-export { CopilotKitCoreReact as $, CopilotChatSuggestionPill as A, UseAgentUpdate as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, useThreads$1 as F, defineToolCallRenderer as G, useHumanInTheLoop as H, useInterrupt as I, useRenderActivityMessage as J, useComponent as K, useConfigureSuggestions as L, CopilotChatUserMessage_default as M, CopilotChatAssistantMessage_default as N, CopilotChatMessageView as O, CopilotChatToolCallsView as P, useCopilotKit as Q, useSuggestions as R, CopilotModalHeader as S, DefaultOpenIcon as T, useDefaultRenderTool as U, useAgent as V, useRenderTool as W, useRenderToolCall as X, useRenderCustomMessages as Y, CopilotKitProvider as Z, WildcardToolCallRender as _, ThreadsProvider as a, CopilotChatInput_default as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, CopilotChatConfigurationProvider as ct, shouldShowDevConsole as d, createA2UIMessageRenderer as et, useToast as f, useCopilotContext as g, CopilotContext as h, ThreadsContext as i, CopilotKitInspector as it, CopilotChatReasoningMessage_default as j, CopilotChatSuggestionView as k, useCoAgentStateRenders as l, useCopilotChatConfiguration as lt, useCopilotMessagesContext as m, defaultCopilotContextCategories as n, MCPAppsActivityRenderer as nt, useThreads as o, AudioRecorderError as ot, CopilotMessagesContext as p, useFrontendTool as q, CoAgentStateRenderBridge as r, MCPAppsActivityType as rt, CoAgentStateRendersContext as s, CopilotChatAudioRecorder as st, CopilotKit as t, MCPAppsActivityContentSchema as tt, useAsyncCallback as u, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useAgentContext as z };
-//# sourceMappingURL=copilotkit-DNYSFuz5.mjs.map
+export { useCopilotKit as $, CopilotChatSuggestionView as A, useConfigureSuggestions as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, CopilotChatAssistantMessage_default as F, useComponent as G, useHumanInTheLoop as H, CopilotChatToolCallsView as I, useRenderCustomMessages as J, useFrontendTool as K, useAttachments as L, CopilotChatReasoningMessage_default as M, CopilotChatUserMessage_default as N, CopilotChatAttachmentQueue as O, CopilotChatAttachmentRenderer as P, CopilotKitProvider as Q, useThreads$1 as R, CopilotModalHeader as S, DefaultOpenIcon as T, useDefaultRenderTool as U, useSuggestions as V, useRenderTool as W, useAgent as X, UseAgentUpdate as Y, useRenderToolCall as Z, WildcardToolCallRender as _, ThreadsProvider as a, useSandboxFunctions as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, MCPAppsActivityType as ct, shouldShowDevConsole as d, AudioRecorderError as dt, CopilotKitCoreReact as et, useToast as f, CopilotChatAudioRecorder as ft, useCopilotContext as g, CopilotContext as h, ThreadsContext as i, SandboxFunctionsContext as it, CopilotChatSuggestionPill as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, CopilotKitInspector as lt, useCopilotMessagesContext as m, useCopilotChatConfiguration as mt, defaultCopilotContextCategories as n, defineToolCallRenderer as nt, useThreads as o, MCPAppsActivityContentSchema as ot, CopilotMessagesContext as p, CopilotChatConfigurationProvider as pt, useRenderActivityMessage as q, CoAgentStateRenderBridge as r, createA2UIMessageRenderer as rt, CoAgentStateRendersContext as s, MCPAppsActivityRenderer as st, CopilotKit as t, useAgentContext as tt, useAsyncCallback as u, CopilotChatInput_default as ut, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useInterrupt as z };
+//# sourceMappingURL=copilotkit-BY5S1-0P.mjs.map