@nextclaw/agent-chat-ui 0.6.5 → 0.6.6

package/dist/index.js

@@ -1,18 +1,18 @@
 import * as React 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, SKIP_DOM_SELECTION_TAG, 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();
@@ -1628,7 +1762,7 @@ function writeChatComposerStateToLexicalRoot(nodes, selection) {
 function syncLexicalEditorFromChatComposerState(editor, nodes, selection, preserveDomSelection = false) {
 	editor.update(() => {
 		writeChatComposerStateToLexicalRoot(nodes, selection);
-	}, preserveDomSelection ? { tag: SKIP_DOM_SELECTION_TAG } : void 0);
+	}, { tag: preserveDomSelection ? [CHAT_COMPOSER_EXTERNAL_UPDATE_TAG, SKIP_DOM_SELECTION_TAG] : CHAT_COMPOSER_EXTERNAL_UPDATE_TAG });
 }
 function syncLexicalSelectionFromChatComposerSelection(editor, selection, preserveDomSelection = false) {
 	editor.update(() => {
@@ -1638,7 +1772,7 @@ function syncLexicalSelectionFromChatComposerSelection(editor, selection, preser
 		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);
+	}, { 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,11 @@ 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, preserveDomSelection);
 				this.editorSignatureRef.current = nextSignature;
 				this.lastPublishedSignatureRef.current = nextSignature;
+				syncLexicalEditorFromChatComposerState(editor, nodes, pendingSelection, preserveDomSelection);
 			} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection, preserveDomSelection);
 			if (pendingSelection) {
 				this.selectionRef.current = pendingSelection;
@@ -1975,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);
 			}
@@ -2005,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);
@@ -2069,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;
@@ -2126,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" });
 		};
@@ -2139,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;
@@ -2215,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) {
@@ -2367,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,
@@ -2426,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) {
@@ -2438,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"
@@ -2453,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
@@ -4389,8 +4413,7 @@ 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;
@@ -4438,8 +4461,9 @@ function getCodeRowTone(line) {
 	if (line.kind === "add") return "bg-emerald-50 text-emerald-950";
 	return "bg-card text-foreground";
 }
-function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth, target }) {
+function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth, target, targetRef }) {
 	return /* @__PURE__ */ jsx("span", {
+		ref: targetRef,
 		"data-file-line-number-cell": "true",
 		style: layout === "compact" ? {
 			width: lineNumberColumnWidth,
@@ -4513,7 +4537,8 @@ function FileOperationWorkspaceSurface({ block, targetColumn, targetLine }) {
 				layout: "workspace",
 				line,
 				lineNumberColumnWidth,
-				target: isTargetLine(line, targetLine)
+				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",
@@ -4534,7 +4559,7 @@ function FileOperationWorkspaceSurface({ block, targetColumn, targetLine }) {
 							line,
 							target,
 							targetColumn: target ? targetColumn : null,
-							targetRef: target ? targetRef : void 0
+							targetRef: target && (targetColumn || !showLineNumbers) ? targetRef : void 0
 						})
 					}, readLineKey("code", line, index));
 				})