@nextclaw/agent-chat-ui 0.6.3 → 0.6.5

package/dist/index.js

@@ -1,18 +1,18 @@
 import * as React from "react";
-import { Fragment, forwardRef, memo, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { clsx } from "clsx";
 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";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
-import { $applyNodeReplacement, $createLineBreakNode, $createParagraphNode, $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, $setSelection, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, DecoratorNode, KEY_DOWN_COMMAND, SELECTION_CHANGE_COMMAND, mergeRegister } from "lexical";
+import { $applyNodeReplacement, $createLineBreakNode, $createParagraphNode, $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, $setSelection, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, DecoratorNode, KEY_DOWN_COMMAND, SELECTION_CHANGE_COMMAND, SKIP_DOM_SELECTION_TAG, mergeRegister } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -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))]
 		})]
@@ -1667,12 +1625,12 @@ function writeChatComposerStateToLexicalRoot(nodes, selection) {
 	nextSelection.focus.set(focus.key, focus.offset, focus.type);
 	$setSelection(nextSelection);
 }
-function syncLexicalEditorFromChatComposerState(editor, nodes, selection) {
+function syncLexicalEditorFromChatComposerState(editor, nodes, selection, preserveDomSelection = false) {
 	editor.update(() => {
 		writeChatComposerStateToLexicalRoot(nodes, selection);
-	});
+	}, preserveDomSelection ? { tag: SKIP_DOM_SELECTION_TAG } : void 0);
 }
-function syncLexicalSelectionFromChatComposerSelection(editor, selection) {
+function syncLexicalSelectionFromChatComposerSelection(editor, selection, preserveDomSelection = false) {
 	editor.update(() => {
 		const nextSelection = $createRangeSelection();
 		const anchor = buildSelectionPointFromOffset(selection.start);
@@ -1680,7 +1638,7 @@ function syncLexicalSelectionFromChatComposerSelection(editor, selection) {
 		nextSelection.anchor.set(anchor.key, anchor.offset, anchor.type);
 		nextSelection.focus.set(focus.key, focus.offset, focus.type);
 		$setSelection(nextSelection);
-	});
+	}, preserveDomSelection ? { tag: SKIP_DOM_SELECTION_TAG } : void 0);
 }
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-operations.ts
@@ -1991,11 +1949,12 @@ var ChatComposerLexicalOwner = class {
 			const shouldSyncDocument = nextSignature !== this.editorSignatureRef.current;
 			if (!shouldSyncDocument && !pendingSelection) return;
 			this.startApplyingExternalUpdate();
+			const preserveDomSelection = editor.getRootElement() !== document.activeElement;
 			if (shouldSyncDocument) {
-				syncLexicalEditorFromChatComposerState(editor, nodes, pendingSelection);
+				syncLexicalEditorFromChatComposerState(editor, nodes, pendingSelection, preserveDomSelection);
 				this.editorSignatureRef.current = nextSignature;
 				this.lastPublishedSignatureRef.current = nextSignature;
-			} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection);
+			} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection, preserveDomSelection);
 			if (pendingSelection) {
 				this.selectionRef.current = pendingSelection;
 				this.pendingSelectionRef.current = null;
@@ -2294,6 +2253,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 +2280,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 +2385,10 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSur
 						})
 					}),
 					/* @__PURE__ */ jsx(InputBarHint, { hint }),
+					/* @__PURE__ */ jsx(ChatInputBarSendError, {
+						sendError,
+						sendErrorDetailsLabel
+					}),
 					/* @__PURE__ */ jsx(ChatInputBarToolbar, { ...toolbar })
 				]
 			})
@@ -2393,22 +2398,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
 		})
 	});
