@nextclaw/agent-chat-ui 0.6.4 → 0.6.6

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 { AlertTriangle, AppWindow, ArrowLeft, ArrowUp, ArrowUpRight, Bot, Brain, BrainCircuit, CalendarClock, Check, ChevronDown, ChevronRight, ChevronUp, CircleAlert, Code2, Command, Copy, Expand, ExternalLink, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileJson2, FileSpreadsheet, FileText, FileVideo2, Files, Folder, FolderTree, Globe, Globe2, ImageIcon, ListChecks, Loader2, MessageSquare, Minus, PanelsTopLeft, Paperclip, Puzzle, Search, Send, Settings, Sparkles, Star, Terminal, User, Workflow, Wrench, X } from "lucide-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, 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, COMPOSITION_END_TAG, 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";
@@ -394,16 +394,142 @@ const ChatUiPrimitives = {
 	TooltipTrigger: ChatTooltipTrigger
 };
 //#endregion
+//#region src/components/chat/ui/input-surface/chat-input-surface-path-preview.tsx
+function ChatInputSurfacePathPreview({ pathPreview }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lg border border-gray-200 bg-gray-50/70 px-3 py-2.5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs font-medium text-gray-600",
+			children: [/* @__PURE__ */ jsx(Folder, {
+				"aria-hidden": "true",
+				className: "h-4 w-4 text-gray-400"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: pathPreview.rootLabel
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-2",
+			children: pathPreview.segments.map((segment, index) => {
+				const Icon = segment.kind === "directory" ? Folder : File;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "relative flex min-w-0 items-center gap-2 py-1 text-xs text-gray-700",
+					style: { paddingLeft: `${(index + 1) * 18}px` },
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "absolute bottom-1/2 top-[-0.25rem] w-px bg-gray-200",
+							style: { left: `${index * 18 + 7}px` }
+						}),
+						/* @__PURE__ */ jsx(Icon, {
+							"aria-hidden": "true",
+							className: "h-4 w-4 shrink-0 text-gray-400"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: segment.label
+						})
+					]
+				}, `${index}:${segment.label}`);
+			})
+		})]
+	});
+}
+//#endregion
 //#region src/components/chat/ui/input-surface/chat-input-surface-menu.tsx
 const INPUT_SURFACE_PANEL_MAX_WIDTH = 680;
 const INPUT_SURFACE_PANEL_DESKTOP_SHRINK_RATIO = .82;
 const INPUT_SURFACE_PANEL_DESKTOP_MIN_WIDTH = 560;
 const INPUT_SURFACE_PANEL_MAX_HEIGHT = createChatPopoverAvailableHeightLimit("24rem");
 const INPUT_SURFACE_PANEL_MIN_HEIGHT = createChatPopoverAvailableHeightLimit("240px");
+const INPUT_SURFACE_ITEM_ICONS = {
+	back: ArrowLeft,
+	command: Command,
+	file: File,
+	files: Files,
+	folder: Folder,
+	"panel-app": PanelsTopLeft,
+	skill: Puzzle
+};
 function itemMatchesFilter(item, filter) {
 	if (!filter.sectionKeys || filter.sectionKeys.length === 0) return true;
 	return Boolean(item.sectionKey && filter.sectionKeys.includes(item.sectionKey));
 }
+function resolveActiveFilterKey(filters, activeFilterKey) {
+	if (!filters?.length) return null;
+	return filters.some((filter) => filter.key === activeFilterKey) ? activeFilterKey : filters[0].key;
+}
+function InputSurfaceItemIcon({ icon }) {
+	const Icon = INPUT_SURFACE_ITEM_ICONS[icon];
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-input-surface-icon": icon,
+		className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-gray-100 text-gray-500",
+		children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" })
+	});
+}
+function InputSurfaceItemDetails({ item, texts }) {
+	if (!item) return /* @__PURE__ */ jsx("div", {
+		className: "text-xs text-gray-500",
+		children: texts.hintLabel
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [item.subtitle ? /* @__PURE__ */ jsx("span", {
+					className: "inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary",
+					children: item.subtitle
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold text-gray-900",
+					children: item.title
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs leading-5 text-gray-600",
+				children: item.description
+			}),
+			item.pathPreview ? /* @__PURE__ */ jsx(ChatInputSurfacePathPreview, { pathPreview: item.pathPreview }) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-1",
+				children: item.detailLines.map((line) => /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 break-all rounded-md bg-gray-50 px-2 py-1 text-[11px] leading-5 text-gray-600",
+					children: line
+				}, line))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "pt-1 text-[11px] text-gray-500",
+				children: item.hintLabel ?? texts.itemHintLabel
+			})
+		]
+	});
+}
+function handleInputSurfaceMenuKeyDown(params) {
+	const { activeIndex, event, isOpen, items, onOpenChange, onSelectItem, setActiveIndex } = params;
+	if (!isOpen) return false;
+	if (event.key === "Escape") {
+		event.preventDefault();
+		onOpenChange(false);
+		return true;
+	}
+	if (items.length === 0) return false;
+	if (event.key === "ArrowDown") {
+		event.preventDefault();
+		setActiveIndex((index) => (index + 1) % items.length);
+		return true;
+	}
+	if (event.key === "ArrowUp") {
+		event.preventDefault();
+		setActiveIndex((index) => (index - 1 + items.length) % items.length);
+		return true;
+	}
+	if (event.key === "Enter" && !event.shiftKey || event.key === "Tab") {
+		event.preventDefault();
+		onSelectItem(items[activeIndex]);
+		return true;
+	}
+	return false;
+}
 const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref) {
 	const { Popover, PopoverAnchor, PopoverContent } = ChatUiPrimitives;
 	const { elementRef: anchorRef, width: panelWidth } = useElementWidth();
@@ -412,12 +538,9 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 		index: 0,
 		itemsSignature: ""
 	});
