@nextclaw/agent-chat-ui 0.6.2 → 0.6.4

package/dist/index.js

@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { AlertTriangle, AppWindow, ArrowUp, ArrowUpRight, Bot, Brain, BrainCircuit, Check, ChevronDown, ChevronRight, ChevronUp, Code2, Copy, ExternalLink, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileJson2, FileSpreadsheet, FileText, FileVideo2, Globe, ImageIcon, Loader2, Minus, Paperclip, Puzzle, Search, Sparkles, Star, Terminal, User, Wrench } from "lucide-react";
+import { AlertTriangle, AppWindow, ArrowUp, ArrowUpRight, Bot, Brain, BrainCircuit, CalendarClock, Check, ChevronDown, ChevronRight, ChevronUp, Code2, Copy, Expand, ExternalLink, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileJson2, FileSpreadsheet, FileText, FileVideo2, FolderTree, Globe, Globe2, ImageIcon, ListChecks, Loader2, MessageSquare, Minus, Paperclip, Puzzle, Search, Send, Settings, Sparkles, Star, Terminal, User, Workflow, Wrench, X } from "lucide-react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -29,6 +29,7 @@ import sql from "highlight.js/lib/languages/sql";
 import typescript from "highlight.js/lib/languages/typescript";
 import xml from "highlight.js/lib/languages/xml";
 import yaml from "highlight.js/lib/languages/yaml";
+import { createPortal } from "react-dom";
 const CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC = {
 	key: "slash",
 	marker: "/"
@@ -512,7 +513,7 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex min-h-0 flex-col border-r border-gray-200",
 					children: [!isLoading && filterViews.length > 0 ? /* @__PURE__ */ jsx("div", {
-						className: "flex shrink-0 gap-1 overflow-x-auto px-2.5 pb-2 pt-2.5",
+						className: "flex shrink-0 gap-0.5 overflow-x-auto px-2 pb-1.5 pt-2",
 						children: filterViews.map(({ count, key, label }) => {
 							const isActive = key === resolvedActiveFilterKey;
 							return /* @__PURE__ */ jsxs("button", {
@@ -520,9 +521,9 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 								"aria-pressed": isActive,
 								onPointerDown: (event) => event.preventDefault(),
 								onClick: () => handleFilterSelect(key),
-								className: `inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-1 text-[11px] font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${isActive ? "border-primary/30 bg-primary/10 text-primary" : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50"}`,
+								className: `inline-flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`,
 								children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
-									className: isActive ? "text-primary/70" : "text-gray-400",
+									className: isActive ? "text-gray-500" : "text-gray-400",
 									children: count
 								})]
 							}, key);
@@ -531,58 +532,52 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 						ref: listRef,
 						role: "listbox",
 						"aria-label": texts.sectionLabel,
-						className: `custom-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain ${!isLoading && filterViews.length > 0 ? "px-2.5 pb-2.5" : "p-2.5"}`,
+						className: `custom-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain ${!isLoading && filterViews.length > 0 ? "px-2 pb-2" : "p-2"}`,
 						children: isLoading ? /* @__PURE__ */ jsx("div", {
 							className: "p-2 text-xs text-gray-500",
 							children: texts.loadingLabel
 						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!hasItemSections ? /* @__PURE__ */ jsx("div", {
-							className: "mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+							className: "mb-1 px-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
 							children: texts.sectionLabel
 						}) : null, visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", {
-							className: "px-2 text-xs text-gray-400",
+							className: "px-1.5 text-xs text-gray-400",
 							children: texts.emptyLabel
-						}) : /* @__PURE__ */ jsx("div", {
-							className: "space-y-1",
-							children: visibleItems.map((item, index) => {
-								const { key, sectionKey, sectionLabel, title, subtitle } = item;
-								const isActive = index === activeIndexInRange;
-								const previousItem = visibleItems[index - 1];
-								return /* @__PURE__ */ jsxs("div", {
-									className: "space-y-1",
-									children: [hasItemSections && Boolean(sectionLabel?.trim()) && previousItem?.sectionKey !== sectionKey ? /* @__PURE__ */ jsx("div", {
-										className: "px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
-										children: sectionLabel
-									}) : null, /* @__PURE__ */ jsxs("button", {
-										type: "button",
-										role: "option",
-										"aria-selected": isActive,
-										"data-input-surface-index": index,
-										onPointerMove: (event) => {
-											if (event.pointerType !== "touch") setActiveIndexForCurrentItems(index);
-										},
-										onPointerDown: (event) => {
-											if (event.button > 0) return;
-											event.preventDefault();
-											onSelectItem(item);
-										},
-										onClick: (event) => {
-											if (event.detail === 0) onSelectItem(item);
-										},
-										className: `flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"}`,
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "truncate text-xs font-semibold",
-											children: title
-										}), /* @__PURE__ */ jsx("span", {
-											className: "truncate text-xs text-gray-500",
-											children: subtitle
-										})]
-									})]
-								}, key);
-							})
-						})] })
+						}) : /* @__PURE__ */ jsx("div", { children: visibleItems.map((item, index) => {
+							const { key, sectionKey, sectionLabel, title, subtitle } = item;
+							const isActive = index === activeIndexInRange;
+							const previousItem = visibleItems[index - 1];
+							return /* @__PURE__ */ jsxs("div", { children: [hasItemSections && Boolean(sectionLabel?.trim()) && previousItem?.sectionKey !== sectionKey ? /* @__PURE__ */ jsx("div", {
+								className: "px-1.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+								children: sectionLabel
+							}) : null, /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								role: "option",
+								"aria-selected": isActive,
+								"data-input-surface-index": index,
+								onPointerMove: (event) => {
+									if (event.pointerType !== "touch") setActiveIndexForCurrentItems(index);
+								},
+								onPointerDown: (event) => {
+									if (event.button > 0) return;
+									event.preventDefault();
+									onSelectItem(item);
+								},
+								onClick: (event) => {
+									if (event.detail === 0) onSelectItem(item);
+								},
+								className: `flex w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-left leading-4 transition-colors ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-100"}`,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate text-xs font-medium",
+									children: title
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate text-xs text-gray-500",
+									children: subtitle
+								})]
+							})] }, key);
+						}) })] })
 					})]
 				}), /* @__PURE__ */ jsx("div", {
-					className: "custom-scrollbar min-h-0 min-w-0 overflow-y-auto overscroll-contain p-2.5",
+					className: "custom-scrollbar min-h-0 min-w-0 select-text overflow-y-auto overscroll-contain p-2.5",
 					onPointerDown: onDetailsPointerDown,
 					children: activeItem ? /* @__PURE__ */ jsxs("div", {
 						className: "space-y-3",
@@ -639,15 +634,13 @@ function resolveInputSurfaceTriggerIdentity(currentIdentity, trigger, reason) {
 function ChatInputSurfaceHost(props) {
 	const { children, inputSurface, onInputSurfaceTriggerChange, onSelectItem, triggerSpecs = [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC] } = props;
 	const menuRef = useRef(null);
+	const isDetailsInteractionRef = useRef(false);
 	const [activeTriggerIdentity, setActiveTriggerIdentity] = useState(null);
 	const isOpen = Boolean(inputSurface) && activeTriggerIdentity !== null;
 	const setActiveTrigger = useCallback((identity, trigger) => {
 		setActiveTriggerIdentity(identity);
 		onInputSurfaceTriggerChange?.(identity ? trigger : null);
 	}, [onInputSurfaceTriggerChange]);
-	const closeInputSurface = useCallback(() => {
-		setActiveTrigger(null, null);
-	}, [setActiveTrigger]);
 	const handleInputSurfaceSnapshotChange = useCallback((nodes, selection, reason) => {
 		const trigger = resolveChatComposerActiveInputSurfaceTrigger(nodes, selection, triggerSpecs);
 		const nextIdentity = resolveInputSurfaceTriggerIdentity(activeTriggerIdentity, trigger, reason);
@@ -661,8 +654,8 @@ function ChatInputSurfaceHost(props) {
 		return menuRef.current?.handleKeyDown(event) ?? false;
 	}, []);
 	const handleInputSurfaceOpenChange = useCallback((open) => {
-		if (!open) closeInputSurface();
-	}, [closeInputSurface]);
+		if (!open && !isDetailsInteractionRef.current) setActiveTrigger(null, null);
+	}, [setActiveTrigger]);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(useMemo(() => ({
 		onInputSurfaceKeyDown: handleInputSurfaceKeyDown,
 		onInputSurfaceOpenChange: handleInputSurfaceOpenChange,
@@ -679,16 +672,21 @@ function ChatInputSurfaceHost(props) {
 		items: inputSurface.items,
 		texts: inputSurface.texts,
 		onSelectItem: (item) => {
-			closeInputSurface();
+			setActiveTrigger(null, null);
 			onSelectItem(item);
 		},
 		onOpenChange: handleInputSurfaceOpenChange,
-		onDetailsPointerDown: (event) => event.preventDefault()
+		onDetailsPointerDown: () => {
+			isDetailsInteractionRef.current = true;
+			requestAnimationFrame(() => {
+				isDetailsInteractionRef.current = false;
+			});
+		}
 	}, activeTriggerIdentity) : null] });
 }
 //#endregion
 //#region src/components/chat/default-skin/button.tsx
-const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none disabled:opacity-50", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm",
@@ -726,12 +724,6 @@ const ChatButton = React.forwardRef(({ className, variant, size, ...props }, ref
 ChatButton.displayName = "ChatButton";
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/chat-input-bar-actions.tsx
-const SEND_ERROR_PREVIEW_MAX_CHARS = 120;
-function buildSendErrorPreview(value) {
-	const compact = value.replace(/\s+/g, " ").trim();
-	if (compact.length <= SEND_ERROR_PREVIEW_MAX_CHARS) return compact;
-	return `${compact.slice(0, SEND_ERROR_PREVIEW_MAX_CHARS - 1)}…`;
-}
 function StopIcon() {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
@@ -781,75 +773,42 @@ function ContextWindowIndicator({ contextWindow }) {
 		})] })
 	});
 }
-function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canStopGeneration, sendDisabled, stopDisabled, stopHint, sendButtonLabel, stopButtonLabel, contextWindow, onSend, onStop }) {
-	const { Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
-	const normalizedSendError = sendError?.trim() ?? "";
-	const sendErrorPreview = normalizedSendError ? buildSendErrorPreview(normalizedSendError) : "";
-	const resolvedSendErrorDetailsLabel = sendErrorDetailsLabel?.trim() || "Details";
+function ChatInputBarActions({ isSending, canStopGeneration, sendDisabled, stopDisabled, stopHint, sendButtonLabel, stopButtonLabel, contextWindow, onSend, onStop }) {
+	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex shrink-0 flex-col items-end gap-1",
-		children: [normalizedSendError ? /* @__PURE__ */ jsxs("div", {
-			className: "flex max-w-[420px] items-start justify-end gap-2 text-right",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "min-w-0 flex-1 text-[11px] text-red-600",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "block truncate",
-					title: normalizedSendError,
-					children: sendErrorPreview
-				})
-			}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "shrink-0 rounded-full border border-red-200/80 bg-red-50 px-2 py-0.5 text-[10px] font-semibold text-red-700 transition-colors hover:bg-red-100",
-					children: resolvedSendErrorDetailsLabel
-				})
-			}), /* @__PURE__ */ jsxs(PopoverContent, {
-				align: "end",
-				className: "w-[min(32rem,calc(100vw-1.5rem))] border-red-100/80 p-0",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "border-b border-red-100 bg-red-50/80 px-4 py-2 text-xs font-semibold text-red-700",
-					children: resolvedSendErrorDetailsLabel
-				}), /* @__PURE__ */ jsx("pre", {
-					className: "max-h-80 overflow-auto whitespace-pre-wrap break-words px-4 py-3 text-xs leading-relaxed text-red-700",
-					children: normalizedSendError
-				})]
-			})] })]
-		}) : null, /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [contextWindow ? /* @__PURE__ */ jsx(ContextWindowIndicator, { contextWindow }) : null, !isSending || !sendDisabled ? /* @__PURE__ */ jsx(ChatButton, {
-				size: "icon",
-				className: "h-8 w-8 rounded-full",
-				"aria-label": sendButtonLabel,
-				onClick: () => void onSend(),
-				disabled: sendDisabled,
-				children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-5 w-5" })
-			}) : canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
+		className: "flex shrink-0 items-center gap-2",
+		children: [contextWindow ? /* @__PURE__ */ jsx(ContextWindowIndicator, { contextWindow }) : null, !isSending || !sendDisabled ? /* @__PURE__ */ jsx(ChatButton, {
+			size: "icon",
+			className: "h-8 w-8 rounded-full",
+			"aria-label": sendButtonLabel,
+			onClick: () => void onSend(),
+			disabled: sendDisabled,
+			children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-5 w-5" })
+		}) : canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
+			size: "icon",
+			variant: "outline",
+			className: "h-8 w-8 rounded-full",
+			"aria-label": stopButtonLabel,
+			onClick: () => void onStop(),
+			disabled: stopDisabled,
+			children: /* @__PURE__ */ jsx(StopIcon, {})
+		}) : /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChatButton, {
 				size: "icon",
 				variant: "outline",
 				className: "h-8 w-8 rounded-full",
 				"aria-label": stopButtonLabel,
-				onClick: () => void onStop(),
-				disabled: stopDisabled,
+				disabled: true,
 				children: /* @__PURE__ */ jsx(StopIcon, {})
-			}) : /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChatButton, {
-					size: "icon",
-					variant: "outline",
-					className: "h-8 w-8 rounded-full",
-					"aria-label": stopButtonLabel,
-					disabled: true,
-					children: /* @__PURE__ */ jsx(StopIcon, {})
-				}) })
-			}), /* @__PURE__ */ jsx(TooltipContent, {
-				side: "top",
-				children: /* @__PURE__ */ jsx("p", {
-					className: "text-xs",
-					children: stopHint
-				})
-			})] }) })]
-		})]
+			}) })
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "top",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-xs",
+				children: stopHint
+			})
+		})] }) })]
 	});
 }
 //#endregion