@@ -2773,7 +2781,7 @@ function isRecord$1(value) {
 function readString(value) {
 	return typeof value === "string" && value.trim().length > 0 ? value.trim() : void 0;
 }
-function readPositiveInteger(value) {
+function readPositiveInteger$1(value) {
 	return Number.isInteger(value) && Number(value) > 0 ? Number(value) : void 0;
 }
 function readFilePreviewViewer(value) {
@@ -2793,8 +2801,8 @@ function readFileTarget(record) {
 		type: "file",
 		payload: {
 			path,
-			line: readPositiveInteger(payload.line),
-			column: readPositiveInteger(payload.column),
+			line: readPositiveInteger$1(payload.line),
+			column: readPositiveInteger$1(payload.column),
 			viewer: readFilePreviewViewer(payload.viewer)
 		}
 	};
@@ -2929,57 +2937,345 @@ 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;
-const SAFE_LINK_PROTOCOLS = new Set([
+//#region src/components/chat/ui/chat-message-list/mermaid/chat-mermaid-diagram.tsx
+const STREAMING_RENDER_DELAY_MS = 300;
+let mermaidModulePromise = null;
+function loadMermaid() {
+	mermaidModulePromise ??= import("mermaid").then((module) => module.default);
+	return mermaidModulePromise;
+}
+function readMermaidTheme() {
+	if (typeof document === "undefined") return "default";
+	const root = document.documentElement;
+	return root.getAttribute("data-theme-appearance") === "dark" || root.classList.contains("dark") ? "dark" : "default";
+}
+function useMermaidTheme() {
+	const [theme, setTheme] = useState(readMermaidTheme);
+	useEffect(() => {
+		const root = document.documentElement;
+		const observer = new MutationObserver(() => setTheme(readMermaidTheme()));
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: ["class", "data-theme-appearance"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return theme;
+}
+function ChatMermaidDiagram({ isStreaming, source, texts }) {
+	const reactId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+	const renderSequence = useRef(0);
+	const theme = useMermaidTheme();
+	const normalizedSource = source.trim();
+	const renderKey = `${theme}:${normalizedSource}`;
+	const [state, setState] = useState(null);
+	const diagramLabel = texts.mermaidDiagramLabel ?? "Mermaid diagram";
+	const errorLabel = texts.mermaidRenderErrorLabel ?? "Diagram could not be rendered";
+	useEffect(() => {
+		let active = true;
+		const renderDiagram = async () => {
+			try {
+				const mermaid = await loadMermaid();
+				if (!active) return;
+				renderSequence.current += 1;
+				const diagramId = `nextclaw-mermaid-${reactId}-${renderSequence.current}`;
+				mermaid.initialize({
+					securityLevel: "strict",
+					startOnLoad: false,
+					suppressErrorRendering: true,
+					theme
+				});
+				const valid = await mermaid.parse(normalizedSource, { suppressErrors: true });
+				if (!active) return;
+				if (!valid) throw new Error("Invalid Mermaid diagram");
+				const { svg } = await mermaid.render(diagramId, normalizedSource);
+				if (active) setState({
+					key: renderKey,
+					status: "rendered",
+					svg
+				});
+			} catch {
+				if (active && !isStreaming) setState({
+					key: renderKey,
+					status: "error"
+				});
+			}
+		};
+		const timeout = window.setTimeout(() => void renderDiagram(), isStreaming ? STREAMING_RENDER_DELAY_MS : 0);
+		return () => {
+			active = false;
+			window.clearTimeout(timeout);
+		};
+	}, [
+		isStreaming,
+		normalizedSource,
+		reactId,
+		renderKey,
+		theme
+	]);
+	const currentState = state?.key === renderKey ? state : null;
+	if (currentState?.status === "error") return /* @__PURE__ */ jsxs("div", {
+		"data-chat-mermaid-error": "true",
+		className: "my-3 overflow-hidden rounded-xl border border-border bg-muted/25",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-b border-border px-3 py-2 text-xs text-muted-foreground",
+			children: errorLabel
+		}), /* @__PURE__ */ jsx(ChatCodeBlock, {
+			className: "language-mermaid",
+			texts,
+			children: normalizedSource
+		})]
+	});
+	const renderedState = state?.status === "rendered" ? state : null;
+	if (!renderedState) return /* @__PURE__ */ jsx(ChatCodeBlock, {
+		className: "language-mermaid",
+		texts,
+		children: normalizedSource
+	});
+	return /* @__PURE__ */ jsx("figure", {
+		"aria-label": diagramLabel,
+		"aria-busy": !currentState,
+		"data-chat-mermaid-diagram": "true",
+		"data-chat-mermaid-updating": !currentState || void 0,
+		className: "my-3 min-h-24 overflow-auto rounded-xl border border-border bg-muted/20 p-3",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-w-fit [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full",
+			dangerouslySetInnerHTML: { __html: renderedState.svg }
+		})
+	});
+}
+//#endregion
+//#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_BROWSER_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;
+const WINDOWS_FILE_URI_PATH_PATTERN = /^\/[a-z]:[\\/]/i;
+const FILE_URI_PROTOCOL = "file:";
+function isSchemeLessResourceHref(href) {
+	return !href.startsWith("//") && !URI_SCHEME_PATTERN.test(href);
 }
-function resolveSafeHref(href) {
-	if (!href) return null;
-	if (href.startsWith("#") || href.startsWith("/") || href.startsWith("./") || href.startsWith("../") || PROJECT_RELATIVE_FILE_HREF_PATTERN.test(href)) return href;
+function readPositiveInteger(value) {
+	const parsed = Number(value);
+	return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : void 0;
+}
+function readFileUriHref(href) {
+	let url;
 	try {
-		const url = new URL(href);
-		return SAFE_LINK_PROTOCOLS.has(url.protocol) ? href : null;
+		url = new URL(href);
+	} catch {
+		return null;
+	}
+	if (url.protocol !== FILE_URI_PROTOCOL || url.hostname && url.hostname.toLowerCase() !== "localhost") return null;
+	let path;
+	try {
+		path = decodeURIComponent(url.pathname);
 	} catch {
 		return null;
 	}
+	if (WINDOWS_FILE_URI_PATH_PATTERN.test(path)) path = path.slice(1);
+	return path ? {
+		path,
+		query: url.searchParams,
+		fragment: url.hash.slice(1)
+	} : null;
+}
+function readSchemeLessFileHref(href) {
+	const hashIndex = href.indexOf("#");
+	const hrefWithoutFragment = hashIndex >= 0 ? href.slice(0, hashIndex) : href;
+	const fragment = hashIndex >= 0 ? href.slice(hashIndex + 1) : "";
+	const queryIndex = hrefWithoutFragment.indexOf("?");
+	const encodedPath = queryIndex >= 0 ? hrefWithoutFragment.slice(0, queryIndex) : hrefWithoutFragment;
+	const encodedQuery = queryIndex >= 0 ? hrefWithoutFragment.slice(queryIndex + 1) : "";
+	let path;
+	try {
+		path = decodeURIComponent(encodedPath);
+	} catch {
+		return null;
+	}
+	return path ? {
+		path,
+		query: new URLSearchParams(encodedQuery),
+		fragment
+	} : null;
+}
+function readLinePosition(fragment) {
+	const match = /^L(\d+)(?:C(\d+))?(?:-L\d+(?:C\d+)?)?$/i.exec(fragment);
+	const line = readPositiveInteger(match?.[1]);
+	return {
+		line,
+		column: line ? readPositiveInteger(match?.[2]) : void 0
+	};
+}
+function transformChatResourceHref(href) {
+	if (WINDOWS_ABSOLUTE_PATH_PATTERN.test(href) || isSchemeLessResourceHref(href)) return href;
+	try {
+		const url = new URL(href);
+		if (SAFE_BROWSER_LINK_PROTOCOLS.has(url.protocol)) return href;
+		return url.protocol === FILE_URI_PROTOCOL && readFileUriHref(href) ? href : "";
+	} catch {
+		return "";
+	}
+}
+function resolveSafeChatResourceHref(href) {
+	if (!href) return null;
+	return transformChatResourceHref(href) || 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;
-	const line = lineMatch?.[2] ? Number(lineMatch[2]) : void 0;
-	const column = lineMatch?.[3] ? Number(lineMatch[3]) : void 0;
+function parseChatLocalFileAction(href) {
+	const fileHref = href.toLowerCase().startsWith(FILE_URI_PROTOCOL) ? readFileUriHref(href) : readSchemeLessFileHref(href);
+	const path = fileHref?.path;
+	if (!path || path.startsWith("#") || path.startsWith("//") || !WINDOWS_ABSOLUTE_PATH_PATTERN.test(path) && URI_SCHEME_PATTERN.test(path)) return null;
+	const viewer = fileHref.query.get("viewer");
+	const fragmentPosition = readLinePosition(fileHref.fragment);
+	const lineMatch = /^(.*?)(?::(\d+)(?::(\d+))?)$/.exec(path);
+	const rawPath = lineMatch?.[1] ?? path;
+	const line = fragmentPosition.line ?? readPositiveInteger(lineMatch?.[2]);
+	const column = fragmentPosition.column ?? (line ? readPositiveInteger(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();
@@ -3046,144 +3342,170 @@ function splitTextNodeByInlineTokens(value, tokens) {
 	}];
 }
 function transformInlineTokenTextNodes(node, tokens) {
-	if (node.type === "code" || node.type === "inlineCode" || !node.children) return;
-	const nextChildren = [];
-	for (const child of node.children) {
-		if (child.type === "text" && typeof child.value === "string") {
-			nextChildren.push(...splitTextNodeByInlineTokens(child.value, tokens));
-			continue;
-		}
-		transformInlineTokenTextNodes(child, tokens);
-		nextChildren.push(child);
-	}
-	node.children = nextChildren;
+	if (node.type === "code" || node.type === "inlineCode" || !node.children) return node;
+	return {
+		...node,
+		children: node.children.flatMap((child) => child.type === "text" && typeof child.value === "string" ? splitTextNodeByInlineTokens(child.value, tokens) : [transformInlineTokenTextNodes(child, tokens)])
+	};
 }
 function createRemarkInlineTokenPlugin(inlineTokens) {
 	const tokens = prepareInlineTokens(inlineTokens);
-	return () => (tree) => {
-		if (tokens.length === 0) return;
-		transformInlineTokenTextNodes(tree, tokens);
-	};
+	return () => (tree) => tokens.length > 0 ? transformInlineTokenTextNodes(tree, tokens) : tree;
 }
 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 }) {
-	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 }),
-		span: ({ node: _node, children, ...rest }) => {
-			const restProps = rest;
-			const kind = readStringProp(restProps, INLINE_TOKEN_KIND_ATTR);
-			const key = readStringProp(restProps, INLINE_TOKEN_KEY_ATTR);
-			const label = readStringProp(restProps, INLINE_TOKEN_LABEL_ATTR);
-			const rawText = readStringProp(restProps, INLINE_TOKEN_RAW_TEXT_ATTR);
-			if (kind && key && label && rawText) return /* @__PURE__ */ jsx(ChatInlineTokenBadge, {
+const ChatMessageMarkdownRuntimeContext = createContext(null);
+function useChatMessageMarkdownRuntime() {
+	const runtime = useContext(ChatMessageMarkdownRuntimeContext);
+	if (!runtime) throw new Error("Chat message Markdown renderer requires its runtime context");
+	return runtime;
+}
+const CHAT_MESSAGE_MARKDOWN_COMPONENTS = {
+	p: function ChatMarkdownParagraph({ node, children }) {
+		const { inline } = useChatMessageMarkdownRuntime();
+		return inline ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsx("p", {
+			"data-chat-image-row": isSingleLineImageParagraph(node) ? "three-column" : void 0,
+			children
+		});
+	},
+	span: function ChatMarkdownSpan({ node: _node, children, ...rest }) {
+		const { isUser, onInlineTokenClick } = useChatMessageMarkdownRuntime();
+		const restProps = rest;
+		const kind = readStringProp(restProps, INLINE_TOKEN_KIND_ATTR);
+		const key = readStringProp(restProps, INLINE_TOKEN_KEY_ATTR);
+		const label = readStringProp(restProps, INLINE_TOKEN_LABEL_ATTR);
+		const rawText = readStringProp(restProps, INLINE_TOKEN_RAW_TEXT_ATTR);
+		if (kind && key && label && rawText) return /* @__PURE__ */ jsx(ChatInlineTokenBadge, {
+			kind,
+			label,
+			isUser,
+			onClick: onInlineTokenClick ? () => onInlineTokenClick({
 				kind,
+				key,
 				label,
-				isUser,
-				onClick: onInlineTokenClick ? () => onInlineTokenClick({
-					kind,
-					key,
-					label,
-					rawText
-				}) : void 0
-			});
-			return /* @__PURE__ */ jsx("span", {
-				...rest,
-				children
-			});
-		},
-		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 handleClick = (event) => {
-				if (!onFileOpen || !localFileAction) return;
-				if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+				rawText
+			}) : void 0
+		});
+		return /* @__PURE__ */ jsx("span", {
+			...rest,
+			children
+		});
+	},
+	a: function ChatMarkdownLink({ node: _node, href, children, ...rest }) {
+		const { onFileOpen } = useChatMessageMarkdownRuntime();
+		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();
-				onFileOpen(localFileAction);
-			};
-			return /* @__PURE__ */ jsx("a", {
-				...rest,
-				href: safeHref,
-				onClick: handleClick,
-				target: external ? "_blank" : void 0,
-				rel: external ? "noreferrer noopener" : void 0,
-				children
-			});
-		},
-		table: ({ node: _node, children, ...rest }) => /* @__PURE__ */ jsx("div", {
+				return;
+			}
+			if (!onFileOpen || !localFileAction) return;
+			if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+			event.preventDefault();
+			onFileOpen(localFileAction);
+		};
+		return /* @__PURE__ */ jsx("a", {
+			...rest,
+			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,
+			children
+		});
+	},
+	table: function ChatMarkdownTable({ node: _node, children, ...rest }) {
+		return /* @__PURE__ */ jsx("div", {
 			className: "chat-table-wrap",
 			children: /* @__PURE__ */ jsx("table", {
 				...rest,
 				children
 			})
-		}),
-		input: ({ node: _node, type, checked, ...rest }) => {
-			if (type !== "checkbox") return /* @__PURE__ */ jsx("input", {
-				...rest,
-				type
-			});
-			return /* @__PURE__ */ jsx("input", {
-				...rest,
-				type: "checkbox",
-				checked,
-				readOnly: true,
-				disabled: true,
-				className: "chat-task-checkbox"
-			});
-		},
-		img: ({ node: _node, src, alt, ...rest }) => {
-			const safeSrc = resolveSafeHref(src);
-			if (!safeSrc) return null;
-			return /* @__PURE__ */ jsx("img", {
-				...rest,
-				src: safeSrc,
-				alt: alt || "",
-				loading: "lazy",
-				decoding: "async"
-			});
+		});
+	},
+	input: function ChatMarkdownInput({ node: _node, type, checked, ...rest }) {
+		if (type !== "checkbox") return /* @__PURE__ */ jsx("input", {
+			...rest,
+			type
+		});
+		return /* @__PURE__ */ jsx("input", {
+			...rest,
+			type: "checkbox",
+			checked,
+			readOnly: true,
+			disabled: true,
+			className: "chat-task-checkbox"
+		});
+	},
+	img: function ChatMarkdownImage({ node: _node, src, alt }) {
+		const { resolveFileContentUrl, texts } = useChatMessageMarkdownRuntime();
+		const safeSrc = resolveSafeChatResourceHref(src);
+		if (!safeSrc) return null;
+		const localFileAction = parseChatLocalFileAction(safeSrc);
+		const resolvedSrc = localFileAction && resolveFileContentUrl ? resolveFileContentUrl(localFileAction) : safeSrc;
+		if (!resolvedSrc) return null;
+		return /* @__PURE__ */ jsx(ChatMessageImagePreview, {
+			alt: alt || "",
+			closeLabel: texts.attachmentCloseLabel ?? "Close preview",
+			expandLabel: texts.attachmentExpandLabel ?? "Expand image",
+			sizeLabel: null,
+			src: resolvedSrc
+		});
+	},
+	code: function ChatMarkdownCode({ node: _node, className, children, ...rest }) {
+		const { isStreaming, renderInlineDisplay, texts } = useChatMessageMarkdownRuntime();
+		const plainText = String(children ?? "");
+		if (!className && !plainText.includes("\n")) return /* @__PURE__ */ jsx("code", {
+			...rest,
+			className: cn("chat-inline-code", className),
+			children
+		});
+		const inlineDisplay = isChatInlineDisplayLanguage(className) ? parseChatInlineDisplayDirective(plainText) : null;
+		if (inlineDisplay) return /* @__PURE__ */ jsx(ChatInlineDisplay, {
+			display: inlineDisplay,
+			renderInlineDisplay
+		});
+		if (className?.split(" ").includes("language-mermaid")) return /* @__PURE__ */ jsx(ChatMermaidDiagram, {
+			isStreaming,
+			source: plainText,
+			texts
+		});
+		return /* @__PURE__ */ jsx(ChatCodeBlock, {
+			className,
+			texts,
+			children
+		});
+	}
+};
+function ChatMessageMarkdown({ text, role, texts, inline = false, isStreaming = false, inlineTokens, onFileOpen, onInlineTokenClick, resolveFileContentUrl, renderInlineDisplay }) {
+	const isUser = role === "user";
+	const remarkPlugins = inlineTokens?.length ? [remarkGfm, createRemarkInlineTokenPlugin(inlineTokens)] : [remarkGfm];
+	const WrapperTag = inline ? "span" : "div";
+	return /* @__PURE__ */ jsx(ChatMessageMarkdownRuntimeContext.Provider, {
+		value: {
+			inline,
+			isStreaming,
+			isUser,
+			onFileOpen,
+			onInlineTokenClick,
+			renderInlineDisplay,
+			resolveFileContentUrl,
+			texts
 		},
-		code: ({ node: _node, className, children, ...rest }) => {
-			const plainText = String(children ?? "");
-			if (!className && !plainText.includes("\n")) return /* @__PURE__ */ jsx("code", {
-				...rest,
-				className: cn("chat-inline-code", className),
-				children
-			});
-			const inlineDisplay = isChatInlineDisplayLanguage(className) ? parseChatInlineDisplayDirective(plainText) : null;
-			if (inlineDisplay) return /* @__PURE__ */ jsx(ChatInlineDisplay, {
-				display: inlineDisplay,
-				renderInlineDisplay
-			});
-			return /* @__PURE__ */ jsx(ChatCodeBlock, {
-				className,
-				texts,
-				children
-			});
-		}
-	}), [
-		inline,
-		isUser,
-		onFileOpen,
-		onInlineTokenClick,
-		renderInlineDisplay,
-		texts
-	]);
-	return /* @__PURE__ */ jsx(inline ? "span" : "div", {
-		className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"),
-		children: /* @__PURE__ */ jsx(ReactMarkdown, {
-			skipHtml: true,
-			remarkPlugins,
-			components: markdownComponents,
-			children: trimMarkdown(text)
+		children: /* @__PURE__ */ jsx(WrapperTag, {
+			className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"),
+			children: /* @__PURE__ */ jsx(ReactMarkdown, {
+				skipHtml: true,
+				remarkPlugins,
+				components: CHAT_MESSAGE_MARKDOWN_COMPONENTS,
+				urlTransform: transformChatResourceHref,
+				children: trimMarkdown(text)
+			})
 		})
 	});
 }
@@ -3451,109 +3773,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 +3852,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 +3896,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 +3979,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 +3996,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 +4008,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 +4065,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 +4097,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 +4138,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 +4149,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 +4185,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 = {
@@ -4077,6 +4392,9 @@ function readVisibleLineNumber(line) {
 	const value = line.newLineNumber ?? line.oldLineNumber;
 	return typeof value === "number" ? String(value) : "";
 }
+function isTargetLine(line, targetLine) {
+	return typeof targetLine === "number" && (line.newLineNumber ?? line.oldLineNumber) === targetLine;
+}
 function readLineKey(prefix, line, index) {
 	return `${prefix}-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`;
 }
@@ -4120,25 +4438,34 @@ function getCodeRowTone(line) {
 	if (line.kind === "add") return "bg-emerald-50 text-emerald-950";
 	return "bg-card text-foreground";
 }
-function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth }) {
+function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth, target }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-file-line-number-cell": "true",
 		style: layout === "compact" ? {
 			width: lineNumberColumnWidth,
 			minWidth: lineNumberColumnWidth
 		} : void 0,
-		className: cn(FILE_LINE_NUMBER_CELL_CLASS_NAME, layout === "compact" ? "sticky left-0 z-[1]" : "w-full shrink-0", getLineNumberTone(line)),
+		className: cn(FILE_LINE_NUMBER_CELL_CLASS_NAME, layout === "compact" ? "sticky left-0 z-[1]" : "w-full shrink-0", getLineNumberTone(line), target ? "bg-gray-200 font-medium text-gray-950" : null),
 		children: readVisibleLineNumber(line)
 	});
 }
