@nextclaw/agent-chat-ui 0.5.0 → 0.5.1-beta.1

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, Terminal, User, Wrench } from "lucide-react";
+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 * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -89,14 +89,24 @@ const ChatInput = React.forwardRef(({ className, type, ...props }, ref) => /* @_
 ChatInput.displayName = "ChatInput";
 //#endregion
 //#region src/components/chat/default-skin/popover.tsx
+const CHAT_FLOATING_CONTENT_AVAILABLE_HEIGHT_GAP = "2rem";
+function createChatPopoverAvailableHeightLimit(limit) {
+	return `min(${limit}, max(0px, calc(var(--radix-popover-content-available-height, 100vh) - ${CHAT_FLOATING_CONTENT_AVAILABLE_HEIGHT_GAP})))`;
+}
+const CHAT_POPOVER_CONTENT_MAX_HEIGHT = createChatPopoverAvailableHeightLimit("24rem");
 const ChatPopover = PopoverPrimitive.Root;
 const ChatPopoverTrigger = PopoverPrimitive.Trigger;
 const ChatPopoverAnchor = PopoverPrimitive.Anchor;
-const ChatPopoverContent = React.forwardRef(({ className, sideOffset = 8, align = "start", ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+const ChatPopoverContent = React.forwardRef(({ className, sideOffset = 8, align = "start", collisionPadding = 12, style, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
 	ref,
 	sideOffset,
 	align,
-	className: cn("z-[var(--z-popover,50)] w-72 overflow-hidden rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	collisionPadding,
+	className: cn("z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	style: {
+		maxHeight: CHAT_POPOVER_CONTENT_MAX_HEIGHT,
+		...style
+	},
 	...props
 }) }));
 ChatPopoverContent.displayName = PopoverPrimitive.Content.displayName;
@@ -105,6 +115,11 @@ ChatPopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const ChatSelect = SelectPrimitive.Root;
 const ChatSelectGroup = SelectPrimitive.Group;
 const ChatSelectValue = SelectPrimitive.Value;
+const CHAT_SELECT_CONTENT_AVAILABLE_HEIGHT_GAP = "2rem";
+function createChatSelectAvailableHeightLimit(limit) {
+	return `min(${limit}, max(0px, calc(var(--radix-select-content-available-height, 100vh) - ${CHAT_SELECT_CONTENT_AVAILABLE_HEIGHT_GAP})))`;
+}
+const CHAT_SELECT_CONTENT_MAX_HEIGHT = createChatSelectAvailableHeightLimit("24rem");
 const ChatSelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
 	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-gray-200/80 bg-white px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className),
@@ -129,15 +144,20 @@ const ChatSelectScrollDownButton = React.forwardRef(({ className, ...props }, re
 	children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
 }));
 ChatSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const ChatSelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+const ChatSelectContent = React.forwardRef(({ className, children, collisionPadding = 12, position = "popper", style, viewportClassName, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
 	ref,
-	className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+	className: cn("relative z-50 flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+	collisionPadding,
 	position,
+	style: {
+		maxHeight: CHAT_SELECT_CONTENT_MAX_HEIGHT,
+		...style
+	},
 	...props,
 	children: [
 		/* @__PURE__ */ jsx(ChatSelectScrollUpButton, {}),
 		/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
-			className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+			className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", viewportClassName),
 			children
 		}),
 		/* @__PURE__ */ jsx(ChatSelectScrollDownButton, {})