@@ -1159,16 +1118,16 @@ function ToolbarSearchableSelect({ item }) {
 				children: [/* @__PURE__ */ jsx(ToolbarSelectTriggerContent, { item }), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 h-3.5 w-3.5 shrink-0 text-muted-foreground/70 [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden" })]
 			})
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
-			className: `flex flex-col overflow-hidden p-2 ${CONTENT_WIDTH_BY_KEY[item.key] ?? ""}`,
+			className: `flex flex-col overflow-hidden p-1.5 ${CONTENT_WIDTH_BY_KEY[item.key] ?? ""}`,
 			style: { maxHeight: TOOLBAR_POPOVER_MAX_HEIGHT },
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "relative mb-2 shrink-0",
+					className: "relative mb-1.5 shrink-0",
 					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70" }), /* @__PURE__ */ jsx(Input, {
 						value: query,
 						onChange: (event) => setQuery(event.currentTarget.value),
 						placeholder: item.search?.placeholder ?? item.placeholder,
-						className: "h-8 rounded-lg pl-8 text-xs"
+						className: "h-7 rounded-md pl-8 text-xs"
 					})]
 				}),
 				!hasOptions ? item.loading ? /* @__PURE__ */ jsxs("div", {
@@ -1189,9 +1148,9 @@ function ToolbarSearchableSelect({ item }) {
 				/* @__PURE__ */ jsx("div", {
 					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
 					children: filteredGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", {
-						className: groupIndex > 0 ? "border-t border-border pt-1" : void 0,
+						className: groupIndex > 0 ? "border-t border-border pt-0.5" : void 0,
 						children: [group.label ? /* @__PURE__ */ jsx("div", {
-							className: "px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+							className: "px-2 pb-0.5 pt-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground",
 							children: group.label
 						}) : null, group.options.map((option) => {
 							const isSelected = item.value === option.value;
@@ -1201,7 +1160,7 @@ function ToolbarSearchableSelect({ item }) {
 								className: "group flex items-center gap-1 rounded-md hover:bg-accent",
 								children: [/* @__PURE__ */ jsxs("button", {
 									type: "button",
-									className: "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-2 text-left",
+									className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-md px-2 py-1.5 text-left leading-4",
 									onClick: () => {
 										item.onValueChange(option.value);
 										setOpen(false);
@@ -1268,7 +1227,7 @@ function ToolbarSelect({ item }) {
 				children: item.emptyLabel
 			}) : null : null, groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [groupIndex > 0 ? /* @__PURE__ */ jsx(SelectSeparator, {}) : null, /* @__PURE__ */ jsxs(SelectGroup, { children: [group.label ? /* @__PURE__ */ jsx(SelectLabel, { children: group.label }) : null, group.options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
 				value: option.value,
-				className: "py-2",
+				className: "py-1.5",
 				children: /* @__PURE__ */ jsx(ToolbarSelectOptionContent, { option })
 			}, option.value))] })] }, group.key))]
 		})]
@@ -2293,6 +2252,11 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 ChatInputBarTokenizedComposer.displayName = "LexicalChatInputBarTokenizedComposer";
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/chat-input-bar.tsx
+const SEND_ERROR_PREVIEW_MAX_CHARS = 120;
+function buildSendErrorPreview(value) {
+	const compact = value.replace(/\s+/g, " ").trim();
+	return compact.length <= SEND_ERROR_PREVIEW_MAX_CHARS ? compact : `${compact.slice(0, SEND_ERROR_PREVIEW_MAX_CHARS - 1)}…`;
+}
 function InputBarHint({ hint }) {
 	if (!hint) return null;
 	if (hint.loading) return /* @__PURE__ */ jsx("div", {
@@ -2315,7 +2279,44 @@ function InputBarHint({ hint }) {
 		})
 	});
 }
-const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSurface, slashMenu, surface, toolbar: toolbarProps, topSlot }, ref) {
+function ChatInputBarSendError({ sendError, sendErrorDetailsLabel }) {
+	const normalizedSendError = sendError?.trim() ?? "";
+	if (!normalizedSendError) return null;
+	const { Popover, PopoverContent, PopoverTrigger } = ChatUiPrimitives;
+	const sendErrorPreview = buildSendErrorPreview(normalizedSendError);
+	const resolvedSendErrorDetailsLabel = sendErrorDetailsLabel?.trim() || "Details";
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-3 pb-2 sm:px-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			"aria-live": "polite",
+			className: "flex min-w-0 items-start justify-between gap-3 rounded-lg border border-red-200/80 bg-red-50/80 px-3 py-2 text-xs text-red-700",
+			role: "status",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate leading-5",
+				title: normalizedSendError,
+				children: sendErrorPreview
+			}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "inline-flex h-7 shrink-0 items-center rounded-md border border-red-200/80 bg-background px-2 text-xs font-medium text-red-700 transition-colors hover:bg-red-100",
+					children: resolvedSendErrorDetailsLabel
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				align: "end",
+				className: "w-[min(32rem,calc(100vw-1.5rem))] border-red-100/80 p-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "border-b border-red-100 bg-red-50/80 px-4 py-2 text-xs font-semibold text-red-700",
+					children: resolvedSendErrorDetailsLabel
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "max-h-80 overflow-auto whitespace-pre-wrap break-words px-4 py-3 text-xs leading-relaxed text-red-700",
+					children: normalizedSendError
+				})]
+			})] })]
+		})
+	});
+}
+const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSurface, sendError, sendErrorDetailsLabel, slashMenu, surface, toolbar: toolbarProps, topSlot }, ref) {
 	const composerRef = useRef(null);
 	const resolvedInputSurface = inputSurface ?? (slashMenu ? {
 		isLoading: slashMenu.isLoading,
@@ -2383,6 +2384,10 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSur
 						})
 					}),
 					/* @__PURE__ */ jsx(InputBarHint, { hint }),
+					/* @__PURE__ */ jsx(ChatInputBarSendError, {
+						sendError,
+						sendErrorDetailsLabel
+					}),
 					/* @__PURE__ */ jsx(ChatInputBarToolbar, { ...toolbar })
 				]
 			})
@@ -2392,22 +2397,25 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSur
 ChatInputBar.displayName = "ChatInputBar";
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-avatar.tsx
-function ChatMessageAvatar({ role }) {
+function ChatMessageAvatar({ role, size = "default" }) {
+	const compact = size === "compact";
+	const frameSize = compact ? "h-7 w-7" : "h-8 w-8";
+	const iconSize = compact ? "h-3.5 w-3.5" : "h-4 w-4";
 	if (role === "user") return /* @__PURE__ */ jsx("div", {
 		"data-testid": "chat-message-avatar-user",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm",
-		children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" })
+		className: cn("flex shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm", frameSize),
+		children: /* @__PURE__ */ jsx(User, { className: iconSize })
 	});
 	if (role === "tool") return /* @__PURE__ */ jsx("div", {
 		"data-testid": "chat-message-avatar-tool",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-accent-foreground shadow-sm ring-1 ring-border",
-		children: /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4" })
+		className: cn("flex shrink-0 items-center justify-center rounded-full bg-accent text-accent-foreground shadow-sm ring-1 ring-border", frameSize),
+		children: /* @__PURE__ */ jsx(Wrench, { className: iconSize })
 	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "chat-message-avatar-assistant",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-foreground shadow-sm ring-1 ring-border",
+		className: cn("flex shrink-0 items-center justify-center rounded-full bg-muted text-foreground shadow-sm ring-1 ring-border", frameSize),
 		children: /* @__PURE__ */ jsx(Bot, {
-			className: "h-[18px] w-[18px] text-current",
+			className: cn(compact ? "h-4 w-4" : "h-[18px] w-[18px]", "text-current"),
 			strokeWidth: 2.5
 		})
 	});
@@ -2419,15 +2427,15 @@ function resolveInlineTokenTone(kind) {
 	if (kind === "panel_app") return "panel_app";
 	return "default";
 }
-function resolveInlineTokenBadgeClassName(tone, isUser) {
-	if (tone === "skill") return isUser ? "border-primary-foreground/30 bg-primary-foreground/18 text-primary-foreground" : "border-border bg-accent text-accent-foreground";
-	if (tone === "panel_app") return isUser ? "border-primary-foreground/30 bg-primary-foreground/18 text-primary-foreground" : "border-border bg-accent text-accent-foreground";
-	return isUser ? "border-primary-foreground/30 bg-primary-foreground/18 text-primary-foreground" : "border-border bg-muted text-muted-foreground";
+function resolveInlineTokenBadgeClassName(tone, isUser, interactive) {
+	if (tone === "skill") return cn("border-transparent bg-transparent text-[color:var(--md-link)]", interactive && "cursor-pointer underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--md-link)]/30", !interactive && "cursor-default");
+	if (tone === "panel_app") return isUser ? "border-primary-foreground/40 bg-primary-foreground/22 text-primary-foreground" : "border-border bg-muted text-foreground";
+	return isUser ? "border-primary-foreground/40 bg-primary-foreground/22 text-primary-foreground" : "border-border bg-muted text-muted-foreground";
 }
 function resolveInlineTokenIconClassName(tone, isUser) {
-	if (tone === "skill") return isUser ? "text-primary-foreground/70" : "text-muted-foreground";
-	if (tone === "panel_app") return isUser ? "text-primary-foreground/70" : "text-muted-foreground";
-	return isUser ? "text-primary-foreground/70" : "text-muted-foreground";
+	if (tone === "skill") return "text-current opacity-80";
+	if (tone === "panel_app") return isUser ? "text-primary-foreground/80" : "text-muted-foreground";
+	return isUser ? "text-primary-foreground/80" : "text-muted-foreground";
 }
 function renderInlineTokenIcon(tone) {
 	return tone === "panel_app" ? /* @__PURE__ */ jsx(AppWindow, {
@@ -2438,18 +2446,32 @@ function renderInlineTokenIcon(tone) {
 		className: "h-3 w-3"
 	});
 }
-function ChatInlineTokenBadge({ kind, label, isUser }) {
+function ChatInlineTokenBadge({ kind, label, isUser, onClick }) {
 	const tone = resolveInlineTokenTone(kind);
-	return /* @__PURE__ */ jsxs("span", {
-		className: cn("mx-[2px] inline-flex h-7 max-w-full items-center gap-1.5 rounded-xl border px-2.5 align-baseline text-[11px] font-medium shadow-[0_0_0_1px_rgba(15,23,42,0.03)]", resolveInlineTokenBadgeClassName(tone, isUser)),
+	const interactive = Boolean(onClick);
+	const className = cn("nextclaw-chat-inline-token mx-[2px] inline-flex max-w-full items-center gap-1 align-baseline text-[11px] font-medium", tone === "skill" ? "h-auto rounded-none px-0 py-0" : "h-7 rounded-xl border px-2.5", resolveInlineTokenBadgeClassName(tone, isUser, interactive));
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", resolveInlineTokenIconClassName(tone, isUser)),
+		children: renderInlineTokenIcon(tone)
+	}), /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: label
+	})] });
+	if (interactive) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
 		title: label,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: cn("inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", resolveInlineTokenIconClassName(tone, isUser)),
-			children: renderInlineTokenIcon(tone)
-		}), /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: label
-		})]
+		onClick: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			onClick?.();
+		},
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		title: label,
+		children: content
 	});
 }
 //#endregion
@@ -2655,7 +2677,7 @@ const REGISTERED_LANGUAGES = [
 		aliases: ["patch"]
 	}
 ];
-function escapeHtml(value) {
+function escapeHtml$1(value) {
 	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function normalizeLanguage(value) {
@@ -2686,7 +2708,7 @@ var ChatCodeSyntaxHighlighter = class {
 			return this.createPlainTextResult(code, normalizedLanguage || "text");
 		};
 		this.createPlainTextResult = (code, language) => ({
-			html: escapeHtml(code),
+			html: escapeHtml$1(code),
 			language,
 			highlighted: false
 		});
@@ -2914,26 +2936,126 @@ function ChatInlineDisplay({ display, renderInlineDisplay }) {
 	return /* @__PURE__ */ jsx(ChatInlineDisplayFallback, { display });
 }
 //#endregion
-//#region src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
-const MARKDOWN_MAX_CHARS = 14e4;
+//#region src/components/chat/ui/chat-message-list/chat-message-file/chat-message-image-preview.tsx
+function ChatMessageImageLightbox({ alt, closeLabel, onClose, src }) {
+	const titleId = useId();
+	useEffect(() => {
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+			}
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.body.style.overflow = previousOverflow;
+			window.removeEventListener("keydown", onKeyDown);
+		};
+	}, [onClose]);
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": titleId,
+		className: "fixed inset-0 z-[var(--z-modal,10050)] flex items-center justify-center bg-black/80 p-4 backdrop-blur-[2px]",
+		"data-testid": "chat-message-image-lightbox",
+		onClick: onClose,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: titleId,
+				className: "sr-only",
+				children: alt
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": closeLabel,
+				className: "absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/55 text-white transition-colors hover:bg-black/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70",
+				onClick: (event) => {
+					event.stopPropagation();
+					onClose();
+				},
+				children: /* @__PURE__ */ jsx(X, {
+					className: "h-4 w-4",
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ jsx("img", {
+				src,
+				alt,
+				className: "max-h-[min(92vh,100%)] max-w-[min(96vw,100%)] object-contain shadow-2xl",
+				onClick: (event) => event.stopPropagation()
+			})
+		]
+	}), document.body);
+}
+function ChatMessageImagePreview({ alt, expandLabel, closeLabel, sizeLabel, src }) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const openLightbox = () => setIsExpanded(true);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		"data-chat-message-image-preview": true,
+		className: "group/image relative block w-fit max-w-[min(100%,32rem)] overflow-hidden rounded-lg",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "block w-fit max-w-[min(100%,32rem)] text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+				onClick: openLightbox,
+				onDoubleClick: (event) => {
+					event.preventDefault();
+					openLightbox();
+				},
+				"aria-label": expandLabel,
+				children: /* @__PURE__ */ jsx("img", {
+					src,
+					alt,
+					className: "block h-auto w-auto max-h-[26rem] max-w-full rounded-lg bg-transparent object-contain"
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": expandLabel,
+				className: "absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/45 text-white opacity-0 transition-opacity duration-150 hover:bg-black/60 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70 group-hover/image:opacity-100",
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					openLightbox();
+				},
+				children: /* @__PURE__ */ jsx(Expand, {
+					className: "h-3.5 w-3.5",
+					strokeWidth: 2
+				})
+			}),
+			sizeLabel ? /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-start bg-gradient-to-t from-black/50 via-black/15 to-transparent px-2.5 pb-2 pt-8 opacity-0 transition-opacity duration-150 group-hover/image:opacity-100 group-focus-within/image:opacity-100",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "inline-flex items-center rounded-md bg-black/40 px-1.5 py-0.5 text-[10px] font-medium text-white/95 backdrop-blur-sm",
+					children: sizeLabel
+				})
+			}) : null
+		]
+	}), isExpanded ? /* @__PURE__ */ jsx(ChatMessageImageLightbox, {
+		alt,
+		closeLabel,
+		onClose: () => setIsExpanded(false),
+		src
+	}) : null] });
+}
+//#endregion
+//#region src/components/chat/ui/chat-message-list/utils/chat-local-resource.utils.ts
 const SAFE_LINK_PROTOCOLS = new Set([
 	"http:",
 	"https:",
 	"mailto:",
 	"tel:"
 ]);