-function FileOperationCodeCell({ language, line }) {
+function FileOperationCodeCell({ language, line, target, targetColumn, targetRef }) {
 	const highlightedCode = useMemo(() => chatCodeSyntaxHighlighter.highlight(line.text || " ", language), [language, line.text]);
-	return /* @__PURE__ */ jsx("span", {
+	const visibleTargetColumn = typeof targetColumn === "number" && Number.isSafeInteger(targetColumn) && targetColumn > 0 ? Math.min(targetColumn, line.text.length + 1) : null;
+	return /* @__PURE__ */ jsxs("span", {
+		ref: visibleTargetColumn ? void 0 : targetRef,
 		"data-file-code-row": "true",
 		"data-file-code-language": highlightedCode.language,
 		"data-highlighted": highlightedCode.highlighted ? "true" : "false",
-		className: cn("chat-file-code-syntax hljs block min-w-0 flex-1 whitespace-pre px-2.5", readLanguageClassName(highlightedCode.language), getCodeRowTone(line)),
-		dangerouslySetInnerHTML: { __html: highlightedCode.html }
+		"data-file-target-column": visibleTargetColumn ?? void 0,
+		className: cn("chat-file-code-syntax hljs relative block min-w-0 flex-1 whitespace-pre px-2.5", readLanguageClassName(highlightedCode.language), getCodeRowTone(line), target ? "bg-gray-100/90" : null),
+		children: [/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: highlightedCode.html } }), visibleTargetColumn ? /* @__PURE__ */ jsx("span", {
+			ref: targetRef,
+			"aria-hidden": "true",
+			"data-file-target-caret": "true",
+			className: "pointer-events-none absolute inset-y-0 w-px bg-primary",
+			style: { left: `calc(0.625rem + ${visibleTargetColumn - 1}ch)` }
+		}) : null]
 	});
 }
 function FileOperationLineRow({ language, line, showLineNumbers, lineNumberColumnWidth }) {
@@ -4155,11 +4482,22 @@ function FileOperationLineRow({ language, line, showLineNumbers, lineNumberColum
 		})]
 	});
 }
