@nextclaw/agent-chat-ui 0.6.3 → 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, 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 { 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";
@@ -513,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", {
@@ -521,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);
@@ -532,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",
@@ -640,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);
@@ -662,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,
@@ -680,11 +672,16 @@ 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
@@ -727,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",
@@ -782,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
@@ -1160,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", {
@@ -1190,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;
@@ -1202,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);
@@ -1269,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))]
 		})]
@@ -2294,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", {
@@ -2316,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,
@@ -2384,6 +2384,10 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSur
 						})
 					}),
 					/* @__PURE__ */ jsx(InputBarHint, { hint }),
+					/* @__PURE__ */ jsx(ChatInputBarSendError, {
+						sendError,
+						sendErrorDetailsLabel
+					}),
 					/* @__PURE__ */ jsx(ChatInputBarToolbar, { ...toolbar })
 				]
 			})
@@ -2393,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
 		})
 	});
@@ -2929,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;
@@ -2956,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();
@@ -3069,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, onInlineTokenClick, 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);
@@ -3097,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();
@@ -3112,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,
@@ -3140,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 }) => {
@@ -3175,6 +3317,7 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 		onFileOpen,
 		onInlineTokenClick,
 		renderInlineDisplay,
+		resolveFileContentUrl,
 		texts
 	]);
 	return /* @__PURE__ */ jsx(inline ? "span" : "div", {
@@ -3451,109 +3594,6 @@ function FileCategoryGlyph({ category, isUser }) {
 		})
 	});
 }
-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;
-	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
-		]
-	}), 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", {
@@ -3633,11 +3673,12 @@ function ChatMessageFile({ file, isUser = false, texts, onOpen }) {
 	const closeLabel = texts?.attachmentCloseLabel ?? "Close preview";
 	const categoryLabel = readFileCategoryLabel(category, texts);
 	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, {
+	if (renderAsImage && file.dataUrl) return /* @__PURE__ */ jsx(ChatMessageImagePreview, {
+		alt: file.label,
 		expandLabel,
 		closeLabel,
-		file,
-		sizeLabel
+		sizeLabel,
+		src: file.dataUrl
 	});
 	if (renderAsAudio || renderAsVideo) return renderInlineMediaCard({
 		category,
@@ -3676,6 +3717,54 @@ function ChatMessageFile({ file, isUser = false, texts, onOpen }) {
 	});
 }
 //#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;
@@ -3711,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);
@@ -3729,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
@@ -3742,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));
@@ -3803,15 +3886,23 @@ function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey
 * 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";