-const INLINE_TOKEN_KIND_ATTR = "data-chat-inline-token-kind";
-const INLINE_TOKEN_KEY_ATTR = "data-chat-inline-token-key";
-const INLINE_TOKEN_LABEL_ATTR = "data-chat-inline-token-label";
-const INLINE_TOKEN_RAW_TEXT_ATTR = "data-chat-inline-token-raw-text";
-const PROJECT_RELATIVE_FILE_HREF_PATTERN = new RegExp(`^(?![a-zA-Z][a-zA-Z\\d+.-]*:)(?!//)(?:(?:[^/\\s?#]+/)+[^?#\\s]+\\.[A-Za-z0-9_-]+|[^/\\s?#]+\\.(?:cjs|css|cts|html?|js|json|jsx|mdx?|mjs|mts|tsx?|txt|ya?ml))(?::\\d+(?::\\d+)?)?(?:[?#].*)?$`, "i");
-function trimMarkdown(value) {
-	if (value.length <= MARKDOWN_MAX_CHARS) return value;
-	return `${value.slice(0, MARKDOWN_MAX_CHARS)}\n\n...`;
+const URI_SCHEME_PATTERN = /^[a-zA-Z][a-zA-Z\d+.-]*:/;
+const WINDOWS_ABSOLUTE_PATH_PATTERN = /^[a-z]:[\\/]/i;
+function isSchemeLessResourceHref(href) {
+	return !href.startsWith("//") && !URI_SCHEME_PATTERN.test(href);
 }
-function resolveSafeHref(href) {
+function resolveSafeChatResourceHref(href) {
 	if (!href) return null;
-	if (href.startsWith("#") || href.startsWith("/") || href.startsWith("./") || href.startsWith("../") || PROJECT_RELATIVE_FILE_HREF_PATTERN.test(href)) return href;
+	if (WINDOWS_ABSOLUTE_PATH_PATTERN.test(href) || isSchemeLessResourceHref(href)) return href;
 	try {
 		const url = new URL(href);
 		return SAFE_LINK_PROTOCOLS.has(url.protocol) ? href : null;
@@ -2941,30 +3063,57 @@ function resolveSafeHref(href) {
 		return null;
 	}
 }
-function isExternalHref(href) {
+function isExternalChatResourceHref(href) {
 	return /^https?:\/\//i.test(href);
 }
-function looksLikeLocalFileHref(href) {
-	return href.startsWith("./") || href.startsWith("../") || href.startsWith("/Users/") || href.startsWith("/home/") || href.startsWith("/tmp/") || href.startsWith("/var/") || PROJECT_RELATIVE_FILE_HREF_PATTERN.test(href) || /^\/.+\.[A-Za-z0-9_-]+(?::\d+(?::\d+)?)?$/.test(href);
-}
-function parseLocalFileAction(href) {
-	const viewer = new URLSearchParams(href.split("#")[0]?.split("?")[1] ?? "").get("viewer");
-	const normalizedHref = href.split("#")[0]?.split("?")[0] ?? href;
-	const decodedHref = decodeURIComponent(normalizedHref);
-	if (!looksLikeLocalFileHref(decodedHref)) return null;
-	const lineMatch = /^(.*?)(?::(\d+)(?::(\d+))?)$/.exec(decodedHref);
-	const rawPath = lineMatch?.[1] ?? decodedHref;
+function parseChatLocalFileAction(href) {
+	const normalizedHref = href.split("#")[0] ?? href;
+	const [encodedPath, encodedQuery = ""] = normalizedHref.split("?", 2);
+	let path;
+	try {
+		path = decodeURIComponent(encodedPath ?? normalizedHref);
+	} catch {
+		return null;
+	}
+	if (!path || path.startsWith("#") || path.startsWith("//") || !WINDOWS_ABSOLUTE_PATH_PATTERN.test(path) && URI_SCHEME_PATTERN.test(path)) return null;
+	const viewer = new URLSearchParams(encodedQuery).get("viewer");
+	const lineMatch = /^(.*?)(?::(\d+)(?::(\d+))?)$/.exec(path);
+	const rawPath = lineMatch?.[1] ?? path;
 	const line = lineMatch?.[2] ? Number(lineMatch[2]) : void 0;
 	const column = lineMatch?.[3] ? Number(lineMatch[3]) : void 0;
 	return {
 		path: rawPath,
-		label: rawPath.split("/").filter(Boolean).pop() ?? rawPath,
+		label: rawPath.split(/[\\/]/).filter(Boolean).pop() ?? rawPath,
 		viewMode: "preview",
 		...viewer === "source" || viewer === "rendered" ? { previewViewer: viewer } : {},
 		...typeof line === "number" ? { line } : {},
 		...typeof column === "number" ? { column } : {}
 	};
 }
+//#endregion
+//#region src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
+const MARKDOWN_MAX_CHARS = 14e4;
+const INLINE_TOKEN_KIND_ATTR = "data-chat-inline-token-kind";
+const INLINE_TOKEN_KEY_ATTR = "data-chat-inline-token-key";
+const INLINE_TOKEN_LABEL_ATTR = "data-chat-inline-token-label";
+const INLINE_TOKEN_RAW_TEXT_ATTR = "data-chat-inline-token-raw-text";
+function trimMarkdown(value) {
+	if (value.length <= MARKDOWN_MAX_CHARS) return value;
+	return `${value.slice(0, MARKDOWN_MAX_CHARS)}\n\n...`;
+}
+function isSingleLineImageParagraph(node) {
+	let imageCount = 0;
+	for (const child of node?.children ?? []) {
+		if (child.type === "text") {
+			const text = child.value ?? "";
+			if (text.trim().length > 0 || text.includes("\n") || text.includes("\r")) return false;
+			continue;
+		}
+		if (child.tagName !== "img") return false;
+		imageCount += 1;
+	}
+	return imageCount >= 3;
+}
 function prepareInlineTokens(inlineTokens) {
 	if (!inlineTokens || inlineTokens.length === 0) return [];
 	const seenRawTexts = /* @__PURE__ */ new Set();
@@ -3054,11 +3203,14 @@ function readStringProp(props, key) {
 	const value = props[key];
 	return typeof value === "string" && value.length > 0 ? value : null;
 }
-function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens, onFileOpen, renderInlineDisplay }) {
+function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens, onFileOpen, onInlineTokenClick, resolveFileContentUrl, renderInlineDisplay }) {
 	const isUser = role === "user";
 	const remarkPlugins = useMemo(() => inlineTokens && inlineTokens.length > 0 ? [remarkGfm, createRemarkInlineTokenPlugin(inlineTokens)] : [remarkGfm], [inlineTokens]);
 	const markdownComponents = useMemo(() => ({
-		p: ({ children }) => inline ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsx("p", { children }),
+		p: ({ node, children }) => inline ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsx("p", {
+			"data-chat-image-row": isSingleLineImageParagraph(node) ? "three-column" : void 0,
+			children
+		}),
 		span: ({ node: _node, children, ...rest }) => {
 			const restProps = rest;
 			const kind = readStringProp(restProps, INLINE_TOKEN_KIND_ATTR);
@@ -3068,7 +3220,13 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 			if (kind && key && label && rawText) return /* @__PURE__ */ jsx(ChatInlineTokenBadge, {
 				kind,
 				label,
-				isUser
+				isUser,
+				onClick: onInlineTokenClick ? () => onInlineTokenClick({
+					kind,
+					key,
+					label,
+					rawText
+				}) : void 0
 			});
 			return /* @__PURE__ */ jsx("span", {
 				...rest,
@@ -3076,14 +3234,14 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 			});
 		},
 		a: ({ node: _node, href, children, ...rest }) => {
-			const safeHref = resolveSafeHref(href);
-			if (!safeHref) return /* @__PURE__ */ jsx("span", {
-				className: "chat-link-invalid",
-				children
-			});
-			const external = isExternalHref(safeHref);
-			const localFileAction = external ? null : parseLocalFileAction(safeHref);
+			const safeHref = resolveSafeChatResourceHref(href);
+			const external = safeHref ? isExternalChatResourceHref(safeHref) : false;
+			const localFileAction = external ? null : safeHref ? parseChatLocalFileAction(safeHref) : null;
 			const handleClick = (event) => {
+				if (!safeHref) {
+					event.preventDefault();
+					return;
+				}
 				if (!onFileOpen || !localFileAction) return;
 				if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
 				event.preventDefault();
@@ -3091,7 +3249,9 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 			};
 			return /* @__PURE__ */ jsx("a", {
 				...rest,
-				href: safeHref,
+				className: cn(rest.className, !safeHref && "chat-link-invalid"),
+				href: safeHref ?? "#",
+				"aria-disabled": !safeHref || void 0,
 				onClick: handleClick,
 				target: external ? "_blank" : void 0,
 				rel: external ? "noreferrer noopener" : void 0,
@@ -3119,15 +3279,18 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 				className: "chat-task-checkbox"
 			});
 		},
-		img: ({ node: _node, src, alt, ...rest }) => {
-			const safeSrc = resolveSafeHref(src);
+		img: ({ node: _node, src, alt }) => {
+			const safeSrc = resolveSafeChatResourceHref(src);
 			if (!safeSrc) return null;
-			return /* @__PURE__ */ jsx("img", {
-				...rest,
-				src: safeSrc,
+			const localFileAction = parseChatLocalFileAction(safeSrc);
+			const resolvedSrc = localFileAction && resolveFileContentUrl ? resolveFileContentUrl(localFileAction) : safeSrc;
+			if (!resolvedSrc) return null;
+			return /* @__PURE__ */ jsx(ChatMessageImagePreview, {
 				alt: alt || "",
-				loading: "lazy",
-				decoding: "async"
+				closeLabel: texts.attachmentCloseLabel ?? "Close preview",
+				expandLabel: texts.attachmentExpandLabel ?? "Expand image",
+				sizeLabel: null,
+				src: resolvedSrc
 			});
 		},
 		code: ({ node: _node, className, children, ...rest }) => {
@@ -3152,7 +3315,9 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 		inline,
 		isUser,
 		onFileOpen,
+		onInlineTokenClick,
 		renderInlineDisplay,
+		resolveFileContentUrl,
 		texts
 	]);
 	return /* @__PURE__ */ jsx(inline ? "span" : "div", {
@@ -3168,16 +3333,16 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-file/meta.ts
 const FILE_CATEGORY_TILE_CLASSES = {
-	archive: "border-border bg-muted text-muted-foreground",
-	audio: "border-border bg-muted text-muted-foreground",
-	code: "border-border bg-muted text-muted-foreground",
-	data: "border-border bg-muted text-muted-foreground",
-	document: "border-border bg-muted text-muted-foreground",
-	generic: "border-border bg-muted text-muted-foreground",
-	image: "border-border bg-muted text-muted-foreground",
-	pdf: "border-border bg-muted text-muted-foreground",
-	sheet: "border-border bg-muted text-muted-foreground",
-	video: "border-border bg-muted text-muted-foreground"
+	archive: "bg-muted text-muted-foreground",
+	audio: "bg-muted text-muted-foreground",
+	code: "bg-muted text-muted-foreground",
+	data: "bg-muted text-muted-foreground",
+	document: "bg-muted text-muted-foreground",
+	generic: "bg-muted text-muted-foreground",
+	image: "bg-muted text-muted-foreground",
+	pdf: "bg-muted text-muted-foreground",
+	sheet: "bg-muted text-muted-foreground",
+	video: "bg-muted text-muted-foreground"
 };
 const CODE_EXTENSIONS = new Set([
 	"c",
@@ -3387,77 +3552,63 @@ function readFileCategoryLabel(category, texts) {
 }
 function renderMetaLine(categoryLabel, sizeLabel, isUser) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("mt-1 text-xs leading-5", isUser ? "text-primary-foreground/70" : "text-muted-foreground"),
+		className: cn("mt-0.5 text-[11px] leading-4", isUser ? "text-foreground/55" : "text-muted-foreground"),
 		children: sizeLabel ? `${categoryLabel} · ${sizeLabel}` : categoryLabel
 	});
 }
 function renderActionPill(label, isUser, isInteractive) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium", isInteractive ? isUser ? "border-primary-foreground/14 bg-primary-foreground/12 text-primary-foreground" : "border-border bg-card text-foreground" : isUser ? "border-primary-foreground/10 bg-primary-foreground/6 text-primary-foreground/62" : "border-border bg-muted text-muted-foreground"),
+		className: cn("inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium", isInteractive ? isUser ? "bg-black/5 text-foreground/75" : "bg-muted text-muted-foreground" : isUser ? "bg-black/[0.03] text-foreground/45" : "bg-muted/70 text-muted-foreground/70"),
 		children: label
 	});
 }
-function renderActionLink(label, href, isUser) {
+function renderActionControl(params) {
+	const { label, href, isUser, onOpen } = params;
+	const className = cn("inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors", isUser ? "bg-black/5 text-foreground/75 hover:bg-black/10 hover:text-foreground" : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground");
+	if (onOpen) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		onClick: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			onOpen();
+		},
+		children: label
+	});
+	if (!href) return renderActionPill(label, isUser, false);
 	return /* @__PURE__ */ jsx("a", {
 		href,
 		target: "_blank",
 		rel: "noreferrer",
-		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium transition duration-200", isUser ? "border-primary-foreground/14 bg-primary-foreground/12 text-primary-foreground hover:border-primary-foreground/20 hover:bg-primary-foreground/16" : "border-border bg-card text-foreground hover:border-border-hover hover:bg-accent"),
+		className,
 		children: label
 	});
 }
 function FileCategoryGlyph({ category, isUser }) {
 	const Icon = FILE_CATEGORY_ICONS[category];
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex h-14 w-14 shrink-0 items-center justify-center rounded-[1rem] border", isUser ? "border-primary-foreground/12 bg-primary-foreground/10 text-primary-foreground" : FILE_CATEGORY_TILE_CLASSES[category]),
+		className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", isUser ? "bg-black/5 text-foreground/70" : FILE_CATEGORY_TILE_CLASSES[category]),
 		children: /* @__PURE__ */ jsx(Icon, {
-			className: cn("h-7 w-7", isUser ? "text-primary-foreground/92" : "text-current"),
-			strokeWidth: 2.2
-		})
-	});
-}
-function renderImagePreview(params) {
-	const { file, categoryLabel, sizeLabel, isUser } = params;
-	if (!file.dataUrl) return null;
-	return /* @__PURE__ */ jsx("a", {
-		href: file.dataUrl,
-		target: "_blank",
-		rel: "noreferrer",
-		className: "group block",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: cn("relative overflow-hidden rounded-[1rem]", isUser ? "ring-1 ring-primary-foreground/10" : "bg-muted ring-1 ring-border"),
-			children: [/* @__PURE__ */ jsx("img", {
-				src: file.dataUrl,
-				alt: file.label,
-				className: "block h-auto max-h-[26rem] w-full rounded-[1rem] bg-transparent object-contain transition duration-300 group-hover:scale-[1.01]"
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "pointer-events-none absolute right-3 top-3 flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold tracking-[0.18em] text-white backdrop-blur-sm", isUser ? "bg-black/36" : "bg-black/58"),
-					children: categoryLabel
-				}), sizeLabel ? /* @__PURE__ */ jsx("span", {
-					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-medium text-white/92 backdrop-blur-sm", isUser ? "bg-black/28" : "bg-black/46"),
-					children: sizeLabel
-				}) : null]
-			})]
+			className: cn("h-4 w-4", isUser ? "text-foreground/70" : "text-current"),
+			strokeWidth: 2
 		})
 	});
 }
 function renderFileCardHeader(params) {
 	const { category, file, categoryLabel, sizeLabel, isUser, action } = params;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-3 p-3.5",
+		className: "flex items-center gap-2.5 px-2.5 py-2",
 		children: [/* @__PURE__ */ jsx(FileCategoryGlyph, {
 			category,
 			isUser
 		}), /* @__PURE__ */ jsx("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-3",
+				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "min-w-0 flex-1",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "truncate text-[15px] font-semibold leading-5",
+						className: "truncate text-[13px] font-medium leading-5",
 						children: file.label
 					}), renderMetaLine(categoryLabel, sizeLabel, isUser)]
 				}), action]
@@ -3466,7 +3617,7 @@ function renderFileCardHeader(params) {
 	});
 }
 function renderInlineMediaCard(params) {
-	const { category, file, categoryLabel, sizeLabel, isUser, shellClasses, actionLabel } = params;
+	const { category, file, categoryLabel, sizeLabel, isUser, shellClasses, actionLabel, onOpen } = params;
 	if (!file.dataUrl || category !== "audio" && category !== "video") return null;
 	const mediaMimeType = resolveRenderableMimeType(file);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3477,9 +3628,14 @@ function renderInlineMediaCard(params) {
 			categoryLabel,
 			sizeLabel,
 			isUser,
-			action: renderActionLink(actionLabel, file.dataUrl, isUser)
+			action: renderActionControl({
+				label: actionLabel,
+				href: file.dataUrl,
+				isUser,
+				onOpen: onOpen ? () => onOpen(file) : void 0
+			})
 		}), /* @__PURE__ */ jsx("div", {
-			className: "px-3.5 pb-3.5",
+			className: "px-2.5 pb-2.5",
 			children: category === "audio" ? /* @__PURE__ */ jsx("audio", {
 				controls: true,
 				preload: "metadata",
@@ -3490,7 +3646,7 @@ function renderInlineMediaCard(params) {
 					...mediaMimeType ? { type: mediaMimeType } : {}
 				})
 			}) : /* @__PURE__ */ jsx("div", {
-				className: cn("overflow-hidden rounded-[1rem] border", isUser ? "border-primary-foreground/10 bg-black/26" : "border-border bg-muted"),
+				className: cn("overflow-hidden rounded-lg", isUser ? "bg-black/10" : "bg-muted ring-1 ring-border/70"),
 				children: /* @__PURE__ */ jsx("video", {
 					controls: true,
 					preload: "metadata",
@@ -3506,20 +3662,23 @@ function renderInlineMediaCard(params) {
 		})]
 	});
 }