-function FileOperationWorkspaceSurface({ block }) {
+function FileOperationWorkspaceSurface({ block, targetColumn, targetLine }) {
 	const showLineNumbers = readHasBlockLineNumbers(block);
 	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
 	const codeColumnWidth = readCodeColumnWidth(block);
 	const language = readBlockLanguage(block);
+	const targetRef = useRef(null);
+	useLayoutEffect(() => {
+		targetRef.current?.scrollIntoView({
+			block: "center",
+			inline: targetColumn ? "center" : "nearest"
+		});
+	}, [
+		block,
+		targetColumn,
+		targetLine
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-file-code-surface": "true",
 		"data-file-code-surface-layout": "workspace",
@@ -4174,7 +4512,8 @@ function FileOperationWorkspaceSurface({ block }) {
 			children: [block.lines.map((line, index) => /* @__PURE__ */ jsx(FileOperationLineNumberCell, {
 				layout: "workspace",
 				line,
-				lineNumberColumnWidth
+				lineNumberColumnWidth,
+				target: isTargetLine(line, targetLine)
 			}, readLineKey("gutter", line, index))), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 border-r border-border bg-muted" })]
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			"data-file-code-canvas": "true",
@@ -4183,20 +4522,32 @@ function FileOperationWorkspaceSurface({ block }) {
 				"data-file-code-stack": "true",
 				className: "min-w-full",
 				style: { minWidth: codeColumnWidth },
-				children: block.lines.map((line, index) => /* @__PURE__ */ jsx("div", {
-					"data-file-code-canvas-row": "true",
-					className: FILE_ROW_CLASS_NAME,
-					children: /* @__PURE__ */ jsx(FileOperationCodeCell, {
-						language,
-						line
-					})
-				}, readLineKey("code", line, index)))
+				children: block.lines.map((line, index) => {
+					const target = isTargetLine(line, targetLine);
+					return /* @__PURE__ */ jsx("div", {
+						"data-file-code-canvas-row": "true",
+						"data-file-target-line": target ? "true" : void 0,
+						"aria-current": target ? "location" : void 0,
+						className: FILE_ROW_CLASS_NAME,
+						children: /* @__PURE__ */ jsx(FileOperationCodeCell, {
+							language,
+							line,
+							target,
+							targetColumn: target ? targetColumn : null,
+							targetRef: target ? targetRef : void 0
+						})
+					}, readLineKey("code", line, index));
+				})
 			}), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-card" })]
 		})]
 	});
 }
