@copilotkit/react-core 1.79.1 → 1.80.0

package/dist/{copilotkit-DEaA0Cat.cjs → copilotkit-DKICi3nC.cjs}

@@ -47,6 +47,8 @@ let zod = require("zod");
 let _copilotkit_mcp_apps_renderer_activity = require("@copilotkit/mcp-apps-renderer/activity");
 let _copilotkit_a2ui_renderer = require("@copilotkit/a2ui-renderer");
 let zod_to_json_schema = require("zod-to-json-schema");
+let _radix_ui_react_popover = require("@radix-ui/react-popover");
+_radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 let react_dom = require("react-dom");
 let _tanstack_react_virtual = require("@tanstack/react-virtual");
 let use_stick_to_bottom = require("use-stick-to-bottom");
@@ -69,7 +71,7 @@ function shallowEqual(obj1, obj2) {
 * 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) {
+function isPlainObject$1(obj) {
 	return obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
 }
 /**
@@ -88,7 +90,7 @@ function isPlainObject(obj) {
 function useShallowStableRef(value) {
 	const ref = (0, react.useRef)(value);
 	if (ref.current === value) return ref.current;
-	if (isPlainObject(ref.current) && isPlainObject(value)) {
+	if (isPlainObject$1(ref.current) && isPlainObject$1(value)) {
 		if (shallowEqual(ref.current, value)) return ref.current;
 	}
 	ref.current = value;
@@ -104,6 +106,8 @@ const CopilotChatDefaultLabels = {
 	chatInputToolbarFinishTranscribeButtonLabel: "Finish",
 	chatInputToolbarAddButtonLabel: "Add attachments",
 	chatInputToolbarToolsButtonLabel: "Tools",
+	chatInputToolbarSendButtonLabel: "Send message",
+	chatInputToolbarStopButtonLabel: "Stop",
 	assistantMessageToolbarCopyCodeLabel: "Copy",
 	assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
 	assistantMessageToolbarCopyMessageLabel: "Copy",
@@ -116,13 +120,18 @@ const CopilotChatDefaultLabels = {
 	assistantMessageToolbarInspectorHideDescription: "Until you reload this page",
 	assistantMessageToolbarThumbsUpLabel: "Good response",
 	assistantMessageToolbarThumbsDownLabel: "Bad response",
+	assistantMessageFeedbackCommentPlaceholder: "Add a comment (optional)",
+	assistantMessageFeedbackCommentSubmitLabel: "Send comment",
 	assistantMessageToolbarReadAloudLabel: "Read aloud",
 	assistantMessageToolbarRegenerateLabel: "Regenerate",
 	userMessageToolbarCopyMessageLabel: "Copy",
 	userMessageToolbarEditMessageLabel: "Edit",
+	userMessageToolbarPreviousBranchLabel: "Previous branch",
+	userMessageToolbarNextBranchLabel: "Next branch",
 	chatDisclaimerText: "AI can make mistakes. Please verify important information.",
 	chatToggleOpenLabel: "Open chat",
 	chatToggleCloseLabel: "Close chat",
+	chatScrollToBottomLabel: "Scroll to bottom",
 	modalHeaderTitle: "CopilotKit Chat",
 	welcomeMessageText: "How can I help you today?"
 };
@@ -384,9 +393,9 @@ ControlledModalOpenScope.displayName = "ControlledModalOpenScope";
 
 //#endregion
 //#region src/v2/lib/utils.ts
-const twMerge$10 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
+const twMerge$12 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
 function cn(...inputs) {
-	return twMerge$10((0, clsx.clsx)(inputs));
+	return twMerge$12((0, clsx.clsx)(inputs));
 }
 
 //#endregion
@@ -834,6 +843,11 @@ function renderSlot(slot, DefaultComponent, props) {
 //#region src/v2/components/chat/CopilotChatInput.tsx
 const SLASH_MENU_MAX_VISIBLE_ITEMS = 5;
 const SLASH_MENU_ITEM_HEIGHT_PX = 40;
+/**
+* The chat composer: a text area with the add-menu, voice and send/stop
+* buttons, and a slash-command menu that lists `toolsMenu` items once the text
+* starts with "/".
+*/
 function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning = false, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, onAddFile, onChange, value, toolsMenu, autoFocus = false, positioning = "static", keyboardHeight = 0, containerRef, showDisclaimer, bottomAnchored = false, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, disclaimer, children, className, ...props }) {
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = (0, react.useState)(() => value ?? "");
@@ -1053,10 +1067,12 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		send();
 	};
 	const BoundAudioRecorder = renderSlot(audioRecorder, CopilotChatAudioRecorder, { ref: audioRecorderRef });
+	const showsStop = isProcessing && canStop;
 	const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
 		onClick: handleSendButtonClick,
 		disabled: isProcessing ? !canStop : !canSend,
-		children: isProcessing && canStop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "cpk:size-[18px] cpk:fill-current" }) : void 0
+		"aria-label": showsStop ? labels.chatInputToolbarStopButtonLabel : labels.chatInputToolbarSendButtonLabel,
+		children: showsStop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "cpk:size-[18px] cpk:fill-current" }) : void 0
 	});
 	const BoundStartTranscribeButton = renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, { onClick: onStartTranscribe });
 	const BoundCancelTranscribeButton = renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, { onClick: onCancelTranscribe });
@@ -1368,18 +1384,22 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	});
 }
 (function(_CopilotChatInput) {
-	_CopilotChatInput.SendButton = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "cpk:mr-[10px]",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-			type: "button",
-			"data-testid": "copilot-send-button",
-			variant: "chatInputToolbarPrimary",
-			size: "chatInputToolbarIcon",
-			className,
-			...props,
-			children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk:size-[18px]" })
-		})
-	});
+	_CopilotChatInput.SendButton = ({ className, children, ...props }) => {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cpk:mr-[10px]",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				type: "button",
+				"data-testid": "copilot-send-button",
+				variant: "chatInputToolbarPrimary",
+				size: "chatInputToolbarIcon",
+				className,
+				"aria-label": labels.chatInputToolbarSendButtonLabel,
+				...props,
+				children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk:size-[18px]" })
+			})
+		});
+	};
 	const ToolbarButton = _CopilotChatInput.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
@@ -1389,6 +1409,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 				variant: "chatInputToolbarSecondary",
 				size: "chatInputToolbarIcon",
 				className: (0, tailwind_merge.twMerge)(defaultClassName, className),
+				"aria-label": labels[labelKey],
 				...props,
 				children: icon
 			})
@@ -1459,6 +1480,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			size: "chatInputToolbarIcon",
 			className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
 			disabled: isDisabled,
+			"aria-label": labels.chatInputToolbarAddButtonLabel,
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk:size-[20px]" })
 		});
@@ -1608,6 +1630,32 @@ function warnAboutUnrenderedToolCalls(toolNames, registered, alreadyWarned) {
 	}
 }
 /**
+* The tool-call renderers registered on the provider, kept current.
+* @internal
+*/
+function useToolCallRenderers() {
+	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
+	return (0, react.useSyncExternalStore)((callback) => copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
+}
+/**
+* Which tool names have a renderer of their own, whether a wildcard (`"*"`)
+* renderer is registered, and which of them opted into grouping.
+* @internal
+*/
+function useToolCallRendererNames() {
+	const renderers = useToolCallRenderers();
+	return (0, react.useMemo)(() => {
+		const named = renderers.filter((rc) => rc.name !== "*");
+		const wildcards = renderers.filter((rc) => rc.name === "*");
+		return {
+			named: new Set(named.map((rc) => rc.name)),
+			groupedNames: new Set(named.filter((rc) => rc.group).map((rc) => rc.name)),
+			wildcard: wildcards.length > 0,
+			wildcardGroups: wildcards.some((rc) => rc.group)
+		};
+	}, [renderers]);
+}
+/**
 * Hook that returns a function to render tool calls based on the render functions
 * defined in CopilotKitProvider.
 *
@@ -1618,9 +1666,7 @@ function useRenderToolCall() {
 	const agentId = useCopilotChatConfiguration()?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const unrenderedToolNames = (0, react.useRef)(/* @__PURE__ */ new Set());
 	const warnedToolNames = (0, react.useRef)(/* @__PURE__ */ new Set());