-function ChatMessageFile({ file, isUser = false, texts }) {
+function ChatMessageFile({ file, isUser = false, texts, onOpen }) {
 	const { category, sizeLabel } = buildChatMessageFileMeta(file);
 	const renderAsImage = isImageFileLike(file) && Boolean(file.dataUrl);
 	const renderAsAudio = category === "audio" && Boolean(file.dataUrl);
 	const renderAsVideo = category === "video" && Boolean(file.dataUrl);
 	const isInteractive = Boolean(file.dataUrl);
 	const actionLabel = isInteractive ? texts?.attachmentOpenLabel ?? "Open" : texts?.attachmentAttachedLabel ?? "Attached";
+	const expandLabel = texts?.attachmentExpandLabel ?? "Expand image";
+	const closeLabel = texts?.attachmentCloseLabel ?? "Close preview";
 	const categoryLabel = readFileCategoryLabel(category, texts);
-	const shellClasses = cn("block overflow-hidden rounded-[1.25rem] border transition duration-200", isUser ? "border-primary-foreground/12 bg-primary-foreground/10 text-primary-foreground" : "border-border bg-card text-card-foreground", isInteractive && (isUser ? "hover:border-primary-foreground/18 hover:bg-primary-foreground/13" : "hover:border-border-hover hover:bg-accent"));
-	if (renderAsImage) return renderImagePreview({
-		file,
-		categoryLabel,
+	const shellClasses = cn("block overflow-hidden rounded-xl border transition-colors", isUser ? "border-black/8 bg-black/[0.03] text-foreground" : "border-border/70 bg-card text-card-foreground", isInteractive && (isUser ? "hover:bg-black/[0.05]" : "hover:bg-muted/50"));
+	if (renderAsImage && file.dataUrl) return /* @__PURE__ */ jsx(ChatMessageImagePreview, {
+		alt: file.label,
+		expandLabel,
+		closeLabel,
 		sizeLabel,
-		isUser
+		src: file.dataUrl
 	});
 	if (renderAsAudio || renderAsVideo) return renderInlineMediaCard({
 		category,
@@ -3528,7 +3687,8 @@ function ChatMessageFile({ file, isUser = false, texts }) {
 		sizeLabel,
 		isUser,
 		shellClasses,
-		actionLabel
+		actionLabel,
+		onOpen
 	});
 	const content = renderFileCardHeader({
 		category,
@@ -3542,6 +3702,12 @@ function ChatMessageFile({ file, isUser = false, texts }) {
 		className: shellClasses,
 		children: content
 	});
+	if (onOpen) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn(shellClasses, "group w-full text-left"),
+		onClick: () => onOpen(file),
+		children: content
+	});
 	return /* @__PURE__ */ jsx("a", {
 		href: file.dataUrl,
 		target: "_blank",
@@ -3551,6 +3717,54 @@ function ChatMessageFile({ file, isUser = false, texts }) {
 	});
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/chat-message-file/chat-message-image-row.tsx
+function ChatMessageImageRow({ group, indexOffset, isUser, texts, onOpen }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-chat-message-image-row": "three-column",
+		"data-chat-message-wide-content": "true",
+		className: "grid w-full grid-cols-3 items-start gap-3",
+		children: group.items.map(({ index, part }) => /* @__PURE__ */ jsx(ChatMessageFile, {
+			file: part.file,
+			isUser,
+			texts,
+			onOpen
+		}, `file-${indexOffset + index}`))
+	});
+}
+//#endregion
+//#region src/components/chat/ui/chat-message-list/chat-message-file/chat-message-image-group.utils.ts
+function isPreviewableImageBlock(block) {
+	return Boolean(block?.kind === "part" && block.part.type === "file" && block.part.file.isImage && block.part.file.dataUrl);
+}
+function groupConsecutiveImageFileBlocks(blocks) {
+	const grouped = [];
+	let index = 0;
+	while (index < blocks.length) {
+		const block = blocks[index];
+		if (!isPreviewableImageBlock(block)) {
+			if (block) grouped.push(block);
+			index += 1;
+			continue;
+		}
+		const startIndex = index;
+		const items = [];
+		while (isPreviewableImageBlock(blocks[index])) {
+			items.push(blocks[index]);
+			index += 1;
+		}
+		if (items.length < 3) {
+			grouped.push(...items);
+			continue;
+		}
+		grouped.push({
+			kind: "image-group",
+			key: `image-group-${startIndex}`,
+			items
+		});
+	}
+	return grouped;
+}
+//#endregion
 //#region src/components/chat/hooks/use-reasoning-block-open-state.ts
 function useReasoningBlockOpenState(params) {
 	const { isInProgress } = params;
@@ -3586,7 +3800,6 @@ const DEFAULT_STICKY_THRESHOLD_PX = 10;
 function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey, scrollRef, stickyThresholdPx }) {
 	const [isAtBottom, setIsAtBottom] = useState(true);
 	const isStickyRef = useRef(true);
-	const isProgrammaticScrollRef = useRef(false);
 	const previousResetKeyRef = useRef(null);
 	const pendingInitialScrollRef = useRef(false);
 	const scheduledScrollFrameRef = useRef(null);
@@ -3604,7 +3817,6 @@ function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey
 			scheduledScrollFrameRef.current = null;
 			const currentElement = scrollRef.current;
 			if (!currentElement) return;
-			isProgrammaticScrollRef.current = true;
 			if (typeof currentElement.scrollTo === "function") currentElement.scrollTo({
 				top: currentElement.scrollHeight,
 				behavior
@@ -3617,10 +3829,6 @@ function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey
 		queueScrollToBottom();
 	}, [queueScrollToBottom, updateStickyState]);
 	const onScroll = useCallback(() => {
-		if (isProgrammaticScrollRef.current) {
-			isProgrammaticScrollRef.current = false;
-			return;
-		}
 		const element = scrollRef.current;
 		if (!element) return;
 		updateStickyState(resolveIsAtBottom(element));
@@ -3672,67 +3880,174 @@ function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey
 	};
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/chat-process-meta-row.tsx
+/**
+* Shared process-row metrics.
+* Collapsed process/tool rows should feel like ordinary body text lines.
+*/
+const CHAT_PROCESS_LEADING_COL_CLASS = "inline-flex h-[1.15em] w-[1.15em] shrink-0 items-center justify-center text-current";
+const CHAT_PROCESS_META_ROW_CLASS = "group/process-row flex w-full min-w-0 items-center gap-1.5 py-0 text-[0.925rem] font-normal leading-[1.72] text-muted-foreground/80";
+function ChatProcessLeadingIcon({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(CHAT_PROCESS_LEADING_COL_CLASS, className),
+		children
+	});
+}
+function ChatProcessWorkflowRail({ position }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-tool-workflow-rail": "true",
+		className: cn("pointer-events-none absolute left-[0.575em] w-px -translate-x-1/2 bg-border/70", position === "first" ? "bottom-0 top-[0.86em]" : position === "last" ? "top-0 h-[0.86em]" : "inset-y-0")
+	});
+}
+function ChatProcessMetaRow({ children, className, interactive = false, onClick, role, tabIndex, onKeyDown }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-chat-process-meta-row": "true",
+		className: cn(CHAT_PROCESS_META_ROW_CLASS, interactive ? "cursor-pointer transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35" : null, className),
+		onClick,
+		role,
+		tabIndex,
+		onKeyDown,
+		children
+	});
+}
+//#endregion
+//#region src/components/chat/ui/chat-message-list/chat-collapsible-meta-summary.tsx
+/**
+* Shared collapsible meta-row for process / tool-group / reasoning summaries.
+* Rendered as a plain button-like row (not <summary>) so browsers never inject
+* a default disclosure label such as "详情" / "Details".
+*/
+function ChatCollapsibleMetaSummary({ label, openGroup, open = false, icon: Icon, className, leadingIconClassName, labelClassName, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-chat-process-meta-row": "true",
+		className: cn(CHAT_PROCESS_META_ROW_CLASS, "m-0 w-full border-0 bg-transparent p-0 text-left shadow-none transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", className),
+		"aria-expanded": open,
+		onClick,
+		children: [
+			Icon ? /* @__PURE__ */ jsx(ChatProcessLeadingIcon, {
+				className: cn("relative z-[1] rounded-sm", leadingIconClassName),
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: "h-[1.05em] w-[1.05em]",
+					strokeWidth: 2.25
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 shrink truncate", labelClassName),
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("inline-flex h-[1.15em] w-[1.15em] shrink-0 items-center justify-center text-muted-foreground/80 transition-opacity", open ? "opacity-100" : "opacity-0 group-hover/process-row:opacity-100 focus-visible:opacity-100"),
+				children: /* @__PURE__ */ jsx(ChevronRight, {
+					className: cn("h-[1.05em] w-[1.05em] transition-transform", open && "rotate-90"),
+					strokeWidth: 2.25
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
-function normalizeReasoningLabel(label) {
-	const normalizedLabel = label.trim().toLowerCase();
-	if (normalizedLabel === "reasoning" || normalizedLabel === "thinking" || normalizedLabel === "推理" || normalizedLabel === "推理过程" || normalizedLabel === "思考过程" || normalizedLabel === "思考") return "思考";
-	return label;
+function formatReasoningLabel(label, text, characterCountTemplate) {
+	const characterCount = Array.from(text).length;
+	return (characterCountTemplate ?? `${label} · {count}`).split("{count}").join(String(characterCount));
 }
-function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
+function ChatReasoningBlock({ label, text, characterCountTemplates, isUser, isInProgress }) {
 	const { isOpen, onSummaryClick } = useReasoningBlockOpenState({ isInProgress });
 	const scrollRef = useRef(null);
-	const displayLabel = normalizeReasoningLabel(label);
+	const displayLabel = formatReasoningLabel(label, text, isInProgress ? characterCountTemplates?.inProgress : characterCountTemplates?.completed);
 	const { onScroll } = useStickyBottomScroll({
 		scrollRef,
-		resetKey: `${displayLabel}:${isInProgress ? "streaming" : "idle"}`,
+		resetKey: "reasoning",
 		isLoading: false,
 		hasContent: text.length > 0,
 		contentVersion: text,
 		stickyThresholdPx: 20
 	});
-	return /* @__PURE__ */ jsxs("details", {
-		className: "mt-2",
-		open: isOpen,
-		children: [/* @__PURE__ */ jsx("summary", {
-			className: cn("cursor-pointer text-xs", isUser ? "text-primary-100" : "text-muted-foreground"),
-			onClick: onSummaryClick,
-			children: displayLabel
-		}), /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/reasoning",
+		children: [/* @__PURE__ */ jsx(ChatCollapsibleMetaSummary, {
+			openGroup: "reasoning",
+			open: isOpen,
+			icon: Brain,
+			leadingIconClassName: isUser ? "bg-primary" : "bg-card",
+			label: displayLabel,
+			labelClassName: isUser ? "text-primary-100" : void 0,
+			onClick: onSummaryClick
+		}), isOpen ? /* @__PURE__ */ jsx("div", {
 			ref: scrollRef,
 			onScroll,
 			"data-reasoning-scroll": "true",
-			className: cn("mt-2 w-fit max-w-[500px] max-h-56 overflow-y-auto rounded-lg custom-scrollbar", isUser ? "bg-primary/70" : "bg-muted"),
+			className: cn("mt-1 w-fit max-w-[500px] max-h-56 overflow-y-auto rounded-lg custom-scrollbar", isUser ? "bg-primary/70" : "bg-muted"),
 			children: /* @__PURE__ */ jsx("pre", {
 				className: "min-w-0 whitespace-pre-wrap break-all p-2 text-[11px]",
 				children: text
 			})
-		})]
+		}) : null]
 	});
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-root.tsx
+/**
+* Default tool presentation is an inline process row, not a heavy card.
+* Expanded details sit under the overview text column with clear clearance
+* from any workflow rail in the icon column.
+*/
 function ToolCardRoot({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("my-2 rounded-lg border border-border bg-card shadow-sm overflow-hidden text-[12px] text-card-foreground", "w-[280px] sm:w-[360px] md:w-[480px] min-w-full max-w-full transition-all flex flex-col", className),
+		className: cn("relative my-0 flex w-full min-w-0 max-w-full flex-col text-[0.925rem] leading-[1.72] text-muted-foreground", className),
 		children
 	});
 }
 function ToolCardContent({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("border-t border-border bg-muted/35 px-3 pt-1 pb-2 w-full overflow-hidden", className),
+		className: cn("mt-0.5 w-full max-w-full min-w-0 overflow-hidden pl-[calc(1.15em+0.375rem)] text-[0.925rem] leading-[1.72] text-muted-foreground", className),
 		children
 	});
 }
-//#endregion
-//#region src/components/chat/ui/chat-message-list/tool-card/tool-card-status.tsx
-const STATUS_STYLES = {
-	running: {
-		text: "text-primary/70",
-		icon: Loader2,
-		spin: true
+function ToolCardDetailSection({ label, tone, children }) {
+	const style = {
+		input: {
+			dot: "bg-muted-foreground/60",
+			body: "text-foreground"
+		},
+		output: {
+			dot: "bg-primary/70",
+			body: "text-foreground"
+		},
+		error: {
+			dot: "bg-rose-500/80",
+			body: "text-rose-950/85"
+		}
+	}[tone];
+	return /* @__PURE__ */ jsxs("section", {
+		className: "overflow-hidden rounded-md border border-border/70 bg-muted/20",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 border-b border-border/60 px-2.5 py-1.5 text-[10px] font-medium tracking-wide text-muted-foreground",
+			children: [/* @__PURE__ */ jsx("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }), /* @__PURE__ */ jsx("span", {
+				className: "normal-case tracking-normal",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "w-full overflow-hidden",
+			children: /* @__PURE__ */ jsx("pre", {
+				className: cn("w-full max-w-full min-w-0 max-h-64 overflow-x-auto overflow-y-auto px-2.5 py-2 font-mono text-[12px] leading-relaxed whitespace-pre custom-scrollbar", style.body),
+				children
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/chat/ui/chat-message-list/tool-card/tool-card-status.tsx
+const STATUS_STYLES = {
+	running: {
+		text: "text-muted-foreground",
+		icon: Loader2,
+		spin: true
 	},
 	success: {
-		text: "text-primary/70",
+		text: "text-muted-foreground/75",
 		icon: Check,
 		spin: false
 	},
@@ -3742,20 +4057,23 @@ const STATUS_STYLES = {
 		spin: false
 	},
 	cancelled: {
-		text: "text-muted-foreground",
+		text: "text-muted-foreground/70",
 		icon: Minus,
 		spin: false
 	}
 };
-function ToolStatusLabel({ card }) {
+function ToolStatusLabel({ card, iconOnly = false }) {
 	const style = STATUS_STYLES[card.statusTone] || STATUS_STYLES.cancelled;
 	const Icon = style.icon;
+	const showLabel = !iconOnly && (card.statusTone === "running" || card.statusTone === "error");
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex items-center gap-1.5 text-[11px] font-medium leading-none shrink-0", style.text),
+		className: cn("inline-flex shrink-0 items-center gap-1 text-[0.925rem] font-normal leading-[1.72]", style.text),
+		"aria-label": iconOnly ? card.statusLabel : void 0,
 		children: [/* @__PURE__ */ jsx(Icon, {
-			className: cn("h-3.5 w-3.5", style.spin && "animate-spin"),
-			strokeWidth: 3
-		}), card.statusTone === "running" ? card.statusLabel : null]
+			"aria-hidden": "true",
+			className: cn("h-[1.05em] w-[1.05em]", style.spin && "animate-spin"),
+			strokeWidth: 2.25
+		}), showLabel ? card.statusLabel : null]
 	});
 }
 //#endregion
@@ -3764,12 +4082,12 @@ function resolveToolCardActionView(action) {
 	if (action.kind === "show-content") return {
 		icon: Eye,
 		label: action.label,
-		toneClassName: "border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-primary/35"
+		toneClassName: "border-border/70 bg-transparent text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:ring-primary/35"
 	};
 	return {
 		icon: ArrowUpRight,
 		label: action.label ?? (action.sessionKind === "child" ? "Open child session" : "Open session"),
-		toneClassName: "border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-primary/35"
+		toneClassName: "border-border/70 bg-transparent text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:ring-primary/35"
 	};
 }
 function ToolCardActionButton({ action, onAction }) {
@@ -3787,12 +4105,12 @@ function ToolCardActionButton({ action, onAction }) {
 			children: /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: handleClick,
-				className: cn("inline-flex h-7 w-7 items-center justify-center rounded-full border transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1", view.toneClassName),
+				className: cn("inline-flex h-6 w-6 items-center justify-center rounded-md border transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1", view.toneClassName),
 				"aria-label": view.label,
 				title: view.label,
 				children: /* @__PURE__ */ jsx(Icon, {
 					className: "h-3.5 w-3.5",
-					strokeWidth: 2.5
+					strokeWidth: 2.25
 				})
 			})
 		}), /* @__PURE__ */ jsx(TooltipContent, {
@@ -3802,44 +4120,82 @@ function ToolCardActionButton({ action, onAction }) {
 		})] })
 	});
 }
-function ToolCardHeader({ card, icon: Icon, expanded, canExpand, hideSummary = false, actionSlot, onToggle }) {
+function humanizeToolName(toolName) {
+	return toolName.replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim();
+}
+function handleToolHeaderKeyDown(event, onToggle) {
+	if (event.key !== "Enter" && event.key !== " ") return;
+	event.preventDefault();
+	onToggle();
+}
+function ToolHeaderSummary({ label, summary }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 shrink truncate",
+		children: [label, summary ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "mx-1.5 select-none text-muted-foreground/45",
+			children: "·"
+		}), /* @__PURE__ */ jsx("span", {
+			title: summary,
+			children: summary
+		})] }) : null]
+	});
+}
+function ToolHeaderChevron({ expanded }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex h-[1.15em] w-[1.15em] shrink-0 items-center justify-center text-muted-foreground/80 transition-opacity", expanded ? "opacity-100" : "opacity-0 group-hover/process-row:opacity-100 group-focus-within/process-row:opacity-100"),
+		children: /* @__PURE__ */ jsx(ChevronRight, {
+			className: cn("h-[1.05em] w-[1.05em] transition-transform", expanded && "rotate-90"),
+			strokeWidth: 2.25
+		})
+	});
+}
+function ToolHeaderChangeSummary({ additions, deletions }) {
+	if (additions === 0 && deletions === 0) return null;
+	const accessibleLabel = [additions > 0 ? `+${additions}` : null, deletions > 0 ? `-${deletions}` : null].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 items-center gap-1.5 tabular-nums text-muted-foreground/75",
+		"aria-label": accessibleLabel,
+		children: [additions > 0 ? /* @__PURE__ */ jsxs("span", {
+			className: "transition-colors group-hover/process-row:text-emerald-600",
+			children: ["+", additions]
+		}) : null, deletions > 0 ? /* @__PURE__ */ jsxs("span", {
+			className: "transition-colors group-hover/process-row:text-rose-600",
+			children: ["-", deletions]
+		}) : null]
+	});
+}
+function ToolCardHeader({ card, toolLabel, changeSummary, icon: Icon, expanded, canExpand, hideSummary = false, actionSlot, onToggle }) {
 	const summaryPart = hideSummary ? "" : card.summary?.replace(/^(command|path|args|query|input):\s*/i, "") ?? "";
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center gap-3 px-3 py-2.5 transition-colors bg-transparent", canExpand ? "cursor-pointer hover:bg-accent/70" : ""),
-		onClick: onToggle,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden font-mono text-foreground",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				className: "h-4 w-4 text-primary/70 shrink-0",
-				strokeWidth: 3
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-bold shrink-0 tracking-tight",
-					children: card.toolName
-				}), summaryPart && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground/45 font-bold select-none shrink-0",
-					children: "›"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "block min-w-0 flex-1 truncate font-normal text-muted-foreground",
-					title: summaryPart,
-					children: summaryPart
-				})] })]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3 shrink-0",
-			children: [
-				actionSlot,
-				/* @__PURE__ */ jsx(ToolStatusLabel, { card }),
-				canExpand && (expanded ? /* @__PURE__ */ jsx(ChevronDown, {
-					className: "h-4 w-4 text-muted-foreground",
-					strokeWidth: 3
-				}) : /* @__PURE__ */ jsx(ChevronRight, {
-					className: "h-4 w-4 text-muted-foreground",
-					strokeWidth: 3
-				}))
-			]
-		})]
+	const displayLabel = toolLabel ?? humanizeToolName(card.toolName);
+	return /* @__PURE__ */ jsxs(ChatProcessMetaRow, {
+		interactive: canExpand,
+		onClick: canExpand ? () => onToggle() : void 0,
+		role: canExpand ? "button" : void 0,
+		tabIndex: canExpand ? 0 : void 0,
+		onKeyDown: canExpand ? (event) => handleToolHeaderKeyDown(event, onToggle) : void 0,
+		children: [
+			/* @__PURE__ */ jsx(ChatProcessLeadingIcon, {
+				className: "relative z-[1] rounded-sm bg-card",
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: "h-[1.05em] w-[1.05em]",
+					strokeWidth: 2.25
+				})
+			}),
+			/* @__PURE__ */ jsx(ToolHeaderSummary, {
+				label: displayLabel,
+				summary: summaryPart
+			}),
+			changeSummary ? /* @__PURE__ */ jsx(ToolHeaderChangeSummary, { ...changeSummary }) : null,
+			/* @__PURE__ */ jsx(ToolStatusLabel, {
+				card,
+				iconOnly: Boolean(toolLabel)
+			}),
+			canExpand ? /* @__PURE__ */ jsx(ToolHeaderChevron, { expanded }) : null,
+			actionSlot ? /* @__PURE__ */ jsx("span", {
+				className: "inline-flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover/process-row:opacity-100 group-focus-within/process-row:opacity-100",
+				children: actionSlot
+			}) : null
+		]
 	});
 }
 function ToolCardHeaderAction({ action, onAction }) {
@@ -4082,7 +4438,7 @@ function FileOperationBlock({ block, showPathRow, isFirst, onFileOpen }) {
 		className: cn("overflow-hidden bg-card", !isFirst && "border-t border-border"),
 		children: [
 			showMetaRow ? /* @__PURE__ */ jsxs("div", {
-				className: cn("flex items-center justify-between gap-4 border-b border-border px-4 text-muted-foreground", showPathRow ? "py-2" : "py-1.5"),
+				className: cn("flex min-h-9 items-center justify-between gap-4 border-b border-border px-3 text-muted-foreground", showPathRow ? "py-2" : "py-1.5"),
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "min-w-0 flex-1",
 					children: showPathRow ? /* @__PURE__ */ jsx(TooltipProvider, {
@@ -4092,7 +4448,7 @@ function FileOperationBlock({ block, showPathRow, isFirst, onFileOpen }) {
 							children: /* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: handlePathClick,
-								className: cn("w-full truncate whitespace-nowrap text-left font-mono text-[12px] font-medium text-foreground", onFileOpen && "transition-colors hover:text-primary hover:underline"),
+								className: cn("w-full truncate whitespace-nowrap text-left font-mono text-[12px] font-medium leading-5 text-foreground", onFileOpen && "transition-colors hover:text-primary hover:underline"),
 								title: block.path,
 								children: block.path
 							})
@@ -4118,28 +4474,28 @@ function FileOperationBlock({ block, showPathRow, isFirst, onFileOpen }) {
 				children: /* @__PURE__ */ jsx("div", {
 					className: "overflow-x-auto custom-scrollbar",
 					children: /* @__PURE__ */ jsx("pre", {
-						className: "min-w-max whitespace-pre bg-card px-4 py-2 font-mono text-[11px] leading-5 text-foreground",
+						className: "min-w-max whitespace-pre bg-card px-3 py-2 font-mono text-[11px] leading-5 text-foreground",
 						children: block.rawText
 					})
 				})
 			}) : null,
 			block.truncated && !previewBlock ? /* @__PURE__ */ jsx("div", {
-				className: "border-t border-border bg-muted px-4 py-2 text-[10px] text-muted-foreground",
+				className: "border-t border-border bg-muted px-3 py-2 text-[10px] text-muted-foreground",
 				children: "Showing a shortened diff preview."
 			}) : null
 		]
 	});
 }
-function ToolCardFileOperationContent({ card, className, onFileOpen }) {
+function ToolCardFileOperationContent({ card, className, onFileOpen, showPathRow = true }) {
 	const blocks = card.fileOperation?.blocks ?? [];
 	const output = card.output?.trim() ?? "";
 	if (blocks.length === 0 && !output) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("overflow-hidden bg-card", className),
+		className: cn("overflow-hidden rounded-md border border-border/70 bg-card", className),
 		children: [blocks.map((block, index) => {
 			return /* @__PURE__ */ jsx(FileOperationBlock, {
 				block,
-				showPathRow: true,
+				showPathRow,
 				isFirst: index === 0,
 				onFileOpen
 			}, block.key);
@@ -4151,7 +4507,7 @@ function ToolCardFileOperationContent({ card, className, onFileOpen }) {
 			children: /* @__PURE__ */ jsx("div", {
 				className: "overflow-x-auto custom-scrollbar",
 				children: /* @__PURE__ */ jsx("pre", {
-					className: "min-w-max whitespace-pre bg-card px-4 py-2 font-mono text-[11px] leading-5 text-foreground",
+					className: "min-w-max whitespace-pre bg-card px-3 py-2 font-mono text-[11px] leading-5 text-foreground",
 					children: output
 				})
 			})
@@ -4159,9 +4515,279 @@ function ToolCardFileOperationContent({ card, className, onFileOpen }) {
 	});
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/tool-card/terminal/terminal-ansi.utils.ts
+const ANSI_ESCAPE_PREFIX = String.fromCharCode(27);
+const ANSI_PATTERN = new RegExp(`${ANSI_ESCAPE_PREFIX}\\[(.*?)([ -/]*[@-~])`, "g");
+function hasAnsiSequences(value) {
+	return value.includes(`${ANSI_ESCAPE_PREFIX}[`);
+}
+function stripAnsiSequences(value) {
+	return value.replace(new RegExp(`${ANSI_ESCAPE_PREFIX}\\[[0-?]*[ -/]*[@-~]`, "g"), "");
+}
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+const DEFAULT_STYLE = {
+	bold: false,
+	dim: false,
+	italic: false,
+	underline: false,
+	inverse: false
+};
+const SGR_STYLE_PATCHES = {
+	1: { bold: true },
+	2: { dim: true },
+	3: { italic: true },
+	4: { underline: true },
+	7: { inverse: true },
+	22: {
+		bold: false,
+		dim: false
+	},
+	23: { italic: false },
+	24: { underline: false },
+	27: { inverse: false },
+	39: { fg: void 0 },
+	49: { bg: void 0 }
+};
+const BASIC_FG = {
+	30: "black",
+	31: "red",
+	32: "green",
+	33: "yellow",
+	34: "blue",
+	35: "magenta",
+	36: "cyan",
+	37: "white",
+	90: "bright-black",
+	91: "bright-red",
+	92: "bright-green",
+	93: "bright-yellow",
+	94: "bright-blue",
+	95: "bright-magenta",
+	96: "bright-cyan",
+	97: "bright-white"
+};
+const BASIC_BG = {
+	40: "black",
+	41: "red",
+	42: "green",
+	43: "yellow",
+	44: "blue",
+	45: "magenta",
+	46: "cyan",
+	47: "white",
+	100: "bright-black",
+	101: "bright-red",
+	102: "bright-green",
+	103: "bright-yellow",
+	104: "bright-blue",
+	105: "bright-magenta",
+	106: "bright-cyan",
+	107: "bright-white"
+};
+function resolveExtendedColor(params, index) {
+	const mode = params[index + 1];
+	if (mode === 5 && typeof params[index + 2] === "number") return {
+		color: `ansi-256-${params[index + 2]}`,
+		consumed: 2
+	};
+	if (mode === 2 && typeof params[index + 2] === "number" && typeof params[index + 3] === "number" && typeof params[index + 4] === "number") return {
+		color: `rgb(${params[index + 2]},${params[index + 3]},${params[index + 4]})`,
+		consumed: 4
+	};
+	return null;
+}
+function applySgr(style, params) {
+	let next = { ...style };
+	for (let index = 0; index < params.length; index += 1) {
+		const code = params[index];
+		if (code === 0) return { ...DEFAULT_STYLE };
+		const stylePatch = SGR_STYLE_PATCHES[code];
+		if (stylePatch) {
+			next = {
+				...next,
+				...stylePatch
+			};
+			continue;
+		}
+		if (code === 38 || code === 48) {
+			const extendedColor = resolveExtendedColor(params, index);
+			if (extendedColor) {
+				next = code === 38 ? {
+					...next,
+					fg: extendedColor.color
+				} : {
+					...next,
+					bg: extendedColor.color
+				};
+				index += extendedColor.consumed;
+			}
+			continue;
+		}
+		if (BASIC_FG[code]) {
+			next = {
+				...next,
+				fg: BASIC_FG[code]
+			};
+			continue;
+		}
+		if (BASIC_BG[code]) next = {
+			...next,
+			bg: BASIC_BG[code]
+		};
+	}
+	return next;
+}
+function styleToClassName(style) {
+	const classes = ["ansi"];
+	if (style.bold) classes.push("ansi-bold");
+	if (style.dim) classes.push("ansi-dim");
+	if (style.italic) classes.push("ansi-italic");
+	if (style.underline) classes.push("ansi-underline");
+	if (style.inverse) classes.push("ansi-inverse");
+	if (style.fg) if (style.fg.startsWith("rgb(")) classes.push("ansi-fg-custom");
+	else if (style.fg.startsWith("ansi-256-")) {
+		classes.push("ansi-fg-256");
+		classes.push(style.fg);
+	} else classes.push(`ansi-fg-${style.fg}`);
+	if (style.bg) if (style.bg.startsWith("rgb(")) classes.push("ansi-bg-custom");
+	else if (style.bg.startsWith("ansi-256-")) {
+		classes.push("ansi-bg-256");
+		classes.push(style.bg);
+	} else classes.push(`ansi-bg-${style.bg}`);
+	return classes.join(" ");
+}
+function styleToInlineStyle(style) {
+	const parts = [];
+	if (style.fg?.startsWith("rgb(")) parts.push(`color:${style.fg}`);
+	if (style.bg?.startsWith("rgb(")) parts.push(`background-color:${style.bg}`);
+	return parts.length > 0 ? parts.join(";") : void 0;
+}
+function openSpan(style) {
+	const className = styleToClassName(style);
+	const inline = styleToInlineStyle(style);
+	return inline ? `<span class="${className}" style="${inline}">` : `<span class="${className}">`;
+}
+/**
+* Lightweight ANSI SGR -> HTML converter for terminal output.
+* Handles common color/style codes without adding a dependency.
+*/
+function ansiToHtml(value) {
+	if (!value) return "";
+	if (!hasAnsiSequences(value)) return escapeHtml(value);
+	let html = "";
+	let lastIndex = 0;
+	let style = { ...DEFAULT_STYLE };
+	let spanOpen = false;
+	const flushText = (text) => {
+		if (!text) return;
+		if (!spanOpen) {
+			html += openSpan(style);
+			spanOpen = true;
+		}
+		html += escapeHtml(text);
+	};
+	const closeSpan = () => {
+		if (spanOpen) {
+			html += "</span>";
+			spanOpen = false;
+		}
+	};
+	value.replace(ANSI_PATTERN, (match, body, terminator, offset) => {
+		flushText(value.slice(lastIndex, offset));
+		lastIndex = offset + match.length;
+		if (terminator !== "m") return match;
+		const params = body.trim().length === 0 ? [0] : body.split(";").map((part) => Number.parseInt(part, 10)).filter((part) => Number.isFinite(part));
+		closeSpan();
+		style = applySgr(style, params.length > 0 ? params : [0]);
+		return match;
+	});
+	flushText(value.slice(lastIndex));
+	closeSpan();
+	return html;
+}
+//#endregion
+//#region src/components/chat/ui/chat-message-list/tool-card/terminal/terminal-panes.tsx
+const MAX_TERMINAL_TEXT_CHARS = 12e4;
+function clampTerminalText(value) {
+	if (value.length <= MAX_TERMINAL_TEXT_CHARS) return value;
+	return `${value.slice(0, MAX_TERMINAL_TEXT_CHARS)}\n…`;
+}
+function TerminalCode({ code, language, preferAnsi = false, className }) {
+	const source = clampTerminalText(code);
+	const content = useMemo(() => {
+		if (preferAnsi && hasAnsiSequences(source)) return {
+			html: ansiToHtml(source),
+			language: "ansi",
+			highlighted: true
+		};
+		const plain = stripAnsiSequences(source);
+		return chatCodeSyntaxHighlighter.highlight(plain, language);
+	}, [
+		language,
+		preferAnsi,
+		source
+	]);
+	return /* @__PURE__ */ jsx("code", {
+		className: cn("hljs chat-terminal-code", `language-${content.language}`, className),
+		"data-highlighted": content.highlighted ? "true" : "false",
+		dangerouslySetInnerHTML: { __html: content.html }
+	});
+}
+/**
+* Compact terminal-style surface for command tools.
+* Style only — no decorative window chrome.
+*/
+function ChatTerminalSurface({ command, output, emptyLabel, isRunning, hasOutput, isError = false }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("chat-terminal-surface", isError ? "chat-terminal-surface-error" : void 0),
+		"data-testid": "chat-terminal-surface",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "chat-terminal-body custom-scrollbar",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "chat-terminal-line chat-terminal-line-command",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "chat-terminal-gutter",
+					"aria-hidden": "true",
+					children: "$"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "chat-terminal-line-content",
+					children: command ? /* @__PURE__ */ jsxs("pre", {
+						className: "chat-terminal-pre",
+						children: [/* @__PURE__ */ jsx(TerminalCode, {
+							code: command,
+							language: "bash"
+						}), isRunning && !hasOutput ? /* @__PURE__ */ jsx("span", {
+							className: "chat-terminal-caret",
+							"aria-hidden": "true"
+						}) : null]
+					}) : /* @__PURE__ */ jsx("div", { className: "chat-terminal-skeleton" })
+				})]
+			}), (hasOutput || !isRunning) && /* @__PURE__ */ jsx("div", {
+				className: "chat-terminal-output-block",
+				children: hasOutput ? /* @__PURE__ */ jsxs("pre", {
+					className: cn("chat-terminal-pre chat-terminal-output", isError ? "chat-terminal-pre-error" : void 0),
+					children: [/* @__PURE__ */ jsx(TerminalCode, {
+						code: output,
+						language: isError ? "text" : "shell",
+						preferAnsi: true,
+						className: isError ? "chat-terminal-code-error" : void 0
+					}), isRunning ? /* @__PURE__ */ jsx("span", {
+						className: "chat-terminal-caret",
+						"aria-hidden": "true"
+					}) : null]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "chat-terminal-empty",
+					children: emptyLabel
+				})
+			})]
+		})
+	});
+}
+//#endregion
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
 const TOOL_CARD_AUTO_EXPAND_DELAY_MS = 200;