-	const { isOpen, isLoading, filterOptions, items, texts, onSelectItem, onOpenChange, onDetailsPointerDown } = props;
+	const { isOpen, isLoading, filterOptions, items, notice, texts, onSelectItem, onOpenChange, onDetailsPointerDown } = props;
 	const [activeFilterKey, setActiveFilterKey] = useState(filterOptions?.[0]?.key ?? null);
-	const resolvedActiveFilterKey = useMemo(() => {
-		if (!filterOptions?.length) return null;
-		return filterOptions.some((filter) => filter.key === activeFilterKey) ? activeFilterKey : filterOptions[0].key;
-	}, [activeFilterKey, filterOptions]);
+	const resolvedActiveFilterKey = useMemo(() => resolveActiveFilterKey(filterOptions, activeFilterKey), [activeFilterKey, filterOptions]);
 	const activeFilter = useMemo(() => filterOptions?.find((filter) => filter.key === resolvedActiveFilterKey) ?? null, [filterOptions, resolvedActiveFilterKey]);
 	const filterViews = useMemo(() => filterOptions?.map((filter) => ({
 		...filter,
@@ -449,31 +572,15 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 		if (!panelWidth) return;
 		return Math.min(panelWidth > INPUT_SURFACE_PANEL_DESKTOP_MIN_WIDTH ? panelWidth * INPUT_SURFACE_PANEL_DESKTOP_SHRINK_RATIO : panelWidth, INPUT_SURFACE_PANEL_MAX_WIDTH);
 	}, [panelWidth]);
-	useImperativeHandle(ref, () => ({ handleKeyDown: (event) => {
-		if (!isOpen) return false;
-		if (event.key === "Escape") {
-			event.preventDefault();
-			onOpenChange(false);
-			return true;
-		}
-		if (visibleItems.length === 0) return false;
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			setActiveIndexForCurrentItems((index) => (index + 1) % visibleItems.length);
-			return true;
-		}
-		if (event.key === "ArrowUp") {
-			event.preventDefault();
-			setActiveIndexForCurrentItems((index) => (index - 1 + visibleItems.length) % visibleItems.length);
-			return true;
-		}
-		if (event.key === "Enter" && !event.shiftKey || event.key === "Tab") {
-			event.preventDefault();
-			onSelectItem(visibleItems[activeIndexInRange]);
-			return true;
-		}
-		return false;
-	} }), [
+	useImperativeHandle(ref, () => ({ handleKeyDown: (event) => handleInputSurfaceMenuKeyDown({
+		activeIndex: activeIndexInRange,
+		event,
+		isOpen,
+		items: visibleItems,
+		onOpenChange,
+		onSelectItem,
+		setActiveIndex: setActiveIndexForCurrentItems
+	}) }), [
 		activeIndexInRange,
 		isOpen,
 		onOpenChange,
@@ -512,105 +619,90 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 				style: { minHeight: INPUT_SURFACE_PANEL_MIN_HEIGHT },
 				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-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", {
-								type: "button",
-								"aria-pressed": isActive,
-								onPointerDown: (event) => event.preventDefault(),
-								onClick: () => handleFilterSelect(key),
-								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-gray-500" : "text-gray-400",
-									children: count
-								})]
-							}, key);
+					children: [
+						!isLoading && filterViews.length > 0 ? /* @__PURE__ */ jsx("div", {
+							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", {
+									type: "button",
+									"aria-pressed": isActive,
+									onPointerDown: (event) => event.preventDefault(),
+									onClick: () => handleFilterSelect(key),
+									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-gray-500" : "text-gray-400",
+										children: count
+									})]
+								}, key);
+							})
+						}) : null,
+						!isLoading && notice ? /* @__PURE__ */ jsxs("div", {
+							className: "mx-2 mb-1.5 flex items-start gap-2 rounded-lg border border-red-200 bg-red-50 px-2.5 py-2 text-xs leading-4 text-red-700",
+							children: [/* @__PURE__ */ jsx(CircleAlert, {
+								"aria-hidden": "true",
+								className: "mt-0.5 h-3.5 w-3.5 shrink-0"
+							}), /* @__PURE__ */ jsx("span", { children: notice.message })]
+						}) : null,
+						/* @__PURE__ */ jsx("div", {
+							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 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-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-1.5 text-xs text-gray-400",
+								children: texts.emptyLabel
+							}) : /* @__PURE__ */ jsx("div", { children: visibleItems.map((item, index) => {
+								const { icon, 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: [
+										icon ? /* @__PURE__ */ jsx(InputSurfaceItemIcon, { icon }) : null,
+										/* @__PURE__ */ jsx("span", {
+											className: "truncate text-xs font-medium",
+											children: title
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "truncate text-xs text-gray-500",
+											children: subtitle
+										})
+									]
+								})] }, key);
+							}) })] })
 						})
-					}) : null, /* @__PURE__ */ jsx("div", {
-						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 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-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-1.5 text-xs text-gray-400",
-							children: texts.emptyLabel
-						}) : /* @__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 select-text overflow-y-auto overscroll-contain p-2.5",
 					onPointerDown: onDetailsPointerDown,
-					children: activeItem ? /* @__PURE__ */ jsxs("div", {
-						className: "space-y-3",
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary",
-									children: activeItem.subtitle
-								}), /* @__PURE__ */ jsx("span", {
-									className: "text-sm font-semibold text-gray-900",
-									children: activeItem.title
-								})]
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-xs leading-5 text-gray-600",
-								children: activeItem.description
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "space-y-1",
-								children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx("div", {
-									className: "min-w-0 break-all rounded-md bg-gray-50 px-2 py-1 text-[11px] leading-5 text-gray-600",
-									children: line
-								}, line))
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "pt-1 text-[11px] text-gray-500",
-								children: activeItem.hintLabel ?? texts.itemHintLabel
-							})
-						]
-					}) : /* @__PURE__ */ jsx("div", {
-						className: "text-xs text-gray-500",
-						children: texts.hintLabel
+					children: /* @__PURE__ */ jsx(InputSurfaceItemDetails, {
+						item: activeItem,
+						texts
 					})
 				})]
 			})
