@nextclaw/agent-chat-ui 0.3.5 → 0.3.7

package/dist/index.d.ts

@@ -102,6 +102,7 @@ type ChatSkillPickerProps = {
 };
 type ChatInputBarActionsProps = {
   sendError?: string | null;
+  sendErrorDetailsLabel?: string;
   isSending: boolean;
   canStopGeneration: boolean;
   sendDisabled: boolean;
@@ -164,7 +165,13 @@ type ChatFileOperationBlockViewModel = {
   display?: "preview" | "diff";
   caption?: string;
   lines: ChatFileOperationLineViewModel[];
+  fullLines?: ChatFileOperationLineViewModel[];
   rawText?: string;
+  beforeText?: string;
+  afterText?: string;
+  patchText?: string;
+  oldStartLine?: number;
+  newStartLine?: number;
   truncated?: boolean;
 };
 type ChatToolActionViewModel = {
@@ -175,6 +182,20 @@ type ChatToolActionViewModel = {
   label?: string;
   parentSessionId?: string;
 };
+type ChatFileOpenActionViewModel = {
+  path: string;
+  label?: string;
+  viewMode: "preview" | "diff";
+  line?: number;
+  column?: number;
+  rawText?: string;
+  beforeText?: string;
+  afterText?: string;
+  patchText?: string;
+  oldStartLine?: number;
+  newStartLine?: number;
+  fullLines?: ChatFileOperationLineViewModel[];
+};
 type ChatToolPartViewModel = {
   kind: "call" | "result";
   toolName: string;
@@ -262,6 +283,7 @@ type ChatMessageListProps = {
   texts: ChatMessageTexts;
   className?: string;
   onToolAction?: (action: ChatToolActionViewModel) => void;
+  onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
   renderToolAgent?: (agentId: string) => ReactNode;
 };
 //#endregion
@@ -279,6 +301,36 @@ declare const ChatInputBar: _$react.ForwardRefExoticComponent<ChatInputBarProps
 //#region src/components/chat/ui/chat-message-list/chat-message-list.d.ts
 declare function ChatMessageList(props: ChatMessageListProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/chat/ui/chat-message-list/chat-message-markdown.d.ts
+type ChatMessageMarkdownProps = {
+  text: string;
+  role: ChatMessageRole;
+  texts: Pick<ChatMessageTexts, 'copyCodeLabel' | 'copiedCodeLabel'>;
+  inline?: boolean;
+  onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
+};
+declare function ChatMessageMarkdown({
+  text,
+  role,
+  texts,
+  inline,
+  onFileOpen
+}: ChatMessageMarkdownProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation-lines.d.ts
+declare function FileOperationCodeSurface({
+  block,
+  layout
+}: {
+  block: ChatFileOperationBlockViewModel;
+  layout?: "compact" | "workspace";
+}): _$react_jsx_runtime0.JSX.Element;
+declare function FileOperationLinesGrid({
+  block
+}: {
+  block: ChatFileOperationBlockViewModel;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/chat/hooks/use-active-item-scroll.d.ts
 type UseActiveItemScrollParams = {
   containerRef: RefObject<HTMLElement>;
@@ -345,4 +397,4 @@ declare function resolveChatComposerSlashTrigger(nodes: ChatComposerNode[], sele
   end: number;
 } | null;
 //#endregion
-export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolActionViewModel, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
+export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatFileOpenActionViewModel, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, ChatMessageMarkdown, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolActionViewModel, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, FileOperationCodeSurface, FileOperationLinesGrid, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };

package/dist/index.js

@@ -341,6 +341,12 @@ 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",
@@ -348,22 +354,49 @@ function StopIcon() {
 		className: "block h-3 w-3 rounded-[2px] bg-gray-700 shadow-[inset_0_0_0_1px_rgba(17,24,39,0.06)]"
 	});
 }
-function ChatInputBarActions(props) {
-	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canStopGeneration, sendDisabled, stopDisabled, stopHint, sendButtonLabel, stopButtonLabel, 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";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col items-end gap-1",
-		children: [props.sendError?.trim() ? /* @__PURE__ */ jsx("div", {
-			className: "max-w-[420px] text-right text-[11px] text-red-600",
-			children: props.sendError
+		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__ */ jsx("div", {
 			className: "flex items-center gap-2",
-			children: props.isSending ? props.canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
+			children: isSending ? canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
 				size: "icon",
 				variant: "outline",
 				className: "h-8 w-8 rounded-full",
-				"aria-label": props.stopButtonLabel,
-				onClick: () => void props.onStop(),
-				disabled: props.stopDisabled,
+				"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,
@@ -371,7 +404,7 @@ function ChatInputBarActions(props) {
 					size: "icon",
 					variant: "outline",
 					className: "h-8 w-8 rounded-full",
-					"aria-label": props.stopButtonLabel,
+					"aria-label": stopButtonLabel,
 					disabled: true,
 					children: /* @__PURE__ */ jsx(StopIcon, {})
 				}) })
@@ -379,14 +412,14 @@ function ChatInputBarActions(props) {
 				side: "top",
 				children: /* @__PURE__ */ jsx("p", {
 					className: "text-xs",
-					children: props.stopHint
+					children: stopHint
 				})
 			})] }) }) : /* @__PURE__ */ jsx(ChatButton, {
 				size: "icon",
 				className: "h-8 w-8 rounded-full",
-				"aria-label": props.sendButtonLabel,
-				onClick: () => void props.onSend(),
-				disabled: props.sendDisabled,
+				"aria-label": sendButtonLabel,
+				onClick: () => void onSend(),
+				disabled: sendDisabled,
 				children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-5 w-5" })
 			})
 		})]
