@nextclaw/agent-chat-ui 0.6.1 → 0.6.3

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, Loader2, MessageSquare, Minus, Paperclip, Puzzle, Search, Send, Settings, Sparkles, Star, Terminal, User, 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: "/"
@@ -688,7 +689,7 @@ function ChatInputSurfaceHost(props) {
 }
 //#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",
@@ -1068,7 +1069,7 @@ function AccessoryIcon({ icon }) {
 	return icon === "paperclip" ? /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ToolbarIcon, { icon });
 }
 const TRIGGER_WIDTH_BY_KEY = {
-	model: "min-w-0 max-w-full flex-1 basis-[12rem] sm:max-w-[320px]",
+	model: "min-w-0 max-w-[18rem]",
 	"session-type": "shrink-0",
 	thinking: "shrink-0"
 };
@@ -1095,11 +1096,11 @@ function ToolbarSelectTriggerContent({ item }) {
 		children: [
 			/* @__PURE__ */ jsx(ToolbarIcon, { icon: item.icon }),
 			/* @__PURE__ */ jsx("span", {
-				className: "nextclaw-chat-toolbar-mobile-label truncate text-xs font-semibold text-foreground sm:hidden [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
+				className: "nextclaw-chat-toolbar-mobile-label truncate sm:hidden [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
 				children: mobileSelectedLabel
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "nextclaw-chat-toolbar-label hidden truncate text-xs font-semibold text-foreground sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
+				className: "nextclaw-chat-toolbar-label hidden truncate sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
 				children: item.selectedLabel
 			})
 		]
@@ -1217,12 +1218,12 @@ function ToolbarSearchableSelect({ item }) {
 										type: "button",
 										"aria-label": actionLabel,
 										"aria-pressed": isActive,
-										className: "mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-card hover:text-amber-500 focus:outline-none focus:ring-1 focus:ring-primary/40",
+										className: "mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-card hover:text-foreground focus:outline-none focus:ring-1 focus:ring-primary/40",
 										onClick: (event) => {
 											event.stopPropagation();
 											action.onToggle(option.value, !isActive);
 										},
-										children: /* @__PURE__ */ jsx(Star, { className: `h-3.5 w-3.5 ${isActive ? "fill-amber-400 text-amber-500" : ""}` })
+										children: /* @__PURE__ */ jsx(Star, { className: `h-3.5 w-3.5 ${isActive ? "fill-current text-foreground" : ""}` })
 									})
 								}), /* @__PURE__ */ jsx(TooltipContent, {
 									side: "left",
@@ -1274,7 +1275,7 @@ function ToolbarSelect({ item }) {
 		})]
 	});
 }
-function ChatInputBarToolbar({ actions, accessories, selects, skillPicker }) {
+function ChatInputBarToolbar({ actions, accessories, selects, skillPicker, trailingSelects = [] }) {
 	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-wrap items-end justify-between gap-2 px-3 pb-3",
@@ -1308,7 +1309,13 @@ function ChatInputBarToolbar({ actions, accessories, selects, skillPicker }) {
 					})] }) }, item.key);
 				})
 			]
-		}), /* @__PURE__ */ jsx(ChatInputBarActions, { ...actions })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-end gap-1",
+			children: [trailingSelects.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "nextclaw-chat-toolbar-trailing-selects flex min-w-0 items-center gap-1",
+				children: trailingSelects.map((item) => /* @__PURE__ */ jsx(ToolbarSelect, { item }, item.key))
+			}) : null, /* @__PURE__ */ jsx(ChatInputBarActions, { ...actions })]
+		})]
 	});
 }
 //#endregion
@@ -2413,15 +2420,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, {
@@ -2432,18 +2439,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
@@ -2649,7 +2670,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) {
@@ -2680,7 +2701,7 @@ var ChatCodeSyntaxHighlighter = class {
 			return this.createPlainTextResult(code, normalizedLanguage || "text");
 		};
 		this.createPlainTextResult = (code, language) => ({
-			html: escapeHtml(code),
+			html: escapeHtml$1(code),
 			language,
 			highlighted: false
 		});
@@ -3048,7 +3069,7 @@ 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, renderInlineDisplay }) {
 	const isUser = role === "user";
 	const remarkPlugins = useMemo(() => inlineTokens && inlineTokens.length > 0 ? [remarkGfm, createRemarkInlineTokenPlugin(inlineTokens)] : [remarkGfm], [inlineTokens]);
 	const markdownComponents = useMemo(() => ({
@@ -3062,7 +3083,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,
@@ -3146,6 +3173,7 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 		inline,
 		isUser,
 		onFileOpen,
+		onInlineTokenClick,
 		renderInlineDisplay,
 		texts
 	]);
@@ -3162,16 +3190,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",
@@ -3381,77 +3409,166 @@ 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
+			className: cn("h-4 w-4", isUser ? "text-foreground/70" : "text-current"),
+			strokeWidth: 2
 		})
 	});
 }
