@nextclaw/agent-chat-ui 0.5.1 → 0.5.2

package/dist/index.js

@@ -5,7 +5,7 @@ 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, ArrowUp, ArrowUpRight, Bot, Brain, BrainCircuit, Check, ChevronDown, ChevronRight, ChevronUp, Code2, Copy, ExternalLink, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileJson2, FileSpreadsheet, FileText, FileVideo2, Globe, Loader2, Minus, Paperclip, Puzzle, Search, Sparkles, Star, Terminal, User, Wrench } from "lucide-react";
+import { AlertTriangle, AppWindow, ArrowUp, ArrowUpRight, Bot, Brain, BrainCircuit, Check, ChevronDown, ChevronRight, ChevronUp, Code2, Copy, ExternalLink, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileJson2, FileSpreadsheet, FileText, FileVideo2, Globe, ImageIcon, Loader2, Minus, Paperclip, Puzzle, Search, Sparkles, Star, Terminal, User, Wrench } from "lucide-react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -30,6 +30,180 @@ import sql from "highlight.js/lib/languages/sql";
 import typescript from "highlight.js/lib/languages/typescript";
 import xml from "highlight.js/lib/languages/xml";
 import yaml from "highlight.js/lib/languages/yaml";
+const CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC = {
+	key: "slash",
+	marker: "/"
+};
+function createComposerNodeId() {
+	return `composer-${Math.random().toString(36).slice(2, 10)}`;
+}
+function createChatComposerTextNode(text = "") {
+	return {
+		id: createComposerNodeId(),
+		type: "text",
+		text
+	};
+}
+function createChatComposerTokenNode(params) {
+	return {
+		id: createComposerNodeId(),
+		type: "token",
+		tokenKind: params.tokenKind,
+		tokenKey: params.tokenKey,
+		label: params.label
+	};
+}
+function getChatComposerNodeLength(node) {
+	return node.type === "text" ? node.text.length : 1;
+}
+function createEmptyChatComposerNodes() {
+	return [createChatComposerTextNode("")];
+}
+function createChatComposerNodesFromText(text) {
+	return [createChatComposerTextNode(text)];
+}
+function normalizeChatComposerNodes(nodes) {
+	const normalized = [];
+	for (const node of nodes) {
+		if (node.type === "text") {
+			if (node.text.length === 0) continue;
+			const previous = normalized[normalized.length - 1];
+			if (previous?.type === "text") {
+				normalized[normalized.length - 1] = {
+					...previous,
+					text: previous.text + node.text
+				};
+				continue;
+			}
+		}
+		normalized.push(node);
+	}
+	if (normalized.length === 0) return createEmptyChatComposerNodes();
+	return normalized;
+}
+function serializeChatComposerDocument(nodes) {
+	return nodes.map((node) => node.type === "text" ? node.text : "").join("");
+}
+function serializeChatComposerPlainText(nodes) {
+	return nodes.filter((node) => node.type === "text").map((node) => node.text).join("");
+}
+function extractChatComposerTokenKeys(nodes, tokenKind) {
+	const keys = [];
+	const keySet = /* @__PURE__ */ new Set();
+	for (const node of nodes) {
+		if (node.type !== "token" || node.tokenKind !== tokenKind || keySet.has(node.tokenKey)) continue;
+		keySet.add(node.tokenKey);
+		keys.push(node.tokenKey);
+	}
+	return keys;
+}
+function buildTrimmedTextEdges(node, nodeStart, rangeStart, rangeEnd) {
+	const prefixLength = Math.max(0, rangeStart - nodeStart);
+	const suffixLength = Math.max(0, nodeStart + node.text.length - rangeEnd);
+	const edges = [];
+	if (prefixLength > 0) edges.push({
+		...node,
+		text: node.text.slice(0, prefixLength)
+	});
+	if (suffixLength > 0) edges.push({
+		...node,
+		text: node.text.slice(node.text.length - suffixLength)
+	});
+	return edges;
+}
+function isNodeOutsideComposerRange(nodeStart, nodeEnd, boundedStart, boundedEnd) {
+	return nodeEnd <= boundedStart || nodeStart >= boundedEnd;
+}
+function appendReplacementBeforeNode(nextNodes, replacement, inserted, nodeStart, boundedEnd) {
+	if (!inserted && nodeStart >= boundedEnd) {
+		nextNodes.push(...replacement);
+		return true;
+	}
+	return inserted;
+}
+function appendTextNodeWithReplacement(nextNodes, node, nodeStart, boundedStart, boundedEnd, replacement, inserted) {
+	const edges = buildTrimmedTextEdges(node, nodeStart, boundedStart, boundedEnd);
+	if (edges[0]) nextNodes.push(edges[0]);
+	let didInsert = inserted;
+	if (!didInsert) {
+		nextNodes.push(...replacement);
+		didInsert = true;
+	}
+	if (edges[1]) nextNodes.push(edges[1]);
+	return didInsert;
+}
+function appendTokenNodeWithReplacement(nextNodes, node, replacement, inserted, boundedStart, nodeStart) {
+	if (!inserted && boundedStart <= nodeStart) {
+		nextNodes.push(...replacement);
+		return true;
+	}
+	nextNodes.push(node);
+	return inserted;
+}
+function replaceChatComposerRange(nodes, start, end, replacement) {
+	const boundedStart = Math.max(0, start);
+	const boundedEnd = Math.max(boundedStart, end);
+	const nextNodes = [];
+	let cursor = 0;
+	let inserted = false;
+	for (const node of nodes) {
+		const nodeLength = getChatComposerNodeLength(node);
+		const nodeStart = cursor;
+		const nodeEnd = cursor + nodeLength;
+		if (isNodeOutsideComposerRange(nodeStart, nodeEnd, boundedStart, boundedEnd)) {
+			inserted = appendReplacementBeforeNode(nextNodes, replacement, inserted, nodeStart, boundedEnd);
+			nextNodes.push(node);
+			cursor = nodeEnd;
+			continue;
+		}
+		if (node.type === "text") inserted = appendTextNodeWithReplacement(nextNodes, node, nodeStart, boundedStart, boundedEnd, replacement, inserted);
+		else inserted = appendTokenNodeWithReplacement(nextNodes, node, replacement, inserted, boundedStart, nodeStart);
+		cursor = nodeEnd;
+	}
+	if (!inserted) nextNodes.push(...replacement);
+	return normalizeChatComposerNodes(nextNodes);
+}
+function removeChatComposerTokenNodes(nodes, predicate) {
+	return normalizeChatComposerNodes(nodes.filter((node) => node.type !== "token" || !predicate(node)));
+}
+function hasTriggerBoundary(prefix, markerStart) {
+	return markerStart === 0 || /\s/.test(prefix[markerStart - 1] ?? "");
+}
+function resolveChatComposerInputSurfaceTrigger(nodes, selection, triggerSpec) {
+	if (!selection || selection.start !== selection.end) return null;
+	const documentText = serializeChatComposerDocument(nodes);
+	const caret = selection.end;
+	const prefix = documentText.slice(0, caret);
+	const markerStart = prefix.lastIndexOf(triggerSpec.marker);
+	if (markerStart < 0 || !hasTriggerBoundary(prefix, markerStart)) return null;
+	const rawQuery = prefix.slice(markerStart + triggerSpec.marker.length);
+	if (/[\s\uFFFC]/.test(rawQuery)) return null;
+	return {
+		key: triggerSpec.key,
+		marker: triggerSpec.marker,
+		query: rawQuery.trim().toLowerCase(),
+		start: markerStart,
+		end: caret
+	};
+}
+function resolveChatComposerActiveInputSurfaceTrigger(nodes, selection, triggerSpecs = [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC]) {
+	let activeTrigger = null;
+	for (const triggerSpec of triggerSpecs) {
+		const trigger = resolveChatComposerInputSurfaceTrigger(nodes, selection, triggerSpec);
+		if (!trigger) continue;
+		if (!activeTrigger || trigger.start > activeTrigger.start) activeTrigger = trigger;
+	}
+	return activeTrigger;
+}
+function resolveChatComposerSlashTrigger(nodes, selection) {
+	const trigger = resolveChatComposerInputSurfaceTrigger(nodes, selection, CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC);
+	return trigger ? {
+		query: trigger.query,
+		start: trigger.start,
+		end: trigger.end
+	} : null;
+}
+//#endregion
 //#region src/components/chat/hooks/use-active-item-scroll.ts
 const defaultGetItemSelector = (index) => `[data-item-index="${index}"]`;
 function useActiveItemScroll(params) {
@@ -220,27 +394,77 @@ const ChatUiPrimitives = {
 	TooltipTrigger: ChatTooltipTrigger
 };
 //#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-slash-menu.tsx
-const SLASH_PANEL_MAX_WIDTH = 680;
-const SLASH_PANEL_DESKTOP_SHRINK_RATIO = .82;
-const SLASH_PANEL_DESKTOP_MIN_WIDTH = 560;
-const SLASH_PANEL_MAX_HEIGHT = createChatPopoverAvailableHeightLimit("24rem");
-const SLASH_PANEL_MIN_HEIGHT = createChatPopoverAvailableHeightLimit("240px");
-function ChatSlashMenu(props) {
+//#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 ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref) {
 	const { Popover, PopoverAnchor, PopoverContent } = ChatUiPrimitives;
 	const { elementRef: anchorRef, width: panelWidth } = useElementWidth();
 	const listRef = useRef(null);
-	const { isOpen, isLoading, items, activeIndex, activeItem, texts, onSelectItem, onOpenChange, onDetailsPointerDown, onSetActiveIndex } = props;
+	const [activeState, setActiveState] = useState({
+		index: 0,
+		itemsSignature: ""
+	});
+	const { isOpen, isLoading, items, texts, onSelectItem, onOpenChange, onDetailsPointerDown } = props;
+	const itemsSignature = useMemo(() => items.map((item) => item.key).join(""), [items]);
+	const hasItemSections = useMemo(() => items.some((item) => Boolean(item.sectionLabel?.trim())), [items]);
+	const activeIndex = activeState.itemsSignature === itemsSignature ? activeState.index : 0;
+	const activeIndexInRange = items.length === 0 ? 0 : Math.min(activeIndex, items.length - 1);
+	const activeItem = items[activeIndexInRange] ?? null;
+	const setActiveIndexForCurrentItems = useCallback((nextIndex) => {
+		setActiveState((currentState) => {
+			const currentIndex = currentState.itemsSignature === itemsSignature ? currentState.index : 0;
+			return {
+				index: typeof nextIndex === "function" ? nextIndex(currentIndex) : nextIndex,
+				itemsSignature
+			};
+		});
+	}, [itemsSignature]);
 	const resolvedWidth = useMemo(() => {
 		if (!panelWidth) return;
-		return Math.min(panelWidth > SLASH_PANEL_DESKTOP_MIN_WIDTH ? panelWidth * SLASH_PANEL_DESKTOP_SHRINK_RATIO : panelWidth, SLASH_PANEL_MAX_WIDTH);
+		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 (items.length === 0) return false;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setActiveIndexForCurrentItems((index) => (index + 1) % items.length);
+			return true;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActiveIndexForCurrentItems((index) => (index - 1 + items.length) % items.length);
+			return true;
+		}
+		if (event.key === "Enter" && !event.shiftKey || event.key === "Tab") {
+			event.preventDefault();
+			onSelectItem(items[activeIndexInRange]);
+			return true;
+		}
+		return false;
+	} }), [
+		activeIndexInRange,
+		isOpen,
+		items,
+		onOpenChange,
+		onSelectItem,
+		setActiveIndexForCurrentItems
+	]);
 	useActiveItemScroll({
 		containerRef: listRef,
-		activeIndex,
+		activeIndex: activeIndexInRange,
 		itemCount: items.length,
 		isEnabled: isOpen && !isLoading,
-		getItemSelector: (index) => `[data-slash-index="${index}"]`
+		getItemSelector: (index) => `[data-input-surface-index="${index}"]`
 	});
 	return /* @__PURE__ */ jsxs(Popover, {
 		open: isOpen,
@@ -249,7 +473,7 @@ function ChatSlashMenu(props) {
 			asChild: true,
 			children: /* @__PURE__ */ jsx("div", {
 				ref: anchorRef,
-				className: "pointer-events-none absolute bottom-full left-3 right-3 h-0"
+				className: "pointer-events-none absolute bottom-0 left-3 right-3 top-0"
 			})
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			side: "top",
@@ -258,46 +482,63 @@ function ChatSlashMenu(props) {
 			className: "z-[70] flex max-w-[calc(100vw-1.5rem)] flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white/95 p-0 shadow-2xl backdrop-blur-md",
 			onOpenAutoFocus: (event) => event.preventDefault(),
 			style: {
-				maxHeight: SLASH_PANEL_MAX_HEIGHT,
+				maxHeight: INPUT_SURFACE_PANEL_MAX_HEIGHT,
 				width: resolvedWidth ? `${resolvedWidth}px` : void 0
 			},
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "grid min-h-0 flex-1 grid-cols-[minmax(220px,300px)_minmax(0,1fr)]",
-				style: { minHeight: SLASH_PANEL_MIN_HEIGHT },
+				style: { minHeight: INPUT_SURFACE_PANEL_MIN_HEIGHT },
 				children: [/* @__PURE__ */ jsx("div", {
 					ref: listRef,
 					role: "listbox",
-					"aria-label": texts.slashSectionLabel,
+					"aria-label": texts.sectionLabel,
 					className: "custom-scrollbar min-h-0 overflow-y-auto overscroll-contain border-r border-gray-200 p-2.5",
 					children: isLoading ? /* @__PURE__ */ jsx("div", {
 						className: "p-2 text-xs text-gray-500",
-						children: texts.slashLoadingLabel
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						children: texts.loadingLabel
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!hasItemSections ? /* @__PURE__ */ jsx("div", {
 						className: "mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
-						children: texts.slashSectionLabel
-					}), items.length === 0 ? /* @__PURE__ */ jsx("div", {
+						children: texts.sectionLabel
+					}) : null, items.length === 0 ? /* @__PURE__ */ jsx("div", {
 						className: "px-2 text-xs text-gray-400",
-						children: texts.slashEmptyLabel
+						children: texts.emptyLabel
 					}) : /* @__PURE__ */ jsx("div", {
 						className: "space-y-1",
 						children: items.map((item, index) => {
-							const isActive = index === activeIndex;
-							return /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								role: "option",
-								"aria-selected": isActive,
-								"data-slash-index": index,
-								onMouseEnter: () => onSetActiveIndex(index),
-								onClick: () => onSelectItem(item),
-								className: `flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"}`,
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "truncate text-xs font-semibold",
-									children: item.title
-								}), /* @__PURE__ */ jsx("span", {
-									className: "truncate text-xs text-gray-500",
-									children: item.subtitle
+							const { key, sectionKey, sectionLabel, title, subtitle } = item;
+							const isActive = index === activeIndexInRange;
+							const previousItem = items[index - 1];
+							return /* @__PURE__ */ jsxs("div", {
+								className: "space-y-1",
+								children: [hasItemSections && Boolean(sectionLabel?.trim()) && previousItem?.sectionKey !== sectionKey ? /* @__PURE__ */ jsx("div", {
+									className: "px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+									children: sectionLabel
+								}) : null, /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": isActive,
+									"data-input-surface-index": index,
+									onPointerMove: (event) => {
+										if (event.pointerType !== "touch") setActiveIndexForCurrentItems(index);
+									},
+									onPointerDown: (event) => {
+										if (event.button > 0) return;
+										event.preventDefault();
+										onSelectItem(item);
+									},
+									onClick: (event) => {
+										if (event.detail === 0) onSelectItem(item);
+									},
+									className: `flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"}`,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "truncate text-xs font-semibold",
+										children: title
+									}), /* @__PURE__ */ jsx("span", {
+										className: "truncate text-xs text-gray-500",
+										children: subtitle
+									})]
 								})]
-							}, item.key);
+							}, key);
 						})
 					})] })
 				}), /* @__PURE__ */ jsx("div", {
@@ -329,17 +570,80 @@ function ChatSlashMenu(props) {
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "pt-1 text-[11px] text-gray-500",
-								children: texts.slashSkillHintLabel
+								children: activeItem.hintLabel ?? texts.itemHintLabel
 							})
 						]
 					}) : /* @__PURE__ */ jsx("div", {
 						className: "text-xs text-gray-500",
-						children: texts.slashHintLabel
+						children: texts.hintLabel
 					})
 				})]
 			})
 		})]
 	});