@@ -623,7 +715,7 @@ function getInputSurfaceTriggerIdentity(trigger) {
 	return `${trigger.key}:${trigger.marker}:${trigger.start}`;
 }
 function isInputSurfaceCreateEvent(trigger, reason) {
-	return reason.type === "insert-text" && reason.text === trigger.marker && trigger.query === "" && trigger.end === trigger.start + trigger.marker.length;
+	return reason.type === "insert-text" && trigger.query === "" && trigger.end === trigger.start + trigger.marker.length;
 }
 function resolveInputSurfaceTriggerIdentity(currentIdentity, trigger, reason) {
 	if (!trigger) return null;
@@ -635,21 +727,19 @@ 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 activeTriggerIdentityRef = useRef(null);
 	const [activeTriggerIdentity, setActiveTriggerIdentity] = useState(null);
 	const isOpen = Boolean(inputSurface) && activeTriggerIdentity !== null;
 	const setActiveTrigger = useCallback((identity, trigger) => {
+		activeTriggerIdentityRef.current = identity;
 		setActiveTriggerIdentity(identity);
 		onInputSurfaceTriggerChange?.(identity ? trigger : null);
 	}, [onInputSurfaceTriggerChange]);
 	const handleInputSurfaceSnapshotChange = useCallback((nodes, selection, reason) => {
 		const trigger = resolveChatComposerActiveInputSurfaceTrigger(nodes, selection, triggerSpecs);
-		const nextIdentity = resolveInputSurfaceTriggerIdentity(activeTriggerIdentity, trigger, reason);
+		const nextIdentity = resolveInputSurfaceTriggerIdentity(activeTriggerIdentityRef.current, trigger, reason);
 		setActiveTrigger(nextIdentity, nextIdentity ? trigger : null);
-	}, [
-		activeTriggerIdentity,
-		setActiveTrigger,
-		triggerSpecs
-	]);
+	}, [setActiveTrigger, triggerSpecs]);
 	const handleInputSurfaceKeyDown = useCallback((event) => {
 		return menuRef.current?.handleKeyDown(event) ?? false;
 	}, []);
@@ -670,9 +760,10 @@ function ChatInputSurfaceHost(props) {
 		isLoading: inputSurface.isLoading,
 		filterOptions: inputSurface.filterOptions,
 		items: inputSurface.items,
+		notice: inputSurface.notice,
 		texts: inputSurface.texts,
 		onSelectItem: (item) => {
-			setActiveTrigger(null, null);
+			if (item.selectionBehavior !== "navigate") setActiveTrigger(null, null);
 			onSelectItem(item);
 		},
 		onOpenChange: handleInputSurfaceOpenChange,
@@ -824,42 +915,42 @@ function filterOptions(options, query) {
 		].filter((value) => typeof value === "string" && value.trim().length > 0).join(" ").toLowerCase().includes(keyword);
 	});
 }
-const SKILL_PICKER_MAX_HEIGHT = createChatPopoverAvailableHeightLimit("24rem");
+const SKILL_PICKER_HEIGHT = createChatPopoverAvailableHeightLimit("20rem");
 function ChatInputBarSkillPicker(props) {
 	const { Input, Popover, PopoverContent, PopoverTrigger } = ChatUiPrimitives;
 	const { picker } = props;
 	const listRef = useRef(null);
 	const listId = useId();
 	const [query, setQuery] = useState("");
+	const [activeGroupKey, setActiveGroupKey] = useState(null);
 	const [activeIndex, setActiveIndex] = useState(0);
 	const selectedSet = useMemo(() => new Set(picker.selectedKeys), [picker.selectedKeys]);
 	const selectedCount = picker.selectedKeys.length;
-	const isSearchActive = query.trim().length > 0;
+	const availableGroups = useMemo(() => picker.groups?.filter((group) => group.options.length > 0) ?? [], [picker.groups]);
+	const resolvedActiveGroupKey = availableGroups.some((group) => group.key === activeGroupKey) ? activeGroupKey : null;
 	const groupedOptions = useMemo(() => {
-		if (isSearchActive) return null;
-		const groups = picker.groups?.filter((group) => group.options.length > 0) ?? [];
-		return groups.length > 0 ? groups : null;
-	}, [isSearchActive, picker.groups]);
+		if (availableGroups.length === 0) return null;
+		return (resolvedActiveGroupKey ? availableGroups.filter((group) => group.key === resolvedActiveGroupKey) : availableGroups).map((group) => ({
+			...group,
+			options: filterOptions(group.options, query)
+		})).filter((group) => group.options.length > 0);
+	}, [
+		availableGroups,
+		query,
+		resolvedActiveGroupKey
+	]);
 	const visibleOptions = useMemo(() => {
-		if (groupedOptions) return groupedOptions.flatMap((group) => group.options);
+		if (groupedOptions !== null) return groupedOptions.flatMap((group) => group.options);
 		return filterOptions(picker.options, query);
 	}, [
 		groupedOptions,
 		picker.options,
 		query
 	]);