-function FileOperationCodeSurface({ block, layout = "compact" }) {
-	if (layout === "workspace") return /* @__PURE__ */ jsx(FileOperationWorkspaceSurface, { block });
+function FileOperationCodeSurface({ block, layout = "compact", targetColumn, targetLine }) {
+	if (layout === "workspace") return /* @__PURE__ */ jsx(FileOperationWorkspaceSurface, {
+		block,
+		targetColumn,
+		targetLine
+	});
 	const showLineNumbers = readHasBlockLineNumbers(block);
 	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
 	const codeColumnWidth = readCodeColumnWidth(block);
@@ -4803,9 +5154,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 +5184,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 +5227,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 +5260,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 +5415,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 +5423,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}`);
 			})
@@ -5134,6 +5458,9 @@ const MAX_SUMMARY_SEGMENTS = 3;
 function isToolCardPart(part) {
 	return part.type === "tool-card";
 }
+function isGroupableToolPart(part) {
+	return part?.type === "reasoning" || part?.type === "tool-card" && !part.card.panelApp;
+}
 function resolveToolActivityFamily(toolName) {
 	const lowered = toolName.toLowerCase();
 	if (lowered === "list_dir") return "directory";
@@ -5212,17 +5539,29 @@ function formatToolActivityGroupLabel(params) {
 	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 collectToolGroupParts(parts, startIndex) {
+	const candidateParts = [];
+	let index = startIndex;
+	let lastToolOffset = -1;
+	while (true) {
+		const candidate = parts[index];
+		if (!isGroupableToolPart(candidate)) break;
+		candidateParts.push(candidate);
+		if (candidate.type === "tool-card") lastToolOffset = candidateParts.length - 1;
+		index += 1;
+	}
+	return {
+		candidateParts,
+		lastToolOffset
+	};
+}
+/** Groups tool cards across reasoning; content and interactive panel apps remain stable boundaries. */
 function groupConsecutiveToolParts(parts, labels) {
 	const blocks = [];
 	let index = 0;
 	while (index < parts.length) {
 		const part = parts[index];
-		if (part.type !== "tool-card") {
+		if (part.type !== "tool-card" || part.card.panelApp) {
 			blocks.push({
 				kind: "part",
 				key: `part-${index}`,
@@ -5233,14 +5572,7 @@ function groupConsecutiveToolParts(parts, labels) {
 			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 { candidateParts, lastToolOffset } = collectToolGroupParts(parts, startIndex);
 		const toolParts = candidateParts.filter(isToolCardPart);
 		if (toolParts.length === 1) {
 			blocks.push({
@@ -5261,9 +5593,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 +5679,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;
@@ -5355,9 +5687,11 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAtta
 			text,
 			role,
 			texts,
+			isStreaming: isInProgress && isLastPart,
 			inlineTokens,
 			onFileOpen,
 			onInlineTokenClick,
+			resolveFileContentUrl,
 			renderInlineDisplay
 		}, `markdown-${index}`);
 	}
@@ -5373,14 +5707,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 +5748,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 +5781,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 +5817,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 +5834,9 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 						onFileOpen,
 						onAttachmentOpen,
 						onInlineTokenClick,
+						resolveFileContentUrl,
+						openToolGroupKeys,
+						onToolActivityOpenChange: handleToolActivityOpenChange,
 						renderInlineDisplay,
 						renderToolAgent,
 						renderPanelAppCard
@@ -5488,6 +5852,9 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 				onFileOpen,
 				onAttachmentOpen,
 				onInlineTokenClick,
+				resolveFileContentUrl,
+				openToolGroupKeys,
+				onToolActivityOpenChange: handleToolActivityOpenChange,
 				renderInlineDisplay,
 				renderToolAgent,
 				renderPanelAppCard,
@@ -5502,6 +5869,9 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 				onFileOpen,
 				onAttachmentOpen,
 				onInlineTokenClick,
+				resolveFileContentUrl,
+				openToolGroupKeys,
+				onToolActivityOpenChange: handleToolActivityOpenChange,
 				renderInlineDisplay,
 				renderToolAgent,
 				renderPanelAppCard
@@ -5520,14 +5890,25 @@ function ChatMessageActionCopy({ message, texts }) {
 		}).filter((text) => !!text && text.trim().length > 0).join("\n\n");
 	}, [message.parts]);
 	const { copied, copy } = useCopyFeedback({ text: messageText });
+	const label = copied ? texts.copiedMessageLabel : texts.copyMessageLabel;
+	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	if (!messageText) return null;
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: () => void copy(),
-		className: "text-muted-foreground hover:text-foreground transition-colors p-1 rounded-md hover:bg-accent flex items-center justify-center",
-		"aria-label": copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
-		title: copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
-		children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delayDuration: 250,
+		children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => void copy(),
+				className: "flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+				"aria-label": label,
+				children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "top",
+			className: "text-xs",
+			children: label
+		})] })
 	});
 }
 //#endregion
@@ -5542,7 +5923,6 @@ const TYPING_TEXT_SHEEN_CSS = `
     background-position: -60% 0;
   }
 }
-
 .nextclaw-chat-typing-indicator__text {
   background-image: linear-gradient(
     100deg,
@@ -5596,16 +5976,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 +5994,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"),
@@ -5638,18 +6059,25 @@ function ChatMessageList({ className, isSending, messages, onAttachmentOpen, onF
 									" · ",
 									message.timestampLabel
 								]
-							}), !isUser ? /* @__PURE__ */ jsx(ChatMessageActionCopy, {
+							}), /* @__PURE__ */ jsx(ChatMessageActionCopy, {
 								message,
 								texts
-							}) : null] })
+							})] })
 						})]
 					}),
 					isUser ? /* @__PURE__ */ jsx(ChatMessageAvatar, { role: message.role }) : null
 				]
 			}, 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]
 	});
 }