-	const renderToolCalls = (0, react.useSyncExternalStore)((callback) => {
-		return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
-	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
+	const renderToolCalls = useToolCallRenderers();
 	const renderToolCall = (0, react.useCallback)(({ toolCall, toolMessage }) => {
 		const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
 		const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
@@ -1655,7 +1701,7 @@ function useRenderToolCall() {
 
 //#endregion
 //#region package.json
-var version = "1.79.1";
+var version = "1.80.0";
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -1891,7 +1937,7 @@ function InlineFeatureWarning({ featureName }) {
 * Fetches resource content on-demand via proxied MCP requests. The React shell
 * owns the iframe; `bindMcpApp` owns the protocol.
 */
-const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, message, agent }) {
+const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, message, agent, allowSameOriginFallback }) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const messageId = message?.id;
 	const containerRef = (0, react.useRef)(null);
@@ -1941,6 +1987,7 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, mess
 					getAgent: () => agentRef.current,
 					host: copilotkit,
 					messageId,
+					options: { allowSameOriginFallback },
 					hooks: {
 						onResource: (resource) => {
 							if (!mounted) return;
@@ -1982,6 +2029,7 @@ const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, mess
 		agent,
 		copilotkit,
 		messageId,
+		allowSameOriginFallback,
 		content.resourceUri,
 		content.serverHash,
 		content.serverId
@@ -3196,7 +3244,8 @@ function defineToolCallRenderer(def) {
 		name: def.name,
 		args: argsSchema,
 		render: def.render,
-		...def.agentId ? { agentId: def.agentId } : {}
+		...def.agentId ? { agentId: def.agentId } : {},
+		...def.group ? { group: true } : {}
 	};
 }
 
@@ -3412,6 +3461,11 @@ const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follo
 - 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).`;
+/** The MCP Apps renderer with `mcpApps.allowSameOriginFallback` applied. */
+const SameOriginMCPAppsActivityRenderer = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MCPAppsActivityRenderer, {
+	...props,
+	allowSameOriginFallback: true
+});
 const DEFAULT_LEARNING = Object.freeze({});
 function toLearningConfig(learning) {
 	if (learning === true) return DEFAULT_LEARNING;
@@ -3428,7 +3482,8 @@ function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	}, [value, warningMessage]);
 	return value;
 }
-const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, showIntelligenceIndicator = true, useSingleEndpoint, onError, a2ui, defaultThrottleMs, debug, learning }) => {
+/** Provide a shared core instance and synchronize runtime, tool, and UI configuration. */
+const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, showIntelligenceIndicator = true, useSingleEndpoint, onError, a2ui, mcpApps, defaultThrottleMs, debug, learning }) => {
 	const learningConfig = (0, react.useMemo)(() => toLearningConfig(learning), [learning]);
 	const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
 	const [inspectorVisible, setInspectorVisible] = (0, react.useState)(false);
@@ -3485,11 +3540,12 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		const core = copilotkitRef.current;
 		return (0, _copilotkit_a2ui_renderer.filterCatalog)(rawCatalog, (name) => core ? core.isCatalogComponentEnabled(name) : true);
 	}, [rawCatalog, catalogToggleVersion]);
+	const mcpAppsAllowSameOrigin = mcpApps?.allowSameOriginFallback === true;
 	const builtInActivityRenderers = (0, react.useMemo)(() => {
 		const renderers = [{
 			activityType: _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityType,
 			content: _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityContentSchema,
-			render: MCPAppsActivityRenderer
+			render: mcpAppsAllowSameOrigin ? SameOriginMCPAppsActivityRenderer : MCPAppsActivityRenderer
 		}];
 		if (openGenUIActive) renderers.push({
 			activityType: OpenGenerativeUIActivityType,
@@ -3507,7 +3563,8 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		a2uiActive,
 		openGenUIActive,
 		a2ui,
-		filteredCatalog
+		filteredCatalog,
+		mcpAppsAllowSameOrigin
 	]);
 	const allActivityRenderers = (0, react.useMemo)(() => {
 		return [...renderActivityMessagesList, ...builtInActivityRenderers];
@@ -3615,6 +3672,7 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 			description: _copilotkit_shared.GENERATE_SANDBOXED_UI_DESCRIPTION,
 			parameters: GenerateSandboxedUiArgsSchema,
 			handler: async () => "UI generated",
+			reconnectBehavior: "resume-pending",
 			followUp: true,
 			render: OpenGenerativeUIToolRenderer
 		}];
@@ -4020,12 +4078,86 @@ function useRenderActivityMessage() {
 	}), [renderActivityMessage, findRenderer]);
 }
 
+//#endregion
+//#region src/v2/hooks/tool-registration.ts
+/**
+* Deps comparison shared by `useFrontendTool` (and through it
+* `useHumanInTheLoop` and `useComponent`) and `useRenderTool`. Not part of the
+* public API.
+*/
+const EMPTY_DEPS$1 = [];
+function isPlainObject(value) {
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+/**
+* Plain data (primitives, plain objects, arrays, dates) compares by value.
+* Functions always compare equal: these hooks used to compare
+* `JSON.stringify(deps)`, which turns every function into `null`, and a
+* function that counted as changed would re-register on every render when it
+* is written inline (and loop in a component that also reads
+* `useRenderToolCall`). Everything else (class instances, maps, sets) compares
+* by identity. A cycle inside plain data is safe: a pair already being
+* compared counts as equal for that branch.
+*/
+function depEqual(a, b, seen) {
+	if (Object.is(a, b)) return true;
+	if (typeof a === "function" && typeof b === "function") return true;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	if (a instanceof Date && b instanceof Date) return Object.is(a.getTime(), b.getTime());
+	const aIsArray = Array.isArray(a);
+	if (aIsArray !== Array.isArray(b)) return false;
+	if (!aIsArray && !(isPlainObject(a) && isPlainObject(b))) return false;
+	if (seen.get(a) === b) return true;
+	seen.set(a, b);
+	if (aIsArray) {
+		const left = a;
+		const right = b;
+		if (left.length !== right.length) return false;
+		for (let i = 0; i < left.length; i++) if (!depEqual(left[i], right[i], seen)) return false;
+		return true;
+	}
+	const left = a;
+	const right = b;
+	const leftKeys = Object.keys(left);
+	if (leftKeys.length !== Object.keys(right).length) return false;
+	for (const key of leftKeys) {
+		if (!Object.prototype.hasOwnProperty.call(right, key)) return false;
+		if (!depEqual(left[key], right[key], seen)) return false;
+	}
+	return true;
+}
+/** Whether two deps arrays are equal. A change in length is always a change. */
+function depsEqual(prev, next) {
+	if (prev.length !== next.length) return false;
+	const seen = /* @__PURE__ */ new Map();
+	for (let i = 0; i < prev.length; i++) if (!depEqual(prev[i], next[i], seen)) return false;
+	return true;
+}
+/**
+* Turns a caller's `deps` array into a number that changes exactly when the
+* deps change, by the rules of {@link depsEqual}. Put the number, not the
+* array, in the registration effect's dependency list: that keeps the list a
+* constant length and never serializes a value.
+*/
+function useDepsVersion(deps) {
+	const next = deps ?? EMPTY_DEPS$1;
+	const ref = (0, react.useRef)({
+		deps: next,
+		version: 0
+	});
+	if (ref.current.deps !== next && !depsEqual(ref.current.deps, next)) ref.current = {
+		deps: next,
+		version: ref.current.version + 1
+	};
+	return ref.current.version;
+}
+
 //#endregion
 //#region src/v2/hooks/use-frontend-tool.tsx
-const EMPTY_DEPS$2 = [];
 function useFrontendTool(tool, deps) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
-	const extraDeps = deps ?? EMPTY_DEPS$2;
+	const depsVersion = useDepsVersion(deps);
 	(0, react.useLayoutEffect)(() => {
 		const name = tool.name;
 		if (copilotkit.getTool({
@@ -4049,14 +4181,14 @@ function useFrontendTool(tool, deps) {
 		tool.name,
 		tool.available,
 		copilotkit,
-		JSON.stringify(extraDeps),
+		depsVersion,
 		JSON.stringify(tool.webmcp ?? null)
 	]);
 }
 
 //#endregion
 //#region src/v2/hooks/use-frontend-tools.tsx
-const EMPTY_DEPS$1 = [];
+const EMPTY_DEPS = [];
 const EMPTY_TOOLS = [];
 /**
 * Register a list of frontend tools whose length can change between renders.
@@ -4110,7 +4242,7 @@ const EMPTY_TOOLS = [];
 function useFrontendTools(tools, deps) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const toolList = tools ?? EMPTY_TOOLS;
-	const extraDeps = deps ?? EMPTY_DEPS$1;
+	const extraDeps = deps ?? EMPTY_DEPS;
 	(0, react.useLayoutEffect)(() => {
 		const deduped = /* @__PURE__ */ new Map();
 		for (const tool of toolList) {
@@ -4221,7 +4353,6 @@ function useComponent(config, deps) {
 
 //#endregion
 //#region src/v2/hooks/use-render-tool.tsx
-const EMPTY_DEPS = [];
 /**
 * Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
 *
@@ -4265,7 +4396,7 @@ const EMPTY_DEPS = [];
 */
 function useRenderTool(config, deps) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
-	const extraDeps = deps ?? EMPTY_DEPS;
+	const depsVersion = useDepsVersion(deps);
 	(0, react.useEffect)(() => {
 		const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
 			name: "*",
@@ -4273,7 +4404,8 @@ function useRenderTool(config, deps) {
 				...props,
 				parameters: props.args
 			}),
-			...config.agentId ? { agentId: config.agentId } : {}
+			...config.agentId ? { agentId: config.agentId } : {},
+			group: config.group
 		}) : defineToolCallRenderer({
 			name: config.name,
 			args: config.parameters,
@@ -4291,16 +4423,395 @@ function useRenderTool(config, deps) {
 					parameters: props.args
 				});
 			},
-			...config.agentId ? { agentId: config.agentId } : {}
+			...config.agentId ? { agentId: config.agentId } : {},
+			group: config.group
 		});
 		copilotkit.addHookRenderToolCall(renderer);
 	}, [
 		config.name,
+		config.group,
 		copilotkit,
-		JSON.stringify(extraDeps)
+		depsVersion
 	]);
 }
 
+//#endregion
+//#region src/v2/components/chat/CopilotChatToolCallGroup.tsx
+/**
+* Set by a group around the calls it shows, so CopilotKit's built-in tool card
+* draws itself as a compact row that fits the group instead of a card.
+* @internal
+*/
+const ToolCallGroupContext = (0, react.createContext)(null);
+/**
+* A call without a result is running only while the group is active: once
+* the run has moved on or ended, its result is never coming.
+*/
+const entryStatus = ({ toolMessage }, active) => toolMessage ? toolMessage.error ? "failed" : "done" : active ? "running" : "stopped";
+/** @internal */
+const statusLabels = {
+	running: "Running",
+	done: "Done",
+	failed: "Failed",
+	stopped: "Stopped"
+};
+/** The first non-empty string argument: usually a command, path or query. */
+function argumentPreview(parameters) {
+	if (!parameters || typeof parameters !== "object") return void 0;
+	return Object.values(parameters).find((v) => typeof v === "string" && v.trim().length > 0)?.replace(/\s+/g, " ");
+}
+const entryPreview = (entry) => argumentPreview((0, _copilotkit_shared.partialJSONParse)(entry.toolCall.function.arguments));
+/** "run_command ×2, read_file" */
+function toolNames(calls) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const { toolCall } of calls) {
+		const name = toolCall.function.name;
+		counts.set(name, (counts.get(name) ?? 0) + 1);
+	}
+	return [...counts].map(([name, count]) => count > 1 ? `${name} ×${count}` : name).join(", ");
+}
+const pluralize = (count, noun) => `${count} ${noun}${count === 1 ? "" : "s"}`;
+/**
+* Height transition between closed and its content's height. Closed content
+* stays mounted (so its state survives) but is inert.
+* @internal
+*/
+function Collapsible({ open, id, className, children }) {
+	const ref = (0, react.useRef)(null);
+	(0, react.useLayoutEffect)(() => {
+		ref.current?.toggleAttribute("inert", !open);
+	}, [open]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		id,
+		className: (0, tailwind_merge.twMerge)("cpk:grid cpk:transition-[grid-template-rows] cpk:duration-300 cpk:ease-[cubic-bezier(0.16,1,0.3,1)] cpk:motion-reduce:transition-none", className),
+		style: { gridTemplateRows: open ? "1fr" : "0fr" },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cpk:min-h-0 cpk:overflow-hidden",
+			children
+		})
+	});
+}
+function StatusIcon({ status, className }) {
+	const Icon = {
+		running: lucide_react.Loader2,
+		done: lucide_react.Check,
+		failed: lucide_react.X,
+		stopped: lucide_react.Circle
+	}[status];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		"aria-hidden": "true",
+		className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:text-muted-foreground", status === "running" && "cpk:animate-spin", status === "failed" && "cpk:text-destructive", className)
+	});
+}
+function Chevron({ open, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+		"aria-hidden": "true",
+		className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200", open && "cpk:rotate-90", className)
+	});
+}
+function FailedCount({ calls }) {
+	const failed = calls.filter((call) => call.toolMessage?.error).length;
+	if (!failed) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "cpk:shrink-0 cpk:text-destructive",
+		children: [failed, " failed"]
+	});
+}
+/**
+* Guarded JSON.stringify for the payload blocks. A circular reference would
+* otherwise crash the entire React tree on render.
+*/
+function stringifyPayload(value) {
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch (err) {
+		console.warn("[CopilotKit] Failed to JSON.stringify tool-call payload; falling back to String():", err);
+		try {
+			return String(value);
+		} catch {
+			return "[unserializable]";
+		}
+	}
+}
+function Payload({ label, value }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "cpk:text-[11px] cpk:font-medium cpk:uppercase cpk:tracking-wide cpk:text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		className: "cpk:m-0 cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-lg cpk:bg-muted cpk:p-2.5 cpk:font-mono cpk:text-xs cpk:leading-relaxed cpk:text-foreground cpk:whitespace-pre-wrap cpk:break-words",
+		children: stringifyPayload(value)
+	})] });
+}
+/**
+* A tool call's arguments and, once it has one, its result.
+* @internal
+*/
+function ToolCallPayloads({ parameters, result, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, tailwind_merge.twMerge)("cpk:grid cpk:gap-3", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Payload, {
+			label: "Arguments",
+			value: parameters ?? {}
+		}), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Payload, {
+			label: "Result",
+			value: result
+		})]
+	});
+}
+/**
+* The built-in tool card drawn as a row inside a group: status, name and main
+* argument, opening to the payloads.
+* @internal
+*/
+function ToolCallRow({ name, parameters, result, status, appearance, className, ...props }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const detailsId = (0, react.useId)();
+	const preview = argumentPreview(parameters);
+	const line = appearance === "line";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-copilotkit": true,
+		className: (0, tailwind_merge.twMerge)(!line && "cpk:border-t cpk:border-border", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": detailsId,
+			onClick: () => setOpen((value) => !value),
+			className: (0, tailwind_merge.twMerge)("cpk:group/row cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-2 cpk:border-none cpk:bg-transparent cpk:text-left cpk:text-[13px] cpk:text-inherit cpk:transition-colors cpk:hover:bg-accent/60 cpk:focus-visible:outline-2 cpk:focus-visible:-outline-offset-2 cpk:focus-visible:outline-ring", line ? "cpk:-mx-1.5 cpk:w-[calc(100%+0.75rem)] cpk:rounded-md cpk:px-1.5 cpk:py-1" : "cpk:w-full cpk:px-3.5 cpk:py-2"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-testid": "copilot-tool-render-name",
+					className: (0, tailwind_merge.twMerge)("cpk:shrink-0 cpk:font-mono cpk:text-[13px] cpk:font-medium cpk:text-foreground", status === "running" && "cpk-shimmer"),
+					children: name
+				}),
+				preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-[13px] cpk:text-muted-foreground",
+					children: preview
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-testid": "copilot-tool-render-status",
+					className: "cpk:sr-only",
+					children: statusLabels[status]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+					open,
+					className: (0, tailwind_merge.twMerge)("cpk:ml-auto cpk:text-muted-foreground", !open && "cpk:opacity-0 cpk:group-hover/row:opacity-100 cpk:group-focus-visible/row:opacity-100")
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
+			open,
+			id: detailsId,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallPayloads, {
+				parameters,
+				result,
+				className: line ? "cpk:mt-1 cpk:mb-2 cpk:ml-5.5" : "cpk:px-3.5 cpk:pt-1 cpk:pb-3"
+			})
+		})]
+	});
+}
+/**
+* Tool calls made in a row, collapsed into one summary. While a call runs the
+* summary names it ("Running read_file  src/app.ts"); once they're all done it
+* reads "Used 3 tools" and opens to the calls.
+*
+* Each call is drawn by its registered renderer. CopilotKit's built-in card
+* (`useDefaultRenderTool`) draws a compact row inside the card and line
+* appearances; a custom wildcard renderer draws whatever it draws.
+*/
+function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isActive = false, className, ...props }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const bodyId = (0, react.useId)();
+	const latest = calls[calls.length - 1];
+	if (!latest) return null;
+	const current = isActive ? calls.find((call) => !call.toolMessage) ?? latest : void 0;
+	const preview = current ? entryPreview(current) : void 0;
+	const done = calls.filter((call) => call.toolMessage).length;
+	const statuses = calls.map((call) => entryStatus(call, isActive));
+	const failedIds = new Set(calls.filter((_, index) => statuses[index] === "failed").map((call) => call.toolCall.id));
+	const status = current ? "running" : failedIds.size > 0 ? "failed" : statuses.includes("stopped") ? "stopped" : "done";
+	const rows = (rowAppearance) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallGroupContext.Provider, {
+		value: {
+			appearance: rowAppearance,
+			failedIds,
+			active: isActive
+		},
+		children: calls.map((call) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderCall(call) }, call.toolCall.id))
+	});
+	const groupProps = {
+		"data-copilotkit": true,
+		"data-testid": "copilot-tool-call-group",
+		"data-appearance": appearance,
+		"data-state": status,
+		...props
+	};
+	const runningLabel = current && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "cpk:shrink-0 cpk:font-medium cpk-shimmer",
+		children: ["Running ", current.toolCall.function.name]
+	}), preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-xs cpk:opacity-70",
+		children: preview
+	})] });
+	if (appearance === "line") {
+		if (calls.length === 1 && !current) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...groupProps,
+			className: (0, tailwind_merge.twMerge)("cpk:my-2", className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallGroupContext.Provider, {
+				value: {
+					appearance: "line",
+					failedIds,
+					active: isActive
+				},
+				children: renderCall(latest)
+			})
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...groupProps,
+			className: (0, tailwind_merge.twMerge)("cpk:my-3", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				"aria-expanded": open,
+				"aria-controls": bodyId,
+				onClick: () => setOpen((value) => !value),
+				className: "cpk:m-0 cpk:inline-flex cpk:max-w-full cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:hover:text-foreground cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring",
+				children: [runningLabel || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "cpk:shrink-0 cpk:font-medium",
+						children: ["Used ", pluralize(calls.length, "tool")]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-xs cpk:opacity-70",
+						children: toolNames(calls)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls })
+				] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { open })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
+				open,
+				id: bodyId,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:mt-1 cpk:ml-1 cpk:border-l-2 cpk:border-border cpk:py-0.5 cpk:pl-3",
+					children: rows("line")
+				})
+			})]
+		});
+	}
+	if (appearance === "stack") {
+		if (calls.length === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...groupProps,
+			className: (0, tailwind_merge.twMerge)("cpk:py-1", className),
+			children: renderCall(latest)
+		});
+		const behind = open ? 0 : Math.min(calls.length - 1, 2);
+		const layer = "cpk:rounded-xl cpk:border cpk:border-border cpk:bg-card cpk:text-card-foreground";
+		const latestStatus = entryStatus(latest, isActive);
+		const latestPreview = entryPreview(latest);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...groupProps,
+			className: (0, tailwind_merge.twMerge)("cpk:my-3", className),
+			style: {
+				paddingBottom: behind * 6,
+				...props.style
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cpk:relative cpk:isolate",
+				children: [Array.from({ length: behind }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-hidden": "true",
+					className: (0, tailwind_merge.twMerge)(layer, "cpk:absolute cpk:inset-0"),
+					style: {
+						transform: `translateY(${(index + 1) * 6}px) scaleX(${1 - (index + 1) * .045})`,
+						zIndex: -1 - index,
+						opacity: 1 - (index + 1) * .28
+					}
+				}, index)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-expanded": open,
+					"aria-controls": open ? bodyId : void 0,
+					onClick: () => setOpen((value) => !value),
+					className: (0, tailwind_merge.twMerge)("cpk:relative cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:text-left cpk:transition-colors cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring", open ? "cpk:mb-1 cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-xs cpk:text-muted-foreground cpk:hover:text-foreground" : (0, tailwind_merge.twMerge)(layer, "cpk:w-full cpk:gap-2 cpk:px-3.5 cpk:py-2.5 cpk:text-[13px] cpk:shadow-[0_1px_2px_rgb(0_0_0/0.04)] cpk:hover:bg-accent")),
+					children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						pluralize(calls.length, "tool call"),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+							open: true,
+							className: "cpk:-rotate-90"
+						}),
+						"Collapse"
+					] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "cpk:flex cpk:min-w-0 cpk:flex-1 cpk:items-center cpk:gap-2 cpk:animate-[cpk-stack-drop_260ms_cubic-bezier(0.16,1,0.3,1)] cpk:motion-reduce:animate-none",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status: latestStatus }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: (0, tailwind_merge.twMerge)("cpk:shrink-0 cpk:font-mono cpk:font-medium cpk:text-foreground", latestStatus === "running" && "cpk-shimmer"),
+								children: latest.toolCall.function.name
+							}),
+							latestPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-muted-foreground",
+								children: latestPreview
+							})
+						]
+					}, latest.toolCall.id), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "cpk:ml-2 cpk:inline-flex cpk:shrink-0 cpk:items-center cpk:gap-2 cpk:text-xs cpk:text-muted-foreground",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cpk:tabular-nums",
+								children: pluralize(calls.length, "call")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+								open: false,
+								className: "cpk:rotate-90"
+							})
+						]
+					})] })
+				})]
+			}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: bodyId,
+				className: "cpk:[&>*]:animate-[cpk-stack-fan_300ms_cubic-bezier(0.16,1,0.3,1)_both] cpk:motion-reduce:[&>*]:animate-none",
+				children: calls.map((call) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderCall(call) }, call.toolCall.id))
+			})]
+		});
+	}
+	if (calls.length === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...groupProps,
+		className: (0, tailwind_merge.twMerge)("cpk:py-1", className),
+		children: renderCall(latest)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...groupProps,
+		className: (0, tailwind_merge.twMerge)("cpk:my-3 cpk:overflow-hidden cpk:rounded-xl cpk:border cpk:border-border cpk:bg-card cpk:text-card-foreground", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": bodyId,
+			onClick: () => setOpen((value) => !value),
+			className: "cpk:m-0 cpk:flex cpk:w-full cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-2.5 cpk:border-none cpk:bg-transparent cpk:px-3.5 cpk:py-2.5 cpk:text-left cpk:text-[13px] cpk:text-inherit cpk:transition-colors cpk:hover:bg-accent/60 cpk:focus-visible:outline-2 cpk:focus-visible:-outline-offset-2 cpk:focus-visible:outline-ring",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status }),
+				runningLabel || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "cpk:shrink-0 cpk:font-medium cpk:text-foreground",
+					children: ["Used ", pluralize(calls.length, "tool")]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-xs cpk:text-muted-foreground",
+					children: toolNames(calls)
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "cpk:ml-auto cpk:flex cpk:shrink-0 cpk:items-center cpk:gap-2 cpk:pl-2 cpk:text-xs cpk:text-muted-foreground",
+					children: [status === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cpk:tabular-nums",
+						children: status === "running" ? `${done} done` : statusLabels[status]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { open })]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
+			open,
+			id: bodyId,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: rows("card") })
+		})]
+	});
+}
+
 //#endregion
 //#region src/v2/hooks/use-default-render-tool.tsx
 /**
@@ -4384,7 +4895,8 @@ function useDefaultRenderTool(config, deps) {
 	const userRender = config?.render;
 	useRenderTool({
 		name: "*",
-		render: userRender ? (raw) => userRender(adaptRendererProps(raw)) : (raw) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(raw) })
+		render: userRender ? (raw) => userRender(adaptRendererProps(raw)) : (raw) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(raw) }),
+		group: userRender ? config?.group === true : true
 	}, deps);
 }
 /**
@@ -4405,9 +4917,23 @@ function safeStringifyForPre(value) {
 	}
 }
 function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result }) {
+	const group = (0, react.useContext)(ToolCallGroupContext);
 	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
 	const isActive = status === "inProgress" || status === "executing";
 	const isComplete = status === "complete";
+	if (group) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRow, {
+		"data-testid": "copilot-tool-render",
+		"data-tool-name": name,
+		"data-tool-call-id": toolCallId,
+		"data-status": status,
+		"data-args": safeStringifyForAttr(parameters),
+		"data-result": safeStringifyForAttr(result),
+		name,
+		parameters,
+		result,
+		status: isComplete ? group.failedIds.has(toolCallId) ? "failed" : "done" : group.active ? "running" : "stopped",
+		appearance: group.appearance
+	});
 	const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
 	const dotClassName = isActive ? "cpk:bg-amber-500" : isComplete ? "cpk:bg-emerald-500" : "cpk:bg-zinc-400";
 	const badgeClassName = isActive ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : isComplete ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
@@ -6104,38 +6630,227 @@ function useLearningContainersInCurrentThread({ learningContainers }) {
 	});
 }
 
+//#endregion
+//#region src/v2/components/chat/tool-call-display-context.ts
+/** @internal */
+const ToolCallDisplayContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/v2/components/chat/tool-call-layout.ts
+function contentLength(content) {
+	return typeof content === "string" ? content.length : JSON.stringify(content ?? "").length;
+}
+const entrySignature = ({ toolCall, toolMessage }) => [
+	toolCall.id,
+	toolCall.function.name,
+	toolCall.function.arguments.length,
+	toolMessage ? `${contentLength(toolMessage.content)}${toolMessage.error ? "!" : ""}` : "-"
+].join(":");
+function signatureOf(segments) {
+	return segments.map((segment) => segment.kind === "call" ? `c(${entrySignature(segment.call)})` : `g${segment.trailing ? "*" : ""}(${segment.calls.map(entrySignature).join(",")})`).join("|");
+}
+/** Index of tool results by the call they answer. */
+function getToolResults(messages) {
+	const results = /* @__PURE__ */ new Map();
+	for (const message of messages) if (message.role === "tool") results.set(message.toolCallId, message);
+	return results;
+}
+/**
+* Lays out the tool calls of every assistant message in `rendered`.
+*
+* Calls drawn by a renderer that opted into grouping join the group that's
+* open; anything else that shows between them closes it: assistant text, a
+* user, reasoning or activity message, or a call drawn by any other renderer. A group belongs to
+* the message where it starts, so later messages whose calls joined it render
+* no tool calls themselves.
+*
+* @param rendered - The messages as the chat renders them, in order.
+* @param all - Every message, for finding tool results (a transform may hide them).
+* @param renderers - The registered renderers.
+*/
+function getToolCallLayouts(rendered, all, renderers) {
+	const results = getToolResults(all);
+	const layouts = /* @__PURE__ */ new Map();
+	let open;
+	for (const message of rendered) {
+		if (message.role === "tool") continue;
+		if (message.role !== "assistant") {
+			open = void 0;
+			continue;
+		}
+		if (typeof message.content === "string" && message.content.trim()) open = void 0;
+		const segments = [];
+		layouts.set(message.id, segments);
+		const toolCalls = /* @__PURE__ */ new Map();
+		for (const toolCall of message.toolCalls ?? []) toolCalls.set(toolCall.id, toolCall);
+		for (const toolCall of toolCalls.values()) {
+			const entry = {
+				toolCall,
+				toolMessage: results.get(toolCall.id)
+			};
+			const name = toolCall.function.name;
+			const named = renderers.named.has(name);
+			const rendered = named || renderers.wildcard;
+			const groups = named ? renderers.groupedNames.has(name) : renderers.wildcardGroups;
+			if (!rendered || !groups) {
+				if (rendered) open = void 0;
+				segments.push({
+					kind: "call",
+					id: toolCall.id,
+					call: entry,
+					rendered
+				});
+			} else if (open) open.calls.push(entry);
+			else {
+				open = {
+					kind: "group",
+					id: toolCall.id,
+					calls: [entry],
+					trailing: false
+				};
+				segments.push(open);
+			}
+		}
+	}
+	if (open) open.trailing = true;
+	const layout = /* @__PURE__ */ new Map();
+	for (const [id, segments] of layouts) layout.set(id, {
+		segments,
+		signature: signatureOf(segments)
+	});
+	return layout;
+}
+/**
+* Finds the working phase of every reply in `rendered`: its messages up to the
+* last one that calls a tool. Text in there was narration; what follows is the
+* reply itself. Replies that called no tools are omitted, except the latest,
+* which may be about to.
+*/
+function getTurnWork(rendered, layouts) {
+	const turns = /* @__PURE__ */ new Map();
+	let start = 0;
+	while (start < rendered.length) {
+		let end = start;
+		while (end < rendered.length && rendered[end].role !== "user") end++;
+		const key = start > 0 ? rendered[start - 1].id : "start";
+		const visible = rendered.slice(start, end).filter((message) => message.role !== "tool");
+		const isLatest = end === rendered.length;
+		const calls = [];
+		for (const message of visible) for (const segment of layouts.get(message.id)?.segments ?? []) if (segment.kind === "group") calls.push(...segment.calls);
+		else if (segment.rendered) calls.push(segment.call);
+		const shown = new Set(calls.map((entry) => entry.toolCall.id));
+		let lastWork = -1;
+		visible.forEach((message, index) => {
+			if (message.role === "assistant" && message.toolCalls?.some((call) => shown.has(call.id))) lastWork = index;
+		});
+		const first = visible[0];
+		if (first && (calls.length > 0 || isLatest)) {
+			let lastAssistant = -1;
+			visible.forEach((message, index) => {
+				if (message.role === "assistant") lastAssistant = index;
+			});
+			const replyText = visible[lastAssistant]?.content;
+			const endsWithWork = lastAssistant >= 0 && lastAssistant <= lastWork && typeof replyText === "string" && replyText.trim().length > 0;
+			turns.set(key, {
+				key,
+				firstMessageId: first.id,
+				workMessageIds: new Set(visible.slice(0, lastWork + 1).map((message) => message.id)),
+				replyTextMessageId: endsWithWork ? visible[lastAssistant].id : void 0,
+				calls,
+				isLatest
+			});
+		}
+		start = end + 1;
+	}
+	return turns;
+}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatToolCallsView.tsx
-function CopilotChatToolCallsView({ message, messages = [] }) {
+const appearances = {
+	grouped: "card",
+	line: "line",
+	stacked: "stack"
+};
+function CopilotChatToolCallsView({ message, messages = [], display: displayProp, group }) {
 	const renderToolCall = useRenderToolCall();
+	const rendererNames = useToolCallRendererNames();
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const subscribe = (0, react.useCallback)((onChange) => copilotkit.ɵsubscribeToLearningConfigured(onChange), [copilotkit]);
 	const getSnapshot = () => copilotkit.ɵlearningConfigured;
 	const learningConfigured = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+	const context = (0, react.useContext)(ToolCallDisplayContext);
+	const display = displayProp ?? context?.display ?? "grouped";
+	const viewLayout = context?.layouts.get(message.id);
+	const layout = (0, react.useMemo)(() => {
+		if (display === "separate") return void 0;
+		return viewLayout ?? getToolCallLayouts([message], messages, rendererNames).get(message.id);
+	}, [
+		display,
+		viewLayout,
+		message,
+		messages,
+		rendererNames
+	]);
 	if (!message.toolCalls || message.toolCalls.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: message.toolCalls.map((toolCall) => {
+	const renderCall = (entry) => {
 		const rendered = renderToolCall({
-			toolCall,
-			toolMessage: messages.find((m) => m.role === "tool" && m.toolCallId === toolCall.id)
+			toolCall: entry.toolCall,
+			toolMessage: entry.toolMessage
 		});
-		if (rendered === null) return null;
-		if (!learningConfigured) return rendered;
+		if (rendered === null || !learningConfigured) return rendered;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-tool-call-id": toolCall.id,
+			"data-tool-call-id": entry.toolCall.id,
 			style: { display: "contents" },
 			children: rendered
-		}, toolCall.id);
+		});
+	};
+	if (!layout) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: message.toolCalls.map((toolCall) => {
+		const toolMessage = messages.find((m) => m.role === "tool" && m.toolCallId === toolCall.id);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderCall({
+			toolCall,
+			toolMessage
+		}) }, toolCall.id);
+	}) });
+	const workOpen = context?.workOpen.get(message.id);
+	const groupActive = (trailing) => trailing && (context ? context.isRunning : true);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: layout.segments.map((segment) => {
+		if (segment.kind === "call") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderCall(segment.call) }, segment.id);
+		if (display === "turn") {
+			const failedIds = new Set(segment.calls.filter((call) => call.toolMessage?.error).map((call) => call.toolCall.id));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
+				open: workOpen ?? true,
+				className: "cpk:-mx-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:px-2 cpk:py-1.5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallGroupContext.Provider, {
+						value: {
+							appearance: "line",
+							failedIds,
+							active: groupActive(segment.trailing)
+						},
+						children: segment.calls.map((call) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderCall(call) }, call.toolCall.id))
+					})
+				})
+			}, segment.id);
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderSlot(group, CopilotChatToolCallGroup, {
+			calls: segment.calls,
+			renderCall,
+			appearance: appearances[display] ?? "card",
+			isActive: groupActive(segment.trailing)
+		}) }, segment.id);
 	}) });
 }
 
 //#endregion
 //#region src/v2/components/chat/CopilotChatInspectorButton.tsx
 let shortcutsHidden = false;
-const listeners = /* @__PURE__ */ new Set();
+const listeners$1 = /* @__PURE__ */ new Set();
 const subscribe = (listener) => {
-	listeners.add(listener);
+	listeners$1.add(listener);
 	return () => {
-		listeners.delete(listener);
+		listeners$1.delete(listener);
 	};
 };
 const getSnapshot = () => shortcutsHidden;
@@ -6145,7 +6860,7 @@ function useInspectorShortcutsHidden() {
 }
 function hideShortcuts() {
 	shortcutsHidden = true;
-	listeners.forEach((listener) => listener());
+	listeners$1.forEach((listener) => listener());
 }
 function InspectorKiteIcon({ className, ...props }) {
 	const id = (0, react.useId)();
@@ -6411,9 +7126,321 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 	});
 }
 
+//#endregion
+//#region src/v2/components/ui/popover.tsx
+function Popover({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverAnchor({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Anchor, {
+		"data-slot": "popover-anchor",
+		...props
+	});
+}
+/**
+* Popover content in a portal, so it floats over the page instead of taking
+* room in the layout, with the CopilotKit style scope on it.
+*/
+const PopoverContent = react.forwardRef(({ className, align = "start", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
+	ref,
+	"data-copilotkit": true,
+	"data-copilotkit-popover": true,
+	"data-slot": "popover-content",
+	align,
+	sideOffset,
+	className: cn("cpk:z-50 cpk:outline-none cpk:data-[state=open]:animate-in cpk:data-[state=open]:fade-in-0 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-1 cpk:data-[side=top]:slide-in-from-bottom-1", className),
+	...props
+}) }));
+PopoverContent.displayName = "PopoverContent";
+
+//#endregion
+//#region src/v2/lib/message-feedback.ts
+/** Trajectory event name for a rating of one assistant message. */
+const MESSAGE_FEEDBACK_EVENT_NAME = "message.feedback";
+/** Longest comment kept, in characters; the rest is cut so the event stays small. */
+const MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH = 1e3;
+/** Longest excerpt of the rated response sent with the rating, in characters. */
+const RESPONSE_EXCERPT_LENGTH = 500;
+const ratings = /* @__PURE__ */ new Map();
+const listeners = /* @__PURE__ */ new Map();
+const threadKey = (agentId, threadId) => JSON.stringify([agentId, threadId]);
+const messageKey = (agentId, threadId, messageId) => JSON.stringify([
+	agentId,
+	threadId,
+	messageId
+]);
+/** Cuts `text` to `max` characters without splitting a surrogate pair. */
+const clip = (text, max) => {
+	const characters = Array.from(text);
+	return characters.length > max ? characters.slice(0, max).join("") : text;
+};
+/** The comment as kept and sent: trimmed and capped, or none. */
+const normalizeComment = (comment) => {
+	if (typeof comment !== "string") return void 0;
+	const text = clip(comment.trim(), MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH);
+	return text === "" ? void 0 : text;
+};
+/** The rating this page gave one message, if any. */
+function getMessageFeedback(agentId, threadId, messageId) {
+	return ratings.get(messageKey(agentId, threadId, messageId));
+}
+/** Calls `listener` whenever a rating in this Thread changes. */
+function subscribeToMessageFeedback(agentId, threadId, listener) {
+	const key = threadKey(agentId, threadId);
+	let set = listeners.get(key);
+	if (set === void 0) {
+		set = /* @__PURE__ */ new Set();
+		listeners.set(key, set);
+	}
+	set.add(listener);
+	return () => {
+		set.delete(listener);
+		if (set.size === 0) listeners.delete(key);
+	};
+}
+/**
+* Sets (or, with `null`, clears) this page's rating of one message and sends
+* it to the active Trajectory. Every change is a new event; the newest event
+* for a `feedbackId` is the current one. Like any Trajectory event, a change
+* made while no Trajectory captures, for example during a reconnect, is not
+* sent; the page still shows it.
+*/
+function setMessageFeedback(params) {
+	const { copilotkit, agentId, threadId, message } = params;
+	const comment = normalizeComment(params.feedback?.comment);
+	const feedback = params.feedback && {
+		rating: params.feedback.rating,
+		...comment ? { comment } : {}
+	};
+	const key = messageKey(agentId, threadId, message.id);
+	if (feedback) ratings.set(key, feedback);
+	else ratings.delete(key);
+	for (const listener of listeners.get(threadKey(agentId, threadId)) ?? []) listener();
+	const runId = copilotkit.getRunIdForMessage(agentId, threadId, message.id);
+	copilotkit.emitTrajectoryEvent(MESSAGE_FEEDBACK_EVENT_NAME, {
+		feedbackId: `${threadId}:${message.id}`,
+		threadId,
+		messageId: message.id,
+		agentId,
+		...runId ? { runId } : {},
+		rating: feedback?.rating ?? null,
+		...feedback?.comment ? { comment: feedback.comment } : {},
+		...copilotkit.ɵlearningCapturesAgentText ? { response: clip(message.content ?? "", RESPONSE_EXCERPT_LENGTH) } : {}
+	});
+}
+
+//#endregion
+//#region src/v2/components/chat/message-feedback.tsx
+/**
+* Set by the message view while Learning is on for this chat. Assistant
+* messages without it show thumbs only when the app passes its own handlers
+* or thumb slots.
+*/
+const MessageFeedbackScopeContext = (0, react.createContext)(null);
+const capturedCores = /* @__PURE__ */ new WeakSet();
+const rememberCapture = (copilotkit) => {
+	if (capturedCores.has(copilotkit)) return;
+	capturedCores.add(copilotkit);
+	const unsubscribe = copilotkit.ɵsubscribeToLearningConfigured(() => {
+		if (copilotkit.ɵlearningConfigured) return;
+		capturedCores.delete(copilotkit);
+		unsubscribe();
+	});
+};
+/**
+* Whether the thumbs record feedback for Learning. True once a Trajectory of
+* this Core has started and as long as Learning stays configured, also while
+* capture reconnects or is stopped, so the buttons do not flicker. Ratings
+* given meanwhile still show but, like any Trajectory event, are not
+* sent. A capture that never starts (for example without a license) leaves it
+* false.
+*/
+function useLearningFeedbackEnabled(copilotkit) {
+	const configured = (0, react.useSyncExternalStore)((0, react.useCallback)((onChange) => copilotkit.ɵsubscribeToLearningConfigured(onChange), [copilotkit]), () => copilotkit.ɵlearningConfigured, () => false);
+	const capturing = (0, react.useSyncExternalStore)((0, react.useCallback)((onChange) => copilotkit.subscribe({ onTrajectoryChanged: onChange }).unsubscribe, [copilotkit]), () => copilotkit.trajectoryId !== null, () => false);
+	(0, react.useEffect)(() => {
+		if (capturing) rememberCapture(copilotkit);
+	}, [capturing, copilotkit]);
+	return configured && (capturing || capturedCores.has(copilotkit));
+}
+const noSubscription = () => () => {};
+/** Feedback controls for `message`, or `null` when this chat collects none. */
+function useMessageFeedback(message) {
+	const scope = (0, react.useContext)(MessageFeedbackScopeContext);
+	const subscribe = (0, react.useCallback)((onChange) => scope ? subscribeToMessageFeedback(scope.agentId, scope.threadId, onChange) : noSubscription(), [scope]);
+	const getSnapshot = () => scope ? getMessageFeedback(scope.agentId, scope.threadId, message.id) : void 0;
+	const feedback = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+	if (!scope) return null;
+	const save = (next) => setMessageFeedback({
+		...scope,
+		message,
+		feedback: next
+	});
+	return {
+		feedback,
+		rate: (rating) => {
+			if (feedback?.rating !== rating) save({ rating });
+		},
+		clear: () => {
+			if (feedback) save(null);
+		},
+		comment: (comment) => {
+			if (feedback) save({
+				rating: feedback.rating,
+				comment
+			});
+		}
+	};
+}
+/**
+* How long the pointer may be away from the rating and its comment before the
+* comment closes: enough to cross the gap between them, short enough that
+* passing over a rating does not leave it open.
+*/
+const FEEDBACK_COMMENT_CLOSE_DELAY_MS = 150;
+/**
+* Drives the comment popover of a rated message.
+*
+* It opens when a rating is given and whenever the pointer or keyboard focus
+* reaches the chosen thumb, with the saved comment in the field. It closes by
+* itself shortly after the pointer leaves the thumb and the popover, unless
+* focus is in the field: then it stays until focus moves away, Enter, or
+* Escape. Closing saves a changed comment; Escape, a click on a thumb, and
+* removing the rating discard it.
+*/
+function useFeedbackComment(controls) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)("");
+	const [focusRequest, setFocusRequest] = (0, react.useState)(0);
+	const inputRef = (0, react.useRef)(null);
+	const timer = (0, react.useRef)(void 0);
+	const editing = (0, react.useRef)(false);
+	const focusWaiting = (0, react.useRef)(false);
+	const pointerOver = (0, react.useRef)(false);
+	const returning = (0, react.useRef)(false);
+	const latest = (0, react.useRef)({
+		controls,
+		draft,
+		open
+	});
+	latest.current = {
+		...latest.current,
+		controls,
+		draft,
+		open
+	};
+	const takeFocusRequest = (0, react.useCallback)(() => {
+		const waiting = focusWaiting.current;
+		focusWaiting.current = false;
+		return waiting;
+	}, []);
+	const cancelClose = (0, react.useCallback)(() => {
+		if (timer.current === void 0) return;
+		clearTimeout(timer.current);
+		timer.current = void 0;
+	}, []);
+	(0, react.useEffect)(() => cancelClose, [cancelClose]);
+	const savedComment = (0, react.useCallback)(() => latest.current.controls?.feedback?.comment ?? "", []);
+	(0, react.useEffect)(() => () => {
+		const { open: wasOpen, controls: current, draft: text } = latest.current;
+		if (wasOpen && current?.feedback && text.trim() !== savedComment()) current.comment(text);
+	}, []);
+	const close = (0, react.useCallback)(({ save = true } = {}) => {
+		cancelClose();
+		focusWaiting.current = false;
+		pointerOver.current = false;
+		if (!latest.current.open) return;
+		const current = latest.current.controls;
+		if (save && current?.feedback && latest.current.draft.trim() !== savedComment()) current.comment(latest.current.draft);
+		editing.current = false;
+		latest.current = {
+			...latest.current,
+			open: false
+		};
+		setOpen(false);
+	}, [cancelClose, savedComment]);
+	const show = ({ comment, focus }) => {
+		cancelClose();
+		latest.current = {
+			...latest.current,
+			open: true,
+			draft: comment
+		};
+		setDraft(comment);
+		if (focus) {
+			focusWaiting.current = true;
+			setFocusRequest((request) => request + 1);
+		}
+		setOpen(true);
+	};
+	return {
+		open,
+		draft,
+		setDraft,
+		focusRequest,
+		takeFocusRequest,
+		inputRef,
+		show,
+		enter: (via = "focus") => {
+			cancelClose();
+			if (via === "pointer") pointerOver.current = true;
+			if (returning.current) return;
+			if (!latest.current.open && latest.current.controls?.feedback) show({
+				comment: savedComment(),
+				focus: false
+			});
+		},
+		leave: (via = "focus") => {
+			if (via === "pointer") pointerOver.current = false;
+			else if (pointerOver.current) return;
+			cancelClose();
+			timer.current = setTimeout(() => {
+				timer.current = void 0;
+				if (!editing.current) close();
+			}, FEEDBACK_COMMENT_CLOSE_DELAY_MS);
+		},
+		setEditing: (value) => {
+			editing.current = value;
+		},
+		close,
+		returnFocus: (target) => {
+			returning.current = true;
+			try {
+				target?.focus();
+			} finally {
+				returning.current = false;
+			}
+		}
+	};
+}
+
 //#endregion
 //#region src/v2/components/chat/CopilotChatAssistantMessage.tsx
 /**
+* In the `"turn"` tool-call display, text in a reply's working phase was
+* narration: it fades to muted once a call follows it, and folds away with the
+* rest of the work when the reply is done. The wrapper is there for every
+* message in that display, so text that turns into narration keeps its node
+* (and its place) rather than remounting.
+*/
+function WorkText({ messageId, children }) {
+	const context = (0, react.useContext)(ToolCallDisplayContext);
+	if (context?.display !== "turn") return children;
+	const open = context.workTextOpen.get(messageId);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
+		open: open ?? true,
+		className: "cpk:-mx-2",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cpk:px-2",
+			"data-work-text": open === void 0 ? "reply" : "narration",
+			children
+		})
+	});
+}
+/**
 * Binds the Inspector action to the active chat without making the full
 * assistant message subscribe to chat configuration changes.
 */
@@ -6428,31 +7455,216 @@ function BoundInspectorButton({ inspectorButton, messageId, openInspector, ...pr
 		})
 	});
 }
-function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, onThumbsUp, onThumbsDown, onReadAloud, onRegenerate, additionalToolbarItems, toolbarVisible = true, markdownRenderer, toolbar, copyButton, inspectorButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton, toolCallsView, children, className, ...props }) {
+/** Whether focus came from the keyboard; a pointer click also focuses buttons. */
+function isFocusVisible(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+}
+const HIDDEN_TOO = {
+	checkVisibilityCSS: true,
+	visibilityProperty: true
+};
+const FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]"
+].map((selector) => `${selector}:not([tabindex="-1"]):not([data-radix-focus-guard])`).join(", ");
+/** Approximately the element Tab reaches after `element`, outside `skip`. */
+function nextFocusable(element, skip) {
+	const all = Array.from(element.ownerDocument.querySelectorAll(FOCUSABLE)).filter((candidate) => candidate === element || !skip?.contains(candidate) && !candidate.closest("[hidden], [inert]"));
+	const index = all.indexOf(element);
+	return index === -1 ? null : all[index + 1] ?? null;
+}
+/**
+* The comment popover of a rated message, pointing at the chosen thumb. Kept
+* apart so only it, not the whole message, follows chat configuration.
+*
+* The popover lives in a portal, so it keeps keyboard order by hand: Shift+Tab
+* from its start returns to the thumb, Tab from its end moves on to the
+* control after the thumb, and Enter or Escape inside it returns to the thumb.
+*/
+function FeedbackCommentPopover({ feedbackComment, comment, savedComment, rating, anchor, messageId }) {
+	const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+	const contentRef = (0, react.useRef)(null);
+	const focusInside = () => contentRef.current?.contains(document.activeElement) ?? false;
+	const { focusRequest, takeFocusRequest, inputRef } = comment;
+	const focusField = (0, react.useCallback)(() => {
+		if (inputRef.current && takeFocusRequest()) inputRef.current.focus();
+	}, [inputRef, takeFocusRequest]);
+	(0, react.useEffect)(() => focusField(), [focusRequest, focusField]);
+	/** Whether `target` is a thumb of this message, whose click decides itself. */
+	const isOwnThumb = (target) => {
+		return (target instanceof Element ? target.closest("[data-copilotkit-rating]") : null)?.closest("[data-message-id]")?.getAttribute("data-message-id") === messageId;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Popover, {
+		open: comment.open,
+		onOpenChange: (open) => {
+			if (!open) comment.close();
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverAnchor, { virtualRef: anchor }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContent, {
+			ref: contentRef,
+			side: "bottom",
+			collisionPadding: 8,
+			hideWhenDetached: true,
+			"aria-label": labels.assistantMessageFeedbackCommentPlaceholder,
+			"data-copilotkit-ignore": true,
+			onOpenAutoFocus: (event) => {
+				event.preventDefault();
+				focusField();
+			},
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			onInteractOutside: (event) => {
+				if (isOwnThumb(event.target)) event.preventDefault();
+			},
+			onEscapeKeyDown: (event) => {
+				const returnFocus = focusInside();
+				if (returnFocus) event.stopPropagation();
+				comment.close({ save: false });
+				if (returnFocus) comment.returnFocus(anchor.current);
+			},
+			onKeyDown: (event) => {
+				if (event.key !== "Tab") return;
+				const focusables = Array.from(contentRef.current?.querySelectorAll(FOCUSABLE) ?? []);
+				if (!(event.shiftKey ? document.activeElement === focusables[0] : document.activeElement === focusables[focusables.length - 1]) || !anchor.current?.isConnected) return;
+				event.preventDefault();
+				const target = event.shiftKey ? anchor.current : nextFocusable(anchor.current, contentRef.current) ?? anchor.current;
+				comment.close();
+				if (target === anchor.current) comment.returnFocus(target);
+				else target.focus();
+			},
+			onPointerEnter: () => comment.enter("pointer"),
+			onPointerLeave: () => comment.leave("pointer"),
+			className: "cpk:z-[1300]",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderSlot(feedbackComment, CopilotChatAssistantMessage.FeedbackComment, {
+				value: comment.draft,
+				savedComment,
+				inputRef: comment.inputRef,
+				onChange: comment.setDraft,
+				onSubmit: () => {
+					comment.close();
+					comment.returnFocus(anchor.current);
+				},
+				onEditingChange: comment.setEditing,
+				onLeave: (next) => {
+					if (next && (contentRef.current?.contains(next) || isOwnThumb(next))) return;
+					comment.leave();
+				}
+			}) }, rating)
+		})]
+	});
+}
+function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, onThumbsUp, onThumbsDown, onReadAloud, onRegenerate, additionalToolbarItems, toolbarVisible = true, markdownRenderer, toolbar, copyButton, inspectorButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton, feedbackComment: feedbackCommentSlot, toolCallsView, children, className, ...props }) {
 	useKatexStyles();
 	const { isInspectorEnabled, openInspector } = useCopilotKitInspector();
 	const shortcutsHidden = useInspectorShortcutsHidden();
 	const showInspectorShortcut = isInspectorEnabled && !shortcutsHidden;
+	const feedback = useMessageFeedback(message);
+	const comment = useFeedbackComment(feedback);
+	const rating = feedback?.feedback?.rating;
+	const root = (0, react.useRef)(null);
+	const commentAnchor = (0, react.useRef)(null);
+	const commentRating = (0, react.useRef)(rating);
+	(0, react.useLayoutEffect)(() => {
+		if (comment.open && !commentAnchor.current?.isConnected && rating) commentAnchor.current = root.current?.querySelector(`[data-copilotkit-rating="${rating}"]`) ?? root.current?.querySelector("button[aria-pressed=\"true\"]") ?? null;
+	});
+	/**
+	* Thumbs are toggles: a new rating is saved and opens its comment, and
+	* clicking the chosen thumb again removes the rating. A keyboard click
+	* (`detail` 0) moves focus into the comment, as there is no pointer.
+	* Custom thumb slots may call `onClick` without an event.
+	*
+	* @returns Whether the app's handler should run: true for a new rating and
+	* whenever this chat does not record ratings, false when one is removed.
+	*/
+	const rate = (value, event) => {
+		if (!feedback) return true;
+		if (rating === value) {
+			comment.close({ save: false });
+			feedback.clear();
+			return false;
+		}
+		feedback.rate(value);
+		commentRating.current = value;
+		commentAnchor.current = event?.currentTarget ?? null;
+		comment.show({
+			comment: "",
+			focus: event?.detail === 0
+		});
+		return true;
+	};
+	/** Props that let the chosen thumb open and point at its comment. */
+	const thumbFeedbackProps = (value) => {
+		if (!feedback) return {};
+		const thumb = { "data-copilotkit-rating": value };
+		if (rating !== value) return {
+			...thumb,
+			"aria-pressed": false
+		};
+		const enter = (target, via) => {
+			if (!comment.open) commentRating.current = value;
+			commentAnchor.current = target;
+			comment.enter(via);
+		};
+		return {
+			...thumb,
+			"aria-pressed": true,
+			"aria-haspopup": "dialog",
+			"aria-expanded": comment.open,
+			onPointerEnter: (event) => {
+				if (event.pointerType !== "touch") enter(event.currentTarget, "pointer");
+			},
+			onPointerLeave: (event) => {
+				if (event.pointerType !== "touch") comment.leave("pointer");
+			},
+			onFocus: (event) => {
+				if (isFocusVisible(event.currentTarget)) enter(event.currentTarget, "focus");
+			},
+			onBlur: () => comment.leave(),
+			onKeyDown: (event) => {
+				const input = comment.inputRef.current;
+				if (event.key === "Tab" && !event.shiftKey && comment.open && input && input.checkVisibility?.(HIDDEN_TOO) !== false) {
+					event.preventDefault();
+					input.focus();
+				}
+			}
+		};
+	};
 	const boundMarkdownRenderer = renderSlot(markdownRenderer, CopilotChatAssistantMessage.MarkdownRenderer, { content: message.content || "" });
 	const boundCopyButton = renderSlot(copyButton, CopilotChatAssistantMessage.CopyButton, { onClick: async () => {
 		if (message.content) return await (0, _copilotkit_shared.copyToClipboard)(message.content);
 		return false;
 	} });
-	const boundThumbsUpButton = renderSlot(thumbsUpButton, CopilotChatAssistantMessage.ThumbsUpButton, { onClick: onThumbsUp ? () => onThumbsUp(message) : void 0 });
+	const boundThumbsUpButton = renderSlot(thumbsUpButton, CopilotChatAssistantMessage.ThumbsUpButton, {
+		onClick: onThumbsUp || feedback ? (event) => {
+			if (rate("up", event)) onThumbsUp?.(message);
+		} : void 0,
+		...thumbFeedbackProps("up")
+	});
 	const boundInspectorButton = showInspectorShortcut ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundInspectorButton, {
 		inspectorButton,
 		messageId: message.id,
 		openInspector
 	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
-	const boundThumbsDownButton = renderSlot(thumbsDownButton, CopilotChatAssistantMessage.ThumbsDownButton, { onClick: onThumbsDown ? () => onThumbsDown(message) : void 0 });
+	const boundThumbsDownButton = renderSlot(thumbsDownButton, CopilotChatAssistantMessage.ThumbsDownButton, {
+		onClick: onThumbsDown || feedback ? (event) => {
+			if (rate("down", event)) onThumbsDown?.(message);
+		} : void 0,
+		...thumbFeedbackProps("down")
+	});
 	const boundReadAloudButton = renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud ? () => onReadAloud(message) : void 0 });
 	const boundRegenerateButton = renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate ? () => onRegenerate(message) : void 0 });
 	const boundToolbar = renderSlot(toolbar, CopilotChatAssistantMessage.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-1",
 		children: [
 			boundCopyButton,
-			(onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
-			(onThumbsDown || thumbsDownButton) && boundThumbsDownButton,
+			(onThumbsUp || thumbsUpButton || feedback) && boundThumbsUpButton,
+			(onThumbsDown || thumbsDownButton || feedback) && boundThumbsDownButton,
 			(onReadAloud || readAloudButton) && boundReadAloudButton,
 			(onRegenerate || regenerateButton) && boundRegenerateButton,
 			additionalToolbarItems,
@@ -6466,11 +7678,31 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 	const hasContent = !!(message.content && message.content.trim().length > 0);
 	const isLatestAssistantMessage = message.role === "assistant" && (isLatest ?? messages?.[messages.length - 1]?.id === message.id);
 	const shouldShowToolbar = toolbarVisible && (hasContent || showInspectorShortcut) && !(isRunning && isLatestAssistantMessage);
-	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	const { open: commentOpen, close: closeComment } = comment;
+	(0, react.useEffect)(() => {
+		if (!commentOpen) return;
+		if (rating !== commentRating.current) closeComment({ save: false });
+		else if (!shouldShowToolbar) closeComment();
+	}, [
+		commentOpen,
+		shouldShowToolbar,
+		rating,
+		closeComment
+	]);
+	const feedbackComment = feedback?.feedback && shouldShowToolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackCommentPopover, {
+		feedbackComment: feedbackCommentSlot,
+		comment,
+		savedComment: feedback.feedback.comment ?? "",
+		rating: feedback.feedback.rating,
+		anchor: commentAnchor,
+		messageId: message.id
+	});
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: root,
 		"data-copilotkit": true,
 		"data-message-id": message.id,
 		style: { display: "contents" },
-		children: children({
+		children: [children({
 			markdownRenderer: boundMarkdownRenderer,
 			toolbar: boundToolbar,
 			toolCallsView: boundToolCallsView,
@@ -6489,21 +7721,26 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			onRegenerate,
 			additionalToolbarItems,
 			toolbarVisible: shouldShowToolbar
-		})
+		}), feedbackComment]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: root,
 		"data-copilotkit": true,
 		"data-testid": "copilot-assistant-message",
 		className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitAssistantMessage", className),
 		...props,
 		"data-message-id": message.id,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:prose cpk:max-w-full cpk:break-words cpk:dark:prose-invert",
-				children: boundMarkdownRenderer
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkText, {
+				messageId: message.id,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:prose cpk:max-w-full cpk:break-words cpk:dark:prose-invert",
+					children: boundMarkdownRenderer
+				})
 			}),
 			boundToolCallsView,
-			shouldShowToolbar && boundToolbar
+			shouldShowToolbar && boundToolbar,
+			feedbackComment
 		]
 	});
 }
@@ -6519,20 +7756,27 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 		...props
 	});
 	const ToolbarButton = _CopilotChatAssistantMessage.ToolbarButton = ({ title, tooltip, tooltipClassName, children, ...props }) => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				type: "button",
-				variant: "assistantMessageToolbarButton",
-				"aria-label": title,
-				...props,
-				children
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
-			side: "bottom",
-			className: tooltipClassName,
-			children: tooltip ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: title })
-		})] });
+		const [tooltipOpen, setTooltipOpen] = (0, react.useState)(false);
+		const popupOpen = props["aria-expanded"] === true;
+		if (popupOpen && tooltipOpen) setTooltipOpen(false);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, {
+			open: tooltipOpen && !popupOpen,
+			onOpenChange: (open) => setTooltipOpen(open && !popupOpen),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					type: "button",
+					variant: "assistantMessageToolbarButton",
+					"aria-label": title,
+					...props,
+					children
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+				side: "bottom",
+				className: tooltipClassName,
+				children: tooltip ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: title })
+			})]
+		});
 	};
 	_CopilotChatAssistantMessage.CopyButton = ({ className, title, onClick, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
@@ -6571,7 +7815,10 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			"data-testid": "copilot-thumbs-up-button",
 			title: title || labels.assistantMessageToolbarThumbsUpLabel,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsUp, { className: "cpk:size-[18px]" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsUp, {
+				className: "cpk:size-[18px]",
+				fill: props["aria-pressed"] === true ? "currentColor" : "none"
+			})
 		});
 	};
 	_CopilotChatAssistantMessage.ThumbsDownButton = ({ title, ...props }) => {
@@ -6580,7 +7827,45 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			"data-testid": "copilot-thumbs-down-button",
 			title: title || labels.assistantMessageToolbarThumbsDownLabel,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsDown, { className: "cpk:size-[18px]" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsDown, {
+				className: "cpk:size-[18px]",
+				fill: props["aria-pressed"] === true ? "currentColor" : "none"
+			})
+		});
+	};
+	_CopilotChatAssistantMessage.FeedbackComment = ({ value, savedComment, inputRef, onChange, onSubmit, onEditingChange, onLeave, className }) => {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+		const changed = value.trim() !== savedComment;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			"data-testid": "copilot-feedback-comment",
+			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:w-80 cpk:max-w-[calc(100vw-1rem)] cpk:items-center cpk:gap-1 cpk:rounded-full cpk:border cpk:border-border cpk:bg-background cpk:py-0.5 cpk:pl-3 cpk:pr-0.5 cpk:text-sm cpk:shadow-md", className),
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit();
+			},
+			onFocus: () => onEditingChange?.(true),
+			onBlur: (event) => {
+				const next = event.relatedTarget instanceof Element ? event.relatedTarget : null;
+				if (event.currentTarget.contains(next)) return;
+				if (typeof document !== "undefined" && !document.hasFocus()) return;
+				onEditingChange?.(false);
+				onLeave?.(next);
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				value,
+				maxLength: MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH,
+				onChange: (event) => onChange(event.target.value),
+				placeholder: labels.assistantMessageFeedbackCommentPlaceholder,
+				"aria-label": labels.assistantMessageFeedbackCommentPlaceholder,
+				className: "cpk:min-w-0 cpk:flex-1 cpk:bg-transparent cpk:py-1 cpk:text-foreground cpk:outline-none cpk:placeholder:text-muted-foreground"
+			}), changed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				type: "submit",
+				variant: "assistantMessageToolbarButton",
+				"aria-label": labels.assistantMessageFeedbackCommentSubmitLabel,
+				title: labels.assistantMessageFeedbackCommentSubmitLabel,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk:size-[16px]" })
+			})]
 		});
 	};
 	_CopilotChatAssistantMessage.ReadAloudButton = ({ title, ...props }) => {
@@ -6608,6 +7893,7 @@ CopilotChatAssistantMessage.CopyButton.displayName = "CopilotChatAssistantMessag
 CopilotChatAssistantMessage.InspectorButton.displayName = "CopilotChatAssistantMessage.InspectorButton";
 CopilotChatAssistantMessage.ThumbsUpButton.displayName = "CopilotChatAssistantMessage.ThumbsUpButton";
 CopilotChatAssistantMessage.ThumbsDownButton.displayName = "CopilotChatAssistantMessage.ThumbsDownButton";
+CopilotChatAssistantMessage.FeedbackComment.displayName = "CopilotChatAssistantMessage.FeedbackComment";
 CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantMessage.ReadAloudButton";
 CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
@@ -6913,6 +8199,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		});
 	};
 	_CopilotChatUserMessage.BranchNavigation = ({ className, currentBranch = 0, numberOfBranches = 1, onSwitchToBranch, message, ...props }) => {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		if (!numberOfBranches || numberOfBranches <= 1 || !onSwitchToBranch) return null;
 		const canGoPrev = currentBranch > 0;
 		const canGoNext = currentBranch < numberOfBranches - 1;
@@ -6931,6 +8218,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 					}),
 					disabled: !canGoPrev,
 					className: "cpk:h-6 cpk:w-6 cpk:p-0",
+					"aria-label": labels.userMessageToolbarPreviousBranchLabel,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "cpk:size-[20px]" })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -6951,6 +8239,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 					}),
 					disabled: !canGoNext,
 					className: "cpk:h-6 cpk:w-6 cpk:p-0",
+					"aria-label": labels.userMessageToolbarNextBranchLabel,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "cpk:size-[20px]" })
 				})
 			]
@@ -6971,7 +8260,7 @@ var CopilotChatUserMessage_default = CopilotChatUserMessage;
 /**
 * Formats an elapsed duration (in seconds) to a human-readable string.
 */
-function formatDuration(seconds) {
+function formatDuration$1(seconds) {
 	if (seconds < 1) return "a few seconds";
 	if (seconds < 60) return `${Math.round(seconds)} seconds`;
 	const mins = Math.floor(seconds / 60);
@@ -7009,7 +8298,7 @@ function CopilotChatReasoningMessage({ message, messages, isRunning, isLatest: i
 		userToggledRef.current = true;
 		setIsOpen((prev) => !prev);
 	} : void 0;
-	const label = isStreaming ? "Thinking…" : `Thought for ${formatDuration(elapsed)}`;
+	const label = isStreaming ? "Thinking…" : `Thought for ${formatDuration$1(elapsed)}`;
 	const boundHeader = renderSlot(header, CopilotChatReasoningMessage.Header, {
 		isOpen,
 		label,
@@ -7231,6 +8520,71 @@ const ScrollElementContext = react.default.createContext(null);
 */
 const ScrollPinnedContext = react.default.createContext(false);
 
+//#endregion
+//#region src/v2/components/chat/CopilotChatWorkSummary.tsx
+/** "45s", "1m 5s", "2m". Used for the live timer and the final duration. */
+function formatDuration(ms) {
+	const seconds = Math.max(0, Math.floor(ms / 1e3));
+	if (seconds < 60) return `${seconds}s`;
+	const minutes = Math.floor(seconds / 60);
+	const rest = seconds % 60;
+	return rest ? `${minutes}m ${rest}s` : `${minutes}m`;
+}
+/** Re-renders every second while `active`, returning the current time. */
+function useNow(active) {
+	const [now, setNow] = (0, react.useState)(() => Date.now());
+	(0, react.useEffect)(() => {
+		if (!active) return;
+		setNow(Date.now());
+		const timer = setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(timer);
+	}, [active]);
+	return now;
+}
+/**
+* The line at the top of a reply in the `"turn"` tool-call display. While the
+* agent works it reads "Working 4s"; once the reply is done it reads "Worked
+* for 9s · 7 tools" and toggles the work it folded away.
+*/
+function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSince, className, ...props }) {
+	const now = useNow(isWorking);
+	const failed = calls.filter((call) => call.toolMessage?.error).length;
+	const liveMs = elapsedMs !== void 0 && workingSince !== void 0 ? elapsedMs + Math.max(0, now - workingSince) : void 0;
+	const duration = elapsedMs !== void 0 ? formatDuration(Math.max(1e3, elapsedMs)) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		"data-copilotkit": true,
+		"data-testid": "copilot-work-summary",
+		"data-state": isWorking ? "working" : "done",
+		"aria-expanded": isOpen,
+		className: (0, tailwind_merge.twMerge)("cpk:m-0 cpk:inline-flex cpk:max-w-full cpk:cursor-pointer cpk:items-center cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:hover:text-foreground cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring", className),
+		...props,
+		children: [isWorking ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cpk:font-medium cpk-shimmer",
+			children: "Working"
+		}), liveMs !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cpk:text-xs cpk:tabular-nums cpk:opacity-70",
+			children: formatDuration(liveMs)
+		})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:font-medium",
+				children: duration ? `Worked for ${duration}` : `Used ${pluralize(calls.length, "tool")}`
+			}),
+			duration && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk:text-xs cpk:opacity-70",
+				children: pluralize(calls.length, "tool")
+			}),
+			failed > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "cpk:text-destructive",
+				children: [failed, " failed"]
+			})
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+			"aria-hidden": "true",
+			className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200", isOpen && "cpk:rotate-90")
+		})]
+	});
+}
+
 //#endregion
 //#region src/v2/components/intelligence-indicator/IntelligenceIndicatorView.tsx
 /**
@@ -7717,7 +9071,7 @@ function messageGroup(group) {
 }
 const GROUP_ROW_KEY_PREFIX = "copilotkit-group:";
 const VIRTUALIZE_THRESHOLD = 50;
-function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, intelligenceIndicator, isRunning = false, transformMessages, groupMessages, children, className, ...props }) {
+function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, intelligenceIndicator, workSummary, isRunning = false, transformMessages, groupMessages, messageFeedback = true, toolCallDisplay = "grouped", children, className, ...props }) {
 	const isPinnedToBottom = (0, react.useContext)(ScrollPinnedContext);
 	const renderCustomMessage = useRenderCustomMessages();
 	const { renderActivityMessage } = useRenderActivityMessage();
@@ -7758,6 +9112,100 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		transformedMessages
 	]);
 	const latestRenderedId = renderedMessages[renderedMessages.length - 1]?.id;
+	const rendererNames = useToolCallRendererNames();
+	const toolCallLayouts = (0, react.useMemo)(() => toolCallDisplay === "separate" ? /* @__PURE__ */ new Map() : getToolCallLayouts(renderedMessages, messages, rendererNames), [
+		toolCallDisplay,
+		renderedMessages,
+		messages,
+		rendererNames
+	]);
+	const turnWork = (0, react.useMemo)(() => toolCallDisplay === "turn" ? getTurnWork(renderedMessages, toolCallLayouts) : void 0, [
+		toolCallDisplay,
+		renderedMessages,
+		toolCallLayouts
+	]);
+	const turnByFirstMessage = (0, react.useMemo)(() => {
+		const byFirst = /* @__PURE__ */ new Map();
+		for (const turn of turnWork?.values() ?? []) byFirst.set(turn.firstMessageId, turn);
+		return byFirst;
+	}, [turnWork]);
+	let latestTurnKey = "start";
+	for (let i = renderedMessages.length - 1; i >= 0; i--) if (renderedMessages[i].role === "user") {
+		latestTurnKey = renderedMessages[i].id;
+		break;
+	}
+	const isWorkingOn = (turnKey) => isRunning && turnKey === latestTurnKey;
+	const [toggledTurns, setToggledTurns] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const isWorkOpen = (turnKey) => toggledTurns.get(turnKey) ?? isWorkingOn(turnKey);
+	const workTimesRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	if (toolCallDisplay === "turn") {
+		const now = Date.now();
+		const workTimes = workTimesRef.current;
+		if (isRunning) {
+			const times = workTimes.get(latestTurnKey);
+			if (times) times.workingSince ??= now;
+			else if (renderedMessages[renderedMessages.length - 1]?.role === "user") workTimes.set(latestTurnKey, {
+				elapsedMs: 0,
+				workingSince: now
+			});
+		} else for (const times of workTimes.values()) {
+			if (times.workingSince === void 0) continue;
+			times.elapsedMs += now - times.workingSince;
+			times.workingSince = void 0;
+		}
+	}
+	const { workOpen, workTextOpen } = (0, react.useMemo)(() => {
+		const open = /* @__PURE__ */ new Map();
+		const textOpen = /* @__PURE__ */ new Map();
+		for (const turn of turnWork?.values() ?? []) {
+			const turnOpen = toggledTurns.get(turn.key) ?? (isRunning && turn.key === latestTurnKey);
+			for (const id of turn.workMessageIds) {
+				open.set(id, turnOpen);
+				if (id !== turn.replyTextMessageId) textOpen.set(id, turnOpen);
+			}
+		}
+		return {
+			workOpen: open,
+			workTextOpen: textOpen
+		};
+	}, [
+		turnWork,
+		toggledTurns,
+		isRunning,
+		latestTurnKey
+	]);
+	const toolCallDisplayContext = (0, react.useMemo)(() => ({
+		display: toolCallDisplay,
+		isRunning,
+		layouts: toolCallLayouts,
+		workOpen,
+		workTextOpen
+	}), [
+		toolCallDisplay,
+		isRunning,
+		toolCallLayouts,
+		workOpen,
+		workTextOpen
+	]);
+	const renderWorkSummary = (turnKey, calls) => {
+		const working = isWorkingOn(turnKey);
+		const open = isWorkOpen(turnKey);
+		const times = workTimesRef.current.get(turnKey);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
+			open: working || calls.length > 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:pt-1 cpk:pb-2",
+				children: renderSlot(workSummary, CopilotChatWorkSummary, {
+					isWorking: working,
+					isOpen: open,
+					calls,
+					elapsedMs: times?.elapsedMs,
+					workingSince: times?.workingSince,
+					onClick: () => setToggledTurns((toggled) => new Map(toggled).set(turnKey, !open))
+				})
+			})
+		}, `work-summary-${turnKey}`);
+	};
 	const transformDuplicateId = (0, react.useMemo)(() => {
 		if (process.env.NODE_ENV === "production" || !transformMessages && !groupMessages) return;
 		const seen = /* @__PURE__ */ new Set();
@@ -7823,6 +9271,18 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	const { Component: AssistantComponent, slotProps: assistantSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(assistantMessage, CopilotChatAssistantMessage_default), [assistantMessage]);
 	const agentId = config?.agentId;
 	const threadId = config?.threadId;
+	const learningFeedbackEnabled = useLearningFeedbackEnabled(copilotkit);
+	const feedbackScope = (0, react.useMemo)(() => messageFeedback && learningFeedbackEnabled && agentId !== void 0 && threadId !== void 0 ? {
+		copilotkit,
+		agentId,
+		threadId
+	} : null, [
+		messageFeedback,
+		learningFeedbackEnabled,
+		copilotkit,
+		agentId,
+		threadId
+	]);
 	const assistantSlotPropsWithFeedback = (0, react.useMemo)(() => {
 		const onThumbsUp = assistantSlotProps?.onThumbsUp;
 		const onThumbsDown = assistantSlotProps?.onThumbsDown;
@@ -7889,7 +9349,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			measuredRef.current.total = total - (sizes.get(index) ?? 0) + height;
 			sizes.set(index, height);
 		}
-		return height;
+		return height > 0 ? height : measuredRef.current.sizes.get(index) ?? 100;
 	}, []);
 	const isPinnedToBottomRef = react.default.useRef(isPinnedToBottom);
 	const shouldAdjustScrollOnResize = react.default.useCallback((item, _delta, instance) => {
@@ -7899,7 +9359,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	}, []);
 	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
 		count: shouldVirtualize ? rows.length : 0,
-		getScrollElement: () => scrollElement,
+		getScrollElement: () => shouldVirtualize ? scrollElement : null,
 		estimateSize: estimateRowSize,
 		overscan: 5,
 		measureElement: measureRowElement,
@@ -7910,8 +9370,11 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	});
 	isPinnedToBottomRef.current = isPinnedToBottom;
 	virtualizer.shouldAdjustScrollPositionOnItemSizeChange = shouldAdjustScrollOnResize;
+	const lastEndAlignedFirstMessageRef = react.default.useRef(void 0);
 	(0, react.useLayoutEffect)(() => {
 		if (!shouldVirtualize || !rows.length) return;
+		if (lastEndAlignedFirstMessageRef.current === firstMessageId) return;
+		lastEndAlignedFirstMessageRef.current = firstMessageId;
 		virtualizer.scrollToIndex(rows.length - 1, { align: "end" });
 	}, [shouldVirtualize, firstMessageId]);
 	const intelligenceTurnAnchors = (0, react.useMemo)(() => getIntelligenceTurnAnchors(deduplicatedMessages, renderedMessages), [deduplicatedMessages, renderedMessages]);
@@ -7919,6 +9382,8 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		const elements = [];
 		const stateSnapshot = renderCustomMessage ? getStateSnapshotForMessage(message.id) : void 0;
 		const rowKey = rowRenderKeys.get(message.id) ?? message.id;
+		const turn = turnByFirstMessage.get(message.id);
+		if (turn) elements.push(renderWorkSummary(turn.key, turn.calls));
 		if (renderCustomMessage) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCustomMessage, {
 			message,
 			position: "before",
@@ -7942,14 +9407,20 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			message,
 			renderActivityMessage
 		}, rowKey));
-		else if (message.role === "reasoning") elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReasoningMessage, {
-			message,
-			messages,
-			isRunning,
-			isLatest: message.id === latestRenderedId,
-			ReasoningMessageComponent: ReasoningComponent,
-			slotProps: reasoningSlotProps
-		}, rowKey));
+		else if (message.role === "reasoning") {
+			const reasoning = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReasoningMessage, {
+				message,
+				messages,
+				isRunning,
+				isLatest: message.id === latestRenderedId,
+				ReasoningMessageComponent: ReasoningComponent,
+				slotProps: reasoningSlotProps
+			}, rowKey);
+			elements.push(toolCallDisplay === "turn" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
+				open: workOpen.get(message.id) ?? true,
+				children: reasoning
+			}, rowKey) : reasoning);
+		}
 		if (renderCustomMessage) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCustomMessage, {
 			message,
 			position: "after",
@@ -7977,52 +9448,157 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			children: row.messages.flatMap(renderMessageBlock)
 		}, rowKey(row))];
 	};
+	const rowKeysRef = (0, react.useRef)([]);
+	rowKeysRef.current = rows.map(rowKey);
+	const virtualModeRef = (0, react.useRef)(shouldVirtualize);
+	virtualModeRef.current = shouldVirtualize;
+	(0, react.useEffect)(() => {
+		const element = scrollElementFromCtx;
+		if (!element) return;
+		let anchor = null;
+		let suspended = false;
+		let frame = 0;
+		const visibleRows = () => Array.from(element.querySelectorAll("[data-scroll-anchor]"));
+		const remember = () => {
+			if (suspended || element.clientHeight === 0 || !virtualModeRef.current) return;
+			if (isPinnedToBottomRef.current) {
+				anchor = null;
+				return;
+			}
+			const viewport = element.getBoundingClientRect();
+			const row = visibleRows().find((row) => {
+				const bounds = row.getBoundingClientRect();
+				return bounds.bottom > viewport.top && bounds.top < viewport.bottom;
+			});
+			if (row) anchor = {
+				key: row.dataset.scrollAnchor,
+				offset: row.getBoundingClientRect().top - viewport.top
+			};
+		};
+		const observer = new ResizeObserver(() => {
+			if (element.clientHeight === 0) {
+				suspended = true;
+				cancelAnimationFrame(frame);
+				return;
+			}
+			if (!suspended || !anchor) {
+				suspended = false;
+				remember();
+				return;
+			}
+			let attempts = 0;
+			let stableFrames = 0;
+			const restore = () => {
+				if (!anchor || element.clientHeight === 0) return;
+				const index = rowKeysRef.current.indexOf(anchor.key);
+				if (index < 0) {
+					anchor = null;
+					suspended = false;
+					return;
+				}
+				const row = visibleRows().find((row) => row.dataset.scrollAnchor === anchor.key);
+				if (row) {
+					const delta = row.getBoundingClientRect().top - element.getBoundingClientRect().top - anchor.offset;
+					element.scrollTop += delta;
+					stableFrames = Math.abs(delta) < 1 ? stableFrames + 1 : 0;
+				} else {
+					const offset = virtualizer.getOffsetForIndex(index, "start")?.[0];
+					if (offset !== void 0) virtualizer.scrollToOffset(offset - anchor.offset);
+					stableFrames = 0;
+				}
+				if (++attempts < 60 && stableFrames < 3) frame = requestAnimationFrame(restore);
+				else {
+					suspended = false;
+					remember();
+				}
+			};
+			frame = requestAnimationFrame(restore);
+		});
+		const interrupt = () => {
+			cancelAnimationFrame(frame);
+			anchor = null;
+			suspended = false;
+		};
+		element.addEventListener("scroll", remember, { passive: true });
+		element.addEventListener("wheel", interrupt, { passive: true });
+		element.addEventListener("touchstart", interrupt, { passive: true });
+		element.addEventListener("keydown", interrupt);
+		observer.observe(element);
+		remember();
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			element.removeEventListener("scroll", remember);
+			element.removeEventListener("wheel", interrupt);
+			element.removeEventListener("touchstart", interrupt);
+			element.removeEventListener("keydown", interrupt);
+		};
+	}, [
+		scrollElementFromCtx,
+		virtualizer,
+		firstMessageId
+	]);
 	const messageElements = shouldVirtualize ? [] : rows.flatMap(renderRow);
-	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-copilotkit": true,
-		style: { display: "contents" },
-		children: children({
-			messageElements,
-			messages,
-			isRunning,
-			interruptElement
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageFeedbackScopeContext.Provider, {
+		value: feedbackScope,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallDisplayContext.Provider, {
+			value: toolCallDisplayContext,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-copilotkit": true,
+				style: { display: "contents" },
+				children: children({
+					messageElements,
+					messages,
+					isRunning,
+					interruptElement
+				})
+			})
 		})
 	});
 	const lastMessage = renderedMessages[renderedMessages.length - 1];
-	const showCursor = isRunning && lastMessage?.role !== "reasoning";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-copilotkit": true,
-		"data-testid": "copilot-message-list",
-		className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
-		...props,
-		children: [
-			shouldVirtualize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: {
-					height: virtualizer.getTotalSize(),
-					position: "relative"
-				},
-				children: virtualizer.getVirtualItems().map((virtualItem) => {
-					const row = rows[virtualItem.index];
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-index": virtualItem.index,
-						ref: virtualizer.measureElement,
+	const showCursor = isRunning && lastMessage?.role !== "reasoning" && toolCallDisplay !== "turn";
+	const pendingWorkSummary = toolCallDisplay === "turn" && isRunning && lastMessage?.role === "user";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageFeedbackScopeContext.Provider, {
+		value: feedbackScope,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallDisplayContext.Provider, {
+			value: toolCallDisplayContext,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-copilotkit": true,
+				"data-testid": "copilot-message-list",
+				className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
+				...props,
+				children: [
+					shouldVirtualize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						style: {
-							position: "absolute",
-							top: 0,
-							left: 0,
-							width: "100%",
-							transform: `translateY(${virtualItem.start}px)`
+							height: virtualizer.getTotalSize(),
+							position: "relative"
 						},
-						children: renderRow(row)
-					}, rowKey(row));
-				})
-			}) : messageElements,
-			interruptElement,
-			showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:mt-2",
-				children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+						children: virtualizer.getVirtualItems().map((virtualItem) => {
+							const row = rows[virtualItem.index];
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								"data-index": virtualItem.index,
+								"data-scroll-anchor": rowKey(row),
+								ref: virtualizer.measureElement,
+								style: {
+									position: "absolute",
+									top: 0,
+									left: 0,
+									width: "100%",
+									transform: `translateY(${virtualItem.start}px)`
+								},
+								children: renderRow(row)
+							}, rowKey(row));
+						})
+					}) : messageElements,
+					interruptElement,
+					pendingWorkSummary && renderWorkSummary(latestTurnKey, []),
+					showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cpk:mt-2",
+						children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+					})
+				]
 			})
-		]
+		})
 	});
 }
 CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
@@ -8407,6 +9983,16 @@ function DropOverlay() {
 	});
 }
 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, isConnecting = false, hasExplicitThreadId = false, disclaimer, intelligenceIndicator, children, className, ...props }) {
+	const configuredThreadId = useCopilotChatConfiguration()?.threadId;
+	const [fallbackThreadId, setFallbackThreadId] = (0, react.useState)(messages[0]?.id);
+	const previousMessageIds = (0, react.useRef)(/* @__PURE__ */ new Set());
+	(0, react.useEffect)(() => {
+		if (messages.length === 0) return;
+		const overlaps = messages.some((message) => previousMessageIds.current.has(message.id));
+		previousMessageIds.current = new Set(messages.map((message) => message.id));
+		if (!overlaps) setFallbackThreadId(messages[0].id);
+	}, [messages]);
+	const scrollThreadId = configuredThreadId ?? fallbackThreadId;
 	const [inputContainerEl, setInputContainerEl] = (0, react.useState)(null);
 	const [inputContainerHeight, setInputContainerHeight] = (0, react.useState)(0);
 	const [isResizing, setIsResizing] = (0, react.useState)(false);
@@ -8473,6 +10059,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 	}) : null;
 	const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
 		autoScroll,
+		scrollThreadId,
 		inputContainerHeight,
 		isResizing,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -8568,12 +10155,102 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 	});
 }
 (function(_CopilotChatView) {
-	const ScrollContent = ({ children, scrollToBottomButton, feather, inputContainerHeight, isResizing }) => {
-		const { isAtBottom, scrollToBottom, scrollRef, state } = (0, use_stick_to_bottom.useStickToBottomContext)();
+	const ScrollContent = ({ children, scrollToBottomButton, feather, inputContainerHeight, isResizing, scrollThreadId }) => {
+		const { isAtBottom, scrollToBottom, stopScroll, scrollRef, state } = (0, use_stick_to_bottom.useStickToBottomContext)();
 		const [scrollEl, setScrollEl] = (0, react.useState)(null);
+		const readingOffsetRef = (0, react.useRef)(null);
+		const pinIntentRef = (0, react.useRef)(false);
+		const stateRef = (0, react.useRef)(state);
+		stateRef.current = state;
 		(0, react.useLayoutEffect)(() => {
 			setScrollEl(scrollRef.current ?? null);
 		}, []);
+		(0, react.useEffect)(() => {
+			if (!scrollEl) return;
+			let hidden = false;
+			let resumeBottom = false;
+			let pendingFrame = 0;
+			let resumeFrame = 0;
+			let settleFrame = 0;
+			readingOffsetRef.current = null;
+			const rememberScroll = () => {
+				if (hidden || scrollEl.clientHeight === 0) return;
+				if (resumeBottom) {
+					readingOffsetRef.current = null;
+					return;
+				}
+				if (pinIntentRef.current) if (stateRef.current.escapedFromLock) pinIntentRef.current = false;
+				else {
+					readingOffsetRef.current = null;
+					if (!stateRef.current.isNearBottom) return;
+					pinIntentRef.current = false;
+				}
+				readingOffsetRef.current = !stateRef.current.isAtBottom && (stateRef.current.escapedFromLock || !stateRef.current.isNearBottom) ? scrollEl.scrollTop : null;
+			};
+			const onScroll = () => {
+				rememberScroll();
+				cancelAnimationFrame(pendingFrame);
+				pendingFrame = requestAnimationFrame(rememberScroll);
+			};
+			const onWheel = (event) => {
+				if (event.deltaY < 0) {
+					pinIntentRef.current = false;
+					resumeBottom = false;
+				}
+			};
+			const resizeObserver = new ResizeObserver(() => {
+				if (scrollEl.clientHeight === 0) {
+					hidden = true;
+					resumeBottom = pinIntentRef.current || readingOffsetRef.current === null;
+					if (!resumeBottom) stopScroll();
+				} else if (hidden) {
+					hidden = false;
+					if (resumeBottom) {
+						stopScroll();
+						resumeFrame = requestAnimationFrame(() => {
+							settleFrame = requestAnimationFrame(() => {
+								if (scrollEl.clientHeight > 0 && resumeBottom) {
+									resumeBottom = false;
+									pinIntentRef.current = true;
+									scrollToBottom({ animation: "instant" });
+								}
+							});
+						});
+					} else if (readingOffsetRef.current !== null) {
+						stopScroll();
+						scrollEl.scrollTop = readingOffsetRef.current;
+					}
+				}
+			});
+			rememberScroll();
+			scrollEl.addEventListener("scroll", onScroll);
+			scrollEl.addEventListener("wheel", onWheel, { passive: true });
+			resizeObserver.observe(scrollEl);
+			return () => {
+				scrollEl.removeEventListener("scroll", onScroll);
+				scrollEl.removeEventListener("wheel", onWheel);
+				cancelAnimationFrame(pendingFrame);
+				cancelAnimationFrame(resumeFrame);
+				cancelAnimationFrame(settleFrame);
+				resizeObserver.disconnect();
+			};
+		}, [
+			scrollEl,
+			scrollToBottom,
+			stopScroll,
+			scrollThreadId
+		]);
+		const startBottomPin = (0, react.useCallback)((instant = false) => {
+			readingOffsetRef.current = null;
+			pinIntentRef.current = true;
+			scrollToBottom(instant ? { animation: "instant" } : void 0);
+		}, [scrollToBottom]);
+		const previousScrollThreadId = (0, react.useRef)(scrollThreadId);
+		(0, react.useEffect)(() => {
+			if (previousScrollThreadId.current === scrollThreadId) return;
+			previousScrollThreadId.current = scrollThreadId;
+			startBottomPin(true);
+		}, [scrollThreadId, startBottomPin]);
 		const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
 			value: scrollEl,
@@ -8595,7 +10272,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 					!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
 						style: { bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` },
-						children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
+						children: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => startBottomPin() })
 					})
 				] })
 			})