+});
+//#endregion
+//#region src/components/chat/ui/input-surface/chat-input-surface-host.tsx
+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;
+}
+function resolveInputSurfaceTriggerIdentity(currentIdentity, trigger, reason) {
+	if (!trigger) return null;
+	const nextIdentity = getInputSurfaceTriggerIdentity(trigger);
+	if (currentIdentity === nextIdentity) return currentIdentity;
+	return isInputSurfaceCreateEvent(trigger, reason) ? nextIdentity : null;
+}
+function ChatInputSurfaceHost(props) {
+	const { children, inputSurface, onInputSurfaceTriggerChange, onSelectItem, triggerSpecs = [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC] } = props;
+	const menuRef = useRef(null);
+	const [activeTriggerIdentity, setActiveTriggerIdentity] = useState(null);
+	const isOpen = Boolean(inputSurface) && activeTriggerIdentity !== null;
+	const setActiveTrigger = useCallback((identity, trigger) => {
+		setActiveTriggerIdentity(identity);
+		onInputSurfaceTriggerChange?.(identity ? trigger : null);
+	}, [onInputSurfaceTriggerChange]);
+	const closeInputSurface = useCallback(() => {
+		setActiveTrigger(null, null);
+	}, [setActiveTrigger]);
+	const handleInputSurfaceSnapshotChange = useCallback((nodes, selection, reason) => {
+		const trigger = resolveChatComposerActiveInputSurfaceTrigger(nodes, selection, triggerSpecs);
+		const nextIdentity = resolveInputSurfaceTriggerIdentity(activeTriggerIdentity, trigger, reason);
+		setActiveTrigger(nextIdentity, nextIdentity ? trigger : null);
+	}, [
+		activeTriggerIdentity,
+		setActiveTrigger,
+		triggerSpecs
+	]);
+	const handleInputSurfaceKeyDown = useCallback((event) => {
+		return menuRef.current?.handleKeyDown(event) ?? false;
+	}, []);
+	const handleInputSurfaceOpenChange = useCallback((open) => {
+		if (!open) closeInputSurface();
+	}, [closeInputSurface]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(useMemo(() => ({
+		onInputSurfaceKeyDown: handleInputSurfaceKeyDown,
+		onInputSurfaceOpenChange: handleInputSurfaceOpenChange,
+		onInputSurfaceSnapshotChange: handleInputSurfaceSnapshotChange
+	}), [
+		handleInputSurfaceKeyDown,
+		handleInputSurfaceOpenChange,
+		handleInputSurfaceSnapshotChange
+	])), inputSurface && isOpen ? /* @__PURE__ */ jsx(ChatInputSurfaceMenu, {
+		ref: menuRef,
+		isOpen,
+		isLoading: inputSurface.isLoading,
+		items: inputSurface.items,
+		texts: inputSurface.texts,
+		onSelectItem: (item) => {
+			closeInputSurface();
+			onSelectItem(item);
+		},
+		onOpenChange: handleInputSurfaceOpenChange,
+		onDetailsPointerDown: (event) => event.preventDefault()
+	}, activeTriggerIdentity) : null] });
 }
 //#endregion
 //#region src/components/chat/default-skin/button.tsx