-function renderImagePreview(params) {
-	const { file, categoryLabel, sizeLabel, isUser } = params;
+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({ expandLabel, closeLabel, file, sizeLabel }) {
+	const [isExpanded, setIsExpanded] = useState(false);
 	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"),
+	const openLightbox = () => setIsExpanded(true);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "group/image relative w-fit max-w-full overflow-hidden rounded-xl",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "block w-fit max-w-full 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: file.dataUrl,
+					alt: file.label,
+					className: "block h-auto max-h-[26rem] max-w-full rounded-xl 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("div", {
+				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]
-			})]
-		})
-	});
+				})
+			}) : null
+		]
+	}), isExpanded ? /* @__PURE__ */ jsx(ChatMessageImageLightbox, {
+		alt: file.label,
+		closeLabel,
+		onClose: () => setIsExpanded(false),
+		src: file.dataUrl
+	}) : null] });
 }
 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]
@@ -3460,7 +3577,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", {
@@ -3471,9 +3588,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",
@@ -3484,7 +3606,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",
@@ -3500,20 +3622,22 @@ 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({
+	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) return /* @__PURE__ */ jsx(ChatMessageImagePreview, {
+		expandLabel,
+		closeLabel,
 		file,
-		categoryLabel,
-		sizeLabel,
-		isUser
+		sizeLabel
 	});
 	if (renderAsAudio || renderAsVideo) return renderInlineMediaCard({
 		category,
@@ -3522,7 +3646,8 @@ function ChatMessageFile({ file, isUser = false, texts }) {
 		sizeLabel,
 		isUser,
 		shellClasses,
-		actionLabel
+		actionLabel,
+		onOpen
 	});
 	const content = renderFileCardHeader({
 		category,
@@ -3536,6 +3661,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",
@@ -3666,16 +3797,64 @@ 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";
+function ChatProcessLeadingIcon({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(CHAT_PROCESS_LEADING_COL_CLASS, className),
+		children
+	});
+}
+function ChatProcessMetaRow({ children, className, interactive = false, onClick, role, tabIndex, onKeyDown }) {
+	return /* @__PURE__ */ jsx("div", {
+		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, className, labelClassName, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		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: [/* @__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"}`,
@@ -3684,36 +3863,42 @@ function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
 		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,
+			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
 	});
 }
@@ -3721,12 +3906,12 @@ function ToolCardContent({ children, className }) {
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-status.tsx
 const STATUS_STYLES = {
 	running: {
-		text: "text-primary/70",
+		text: "text-muted-foreground",
 		icon: Loader2,
 		spin: true
 	},
 	success: {
-		text: "text-primary/70",
+		text: "text-muted-foreground/75",
 		icon: Check,
 		spin: false
 	},
@@ -3736,20 +3921,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
@@ -3758,12 +3946,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 }) {
@@ -3781,12 +3969,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, {
@@ -3796,44 +3984,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 }) {
@@ -4076,7 +4302,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, {
@@ -4086,7 +4312,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
 							})
@@ -4112,28 +4338,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);
@@ -4145,7 +4371,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
 				})
 			})
@@ -4153,9 +4379,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;
@@ -4163,9 +4659,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;
 }
@@ -4180,26 +4673,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);
@@ -4258,47 +4760,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,
@@ -4308,38 +4783,29 @@ 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" })
-			})]
-		})
-	}), (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" })]
+	}), 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
 		})
-	})] })] });
+	})] });
 }
-function FileOperationView({ card, onFileOpen }) {
+function FileOperationView({ card, toolLabel, onFileOpen }) {
 	const output = card.output?.trim() ?? "";
 	const isRunning = card.statusTone === "running";
-	const hasStructuredPreview = Boolean(card.fileOperation?.blocks.length);
-	const hasContent = hasStructuredPreview || Boolean(output);
+	const hasContent = Boolean(card.fileOperation?.blocks.length) || Boolean(output);
 	const previewBlocks = card.fileOperation?.blocks ?? [];
 	const previewLineCount = previewBlocks.reduce((count, block) => count + block.lines.length, 0);
 	const previewCharCount = previewBlocks.reduce((count, block) => {
@@ -4354,22 +4820,26 @@ 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",
+	}), expanded && hasContent ? /* @__PURE__ */ jsx(ToolCardContent, {
+		className: "bg-transparent py-0",
 		children: /* @__PURE__ */ jsx(ToolCardFileOperationContent, {
 			card,
-			onFileOpen
+			onFileOpen,
+			showPathRow: true
 		})
-	})] });
+	}) : 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({
@@ -4380,24 +4850,69 @@ 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 GenericToolSection({ 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
+			})
+		})]
+	});
+}
+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,
@@ -4406,30 +4921,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(GenericToolSection, {
+				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(GenericToolSection, {
+				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
@@ -4451,34 +4964,370 @@ 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, isUser, reasoningCharacterCountTemplates, toolStatusLabels, onToolAction, onFileOpen, renderToolAgent, renderPanelAppCard }) {
+	const [open, setOpen] = useState(false);
+	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,
+			label: group.label,
+			onClick: () => setOpen((current) => !current)
+		}), 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("div", {
+						"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", index === 0 ? "bottom-0 top-[0.86em]" : isLast ? "top-0 h-[0.86em]" : "inset-y-0")
+					}) : null, part.type === "tool-card" ? /* @__PURE__ */ jsx(ChatToolCard, {
+						card: part.card,
+						toolStatusLabels,
+						onToolAction,
+						onFileOpen,
+						renderToolAgent,
+						renderPanelAppCard
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "pl-[calc(1.15em+0.375rem)]",
+						children: /* @__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}-${index - 1}`,
+			group: {
+				key: `tool-group-${startIndex}-${index - 1}`,
+				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";
 }
@@ -4498,7 +5347,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, role, texts }) {
 	const { type } = part;
 	if (type === "markdown") {
 		const { inlineTokens, text } = part;
@@ -4508,6 +5357,7 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onFile
 			texts,
 			inlineTokens,
 			onFileOpen,
+			onInlineTokenClick,
 			renderInlineDisplay
 		}, `markdown-${index}`);
 	}
@@ -4516,29 +5366,29 @@ 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, {
-				card,
-				onToolAction,
-				onFileOpen,
-				renderToolAgent,
-				renderPanelAppCard
-			})
-		}, `tool-${index}`);
+		return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ChatToolCard, {
+			card,
+			toolStatusLabels: texts.toolStatusLabels,
+			onToolAction,
+			onFileOpen,
+			renderToolAgent,
+			renderPanelAppCard
+		}) }, `tool-${index}`);
 	}
 	if (type === "file") {
 		const { file } = part;
 		return /* @__PURE__ */ jsx(ChatMessageFile, {
 			file,
 			isUser,
-			texts
+			texts,
+			onOpen: onAttachmentOpen
 		}, `file-${index}`);
 	}
 	if (type === "unknown") {
@@ -4560,49 +5410,102 @@ 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, onToolAction, parts, renderInlineDisplay, renderPanelAppCard, renderToolAgent, role, texts, indexOffset = 0 } = params;
+	return groupConsecutiveToolParts(parts, resolveToolActivityLabels(texts)).map((block) => {
+		if (block.kind === "tool-group") return /* @__PURE__ */ jsx(ChatToolActivityGroup, {
+			group: block.group,
+			isUser,
+			reasoningCharacterCountTemplates: texts.reasoningCharacterCountTemplates,
+			toolStatusLabels: texts.toolStatusLabels,
+			onToolAction,
+			onFileOpen,
+			renderToolAgent,
+			renderPanelAppCard
+		}, 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,
+			renderInlineDisplay,
+			renderToolAgent,
+			renderPanelAppCard
+		});
+	});
+}
+const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, onFileOpen, onAttachmentOpen, onInlineTokenClick, renderInlineDisplay, renderToolAgent, renderPanelAppCard }) {
 	const { role } = message;
 	const isUser = role === "user";
 	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);
 	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 ? "border-primary bg-primary py-3 text-primary-foreground" : role === "assistant" ? "border-border bg-card pb-3 pt-4 text-card-foreground" : "border-border bg-muted/45 py-3 text-foreground"),