@@ -2047,7 +2080,26 @@ function resolveSafeHref(href) {
 function isExternalHref(href) {
 	return /^https?:\/\//i.test(href);
 }
-function ChatMessageMarkdown({ text, role, texts, inline = false }) {
+function looksLikeLocalFileHref(href) {
+	return href.startsWith("./") || href.startsWith("../") || href.startsWith("/Users/") || href.startsWith("/home/") || href.startsWith("/tmp/") || href.startsWith("/var/") || /^\/.+\.[A-Za-z0-9_-]+(?::\d+(?::\d+)?)?$/.test(href);
+}
+function parseLocalFileAction(href) {
+	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;
+	return {
+		path: rawPath,
+		label: rawPath.split("/").filter(Boolean).pop() ?? rawPath,
+		viewMode: "preview",
+		...typeof line === "number" ? { line } : {},
+		...typeof column === "number" ? { column } : {}
+	};
+}
+function ChatMessageMarkdown({ text, role, texts, inline = false, onFileOpen }) {
 	const isUser = role === "user";
 	const markdownComponents = useMemo(() => ({
 		p: ({ children }) => inline ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsx("p", { children }),
@@ -2058,9 +2110,17 @@ function ChatMessageMarkdown({ text, role, texts, inline = false }) {
 				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;
+				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
@@ -2110,7 +2170,11 @@ function ChatMessageMarkdown({ text, role, texts, inline = false }) {
 				children
 			});
 		}
-	}), [inline, texts]);
+	}), [
+		inline,
+		onFileOpen,
+		texts
+	]);
 	return /* @__PURE__ */ jsx(inline ? "span" : "div", {
 		className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"),
 		children: /* @__PURE__ */ jsx(ReactMarkdown, {
@@ -2158,7 +2222,7 @@ function ChatInlineTokenBadge({ kind, label, isUser }) {
 		})]
 	});
 }
-function ChatMessageInlineContent({ segments, role, texts }) {
+function ChatMessageInlineContent({ segments, role, texts, onFileOpen }) {
 	const isUser = role === "user";
 	return /* @__PURE__ */ jsx("div", {
 		className: "whitespace-pre-wrap break-words leading-6",
@@ -2176,7 +2240,8 @@ function ChatMessageInlineContent({ segments, role, texts }) {
 				text: segment.text,
 				role,
 				texts,
-				inline: true
+				inline: true,
+				onFileOpen
 			}, `markdown-${index}`);
 		})
 	});