@@ -204,6 +224,8 @@ const ChatUiPrimitives = {
 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) {
 	const { Popover, PopoverAnchor, PopoverContent } = ChatUiPrimitives;
 	const { elementRef: anchorRef, width: panelWidth } = useElementWidth();
@@ -233,16 +255,20 @@ function ChatSlashMenu(props) {
 			side: "top",
 			align: "start",
 			sideOffset: 10,
-			className: "z-[70] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-2xl border border-gray-200 bg-white/95 p-0 shadow-2xl backdrop-blur-md",
+			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: resolvedWidth ? { width: `${resolvedWidth}px` } : void 0,
+			style: {
+				maxHeight: SLASH_PANEL_MAX_HEIGHT,
+				width: resolvedWidth ? `${resolvedWidth}px` : void 0
+			},
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "grid min-h-[240px] grid-cols-[minmax(220px,300px)_minmax(0,1fr)]",
+				className: "grid min-h-0 flex-1 grid-cols-[minmax(220px,300px)_minmax(0,1fr)]",
+				style: { minHeight: SLASH_PANEL_MIN_HEIGHT },
 				children: [/* @__PURE__ */ jsx("div", {
 					ref: listRef,
 					role: "listbox",
 					"aria-label": texts.slashSectionLabel,
-					className: "custom-scrollbar max-h-[320px] overflow-y-auto border-r border-gray-200 p-2.5",
+					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
@@ -275,7 +301,7 @@ function ChatSlashMenu(props) {
 						})
 					})] })
 				}), /* @__PURE__ */ jsx("div", {
-					className: "min-w-0 p-2.5",
+					className: "custom-scrollbar min-h-0 min-w-0 overflow-y-auto overscroll-contain p-2.5",
 					onPointerDown: onDetailsPointerDown,
 					children: activeItem ? /* @__PURE__ */ jsxs("div", {
 						className: "space-y-3",
@@ -494,6 +520,7 @@ function filterOptions(options, query) {
 		].filter((value) => typeof value === "string" && value.trim().length > 0).join(" ").toLowerCase().includes(keyword);
 	});
 }
+const SKILL_PICKER_MAX_HEIGHT = createChatPopoverAvailableHeightLimit("24rem");
 function ChatInputBarSkillPicker(props) {
 	const { Input, Popover, PopoverContent, PopoverTrigger } = ChatUiPrimitives;
 	const { picker } = props;
@@ -580,10 +607,11 @@ function ChatInputBarSkillPicker(props) {
 	}), /* @__PURE__ */ jsxs(PopoverContent, {
 		side: "top",
 		align: "start",
-		className: "w-[360px] p-0",
+		className: "flex w-[min(360px,calc(100vw-1rem))] flex-col overflow-hidden p-0",
+		style: { maxHeight: SKILL_PICKER_MAX_HEIGHT },
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-2 border-b border-gray-100 px-4 py-3",
+				className: "shrink-0 space-y-2 border-b border-gray-100 px-4 py-3",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "text-sm font-semibold text-gray-900",
 					children: picker.title
@@ -608,7 +636,7 @@ function ChatInputBarSkillPicker(props) {
 				id: listId,
 				role: "listbox",
 				"aria-multiselectable": "true",
-				className: "custom-scrollbar max-h-[320px] overflow-y-auto",
+				className: "custom-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain",
 				children: picker.isLoading ? /* @__PURE__ */ jsx("div", {
 					className: "p-4 text-xs text-gray-500",
 					children: picker.loadingLabel
@@ -676,7 +704,7 @@ function ChatInputBarSkillPicker(props) {
 				})
 			}),
 			picker.manageHref && picker.manageLabel ? /* @__PURE__ */ jsx("div", {
-				className: "border-t border-gray-100 px-4 py-2.5",
+				className: "shrink-0 border-t border-gray-100 px-4 py-2.5",
 				children: /* @__PURE__ */ jsxs("a", {
 					href: picker.manageHref,
 					className: "inline-flex items-center gap-1.5 text-xs font-medium text-primary transition-colors hover:text-primary/80",
@@ -704,17 +732,173 @@ const CONTENT_WIDTH_BY_KEY = {
 	"session-type": "w-[220px]",
 	thinking: "w-[180px]"
 };
+const TOOLBAR_POPOVER_MAX_HEIGHT = createChatPopoverAvailableHeightLimit("18rem");
+const TOOLBAR_SELECT_MAX_HEIGHT = createChatSelectAvailableHeightLimit("18rem");
 function resolveMobileSelectedLabel(item) {
 	return item.key === "model" && item.selectedLabel ? item.selectedLabel.split("/").slice(1).join("/").trim() || item.selectedLabel : item.selectedLabel;
 }
-function ToolbarSelect({ item }) {
-	const { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } = ChatUiPrimitives;
-	const groups = item.groups?.filter((group) => group.options.length > 0) ?? (item.options.length > 0 ? [{
+function buildSelectGroups(item) {
+	return item.groups?.filter((group) => group.options.length > 0) ?? (item.options.length > 0 ? [{
 		key: `${item.key}-default`,
 		options: item.options
 	}] : []);
-	const hasOptions = groups.some((group) => group.options.length > 0);
+}
+function ToolbarSelectTriggerContent({ item }) {
 	const mobileSelectedLabel = resolveMobileSelectedLabel(item);
+	if (item.selectedLabel) return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center gap-2 text-left",
+		children: [
+			/* @__PURE__ */ jsx(ToolbarIcon, { icon: item.icon }),
+			/* @__PURE__ */ jsx("span", {
+				className: "nextclaw-chat-toolbar-mobile-label truncate text-xs font-semibold text-gray-700 sm:hidden [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
+				children: mobileSelectedLabel
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nextclaw-chat-toolbar-label hidden truncate text-xs font-semibold text-gray-700 sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
+				children: item.selectedLabel
+			})
+		]
+	});
+	if (item.loading) return /* @__PURE__ */ jsx("div", { className: "h-3 w-24 animate-pulse rounded bg-gray-200" });
+	return /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: item.placeholder
+	});
+}
+function ToolbarSelectOptionContent({ option }) {
+	return option.description ? /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-0.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate text-xs font-semibold text-gray-800",
+			children: option.label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate text-[11px] text-gray-500",
+			children: option.description
+		})]
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "truncate text-xs font-semibold text-gray-800",
+		children: option.label
+	});
+}
+function ToolbarSearchableSelect({ item }) {
+	const { Input, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const groups = buildSelectGroups(item);
+	const filteredGroups = useMemo(() => {
+		const normalizedQuery = query.trim().toLowerCase();
+		if (!normalizedQuery) return groups;
+		return groups.map((group) => ({
+			...group,
+			options: group.options.filter((option) => [
+				option.label,
+				option.value,
+				option.description
+			].filter((value) => Boolean(value)).some((value) => value.toLowerCase().includes(normalizedQuery)))
+		})).filter((group) => group.options.length > 0);
+	}, [groups, query]);
+	const hasOptions = groups.some((group) => group.options.length > 0);
+	const hasFilteredOptions = filteredGroups.some((group) => group.options.length > 0);
+	const action = item.optionAction;
+	const activeValues = new Set(action?.activeValues ?? []);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": item.selectedLabel ? `${item.placeholder}: ${item.selectedLabel}` : item.placeholder,
+				disabled: item.disabled,
+				className: `nextclaw-chat-toolbar-select-trigger inline-flex h-8 w-auto items-center justify-between rounded-lg border-0 bg-transparent px-2 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 sm:px-3 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!basis-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!justify-center [@container_nextclaw-chat-input-bar_(max-width:440px)]:!max-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!min-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!px-0 ${TRIGGER_WIDTH_BY_KEY[item.key] ?? ""}`,
+				children: [/* @__PURE__ */ jsx(ToolbarSelectTriggerContent, { item }), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 h-3.5 w-3.5 shrink-0 text-gray-400 [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden" })]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: `flex flex-col overflow-hidden p-2 ${CONTENT_WIDTH_BY_KEY[item.key] ?? ""}`,
+			style: { maxHeight: TOOLBAR_POPOVER_MAX_HEIGHT },
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative mb-2 shrink-0",
+					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-400" }), /* @__PURE__ */ jsx(Input, {
+						value: query,
+						onChange: (event) => setQuery(event.currentTarget.value),
+						placeholder: item.search?.placeholder ?? item.placeholder,
+						className: "h-8 rounded-lg pl-8 text-xs"
+					})]
+				}),
+				!hasOptions ? item.loading ? /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2 px-2 py-1",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-36 animate-pulse rounded bg-gray-200" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-gray-200" })
+					]
+				}) : item.emptyLabel ? /* @__PURE__ */ jsx("div", {
+					className: "px-2 py-1 text-xs text-gray-500",
+					children: item.emptyLabel
+				}) : null : null,
+				hasOptions && !hasFilteredOptions ? /* @__PURE__ */ jsx("div", {
+					className: "px-2 py-1 text-xs text-gray-500",
+					children: item.search?.emptyLabel ?? item.emptyLabel
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+					children: filteredGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", {
+						className: groupIndex > 0 ? "border-t border-gray-100 pt-1" : void 0,
+						children: [group.label ? /* @__PURE__ */ jsx("div", {
+							className: "px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-gray-500",
+							children: group.label
+						}) : null, group.options.map((option) => {
+							const isSelected = item.value === option.value;
+							const isActive = activeValues.has(option.value);
+							const actionLabel = isActive ? action?.activeLabel : action?.inactiveLabel;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "group flex items-center gap-1 rounded-md hover:bg-gray-100",
+								children: [/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-2 text-left",
+									onClick: () => {
+										item.onValueChange(option.value);
+										setOpen(false);
+										setQuery("");
+									},
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "min-w-0 flex-1",
+										children: /* @__PURE__ */ jsx(ToolbarSelectOptionContent, { option })
+									}), isSelected ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-primary" }) : null]
+								}), action && actionLabel ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": actionLabel,
+										"aria-pressed": isActive,
+										className: "mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-white hover:text-amber-500 focus:outline-none focus:ring-1 focus:ring-primary/40",
+										onClick: (event) => {
+											event.stopPropagation();
+											action.onToggle(option.value, !isActive);
+										},
+										children: /* @__PURE__ */ jsx(Star, { className: `h-3.5 w-3.5 ${isActive ? "fill-amber-400 text-amber-500" : ""}` })
+									})
+								}), /* @__PURE__ */ jsx(TooltipContent, {
+									side: "left",
+									children: /* @__PURE__ */ jsx("p", {
+										className: "text-xs",
+										children: actionLabel
+									})
+								})] }) }) : null]
+							}, option.value);
+						})]
+					}, group.key))
+				})
+			]
+		})]
+	});
+}
+function ToolbarSelect({ item }) {
+	if (item.search) return /* @__PURE__ */ jsx(ToolbarSearchableSelect, { item });
+	const { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } = ChatUiPrimitives;
+	const groups = buildSelectGroups(item);
+	const hasOptions = groups.some((group) => group.options.length > 0);
 	return /* @__PURE__ */ jsxs(Select, {
 		value: item.value,
 		onValueChange: item.onValueChange,
@@ -723,22 +907,10 @@ function ToolbarSelect({ item }) {
 			"aria-label": item.selectedLabel ? `${item.placeholder}: ${item.selectedLabel}` : item.placeholder,
 			title: item.selectedLabel,
 			className: `nextclaw-chat-toolbar-select-trigger h-8 w-auto rounded-lg border-0 bg-transparent px-2 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 sm:px-3 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!basis-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!justify-center [@container_nextclaw-chat-input-bar_(max-width:440px)]:!max-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!min-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!px-0 ${TRIGGER_WIDTH_BY_KEY[item.key] ?? ""}`,
-			children: item.selectedLabel ? /* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-2 text-left",
-				children: [
-					/* @__PURE__ */ jsx(ToolbarIcon, { icon: item.icon }),
-					/* @__PURE__ */ jsx("span", {
-						className: "nextclaw-chat-toolbar-mobile-label truncate text-xs font-semibold text-gray-700 sm:hidden [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
-						children: mobileSelectedLabel
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "nextclaw-chat-toolbar-label hidden truncate text-xs font-semibold text-gray-700 sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
-						children: item.selectedLabel
-					})
-				]
-			}) : item.loading ? /* @__PURE__ */ jsx("div", { className: "h-3 w-24 animate-pulse rounded bg-gray-200" }) : /* @__PURE__ */ jsx(SelectValue, { placeholder: item.placeholder })
+			children: item.selectedLabel || item.loading ? /* @__PURE__ */ jsx(ToolbarSelectTriggerContent, { item }) : /* @__PURE__ */ jsx(SelectValue, { placeholder: item.placeholder })
 		}), /* @__PURE__ */ jsxs(SelectContent, {
 			className: CONTENT_WIDTH_BY_KEY[item.key] ?? "",
+			style: { maxHeight: TOOLBAR_SELECT_MAX_HEIGHT },
 			children: [!hasOptions ? item.loading ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 px-3 py-2",
 				children: [
@@ -752,19 +924,7 @@ function ToolbarSelect({ item }) {
 			}) : null : null, groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [groupIndex > 0 ? /* @__PURE__ */ jsx(SelectSeparator, {}) : null, /* @__PURE__ */ jsxs(SelectGroup, { children: [group.label ? /* @__PURE__ */ jsx(SelectLabel, { children: group.label }) : null, group.options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
 				value: option.value,
 				className: "py-2",
-				children: option.description ? /* @__PURE__ */ jsxs("div", {
-					className: "flex min-w-0 flex-col gap-0.5",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate text-xs font-semibold text-gray-800",
-						children: option.label
-					}), /* @__PURE__ */ jsx("span", {
-						className: "truncate text-[11px] text-gray-500",
-						children: option.description
-					})]
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "truncate text-xs font-semibold text-gray-800",
-					children: option.label
-				})
+				children: /* @__PURE__ */ jsx(ToolbarSelectOptionContent, { option })
 			}, option.value))] })] }, group.key))]
 		})]
 	});
