@nextclaw/agent-chat-ui 0.6.4 → 0.6.5

package/dist/index.js

@@ -1,5 +1,5 @@
 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";
@@ -12,7 +12,7 @@ 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";
@@ -1625,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);
@@ -1638,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
@@ -1949,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;
@@ -2780,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) {
@@ -2800,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)
 		}
 	};
@@ -2936,6 +2937,114 @@ function ChatInlineDisplay({ display, renderInlineDisplay }) {
 	return /* @__PURE__ */ jsx(ChatInlineDisplayFallback, { display });
 }
 //#endregion
+//#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();
@@ -3042,7 +3151,7 @@ function ChatMessageImagePreview({ alt, expandLabel, closeLabel, sizeLabel, src
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/utils/chat-local-resource.utils.ts
-const SAFE_LINK_PROTOCOLS = new Set([
+const SAFE_BROWSER_LINK_PROTOCOLS = new Set([
 	"http:",
 	"https:",
 	"mailto:",
@@ -3050,37 +3159,90 @@ const SAFE_LINK_PROTOCOLS = new Set([
 ]);
 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 resolveSafeChatResourceHref(href) {
-	if (!href) return null;
-	if (WINDOWS_ABSOLUTE_PATH_PATTERN.test(href) || isSchemeLessResourceHref(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 isExternalChatResourceHref(href) {
-	return /^https?:\/\//i.test(href);
-}
-function parseChatLocalFileAction(href) {
-	const normalizedHref = href.split("#")[0] ?? href;
-	const [encodedPath, encodedQuery = ""] = normalizedHref.split("?", 2);
+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 ?? normalizedHref);
+		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 isExternalChatResourceHref(href) {
+	return /^https?:\/\//i.test(href);
+}
+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 = new URLSearchParams(encodedQuery).get("viewer");
+	const viewer = fileHref.query.get("viewer");
+	const fragmentPosition = readLinePosition(fileHref.fragment);
 	const lineMatch = /^(.*?)(?::(\d+)(?::(\d+))?)$/.exec(path);
 	const rawPath = lineMatch?.[1] ?? path;
-	const line = lineMatch?.[2] ? Number(lineMatch[2]) : void 0;
-	const column = lineMatch?.[3] ? Number(lineMatch[3]) : void 0;
+	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,
@@ -3180,153 +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, resolveFileContentUrl, renderInlineDisplay }) {
-	const isUser = role === "user";
-	const remarkPlugins = useMemo(() => inlineTokens && inlineTokens.length > 0 ? [remarkGfm, createRemarkInlineTokenPlugin(inlineTokens)] : [remarkGfm], [inlineTokens]);
-	const markdownComponents = useMemo(() => ({
-		p: ({ node, children }) => inline ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsx("p", {
+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: ({ 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, {
+		});
+	},
+	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 = resolveSafeChatResourceHref(href);
-			const external = safeHref ? isExternalChatResourceHref(safeHref) : false;
-			const localFileAction = external ? null : safeHref ? parseChatLocalFileAction(safeHref) : null;
-			const handleClick = (event) => {
-				if (!safeHref) {
-					event.preventDefault();
-					return;
-				}
-				if (!onFileOpen || !localFileAction) return;
-				if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+				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,
-				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: ({ 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 }) => {
-			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
-			});
+		});
+	},
+	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,
-		resolveFileContentUrl,
-		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)
+			})
 		})
 	});
 }
@@ -4213,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"}`;
 }
@@ -4256,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 }) {
@@ -4291,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",
@@ -4310,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",
@@ -4319,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);
@@ -5243,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";
@@ -5321,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}`,
@@ -5342,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({
@@ -5464,6 +5687,7 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAtta
 			text,
 			role,
 			texts,
+			isStreaming: isInProgress && isLastPart,
 			inlineTokens,
 			onFileOpen,
 			onInlineTokenClick,
@@ -5666,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
@@ -5824,10 +6059,10 @@ function ChatMessageList({ className, isSending, layout = "card", messages, onAt
 									" · ",
 									message.timestampLabel
 								]
-							}), !isUser ? /* @__PURE__ */ jsx(ChatMessageActionCopy, {
+							}), /* @__PURE__ */ jsx(ChatMessageActionCopy, {
 								message,
 								texts
-							}) : null] })
+							})] })
 						})]
 					}),
 					isUser ? /* @__PURE__ */ jsx(ChatMessageAvatar, { role: message.role }) : null