-const ANSI_ESCAPE_PATTERN = new RegExp(`${String.fromCharCode(27)}\\[[0-?]*[ -/]*[@-~]`, "g");
 function readNonEmptyString(value) {
 	if (typeof value !== "string") return null;
 	return value.length > 0 ? value : null;
@@ -4169,9 +4795,6 @@ function readNonEmptyString(value) {
 function isRecord(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function stripAnsi(value) {
-	return value.replace(ANSI_ESCAPE_PATTERN, "");
-}
 function isStructuredTerminalRecord(record) {
 	return "command" in record || "workingDir" in record || "exitCode" in record || "durationMs" in record || "stdout" in record || "stderr" in record || "aggregated_output" in record || "combinedOutput" in record;
 }
@@ -4186,26 +4809,35 @@ function extractTerminalOutputFromRecord(record) {
 function normalizeTerminalOutput(rawOutput, structuredOutput) {
 	if (isRecord(structuredOutput)) {
 		const terminalOutput = extractTerminalOutputFromRecord(structuredOutput);
-		if (terminalOutput) return stripAnsi(terminalOutput);
+		if (terminalOutput) return terminalOutput;
 		if (isStructuredTerminalRecord(structuredOutput)) return "";
 	}
 	if (!rawOutput) return "";
 	const trimmed = rawOutput.trim();
-	if (!trimmed.startsWith("{")) return stripAnsi(rawOutput);
+	if (!trimmed.startsWith("{")) return rawOutput;
 	try {
 		const parsed = JSON.parse(trimmed);
-		if (!isRecord(parsed)) return stripAnsi(rawOutput);
+		if (!isRecord(parsed)) return rawOutput;
 		const terminalOutput = extractTerminalOutputFromRecord(parsed);
-		if (terminalOutput) return stripAnsi(terminalOutput);
+		if (terminalOutput) return terminalOutput;
 		if (isStructuredTerminalRecord(parsed)) return "";
-		return stripAnsi(rawOutput);
+		return rawOutput;
 	} catch {
-		return stripAnsi(rawOutput);
+		return rawOutput;
 	}
 }
 function shouldAutoExpandRunningFileOperation(toolName) {
 	return toolName === "write_file" || toolName === "edit_file";
 }
+function countFileOperationChanges(blocks) {
+	return blocks.reduce((totals, block) => ({
+		additions: totals.additions + block.lines.filter((line) => line.kind === "add").length,
+		deletions: totals.deletions + block.lines.filter((line) => line.kind === "remove").length
+	}), {
+		additions: 0,
+		deletions: 0
+	});
+}
 function useToolCardExpandedState({ canExpand, isRunning, autoExpandWhileRunning = true, expandOnError = false, statusTone }) {
 	const [expanded, setExpanded] = useState(false);
 	const [hasUserToggled, setHasUserToggled] = useState(false);
@@ -4264,47 +4896,20 @@ function useToolCardExpandedState({ canExpand, isRunning, autoExpandWhileRunning
 		onToggle
 	};
 }
-function GenericToolSection({ label, tone, children }) {
-	const style = {
-		input: {
-			shell: "border-border bg-card",
-			header: "border-border bg-muted/55 text-muted-foreground",
-			dot: "bg-muted-foreground/60",
-			body: "text-foreground"
-		},
-		output: {
-			shell: "border-border bg-card",
-			header: "border-border bg-muted/55 text-muted-foreground",
-			dot: "bg-primary/70",
-			body: "text-foreground"
-		},
-		error: {
-			shell: "border-rose-200/80 bg-rose-50/85",
-			header: "border-rose-200/80 bg-rose-100/80 text-rose-700",
-			dot: "bg-rose-500/80",
-			body: "text-rose-950/85"
-		}
-	}[tone];
-	return /* @__PURE__ */ jsxs("section", {
-		className: cn("overflow-hidden rounded-md border shadow-[inset_0_1px_0_rgba(255,255,255,0.45)]", style.shell),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("flex items-center gap-2 border-b px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.16em]", style.header),
-			children: [/* @__PURE__ */ jsx("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }), /* @__PURE__ */ jsx("span", { children: label })]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "w-full overflow-hidden",
-			children: /* @__PURE__ */ jsx("pre", {
-				className: cn("w-full max-w-full min-w-0 max-h-64 overflow-x-auto overflow-y-auto px-3 py-2.5 font-mono text-[12px] leading-relaxed whitespace-pre custom-scrollbar", style.body),
-				children
-			})
-		})]
-	});
+function extractTerminalMeta(structuredOutput) {
+	if (!isRecord(structuredOutput)) return {};
+	return {
+		exitCode: typeof structuredOutput.exitCode === "number" ? structuredOutput.exitCode : typeof structuredOutput.exit_code === "number" ? structuredOutput.exit_code : null,
+		workingDir: readNonEmptyString(structuredOutput.workingDir) ?? readNonEmptyString(structuredOutput.cwd) ?? readNonEmptyString(structuredOutput.working_directory)
+	};
 }
-function TerminalExecutionView({ card }) {
+function TerminalExecutionView({ card, toolLabel }) {
 	const output = normalizeTerminalOutput(card.output, card.outputData);
 	const isRunning = card.statusTone === "running";
 	const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
 	const hasOutput = output.trim().length > 0;
 	const canExpand = isRunning || hasOutput || Boolean(commandPart?.trim());
+	const meta = extractTerminalMeta(card.outputData);
 	const { expanded, onToggle } = useToolCardExpandedState({
 		canExpand,
 		isRunning,
@@ -4314,38 +4919,32 @@ function TerminalExecutionView({ card }) {
 	});
 	return /* @__PURE__ */ jsxs(ToolCardRoot, { children: [/* @__PURE__ */ jsx(ToolCardHeader, {
 		card,
+		toolLabel,
 		icon: Terminal,
 		expanded,
 		canExpand,
 		onToggle
-	}), expanded && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar min-h-0 text-[12px]",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-start gap-2 leading-relaxed",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-primary/55 font-medium shrink-0 select-none mt-[1px]",
-				children: "$"
-			}), /* @__PURE__ */ jsx("div", {
-				className: "flex-1 min-w-0",
-				children: commandPart ? /* @__PURE__ */ jsxs("div", {
-					className: "text-foreground break-words whitespace-pre-wrap tracking-tight font-medium inline-block",
-					children: [commandPart, isRunning && !output && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-primary/60 animate-pulse align-middle" })]
-				}) : /* @__PURE__ */ jsx("div", { className: "h-3 w-32 bg-muted rounded animate-pulse mt-2" })
-			})]
+	}), expanded && /* @__PURE__ */ jsx(ToolCardContent, {
+		className: "bg-transparent py-0",
+		children: /* @__PURE__ */ jsx(ChatTerminalSurface, {
+			command: commandPart,
+			output,
+			emptyLabel: card.emptyLabel,
+			isRunning,
+			hasOutput,
+			isError: card.statusTone === "error",
+			exitCode: meta.exitCode,
+			workingDir: meta.workingDir
 		})
-	}), (hasOutput || !isRunning) && /* @__PURE__ */ jsx(ToolCardContent, {
-		className: hasOutput ? void 0 : "bg-muted/20 py-2",
-		children: /* @__PURE__ */ jsxs("pre", {
-			className: cn("font-mono text-[12px] text-muted-foreground whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar leading-relaxed", hasOutput ? "px-0" : "rounded-md border border-dashed border-border bg-card/70 px-3 py-2 italic"),
-			children: [hasOutput ? output : card.emptyLabel, isRunning && hasOutput && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-primary/60 animate-pulse align-middle" })]
-		})
-	})] })] });
+	})] });
 }