@@ -991,10 +1151,10 @@ function buildTokenClassName(tokenKind) {
 		"transition"
 	].join(" ");
 }
-function ChatComposerTokenChip(props) {
+function ChatComposerTokenChip({ label, tokenKind }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		className: props.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: props.tokenKind === "file" ? /* @__PURE__ */ jsxs("svg", {
+		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",
@@ -1025,8 +1185,8 @@ function ChatComposerTokenChip(props) {
 			]
 		})
 	}), /* @__PURE__ */ jsx("span", {
-		className: props.tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-700" : "truncate",
-		children: props.label
+		className: tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-700" : "truncate",
+		children: label
 	})] });
 }
 var ChatComposerTokenNode = class ChatComposerTokenNode extends DecoratorNode {
@@ -1514,8 +1674,8 @@ var LexicalComposerHandleOwner = class {
 		this.focusComposer = () => {
 			this.params.focusComposer();
 		};
-		this.focusComposerAtEnd = () => {
-			this.params.focusComposerAtEnd();
+		this.focusComposerAtEnd = (nodes) => {
+			this.params.focusComposerAtEnd(nodes);
 		};
 		this.syncSelectedSkills = (nextKeys, options) => {
 			this.params.publishSnapshot(syncSelectedSkillsIntoChatComposer({
@@ -1703,7 +1863,10 @@ function ChatComposerBindingsPlugin({ disabled, editorRef, editorSignatureRef, i
 }
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-input-bar-tokenized-composer.tsx
-const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedComposer(props, ref) {
+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 editorRef = useRef(null);
 	const selectionRef = useRef(null);
 	const pendingSelectionRef = useRef(null);
@@ -1712,23 +1875,27 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 	const isApplyingExternalUpdateRef = useRef(false);
 	const editorSignatureRef = useRef("");
 	const lastPublishedSignatureRef = useRef("");
-	const syncSlashState = (nodes, selection) => {
+	const syncSlashState = useCallback((nodes, selection) => {
 		const trigger = resolveChatComposerSlashTrigger(nodes, selection);
-		props.onSlashTriggerChange?.(trigger);
-		props.onSlashQueryChange?.(trigger?.query ?? null);
-		props.onSlashOpenChange(trigger !== null);
-	};
-	const readCurrentNodes = () => {
-		return props.nodes;
-	};
-	const readCurrentSelection = () => {
+		onSlashTriggerChange?.(trigger);
+		onSlashQueryChange?.(trigger?.query ?? null);
+		onSlashOpenChange(trigger !== null);
+	}, [
+		onSlashOpenChange,
+		onSlashQueryChange,
+		onSlashTriggerChange
+	]);
+	const readCurrentNodes = useCallback(() => {
+		return nodes;
+	}, [nodes]);
+	const readCurrentSelection = useCallback(() => {
 		if (selectionRef.current) return selectionRef.current;
 		if (!editorRef.current) return null;
 		const snapshot = readChatComposerSnapshotFromEditorState(editorRef.current.getEditorState());
 		selectionRef.current = snapshot.selection;
 		return snapshot.selection;
-	};
-	const publishSnapshot = (snapshot, options) => {
+	}, []);
+	const publishSnapshot = useCallback((snapshot, options) => {
 		selectionRef.current = snapshot.selection;
 		pendingSelectionRef.current = snapshot.selection;
 		if (options?.focusAfterSync) shouldFocusAfterSyncRef.current = true;
@@ -1736,46 +1903,64 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 		syncSlashState(snapshot.nodes, snapshot.selection);
 		if (options?.forcePublish || signature !== lastPublishedSignatureRef.current) {
 			lastPublishedSignatureRef.current = signature;
-			props.onNodesChange(snapshot.nodes);
+			onNodesChange(snapshot.nodes);
 		}
-	};
-	const focusComposer = () => {
+	}, [onNodesChange, syncSlashState]);
+	const focusComposer = useCallback(() => {
 		const editor = editorRef.current;
 		if (!editor) return;
 		editor.getRootElement()?.focus({ preventScroll: true });
 		const targetSelection = selectionRef.current;
 		if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
 		editor.focus();
-	};
-	const focusComposerAtEnd = () => {
+	}, []);
+	const focusComposerAtEnd = useCallback((nodes) => {
 		const editor = editorRef.current;
 		if (!editor) return;
-		const end = readChatComposerSnapshotFromEditorState(editor.getEditorState()).nodes.reduce((cursor, node) => cursor + (node.type === "text" ? node.text.length : 1), 0);
+		const end = getChatComposerDocumentLength(nodes ?? readChatComposerSnapshotFromEditorState(editor.getEditorState()).nodes);
 		const targetSelection = {
 			start: end,
 			end
 		};
 		selectionRef.current = targetSelection;
+		pendingSelectionRef.current = targetSelection;
 		editor.getRootElement()?.focus({ preventScroll: true });
-		syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
-		editor.focus();
-	};
-	const readComposerSnapshot = () => ({
+		if (nodes) {
+			isApplyingExternalUpdateRef.current = true;
+			const signature = getChatComposerNodesSignature(nodes);
+			syncLexicalEditorFromChatComposerState(editor, nodes, targetSelection);
+			editorSignatureRef.current = signature;
+			lastPublishedSignatureRef.current = signature;
+			requestAnimationFrame(() => {
+				isApplyingExternalUpdateRef.current = false;
+			});
+		} else syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+		editor.focus(() => {
+			syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+		});
+	}, []);
+	const readComposerSnapshot = useCallback(() => ({
 		nodes: readCurrentNodes(),
 		selection: readCurrentSelection()
-	});
+	}), [readCurrentNodes, readCurrentSelection]);
 	useImperativeHandle(ref, () => createLexicalComposerHandle({
 		focusComposer,
 		focusComposerAtEnd,
-		onSlashItemSelect: props.onSlashItemSelect,
+		onSlashItemSelect,
 		optionsReader: readComposerSnapshot,
 		publishSnapshot
-	}), [props.onSlashItemSelect]);
+	}), [
+		focusComposer,
+		focusComposerAtEnd,
+		onSlashItemSelect,
+		publishSnapshot,
+		readComposerSnapshot
+	]);
 	return /* @__PURE__ */ jsxs(LexicalComposer, {
 		initialConfig: useMemo(() => ({
-			editable: !props.disabled,
+			editable: !disabled,
 			editorState: () => {
-				writeChatComposerStateToLexicalRoot(props.nodes, null);
+				writeChatComposerStateToLexicalRoot(nodes, null);
 			},
 			namespace: "NextClawChatComposerLexical",
 			nodes: [ChatComposerTokenNode],
@@ -1783,7 +1968,7 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 				throw error;
 			},
 			theme: {}
-		}), [props.disabled, props.nodes]),
+		}), [disabled, nodes]),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "px-3 py-2 sm:px-4 sm:py-2.5",
@@ -1794,7 +1979,7 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 							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-gray-800 outline-none",
 							onBeforeInput: (event) => {
 								handleLexicalComposerBeforeInput({
-									disabled: props.disabled,
+									disabled,
 									event,
 									isComposing: isComposingRef.current,
 									publishSnapshot,
@@ -1819,15 +2004,15 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 							},
 							onPaste: (event) => {
 								const files = Array.from(event.clipboardData.files ?? []);
-								if (files.length > 0 && props.onFilesAdd) {
+								if (files.length > 0 && onFilesAdd) {
 									event.preventDefault();
-									props.onFilesAdd(files);
+									onFilesAdd(files);
 								}
 							}
 						}),
 						placeholder: /* @__PURE__ */ jsx("div", {
 							className: "pointer-events-none absolute left-3 top-2 select-none text-sm leading-6 text-gray-400 sm:left-4 sm:top-2.5",
-							children: props.placeholder
+							children: placeholder
 						}),
 						ErrorBoundary: LexicalErrorBoundary
 					})
@@ -1835,16 +2020,16 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 			}),
 			/* @__PURE__ */ jsx(EditorRefPlugin, { editorRef }),
 			/* @__PURE__ */ jsx(ChatComposerBindingsPlugin, {
-				disabled: props.disabled,
+				disabled,
 				editorRef,
 				editorSignatureRef,
 				isApplyingExternalUpdateRef,
 				isComposingRef,
 				lastPublishedSignatureRef,
-				nodes: props.nodes,
+				nodes,
 				onBlur: () => {
-					props.onSlashQueryChange?.(null);
-					props.onSlashOpenChange(false);
+					onSlashQueryChange?.(null);
+					onSlashOpenChange(false);
 				},
 				onKeyDown: (event) => {
 					const editor = editorRef.current;
@@ -1852,19 +2037,19 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 					const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
 					selectionRef.current = snapshot.selection;
 					return handleLexicalComposerKeyboardCommand({
-						actions: props.actions,
-						activeSlashIndex: props.activeSlashIndex,
+						actions,
+						activeSlashIndex,
 						nativeEvent: event,
-						onSlashActiveIndexChange: props.onSlashActiveIndexChange,
-						onSlashItemSelect: props.onSlashItemSelect,
-						onSlashOpenChange: props.onSlashOpenChange,
-						onSlashQueryChange: props.onSlashQueryChange,
+						onSlashActiveIndexChange,
+						onSlashItemSelect,
+						onSlashOpenChange,
+						onSlashQueryChange,
 						publishSnapshot,
-						slashItems: props.slashItems,
+						slashItems,
 						snapshot
 					});
 				},
-				onNodesChange: props.onNodesChange,
+				onNodesChange,
 				pendingSelectionRef,
 				selectionRef,
 				shouldFocusAfterSyncRef,
@@ -1898,45 +2083,37 @@ function InputBarHint({ hint }) {
 		})
 	});
 }