@@ -966,152 +1270,6 @@ function ChatInputBarToolbar({ actions, accessories, selects, skillPicker }) {
 		}), /* @__PURE__ */ jsx(ChatInputBarActions, { ...actions })]
 	});
 }
-function createComposerNodeId() {
-	return `composer-${Math.random().toString(36).slice(2, 10)}`;
-}
-function createChatComposerTextNode(text = "") {
-	return {
-		id: createComposerNodeId(),
-		type: "text",
-		text
-	};
-}
-function createChatComposerTokenNode(params) {
-	return {
-		id: createComposerNodeId(),
-		type: "token",
-		tokenKind: params.tokenKind,
-		tokenKey: params.tokenKey,
-		label: params.label
-	};
-}
-function getChatComposerNodeLength(node) {
-	return node.type === "text" ? node.text.length : 1;
-}
-function createEmptyChatComposerNodes() {
-	return [createChatComposerTextNode("")];
-}
-function createChatComposerNodesFromText(text) {
-	return [createChatComposerTextNode(text)];
-}
-function normalizeChatComposerNodes(nodes) {
-	const normalized = [];
-	for (const node of nodes) {
-		if (node.type === "text") {
-			if (node.text.length === 0) continue;
-			const previous = normalized[normalized.length - 1];
-			if (previous?.type === "text") {
-				normalized[normalized.length - 1] = {
-					...previous,
-					text: previous.text + node.text
-				};
-				continue;
-			}
-		}
-		normalized.push(node);
-	}
-	if (normalized.length === 0) return createEmptyChatComposerNodes();
-	return normalized;
-}
-function serializeChatComposerDocument(nodes) {
-	return nodes.map((node) => node.type === "text" ? node.text : "").join("");
-}
-function serializeChatComposerPlainText(nodes) {
-	return nodes.filter((node) => node.type === "text").map((node) => node.text).join("");
-}
-function extractChatComposerTokenKeys(nodes, tokenKind) {
-	const keys = [];
-	const keySet = /* @__PURE__ */ new Set();
-	for (const node of nodes) {
-		if (node.type !== "token" || node.tokenKind !== tokenKind || keySet.has(node.tokenKey)) continue;
-		keySet.add(node.tokenKey);
-		keys.push(node.tokenKey);
-	}
-	return keys;
-}
-function buildTrimmedTextEdges(node, nodeStart, rangeStart, rangeEnd) {
-	const prefixLength = Math.max(0, rangeStart - nodeStart);
-	const suffixLength = Math.max(0, nodeStart + node.text.length - rangeEnd);
-	const edges = [];
-	if (prefixLength > 0) edges.push({
-		...node,
-		text: node.text.slice(0, prefixLength)
-	});
-	if (suffixLength > 0) edges.push({
-		...node,
-		text: node.text.slice(node.text.length - suffixLength)
-	});
-	return edges;
-}
-function isNodeOutsideComposerRange(nodeStart, nodeEnd, boundedStart, boundedEnd) {
-	return nodeEnd <= boundedStart || nodeStart >= boundedEnd;
-}
-function appendReplacementBeforeNode(nextNodes, replacement, inserted, nodeStart, boundedEnd) {
-	if (!inserted && nodeStart >= boundedEnd) {
-		nextNodes.push(...replacement);
-		return true;
-	}
-	return inserted;
-}
-function appendTextNodeWithReplacement(nextNodes, node, nodeStart, boundedStart, boundedEnd, replacement, inserted) {
-	const edges = buildTrimmedTextEdges(node, nodeStart, boundedStart, boundedEnd);
-	if (edges[0]) nextNodes.push(edges[0]);
-	let didInsert = inserted;
-	if (!didInsert) {
-		nextNodes.push(...replacement);
-		didInsert = true;
-	}
-	if (edges[1]) nextNodes.push(edges[1]);
-	return didInsert;
-}
-function appendTokenNodeWithReplacement(nextNodes, node, replacement, inserted, boundedStart, nodeStart) {
-	if (!inserted && boundedStart <= nodeStart) {
-		nextNodes.push(...replacement);
-		return true;
-	}
-	nextNodes.push(node);
-	return inserted;
-}
-function replaceChatComposerRange(nodes, start, end, replacement) {
-	const boundedStart = Math.max(0, start);
-	const boundedEnd = Math.max(boundedStart, end);
-	const nextNodes = [];
-	let cursor = 0;
-	let inserted = false;
-	for (const node of nodes) {
-		const nodeLength = getChatComposerNodeLength(node);
-		const nodeStart = cursor;
-		const nodeEnd = cursor + nodeLength;
-		if (isNodeOutsideComposerRange(nodeStart, nodeEnd, boundedStart, boundedEnd)) {
-			inserted = appendReplacementBeforeNode(nextNodes, replacement, inserted, nodeStart, boundedEnd);
-			nextNodes.push(node);
-			cursor = nodeEnd;
-			continue;
-		}
-		if (node.type === "text") inserted = appendTextNodeWithReplacement(nextNodes, node, nodeStart, boundedStart, boundedEnd, replacement, inserted);
-		else inserted = appendTokenNodeWithReplacement(nextNodes, node, replacement, inserted, boundedStart, nodeStart);
-		cursor = nodeEnd;
-	}
-	if (!inserted) nextNodes.push(...replacement);
-	return normalizeChatComposerNodes(nextNodes);
-}
-function removeChatComposerTokenNodes(nodes, predicate) {
-	return normalizeChatComposerNodes(nodes.filter((node) => node.type !== "token" || !predicate(node)));
-}
-function resolveChatComposerSlashTrigger(nodes, selection) {
-	if (!selection || selection.start !== selection.end) return null;
-	const documentText = serializeChatComposerDocument(nodes);
-	const caret = selection.end;
-	const prefix = documentText.slice(0, caret);
-	const match = /(?:^|\s)\/([^\s\uFFFC]*)$/.exec(prefix);
-	if (!match) return null;
-	const slashStart = caret - match[0].length + (match[0].startsWith("/") ? 0 : 1);
-	return {
-		query: (match[1] ?? "").trim().toLowerCase(),
-		start: slashStart,
-		end: caret
-	};
-}
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-token-node.tsx
 function buildTokenClassName(tokenKind) {
@@ -1154,35 +1312,15 @@ function buildTokenClassName(tokenKind) {
 function ChatComposerTokenChip({ label, tokenKind }) {
 	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-white text-slate-500 ring-1 ring-black/5" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70",
-		children: tokenKind === "file" ? /* @__PURE__ */ jsxs("svg", {
-			viewBox: "0 0 16 16",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "1.25",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
+		children: tokenKind === "file" ? /* @__PURE__ */ jsx(ImageIcon, {
 			"aria-hidden": "true",
-			className: "h-3 w-3",
-			children: [
-				/* @__PURE__ */ jsx("path", { d: "M3.25 4.25A1.5 1.5 0 0 1 4.75 2.75h6.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-6.5a1.5 1.5 0 0 1-1.5-1.5v-7.5Z" }),
-				/* @__PURE__ */ jsx("path", { d: "m4.75 10 2.25-2.5 1.75 1.75 1.25-1.25 2 2" }),
-				/* @__PURE__ */ jsx("path", { d: "M9.75 6.25h.01" })
-			]
-		}) : /* @__PURE__ */ jsxs("svg", {
-			viewBox: "0 0 16 16",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "1.25",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
+			className: "h-3 w-3"
+		}) : tokenKind === "panel_app" ? /* @__PURE__ */ jsx(AppWindow, {
 			"aria-hidden": "true",
-			className: "h-3 w-3",
-			children: [
-				/* @__PURE__ */ jsx("path", { d: "M8.5 2.75 2.75 6l5.75 3.25L14.25 6 8.5 2.75Z" }),
-				/* @__PURE__ */ jsx("path", { d: "M2.75 10 8.5 13.25 14.25 10" }),
-				/* @__PURE__ */ jsx("path", { d: "M2.75 6v4l5.75 3.25V9.25L2.75 6Z" }),
-				/* @__PURE__ */ jsx("path", { d: "M14.25 6v4L8.5 13.25V9.25L14.25 6Z" })
-			]
+			className: "h-3 w-3"
+		}) : /* @__PURE__ */ jsx(Puzzle, {
+			"aria-hidden": "true",
+			className: "h-3 w-3"
 		})
 	}), /* @__PURE__ */ jsx("span", {
 		className: tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-700" : "truncate",
@@ -1518,6 +1656,48 @@ function insertToken(params) {
 		}
 	};
 }
+function insertChatComposerTokenIntoChatComposer(params) {
+	const { label, nodes, selection, tokenKey, tokenKind, triggerSpecs } = params;
+	if (extractChatComposerTokenKeys(nodes, tokenKind).includes(tokenKey)) return {
+		nodes: normalizeChatComposerNodes(nodes),
+		selection
+	};
+	return insertToken({
+		label,
+		nodes,
+		selection,
+		tokenKey,
+		tokenKind,
+		trigger: resolveChatComposerActiveInputSurfaceTrigger(nodes, selection, triggerSpecs ?? [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC])
+	});
+}
+function insertInputSurfaceItemIntoChatComposer(params) {
+	const { item, nodes, selection, triggerSpecs } = params;
+	const tokenKind = item.tokenKind ?? (item.value ? "skill" : void 0);
+	const tokenKey = item.tokenKey ?? item.value;
+	if (!tokenKind || !tokenKey) {
+		const trigger = resolveChatComposerActiveInputSurfaceTrigger(nodes, selection, triggerSpecs ?? [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC]);
+		if (trigger) return {
+			nodes: normalizeChatComposerNodes(replaceChatComposerRange(nodes, trigger.start, trigger.end, [])),
+			selection: {
+				start: trigger.start,
+				end: trigger.start
+			}
+		};
+		return {
+			nodes: normalizeChatComposerNodes(nodes),
+			selection
+		};
+	}
+	return insertChatComposerTokenIntoChatComposer({
+		label: item.title,
+		nodes,
+		selection,
+		tokenKey,
+		tokenKind,
+		triggerSpecs
+	});
+}
 function getChatComposerNodesSignature(nodes) {
 	return nodes.map((node) => node.type === "text" ? `text:${node.id}:${node.text}` : `token:${node.id}:${node.tokenKind}:${node.tokenKey}:${node.label}`).join("");
 }
@@ -1606,21 +1786,9 @@ function deleteChatComposerContent(params) {
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-controller.ts
 function resolveLexicalComposerKeyboardAction(params) {
-	const { activeSlashIndex, canStopGeneration, isComposing, isSending, isSlashMenuOpen, key, shiftKey, slashItemCount } = params;
+	const { canStopGeneration, isComposing, isSending, key, shiftKey } = params;
 	if (key === "Enter" && !shiftKey && isSending) return { type: "consume" };
-	if (isSlashMenuOpen && slashItemCount > 0) {
-		if (key === "ArrowDown") return {
-			type: "move-slash-index",
-			index: (activeSlashIndex + 1) % slashItemCount
-		};
-		if (key === "ArrowUp") return {
-			type: "move-slash-index",
-			index: (activeSlashIndex - 1 + slashItemCount) % slashItemCount
-		};
-		if (key === "Enter" && !shiftKey || key === "Tab") return { type: "insert-active-slash-item" };
-	}
 	if (key === "Escape") {
-		if (isSlashMenuOpen) return { type: "close-slash" };
 		if (isSending && canStopGeneration) return { type: "stop-generation" };
 		return { type: "noop" };
 	}
@@ -1635,16 +1803,18 @@ function resolveLexicalComposerKeyboardAction(params) {
 var LexicalComposerHandleOwner = class {
 	constructor(params) {
 		this.params = params;
-		this.insertSlashItem = (item) => {
-			if (!item.value) return;
-			this.params.onSlashItemSelect?.(item);
-			this.params.publishSnapshot(insertSkillTokenIntoChatComposer({
-				label: item.title,
+		this.insertInputSurfaceItem = (item, triggerSpecs = [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC]) => {
+			this.params.onInputSurfaceItemSelect?.(item);
+			this.params.publishSnapshot(insertInputSurfaceItemIntoChatComposer({
+				item,
 				nodes: this.params.optionsReader().nodes,
 				selection: this.params.optionsReader().selection,
-				tokenKey: item.value
+				triggerSpecs
 			}), { focusAfterSync: true });
 		};
+		this.insertSlashItem = (item) => {
+			this.insertInputSurfaceItem(item);
+		};
 		this.insertFileToken = (tokenKey, label) => {
 			this.params.publishSnapshot(insertFileTokenIntoChatComposer({
 				label,
@@ -1711,7 +1881,10 @@ function handleLexicalComposerBeforeInput(params) {
 		nodes: snapshotReader().nodes,
 		selection: snapshotReader().selection,
 		text: nativeEvent.data
-	}));
+	}), { inputSurfaceReason: {
+		type: "insert-text",
+		text: nativeEvent.data
+	} });
 }
 function handleLexicalComposerCompositionEnd(params) {
 	const { data, fallbackSnapshot, publishSnapshot, snapshotReader } = params;
@@ -1721,40 +1894,25 @@ function handleLexicalComposerCompositionEnd(params) {
 		nodes: currentSnapshot.nodes,
 		selection: currentSnapshot.selection,
 		text: data
-	}) : editorSnapshot, { forcePublish: true });
+	}) : editorSnapshot, {
+		forcePublish: true,
+		inputSurfaceReason: {
+			type: "insert-text",
+			text: data
+		}
+	});
 }
 function handleLexicalComposerKeyboardCommand(params) {
-	const { actions, activeSlashIndex, nativeEvent, onSlashActiveIndexChange, onSlashItemSelect, onSlashOpenChange, onSlashQueryChange, publishSnapshot, slashItems, snapshot } = params;
+	const { actions, nativeEvent, publishSnapshot, snapshot } = params;
 	const action = resolveLexicalComposerKeyboardAction({
-		activeSlashIndex,
 		canStopGeneration: actions.canStopGeneration,
 		isComposing: nativeEvent.isComposing,
 		isSending: actions.isSending,
-		isSlashMenuOpen: resolveChatComposerSlashTrigger(snapshot.nodes, snapshot.selection) !== null,
 		key: nativeEvent.key,
-		shiftKey: nativeEvent.shiftKey,
-		slashItemCount: slashItems.length
+		shiftKey: nativeEvent.shiftKey
 	});
-	const activeSlashItem = slashItems[activeSlashIndex] ?? null;
 	if (action.type !== "noop") nativeEvent.preventDefault();
 	switch (action.type) {
-		case "move-slash-index":
-			onSlashActiveIndexChange(action.index);
-			return true;
-		case "insert-active-slash-item":
-			if (!activeSlashItem) return true;
-			onSlashItemSelect?.(activeSlashItem);
-			publishSnapshot(insertSkillTokenIntoChatComposer({
-				label: activeSlashItem.title,
-				nodes: snapshot.nodes,
-				selection: snapshot.selection,
-				tokenKey: activeSlashItem.value ?? activeSlashItem.key
-			}), { focusAfterSync: true });
-			return true;
-		case "close-slash":
-			onSlashQueryChange?.(null);
-			onSlashOpenChange(false);
-			return true;
 		case "consume": return true;
 		case "stop-generation":
 			actions.onStop();
@@ -1764,7 +1922,10 @@ function handleLexicalComposerKeyboardCommand(params) {
 				nodes: snapshot.nodes,
 				selection: snapshot.selection,
 				text: "\n"
-			}));
+			}), { inputSurfaceReason: {
+				type: "insert-text",
+				text: "\n"
+			} });
 			return true;
 		case "send-message":
 			actions.onSend();
@@ -1774,14 +1935,14 @@ function handleLexicalComposerKeyboardCommand(params) {
 				direction: action.direction,
 				nodes: snapshot.nodes,
 				selection: snapshot.selection
-			}));
+			}), { inputSurfaceReason: { type: "delete-content" } });
 			return true;
 		case "noop": return false;
 	}
 }
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-plugins.tsx
-function ChatComposerBindingsPlugin({ disabled, editorRef, editorSignatureRef, isApplyingExternalUpdateRef, isComposingRef, lastPublishedSignatureRef, nodes, onBlur, onKeyDown, onNodesChange, pendingSelectionRef, selectionRef, shouldFocusAfterSyncRef, syncSlashState }) {
+function ChatComposerBindingsPlugin({ disabled, editorRef, editorSignatureRef, isApplyingExternalUpdateRef, isComposingRef, lastPublishedSignatureRef, nodes, onBlur, consumeInputSurfaceReason, onKeyDown, onNodesChange, pendingSelectionRef, selectionRef, shouldFocusAfterSyncRef, syncInputSurfaceSnapshot }) {
 	const [editor] = useLexicalComposerContext();
 	useLayoutEffect(() => {
 		editorRef.current = editor;
@@ -1833,15 +1994,15 @@ function ChatComposerBindingsPlugin({ disabled, editorRef, editorSignatureRef, i
 			const signature = getChatComposerNodesSignature(snapshot.nodes);
 			selectionRef.current = snapshot.selection;
 			editorSignatureRef.current = signature;
-			syncSlashState(snapshot.nodes, snapshot.selection);
 			if (isApplyingExternalUpdateRef.current || isComposingRef.current) return;
+			syncInputSurfaceSnapshot(snapshot.nodes, snapshot.selection, consumeInputSurfaceReason() ?? { type: "sync" });
 			if (signature === lastPublishedSignatureRef.current) return;
 			lastPublishedSignatureRef.current = signature;
 			onNodesChange(snapshot.nodes);
 		}), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
 			const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
 			selectionRef.current = snapshot.selection;
-			if (!isComposingRef.current) syncSlashState(snapshot.nodes, snapshot.selection);
+			if (!isComposingRef.current) syncInputSurfaceSnapshot(snapshot.nodes, snapshot.selection, { type: "selection" });
 			return false;
 		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, () => {
 			onBlur();
@@ -1854,10 +2015,11 @@ function ChatComposerBindingsPlugin({ disabled, editorRef, editorSignatureRef, i
 		isComposingRef,
 		lastPublishedSignatureRef,
 		onBlur,
+		consumeInputSurfaceReason,
 		onKeyDown,
 		onNodesChange,
 		selectionRef,
-		syncSlashState
+		syncInputSurfaceSnapshot
 	]);
 	return null;
 }
@@ -1866,25 +2028,19 @@ function ChatComposerBindingsPlugin({ disabled, editorRef, editorSignatureRef, i
 function getChatComposerDocumentLength(nodes) {
 	return nodes.reduce((cursor, node) => cursor + (node.type === "text" ? node.text.length : 1), 0);
 }
-const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedComposer({ actions, activeSlashIndex, disabled, nodes, onFilesAdd, onNodesChange, onSlashActiveIndexChange, onSlashItemSelect, onSlashOpenChange, onSlashQueryChange, onSlashTriggerChange, placeholder, slashItems }, ref) {
+const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedComposer({ actions, disabled, nodes, onFilesAdd, onInputSurfaceItemSelect, onInputSurfaceKeyDown, onInputSurfaceOpenChange, onInputSurfaceSnapshotChange, onNodesChange, placeholder }, ref) {
 	const editorRef = useRef(null);
 	const selectionRef = useRef(null);
 	const pendingSelectionRef = useRef(null);
 	const shouldFocusAfterSyncRef = useRef(false);
 	const isComposingRef = useRef(false);
 	const isApplyingExternalUpdateRef = useRef(false);
+	const pendingInputSurfaceReasonRef = useRef(null);
 	const editorSignatureRef = useRef("");
 	const lastPublishedSignatureRef = useRef("");
-	const syncSlashState = useCallback((nodes, selection) => {
-		const trigger = resolveChatComposerSlashTrigger(nodes, selection);
-		onSlashTriggerChange?.(trigger);
-		onSlashQueryChange?.(trigger?.query ?? null);
-		onSlashOpenChange(trigger !== null);
-	}, [
-		onSlashOpenChange,
-		onSlashQueryChange,
-		onSlashTriggerChange
-	]);
+	const syncInputSurfaceSnapshot = useCallback((nodes, selection, reason) => {
+		onInputSurfaceSnapshotChange?.(nodes, selection, reason);
+	}, [onInputSurfaceSnapshotChange]);
 	const readCurrentNodes = useCallback(() => {
 		return nodes;
 	}, [nodes]);
@@ -1900,12 +2056,12 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 		pendingSelectionRef.current = snapshot.selection;
 		if (options?.focusAfterSync) shouldFocusAfterSyncRef.current = true;
 		const signature = getChatComposerNodesSignature(snapshot.nodes);
-		syncSlashState(snapshot.nodes, snapshot.selection);
+		syncInputSurfaceSnapshot(snapshot.nodes, snapshot.selection, options?.inputSurfaceReason ?? { type: "programmatic" });
 		if (options?.forcePublish || signature !== lastPublishedSignatureRef.current) {
 			lastPublishedSignatureRef.current = signature;
 			onNodesChange(snapshot.nodes);
 		}
-	}, [onNodesChange, syncSlashState]);
+	}, [onNodesChange, syncInputSurfaceSnapshot]);
 	const focusComposer = useCallback(() => {
 		const editor = editorRef.current;
 		if (!editor) return;
@@ -1943,16 +2099,21 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 		nodes: readCurrentNodes(),
 		selection: readCurrentSelection()
 	}), [readCurrentNodes, readCurrentSelection]);
+	const consumeInputSurfaceReason = useCallback(() => {
+		const reason = pendingInputSurfaceReasonRef.current;
+		pendingInputSurfaceReasonRef.current = null;
+		return reason;
+	}, []);
 	useImperativeHandle(ref, () => createLexicalComposerHandle({
 		focusComposer,
 		focusComposerAtEnd,
-		onSlashItemSelect,
+		onInputSurfaceItemSelect,
 		optionsReader: readComposerSnapshot,
 		publishSnapshot
 	}), [
 		focusComposer,
 		focusComposerAtEnd,
-		onSlashItemSelect,
+		onInputSurfaceItemSelect,
 		publishSnapshot,
 		readComposerSnapshot
 	]);
@@ -2028,24 +2189,23 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 				lastPublishedSignatureRef,
 				nodes,
 				onBlur: () => {
-					onSlashQueryChange?.(null);
-					onSlashOpenChange(false);
+					onInputSurfaceOpenChange?.(false);
 				},
+				consumeInputSurfaceReason,
 				onKeyDown: (event) => {
+					if (event.key.length === 1 && !event.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey) pendingInputSurfaceReasonRef.current = {
+						type: "insert-text",
+						text: event.key
+					};
 					const editor = editorRef.current;
 					if (!editor) return false;
 					const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
 					selectionRef.current = snapshot.selection;
+					if (onInputSurfaceKeyDown?.(event)) return true;
 					return handleLexicalComposerKeyboardCommand({
 						actions,
-						activeSlashIndex,
 						nativeEvent: event,
-						onSlashActiveIndexChange,
-						onSlashItemSelect,
-						onSlashOpenChange,
-						onSlashQueryChange,
 						publishSnapshot,
-						slashItems,
 						snapshot
 					});
 				},
@@ -2053,7 +2213,7 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 				pendingSelectionRef,
 				selectionRef,
 				shouldFocusAfterSyncRef,
-				syncSlashState
+				syncInputSurfaceSnapshot
 			})
 		]
 	});