@@ -8643,7 +10320,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			})
 		});
 	};
-	_CopilotChatView.ScrollView = ({ children, autoScroll = "pin-to-bottom", scrollToBottomButton, feather, inputContainerHeight = 0, isResizing = false, className, ...props }) => {
+	_CopilotChatView.ScrollView = ({ children, autoScroll = "pin-to-bottom", scrollThreadId, scrollToBottomButton, feather, inputContainerHeight = 0, isResizing = false, className, ...props }) => {
 		const mode = normalizeAutoScroll(autoScroll);
 		const [hasMounted, setHasMounted] = (0, react.useState)(false);
 		const scrollRef = (0, react.useRef)(null);
@@ -8732,6 +10409,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			initial: "smooth",
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollContent, {
+				scrollThreadId,
 				scrollToBottomButton,
 				feather,
 				inputContainerHeight,
@@ -8740,14 +10418,18 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			})
 		});
 	};
-	_CopilotChatView.ScrollToBottomButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		"data-testid": "copilot-scroll-to-bottom",
-		variant: "outline",
-		size: "sm",
-		className: (0, tailwind_merge.twMerge)("cpk:rounded-full cpk:w-10 cpk:h-10 cpk:p-0 cpk:pointer-events-auto", "cpk:bg-white cpk:dark:bg-gray-900", "cpk:shadow-lg cpk:border cpk:border-gray-200 cpk:dark:border-gray-700", "cpk:hover:bg-gray-50 cpk:dark:hover:bg-gray-800", "cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer", className),
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "cpk:w-4 cpk:h-4 cpk:text-gray-600 cpk:dark:text-white" })
-	});
+	_CopilotChatView.ScrollToBottomButton = ({ className, ...props }) => {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			"data-testid": "copilot-scroll-to-bottom",
+			variant: "outline",
+			size: "sm",
+			className: (0, tailwind_merge.twMerge)("cpk:rounded-full cpk:w-10 cpk:h-10 cpk:p-0 cpk:pointer-events-auto", "cpk:bg-white cpk:dark:bg-gray-900", "cpk:shadow-lg cpk:border cpk:border-gray-200 cpk:dark:border-gray-700", "cpk:hover:bg-gray-50 cpk:dark:hover:bg-gray-800", "cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer", className),
+			"aria-label": labels.chatScrollToBottomLabel,
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "cpk:w-4 cpk:h-4 cpk:text-gray-600 cpk:dark:text-white" })
+		});
+	};
 	_CopilotChatView.Feather = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className,
 		...props