-const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
+const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, 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 activeSlashItem = props.slashMenu.items[activeSlashIndex] ?? null;
+	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;
-	useEffect(() => {
-		setActiveSlashIndex((current) => {
-			if (props.slashMenu.items.length === 0) return 0;
-			return Math.min(current, props.slashMenu.items.length - 1);
-		});
-	}, [props.slashMenu.items.length]);
-	useEffect(() => {
-		if (activeSlashTriggerStart === null && dismissedSlashTriggerStart !== null) setDismissedSlashTriggerStart(null);
-	}, [activeSlashTriggerStart, dismissedSlashTriggerStart]);
 	const toolbar = useMemo(() => {
-		if (!props.toolbar.skillPicker) return props.toolbar;
+		if (!toolbarProps.skillPicker) return toolbarProps;
 		return {
-			...props.toolbar,
+			...toolbarProps,
 			skillPicker: {
-				...props.toolbar.skillPicker,
+				...toolbarProps.skillPicker,
 				onSelectedKeysChange: (nextKeys) => {
-					composerRef.current?.syncSelectedSkills(nextKeys, props.toolbar.skillPicker?.options ?? []);
-					props.toolbar.skillPicker?.onSelectedKeysChange(nextKeys);
+					composerRef.current?.syncSelectedSkills(nextKeys, toolbarProps.skillPicker?.options ?? []);
+					toolbarProps.skillPicker?.onSelectedKeysChange(nextKeys);
 				}
 			}
 		};
-	}, [props.toolbar]);
+	}, [toolbarProps]);
 	useImperativeHandle(ref, () => ({
 		insertFileToken: (tokenKey, label) => composerRef.current?.insertFileToken(tokenKey, label),
 		insertFileTokens: (tokens) => composerRef.current?.insertFileTokens(tokens),
 		focusComposer: () => composerRef.current?.focusComposer(),
-		focusComposerAtEnd: () => composerRef.current?.focusComposerAtEnd()
+		focusComposerAtEnd: (nodes) => composerRef.current?.focusComposerAtEnd(nodes)
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-gray-200/80 bg-white px-3 py-3 sm:px-4 sm:py-4",
+		className: surface === "embedded" ? "bg-transparent px-0 py-0" : "border-t border-gray-200/80 bg-white px-3 py-3 sm:px-4 sm:py-4",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "nextclaw-chat-input-bar-shell mx-auto w-full max-w-[min(1120px,100%)] [container:nextclaw-chat-input-bar/inline-size]",
 			children: /* @__PURE__ */ jsxs("div", {
@@ -1946,22 +2123,24 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 						className: "relative",
 						children: [/* @__PURE__ */ jsx(ChatInputBarTokenizedComposer, {
 							ref: composerRef,
-							nodes: props.composer.nodes,
-							placeholder: props.composer.placeholder,
-							disabled: props.composer.disabled,
-							slashItems: props.slashMenu.items,
-							onSlashItemSelect: props.slashMenu.onSelectItem,
-							actions: props.toolbar.actions,
-							activeSlashIndex,
-							onNodesChange: props.composer.onNodesChange,
-							onFilesAdd: props.composer.onFilesAdd,
+							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);
-								props.composer.onSlashQueryChange?.(query);
+								composer.onSlashQueryChange?.(query);
 							},
 							onSlashTriggerChange: (trigger) => {
-								setActiveSlashTriggerStart(trigger?.start ?? null);
+								const nextTriggerStart = trigger?.start ?? null;
+								setActiveSlashTriggerStart(nextTriggerStart);
+								if (nextTriggerStart === null) setDismissedSlashTriggerStart(null);
 							},
 							onSlashOpenChange: (open) => {
 								if (!open) dismissSlashTrigger();
@@ -1969,11 +2148,11 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 							onSlashActiveIndexChange: setActiveSlashIndex
 						}), /* @__PURE__ */ jsx(ChatSlashMenu, {
 							isOpen: isSlashPanelOpen,
-							isLoading: props.slashMenu.isLoading,
-							items: props.slashMenu.items,
-							activeIndex: activeSlashIndex,
+							isLoading: slashMenu.isLoading,
+							items: slashMenu.items,
+							activeIndex: activeSlashIndexInRange,
 							activeItem: activeSlashItem,
-							texts: props.slashMenu.texts,
+							texts: slashMenu.texts,
 							onSelectItem: (item) => {
 								setDismissedSlashTriggerStart(null);
 								composerRef.current?.insertSlashItem(item);
@@ -1990,7 +2169,7 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 							onSetActiveIndex: setActiveSlashIndex
 						})]
 					}),
-					/* @__PURE__ */ jsx(InputBarHint, { hint: props.hint }),
+					/* @__PURE__ */ jsx(InputBarHint, { hint }),
 					/* @__PURE__ */ jsx(ChatInputBarToolbar, { ...toolbar })
 				]
 			})