-	useEffect(() => {
-		setActiveIndex(0);
-	}, [query]);
-	useEffect(() => {
-		setActiveIndex((current) => {
-			if (visibleOptions.length === 0) return 0;
-			return Math.min(current, visibleOptions.length - 1);
-		});
-	}, [visibleOptions.length]);
+	const resolvedActiveIndex = visibleOptions.length === 0 ? 0 : Math.min(activeIndex, visibleOptions.length - 1);
 	useActiveItemScroll({
 		containerRef: listRef,
-		activeIndex,
+		activeIndex: resolvedActiveIndex,
 		itemCount: visibleOptions.length,
 		isEnabled: visibleOptions.length > 0,
 		getItemSelector: (index) => `[data-skill-index="${index}"]`
@@ -875,17 +966,17 @@ function ChatInputBarSkillPicker(props) {
 		if (visibleOptions.length === 0) return;
 		if (event.key === "ArrowDown") {
 			event.preventDefault();
-			setActiveIndex((current) => Math.min(current + 1, visibleOptions.length - 1));
+			setActiveIndex(Math.min(resolvedActiveIndex + 1, visibleOptions.length - 1));
 			return;
 		}
 		if (event.key === "ArrowUp") {
 			event.preventDefault();
-			setActiveIndex((current) => Math.max(current - 1, 0));
+			setActiveIndex(Math.max(resolvedActiveIndex - 1, 0));
 			return;
 		}
 		if (event.key === "Enter") {
 			event.preventDefault();
-			const activeOption = visibleOptions[activeIndex];
+			const activeOption = visibleOptions[resolvedActiveIndex];
 			if (activeOption) onToggleOption(activeOption.key);
 		}
 	};
@@ -912,28 +1003,63 @@ function ChatInputBarSkillPicker(props) {
 		side: "top",
 		align: "start",
 		className: "flex w-[min(360px,calc(100vw-1rem))] flex-col overflow-hidden p-0",
-		style: { maxHeight: SKILL_PICKER_MAX_HEIGHT },
+		style: { height: SKILL_PICKER_HEIGHT },
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "shrink-0 space-y-2 border-b border-border px-4 py-3",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold text-foreground",
-					children: picker.title
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "relative",
-					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" }), /* @__PURE__ */ jsx(Input, {
-						value: query,
-						onChange: (event) => setQuery(event.target.value),
-						onKeyDown: onSearchKeyDown,
-						placeholder: picker.searchPlaceholder,
-						role: "combobox",
-						"aria-controls": listId,
-						"aria-expanded": "true",
-						"aria-autocomplete": "list",
-						"aria-activedescendant": visibleOptions[activeIndex] ? `${listId}-option-${activeIndex}` : void 0,
-						className: "h-8 rounded-lg pl-8 text-xs"
-					})]
-				})]
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "text-sm font-semibold text-foreground",
+						children: picker.title
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" }), /* @__PURE__ */ jsx(Input, {
+							value: query,
+							onChange: (event) => {
+								setQuery(event.target.value);
+								setActiveIndex(0);
+							},
+							onKeyDown: onSearchKeyDown,
+							placeholder: picker.searchPlaceholder,
+							role: "combobox",
+							"aria-controls": listId,
+							"aria-expanded": "true",
+							"aria-autocomplete": "list",
+							"aria-activedescendant": visibleOptions[resolvedActiveIndex] ? `${listId}-option-${resolvedActiveIndex}` : void 0,
+							className: "h-8 rounded-lg pl-8 text-xs"
+						})]
+					}),
+					availableGroups.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-1",
+						"aria-label": picker.allGroupsLabel,
+						children: [{
+							key: null,
+							label: picker.allGroupsLabel,
+							count: picker.options.length
+						}, ...availableGroups.map((group) => ({
+							key: group.key,
+							label: group.label || group.key,
+							count: group.options.length
+						}))].map((group) => {
+							const isActive = group.key === resolvedActiveGroupKey;
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								"aria-pressed": isActive,
+								onMouseDown: (event) => event.preventDefault(),
+								onClick: () => {
+									setActiveGroupKey(group.key);
+									setActiveIndex(0);
+								},
+								className: `inline-flex h-6 items-center gap-1 rounded-md px-2 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground hover:text-foreground"}`,
+								children: [/* @__PURE__ */ jsx("span", { children: group.label }), /* @__PURE__ */ jsx("span", {
+									className: "opacity-70",
+									children: group.count
+								})]
+							}, group.key ?? "all-skills");
+						})
+					}) : null
+				]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: listRef,
@@ -962,7 +1088,7 @@ function ChatInputBarSkillPicker(props) {
 							const index = visibleIndex;
 							visibleIndex += 1;
 							const isSelected = selectedSet.has(option.key);
-							const isActive = index === activeIndex;
+							const isActive = index === resolvedActiveIndex;
 							return /* @__PURE__ */ jsxs("div", {
 								id: `${listId}-option-${index}`,
 								role: "option",
@@ -1316,11 +1442,18 @@ function buildTokenClassName(tokenKind) {
 	].join(" ");
 }
 function ChatComposerTokenChip({ label, tokenKind }) {
+	const isWorkspaceReference = tokenKind === "workspace_file" || tokenKind === "workspace_directory";
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: tokenKind === "file" ? "inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-md bg-card text-muted-foreground ring-1 ring-border" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70",
 		children: tokenKind === "file" ? /* @__PURE__ */ jsx(ImageIcon, {
 			"aria-hidden": "true",
 			className: "h-3 w-3"
+		}) : tokenKind === "workspace_file" ? /* @__PURE__ */ jsx(FileText, {
+			"aria-hidden": "true",
+			className: "h-3 w-3"
+		}) : tokenKind === "workspace_directory" ? /* @__PURE__ */ jsx(Folder, {
+			"aria-hidden": "true",
+			className: "h-3 w-3"
 		}) : tokenKind === "panel_app" ? /* @__PURE__ */ jsx(AppWindow, {
 			"aria-hidden": "true",
 			className: "h-3 w-3"
@@ -1329,7 +1462,7 @@ function ChatComposerTokenChip({ label, tokenKind }) {
 			className: "h-3 w-3"
 		})
 	}), /* @__PURE__ */ jsx("span", {
-		className: tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-foreground" : "truncate",
+		className: tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-foreground" : isWorkspaceReference ? "max-w-[16rem] truncate" : "truncate",
 		children: label
 	})] });
 }
@@ -1424,6 +1557,7 @@ function $isChatComposerTokenNode(node) {
 }
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-editor-state.ts
+const CHAT_COMPOSER_EXTERNAL_UPDATE_TAG = "nextclaw-chat-composer-external-update";
 function getComposerLeafDescriptors() {
 	const root = $getRoot();
 	const paragraph = root.getFirstChild();
@@ -1625,12 +1759,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);
-	});
+	}, { tag: preserveDomSelection ? [CHAT_COMPOSER_EXTERNAL_UPDATE_TAG, SKIP_DOM_SELECTION_TAG] : CHAT_COMPOSER_EXTERNAL_UPDATE_TAG });
 }