+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,
@@ -3827,22 +3918,33 @@ function ChatProcessMetaRow({ children, className, interactive = false, onClick,
 * 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 }) {
+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: [/* @__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
+		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
@@ -3857,7 +3959,7 @@ function ChatReasoningBlock({ label, text, characterCountTemplates, isUser, isIn
 	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,
@@ -3868,6 +3970,8 @@ function ChatReasoningBlock({ label, text, characterCountTemplates, isUser, isIn
 		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
@@ -3902,6 +4006,38 @@ function ToolCardContent({ children, className }) {
 		children
 	});
 }
+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 = {
@@ -4803,9 +4939,12 @@ function TerminalExecutionView({ card, toolLabel }) {
 	})] });
 }
 function FileOperationView({ card, toolLabel, onFileOpen }) {
+	const input = card.input?.trim() ?? "";
 	const output = card.output?.trim() ?? "";
 	const isRunning = card.statusTone === "running";
-	const hasContent = Boolean(card.fileOperation?.blocks.length) || Boolean(output);
+	const hasStructuredPreview = Boolean(card.fileOperation?.blocks.length);
+	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) => {
@@ -4830,13 +4969,21 @@ function FileOperationView({ card, toolLabel, onFileOpen }) {
 		canExpand: hasContent || isRunning,
 		hideSummary: false,
 		onToggle
-	}), expanded && hasContent ? /* @__PURE__ */ jsx(ToolCardContent, {
+	}), expanded && hasContent ? /* @__PURE__ */ jsxs(ToolCardContent, {
 		className: "bg-transparent py-0",
-		children: /* @__PURE__ */ jsx(ToolCardFileOperationContent, {
-			card,
-			onFileOpen,
-			showPathRow: true
-		})
+		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, toolLabel, icon: Icon = Search }) {
@@ -4865,38 +5012,6 @@ function SearchSnippetView({ card, toolLabel, icon: Icon = Search }) {
 }
 //#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, {
@@ -4930,13 +5045,13 @@ function GenericToolCard({ card, toolLabel, icon: Icon = Wrench, onToolAction, r
 	}), expanded && hasContent ? /* @__PURE__ */ jsxs(ToolCardContent, {
 		className: "bg-transparent py-0",
 		children: [
-			hasInputSection ? /* @__PURE__ */ jsx(GenericToolSection, {
+			hasInputSection ? /* @__PURE__ */ jsx(ToolCardDetailSection, {
 				label: card.inputLabel?.trim() || "Input",
 				tone: "input",
 				children: input
 			}) : null,
 			hasInputSection && hasOutputSection ? /* @__PURE__ */ jsx("div", { className: "h-2" }) : null,
-			hasOutputSection ? /* @__PURE__ */ jsx(GenericToolSection, {
+			hasOutputSection ? /* @__PURE__ */ jsx(ToolCardDetailSection, {
 				label: card.outputLabel?.trim() || "Output",
 				tone: card.statusTone === "error" ? "error" : "output",
 				children: output
@@ -5085,8 +5200,7 @@ function ChatToolCard({ card, toolStatusLabels, onToolAction, onFileOpen, render
 }
 //#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);
+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", {
@@ -5094,34 +5208,29 @@ function ChatToolActivityGroup({ group, isUser, reasoningCharacterCountTemplates
 		children: [/* @__PURE__ */ jsx(ChatCollapsibleMetaSummary, {
 			openGroup: "tool-activity",
 			open,
+			icon: Workflow,
+			leadingIconClassName: "bg-card",
 			label: group.label,
-			onClick: () => setOpen((current) => !current)
+			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("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, {
+					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("div", {
-						className: "pl-[calc(1.15em+0.375rem)]",
-						children: /* @__PURE__ */ jsx(ChatReasoningBlock, {
-							label: part.label,
-							text: part.text,
-							characterCountTemplates: reasoningCharacterCountTemplates,
-							isUser,
-							isInProgress: false
-						})
+					}) : /* @__PURE__ */ jsx(ChatReasoningBlock, {
+						label: part.label,
+						text: part.text,
+						characterCountTemplates: reasoningCharacterCountTemplates,
+						isUser,
+						isInProgress: false
 					})]
 				}, `tool-group-item-${group.startIndex + index}`);
 			})
@@ -5261,9 +5370,9 @@ function groupConsecutiveToolParts(parts, labels) {
 		});
 		blocks.push({
 			kind: "tool-group",
-			key: `tool-group-${startIndex}-${index - 1}`,
+			key: `tool-group-${startIndex}`,
 			group: {
-				key: `tool-group-${startIndex}-${index - 1}`,
+				key: `tool-group-${startIndex}`,
 				startIndex,
 				endIndex: index - 1,
 				parts: groupedParts,
@@ -5347,7 +5456,7 @@ function splitAssistantProcess(message) {
 		finalParts: message.parts.slice(lastProcessPartIndex + 1)
 	};
 }
-function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAttachmentOpen, onFileOpen, onInlineTokenClick, 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;
@@ -5358,6 +5467,7 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAtta
 			inlineTokens,
 			onFileOpen,
 			onInlineTokenClick,
+			resolveFileContentUrl,
 			renderInlineDisplay
 		}, `markdown-${index}`);
 	}
@@ -5373,14 +5483,17 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAtta
 	}
 	if (type === "tool-card") {
 		const { card } = part;
-		return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ChatToolCard, {
-			card,
-			toolStatusLabels: texts.toolStatusLabels,
-			onToolAction,
-			onFileOpen,
-			renderToolAgent,
-			renderPanelAppCard
-		}) }, `tool-${index}`);
+		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") {
 		const { file } = part;
@@ -5411,17 +5524,26 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAtta
 	return null;
 }
 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) => {
+	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
+			renderPanelAppCard,
+			onOpenChange: (open) => onToolActivityOpenChange(block.group.key, open)
 		}, block.key);
 		return renderChatMessagePart({
 			part: block.part,
@@ -5435,20 +5557,33 @@ function renderMessageParts(params) {
 			onFileOpen,
 			onAttachmentOpen,
 			onInlineTokenClick,
+			resolveFileContentUrl,
 			renderInlineDisplay,
 			renderToolAgent,
 			renderPanelAppCard
 		});
 	});
 }
-const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, onFileOpen, onAttachmentOpen, onInlineTokenClick, 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 [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-0",
 			children: processSplit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
@@ -5458,6 +5593,8 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 					children: /* @__PURE__ */ jsx(ChatCollapsibleMetaSummary, {
 						openGroup: "process",
 						open: processOpen,
+						icon: ListChecks,
+						leadingIconClassName: "bg-card",
 						label: message.processSummary?.label,
 						onClick: () => setProcessOpen((current) => !current)
 					})
@@ -5473,6 +5610,9 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 						onFileOpen,
 						onAttachmentOpen,
 						onInlineTokenClick,
+						resolveFileContentUrl,
+						openToolGroupKeys,
+						onToolActivityOpenChange: handleToolActivityOpenChange,
 						renderInlineDisplay,
 						renderToolAgent,
 						renderPanelAppCard
@@ -5488,6 +5628,9 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 				onFileOpen,
 				onAttachmentOpen,
 				onInlineTokenClick,
+				resolveFileContentUrl,
+				openToolGroupKeys,
+				onToolActivityOpenChange: handleToolActivityOpenChange,
 				renderInlineDisplay,
 				renderToolAgent,
 				renderPanelAppCard,
@@ -5502,6 +5645,9 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 				onFileOpen,
 				onAttachmentOpen,
 				onInlineTokenClick,
+				resolveFileContentUrl,
+				openToolGroupKeys,
+				onToolActivityOpenChange: handleToolActivityOpenChange,
 				renderInlineDisplay,
 				renderToolAgent,
 				renderPanelAppCard
@@ -5542,7 +5688,6 @@ const TYPING_TEXT_SHEEN_CSS = `
     background-position: -60% 0;
   }
 }
-
 .nextclaw-chat-typing-indicator__text {
   background-image: linear-gradient(
     100deg,
@@ -5596,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, onAttachmentOpen, onFileOpen, onInlineTokenClick, 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", {
@@ -5613,23 +5759,63 @@ function ChatMessageList({ className, isSending, messages, onAttachmentOpen, onF
 		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,
-							onAttachmentOpen,
-							onInlineTokenClick,
-							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"),
@@ -5648,8 +5834,15 @@ function ChatMessageList({ className, isSending, messages, onAttachmentOpen, onF
 				]
 			}, 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]
 	});
 }