@@ -2568,7 +2633,7 @@ function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
 			ref: scrollRef,
 			onScroll,
 			"data-reasoning-scroll": "true",
-			className: cn("mt-2 w-fit max-w-[500px] max-h-56 overflow-y-auto overscroll-contain rounded-lg custom-scrollbar-amber", isUser ? "bg-primary-700/60" : "bg-gray-100"),
+			className: cn("mt-2 w-fit max-w-[500px] max-h-56 overflow-y-auto rounded-lg custom-scrollbar-amber", isUser ? "bg-primary-700/60" : "bg-gray-100"),
 			children: /* @__PURE__ */ jsx("pre", {
 				className: "min-w-0 whitespace-pre-wrap break-all p-2 text-[11px]",
 				children: text
@@ -2648,15 +2713,15 @@ function ToolCardSessionActionButton({ action, onAction }) {
 function ToolCardHeader({ card, icon: Icon, expanded, canExpand, hideSummary = false, actionSlot, onToggle }) {
 	const summaryPart = hideSummary ? "" : card.summary?.replace(/^(command|path|args|query|input):\s*/i, "") ?? "";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center justify-between px-3 py-2.5 transition-colors bg-transparent", canExpand ? "cursor-pointer hover:bg-amber-100/30" : ""),
+		className: cn("flex items-center gap-3 px-3 py-2.5 transition-colors bg-transparent", canExpand ? "cursor-pointer hover:bg-amber-100/30" : ""),
 		onClick: onToggle,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 font-mono min-w-0 max-w-[calc(100%-80px)] text-amber-950/80",
+			className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden font-mono text-amber-950/80",
 			children: [/* @__PURE__ */ jsx(Icon, {
 				className: "h-4 w-4 text-amber-600/80 shrink-0",
 				strokeWidth: 3
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1.5 min-w-0",
+				className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "font-bold shrink-0 tracking-tight",
 					children: card.toolName
@@ -2664,7 +2729,7 @@ function ToolCardHeader({ card, icon: Icon, expanded, canExpand, hideSummary = f
 					className: "text-amber-300 font-bold select-none shrink-0",
 					children: "›"
 				}), /* @__PURE__ */ jsx("span", {
-					className: "truncate flex-1 min-w-0 font-normal",
+					className: "block min-w-0 flex-1 truncate font-normal",
 					title: summaryPart,
 					children: summaryPart
 				})] })]
@@ -2693,8 +2758,9 @@ function ToolCardHeaderSessionAction({ action, onAction }) {
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation-lines.tsx
-const FILE_ROW_CLASS_NAME = "h-5 font-mono text-[11px] leading-5";
-const FILE_GUTTER_NUMBER_CELL_CLASS_NAME = "sticky left-0 z-[1] flex h-5 items-center justify-center px-2.5 tabular-nums select-none";
+const FILE_TEXT_CLASS_NAME = "font-mono text-[11px] leading-5";
+const FILE_ROW_CLASS_NAME = `h-5 ${FILE_TEXT_CLASS_NAME}`;
+const FILE_LINE_NUMBER_CELL_CLASS_NAME = "flex h-5 items-center justify-center px-2.5 tabular-nums select-none";
 function formatLineNumber(value) {
 	return typeof value === "number" ? String(value) : "";
 }
@@ -2731,6 +2797,22 @@ function getCodeRowTone(line) {
 	if (line.kind === "add") return "bg-emerald-50 text-emerald-950";
 	return "bg-white text-amber-950/80";
 }
+function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth }) {
+	const lineNumberCellClassName = layout === "compact" ? "sticky left-0 z-[1]" : "w-full shrink-0";
+	return /* @__PURE__ */ jsx("span", {
+		"data-file-line-number-cell": "true",
+		style: layout === "compact" ? { width: lineNumberColumnWidth } : void 0,
+		className: cn(FILE_LINE_NUMBER_CELL_CLASS_NAME, lineNumberCellClassName, getLineNumberTone(line)),
+		children: readVisibleLineNumber(line)
+	});
+}
+function FileOperationCodeCell({ line }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-file-code-row": "true",
+		className: cn("block min-w-full whitespace-pre px-2.5", getCodeRowTone(line)),
+		children: line.text || " "
+	});
+}
 function FileOperationLineRow({ line, showLineNumbers, lineNumberColumnWidth }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-file-line-row": "true",
@@ -2739,22 +2821,50 @@ function FileOperationLineRow({ line, showLineNumbers, lineNumberColumnWidth })
 			showLineNumbers,
 			lineNumberColumnWidth
 		}),