+		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"),
 		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,
+						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,
+						renderInlineDisplay,
+						renderToolAgent,
+						renderPanelAppCard
+					})
+				}) : null]
+			}), renderMessageParts({
+				parts: processSplit.finalParts,
+				role,
+				isUser,
+				isInProgress,
+				texts,
+				onToolAction,
+				onFileOpen,
+				onAttachmentOpen,
+				onInlineTokenClick,
+				renderInlineDisplay,
+				renderToolAgent,
+				renderPanelAppCard,
+				indexOffset: processSplit.processParts.length
+			})] }) : renderMessageParts({
+				parts: message.parts,
+				role,
+				isUser,
+				isInProgress,
+				texts,
+				onToolAction,
+				onFileOpen,
+				onAttachmentOpen,
+				onInlineTokenClick,
+				renderInlineDisplay,
+				renderToolAgent,
+				renderPanelAppCard
+			})
 		})
 	});
 });
@@ -4702,7 +5605,7 @@ function ChatTypingIndicator({ label }) {
 		})]
 	});
 }
-function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAction, renderInlineDisplay, renderPanelAppCard, renderToolAgent, texts }) {
+function ChatMessageList({ className, isSending, messages, onAttachmentOpen, onFileOpen, onInlineTokenClick, onToolAction, renderInlineDisplay, renderPanelAppCard, renderToolAgent, texts }) {
 	const visibleMessages = messages.filter(hasRenderableMessageContent);
 	const hasRenderableAssistantDraft = visibleMessages.some((message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending"));
 	return /* @__PURE__ */ jsxs("div", {
@@ -4721,6 +5624,8 @@ function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAct
 							texts,
 							onToolAction,
 							onFileOpen,
+							onAttachmentOpen,
+							onInlineTokenClick,
 							renderInlineDisplay,
 							renderToolAgent,
 							renderPanelAppCard