@@ -10130,6 +11812,7 @@ function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOu
 			if (containerRef.current?.contains(target)) return;
 			const toggleButton = document.querySelector("[data-slot='chat-toggle-button']");
 			if (toggleButton && toggleButton.contains(target)) return;
+			if (target instanceof Element && target.closest("[data-copilotkit-popover]")) return;
 			setModalOpen?.(false);
 		};
 		document.addEventListener("pointerdown", handlePointerDown);
@@ -10640,62 +12323,14 @@ CopilotThreadsDrawer.displayName = "CopilotThreadsDrawer";
 
 //#endregion
 //#region src/v2/components/WildcardToolCallRender.tsx
+/**
+* Catch-all (`"*"`) tool-call renderer that shows CopilotKit's default
+* tool-call card for any tool without a dedicated renderer.
+*/
 const WildcardToolCallRender = defineToolCallRenderer({
 	name: "*",
-	render: ({ args, result, name, status }) => {
-		const [isExpanded, setIsExpanded] = (0, react.useState)(false);
-		const statusString = String(status);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:mt-2 cpk:pb-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:dark:border-zinc-800/60 cpk:bg-white/70 cpk:dark:bg-zinc-900/50 cpk:shadow-sm cpk:backdrop-blur cpk:p-4",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cpk:flex cpk:items-center cpk:justify-between cpk:gap-3 cpk:cursor-pointer",
-					onClick: () => setIsExpanded(!isExpanded),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cpk:flex cpk:items-center cpk:gap-2 cpk:min-w-0",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-								className: `cpk:h-4 cpk:w-4 cpk:text-zinc-500 cpk:dark:text-zinc-400 cpk:transition-transform ${isExpanded ? "cpk:rotate-90" : ""}`,
-								fill: "none",
-								viewBox: "0 0 24 24",
-								strokeWidth: 2,
-								stroke: "currentColor",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									d: "M8.25 4.5l7.5 7.5-7.5 7.5"
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk:inline-block cpk:h-2 cpk:w-2 cpk:rounded-full cpk:bg-blue-500" }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cpk:truncate cpk:text-sm cpk:font-medium cpk:text-zinc-900 cpk:dark:text-zinc-100",
-								children: name
-							})
-						]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: `cpk:inline-flex cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-1 cpk:text-xs cpk:font-medium ${statusString === "inProgress" || statusString === "executing" ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : statusString === "complete" ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300"}`,
-						children: String(status)
-					})]
-				}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cpk:mt-3 cpk:grid cpk:gap-4",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400",
-						children: "Arguments"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: "cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words",
-						children: JSON.stringify(args ?? {}, null, 2)
-					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400",
-						children: "Result"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: "cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words",
-						children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
-					})] })]
-				})]
-			})
-		});
-	}
+	group: true,
+	render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, { ...adaptRendererProps(props) })
 });
 
 //#endregion
@@ -12974,6 +14609,12 @@ Object.defineProperty(exports, 'CopilotChatToggleButton', {
     return CopilotChatToggleButton;
   }
 });
+Object.defineProperty(exports, 'CopilotChatToolCallGroup', {
+  enumerable: true,
+  get: function () {
+    return CopilotChatToolCallGroup;
+  }
+});
 Object.defineProperty(exports, 'CopilotChatToolCallsView', {
   enumerable: true,
   get: function () {
@@ -12992,6 +14633,12 @@ Object.defineProperty(exports, 'CopilotChatView_default', {
     return CopilotChatView_default;
   }
 });
+Object.defineProperty(exports, 'CopilotChatWorkSummary', {
+  enumerable: true,
+  get: function () {
+    return CopilotChatWorkSummary;
+  }
+});
 Object.defineProperty(exports, 'CopilotContext', {
   enumerable: true,
   get: function () {
@@ -13394,4 +15041,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-DEaA0Cat.cjs.map
+//# sourceMappingURL=copilotkit-DKICi3nC.cjs.map