-		children: [showLineNumbers ? /* @__PURE__ */ jsx("span", {
-			"data-file-line-number-cell": "true",
-			style: { width: lineNumberColumnWidth },
-			className: cn(FILE_GUTTER_NUMBER_CELL_CLASS_NAME, getLineNumberTone(line)),
-			children: readVisibleLineNumber(line)
-		}) : null, /* @__PURE__ */ jsx("span", {
-			"data-file-code-row": "true",
-			className: cn("block min-w-full whitespace-pre px-2.5", getCodeRowTone(line)),
-			children: line.text || " "
+		children: [showLineNumbers ? /* @__PURE__ */ jsx(FileOperationLineNumberCell, {
+			layout: "compact",
+			line,
+			lineNumberColumnWidth
+		}) : null, /* @__PURE__ */ jsx(FileOperationCodeCell, { line })]
+	});
+}
+function FileOperationWorkspaceSurface({ block }) {
+	const showLineNumbers = readHasBlockLineNumbers(block);
+	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-file-code-surface": "true",
+		"data-file-code-surface-layout": "workspace",
+		className: "flex h-full min-h-full min-w-full bg-white",
+		children: [showLineNumbers ? /* @__PURE__ */ jsxs("div", {
+			"data-file-code-gutter": "true",
+			style: {
+				width: lineNumberColumnWidth,
+				minWidth: lineNumberColumnWidth
+			},
+			className: cn("flex h-full min-h-full shrink-0 flex-col", FILE_TEXT_CLASS_NAME),
+			children: [block.lines.map((line, index) => /* @__PURE__ */ jsx(FileOperationLineNumberCell, {
+				layout: "workspace",
+				line,
+				lineNumberColumnWidth
+			}, readLineKey("gutter", line, index))), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 border-r border-stone-200 bg-stone-100" })]
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			"data-file-code-canvas": "true",
+			className: "flex h-full min-h-full min-w-0 flex-1 flex-col bg-white",
+			children: [block.lines.map((line, index) => /* @__PURE__ */ jsx("div", {
+				"data-file-code-canvas-row": "true",
+				className: FILE_ROW_CLASS_NAME,
+				children: /* @__PURE__ */ jsx(FileOperationCodeCell, { line })
+			}, readLineKey("code", line, index))), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-white" })]
 		})]
 	});
 }
-function FileOperationLinesGrid({ block }) {
+function FileOperationCodeSurface({ block, layout = "compact" }) {
+	if (layout === "workspace") return /* @__PURE__ */ jsx(FileOperationWorkspaceSurface, { block });
 	const showLineNumbers = readHasBlockLineNumbers(block);
 	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
 	return /* @__PURE__ */ jsx("div", {
+		"data-file-code-surface": "true",
+		"data-file-code-surface-layout": "compact",
 		className: "overflow-x-auto custom-scrollbar-amber bg-white",
 		children: block.lines.map((line, index) => /* @__PURE__ */ jsx(FileOperationLineRow, {
 			line,
@@ -2763,6 +2873,12 @@ function FileOperationLinesGrid({ block }) {
 		}, readLineKey("row", line, index)))
 	});
 }
+function FileOperationLinesGrid({ block }) {
+	return /* @__PURE__ */ jsx(FileOperationCodeSurface, {
+		block,
+		layout: "compact"
+	});
+}
 //#endregion
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation.tsx
 function isPreviewBlock(block) {
@@ -2796,6 +2912,20 @@ function renderCaption(caption) {
 		})] }, `${part}-${index}`))
 	});
 }