@@ -2021,7 +2200,7 @@ function ChatMessageAvatar({ role }) {
 	});
 }
 //#endregion
-//#region src/components/chat/utils/copy-text.ts
+//#region src/components/chat/utils/copy-text.utils.ts
 function canUseClipboardApi() {
 	return typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function";
 }
@@ -2032,48 +2211,75 @@ function restoreSelection(ranges) {
 	selection.removeAllRanges();
 	ranges.forEach((range) => selection.addRange(range));
 }
-function fallbackCopyText(text) {
-	if (typeof document === "undefined" || !document.body) return false;
+function snapshotCopyContext() {
 	const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 	const activeInput = activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement ? activeElement : null;
-	const activeSelection = activeInput ? {
+	const activeInputSelection = activeInput ? {
+		input: activeInput,
 		start: activeInput.selectionStart,
 		end: activeInput.selectionEnd
 	} : null;
 	const selection = document.getSelection();
-	const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index).cloneRange()) : [];
+	return {
+		activeElement,
+		activeInputSelection,
+		ranges: selection ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index).cloneRange()) : []
+	};
+}
+function createCopyTextarea(text) {
 	const textarea = document.createElement("textarea");
 	textarea.value = text;
 	textarea.setAttribute("readonly", "");
 	textarea.setAttribute("aria-hidden", "true");
-	textarea.style.position = "fixed";
-	textarea.style.top = "0";
-	textarea.style.left = "-9999px";
-	textarea.style.opacity = "0";
-	textarea.style.pointerEvents = "none";
-	textarea.style.fontSize = "12pt";
-	document.body.appendChild(textarea);
+	Object.assign(textarea.style, {
+		fontSize: "12pt",
+		left: "-9999px",
+		opacity: "0",
+		pointerEvents: "none",
+		position: "fixed",
+		top: "0"
+	});
+	return textarea;
+}
+function focusWithoutScroll(element) {
 	try {
-		textarea.focus({ preventScroll: true });
+		element.focus({ preventScroll: true });
 	} catch {
-		textarea.focus();
+		element.focus();
 	}
+}
+function selectTextarea(textarea) {
+	focusWithoutScroll(textarea);
 	textarea.select();
 	textarea.setSelectionRange(0, textarea.value.length);
-	let copied = false;
+}
+function runCopyCommand() {
 	try {
-		copied = typeof document.execCommand === "function" && document.execCommand("copy");
+		return typeof document.execCommand === "function" && document.execCommand("copy");
 	} catch {
-		copied = false;
+		return false;
 	}
+}
+function restoreInputSelection(snapshot) {
+	if (!snapshot.activeInputSelection) return false;
+	const { input, start, end } = snapshot.activeInputSelection;
+	if (start === null || end === null) return false;
+	input.setSelectionRange(start, end);
+	return true;
+}
+function restoreCopyContext(snapshot) {
+	if (snapshot.activeElement) focusWithoutScroll(snapshot.activeElement);
+	if (!restoreInputSelection(snapshot)) restoreSelection(snapshot.ranges);
+}
+function fallbackCopyText(text) {
+	if (typeof document === "undefined" || !document.body) return false;
+	const snapshot = snapshotCopyContext();
+	const textarea = createCopyTextarea(text);
+	document.body.appendChild(textarea);
+	selectTextarea(textarea);
+	const copied = runCopyCommand();
 	textarea.remove();
-	if (activeElement) try {
-		activeElement.focus({ preventScroll: true });
-	} catch {
-		activeElement.focus();
-	}
-	if (activeInput && activeSelection) activeInput.setSelectionRange(activeSelection.start, activeSelection.end);
-	else restoreSelection(ranges);
+	restoreCopyContext(snapshot);
 	return copied;
 }
 async function copyText(text) {
@@ -3713,6 +3919,20 @@ function GenericToolCard({ card, onToolAction, renderToolAgent }) {
 	})] });
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/tool-card/tool-card-panel-app.tsx
+function PanelAppInlineToolCard({ card, onToolAction, renderPanelAppCard }) {
+	const { panelApp } = card;
+	if (!panelApp) return /* @__PURE__ */ jsx(GenericToolCard, {
+		card,
+		onToolAction
+	});
+	if (renderPanelAppCard) return renderPanelAppCard(panelApp);
+	return /* @__PURE__ */ jsx(GenericToolCard, {
+		card,
+		onToolAction
+	});
+}
+//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-tool-card.tsx
 function isTerminalTool(name) {
 	const lowered = name.toLowerCase();
@@ -3726,7 +3946,12 @@ function isSearchTool(name) {
 	const lowered = name.toLowerCase();
 	return lowered === "grep_search" || lowered === "find_files" || lowered.includes("search");
 }
-function ChatToolCard({ card, onToolAction, onFileOpen, renderToolAgent }) {
+function ChatToolCard({ card, onToolAction, onFileOpen, renderToolAgent, renderPanelAppCard }) {
+	if (card.panelApp) return /* @__PURE__ */ jsx(PanelAppInlineToolCard, {
+		card,
+		onToolAction,
+		renderPanelAppCard
+	});
 	if (isTerminalTool(card.toolName)) return /* @__PURE__ */ jsx(TerminalExecutionView, { card });
 	if (isFileEditTool(card.toolName)) return /* @__PURE__ */ jsx(FileOperationView, {
 		card,
@@ -3740,27 +3965,8 @@ function ChatToolCard({ card, onToolAction, onFileOpen, renderToolAgent }) {
 	});
 }
 //#endregion
-//#region src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-function ChatUnknownPart(props) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "font-semibold text-gray-700",
-			children: [
-				props.label,
-				": ",
-				props.rawType
-			]
-		}), props.text ? /* @__PURE__ */ jsx("pre", {
-			className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500",
-			children: props.text
-		}) : null]
-	});
-}
-//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message.tsx
-const ChatMessage = memo(function ChatMessage(props) {
-	const { message, texts, onToolAction, onFileOpen, renderToolAgent } = props;
+const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, onFileOpen, renderToolAgent, renderPanelAppCard }) {
 	const { role } = message;
 	const isUser = role === "user";
 	const isMessageInProgress = message.status === "pending" || message.status === "streaming";
@@ -3770,61 +3976,77 @@ const ChatMessage = memo(function ChatMessage(props) {
 			className: "space-y-2",
 			children: message.parts.map((part, index) => {
 				const { type } = part;
-				if (type === "markdown") return /* @__PURE__ */ jsx(ChatMessageMarkdown, {
-					text: part.text,
-					role,
-					texts,
-					onFileOpen
-				}, `markdown-${index}`);
-				if (type === "inline-content") return /* @__PURE__ */ jsx(ChatMessageInlineContent, {
-					segments: part.segments,
-					role,
-					texts,
-					onFileOpen
-				}, `inline-content-${index}`);
-				if (type === "reasoning") return /* @__PURE__ */ jsx(ChatReasoningBlock, {
-					label: part.label,
-					text: part.text,
-					isUser,
-					isInProgress: isMessageInProgress && index === message.parts.length - 1
-				}, `reasoning-${index}`);
-				if (type === "tool-card") return /* @__PURE__ */ jsx("div", {
-					className: "mt-0.5",
-					children: /* @__PURE__ */ jsx(ChatToolCard, {
-						card: part.card,
-						onToolAction,
-						onFileOpen,
-						renderToolAgent
-					})
-				}, `tool-${index}`);
-				if (type === "file") return /* @__PURE__ */ jsx(ChatMessageFile, {
-					file: part.file,
-					isUser,
-					texts
-				}, `file-${index}`);
-				if (type === "unknown") return /* @__PURE__ */ jsx(ChatUnknownPart, {
-					label: part.label,
-					rawType: part.rawType,
-					text: part.text
-				}, `unknown-${index}`);
+				if (type === "markdown") {
+					const { text } = part;
+					return /* @__PURE__ */ jsx(ChatMessageMarkdown, {
+						text,
+						role,
+						texts,
+						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, {
+						label,
+						text,
+						isUser,
+						isInProgress: isMessageInProgress && index === message.parts.length - 1
+					}, `reasoning-${index}`);
+				}
+				if (type === "tool-card") {
+					const { card } = part;
+					return /* @__PURE__ */ jsx("div", {
+						className: "mt-0.5",
+						children: /* @__PURE__ */ jsx(ChatToolCard, {
+							card,
+							onToolAction,
+							onFileOpen,
+							renderToolAgent,
+							renderPanelAppCard
+						})
+					}, `tool-${index}`);
+				}
+				if (type === "file") {
+					const { file } = part;
+					return /* @__PURE__ */ jsx(ChatMessageFile, {
+						file,
+						isUser,
+						texts
+					}, `file-${index}`);
+				}
+				if (type === "unknown") {
+					const { label, rawType, text } = part;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "font-semibold text-gray-700",
+							children: [
+								label,
+								": ",
+								rawType
+							]
+						}), text ? /* @__PURE__ */ jsx("pre", {
+							className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500",
+							children: text
+						}) : null]
+					}, `unknown-${index}`);
+				}
 				return null;
 			})
 		})
 	});
 });
 //#endregion