-function FileOperationView({ card, onFileOpen }) {
+function FileOperationView({ card, toolLabel, onFileOpen }) {
+	const input = card.input?.trim() ?? "";
 	const output = card.output?.trim() ?? "";
 	const isRunning = card.statusTone === "running";
 	const hasStructuredPreview = Boolean(card.fileOperation?.blocks.length);
-	const hasContent = hasStructuredPreview || Boolean(output);
+	const showRawInput = Boolean(input) && !hasStructuredPreview;
+	const hasContent = hasStructuredPreview || Boolean(input) || Boolean(output);
 	const previewBlocks = card.fileOperation?.blocks ?? [];
 	const previewLineCount = previewBlocks.reduce((count, block) => count + block.lines.length, 0);
 	const previewCharCount = previewBlocks.reduce((count, block) => {
@@ -4360,22 +4959,34 @@ function FileOperationView({ card, onFileOpen }) {
 		expandOnError: hasContent,
 		statusTone: card.statusTone
 	});
+	const isEdit = card.toolName === "edit_file" || card.toolName === "write_file" || card.toolName === "apply_patch" || card.toolName === "file_change";
 	return /* @__PURE__ */ jsxs(ToolCardRoot, { children: [/* @__PURE__ */ jsx(ToolCardHeader, {
 		card,
-		icon: card.toolName === "edit_file" || card.toolName === "write_file" || card.toolName === "apply_patch" || card.toolName === "file_change" ? Code2 : FileText,
+		toolLabel,
+		changeSummary: isEdit ? countFileOperationChanges(previewBlocks) : void 0,
+		icon: isEdit ? Code2 : FileText,
 		expanded,
 		canExpand: hasContent || isRunning,
-		hideSummary: expanded && hasStructuredPreview,
+		hideSummary: false,
 		onToggle
-	}), expanded && hasContent && /* @__PURE__ */ jsx(ToolCardContent, {
-		className: "border-t border-border bg-transparent px-0 pt-0 pb-0",
-		children: /* @__PURE__ */ jsx(ToolCardFileOperationContent, {
-			card,
-			onFileOpen
-		})
-	})] });
+	}), expanded && hasContent ? /* @__PURE__ */ jsxs(ToolCardContent, {
+		className: "bg-transparent py-0",
+		children: [
+			showRawInput ? /* @__PURE__ */ jsx(ToolCardDetailSection, {
+				label: card.inputLabel?.trim() || "Input",
+				tone: "input",
+				children: input
+			}) : null,
+			showRawInput && output ? /* @__PURE__ */ jsx("div", { className: "h-2" }) : null,
+			hasStructuredPreview || output ? /* @__PURE__ */ jsx(ToolCardFileOperationContent, {
+				card,
+				onFileOpen,
+				showPathRow: true
+			}) : null
+		]
+	}) : null] });
 }
-function SearchSnippetView({ card }) {
+function SearchSnippetView({ card, toolLabel, icon: Icon = Search }) {
 	const isRunning = card.statusTone === "running";
 	const output = card.output?.trim() ?? "";
 	const { expanded, onToggle } = useToolCardExpandedState({
@@ -4386,24 +4997,37 @@ function SearchSnippetView({ card }) {
 	});
 	return /* @__PURE__ */ jsxs(ToolCardRoot, { children: [/* @__PURE__ */ jsx(ToolCardHeader, {
 		card,
-		icon: Search,
+		toolLabel,
+		icon: Icon,
 		expanded,
 		canExpand: !!output || isRunning,
 		onToggle
-	}), expanded && output && /* @__PURE__ */ jsx(ToolCardContent, { children: /* @__PURE__ */ jsx("pre", {
-		className: "font-mono text-[12px] text-muted-foreground whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar leading-relaxed",
-		children: output
-	}) })] });
+	}), expanded && output && /* @__PURE__ */ jsx(ToolCardContent, {
+		className: "py-0",
+		children: /* @__PURE__ */ jsx("pre", {
+			className: "font-mono text-[12px] text-muted-foreground whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar leading-relaxed",
+			children: output
+		})
+	})] });
 }