+function buildFileOpenAction(block) {
+	return {
+		path: block.path,
+		label: block.path.split("/").filter(Boolean).pop() ?? block.path,
+		viewMode: block.display === "diff" ? "diff" : "preview",
+		...block.rawText ? { rawText: block.rawText } : {},
+		...block.beforeText ? { beforeText: block.beforeText } : {},
+		...block.afterText ? { afterText: block.afterText } : {},
+		...block.patchText ? { patchText: block.patchText } : {},
+		...typeof block.oldStartLine === "number" ? { oldStartLine: block.oldStartLine } : {},
+		...typeof block.newStartLine === "number" ? { newStartLine: block.newStartLine } : {},
+		fullLines: block.fullLines ?? block.lines
+	};
+}
 function StickyFileOperationScrollArea({ children, contentVersion, resetKey, className, scrollKind }) {
 	const scrollRef = useRef(null);
 	const { onScroll } = useStickyBottomScroll({
@@ -2810,14 +2940,18 @@ function StickyFileOperationScrollArea({ children, contentVersion, resetKey, cla
 		ref: scrollRef,
 		onScroll,
 		"data-file-scroll-kind": scrollKind,
-		className: cn("overflow-y-auto overscroll-contain bg-white custom-scrollbar-amber", className),
+		className: cn("overflow-y-auto bg-white custom-scrollbar-amber", className),
 		children
 	});
 }
-function FileOperationBlock({ block, showPathRow, isFirst }) {
+function FileOperationBlock({ block, showPathRow, isFirst, onFileOpen }) {
 	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	const previewBlock = isPreviewBlock(block);
 	const showMetaRow = showPathRow || Boolean(block.caption);
+	const handlePathClick = () => {
+		if (!onFileOpen) return;
+		onFileOpen(buildFileOpenAction(block));
+	};
 	return /* @__PURE__ */ jsxs("section", {
 		className: cn("overflow-hidden bg-white", !isFirst && "border-t border-stone-200/80"),
 		children: [
@@ -2829,8 +2963,10 @@ function FileOperationBlock({ block, showPathRow, isFirst }) {
 						delayDuration: 250,
 						children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 							asChild: true,
-							children: /* @__PURE__ */ jsx("div", {
-								className: "truncate whitespace-nowrap font-mono text-[12px] font-medium text-stone-700",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: handlePathClick,
+								className: cn("w-full truncate whitespace-nowrap text-left font-mono text-[12px] font-medium text-stone-700", onFileOpen && "transition-colors hover:text-amber-900 hover:underline"),
 								title: block.path,
 								children: block.path
 							})
@@ -2868,7 +3004,7 @@ function FileOperationBlock({ block, showPathRow, isFirst }) {
 		]
 	});
 }
-function ToolCardFileOperationContent({ card, className }) {
+function ToolCardFileOperationContent({ card, className, onFileOpen }) {
 	const blocks = card.fileOperation?.blocks ?? [];
 	const output = card.output?.trim() ?? "";
 	if (blocks.length === 0 && !output) return null;
@@ -2878,7 +3014,8 @@ function ToolCardFileOperationContent({ card, className }) {
 			return /* @__PURE__ */ jsx(FileOperationBlock, {
 				block,
 				showPathRow: true,
-				isFirst: index === 0
+				isFirst: index === 0,
+				onFileOpen
 			}, block.key);
 		}), output ? /* @__PURE__ */ jsx(StickyFileOperationScrollArea, {
 			resetKey: `output:${card.toolName}:${card.summary ?? "none"}`,
@@ -3074,7 +3211,7 @@ function TerminalExecutionView({ card }) {
 		children: [output, isRunning && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })]
 	}) })] })] });
 }