-function syncLexicalSelectionFromChatComposerSelection(editor, selection) {
+function syncLexicalSelectionFromChatComposerSelection(editor, selection, preserveDomSelection = false) {
 	editor.update(() => {
 		const nextSelection = $createRangeSelection();
 		const anchor = buildSelectionPointFromOffset(selection.start);
@@ -1638,7 +1772,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);
-	});
+	}, { tag: preserveDomSelection ? [CHAT_COMPOSER_EXTERNAL_UPDATE_TAG, SKIP_DOM_SELECTION_TAG] : CHAT_COMPOSER_EXTERNAL_UPDATE_TAG });
 }
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-operations.ts
@@ -1707,19 +1841,6 @@ function insertInputSurfaceItemIntoChatComposer(params) {
 function getChatComposerNodesSignature(nodes) {
 	return nodes.map((node) => node.type === "text" ? `text:${node.text}` : `token:${node.tokenKind}:${node.tokenKey}:${node.label}`).join("");
 }
-function replaceChatComposerSelectionWithText(params) {
-	const { nodes, selection, text } = params;
-	const documentLength = getDocumentLength(nodes);
-	const [selectionStart, selectionEnd] = selection ? [Math.min(selection.start, selection.end), Math.max(selection.start, selection.end)] : [documentLength, documentLength];
-	const nextOffset = selectionStart + text.length;
-	return {
-		nodes: replaceChatComposerRange(nodes, selectionStart, selectionEnd, [createChatComposerTextNode(text)]),
-		selection: {
-			start: nextOffset,
-			end: nextOffset
-		}
-	};
-}
 function insertFileTokenIntoChatComposer(params) {
 	const { label, nodes, selection, tokenKey } = params;
 	return insertToken({
@@ -1766,93 +1887,43 @@ function syncSelectedSkillsIntoChatComposer(params) {
 		selection
 	};
 }
-function deleteChatComposerContent(params) {
-	const { direction, nodes, selection: currentSelection } = params;
-	const documentLength = getDocumentLength(nodes);
-	const [selectionStart, selectionEnd] = currentSelection ? [Math.min(currentSelection.start, currentSelection.end), Math.max(currentSelection.start, currentSelection.end)] : [documentLength, documentLength];
-	let rangeStart = selectionStart;
-	let rangeEnd = selectionEnd;
-	if (rangeStart === rangeEnd) if (direction === "backward" && rangeStart > 0) rangeStart -= 1;
-	else if (direction === "forward" && rangeEnd < documentLength) rangeEnd += 1;
-	else return {
-		nodes: normalizeChatComposerNodes(nodes),
-		selection: {
-			start: rangeStart,
-			end: rangeEnd
-		}
-	};
-	return {
-		nodes: replaceChatComposerRange(nodes, rangeStart, rangeEnd, []),
-		selection: {
-			start: rangeStart,
-			end: rangeStart
-		}
-	};
-}
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-controller.ts
+function deleteAdjacentChatComposerToken(event) {
+	if (event.key !== "Backspace" && event.key !== "Delete") return false;
+	const selection = $getSelection();
+	if ($isRangeSelection(selection) && !selection.isCollapsed()) return false;
+	let candidate = null;
+	if ($isRangeSelection(selection)) {
+		const { anchor } = selection;
+		const anchorNode = anchor.getNode();
+		if (anchor.type === "element" && $isElementNode(anchorNode)) {
+			const candidateIndex = event.key === "Backspace" ? anchor.offset - 1 : anchor.offset;
+			candidate = anchorNode.getChildAtIndex(candidateIndex);
+		} else if (event.key === "Backspace" && anchor.offset === 0) candidate = anchorNode.getPreviousSibling();
+		else if (event.key === "Delete" && anchor.offset === anchorNode.getTextContentSize()) candidate = anchorNode.getNextSibling();
+	} else if (event.key === "Backspace") {
+		const paragraph = $getRoot().getFirstChild();
+		candidate = $isElementNode(paragraph) ? paragraph.getLastChild() : null;
+	}
+	if ($isTextNode(candidate) && candidate.getTextContentSize() === 0) candidate = event.key === "Backspace" ? candidate.getPreviousSibling() : candidate.getNextSibling();
+	if (!$isChatComposerTokenNode(candidate)) return false;
+	event.preventDefault();
+	candidate.remove();
+	return true;
+}
 function resolveLexicalComposerKeyboardAction(params) {
 	const { canStopGeneration, isComposing, isSending, key, shiftKey } = params;
-	if (key === "Escape") {
-		if (isSending && canStopGeneration) return { type: "stop-generation" };
-		return { type: "noop" };
-	}
-	if (key === "Enter" && shiftKey) return { type: "insert-line-break" };
-	if (key === "Enter") return { type: "send-message" };
-	if (!isComposing && (key === "Backspace" || key === "Delete")) return {
-		type: "delete-content",
-		direction: key === "Backspace" ? "backward" : "forward"
-	};
+	if (isComposing) return { type: "noop" };
+	if (key === "Escape") return isSending && canStopGeneration ? { type: "stop-generation" } : { type: "noop" };
+	if (key === "Enter" && !shiftKey) return { type: "send-message" };
 	return { type: "noop" };
 }
-function getChatComposerContentSignature(nodes) {
-	return JSON.stringify(nodes.map((node) => node.type === "text" ? {
-		text: node.text,
-		type: node.type
-	} : {
-		label: node.label,
-		tokenKey: node.tokenKey,
-		tokenKind: node.tokenKind,
-		type: node.type
-	}));
-}
-function handleLexicalComposerBeforeInput(params) {
-	const { disabled, event, isComposing, publishSnapshot, snapshotReader } = params;
-	const nativeEvent = event.nativeEvent;
-	const shouldInsertText = nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertReplacementText";
-	if (disabled || isComposing || nativeEvent.isComposing || !shouldInsertText || !nativeEvent.data) return;
-	event.preventDefault();
-	publishSnapshot(replaceChatComposerSelectionWithText({
-		nodes: snapshotReader().nodes,
-		selection: snapshotReader().selection,
-		text: nativeEvent.data
-	}), { inputSurfaceReason: {
-		type: "insert-text",
-		text: nativeEvent.data
-	} });
-}
-function handleLexicalComposerCompositionEnd(params) {
-	const { compositionStartSnapshot, data, fallbackSnapshot, publishSnapshot, snapshotReader } = params;
-	const currentSnapshot = snapshotReader();
-	const editorSnapshot = fallbackSnapshot();
-	const baseSnapshot = compositionStartSnapshot ?? currentSnapshot;
-	publishSnapshot(getChatComposerContentSignature(editorSnapshot.nodes) !== getChatComposerContentSignature(baseSnapshot.nodes) ? editorSnapshot : data.length > 0 ? replaceChatComposerSelectionWithText({
-		nodes: baseSnapshot.nodes,
-		selection: baseSnapshot.selection,
-		text: data
-	}) : editorSnapshot, {
-		forcePublish: true,
-		inputSurfaceReason: {
-			type: "insert-text",
-			text: data
-		}
-	});
-}
 function handleLexicalComposerKeyboardCommand(params) {
-	const { actions, nativeEvent, publishSnapshot, snapshot } = params;
+	const { actions, isComposing, nativeEvent } = params;
 	const action = resolveLexicalComposerKeyboardAction({
 		canStopGeneration: actions.canStopGeneration,
-		isComposing: nativeEvent.isComposing,
+		isComposing,
 		isSending: actions.isSending,
 		key: nativeEvent.key,
 		shiftKey: nativeEvent.shiftKey
@@ -1862,26 +1933,9 @@ function handleLexicalComposerKeyboardCommand(params) {
 		case "stop-generation":
 			actions.onStop();
 			return true;
-		case "insert-line-break":
-			publishSnapshot(replaceChatComposerSelectionWithText({
-				nodes: snapshot.nodes,
-				selection: snapshot.selection,
-				text: "\n"
-			}), { inputSurfaceReason: {
-				type: "insert-text",
-				text: "\n"
-			} });
-			return true;
 		case "send-message":
 			actions.onSend();
 			return true;
-		case "delete-content":
-			publishSnapshot(deleteChatComposerContent({
-				direction: action.direction,
-				nodes: snapshot.nodes,
-				selection: snapshot.selection
-			}), { inputSurfaceReason: { type: "delete-content" } });
-			return true;
 		case "noop": return false;
 	}
 }
@@ -1895,13 +1949,10 @@ function getChatComposerDocumentLength(nodes) {
 }
 var ChatComposerLexicalOwner = class {
 	constructor() {
-		this.isApplyingExternalUpdateRef = createMutableRef(false);
-		this.isComposingRef = createMutableRef(false);
 		this.pendingOwnerSignatureRef = createMutableRef(null);
 		this.pendingSelectionRef = createMutableRef(null);
 		this.selectionRef = createMutableRef(null);
 		this.shouldFocusAfterSyncRef = createMutableRef(false);
-		this.compositionStartSnapshotRef = createMutableRef(null);
 		this.editorSignatureRef = createMutableRef("");
 		this.lastPublishedSignatureRef = createMutableRef("");
 		this.pendingInputSurfaceReasonRef = createMutableRef(null);
@@ -1912,14 +1963,17 @@ var ChatComposerLexicalOwner = class {
 		};
 		this.bindEditor = (editor) => {
 			this.editor = editor;
+			const signature = getChatComposerNodesSignature(readChatComposerSnapshotFromEditorState(editor.getEditorState()).nodes);
+			this.editorSignatureRef.current = signature;
+			this.lastPublishedSignatureRef.current = signature;
 			return () => {
 				if (this.editor === editor) this.editor = null;
 			};
 		};
 		this.registerEditorListeners = (editor) => {
-			return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+			return mergeRegister(editor.registerUpdateListener(({ editorState, tags }) => {
 				const runtime = this.getRuntime();
-				this.handleEditorUpdate(editorState, runtime.callbacks);
+				this.handleEditorUpdate(editorState, runtime.callbacks, tags);
 			}), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
 				const runtime = this.getRuntime();
 				this.handleSelectionChange(editor, runtime.callbacks);
@@ -1932,13 +1986,12 @@ var ChatComposerLexicalOwner = class {
 				return this.handleKeyDown({
 					actions: runtime.actions,
 					callbacks: runtime.callbacks,
-					event,
-					fallbackNodes: runtime.fallbackNodes
+					event
 				});
 			}, COMMAND_PRIORITY_HIGH));
 		};
 		this.syncExternalState = (editor, nodes) => {
-			if (this.isComposingRef.current) return;
+			if (editor.isComposing()) return;
 			const nextSignature = getChatComposerNodesSignature(nodes);
 			const pendingSelection = this.pendingSelectionRef.current;
 			const pendingOwnerSignature = this.pendingOwnerSignatureRef.current;
@@ -1948,12 +2001,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);
 				this.editorSignatureRef.current = nextSignature;
 				this.lastPublishedSignatureRef.current = nextSignature;
-			} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection);
+				syncLexicalEditorFromChatComposerState(editor, nodes, pendingSelection, preserveDomSelection);
+			} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection, preserveDomSelection);
 			if (pendingSelection) {
 				this.selectionRef.current = pendingSelection;
 				this.pendingSelectionRef.current = null;
@@ -1974,12 +2027,11 @@ var ChatComposerLexicalOwner = class {
 			const { editor } = this;
 			this.pendingOwnerSignatureRef.current = signature;
 			if (editor) {
-				this.startApplyingExternalUpdate();
-				syncLexicalEditorFromChatComposerState(editor, snapshot.nodes, snapshot.selection);
 				this.editorSignatureRef.current = signature;
+				syncLexicalEditorFromChatComposerState(editor, snapshot.nodes, snapshot.selection);
 			}
 			callbacks.onInputSurfaceSnapshotChange?.(snapshot.nodes, snapshot.selection, options?.inputSurfaceReason ?? { type: "programmatic" });
-			if (options?.forcePublish || signature !== this.lastPublishedSignatureRef.current) {
+			if (signature !== this.lastPublishedSignatureRef.current) {
 				this.lastPublishedSignatureRef.current = signature;
 				callbacks.onNodesChange(snapshot.nodes);
 			}
@@ -2004,11 +2056,10 @@ var ChatComposerLexicalOwner = class {
 			this.pendingSelectionRef.current = targetSelection;
 			editor.getRootElement()?.focus({ preventScroll: true });
 			if (nodes) {
-				this.startApplyingExternalUpdate();
 				const signature = getChatComposerNodesSignature(nodes);
-				syncLexicalEditorFromChatComposerState(editor, nodes, targetSelection);
 				this.editorSignatureRef.current = signature;
 				this.lastPublishedSignatureRef.current = signature;
+				syncLexicalEditorFromChatComposerState(editor, nodes, targetSelection);
 			} else syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
 			editor.focus(() => {
 				syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
@@ -2068,55 +2119,35 @@ var ChatComposerLexicalOwner = class {
 				}
 			};
 		};
-		this.handleBeforeInput = (params) => {
-			const { disabled, event } = params;
-			const { callbacks, fallbackNodes } = this.getRuntime();
-			handleLexicalComposerBeforeInput({
-				disabled,
-				event,
-				isComposing: this.isComposingRef.current,
-				publishSnapshot: (snapshot, options) => this.publishSnapshot(snapshot, callbacks, options),
-				snapshotReader: () => this.readComposerSnapshot(fallbackNodes)
-			});
-		};
-		this.handleCompositionStart = () => {
-			const { fallbackNodes } = this.getRuntime();
-			this.compositionStartSnapshotRef.current = this.readComposerSnapshot(fallbackNodes);
-			this.isComposingRef.current = true;
-		};
-		this.handleCompositionEnd = (params) => {
-			const { data } = params;
-			const { callbacks, fallbackNodes } = this.getRuntime();
-			this.isComposingRef.current = false;
-			handleLexicalComposerCompositionEnd({
-				compositionStartSnapshot: this.compositionStartSnapshotRef.current,
-				data,
-				fallbackSnapshot: () => this.readComposerSnapshot(fallbackNodes),
-				publishSnapshot: (snapshot, options) => this.publishSnapshot(snapshot, callbacks, options),
-				snapshotReader: () => this.readComposerSnapshot(fallbackNodes)
-			});
-			this.compositionStartSnapshotRef.current = null;
-		};
 		this.handleKeyDown = (params) => {
-			const { actions, callbacks, event, fallbackNodes } = params;
-			if (event.key.length === 1 && !event.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey) this.pendingInputSurfaceReasonRef.current = {
+			const { actions, callbacks, event } = params;
+			const isComposing = event.isComposing || (this.editor?.isComposing() ?? false);
+			if (event.key.length === 1 && !isComposing && !event.altKey && !event.ctrlKey && !event.metaKey) this.pendingInputSurfaceReasonRef.current = {
 				type: "insert-text",
 				text: event.key
 			};
-			const snapshot = this.readComposerSnapshot(fallbackNodes);
-			if (callbacks.onInputSurfaceKeyDown?.(event)) return true;
+			else if (!isComposing && (event.key === "Backspace" || event.key === "Delete")) this.pendingInputSurfaceReasonRef.current = { type: "delete-content" };
+			else if (!isComposing && event.key === "Enter" && event.shiftKey) this.pendingInputSurfaceReasonRef.current = {
+				type: "insert-text",
+				text: "\n"
+			};
+			if (callbacks.onInputSurfaceKeyDown?.(event)) {
+				this.pendingInputSurfaceReasonRef.current = null;
+				return true;
+			}
+			if (!isComposing && deleteAdjacentChatComposerToken(event)) return true;
 			return handleLexicalComposerKeyboardCommand({
 				actions,
-				nativeEvent: event,
-				publishSnapshot: (nextSnapshot, options) => this.publishSnapshot(nextSnapshot, callbacks, options),
-				snapshot
+				isComposing,
+				nativeEvent: event
 			});
 		};
-		this.handleEditorUpdate = (editorState, callbacks) => {
+		this.handleEditorUpdate = (editorState, callbacks, tags) => {
 			const snapshot = readChatComposerSnapshotFromEditorState(editorState);
 			const signature = getChatComposerNodesSignature(snapshot.nodes);
+			const expectedExternalSignature = this.editorSignatureRef.current;
 			this.editorSignatureRef.current = signature;
-			if (this.isApplyingExternalUpdateRef.current || this.isComposingRef.current) return;
+			if (tags.has("nextclaw-chat-composer-external-update") && signature === expectedExternalSignature || this.editor?.isComposing() && !tags.has(COMPOSITION_END_TAG)) return;
 			this.selectionRef.current = snapshot.selection;
 			callbacks.onInputSurfaceSnapshotChange?.(snapshot.nodes, snapshot.selection, this.consumeInputSurfaceReason() ?? { type: "sync" });
 			if (signature === this.lastPublishedSignatureRef.current) return;
@@ -2125,7 +2156,7 @@ var ChatComposerLexicalOwner = class {
 		};
 		this.handleSelectionChange = (editor, callbacks) => {
 			const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
-			if (this.isComposingRef.current) return;
+			if (editor.isComposing()) return;
 			this.selectionRef.current = snapshot.selection;
 			callbacks.onInputSurfaceSnapshotChange?.(snapshot.nodes, snapshot.selection, { type: "selection" });
 		};
@@ -2138,12 +2169,6 @@ var ChatComposerLexicalOwner = class {
 			const { callbacks, fallbackNodes } = this.getRuntime();
 			this.publishSnapshot(createSnapshot(this.readComposerSnapshot(fallbackNodes)), callbacks, options);
 		};
-		this.startApplyingExternalUpdate = () => {
-			this.isApplyingExternalUpdateRef.current = true;
-			requestAnimationFrame(() => {
-				this.isApplyingExternalUpdateRef.current = false;
-			});
-		};
 		this.getRuntime = () => {
 			if (!this.runtime) throw new Error("ChatComposerLexicalOwner runtime has not been configured.");
 			return this.runtime;
@@ -2214,19 +2239,6 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 				children: /* @__PURE__ */ jsx(PlainTextPlugin, {
 					contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
 						className: "min-h-7 max-h-[188px] w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent py-0.5 text-sm leading-6 text-foreground outline-none",
-						onBeforeInput: (event) => {
-							owner.handleBeforeInput({
-								disabled,
-								event
-							});
-						},
-						onCompositionEnd: (event) => {
-							const nativeEvent = event.nativeEvent;
-							owner.handleCompositionEnd({ data: typeof nativeEvent.data === "string" ? nativeEvent.data : "" });
-						},
-						onCompositionStart: () => {
-							owner.handleCompositionStart();
-						},
 						onPaste: (event) => {
 							const files = Array.from(event.clipboardData.files ?? []);
 							if (files.length > 0 && onFilesAdd) {
@@ -2366,7 +2378,13 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSur
 						children: /* @__PURE__ */ jsx(ChatInputSurfaceHost, {
 							inputSurface: resolvedInputSurface,
 							onInputSurfaceTriggerChange: composer.onInputSurfaceTriggerChange,
-							onSelectItem: (item) => composerRef.current?.insertInputSurfaceItem(item, composer.inputSurfaceTriggerSpecs),
+							onSelectItem: (item) => {
+								if (item.selectionBehavior === "navigate") {
+									resolvedInputSurface?.onSelectItem?.(item);
+									return;
+								}
+								composerRef.current?.insertInputSurfaceItem(item, composer.inputSurfaceTriggerSpecs);
+							},
 							triggerSpecs: composer.inputSurfaceTriggerSpecs,
 							children: ({ onInputSurfaceKeyDown, onInputSurfaceOpenChange, onInputSurfaceSnapshotChange }) => /* @__PURE__ */ jsx(ChatInputBarTokenizedComposer, {
 								ref: composerRef,
@@ -2425,6 +2443,7 @@ function ChatMessageAvatar({ role, size = "default" }) {
 function resolveInlineTokenTone(kind) {
 	if (kind === "skill") return "skill";
 	if (kind === "panel_app") return "panel_app";
+	if (kind === "workspace_file" || kind === "workspace_directory") return "workspace";
 	return "default";
 }
 function resolveInlineTokenBadgeClassName(tone, isUser, interactive) {
@@ -2437,10 +2456,16 @@ function resolveInlineTokenIconClassName(tone, isUser) {
 	if (tone === "panel_app") return isUser ? "text-primary-foreground/80" : "text-muted-foreground";
 	return isUser ? "text-primary-foreground/80" : "text-muted-foreground";
 }
-function renderInlineTokenIcon(tone) {
+function renderInlineTokenIcon(tone, kind) {
 	return tone === "panel_app" ? /* @__PURE__ */ jsx(AppWindow, {
 		"aria-hidden": "true",
 		className: "h-3 w-3"
+	}) : kind === "workspace_file" ? /* @__PURE__ */ jsx(FileText, {
+		"aria-hidden": "true",
+		className: "h-3 w-3"
+	}) : kind === "workspace_directory" ? /* @__PURE__ */ jsx(Folder, {
+		"aria-hidden": "true",
+		className: "h-3 w-3"
 	}) : /* @__PURE__ */ jsx(Puzzle, {
 		"aria-hidden": "true",
 		className: "h-3 w-3"
@@ -2452,7 +2477,7 @@ function ChatInlineTokenBadge({ kind, label, isUser, onClick }) {
 	const className = cn("nextclaw-chat-inline-token mx-[2px] inline-flex max-w-full items-center gap-1 align-baseline text-[11px] font-medium", tone === "skill" ? "h-auto rounded-none px-0 py-0" : "h-7 rounded-xl border px-2.5", resolveInlineTokenBadgeClassName(tone, isUser, interactive));
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: cn("inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", resolveInlineTokenIconClassName(tone, isUser)),
-		children: renderInlineTokenIcon(tone)
+		children: renderInlineTokenIcon(tone, kind)
 	}), /* @__PURE__ */ jsx("span", {
 		className: "truncate",
 		children: label
@@ -2780,7 +2805,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 +2825,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 +2961,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 +3175,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 +3183,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 +3366,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)
+			})
 		})
 	});
 }
@@ -4210,8 +4413,10 @@ const FILE_TEXT_CLASS_NAME = "font-mono text-[11px] leading-5";
 const FILE_ROW_CLASS_NAME = `flex h-5 w-full ${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 readVisibleLineNumber(line) {
-	const value = line.newLineNumber ?? line.oldLineNumber;
-	return typeof value === "number" ? String(value) : "";
+	return String(line.newLineNumber ?? line.oldLineNumber ?? "");
+}
+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 +4461,35 @@ 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, targetRef }) {
 	return /* @__PURE__ */ jsx("span", {
+		ref: targetRef,
 		"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 +4506,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 +4536,9 @@ function FileOperationWorkspaceSurface({ block }) {
 			children: [block.lines.map((line, index) => /* @__PURE__ */ jsx(FileOperationLineNumberCell, {
 				layout: "workspace",
 				line,
-				lineNumberColumnWidth
+				lineNumberColumnWidth,
+				target: isTargetLine(line, targetLine),
+				targetRef: !targetColumn && isTargetLine(line, targetLine) ? targetRef : void 0
 			}, 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 +4547,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 && (targetColumn || !showLineNumbers) ? 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 +5483,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 +5564,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 +5597,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 +5712,7 @@ function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onAtta
 			text,
 			role,
 			texts,
+			isStreaming: isInProgress && isLastPart,
 			inlineTokens,
 			onFileOpen,
 			onInlineTokenClick,
@@ -5666,14 +5915,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 +6084,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