-function GenericToolCard({ card, onToolAction, renderToolAgent }) {
+//#endregion
+//#region src/components/chat/ui/chat-message-list/tool-card/tool-card-generic.tsx
+function buildToolActionSlot(card, onToolAction, renderToolAgent) {
+	const agentAction = card.agentId && renderToolAgent ? renderToolAgent(card.agentId) : null;
+	const toolAction = card.action && onToolAction ? /* @__PURE__ */ jsx(ToolCardHeaderAction, {
+		action: card.action,
+		onAction: onToolAction
+	}) : null;
+	return agentAction || toolAction ? /* @__PURE__ */ jsxs(Fragment$1, { children: [agentAction, toolAction] }) : void 0;
+}
+function GenericToolCard({ card, toolLabel, icon: Icon = Wrench, onToolAction, renderToolAgent }) {
 	const input = card.input?.trim() ?? "";
 	const output = card.output?.trim() ?? "";
 	const isRunning = card.statusTone === "running";
 	const hasInputSection = input.length > 0;
 	const hasOutputSection = output.length > 0;
 	const hasContent = hasInputSection || hasOutputSection;
-	const inputLabel = card.inputLabel?.trim() || "Input";
-	const outputLabel = card.outputLabel?.trim() || "Output";
+	const actionSlot = buildToolActionSlot(card, onToolAction, renderToolAgent);
 	const { expanded, onToggle } = useToolCardExpandedState({
 		canExpand: hasContent || isRunning,
 		isRunning,
@@ -4412,30 +5036,28 @@ function GenericToolCard({ card, onToolAction, renderToolAgent }) {
 	});
 	return /* @__PURE__ */ jsxs(ToolCardRoot, { children: [/* @__PURE__ */ jsx(ToolCardHeader, {
 		card,
-		icon: Globe,
+		toolLabel,
+		icon: Icon,
 		expanded,
 		canExpand: hasContent || isRunning,
-		actionSlot: card.agentId || card.action && onToolAction ? /* @__PURE__ */ jsxs(Fragment$1, { children: [card.agentId && renderToolAgent ? renderToolAgent(card.agentId) : null, card.action && onToolAction ? /* @__PURE__ */ jsx(ToolCardHeaderAction, {
-			action: card.action,
-			onAction: onToolAction
-		}) : null] }) : void 0,
+		actionSlot,
 		onToggle
-	}), expanded && hasContent && /* @__PURE__ */ jsxs(ToolCardContent, {
-		className: "bg-transparent px-2.5 py-2.5",
+	}), expanded && hasContent ? /* @__PURE__ */ jsxs(ToolCardContent, {
+		className: "bg-transparent py-0",
 		children: [
-			hasInputSection && /* @__PURE__ */ jsx(GenericToolSection, {
-				label: inputLabel,
+			hasInputSection ? /* @__PURE__ */ jsx(ToolCardDetailSection, {
+				label: card.inputLabel?.trim() || "Input",
 				tone: "input",
 				children: input
-			}),
-			hasInputSection && hasOutputSection && /* @__PURE__ */ jsx("div", { className: "h-2" }),
-			hasOutputSection && /* @__PURE__ */ jsx(GenericToolSection, {
-				label: outputLabel,
+			}) : null,
+			hasInputSection && hasOutputSection ? /* @__PURE__ */ jsx("div", { className: "h-2" }) : null,
+			hasOutputSection ? /* @__PURE__ */ jsx(ToolCardDetailSection, {
+				label: card.outputLabel?.trim() || "Output",
 				tone: card.statusTone === "error" ? "error" : "output",
 				children: output
-			})
+			}) : null
 		]
-	})] });
+	}) : null] });
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-panel-app.tsx
@@ -4457,34 +5079,364 @@ function isTerminalTool(name) {
 	const lowered = name.toLowerCase();
 	return lowered === "exec" || lowered === "exec_command" || lowered === "execute_command" || lowered === "command_execution" || lowered === "bash" || lowered === "shell" || lowered.includes("run_");
 }
-function isFileEditTool(name) {
+function isFileTool(name) {
 	const lowered = name.toLowerCase();
 	return lowered === "read_file" || lowered === "write_file" || lowered === "edit_file" || lowered === "apply_patch" || lowered === "file_change";
 }
+function isFileWriteTool(name) {
+	const lowered = name.toLowerCase();
+	return lowered === "write_file" || lowered === "edit_file" || lowered === "apply_patch" || lowered === "file_change";
+}
 function isSearchTool(name) {
 	const lowered = name.toLowerCase();
 	return lowered === "grep_search" || lowered === "find_files" || lowered.includes("search");
 }
-function ChatToolCard({ card, onToolAction, onFileOpen, renderToolAgent, renderPanelAppCard }) {
+const BUILT_IN_TOOL_PRESENTATIONS = {
+	list_dir: {
+		statusKind: "directory",
+		icon: FolderTree
+	},
+	web_fetch: {
+		statusKind: "web",
+		icon: Globe2
+	},
+	message: {
+		statusKind: "message",
+		icon: Send
+	},
+	sessions_list: {
+		statusKind: "session",
+		icon: MessageSquare
+	},
+	sessions_history: {
+		statusKind: "session",
+		icon: MessageSquare
+	},
+	sessions_request: {
+		statusKind: "session",
+		icon: MessageSquare
+	},
+	spawn: {
+		statusKind: "agent",
+		icon: Bot
+	},
+	sessions_spawn: {
+		statusKind: "agent",
+		icon: Bot
+	},
+	subagents: {
+		statusKind: "agent",
+		icon: Bot
+	},
+	memory_search: {
+		statusKind: "memory",
+		icon: Brain
+	},
+	memory_get: {
+		statusKind: "memory",
+		icon: Brain
+	},
+	cron: {
+		statusKind: "schedule",
+		icon: CalendarClock
+	},
+	gateway: {
+		statusKind: "system",
+		icon: Settings
+	},
+	view_image: {
+		statusKind: "image",
+		icon: ImageIcon
+	},
+	show_file: {
+		statusKind: "display",
+		icon: Eye
+	},
+	show_url: {
+		statusKind: "display",
+		icon: Eye
+	},
+	show_panel_app: {
+		statusKind: "display",
+		icon: Eye
+	},
+	show_content: {
+		statusKind: "display",
+		icon: Eye
+	}
+};
+function resolveBuiltInToolPresentation(name) {
+	return BUILT_IN_TOOL_PRESENTATIONS[name.toLowerCase()] ?? null;
+}
+function ChatToolCard({ card, toolStatusLabels, onToolAction, onFileOpen, renderToolAgent, renderPanelAppCard }) {
 	if (card.panelApp) return /* @__PURE__ */ jsx(PanelAppInlineToolCard, {
 		card,
 		onToolAction,
 		renderPanelAppCard
 	});
-	if (isTerminalTool(card.toolName)) return /* @__PURE__ */ jsx(TerminalExecutionView, { card });
-	if (isFileEditTool(card.toolName)) return /* @__PURE__ */ jsx(FileOperationView, {
+	const builtInPresentation = resolveBuiltInToolPresentation(card.toolName);
+	const builtInLabel = builtInPresentation ? toolStatusLabels?.builtIn?.[builtInPresentation.statusKind]?.[card.statusTone] : void 0;
+	if (isTerminalTool(card.toolName)) return /* @__PURE__ */ jsx(TerminalExecutionView, {
+		card,
+		toolLabel: toolStatusLabels?.terminal[card.statusTone]
+	});
+	if (isFileTool(card.toolName)) return /* @__PURE__ */ jsx(FileOperationView, {
 		card,
+		toolLabel: isFileWriteTool(card.toolName) ? toolStatusLabels?.fileEdit[card.statusTone] : toolStatusLabels?.fileRead[card.statusTone],
 		onFileOpen
 	});
-	if (isSearchTool(card.toolName)) return /* @__PURE__ */ jsx(SearchSnippetView, { card });
+	if (isSearchTool(card.toolName)) return /* @__PURE__ */ jsx(SearchSnippetView, {
+		card,
+		toolLabel: builtInLabel ?? toolStatusLabels?.search[card.statusTone],
+		icon: builtInPresentation?.icon
+	});
 	return /* @__PURE__ */ jsx(GenericToolCard, {
 		card,
+		toolLabel: builtInLabel,
+		icon: builtInPresentation?.icon,
 		onToolAction,
 		renderToolAgent
 	});
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/chat-tool-activity-group.tsx
+function ChatToolActivityGroup({ group, open, isUser, reasoningCharacterCountTemplates, toolStatusLabels, onToolAction, onFileOpen, renderToolAgent, renderPanelAppCard, onOpenChange }) {
+	const toolCount = group.parts.filter((part) => part.type === "tool-card").length;
+	const showWorkflowRail = open && toolCount > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/tool-activity",
+		children: [/* @__PURE__ */ jsx(ChatCollapsibleMetaSummary, {
+			openGroup: "tool-activity",
+			open,
+			icon: Workflow,
+			leadingIconClassName: "bg-card",
+			label: group.label,
+			onClick: () => onOpenChange(!open)
+		}), open ? /* @__PURE__ */ jsx("div", {
+			className: "text-[0.925rem] leading-[1.72]",
+			children: group.parts.map((part, index) => {
+				const isLast = index === group.parts.length - 1;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-0",
+					children: [showWorkflowRail ? /* @__PURE__ */ jsx(ChatProcessWorkflowRail, { position: index === 0 ? "first" : isLast ? "last" : "middle" }) : null, part.type === "tool-card" ? /* @__PURE__ */ jsx(ChatToolCard, {
+						card: part.card,
+						toolStatusLabels,
+						onToolAction,
+						onFileOpen,
+						renderToolAgent,
+						renderPanelAppCard
+					}) : /* @__PURE__ */ jsx(ChatReasoningBlock, {
+						label: part.label,
+						text: part.text,
+						characterCountTemplates: reasoningCharacterCountTemplates,
+						isUser,
+						isInProgress: false
+					})]
+				}, `tool-group-item-${group.startIndex + index}`);
+			})
+		}) : null]
+	});
+}
+//#endregion
+//#region src/components/chat/ui/chat-message-list/chat-tool-activity-group.utils.ts
+const MAX_SUMMARY_SEGMENTS = 3;
+function isToolCardPart(part) {
+	return part.type === "tool-card";
+}
+function resolveToolActivityFamily(toolName) {
+	const lowered = toolName.toLowerCase();
+	if (lowered === "list_dir") return "directory";
+	if (lowered.includes("show_content") || lowered.includes("panel_app") || lowered.includes("panel")) return "panel";
+	if (lowered === "spawn" || lowered.includes("subagent") || lowered.includes("session_request") || lowered.includes("agent") && !lowered.includes("read")) return "agent";
+	if (lowered.includes("web_") || lowered.includes("_web") || lowered.includes("url") || lowered.includes("fetch") || lowered.includes("http")) return "web";
+	if (lowered === "grep_search" || lowered === "find_files" || lowered === "search_files" || lowered.includes("search") || lowered.includes("grep")) return "search";
+	if (lowered === "exec" || lowered === "exec_command" || lowered === "execute_command" || lowered === "command_execution" || lowered === "bash" || lowered === "shell" || lowered === "terminal" || lowered.includes("run_")) return "bash";
+	if (lowered === "write_file" || lowered === "edit_file" || lowered === "apply_patch" || lowered === "file_change" || lowered === "multi_replace" || lowered.includes("write_file") || lowered.includes("edit_file") || lowered.includes("apply_patch")) return "edit";
+	if (lowered === "read_file" || lowered === "read" || lowered === "view_file" || lowered.includes("read_file") || lowered.startsWith("read_")) return "read";
+	return "other";
+}
+function toneRank(tone) {
+	if (tone === "error") return 0;
+	if (tone === "cancelled") return 1;
+	if (tone === "running") return 2;
+	return 3;
+}
+function resolveActivityUnitKeys(card, family, callIndex) {
+	if (family !== "read" && family !== "edit" && family !== "directory") return [`call:${callIndex}`];
+	const paths = card.fileOperation?.blocks.map(({ path }) => path.trim()).filter(Boolean);
+	const summary = card.summary?.replace(/^(path|file):\s*/i, "").trim();
+	return paths?.length ? paths : [summary || `call:${callIndex}`];
+}
+/**
+* Natural category+count phrases only.
+* Examples: `Read 3 files`, `运行 2 条命令`, `搜索 2 次`.
+* No command/path payload.
+*/
+function formatSegment(segment, labels) {
+	const template = labels.segmentTemplates[segment.family];
+	const body = segment.count === 1 ? template.one : template.other.split("{count}").join(String(segment.count));
+	if (segment.tone === "error") return `${body} ${labels.failedLabel}`;
+	if (segment.tone === "cancelled") return `${body} ${labels.cancelledLabel}`;
+	return body;
+}
+function buildToolActivitySegments(cards) {
+	const order = [];
+	const byFamily = /* @__PURE__ */ new Map();
+	for (const [callIndex, card] of cards.entries()) {
+		const family = resolveToolActivityFamily(card.toolName);
+		const unitKeys = resolveActivityUnitKeys(card, family, callIndex);
+		const existing = byFamily.get(family);
+		if (!existing) {
+			order.push(family);
+			byFamily.set(family, {
+				units: new Set(unitKeys),
+				tone: card.statusTone
+			});
+			continue;
+		}
+		unitKeys.forEach((unitKey) => existing.units.add(unitKey));
+		if (toneRank(card.statusTone) < toneRank(existing.tone)) existing.tone = card.statusTone;
+	}
+	const segments = order.map((family) => {
+		const entry = byFamily.get(family);
+		return {
+			family,
+			count: entry.units.size,
+			tone: entry.tone
+		};
+	});
+	segments.sort((left, right) => {
+		const toneDelta = toneRank(left.tone) - toneRank(right.tone);
+		if (toneDelta !== 0) return toneDelta;
+		return order.indexOf(left.family) - order.indexOf(right.family);
+	});
+	return segments;
+}
+function formatToolActivityGroupLabel(params) {
+	const { labels, segments } = params;
+	if (segments.length === 0) return "";
+	const visible = segments.slice(0, MAX_SUMMARY_SEGMENTS);
+	const hiddenCount = segments.length - visible.length;
+	const parts = visible.map((segment) => formatSegment(segment, labels));
+	if (hiddenCount > 0) parts.push(`+${hiddenCount}`);
+	return parts.join(" · ");
+}
+/**
+* Group tool cards separated only by reasoning into one visible workflow.
+* Markdown, files and unknown parts still break the run.
+* Single tool-cards stay ungrouped so they keep their native card UI.
+*/
+function groupConsecutiveToolParts(parts, labels) {
+	const blocks = [];
+	let index = 0;
+	while (index < parts.length) {
+		const part = parts[index];
+		if (part.type !== "tool-card") {
+			blocks.push({
+				kind: "part",
+				key: `part-${index}`,
+				index,
+				part
+			});
+			index += 1;
+			continue;
+		}
+		const startIndex = index;
+		const candidateParts = [];
+		let lastToolOffset = -1;
+		while (index < parts.length && (parts[index]?.type === "tool-card" || parts[index]?.type === "reasoning")) {
+			const candidate = parts[index];
+			candidateParts.push(candidate);
+			if (candidate.type === "tool-card") lastToolOffset = candidateParts.length - 1;
+			index += 1;
+		}
+		const toolParts = candidateParts.filter(isToolCardPart);
+		if (toolParts.length === 1) {
+			blocks.push({
+				kind: "part",
+				key: `part-${startIndex}`,
+				index: startIndex,
+				part
+			});
+			index = startIndex + 1;
+			continue;
+		}
+		const groupedParts = candidateParts.slice(0, lastToolOffset + 1);
+		index = startIndex + groupedParts.length;
+		const segments = buildToolActivitySegments(toolParts.map((toolPart) => toolPart.card));
+		const label = formatToolActivityGroupLabel({
+			segments,
+			labels
+		});
+		blocks.push({
+			kind: "tool-group",
+			key: `tool-group-${startIndex}`,
+			group: {
+				key: `tool-group-${startIndex}`,
+				startIndex,
+				endIndex: index - 1,
+				parts: groupedParts,
+				segments,
+				label
+			}
+		});
+	}
+	return blocks;
+}
+//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message.tsx
+const DEFAULT_TOOL_ACTIVITY_LABELS = {
+	segmentTemplates: {
+		read: {
+			one: "Read 1 file",
+			other: "Read {count} files"
+		},
+		edit: {
+			one: "Edit 1 file",
+			other: "Edit {count} files"
+		},
+		directory: {
+			one: "View 1 directory",
+			other: "View {count} directories"
+		},
+		search: {
+			one: "Search 1 time",
+			other: "Search {count} times"
+		},
+		bash: {
+			one: "Run 1 command",
+			other: "Run {count} commands"
+		},
+		web: {
+			one: "Open 1 page",
+			other: "Open {count} pages"
+		},
+		agent: {
+			one: "Start 1 subtask",
+			other: "Start {count} subtasks"
+		},
+		panel: {
+			one: "Show 1 result",
+			other: "Show {count} results"
+		},
+		other: {
+			one: "Use 1 tool",
+			other: "Use {count} tools"
+		}
+	},
+	failedLabel: "failed",
+	cancelledLabel: "cancelled"
+};
+function resolveToolActivityLabels(texts) {
+	return {
+		segmentTemplates: {
+			...DEFAULT_TOOL_ACTIVITY_LABELS.segmentTemplates,
+			...texts.toolActivitySegmentTemplates ?? {}
+		},
+		failedLabel: texts.toolActivityFailedLabel ?? DEFAULT_TOOL_ACTIVITY_LABELS.failedLabel,
+		cancelledLabel: texts.toolActivityCancelledLabel ?? DEFAULT_TOOL_ACTIVITY_LABELS.cancelledLabel
+	};
+}
 function isMessageInProgress(status) {
 	return status === "pending" || status === "streaming";
 }
@@ -4504,7 +5456,7 @@ function splitAssistantProcess(message) {
 		finalParts: message.parts.slice(lastProcessPartIndex + 1)
 	};
 }