-//#region src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-function ChatMessageMeta(props) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("px-1 text-[11px] leading-4 text-gray-400", props.isUser ? "text-right" : "text-left"),
-		children: [
-			props.roleLabel,
-			" · ",
-			props.timestampLabel
-		]
-	});
-}
-//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-action-copy.tsx
 function ChatMessageActionCopy({ message, texts }) {
 	const messageText = useMemo(() => {
@@ -3920,11 +4142,11 @@ function ChatTypingIndicator({ label }) {
 		})]
 	});
 }
-function ChatMessageList(props) {
-	const visibleMessages = props.messages.filter(hasRenderableMessageContent);
+function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAction, renderPanelAppCard, renderToolAgent, texts }) {
+	const visibleMessages = messages.filter(hasRenderableMessageContent);
 	const hasRenderableAssistantDraft = visibleMessages.some((message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending"));
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("space-y-5", props.className),
+		className: cn("space-y-5", className),
 		children: [visibleMessages.map((message) => {
 			const isUser = message.role === "user";
 			const isGenerating = !isUser && (message.status === "streaming" || message.status === "pending");
@@ -3936,28 +4158,32 @@ function ChatMessageList(props) {
 						className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"),
 						children: [/* @__PURE__ */ jsx(ChatMessage, {
 							message,
-							texts: props.texts,
-							onToolAction: props.onToolAction,
-							onFileOpen: props.onFileOpen,
-							renderToolAgent: props.renderToolAgent
+							texts,
+							onToolAction,
+							onFileOpen,
+							renderToolAgent,
+							renderPanelAppCard
 						}), /* @__PURE__ */ jsx("div", {
 							className: cn("flex items-center gap-2", isUser && "justify-end"),
-							children: isGenerating ? /* @__PURE__ */ jsx(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChatMessageMeta, {
-								roleLabel: message.roleLabel,
-								timestampLabel: message.timestampLabel,
-								isUser
+							children: isGenerating ? /* @__PURE__ */ jsx(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+								className: cn("px-1 text-[11px] leading-4 text-gray-400", isUser ? "text-right" : "text-left"),
+								children: [
+									message.roleLabel,
+									" · ",
+									message.timestampLabel
+								]
 							}), !isUser ? /* @__PURE__ */ jsx(ChatMessageActionCopy, {
 								message,
-								texts: props.texts
+								texts
 							}) : null] })
 						})]
 					}),
 					isUser ? /* @__PURE__ */ jsx(ChatMessageAvatar, { role: message.role }) : null
 				]
 			}, message.id);
-		}), props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs("div", {
+		}), isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-start gap-3",
-			children: [/* @__PURE__ */ jsx(ChatMessageAvatar, { role: "assistant" }), /* @__PURE__ */ jsx(ChatTypingIndicator, { label: props.texts.typingLabel })]
+			children: [/* @__PURE__ */ jsx(ChatMessageAvatar, { role: "assistant" }), /* @__PURE__ */ jsx(ChatTypingIndicator, { label: texts.typingLabel })]
 		}) : null]
 	});
 }