-function FileOperationView({ card }) {
+function FileOperationView({ card, onFileOpen }) {
 	const output = card.output?.trim() ?? "";
 	const isRunning = card.statusTone === "running";
 	const hasStructuredPreview = Boolean(card.fileOperation?.blocks.length);
@@ -3102,7 +3239,10 @@ function FileOperationView({ card }) {
 		onToggle
 	}), expanded && hasContent && /* @__PURE__ */ jsx(ToolCardContent, {
 		className: "border-t border-amber-200/20 bg-transparent px-0 pt-0 pb-0",
-		children: /* @__PURE__ */ jsx(ToolCardFileOperationContent, { card })
+		children: /* @__PURE__ */ jsx(ToolCardFileOperationContent, {
+			card,
+			onFileOpen
+		})
 	})] });
 }
 function SearchSnippetView({ card }) {
@@ -3181,9 +3321,12 @@ function isSearchTool(name) {
 	const lowered = name.toLowerCase();
 	return lowered === "grep_search" || lowered === "find_files" || lowered.includes("search");
 }
-function ChatToolCard({ card, onToolAction, renderToolAgent }) {
+function ChatToolCard({ card, onToolAction, onFileOpen, renderToolAgent }) {
 	if (isTerminalTool(card.toolName)) return /* @__PURE__ */ jsx(TerminalExecutionView, { card });
-	if (isFileEditTool(card.toolName)) return /* @__PURE__ */ jsx(FileOperationView, { card });
+	if (isFileEditTool(card.toolName)) return /* @__PURE__ */ jsx(FileOperationView, {
+		card,
+		onFileOpen
+	});
 	if (isSearchTool(card.toolName)) return /* @__PURE__ */ jsx(SearchSnippetView, { card });
 	return /* @__PURE__ */ jsx(GenericToolCard, {
 		card,
@@ -3212,7 +3355,7 @@ function ChatUnknownPart(props) {
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message.tsx
 const ChatMessage = memo(function ChatMessage(props) {
-	const { message, texts, onToolAction, renderToolAgent } = props;
+	const { message, texts, onToolAction, onFileOpen, renderToolAgent } = props;
 	const { role } = message;
 	const isUser = role === "user";
 	const isMessageInProgress = message.status === "pending" || message.status === "streaming";
@@ -3225,12 +3368,14 @@ const ChatMessage = memo(function ChatMessage(props) {
 				if (type === "markdown") return /* @__PURE__ */ jsx(ChatMessageMarkdown, {
 					text: part.text,
 					role,
-					texts
+					texts,
+					onFileOpen
 				}, `markdown-${index}`);
 				if (type === "inline-content") return /* @__PURE__ */ jsx(ChatMessageInlineContent, {
 					segments: part.segments,
 					role,
-					texts
+					texts,
+					onFileOpen
 				}, `inline-content-${index}`);
 				if (type === "reasoning") return /* @__PURE__ */ jsx(ChatReasoningBlock, {
 					label: part.label,
@@ -3243,6 +3388,7 @@ const ChatMessage = memo(function ChatMessage(props) {
 					children: /* @__PURE__ */ jsx(ChatToolCard, {
 						card: part.card,
 						onToolAction,
+						onFileOpen,
 						renderToolAgent
 					})
 				}, `tool-${index}`);
@@ -3339,6 +3485,7 @@ function ChatMessageList(props) {
 							message,
 							texts: props.texts,
 							onToolAction: props.onToolAction,
+							onFileOpen: props.onFileOpen,
 							renderToolAgent: props.renderToolAgent
 						}), /* @__PURE__ */ jsx("div", {
 							className: cn("flex items-center gap-2", isUser && "justify-end"),
@@ -3365,4 +3512,4 @@ function ChatMessageList(props) {
 	});
 }
 //#endregion
-export { ChatInputBar, ChatMessageList, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
+export { ChatInputBar, ChatMessageList, ChatMessageMarkdown, FileOperationCodeSurface, FileOperationLinesGrid, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/agent-chat-ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",