-function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onFileOpen, onToolAction, part, renderInlineDisplay, renderPanelAppCard, renderToolAgent, role, texts }) {
+function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAttachmentOpen, onFileOpen, onInlineTokenClick, onToolAction, part, renderInlineDisplay, renderPanelAppCard, renderToolAgent, resolveFileContentUrl, role, texts }) {
 	const { type } = part;
 	if (type === "markdown") {
 		const { inlineTokens, text } = part;
@@ -4514,6 +5466,8 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onFile
 			texts,
 			inlineTokens,
 			onFileOpen,
+			onInlineTokenClick,
+			resolveFileContentUrl,
 			renderInlineDisplay
 		}, `markdown-${index}`);
 	}
@@ -4522,21 +5476,23 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onFile
 		return /* @__PURE__ */ jsx(ChatReasoningBlock, {
 			label,
 			text,
+			characterCountTemplates: texts.reasoningCharacterCountTemplates,
 			isUser,
 			isInProgress: isInProgress && isLastPart
 		}, `reasoning-${index}`);
 	}
 	if (type === "tool-card") {
 		const { card } = part;
-		return /* @__PURE__ */ jsx("div", {
-			className: "mt-0.5",
-			children: /* @__PURE__ */ jsx(ChatToolCard, {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative min-w-0",
+			children: [/* @__PURE__ */ jsx(ChatProcessWorkflowRail, { position: "single" }), /* @__PURE__ */ jsx(ChatToolCard, {
 				card,
+				toolStatusLabels: texts.toolStatusLabels,
 				onToolAction,
 				onFileOpen,
 				renderToolAgent,
 				renderPanelAppCard
-			})
+			})]
 		}, `tool-${index}`);
 	}
 	if (type === "file") {
@@ -4544,7 +5500,8 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onFile
 		return /* @__PURE__ */ jsx(ChatMessageFile, {
 			file,
 			isUser,
-			texts
+			texts,
+			onOpen: onAttachmentOpen
 		}, `file-${index}`);
 	}
 	if (type === "unknown") {
@@ -4566,49 +5523,135 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onFile
 	}
 	return null;
 }
-const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, onFileOpen, renderInlineDisplay, renderToolAgent, renderPanelAppCard }) {
+function renderMessageParts(params) {
+	const { isInProgress, isUser, onAttachmentOpen, onFileOpen, onInlineTokenClick, onToolActivityOpenChange, onToolAction, openToolGroupKeys, parts, renderInlineDisplay, renderPanelAppCard, renderToolAgent, resolveFileContentUrl, role, texts, indexOffset = 0 } = params;
+	return groupConsecutiveImageFileBlocks(groupConsecutiveToolParts(parts, resolveToolActivityLabels(texts))).map((block) => {
+		if (block.kind === "image-group") return /* @__PURE__ */ jsx(ChatMessageImageRow, {
+			group: block,
+			indexOffset,
+			isUser,
+			texts,
+			onOpen: onAttachmentOpen
+		}, `${block.key}-${indexOffset}`);
+		if (block.kind === "tool-group") return /* @__PURE__ */ jsx(ChatToolActivityGroup, {
+			group: block.group,
+			open: openToolGroupKeys.has(block.group.key),
+			isUser,
+			reasoningCharacterCountTemplates: texts.reasoningCharacterCountTemplates,
+			toolStatusLabels: texts.toolStatusLabels,
+			onToolAction,
+			onFileOpen,
+			renderToolAgent,
+			renderPanelAppCard,
+			onOpenChange: (open) => onToolActivityOpenChange(block.group.key, open)
+		}, block.key);
+		return renderChatMessagePart({
+			part: block.part,
+			index: indexOffset + block.index,
+			role,
+			isUser,
+			isInProgress,
+			isLastPart: indexOffset + block.index === indexOffset + parts.length - 1,
+			texts,
+			onToolAction,
+			onFileOpen,
+			onAttachmentOpen,
+			onInlineTokenClick,
+			resolveFileContentUrl,
+			renderInlineDisplay,
+			renderToolAgent,
+			renderPanelAppCard
+		});
+	});
+}
+const ChatMessage = memo(function ChatMessage({ layout, message, texts, onToolAction, onFileOpen, onAttachmentOpen, onInlineTokenClick, renderInlineDisplay, renderToolAgent, renderPanelAppCard, resolveFileContentUrl }) {
 	const { role } = message;
 	const isUser = role === "user";
+	const isFlat = layout === "flat" && !isUser;
 	const isInProgress = isMessageInProgress(message.status);
 	const processSplit = splitAssistantProcess(message);
-	const renderPart = (part, index) => renderChatMessagePart({
-		part,
-		index,
-		role,
-		isUser,
-		isInProgress,
-		isLastPart: index === message.parts.length - 1,
-		texts,
-		onToolAction,
-		onFileOpen,
-		renderInlineDisplay,
-		renderToolAgent,
-		renderPanelAppCard
-	});
+	const [processOpen, setProcessOpen] = useState(false);
+	const [openToolGroupKeys, setOpenToolGroupKeys] = useState(() => /* @__PURE__ */ new Set());
+	const handleToolActivityOpenChange = (groupKey, open) => {
+		setOpenToolGroupKeys((current) => {
+			const next = new Set(current);
+			if (open) next.add(groupKey);
+			else next.delete(groupKey);
+			return next;
+		});
+		if (open) setProcessOpen(true);
+	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm has-[[data-chat-message-wide-content=true]]:w-full", isUser ? "nextclaw-chat-message-user rounded-[1.45rem] border-primary bg-primary py-2.5 text-primary-foreground shadow-none" : role === "assistant" ? "border-border bg-card pb-3 pt-4 text-card-foreground" : "border-border bg-muted/45 py-3 text-foreground"),
+		"data-chat-message-surface": isFlat ? "flat" : "card",
+		className: cn("max-w-full has-[[data-chat-message-wide-content=true]]:w-full", isFlat ? "block w-full text-foreground" : "inline-block w-fit rounded-2xl border px-4 shadow-sm", !isFlat && (isUser ? "nextclaw-chat-message-user rounded-[1.45rem] border-primary bg-primary py-2.5 text-primary-foreground shadow-none" : role === "assistant" ? "border-border bg-card pb-3 pt-4 text-card-foreground" : "border-border bg-muted/45 py-3 text-foreground")),
 		children: /* @__PURE__ */ jsx("div", {
-			className: "space-y-2",
-			children: processSplit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("details", {
-				className: "group/process text-xs text-muted-foreground",
-				children: [/* @__PURE__ */ jsxs("summary", {
-					className: "flex cursor-pointer list-none items-center gap-1.5 border-b border-border/60 pb-2 font-medium transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 [&::-webkit-details-marker]:hidden",
-					children: [
-						/* @__PURE__ */ jsx(ChevronRight, {
-							className: "h-3.5 w-3.5 group-open/process:hidden",
-							strokeWidth: 2.5
-						}),
-						/* @__PURE__ */ jsx(ChevronDown, {
-							className: "hidden h-3.5 w-3.5 group-open/process:block",
-							strokeWidth: 2.5
-						}),
-						/* @__PURE__ */ jsx("span", { children: message.processSummary?.label })
-					]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "space-y-2 pt-2",
-					children: processSplit.processParts.map(renderPart)
-				})]
-			}), processSplit.finalParts.map((part, index) => renderPart(part, processSplit.processParts.length + index))] }) : message.parts.map(renderPart)
+			className: "space-y-0",
+			children: processSplit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "group/process",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "mb-2 border-b border-border/60 pb-2",
+					children: /* @__PURE__ */ jsx(ChatCollapsibleMetaSummary, {
+						openGroup: "process",
+						open: processOpen,
+						icon: ListChecks,
+						leadingIconClassName: "bg-card",
+						label: message.processSummary?.label,
+						onClick: () => setProcessOpen((current) => !current)
+					})
+				}), processOpen ? /* @__PURE__ */ jsx("div", {
+					className: "space-y-0",
+					children: renderMessageParts({
+						parts: processSplit.processParts,
+						role,
+						isUser,
+						isInProgress,
+						texts,
+						onToolAction,
+						onFileOpen,
+						onAttachmentOpen,
+						onInlineTokenClick,
+						resolveFileContentUrl,
+						openToolGroupKeys,
+						onToolActivityOpenChange: handleToolActivityOpenChange,
+						renderInlineDisplay,
+						renderToolAgent,
+						renderPanelAppCard
+					})
+				}) : null]
+			}), renderMessageParts({
+				parts: processSplit.finalParts,
+				role,
+				isUser,
+				isInProgress,
+				texts,
+				onToolAction,
+				onFileOpen,
+				onAttachmentOpen,
+				onInlineTokenClick,
+				resolveFileContentUrl,
+				openToolGroupKeys,
+				onToolActivityOpenChange: handleToolActivityOpenChange,
+				renderInlineDisplay,
+				renderToolAgent,
+				renderPanelAppCard,
+				indexOffset: processSplit.processParts.length
+			})] }) : renderMessageParts({
+				parts: message.parts,
+				role,
+				isUser,
+				isInProgress,
+				texts,
+				onToolAction,
+				onFileOpen,
+				onAttachmentOpen,
+				onInlineTokenClick,
+				resolveFileContentUrl,
+				openToolGroupKeys,
+				onToolActivityOpenChange: handleToolActivityOpenChange,
+				renderInlineDisplay,
+				renderToolAgent,
+				renderPanelAppCard
+			})
 		})
 	});
 });
@@ -4645,7 +5688,6 @@ const TYPING_TEXT_SHEEN_CSS = `
     background-position: -60% 0;
   }
 }
-
 .nextclaw-chat-typing-indicator__text {
   background-image: linear-gradient(
     100deg,
@@ -4699,16 +5741,17 @@ function ChatMessageTypingFooter() {
 		})
 	});
 }
-function ChatTypingIndicator({ label }) {
+function ChatTypingIndicator({ label, layout }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-2xl border border-border bg-card px-4 py-3 text-sm text-muted-foreground shadow-sm",
+		"data-chat-message-surface": layout === "flat" ? "flat" : "card",
+		className: cn("text-sm text-muted-foreground", layout === "flat" ? "py-1" : "rounded-2xl border border-border bg-card px-4 py-3 shadow-sm"),
 		children: [/* @__PURE__ */ jsx("style", { children: TYPING_TEXT_SHEEN_CSS }), /* @__PURE__ */ jsx("span", {
 			className: "nextclaw-chat-typing-indicator__text",
 			children: label
 		})]
 	});
 }
-function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAction, renderInlineDisplay, renderPanelAppCard, renderToolAgent, texts }) {
+function ChatMessageList({ className, isSending, layout = "card", messages, onAttachmentOpen, onFileOpen, onInlineTokenClick, onToolAction, renderInlineDisplay, renderPanelAppCard, renderToolAgent, resolveFileContentUrl, texts }) {
 	const visibleMessages = messages.filter(hasRenderableMessageContent);
 	const hasRenderableAssistantDraft = visibleMessages.some((message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending"));
 	return /* @__PURE__ */ jsxs("div", {
@@ -4716,21 +5759,63 @@ function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAct
 		children: [visibleMessages.map((message) => {
 			const isUser = message.role === "user";
 			const isGenerating = !isUser && (message.status === "streaming" || message.status === "pending");
+			const content = /* @__PURE__ */ jsx(ChatMessage, {
+				layout,
+				message,
+				texts,
+				onToolAction,
+				onFileOpen,
+				onAttachmentOpen,
+				onInlineTokenClick,
+				resolveFileContentUrl,
+				renderInlineDisplay,
+				renderToolAgent,
+				renderPanelAppCard
+			});
+			if (layout === "flat" && !isUser) return /* @__PURE__ */ jsxs("article", {
+				"data-chat-message-layout": "flat",
+				className: "w-full min-w-0 space-y-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						"data-chat-message-header": "flat",
+						className: "flex min-w-0 items-center gap-2.5",
+						children: [/* @__PURE__ */ jsx(ChatMessageAvatar, {
+							role: message.role,
+							size: "compact"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate text-sm font-semibold text-foreground",
+							children: message.roleLabel
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-chat-message-body": "flat",
+						className: "min-w-0 w-full",
+						children: content
+					}),
+					isGenerating ? /* @__PURE__ */ jsx("div", {
+						className: "w-full",
+						children: /* @__PURE__ */ jsx(ChatMessageTypingFooter, {})
+					}) : /* @__PURE__ */ jsxs("div", {
+						"data-chat-message-footer": "flat",
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "px-1 text-[11px] leading-4 text-muted-foreground",
+							children: message.timestampLabel
+						}), /* @__PURE__ */ jsx(ChatMessageActionCopy, {
+							message,
+							texts
+						})]
+					})
+				]
+			}, message.id);
 			return /* @__PURE__ */ jsxs("div", {
+				"data-chat-message-layout": "card",
 				className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"),
 				children: [
 					!isUser ? /* @__PURE__ */ jsx(ChatMessageAvatar, { role: message.role }) : null,
 					/* @__PURE__ */ jsxs("div", {
 						className: cn("w-fit max-w-[92%] space-y-2 has-[[data-chat-message-wide-content=true]]:w-full", isUser && "flex flex-col items-end"),
-						children: [/* @__PURE__ */ jsx(ChatMessage, {
-							message,
-							texts,
-							onToolAction,
-							onFileOpen,
-							renderInlineDisplay,
-							renderToolAgent,
-							renderPanelAppCard
-						}), /* @__PURE__ */ jsx("div", {
+						children: [content, /* @__PURE__ */ jsx("div", {
 							className: cn("flex items-center gap-2", isUser && "justify-end"),
 							children: isGenerating ? /* @__PURE__ */ jsx(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 								className: cn("px-1 text-[11px] leading-4 text-muted-foreground", isUser ? "text-right" : "text-left"),
@@ -4749,8 +5834,15 @@ function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAct
 				]
 			}, message.id);
 		}), isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs("div", {
+			"data-chat-message-layout": layout,
 			className: "flex justify-start gap-3",
-			children: [/* @__PURE__ */ jsx(ChatMessageAvatar, { role: "assistant" }), /* @__PURE__ */ jsx(ChatTypingIndicator, { label: texts.typingLabel })]
+			children: [/* @__PURE__ */ jsx(ChatMessageAvatar, {
+				role: "assistant",
+				size: layout === "flat" ? "compact" : "default"
+			}), /* @__PURE__ */ jsx(ChatTypingIndicator, {
+				label: texts.typingLabel,
+				layout
+			})]
 		}) : null]
 	});
 }