@@ -2083,16 +2243,20 @@ function InputBarHint({ hint }) {
 		})
 	});
 }
-const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, slashMenu, surface, toolbar: toolbarProps }, ref) {
+const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSurface, slashMenu, surface, toolbar: toolbarProps }, ref) {
 	const composerRef = useRef(null);
-	const isSlashMenuInteractionRef = useRef(false);
-	const [activeSlashIndex, setActiveSlashIndex] = useState(0);
-	const [activeSlashTriggerStart, setActiveSlashTriggerStart] = useState(null);
-	const [dismissedSlashTriggerStart, setDismissedSlashTriggerStart] = useState(null);
-	const isSlashPanelOpen = activeSlashTriggerStart !== null && dismissedSlashTriggerStart !== activeSlashTriggerStart;
-	const activeSlashIndexInRange = slashMenu.items.length === 0 ? 0 : Math.min(activeSlashIndex, slashMenu.items.length - 1);
-	const activeSlashItem = slashMenu.items[activeSlashIndexInRange] ?? null;
-	const dismissSlashTrigger = () => activeSlashTriggerStart !== null && !isSlashMenuInteractionRef.current ? setDismissedSlashTriggerStart(activeSlashTriggerStart) : void 0;
+	const resolvedInputSurface = inputSurface ?? (slashMenu ? {
+		isLoading: slashMenu.isLoading,
+		items: slashMenu.items,
+		onSelectItem: slashMenu.onSelectItem,
+		texts: {
+			loadingLabel: slashMenu.texts.slashLoadingLabel,
+			sectionLabel: slashMenu.texts.slashSectionLabel,
+			emptyLabel: slashMenu.texts.slashEmptyLabel,
+			hintLabel: slashMenu.texts.slashHintLabel,
+			itemHintLabel: slashMenu.texts.slashSkillHintLabel
+		}
+	} : null);
 	const toolbar = useMemo(() => {
 		if (!toolbarProps.skillPicker) return toolbarProps;
 		return {
@@ -2119,55 +2283,27 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, slashMen
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card",
 				children: [
-					/* @__PURE__ */ jsxs("div", {
+					/* @__PURE__ */ jsx("div", {
 						className: "relative",
-						children: [/* @__PURE__ */ jsx(ChatInputBarTokenizedComposer, {
-							ref: composerRef,
-							nodes: composer.nodes,
-							placeholder: composer.placeholder,
-							disabled: composer.disabled,
-							slashItems: slashMenu.items,
-							onSlashItemSelect: slashMenu.onSelectItem,
-							actions: toolbarProps.actions,
-							activeSlashIndex: activeSlashIndexInRange,
-							onNodesChange: composer.onNodesChange,
-							onFilesAdd: composer.onFilesAdd,
-							onSlashQueryChange: (query) => {
-								if (query === null && isSlashMenuInteractionRef.current) return;
-								if (query !== null) setActiveSlashIndex(0);
-								composer.onSlashQueryChange?.(query);
-							},
-							onSlashTriggerChange: (trigger) => {
-								const nextTriggerStart = trigger?.start ?? null;
-								setActiveSlashTriggerStart(nextTriggerStart);
-								if (nextTriggerStart === null) setDismissedSlashTriggerStart(null);
-							},
-							onSlashOpenChange: (open) => {
-								if (!open) dismissSlashTrigger();
-							},
-							onSlashActiveIndexChange: setActiveSlashIndex
-						}), /* @__PURE__ */ jsx(ChatSlashMenu, {
-							isOpen: isSlashPanelOpen,
-							isLoading: slashMenu.isLoading,
-							items: slashMenu.items,
-							activeIndex: activeSlashIndexInRange,
-							activeItem: activeSlashItem,
-							texts: slashMenu.texts,
-							onSelectItem: (item) => {
-								setDismissedSlashTriggerStart(null);
-								composerRef.current?.insertSlashItem(item);
-							},
-							onOpenChange: (open) => {
-								if (!open) dismissSlashTrigger();
-							},
-							onDetailsPointerDown: () => {
-								isSlashMenuInteractionRef.current = true;
-								requestAnimationFrame(() => {
-									isSlashMenuInteractionRef.current = false;
-								});
-							},
-							onSetActiveIndex: setActiveSlashIndex
-						})]
+						children: /* @__PURE__ */ jsx(ChatInputSurfaceHost, {
+							inputSurface: resolvedInputSurface,
+							onInputSurfaceTriggerChange: composer.onInputSurfaceTriggerChange,
+							onSelectItem: (item) => composerRef.current?.insertInputSurfaceItem(item, composer.inputSurfaceTriggerSpecs),
+							triggerSpecs: composer.inputSurfaceTriggerSpecs,
+							children: ({ onInputSurfaceKeyDown, onInputSurfaceOpenChange, onInputSurfaceSnapshotChange }) => /* @__PURE__ */ jsx(ChatInputBarTokenizedComposer, {
+								ref: composerRef,
+								nodes: composer.nodes,
+								placeholder: composer.placeholder,
+								disabled: composer.disabled,
+								onInputSurfaceItemSelect: resolvedInputSurface?.onSelectItem,
+								actions: toolbarProps.actions,
+								onNodesChange: composer.onNodesChange,
+								onFilesAdd: composer.onFilesAdd,
+								onInputSurfaceSnapshotChange,
+								onInputSurfaceOpenChange,
+								onInputSurfaceKeyDown
+							})
+						})
 					}),
 					/* @__PURE__ */ jsx(InputBarHint, { hint }),
 					/* @__PURE__ */ jsx(ChatInputBarToolbar, { ...toolbar })
@@ -2200,6 +2336,46 @@ function ChatMessageAvatar({ role }) {
 	});
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/chat-inline-token-badge.tsx
+function resolveInlineTokenTone(kind) {
+	if (kind === "skill") return "skill";
+	if (kind === "panel_app") return "panel_app";
+	return "default";
+}
+function resolveInlineTokenBadgeClassName(tone, isUser) {
+	if (tone === "skill") return isUser ? "border-emerald-200/35 bg-emerald-400/18 text-emerald-50/95" : "border-emerald-200/70 bg-emerald-50 text-emerald-700";
+	if (tone === "panel_app") return isUser ? "border-sky-200/35 bg-sky-400/18 text-sky-50/95" : "border-sky-200/70 bg-sky-50 text-sky-700";
+	return isUser ? "border-white/30 bg-white/18 text-white" : "border-slate-200/80 bg-slate-100 text-slate-700";
+}
+function resolveInlineTokenIconClassName(tone, isUser) {
+	if (tone === "skill") return isUser ? "text-emerald-100/90" : "text-emerald-600";
+	if (tone === "panel_app") return isUser ? "text-sky-100/90" : "text-sky-600";
+	return isUser ? "text-white/70" : "text-slate-500";
+}
+function renderInlineTokenIcon(tone) {
+	return tone === "panel_app" ? /* @__PURE__ */ jsx(AppWindow, {
+		"aria-hidden": "true",
+		className: "h-3 w-3"
+	}) : /* @__PURE__ */ jsx(Puzzle, {
+		"aria-hidden": "true",
+		className: "h-3 w-3"
+	});
+}
+function ChatInlineTokenBadge({ kind, label, isUser }) {
+	const tone = resolveInlineTokenTone(kind);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("mx-[2px] inline-flex h-7 max-w-full items-center gap-1.5 rounded-xl border px-2.5 align-baseline text-[11px] font-medium shadow-[0_0_0_1px_rgba(15,23,42,0.03)]", resolveInlineTokenBadgeClassName(tone, isUser)),
+		title: label,
+		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)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: label
+		})]
+	});
+}
+//#endregion
 //#region src/components/chat/utils/copy-text.utils.ts
 function canUseClipboardApi() {
 	return typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function";
@@ -2499,6 +2675,10 @@ const SAFE_LINK_PROTOCOLS = new Set([
 	"mailto:",
 	"tel:"
 ]);
+const INLINE_TOKEN_KIND_ATTR = "data-chat-inline-token-kind";
+const INLINE_TOKEN_KEY_ATTR = "data-chat-inline-token-key";
+const INLINE_TOKEN_LABEL_ATTR = "data-chat-inline-token-label";
+const INLINE_TOKEN_RAW_TEXT_ATTR = "data-chat-inline-token-raw-text";
 const PROJECT_RELATIVE_FILE_EXTENSIONS = [
 	"cjs",
 	"css",
@@ -2553,10 +2733,116 @@ function parseLocalFileAction(href) {
 		...typeof column === "number" ? { column } : {}
 	};
 }
-function ChatMessageMarkdown({ text, role, texts, inline = false, onFileOpen }) {
+function prepareInlineTokens(inlineTokens) {
+	if (!inlineTokens || inlineTokens.length === 0) return [];
+	const seenRawTexts = /* @__PURE__ */ new Set();
+	const tokens = [];
+	for (const token of inlineTokens) {
+		if (!token.rawText || seenRawTexts.has(token.rawText)) continue;
+		seenRawTexts.add(token.rawText);
+		tokens.push(token);
+	}
+	return tokens.sort((left, right) => right.rawText.length - left.rawText.length);
+}
+function createInlineTokenNode(token) {
+	return {
+		type: "chatInlineToken",
+		data: {
+			hName: "span",
+			hProperties: {
+				[INLINE_TOKEN_KIND_ATTR]: token.kind,
+				[INLINE_TOKEN_KEY_ATTR]: token.key,
+				[INLINE_TOKEN_LABEL_ATTR]: token.label,
+				[INLINE_TOKEN_RAW_TEXT_ATTR]: token.rawText
+			},
+			hChildren: [{
+				type: "text",
+				value: token.label
+			}]
+		}
+	};
+}
+function findNextInlineToken(value, cursor, tokens) {
+	let next = null;
+	for (const token of tokens) {
+		const index = value.indexOf(token.rawText, cursor);
+		if (index < 0) continue;
+		if (!next || index < next.index || index === next.index && token.rawText.length > next.token.rawText.length) next = {
+			index,
+			token
+		};
+	}
+	return next;
+}
+function splitTextNodeByInlineTokens(value, tokens) {
+	const output = [];
+	let cursor = 0;
+	while (cursor < value.length) {
+		const next = findNextInlineToken(value, cursor, tokens);
+		if (!next) {
+			output.push({
+				type: "text",
+				value: value.slice(cursor)
+			});
+			break;
+		}
+		if (next.index > cursor) output.push({
+			type: "text",
+			value: value.slice(cursor, next.index)
+		});
+		output.push(createInlineTokenNode(next.token));
+		cursor = next.index + next.token.rawText.length;
+	}
+	return output.length > 0 ? output : [{
+		type: "text",
+		value
+	}];
+}
+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;
+}
+function createRemarkInlineTokenPlugin(inlineTokens) {
+	const tokens = prepareInlineTokens(inlineTokens);
+	return () => (tree) => {
+		if (tokens.length === 0) return;
+		transformInlineTokenTextNodes(tree, tokens);
+	};
+}
+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 }) {
 	const isUser = role === "user";
+	const remarkPlugins = useMemo(() => inlineTokens && inlineTokens.length > 0 ? [remarkGfm, createRemarkInlineTokenPlugin(inlineTokens)] : [remarkGfm], [inlineTokens]);
 	const markdownComponents = useMemo(() => ({
 		p: ({ children }) => inline ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsx("p", { children }),
+		span: ({ node: _node, children, ...rest }) => {
+			const restProps = rest;
+			const kind = readStringProp(restProps, INLINE_TOKEN_KIND_ATTR);
+			const key = readStringProp(restProps, INLINE_TOKEN_KEY_ATTR);
+			const label = readStringProp(restProps, INLINE_TOKEN_LABEL_ATTR);
+			const rawText = readStringProp(restProps, INLINE_TOKEN_RAW_TEXT_ATTR);
+			if (kind && key && label && rawText) return /* @__PURE__ */ jsx(ChatInlineTokenBadge, {
+				kind,
+				label,
+				isUser
+			});
+			return /* @__PURE__ */ jsx("span", {
+				...rest,
+				children
+			});
+		},
 		a: ({ href, children, ...rest }) => {
 			const safeHref = resolveSafeHref(href);
 			if (!safeHref) return /* @__PURE__ */ jsx("span", {
@@ -2626,6 +2912,7 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, onFileOpen })
 		}
 	}), [
 		inline,
+		isUser,
 		onFileOpen,
 		texts
 	]);
@@ -2633,74 +2920,13 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, onFileOpen })
 		className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"),
 		children: /* @__PURE__ */ jsx(ReactMarkdown, {
 			skipHtml: true,
-			remarkPlugins: [remarkGfm],
+			remarkPlugins,
 			components: markdownComponents,
 			children: trimMarkdown(text)
 		})
 	});
 }
 //#endregion
-//#region src/components/chat/ui/chat-message-list/chat-message-inline-content.tsx
-function hasVisibleInlineText(value) {
-	return value.split("​").join("").split("‌").join("").split("‍").join("").split("⁠").join("").split("").join("").length > 0;
-}
-function ChatInlineSkillIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.25",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		className: "h-3 w-3",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M8.5 2.75 2.75 6l5.75 3.25L14.25 6 8.5 2.75Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M2.75 10 8.5 13.25 14.25 10" }),
-			/* @__PURE__ */ jsx("path", { d: "M2.75 6v4l5.75 3.25V9.25L2.75 6Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M14.25 6v4L8.5 13.25V9.25L14.25 6Z" })
-		]
-	});
-}
-function ChatInlineTokenBadge({ kind, label, isUser }) {
-	const isSkill = kind === "skill";
-	return /* @__PURE__ */ jsxs("span", {
-		className: cn("mx-[2px] inline-flex h-7 max-w-full items-center gap-1.5 rounded-xl border px-2.5 align-baseline text-[11px] font-medium shadow-[0_0_0_1px_rgba(15,23,42,0.03)]", isSkill ? isUser ? "border-emerald-200/35 bg-emerald-400/18 text-emerald-50/95" : "border-emerald-200/70 bg-emerald-50 text-emerald-700" : isUser ? "border-white/30 bg-white/18 text-white" : "border-slate-200/80 bg-slate-100 text-slate-700"),
-		title: label,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: cn("inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", isSkill ? isUser ? "text-emerald-100/90" : "text-emerald-600" : isUser ? "text-white/70" : "text-slate-500"),
-			children: /* @__PURE__ */ jsx(ChatInlineSkillIcon, {})
-		}), /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: label
-		})]
-	});
-}
-function ChatMessageInlineContent({ segments, role, texts, onFileOpen }) {
-	const isUser = role === "user";
-	return /* @__PURE__ */ jsx("div", {
-		className: "whitespace-pre-wrap break-words leading-6",
-		children: segments.map((segment, index) => {
-			if (segment.type === "token") return /* @__PURE__ */ jsx(ChatInlineTokenBadge, {
-				kind: segment.token.kind,
-				label: segment.token.label,
-				isUser
-			}, `token-${index}-${segment.token.kind}-${segment.token.key}`);
-			if (!hasVisibleInlineText(segment.text)) return /* @__PURE__ */ jsx("span", {
-				className: "whitespace-pre-wrap",
-				children: segment.text
-			}, `space-${index}`);
-			return /* @__PURE__ */ jsx(ChatMessageMarkdown, {
-				text: segment.text,
-				role,
-				texts,
-				inline: true,
-				onFileOpen
-			}, `markdown-${index}`);
-		})
-	});
-}
-//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-file/meta.ts
 const FILE_CATEGORY_TILE_CLASSES = {
 	archive: "border-amber-200/80 bg-amber-50 text-amber-700",
@@ -3977,23 +4203,15 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 			children: message.parts.map((part, index) => {
 				const { type } = part;
 				if (type === "markdown") {
-					const { text } = part;
+					const { inlineTokens, text } = part;
 					return /* @__PURE__ */ jsx(ChatMessageMarkdown, {
 						text,
 						role,
 						texts,
+						inlineTokens,
 						onFileOpen
 					}, `markdown-${index}`);
 				}
-				if (type === "inline-content") {
-					const { segments } = part;
-					return /* @__PURE__ */ jsx(ChatMessageInlineContent, {
-						segments,
-						role,
-						texts,
-						onFileOpen
-					}, `inline-content-${index}`);
-				}
 				if (type === "reasoning") {
 					const { label, text } = part;
 					return /* @__PURE__ */ jsx(ChatReasoningBlock, {
@@ -4188,6 +4406,54 @@ function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAct
 	});
 }
 //#endregion
-export { ChatInputBar, ChatMessageList, ChatMessageMarkdown, FileOperationCodeSurface, FileOperationLinesGrid, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
+//#region src/lib/input-surface/input-surface-plugin.utils.ts
+function createInputSurfaceTriggeredPanelPlugin(params) {
+	return {
+		key: params.key,
+		triggerSpecs: [params.trigger],
+		resolvePanel: (context) => context.trigger.key === params.trigger.key ? params.resolvePanel(context) : null
+	};
+}
+function createInputSurfaceReferenceTokenPlugin(params) {
+	return createInputSurfaceTriggeredPanelPlugin({
+		key: params.key,
+		trigger: params.trigger,
+		resolvePanel: (context) => ({
+			isLoading: params.getIsLoading?.(context) ?? false,
+			items: params.getItems({
+				context,
+				records: params.getRecords(context),
+				query: context.trigger.query,
+				tokenKind: params.tokenKind
+			}),
+			onSelectItem: params.onSelectItem,
+			texts: params.texts
+		})
+	});
+}
+function resolveChatInputSurfaceState(params) {
+	const { data, plugins, trigger } = params;
+	const triggerSpecs = plugins.flatMap((plugin) => [...plugin.triggerSpecs]);
+	if (!trigger) return {
+		triggerSpecs,
+		panel: null
+	};
+	for (const plugin of plugins) {
+		const panel = plugin.resolvePanel({
+			data,
+			trigger
+		});
+		if (panel) return {
+			triggerSpecs,
+			panel
+		};
+	}
+	return {
+		triggerSpecs,
+		panel: null
+	};
+}
+//#endregion
+export { CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC, ChatInputBar, ChatMessageList, ChatMessageMarkdown, FileOperationCodeSurface, FileOperationLinesGrid, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, createInputSurfaceReferenceTokenPlugin, createInputSurfaceTriggeredPanelPlugin, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerActiveInputSurfaceTrigger, resolveChatComposerInputSurfaceTrigger, resolveChatComposerSlashTrigger, resolveChatInputSurfaceState, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
 
 //# sourceMappingURL=index.js.map