@nextclaw/agent-chat-ui 0.1.1 → 0.2.1

package/dist/index.js

@@ -1,40 +1,5 @@
-// src/components/chat/ui/chat-input-bar/chat-input-bar-textarea.tsx
-import { jsx } from "react/jsx-runtime";
-function ChatInputBarTextarea(props) {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      value: props.value,
-      onChange: (event) => props.onValueChange(event.target.value),
-      disabled: props.disabled,
-      onKeyDown: props.onKeyDown,
-      placeholder: props.placeholder,
-      className: "w-full min-h-[68px] max-h-[220px] resize-y bg-transparent px-4 py-3 text-sm text-gray-800 outline-none placeholder:text-gray-400"
-    }
-  );
-}
-
-// src/components/chat/ui/chat-input-bar/chat-input-bar-selected-items.tsx
-import { X } from "lucide-react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function ChatInputBarSelectedItems(props) {
-  if (props.items.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-2", children: props.items.map((item) => /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: () => props.onRemove(item.key),
-      className: "inline-flex max-w-[200px] items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary",
-      children: [
-        /* @__PURE__ */ jsx2("span", { className: "truncate", children: item.label }),
-        /* @__PURE__ */ jsx2(X, { className: "h-3 w-3 shrink-0" })
-      ]
-    },
-    item.key
-  )) }) });
-}
+// src/components/chat/ui/chat-input-bar/chat-input-bar.tsx
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 
 // src/components/chat/ui/chat-input-bar/chat-slash-menu.tsx
 import { useMemo, useRef as useRef2 } from "react";
@@ -92,8 +57,8 @@ function cn(...inputs) {
 }
 
 // src/components/chat/default-skin/input.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ChatInput = React.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx3(
+import { jsx } from "react/jsx-runtime";
+var ChatInput = React.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
   "input",
   {
     type,
@@ -110,11 +75,11 @@ ChatInput.displayName = "ChatInput";
 // src/components/chat/default-skin/popover.tsx
 import * as React2 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ChatPopover = PopoverPrimitive.Root;
 var ChatPopoverTrigger = PopoverPrimitive.Trigger;
 var ChatPopoverAnchor = PopoverPrimitive.Anchor;
-var ChatPopoverContent = React2.forwardRef(({ className, sideOffset = 8, align = "start", ...props }, ref) => /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+var ChatPopoverContent = React2.forwardRef(({ className, sideOffset = 8, align = "start", ...props }, ref) => /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
   PopoverPrimitive.Content,
   {
     ref,
@@ -133,10 +98,10 @@ ChatPopoverContent.displayName = PopoverPrimitive.Content.displayName;
 import * as React3 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ChatSelect = SelectPrimitive.Root;
 var ChatSelectValue = SelectPrimitive.Value;
-var ChatSelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+var ChatSelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -147,16 +112,16 @@ var ChatSelectTrigger = React3.forwardRef(({ className, children, ...props }, re
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx3(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 ChatSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var ChatSelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.ScrollUpButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx5(ChevronUp, { className: "h-4 w-4" }) }));
+var ChatSelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SelectPrimitive.ScrollUpButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx3(ChevronUp, { className: "h-4 w-4" }) }));
 ChatSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var ChatSelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.ScrollDownButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4" }) }));
+var ChatSelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SelectPrimitive.ScrollDownButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4" }) }));
 ChatSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var ChatSelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+var ChatSelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx3(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -168,20 +133,20 @@ var ChatSelectContent = React3.forwardRef(({ className, children, position = "po
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx5(ChatSelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx3(ChatSelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx3(
         SelectPrimitive.Viewport,
         {
           className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
           children
         }
       ),
-      /* @__PURE__ */ jsx5(ChatSelectScrollDownButton, {})
+      /* @__PURE__ */ jsx3(ChatSelectScrollDownButton, {})
     ]
   }
 ) }));
 ChatSelectContent.displayName = SelectPrimitive.Content.displayName;
-var ChatSelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+var ChatSelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -191,8 +156,8 @@ var ChatSelectItem = React3.forwardRef(({ className, children, ...props }, ref)
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx5("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx3("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx3(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
@@ -201,11 +166,11 @@ ChatSelectItem.displayName = SelectPrimitive.Item.displayName;
 // src/components/chat/default-skin/tooltip.tsx
 import * as React4 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ChatTooltipProvider = TooltipPrimitive.Provider;
 var ChatTooltip = TooltipPrimitive.Root;
 var ChatTooltipTrigger = TooltipPrimitive.Trigger;
-var ChatTooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+var ChatTooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx4(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
   TooltipPrimitive.Content,
   {
     ref,
@@ -238,7 +203,7 @@ var ChatUiPrimitives = {
 };
 
 // src/components/chat/ui/chat-input-bar/chat-slash-menu.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var SLASH_PANEL_MAX_WIDTH = 680;
 var SLASH_PANEL_DESKTOP_SHRINK_RATIO = 0.82;
 var SLASH_PANEL_DESKTOP_MIN_WIDTH = 560;
@@ -273,9 +238,9 @@ function ChatSlashMenu(props) {
     isEnabled: isOpen && !isLoading,
     getItemSelector: (index) => `[data-slash-index="${index}"]`
   });
-  return /* @__PURE__ */ jsxs3(Popover, { open: isOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx7(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx7("div", { ref: anchorRef, className: "pointer-events-none absolute bottom-full left-3 right-3 h-0" }) }),
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs2(Popover, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx5(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx5("div", { ref: anchorRef, className: "pointer-events-none absolute bottom-full left-3 right-3 h-0" }) }),
+    /* @__PURE__ */ jsx5(
       PopoverContent,
       {
         side: "top",
@@ -284,19 +249,19 @@ function ChatSlashMenu(props) {
         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",
         onOpenAutoFocus: (event) => event.preventDefault(),
         style: resolvedWidth ? { width: `${resolvedWidth}px` } : void 0,
-        children: /* @__PURE__ */ jsxs3("div", { className: "grid min-h-[240px] grid-cols-[minmax(220px,300px)_minmax(0,1fr)]", children: [
-          /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsxs2("div", { className: "grid min-h-[240px] grid-cols-[minmax(220px,300px)_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsx5(
             "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",
-              children: isLoading ? /* @__PURE__ */ jsx7("div", { className: "p-2 text-xs text-gray-500", children: texts.slashLoadingLabel }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-                /* @__PURE__ */ jsx7("div", { className: "mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500", children: texts.slashSectionLabel }),
-                items.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "px-2 text-xs text-gray-400", children: texts.slashEmptyLabel }) : /* @__PURE__ */ jsx7("div", { className: "space-y-1", children: items.map((item, index) => {
+              children: isLoading ? /* @__PURE__ */ jsx5("div", { className: "p-2 text-xs text-gray-500", children: texts.slashLoadingLabel }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx5("div", { className: "mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500", children: texts.slashSectionLabel }),
+                items.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "px-2 text-xs text-gray-400", children: texts.slashEmptyLabel }) : /* @__PURE__ */ jsx5("div", { className: "space-y-1", children: items.map((item, index) => {
                   const isActive = index === activeIndex;
-                  return /* @__PURE__ */ jsxs3(
+                  return /* @__PURE__ */ jsxs2(
                     "button",
                     {
                       type: "button",
@@ -307,8 +272,8 @@ function ChatSlashMenu(props) {
                       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__ */ jsx7("span", { className: "truncate text-xs font-semibold", children: item.title }),
-                        /* @__PURE__ */ jsx7("span", { className: "truncate text-xs text-gray-500", children: item.subtitle })
+                        /* @__PURE__ */ jsx5("span", { className: "truncate text-xs font-semibold", children: item.title }),
+                        /* @__PURE__ */ jsx5("span", { className: "truncate text-xs text-gray-500", children: item.subtitle })
                       ]
                     },
                     item.key
@@ -317,15 +282,15 @@ function ChatSlashMenu(props) {
               ] })
             }
           ),
-          /* @__PURE__ */ jsx7("div", { className: "max-w-[320px] p-3.5", children: activeItem ? /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx7("span", { className: "inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary", children: activeItem.subtitle }),
-              /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold text-gray-900", children: activeItem.title })
+          /* @__PURE__ */ jsx5("div", { className: "max-w-[320px] p-3.5", children: activeItem ? /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx5("span", { className: "inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary", children: activeItem.subtitle }),
+              /* @__PURE__ */ jsx5("span", { className: "text-sm font-semibold text-gray-900", children: activeItem.title })
             ] }),
-            /* @__PURE__ */ jsx7("p", { className: "text-xs leading-5 text-gray-600", children: activeItem.description }),
-            /* @__PURE__ */ jsx7("div", { className: "space-y-1", children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx7("div", { className: "rounded-md bg-gray-50 px-2 py-1 text-[11px] text-gray-600", children: line }, line)) }),
-            /* @__PURE__ */ jsx7("div", { className: "pt-1 text-[11px] text-gray-500", children: texts.slashSkillHintLabel })
-          ] }) : /* @__PURE__ */ jsx7("div", { className: "text-xs text-gray-500", children: texts.slashHintLabel }) })
+            /* @__PURE__ */ jsx5("p", { className: "text-xs leading-5 text-gray-600", children: activeItem.description }),
+            /* @__PURE__ */ jsx5("div", { className: "space-y-1", children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx5("div", { className: "rounded-md bg-gray-50 px-2 py-1 text-[11px] text-gray-600", children: line }, line)) }),
+            /* @__PURE__ */ jsx5("div", { className: "pt-1 text-[11px] text-gray-500", children: texts.slashSkillHintLabel })
+          ] }) : /* @__PURE__ */ jsx5("div", { className: "text-xs text-gray-500", children: texts.slashHintLabel }) })
         ] })
       }
     )
@@ -338,7 +303,7 @@ import { Brain, Paperclip, Sparkles } from "lucide-react";
 // src/components/chat/default-skin/button.tsx
 import * as React5 from "react";
 import { cva } from "class-variance-authority";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
@@ -369,18 +334,28 @@ var buttonVariants = cva(
   }
 );
 var ChatButton = React5.forwardRef(
-  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx8("button", { className: cn(buttonVariants({ variant, size, className })), ref, ...props })
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx6("button", { className: cn(buttonVariants({ variant, size, className })), ref, ...props })
 );
 ChatButton.displayName = "ChatButton";
 
 // src/components/chat/ui/chat-input-bar/chat-input-bar-actions.tsx
-import { ArrowUp, Square } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { ArrowUp } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function StopIcon() {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-testid": "chat-stop-icon",
+      className: "block h-3 w-3 rounded-[2px] bg-gray-700 shadow-[inset_0_0_0_1px_rgba(17,24,39,0.06)]"
+    }
+  );
+}
 function ChatInputBarActions(props) {
   const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
-  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-end gap-1", children: [
-    props.sendError?.trim() ? /* @__PURE__ */ jsx9("div", { className: "max-w-[420px] text-right text-[11px] text-red-600", children: props.sendError }) : null,
-    /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2", children: props.isSending ? props.canStopGeneration ? /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-end gap-1", children: [
+    props.sendError?.trim() ? /* @__PURE__ */ jsx7("div", { className: "max-w-[420px] text-right text-[11px] text-red-600", children: props.sendError }) : null,
+    /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2", children: props.isSending ? props.canStopGeneration ? /* @__PURE__ */ jsx7(
       ChatButton,
       {
         size: "icon",
@@ -389,10 +364,10 @@ function ChatInputBarActions(props) {
         "aria-label": props.stopButtonLabel,
         onClick: () => void props.onStop(),
         disabled: props.stopDisabled,
-        children: /* @__PURE__ */ jsx9(Square, { className: "h-3 w-3 fill-current" })
+        children: /* @__PURE__ */ jsx7(StopIcon, {})
       }
-    ) : /* @__PURE__ */ jsx9(TooltipProvider, { children: /* @__PURE__ */ jsxs4(Tooltip, { children: [
-      /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(
+    ) : /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsxs3(Tooltip, { children: [
+      /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("span", { children: /* @__PURE__ */ jsx7(
         ChatButton,
         {
           size: "icon",
@@ -400,11 +375,11 @@ function ChatInputBarActions(props) {
           className: "h-8 w-8 rounded-full",
           "aria-label": props.stopButtonLabel,
           disabled: true,
-          children: /* @__PURE__ */ jsx9(Square, { className: "h-3 w-3 fill-current" })
+          children: /* @__PURE__ */ jsx7(StopIcon, {})
         }
       ) }) }),
-      /* @__PURE__ */ jsx9(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx9("p", { className: "text-xs", children: props.stopHint }) })
-    ] }) }) : /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx7("p", { className: "text-xs", children: props.stopHint }) })
+    ] }) }) : /* @__PURE__ */ jsx7(
       ChatButton,
       {
         size: "icon",
@@ -412,7 +387,7 @@ function ChatInputBarActions(props) {
         "aria-label": props.sendButtonLabel,
         onClick: () => void props.onSend(),
         disabled: props.sendDisabled,
-        children: /* @__PURE__ */ jsx9(ArrowUp, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx7(ArrowUp, { className: "h-5 w-5" })
       }
     ) })
   ] });
@@ -421,7 +396,7 @@ function ChatInputBarActions(props) {
 // src/components/chat/ui/chat-input-bar/chat-input-bar-skill-picker.tsx
 import { useEffect as useEffect3, useId, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
 import { BrainCircuit, Check as Check2, ExternalLink, Puzzle, Search } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function filterOptions(options, query) {
   const keyword = query.trim().toLowerCase();
   if (!keyword) {
@@ -489,26 +464,26 @@ function ChatInputBarSkillPicker(props) {
       }
     }
   };
-  return /* @__PURE__ */ jsxs5(Popover, { children: [
-    /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(Popover, { children: [
+    /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
         "aria-haspopup": "listbox",
         className: "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900",
         children: [
-          /* @__PURE__ */ jsx10(BrainCircuit, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx10("span", { children: picker.title }),
-          selectedCount > 0 ? /* @__PURE__ */ jsx10("span", { className: "ml-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary", children: selectedCount }) : null
+          /* @__PURE__ */ jsx8(BrainCircuit, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx8("span", { children: picker.title }),
+          selectedCount > 0 ? /* @__PURE__ */ jsx8("span", { className: "ml-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary", children: selectedCount }) : null
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs5(PopoverContent, { side: "top", align: "start", className: "w-[360px] p-0", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "space-y-2 border-b border-gray-100 px-4 py-3", children: [
-        /* @__PURE__ */ jsx10("div", { className: "text-sm font-semibold text-gray-900", children: picker.title }),
-        /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx10(Search, { className: "pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" }),
-          /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs4(PopoverContent, { side: "top", align: "start", className: "w-[360px] p-0", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "space-y-2 border-b border-gray-100 px-4 py-3", children: [
+        /* @__PURE__ */ jsx8("div", { className: "text-sm font-semibold text-gray-900", children: picker.title }),
+        /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx8(Search, { className: "pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" }),
+          /* @__PURE__ */ jsx8(
             Input,
             {
               value: query,
@@ -525,7 +500,7 @@ function ChatInputBarSkillPicker(props) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx8(
         "div",
         {
           ref: listRef,
@@ -533,10 +508,10 @@ function ChatInputBarSkillPicker(props) {
           role: "listbox",
           "aria-multiselectable": "true",
           className: "custom-scrollbar max-h-[320px] overflow-y-auto",
-          children: picker.isLoading ? /* @__PURE__ */ jsx10("div", { className: "p-4 text-xs text-gray-500", children: picker.loadingLabel }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "p-4 text-center text-xs text-gray-500", children: picker.emptyLabel }) : /* @__PURE__ */ jsx10("div", { className: "py-1", children: filteredOptions.map((option, index) => {
+          children: picker.isLoading ? /* @__PURE__ */ jsx8("div", { className: "p-4 text-xs text-gray-500", children: picker.loadingLabel }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "p-4 text-center text-xs text-gray-500", children: picker.emptyLabel }) : /* @__PURE__ */ jsx8("div", { className: "py-1", children: filteredOptions.map((option, index) => {
             const isSelected = selectedSet.has(option.key);
             const isActive = index === activeIndex;
-            return /* @__PURE__ */ jsxs5(
+            return /* @__PURE__ */ jsxs4(
               "button",
               {
                 type: "button",
@@ -548,19 +523,19 @@ function ChatInputBarSkillPicker(props) {
                 onMouseEnter: () => setActiveIndex(index),
                 className: `flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${isActive ? "bg-gray-50" : "hover:bg-gray-50"}`,
                 children: [
-                  /* @__PURE__ */ jsx10("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500", children: /* @__PURE__ */ jsx10(Puzzle, { className: "h-4 w-4" }) }),
-                  /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
-                      /* @__PURE__ */ jsx10("span", { className: "truncate text-sm text-gray-900", children: option.label }),
-                      option.badgeLabel ? /* @__PURE__ */ jsx10("span", { className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: option.badgeLabel }) : null
+                  /* @__PURE__ */ jsx8("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500", children: /* @__PURE__ */ jsx8(Puzzle, { className: "h-4 w-4" }) }),
+                  /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx8("span", { className: "truncate text-sm text-gray-900", children: option.label }),
+                      option.badgeLabel ? /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: option.badgeLabel }) : null
                     ] }),
-                    /* @__PURE__ */ jsx10("div", { className: "mt-0.5 truncate text-xs text-gray-500", children: option.description || option.key })
+                    /* @__PURE__ */ jsx8("div", { className: "mt-0.5 truncate text-xs text-gray-500", children: option.description || option.key })
                   ] }),
-                  /* @__PURE__ */ jsx10("div", { className: "ml-3 shrink-0", children: /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx8("div", { className: "ml-3 shrink-0", children: /* @__PURE__ */ jsx8(
                     "span",
                     {
                       className: isSelected ? "inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white" : "inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white",
-                      children: isSelected ? /* @__PURE__ */ jsx10(Check2, { className: "h-3 w-3" }) : null
+                      children: isSelected ? /* @__PURE__ */ jsx8(Check2, { className: "h-3 w-3" }) : null
                     }
                   ) })
                 ]
@@ -570,14 +545,14 @@ function ChatInputBarSkillPicker(props) {
           }) })
         }
       ),
-      picker.manageHref && picker.manageLabel ? /* @__PURE__ */ jsx10("div", { className: "border-t border-gray-100 px-4 py-2.5", children: /* @__PURE__ */ jsxs5(
+      picker.manageHref && picker.manageLabel ? /* @__PURE__ */ jsx8("div", { className: "border-t border-gray-100 px-4 py-2.5", children: /* @__PURE__ */ jsxs4(
         "a",
         {
           href: picker.manageHref,
           className: "inline-flex items-center gap-1.5 text-xs font-medium text-primary transition-colors hover:text-primary/80",
           children: [
             picker.manageLabel,
-            /* @__PURE__ */ jsx10(ExternalLink, { className: "h-3 w-3" })
+            /* @__PURE__ */ jsx8(ExternalLink, { className: "h-3 w-3" })
           ]
         }
       ) }) : null
@@ -586,21 +561,21 @@ function ChatInputBarSkillPicker(props) {
 }
 
 // src/components/chat/ui/chat-input-bar/chat-input-bar-toolbar.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function ToolbarIcon({ icon }) {
   if (icon === "sparkles") {
-    return /* @__PURE__ */ jsx11(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" });
+    return /* @__PURE__ */ jsx9(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" });
   }
   if (icon === "brain") {
-    return /* @__PURE__ */ jsx11(Brain, { className: "h-3.5 w-3.5 shrink-0 text-gray-500" });
+    return /* @__PURE__ */ jsx9(Brain, { className: "h-3.5 w-3.5 shrink-0 text-gray-500" });
   }
   return null;
 }
 function AccessoryIcon({ icon }) {
   if (icon === "paperclip") {
-    return /* @__PURE__ */ jsx11(Paperclip, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx9(Paperclip, { className: "h-4 w-4" });
   }
-  return /* @__PURE__ */ jsx11(ToolbarIcon, { icon });
+  return /* @__PURE__ */ jsx9(ToolbarIcon, { icon });
 }
 function resolveTriggerWidth(key) {
   if (key === "model") {
@@ -628,80 +603,1111 @@ function resolveContentWidth(key) {
 }
 function ToolbarSelect({ item }) {
   const { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } = ChatUiPrimitives;
-  return /* @__PURE__ */ jsxs6(Select, { value: item.value, onValueChange: item.onValueChange, disabled: item.disabled, children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs5(Select, { value: item.value, onValueChange: item.onValueChange, disabled: item.disabled, children: [
+    /* @__PURE__ */ jsx9(
       SelectTrigger,
       {
         className: `h-8 w-auto rounded-lg border-0 bg-transparent px-3 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 ${resolveTriggerWidth(item.key)}`,
-        children: item.selectedLabel ? /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 items-center gap-2 text-left", children: [
-          /* @__PURE__ */ jsx11(ToolbarIcon, { icon: item.icon }),
-          /* @__PURE__ */ jsx11("span", { className: "truncate text-xs font-semibold text-gray-700", children: item.selectedLabel })
-        ] }) : item.loading ? /* @__PURE__ */ jsx11("div", { className: "h-3 w-24 animate-pulse rounded bg-gray-200" }) : /* @__PURE__ */ jsx11(SelectValue, { placeholder: item.placeholder })
+        children: item.selectedLabel ? /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-2 text-left", children: [
+          /* @__PURE__ */ jsx9(ToolbarIcon, { icon: item.icon }),
+          /* @__PURE__ */ jsx9("span", { className: "truncate text-xs font-semibold text-gray-700", children: item.selectedLabel })
+        ] }) : item.loading ? /* @__PURE__ */ jsx9("div", { className: "h-3 w-24 animate-pulse rounded bg-gray-200" }) : /* @__PURE__ */ jsx9(SelectValue, { placeholder: item.placeholder })
       }
     ),
-    /* @__PURE__ */ jsxs6(SelectContent, { className: resolveContentWidth(item.key), children: [
-      item.options.length === 0 ? item.loading ? /* @__PURE__ */ jsxs6("div", { className: "space-y-2 px-3 py-2", children: [
-        /* @__PURE__ */ jsx11("div", { className: "h-3 w-36 animate-pulse rounded bg-gray-200" }),
-        /* @__PURE__ */ jsx11("div", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
-        /* @__PURE__ */ jsx11("div", { className: "h-3 w-32 animate-pulse rounded bg-gray-200" })
-      ] }) : item.emptyLabel ? /* @__PURE__ */ jsx11("div", { className: "px-3 py-2 text-xs text-gray-500", children: item.emptyLabel }) : null : null,
-      item.options.map((option) => /* @__PURE__ */ jsx11(SelectItem, { value: option.value, className: "py-2", children: option.description ? /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx11("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }),
-        /* @__PURE__ */ jsx11("span", { className: "truncate text-[11px] text-gray-500", children: option.description })
-      ] }) : /* @__PURE__ */ jsx11("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }) }, option.value))
+    /* @__PURE__ */ jsxs5(SelectContent, { className: resolveContentWidth(item.key), children: [
+      item.options.length === 0 ? item.loading ? /* @__PURE__ */ jsxs5("div", { className: "space-y-2 px-3 py-2", children: [
+        /* @__PURE__ */ jsx9("div", { className: "h-3 w-36 animate-pulse rounded bg-gray-200" }),
+        /* @__PURE__ */ jsx9("div", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
+        /* @__PURE__ */ jsx9("div", { className: "h-3 w-32 animate-pulse rounded bg-gray-200" })
+      ] }) : item.emptyLabel ? /* @__PURE__ */ jsx9("div", { className: "px-3 py-2 text-xs text-gray-500", children: item.emptyLabel }) : null : null,
+      item.options.map((option) => /* @__PURE__ */ jsx9(SelectItem, { value: option.value, className: "py-2", children: option.description ? /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx9("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }),
+        /* @__PURE__ */ jsx9("span", { className: "truncate text-[11px] text-gray-500", children: option.description })
+      ] }) : /* @__PURE__ */ jsx9("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }) }, option.value))
     ] })
   ] });
 }
 function ChatInputBarToolbar(props) {
   const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
-  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-3 pb-3", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
-      props.skillPicker ? /* @__PURE__ */ jsx11(ChatInputBarSkillPicker, { picker: props.skillPicker }) : null,
-      props.selects.map((item) => /* @__PURE__ */ jsx11(ToolbarSelect, { item }, item.key)),
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-3 pb-3", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
+      props.skillPicker ? /* @__PURE__ */ jsx9(ChatInputBarSkillPicker, { picker: props.skillPicker }) : null,
+      props.selects.map((item) => /* @__PURE__ */ jsx9(ToolbarSelect, { item }, item.key)),
       props.accessories?.map((item) => {
-        const button = /* @__PURE__ */ jsxs6(
+        const button = /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
-            className: "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed disabled:text-gray-400",
+            className: `inline-flex items-center rounded-lg py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed disabled:text-gray-400 ${item.iconOnly ? "h-8 w-8 justify-center px-0" : "gap-1.5 px-3"}`,
             onClick: item.onClick,
             disabled: item.disabled,
             "aria-label": item.label,
             children: [
-              /* @__PURE__ */ jsx11(AccessoryIcon, { icon: item.icon }),
-              /* @__PURE__ */ jsx11("span", { children: item.label })
+              /* @__PURE__ */ jsx9(AccessoryIcon, { icon: item.icon }),
+              item.iconOnly ? null : /* @__PURE__ */ jsx9("span", { children: item.label })
             ]
           }
         );
         if (!item.tooltip) {
-          return /* @__PURE__ */ jsx11("div", { children: button }, item.key);
+          return /* @__PURE__ */ jsx9("div", { children: button }, item.key);
         }
-        return /* @__PURE__ */ jsx11(TooltipProvider, { children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
-          /* @__PURE__ */ jsx11(TooltipTrigger, { asChild: true, children: button }),
-          /* @__PURE__ */ jsx11(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx11("p", { className: "text-xs", children: item.tooltip }) })
+        const trigger = item.disabled ? /* @__PURE__ */ jsx9("span", { className: "inline-flex", children: button }) : button;
+        return /* @__PURE__ */ jsx9(TooltipProvider, { children: /* @__PURE__ */ jsxs5(Tooltip, { children: [
+          /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: trigger }),
+          /* @__PURE__ */ jsx9(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx9("p", { className: "text-xs", children: item.tooltip }) })
         ] }) }, item.key);
       })
     ] }),
-    /* @__PURE__ */ jsx11(ChatInputBarActions, { ...props.actions })
+    /* @__PURE__ */ jsx9(ChatInputBarActions, { ...props.actions })
   ] });
 }
 
+// src/components/chat/ui/chat-input-bar/chat-input-bar-tokenized-composer.tsx
+import {
+  forwardRef as forwardRef6,
+  useImperativeHandle,
+  useLayoutEffect,
+  useState as useState3
+} from "react";
+
+// src/components/chat/ui/chat-input-bar/chat-composer.utils.ts
+var CHAT_COMPOSER_TOKEN_PLACEHOLDER = "\uFFFC";
+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 : CHAT_COMPOSER_TOKEN_PLACEHOLDER).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;
+    const isOutsideRange = isNodeOutsideComposerRange(nodeStart, nodeEnd, boundedStart, boundedEnd);
+    if (isOutsideRange) {
+      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
+  };
+}
+function isChatComposerSelectionInsideRange(selection, start, end) {
+  if (!selection) {
+    return false;
+  }
+  return selection.start < end && selection.end > start;
+}
+
+// src/components/chat/ui/chat-input-bar/chat-composer-dom.utils.ts
+function buildNodeStartMap(nodes) {
+  const map = /* @__PURE__ */ new Map();
+  let cursor = 0;
+  for (const node of nodes) {
+    map.set(node.id, cursor);
+    cursor += getChatComposerNodeLength(node);
+  }
+  return map;
+}
+function resolveRootChildIndex(root, target) {
+  let current = target;
+  while (current && current.parentNode !== root) {
+    current = current.parentNode;
+  }
+  if (!current) {
+    return root.childNodes.length;
+  }
+  return Array.prototype.indexOf.call(root.childNodes, current);
+}
+function findNodeByDomChild(child, index, nodes) {
+  if (child instanceof HTMLElement) {
+    const nodeId = child.dataset.composerNodeId;
+    if (nodeId) {
+      return nodes.find((node) => node.id === nodeId);
+    }
+  }
+  return nodes[index];
+}
+function sumNodeLengthsBeforeChildIndex(root, nodes, childIndex) {
+  let value = 0;
+  for (let index = 0; index < childIndex; index += 1) {
+    const matched = findNodeByDomChild(root.childNodes[index], index, nodes);
+    if (matched) {
+      value += getChatComposerNodeLength(matched);
+    }
+  }
+  return value;
+}
+function resolveDirectRootTextNodeOffset(root, container, offset, nodes) {
+  const childIndex = resolveRootChildIndex(root, container);
+  const valueBeforeNode = sumNodeLengthsBeforeChildIndex(root, nodes, childIndex);
+  const currentNode = nodes[childIndex];
+  if (currentNode?.type === "text") {
+    return valueBeforeNode + Math.min(offset, currentNode.text.length);
+  }
+  return valueBeforeNode + Math.min(offset, container.textContent?.length ?? 0);
+}
+function resolveElementBackedOffset(container, offset, matched, nodeStart, element) {
+  if (matched.type === "text") {
+    if (container.nodeType === Node.TEXT_NODE) {
+      return nodeStart + Math.min(offset, matched.text.length);
+    }
+    if (container === element) {
+      return nodeStart + (offset > 0 ? matched.text.length : 0);
+    }
+    return nodeStart + matched.text.length;
+  }
+  if (container === element) {
+    return nodeStart + (offset > 0 ? 1 : 0);
+  }
+  return nodeStart + 1;
+}
+function resolveSelectionPointOffset(root, container, offset, nodes, nodeStartMap) {
+  if (container === root) {
+    return sumNodeLengthsBeforeChildIndex(root, nodes, offset);
+  }
+  if (container.nodeType === Node.TEXT_NODE && container.parentNode === root) {
+    return resolveDirectRootTextNodeOffset(root, container, offset, nodes);
+  }
+  const element = container instanceof HTMLElement ? container.closest("[data-composer-node-id]") : container.parentElement?.closest("[data-composer-node-id]") ?? null;
+  if (!(element instanceof HTMLElement)) {
+    const childIndex = resolveRootChildIndex(root, container);
+    return resolveSelectionPointOffset(root, root, childIndex, nodes, nodeStartMap);
+  }
+  const nodeId = element.dataset.composerNodeId;
+  if (!nodeId) {
+    return 0;
+  }
+  const matched = nodes.find((node) => node.id === nodeId);
+  const nodeStart = nodeStartMap.get(nodeId) ?? 0;
+  if (!matched) {
+    return nodeStart;
+  }
+  return resolveElementBackedOffset(container, offset, matched, nodeStart, element);
+}
+function readComposerSelection(root, nodes) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) {
+    return null;
+  }
+  const nodeStartMap = buildNodeStartMap(nodes);
+  const start = resolveSelectionPointOffset(root, range.startContainer, range.startOffset, nodes, nodeStartMap);
+  const end = resolveSelectionPointOffset(root, range.endContainer, range.endOffset, nodes, nodeStartMap);
+  return {
+    start: Math.min(start, end),
+    end: Math.max(start, end)
+  };
+}
+function restoreComposerSelection(root, nodes, selection) {
+  if (!selection) {
+    return;
+  }
+  const browserSelection = window.getSelection();
+  if (!browserSelection) {
+    return;
+  }
+  const resolveBoundary = (docOffset) => {
+    let cursor = 0;
+    for (let index = 0; index < nodes.length; index += 1) {
+      const node = nodes[index];
+      const nodeLength = getChatComposerNodeLength(node);
+      const nodeStart = cursor;
+      const nodeEnd = cursor + nodeLength;
+      const element = root.childNodes[index];
+      if (!element) {
+        cursor = nodeEnd;
+        continue;
+      }
+      if (node.type === "text") {
+        if (docOffset <= nodeEnd) {
+          const textNode = element.firstChild ?? element;
+          return {
+            container: textNode,
+            offset: Math.max(0, Math.min(docOffset - nodeStart, node.text.length))
+          };
+        }
+      } else {
+        if (docOffset <= nodeStart) {
+          return { container: root, offset: index };
+        }
+        if (docOffset <= nodeEnd) {
+          return { container: root, offset: index + 1 };
+        }
+      }
+      cursor = nodeEnd;
+    }
+    return {
+      container: root,
+      offset: root.childNodes.length
+    };
+  };
+  const startBoundary = resolveBoundary(selection.start);
+  const endBoundary = resolveBoundary(selection.end);
+  const range = document.createRange();
+  range.setStart(startBoundary.container, startBoundary.offset);
+  range.setEnd(endBoundary.container, endBoundary.offset);
+  browserSelection.removeAllRanges();
+  browserSelection.addRange(range);
+}
+function parseComposerNodesFromDom(root) {
+  const parsedNodes = [];
+  for (const child of Array.from(root.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      parsedNodes.push(createChatComposerTextNode(child.textContent ?? ""));
+      continue;
+    }
+    if (!(child instanceof HTMLElement)) {
+      continue;
+    }
+    const nodeType = child.dataset.composerNodeType;
+    if (nodeType === "token") {
+      const tokenKind = child.dataset.composerTokenKind;
+      const tokenKey = child.dataset.composerTokenKey;
+      const label = child.dataset.composerLabel;
+      if (tokenKind && tokenKey && label) {
+        parsedNodes.push({
+          id: child.dataset.composerNodeId ?? createChatComposerTokenNode({ tokenKind, tokenKey, label }).id,
+          type: "token",
+          tokenKind,
+          tokenKey,
+          label
+        });
+      }
+      continue;
+    }
+    const text = child.textContent ?? "";
+    parsedNodes.push({
+      id: child.dataset.composerNodeId ?? createChatComposerTextNode(text).id,
+      type: "text",
+      text
+    });
+  }
+  return normalizeChatComposerNodes(parsedNodes);
+}
+function readComposerDocumentStateFromDom(root) {
+  const nodes = parseComposerNodesFromDom(root);
+  return {
+    nodes,
+    selection: readComposerSelection(root, nodes)
+  };
+}
+
+// src/components/chat/ui/chat-input-bar/chat-composer-controller.ts
+var ChatComposerController = class {
+  constructor() {
+    this.nodes = createEmptyChatComposerNodes();
+    this.selection = null;
+    this.sync = (nodes, selection) => {
+      this.nodes = normalizeChatComposerNodes(nodes);
+      this.selection = selection;
+      return this.getSnapshot();
+    };
+    this.setSelection = (selection) => {
+      this.selection = selection;
+      return this.getSnapshot();
+    };
+    this.replaceDocument = (nodes, selection) => {
+      this.nodes = normalizeChatComposerNodes(nodes);
+      this.selection = selection;
+      return this.getSnapshot();
+    };
+    this.insertText = (text) => {
+      const selection = this.selection ?? { start: 0, end: 0 };
+      this.nodes = replaceChatComposerRange(this.nodes, selection.start, selection.end, [createChatComposerTextNode(text)]);
+      const nextOffset = selection.start + text.length;
+      this.selection = { start: nextOffset, end: nextOffset };
+      return this.getSnapshot();
+    };
+    this.insertSkillToken = (tokenKey, label) => {
+      if (this.getSelectedSkillKeys().includes(tokenKey)) {
+        return this.getSnapshot();
+      }
+      const trigger = this.getSlashTrigger();
+      const documentLength = this.getDocumentLength();
+      const replaceStart = trigger?.start ?? this.selection?.start ?? documentLength;
+      const replaceEnd = trigger?.end ?? this.selection?.end ?? replaceStart;
+      this.nodes = replaceChatComposerRange(
+        this.nodes,
+        replaceStart,
+        replaceEnd,
+        [createChatComposerTokenNode({ tokenKind: "skill", tokenKey, label })]
+      );
+      this.selection = { start: replaceStart + 1, end: replaceStart + 1 };
+      return this.getSnapshot();
+    };
+    this.syncSelectedSkills = (nextKeys, options) => {
+      const selectedSkillKeys = this.getSelectedSkillKeys();
+      const optionMap = new Map(options.map((option) => [option.key, option]));
+      const addedKey = nextKeys.find((key) => !selectedSkillKeys.includes(key));
+      if (addedKey) {
+        const option = optionMap.get(addedKey);
+        return this.insertSkillToken(addedKey, option?.label ?? addedKey);
+      }
+      const removedKey = selectedSkillKeys.find((key) => !nextKeys.includes(key));
+      if (removedKey) {
+        this.nodes = removeChatComposerTokenNodes(
+          this.nodes,
+          (node) => node.tokenKind === "skill" && node.tokenKey === removedKey
+        );
+      }
+      return this.getSnapshot();
+    };
+    this.deleteContent = (direction) => {
+      const documentLength = this.getDocumentLength();
+      const selection = this.selection ?? { start: documentLength, end: documentLength };
+      let rangeStart = selection.start;
+      let rangeEnd = selection.end;
+      if (selection.start === selection.end) {
+        if (direction === "backward" && selection.start > 0) {
+          rangeStart = selection.start - 1;
+        } else if (direction === "forward") {
+          rangeEnd = selection.end + 1;
+        } else {
+          return this.getSnapshot();
+        }
+      }
+      this.nodes = replaceChatComposerRange(this.nodes, rangeStart, rangeEnd, []);
+      this.selection = { start: rangeStart, end: rangeStart };
+      return this.getSnapshot();
+    };
+    this.getSnapshot = () => {
+      return {
+        nodes: this.nodes,
+        selection: this.selection,
+        nodeStartMap: buildNodeStartMap(this.nodes),
+        documentLength: this.getDocumentLength(),
+        selectedSkillKeys: this.getSelectedSkillKeys(),
+        slashTrigger: this.getSlashTrigger()
+      };
+    };
+    this.getDocumentLength = () => {
+      return this.nodes.reduce((sum, node) => sum + getChatComposerNodeLength(node), 0);
+    };
+    this.getSelectedSkillKeys = () => {
+      return extractChatComposerTokenKeys(this.nodes, "skill");
+    };
+    this.getSlashTrigger = () => {
+      return resolveChatComposerSlashTrigger(this.nodes, this.selection);
+    };
+  }
+};
+
+// src/components/chat/ui/chat-input-bar/chat-composer-keyboard.utils.ts
+function resolveChatComposerKeyboardAction(params) {
+  const {
+    key,
+    shiftKey,
+    isComposing,
+    isSlashMenuOpen,
+    slashItemCount,
+    activeSlashIndex,
+    isSending,
+    canStopGeneration
+  } = params;
+  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" };
+  }
+  if (key === "Enter" && shiftKey) {
+    return { type: "insert-line-break" };
+  }
+  if (key === "Enter") {
+    return { type: "send-message" };
+  }
+  if (!isComposing && (key === "Backspace" || key === "Delete")) {
+    return {
+      type: "delete-content",
+      direction: key === "Backspace" ? "backward" : "forward"
+    };
+  }
+  return { type: "noop" };
+}
+
+// src/components/chat/ui/chat-input-bar/chat-composer-surface-renderer.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var ChatComposerSurfaceRenderer = class {
+  constructor() {
+    this.render = (root, params) => {
+      if (!root) {
+        return;
+      }
+      const fragment = document.createDocumentFragment();
+      for (const node of params.nodes) {
+        const element = node.type === "text" ? this.createTextNodeElement(node) : this.createTokenNodeElement(node, params.selectedRange, params.nodeStartMap);
+        if (element) {
+          fragment.appendChild(element);
+        }
+      }
+      root.replaceChildren(fragment);
+    };
+    this.createTextNodeElement = (node) => {
+      if (node.text.length === 0) {
+        return null;
+      }
+      const element = document.createElement("span");
+      element.dataset.composerNodeId = node.id;
+      element.dataset.composerNodeType = "text";
+      element.textContent = node.text;
+      return element;
+    };
+    this.createTokenNodeElement = (node, selectedRange, nodeStartMap) => {
+      const nodeStart = nodeStartMap.get(node.id) ?? 0;
+      const isSelected = isChatComposerSelectionInsideRange(selectedRange, nodeStart, nodeStart + 1);
+      const element = document.createElement("span");
+      element.contentEditable = "false";
+      element.dataset.composerNodeId = node.id;
+      element.dataset.composerNodeType = "token";
+      element.dataset.composerTokenKind = node.tokenKind;
+      element.dataset.composerTokenKey = node.tokenKey;
+      element.dataset.composerLabel = node.label;
+      element.className = [
+        "mx-[2px]",
+        "inline-flex",
+        "h-6",
+        "max-w-full",
+        "items-center",
+        "gap-1",
+        "rounded-md",
+        "border",
+        "px-1.5",
+        "align-baseline",
+        "text-[11px]",
+        "font-medium",
+        "transition",
+        isSelected ? "border-primary/30 bg-primary/18 text-primary" : "border-primary/12 bg-primary/8 text-primary"
+      ].join(" ");
+      element.append(this.createTokenIcon(node.tokenKind));
+      const label = document.createElement("span");
+      label.className = "truncate";
+      label.textContent = node.label;
+      element.append(label);
+      return element;
+    };
+    this.createTokenIcon = (tokenKind) => {
+      const wrapper = document.createElement("span");
+      wrapper.className = "inline-flex h-3 w-3 shrink-0 items-center justify-center text-primary/70";
+      wrapper.append(tokenKind === "file" ? this.createFileIcon() : this.createSkillIcon());
+      return wrapper;
+    };
+    this.createSkillIcon = () => {
+      return this.createSvgIcon([
+        { tag: "path", attrs: { d: "M8.5 2.75 2.75 6l5.75 3.25L14.25 6 8.5 2.75Z" } },
+        { tag: "path", attrs: { d: "M2.75 10 8.5 13.25 14.25 10" } },
+        { tag: "path", attrs: { d: "M2.75 6v4l5.75 3.25V9.25L2.75 6Z" } },
+        { tag: "path", attrs: { d: "M14.25 6v4L8.5 13.25V9.25L14.25 6Z" } }
+      ]);
+    };
+    this.createFileIcon = () => {
+      return this.createSvgIcon([
+        { tag: "path", attrs: { d: "M5.25 2.75h4.5L13 6v7.25A1.75 1.75 0 0 1 11.25 15h-6.5A1.75 1.75 0 0 1 3 13.25v-8.75A1.75 1.75 0 0 1 4.75 2.75Z" } },
+        { tag: "path", attrs: { d: "M9.75 2.75V6H13" } },
+        { tag: "path", attrs: { d: "M5.75 8.75h4.5" } },
+        { tag: "path", attrs: { d: "M5.75 10.75h4.5" } }
+      ]);
+    };
+    this.createSvgIcon = (children) => {
+      const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+      svg.setAttribute("viewBox", "0 0 16 16");
+      svg.setAttribute("fill", "none");
+      svg.setAttribute("stroke", "currentColor");
+      svg.setAttribute("stroke-width", "1.25");
+      svg.setAttribute("stroke-linecap", "round");
+      svg.setAttribute("stroke-linejoin", "round");
+      svg.setAttribute("aria-hidden", "true");
+      svg.setAttribute("class", "h-3 w-3");
+      for (const child of children) {
+        const element = document.createElementNS(SVG_NAMESPACE, child.tag);
+        for (const [key, value] of Object.entries(child.attrs)) {
+          element.setAttribute(key, value);
+        }
+        svg.append(element);
+      }
+      return svg;
+    };
+  }
+};
+
+// src/components/chat/ui/chat-input-bar/chat-composer-view-controller.ts
+var CHAT_INPUT_MAX_HEIGHT = 188;
+var ChatComposerViewController = class {
+  constructor(controller) {
+    this.controller = controller;
+    this.surfaceRenderer = new ChatComposerSurfaceRenderer();
+    this.sync = (nodes, selection) => {
+      return this.controller.sync(nodes, selection);
+    };
+    this.syncSelectionFromRoot = (root) => {
+      return this.controller.setSelection(readComposerSelection(root, this.controller.getSnapshot().nodes));
+    };
+    this.restoreSelectionIfFocused = (root, selection) => {
+      if (!root || document.activeElement !== root) {
+        return;
+      }
+      restoreComposerSelection(root, this.controller.getSnapshot().nodes, selection);
+    };
+    this.syncViewport = (root) => {
+      if (!root) {
+        return;
+      }
+      root.style.maxHeight = `${CHAT_INPUT_MAX_HEIGHT}px`;
+      root.style.overflowY = root.scrollHeight > CHAT_INPUT_MAX_HEIGHT ? "auto" : "hidden";
+    };
+    this.renderSurface = (params) => {
+      this.surfaceRenderer.render(params.root, {
+        nodes: params.snapshot.nodes,
+        selectedRange: params.selectedRange,
+        nodeStartMap: params.snapshot.nodeStartMap
+      });
+    };
+    this.insertSlashItem = (item, commitSnapshot) => {
+      if (!item.value) {
+        return;
+      }
+      commitSnapshot(this.controller.insertSkillToken(item.value, item.title));
+    };
+    this.syncSelectedSkills = (nextKeys, options, commitSnapshot) => {
+      commitSnapshot(this.controller.syncSelectedSkills(nextKeys, options));
+    };
+    this.handleBeforeInput = (params) => {
+      const { event, disabled, isComposing, commitSnapshot } = params;
+      const nativeEvent = event.nativeEvent;
+      if (disabled || isComposing || nativeEvent.isComposing) {
+        return;
+      }
+      const shouldInsertText = nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertReplacementText";
+      if (!shouldInsertText || !nativeEvent.data) {
+        return;
+      }
+      event.preventDefault();
+      commitSnapshot(this.controller.insertText(nativeEvent.data));
+    };
+    this.handleInput = (params) => {
+      const { event, isComposing, commitSnapshot } = params;
+      const nativeEvent = event.nativeEvent;
+      if (isComposing || nativeEvent.isComposing) {
+        return;
+      }
+      const root = event.currentTarget;
+      const nextDocumentState = readComposerDocumentStateFromDom(root);
+      commitSnapshot(this.controller.replaceDocument(nextDocumentState.nodes, nextDocumentState.selection));
+    };
+    this.handleCompositionEnd = (params) => {
+      const { event, commitSnapshot } = params;
+      const root = event.currentTarget;
+      const nextDocumentState = readComposerDocumentStateFromDom(root);
+      commitSnapshot(this.controller.replaceDocument(nextDocumentState.nodes, nextDocumentState.selection));
+    };
+    this.handleKeyDown = (params) => {
+      const {
+        event,
+        slashItems,
+        activeSlashIndex,
+        activeSlashItem,
+        actions,
+        commitSnapshot,
+        insertSkillToken,
+        onSlashActiveIndexChange,
+        onSlashQueryChange,
+        onSlashOpenChange
+      } = params;
+      const currentSnapshot = this.controller.getSnapshot();
+      const action = resolveChatComposerKeyboardAction({
+        key: event.key,
+        shiftKey: event.shiftKey,
+        isComposing: event.nativeEvent.isComposing,
+        isSlashMenuOpen: currentSnapshot.slashTrigger !== null,
+        slashItemCount: slashItems.length,
+        activeSlashIndex,
+        isSending: actions.isSending,
+        canStopGeneration: actions.canStopGeneration
+      });
+      if (action.type === "noop") {
+        return;
+      }
+      event.preventDefault();
+      if (action.type === "move-slash-index") {
+        onSlashActiveIndexChange(action.index);
+        return;
+      }
+      if (action.type === "insert-active-slash-item") {
+        if (activeSlashItem) {
+          insertSkillToken(activeSlashItem.value ?? activeSlashItem.key, activeSlashItem.title);
+        }
+        return;
+      }
+      if (action.type === "close-slash") {
+        onSlashQueryChange?.(null);
+        onSlashOpenChange(false);
+        return;
+      }
+      if (action.type === "stop-generation") {
+        void actions.onStop();
+        return;
+      }
+      if (action.type === "insert-line-break") {
+        commitSnapshot(this.controller.insertText("\n"));
+        return;
+      }
+      if (action.type === "send-message") {
+        void actions.onSend();
+        return;
+      }
+      if (action.type === "delete-content") {
+        commitSnapshot(this.controller.deleteContent(action.direction));
+      }
+    };
+    this.handlePaste = (params) => {
+      const { event, commitSnapshot } = params;
+      const text = event.clipboardData.getData("text/plain");
+      if (!text) {
+        return;
+      }
+      event.preventDefault();
+      commitSnapshot(this.controller.insertText(text));
+    };
+    this.handleBlur = (params) => {
+      const { setSelectedRange, onSlashQueryChange, onSlashOpenChange } = params;
+      setSelectedRange(null);
+      onSlashQueryChange?.(null);
+      onSlashOpenChange(false);
+    };
+  }
+};
+
+// src/components/chat/ui/chat-input-bar/chat-composer-runtime.ts
+var ChatComposerRuntime = class {
+  constructor() {
+    this.controller = new ChatComposerController();
+    this.viewController = new ChatComposerViewController(this.controller);
+    this.rootElement = null;
+    this.selection = null;
+    this.selectedRange = null;
+    this.snapshot = this.controller.getSnapshot();
+    this.config = null;
+    this.isComposing = false;
+    this.bindRootElement = (node) => {
+      this.rootElement = node;
+    };
+    this.update = (config) => {
+      this.config = config;
+      this.snapshot = this.viewController.sync(config.nodes, this.selectedRange);
+      return {
+        snapshot: this.snapshot,
+        selectedRange: this.selectedRange,
+        bindRootElement: this.bindRootElement,
+        handleBeforeInput: this.handleBeforeInput,
+        handleInput: this.handleInput,
+        handleCompositionStart: this.handleCompositionStart,
+        handleCompositionEnd: this.handleCompositionEnd,
+        handleKeyDown: this.handleKeyDown,
+        handlePaste: this.handlePaste,
+        handleBlur: this.handleBlur,
+        syncSelectionState: this.syncSelectionState,
+        imperativeHandle: this.createHandle()
+      };
+    };
+    this.createHandle = () => {
+      return {
+        insertSlashItem: (item) => {
+          this.viewController.insertSlashItem(item, this.commitSnapshot);
+        },
+        syncSelectedSkills: (nextKeys, options) => {
+          this.viewController.syncSelectedSkills(nextKeys, options, this.commitSnapshot);
+        }
+      };
+    };
+    this.restoreDomAfterCommit = () => {
+      if (this.isComposing) {
+        return;
+      }
+      this.viewController.restoreSelectionIfFocused(this.rootElement, this.selection);
+    };
+    this.renderSurface = () => {
+      if (this.isComposing) {
+        return;
+      }
+      this.viewController.renderSurface({
+        root: this.rootElement,
+        snapshot: this.snapshot,
+        selectedRange: this.selectedRange
+      });
+    };
+    this.syncViewport = () => {
+      this.viewController.syncViewport(this.rootElement);
+    };
+    this.syncSelectionState = () => {
+      if (!this.rootElement || this.isComposing) {
+        return;
+      }
+      const nextSnapshot = this.viewController.syncSelectionFromRoot(this.rootElement);
+      this.selection = nextSnapshot.selection;
+      this.selectedRange = nextSnapshot.selection;
+      this.syncSlashState(nextSnapshot);
+      this.requestRender();
+    };
+    this.handleBeforeInput = (event) => {
+      this.viewController.handleBeforeInput({
+        event,
+        disabled: this.requireConfig().disabled,
+        isComposing: this.isComposing,
+        commitSnapshot: this.commitSnapshot
+      });
+    };
+    this.handleInput = (event) => {
+      this.viewController.handleInput({
+        event,
+        isComposing: this.isComposing,
+        commitSnapshot: this.commitSnapshot
+      });
+    };
+    this.handleCompositionStart = () => {
+      this.isComposing = true;
+    };
+    this.handleCompositionEnd = (event) => {
+      this.isComposing = false;
+      this.viewController.handleCompositionEnd({
+        event,
+        commitSnapshot: this.commitSnapshot
+      });
+    };
+    this.handleKeyDown = (event) => {
+      const config = this.requireConfig();
+      const activeSlashItem = config.slashItems[config.activeSlashIndex] ?? null;
+      this.viewController.handleKeyDown({
+        event,
+        slashItems: config.slashItems,
+        activeSlashIndex: config.activeSlashIndex,
+        activeSlashItem,
+        actions: config.actions,
+        commitSnapshot: this.commitSnapshot,
+        insertSkillToken: this.insertSkillToken,
+        onSlashActiveIndexChange: config.onSlashActiveIndexChange,
+        onSlashQueryChange: config.onSlashQueryChange,
+        onSlashOpenChange: config.onSlashOpenChange
+      });
+    };
+    this.handlePaste = (event) => {
+      this.viewController.handlePaste({
+        event,
+        commitSnapshot: this.commitSnapshot
+      });
+    };
+    this.handleBlur = () => {
+      const config = this.requireConfig();
+      this.isComposing = false;
+      this.viewController.handleBlur({
+        setSelectedRange: this.setSelectedRange,
+        onSlashQueryChange: config.onSlashQueryChange,
+        onSlashOpenChange: config.onSlashOpenChange
+      });
+    };
+    this.setSelectedRange = (selection) => {
+      this.selectedRange = selection;
+      this.selection = selection;
+      this.requestRender();
+    };
+    this.commitSnapshot = (nextSnapshot) => {
+      const config = this.requireConfig();
+      this.selection = nextSnapshot.selection;
+      this.selectedRange = nextSnapshot.selection;
+      this.snapshot = nextSnapshot;
+      config.onNodesChange(nextSnapshot.nodes);
+      this.syncSlashState(nextSnapshot);
+    };
+    this.insertSkillToken = (tokenKey, label) => {
+      this.commitSnapshot(this.controller.insertSkillToken(tokenKey, label));
+    };
+    this.syncSlashState = (nextSnapshot) => {
+      const config = this.requireConfig();
+      config.onSlashQueryChange?.(nextSnapshot.slashTrigger?.query ?? null);
+      config.onSlashOpenChange(nextSnapshot.slashTrigger !== null);
+    };
+    this.requestRender = () => {
+      this.requireConfig().requestRender();
+    };
+    this.requireConfig = () => {
+      if (!this.config) {
+        throw new Error("ChatComposerRuntime is not configured.");
+      }
+      return this.config;
+    };
+  }
+};
+
+// src/components/chat/ui/chat-input-bar/chat-input-bar-tokenized-composer.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ChatInputBarTokenizedComposer = forwardRef6(function ChatInputBarTokenizedComposer2(props, ref) {
+  const {
+    nodes,
+    placeholder,
+    disabled,
+    slashItems,
+    actions,
+    onNodesChange,
+    onSlashQueryChange,
+    onSlashOpenChange,
+    onSlashActiveIndexChange,
+    activeSlashIndex
+  } = props;
+  const [renderTick, setRenderTick] = useState3(0);
+  const [runtime] = useState3(() => new ChatComposerRuntime());
+  const {
+    snapshot,
+    bindRootElement,
+    handleBeforeInput,
+    handleInput,
+    handleCompositionStart,
+    handleCompositionEnd,
+    handleKeyDown,
+    handlePaste,
+    handleBlur,
+    syncSelectionState,
+    imperativeHandle
+  } = runtime.update({
+    nodes,
+    disabled,
+    slashItems,
+    actions,
+    onNodesChange,
+    onSlashQueryChange,
+    onSlashOpenChange,
+    onSlashActiveIndexChange,
+    activeSlashIndex,
+    requestRender: () => setRenderTick((value) => value + 1)
+  });
+  void renderTick;
+  useImperativeHandle(ref, () => imperativeHandle, [imperativeHandle]);
+  useLayoutEffect(() => {
+    runtime.renderSurface();
+    runtime.restoreDomAfterCommit();
+    runtime.syncViewport();
+  }, [runtime, snapshot.nodes, snapshot.nodeStartMap, renderTick]);
+  return /* @__PURE__ */ jsx10("div", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsx10("div", { className: "min-h-[60px]", children: /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref: bindRootElement,
+      contentEditable: !disabled,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      "aria-multiline": "true",
+      "data-placeholder": placeholder,
+      onBeforeInput: handleBeforeInput,
+      onInput: handleInput,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      onKeyDown: handleKeyDown,
+      onKeyUp: syncSelectionState,
+      onMouseUp: syncSelectionState,
+      onFocus: syncSelectionState,
+      onBlur: handleBlur,
+      onPaste: handlePaste,
+      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 empty:before:pointer-events-none empty:before:text-gray-400 empty:before:content-[attr(data-placeholder)]"
+    }
+  ) }) });
+});
+
 // src/components/chat/ui/chat-input-bar/chat-input-bar.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function InputBarHint({ hint }) {
   if (!hint) {
     return null;
   }
   if (hint.loading) {
-    return /* @__PURE__ */ jsx12("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxs7("div", { className: "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2", children: [
-      /* @__PURE__ */ jsx12("span", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
-      /* @__PURE__ */ jsx12("span", { className: "h-3 w-16 animate-pulse rounded bg-gray-200" })
+    return /* @__PURE__ */ jsx11("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxs6("div", { className: "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2", children: [
+      /* @__PURE__ */ jsx11("span", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
+      /* @__PURE__ */ jsx11("span", { className: "h-3 w-16 animate-pulse rounded bg-gray-200" })
     ] }) });
   }
   const toneClassName = hint.tone === "warning" ? "border-amber-200 bg-amber-50 text-amber-800" : "border-gray-200 bg-gray-50 text-gray-700";
-  return /* @__PURE__ */ jsx12("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxs7("div", { className: `inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs ${toneClassName}`, children: [
-    hint.text ? /* @__PURE__ */ jsx12("span", { children: hint.text }) : null,
-    hint.actionLabel && hint.onAction ? /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxs6("div", { className: `inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs ${toneClassName}`, children: [
+    hint.text ? /* @__PURE__ */ jsx11("span", { children: hint.text }) : null,
+    hint.actionLabel && hint.onAction ? /* @__PURE__ */ jsx11(
       "button",
       {
         type: "button",
@@ -713,49 +1719,133 @@ function InputBarHint({ hint }) {
   ] }) });
 }
 function ChatInputBar(props) {
-  return /* @__PURE__ */ jsx12("div", { className: "border-t border-gray-200/80 bg-white p-4", children: /* @__PURE__ */ jsx12("div", { className: "mx-auto w-full max-w-[min(1120px,100%)]", children: /* @__PURE__ */ jsxs7("div", { className: "overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx12(
-        ChatInputBarTextarea,
+  const composerRef = useRef4(null);
+  const [slashQuery, setSlashQuery] = useState4(null);
+  const [activeSlashIndex, setActiveSlashIndex] = useState4(0);
+  const isSlashPanelOpen = slashQuery !== null;
+  const activeSlashItem = props.slashMenu.items[activeSlashIndex] ?? null;
+  useEffect4(() => {
+    setActiveSlashIndex((current) => {
+      if (props.slashMenu.items.length === 0) {
+        return 0;
+      }
+      return Math.min(current, props.slashMenu.items.length - 1);
+    });
+  }, [props.slashMenu.items.length]);
+  useEffect4(() => {
+    if (slashQuery !== null) {
+      setActiveSlashIndex(0);
+    }
+  }, [slashQuery]);
+  const toolbar = useMemo3(() => {
+    if (!props.toolbar.skillPicker) {
+      return props.toolbar;
+    }
+    return {
+      ...props.toolbar,
+      skillPicker: {
+        ...props.toolbar.skillPicker,
+        onSelectedKeysChange: (nextKeys) => {
+          composerRef.current?.syncSelectedSkills(nextKeys, props.toolbar.skillPicker?.options ?? []);
+        }
+      }
+    };
+  }, [props.toolbar]);
+  return /* @__PURE__ */ jsx11("div", { className: "border-t border-gray-200/80 bg-white p-4", children: /* @__PURE__ */ jsx11("div", { className: "mx-auto w-full max-w-[min(1120px,100%)]", children: /* @__PURE__ */ jsxs6("div", { className: "overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx11(
+        ChatInputBarTokenizedComposer,
         {
-          value: props.value,
-          placeholder: props.placeholder,
-          disabled: props.disabled,
-          onValueChange: props.onValueChange,
-          onKeyDown: props.onKeyDown
+          ref: composerRef,
+          nodes: props.composer.nodes,
+          placeholder: props.composer.placeholder,
+          disabled: props.composer.disabled,
+          slashItems: props.slashMenu.items,
+          actions: props.toolbar.actions,
+          activeSlashIndex,
+          onNodesChange: props.composer.onNodesChange,
+          onSlashQueryChange: (query) => {
+            setSlashQuery(query);
+            props.composer.onSlashQueryChange?.(query);
+          },
+          onSlashOpenChange: (open) => {
+            if (!open) {
+              setSlashQuery(null);
+            }
+          },
+          onSlashActiveIndexChange: setActiveSlashIndex
         }
       ),
-      /* @__PURE__ */ jsx12(ChatSlashMenu, { ...props.slashMenu })
+      /* @__PURE__ */ jsx11(
+        ChatSlashMenu,
+        {
+          isOpen: isSlashPanelOpen,
+          isLoading: props.slashMenu.isLoading,
+          items: props.slashMenu.items,
+          activeIndex: activeSlashIndex,
+          activeItem: activeSlashItem,
+          texts: props.slashMenu.texts,
+          onSelectItem: (item) => {
+            composerRef.current?.insertSlashItem(item);
+          },
+          onOpenChange: (open) => {
+            if (!open) {
+              setSlashQuery(null);
+            }
+          },
+          onSetActiveIndex: setActiveSlashIndex
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx12(InputBarHint, { hint: props.hint }),
-    /* @__PURE__ */ jsx12(ChatInputBarSelectedItems, { items: props.selectedItems.items, onRemove: props.selectedItems.onRemove }),
-    /* @__PURE__ */ jsx12(ChatInputBarToolbar, { ...props.toolbar })
+    /* @__PURE__ */ jsx11(InputBarHint, { hint: props.hint }),
+    /* @__PURE__ */ jsx11(ChatInputBarToolbar, { ...toolbar })
   ] }) }) });
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-avatar.tsx
 import { Bot, User, Wrench } from "lucide-react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function ChatMessageAvatar({ role }) {
   if (role === "user") {
-    return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white shadow-sm", children: /* @__PURE__ */ jsx13(User, { className: "h-4 w-4" }) });
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        "data-testid": "chat-message-avatar-user",
+        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-white shadow-sm",
+        children: /* @__PURE__ */ jsx12(User, { className: "h-4 w-4" })
+      }
+    );
   }
-  if (role === "assistant") {
-    return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-white shadow-sm", children: /* @__PURE__ */ jsx13(Bot, { className: "h-4 w-4" }) });
+  if (role === "tool") {
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        "data-testid": "chat-message-avatar-tool",
+        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm",
+        children: /* @__PURE__ */ jsx12(Wrench, { className: "h-4 w-4" })
+      }
+    );
   }
-  return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm", children: /* @__PURE__ */ jsx13(Wrench, { className: "h-4 w-4" }) });
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      "data-testid": "chat-message-avatar-assistant",
+      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-200/80 bg-gray-900 text-white shadow-sm",
+      children: /* @__PURE__ */ jsx12(Bot, { className: "h-4 w-4" })
+    }
+  );
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 // src/components/chat/ui/chat-message-list/chat-code-block.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/components/chat/hooks/use-copy-feedback.ts
-import { useCallback, useEffect as useEffect4, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/components/chat/utils/copy-text.ts
 function canUseClipboardApi() {
@@ -841,7 +1931,7 @@ async function copyText(text) {
 // src/components/chat/hooks/use-copy-feedback.ts
 var DEFAULT_RESET_DELAY_MS = 1300;
 function useCopyFeedback(params) {
-  const [copied, setCopied] = useState3(false);
+  const [copied, setCopied] = useState5(false);
   const copy = useCallback(async () => {
     if (!params.text) {
       return;
@@ -853,7 +1943,7 @@ function useCopyFeedback(params) {
       setCopied(false);
     }
   }, [params.text]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!copied || typeof window === "undefined") {
       return;
     }
@@ -868,7 +1958,7 @@ function useCopyFeedback(params) {
 
 // src/components/chat/ui/chat-message-list/chat-code-block.tsx
 import { Check as Check3, Copy } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
 function flattenNodeText(value) {
   if (typeof value === "string" || typeof value === "number") {
@@ -888,13 +1978,13 @@ function resolveCodeLanguage(className) {
   return match?.[1]?.toLowerCase() || "text";
 }
 function ChatCodeBlock(props) {
-  const language = useMemo3(() => resolveCodeLanguage(props.className), [props.className]);
-  const codeText = useMemo3(() => normalizeCodeText(props.children), [props.children]);
+  const language = useMemo4(() => resolveCodeLanguage(props.className), [props.className]);
+  const codeText = useMemo4(() => normalizeCodeText(props.children), [props.children]);
   const { copied, copy } = useCopyFeedback({ text: codeText });
-  return /* @__PURE__ */ jsxs8("div", { className: "chat-codeblock", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "chat-codeblock-toolbar", children: [
-      /* @__PURE__ */ jsx14("span", { className: "chat-codeblock-language", children: language }),
-      /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7("div", { className: "chat-codeblock", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "chat-codeblock-toolbar", children: [
+      /* @__PURE__ */ jsx13("span", { className: "chat-codeblock-language", children: language }),
+      /* @__PURE__ */ jsxs7(
         "button",
         {
           type: "button",
@@ -902,18 +1992,18 @@ function ChatCodeBlock(props) {
           onClick: () => void copy(),
           "aria-label": copied ? props.texts.copiedCodeLabel : props.texts.copyCodeLabel,
           children: [
-            copied ? /* @__PURE__ */ jsx14(Check3, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx14(Copy, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ jsx14("span", { children: copied ? props.texts.copiedCodeLabel : props.texts.copyCodeLabel })
+            copied ? /* @__PURE__ */ jsx13(Check3, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx13(Copy, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx13("span", { children: copied ? props.texts.copiedCodeLabel : props.texts.copyCodeLabel })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx14("pre", { children: /* @__PURE__ */ jsx14("code", { className: props.className, children: codeText }) })
+    /* @__PURE__ */ jsx13("pre", { children: /* @__PURE__ */ jsx13("code", { className: props.className, children: codeText }) })
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var MARKDOWN_MAX_CHARS = 14e4;
 var SAFE_LINK_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
 function trimMarkdown(value) {
@@ -943,14 +2033,14 @@ function isExternalHref(href) {
 }
 function ChatMessageMarkdown(props) {
   const isUser = props.role === "user";
-  const markdownComponents = useMemo4(() => ({
+  const markdownComponents = useMemo5(() => ({
     a: ({ href, children, ...rest }) => {
       const safeHref = resolveSafeHref(href);
       if (!safeHref) {
-        return /* @__PURE__ */ jsx15("span", { className: "chat-link-invalid", children });
+        return /* @__PURE__ */ jsx14("span", { className: "chat-link-invalid", children });
       }
       const external = isExternalHref(safeHref);
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx14(
         "a",
         {
           ...rest,
@@ -961,38 +2051,38 @@ function ChatMessageMarkdown(props) {
         }
       );
     },
-    table: ({ children, ...rest }) => /* @__PURE__ */ jsx15("div", { className: "chat-table-wrap", children: /* @__PURE__ */ jsx15("table", { ...rest, children }) }),
+    table: ({ children, ...rest }) => /* @__PURE__ */ jsx14("div", { className: "chat-table-wrap", children: /* @__PURE__ */ jsx14("table", { ...rest, children }) }),
     input: ({ type, checked, ...rest }) => {
       if (type !== "checkbox") {
-        return /* @__PURE__ */ jsx15("input", { ...rest, type });
+        return /* @__PURE__ */ jsx14("input", { ...rest, type });
       }
-      return /* @__PURE__ */ jsx15("input", { ...rest, type: "checkbox", checked, readOnly: true, disabled: true, className: "chat-task-checkbox" });
+      return /* @__PURE__ */ jsx14("input", { ...rest, type: "checkbox", checked, readOnly: true, disabled: true, className: "chat-task-checkbox" });
     },
     img: ({ src, alt, ...rest }) => {
       const safeSrc = resolveSafeHref(src);
       if (!safeSrc) {
         return null;
       }
-      return /* @__PURE__ */ jsx15("img", { ...rest, src: safeSrc, alt: alt || "", loading: "lazy", decoding: "async" });
+      return /* @__PURE__ */ jsx14("img", { ...rest, src: safeSrc, alt: alt || "", loading: "lazy", decoding: "async" });
     },
     code: ({ className, children, ...rest }) => {
       const plainText = String(children ?? "");
       const isInlineCode = !className && !plainText.includes("\n");
       if (isInlineCode) {
-        return /* @__PURE__ */ jsx15("code", { ...rest, className: cn("chat-inline-code", className), children });
+        return /* @__PURE__ */ jsx14("code", { ...rest, className: cn("chat-inline-code", className), children });
       }
-      return /* @__PURE__ */ jsx15(ChatCodeBlock, { className, texts: props.texts, children });
+      return /* @__PURE__ */ jsx14(ChatCodeBlock, { className, texts: props.texts, children });
     }
   }), [props.texts]);
-  return /* @__PURE__ */ jsx15("div", { className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"), children: /* @__PURE__ */ jsx15(ReactMarkdown, { skipHtml: true, remarkPlugins: [remarkGfm], components: markdownComponents, children: trimMarkdown(props.text) }) });
+  return /* @__PURE__ */ jsx14("div", { className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"), children: /* @__PURE__ */ jsx14(ReactMarkdown, { skipHtml: true, remarkPlugins: [remarkGfm], components: markdownComponents, children: trimMarkdown(props.text) }) });
 }
 
 // src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function ChatReasoningBlock(props) {
-  return /* @__PURE__ */ jsxs9("details", { className: "mt-3", children: [
-    /* @__PURE__ */ jsx16("summary", { className: cn("cursor-pointer text-xs", props.isUser ? "text-primary-100" : "text-gray-500"), children: props.label }),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs8("details", { className: "mt-3", open: true, children: [
+    /* @__PURE__ */ jsx15("summary", { className: cn("cursor-pointer text-xs", props.isUser ? "text-primary-100" : "text-gray-500"), children: props.label }),
+    /* @__PURE__ */ jsx15(
       "pre",
       {
         className: cn(
@@ -1007,87 +2097,87 @@ function ChatReasoningBlock(props) {
 
 // src/components/chat/ui/chat-message-list/chat-tool-card.tsx
 import { Clock3, FileSearch, Globe, Search as Search2, SendHorizontal, Terminal, Wrench as Wrench2 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var TOOL_OUTPUT_PREVIEW_MAX = 220;
 function renderToolIcon(toolName) {
   const lowered = toolName.toLowerCase();
   if (lowered.includes("exec") || lowered.includes("shell") || lowered.includes("command")) {
-    return /* @__PURE__ */ jsx17(Terminal, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx16(Terminal, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("search")) {
-    return /* @__PURE__ */ jsx17(Search2, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx16(Search2, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("fetch") || lowered.includes("http") || lowered.includes("web")) {
-    return /* @__PURE__ */ jsx17(Globe, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx16(Globe, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("read") || lowered.includes("file")) {
-    return /* @__PURE__ */ jsx17(FileSearch, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx16(FileSearch, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("message") || lowered.includes("send")) {
-    return /* @__PURE__ */ jsx17(SendHorizontal, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx16(SendHorizontal, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("cron") || lowered.includes("schedule")) {
-    return /* @__PURE__ */ jsx17(Clock3, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx16(Clock3, { className: "h-3.5 w-3.5" });
   }
-  return /* @__PURE__ */ jsx17(Wrench2, { className: "h-3.5 w-3.5" });
+  return /* @__PURE__ */ jsx16(Wrench2, { className: "h-3.5 w-3.5" });
 }
 function ChatToolCard({ card }) {
   const output = card.output?.trim() ?? "";
   const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes("\n");
   const preview = showDetails ? `${output.slice(0, TOOL_OUTPUT_PREVIEW_MAX)}...` : output;
   const showOutputSection = card.kind === "result" || card.hasResult;
-  return /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-800", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-800", children: [
       renderToolIcon(card.toolName),
-      /* @__PURE__ */ jsx17("span", { children: card.titleLabel }),
-      /* @__PURE__ */ jsx17("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName })
+      /* @__PURE__ */ jsx16("span", { children: card.titleLabel }),
+      /* @__PURE__ */ jsx16("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName })
     ] }),
-    card.summary ? /* @__PURE__ */ jsx17("div", { className: "mt-1 break-words font-mono text-[11px] text-amber-800/90", children: card.summary }) : null,
-    showOutputSection ? /* @__PURE__ */ jsx17("div", { className: "mt-2", children: !output ? /* @__PURE__ */ jsx17("div", { className: "text-[11px] text-amber-700/80", children: card.emptyLabel }) : showDetails ? /* @__PURE__ */ jsxs10("details", { className: "group", children: [
-      /* @__PURE__ */ jsx17("summary", { className: "cursor-pointer text-[11px] text-amber-700", children: card.outputLabel }),
-      /* @__PURE__ */ jsx17("pre", { className: "mt-2 whitespace-pre-wrap break-words rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] text-amber-900", children: output })
-    ] }) : /* @__PURE__ */ jsx17("pre", { className: "rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] whitespace-pre-wrap break-words text-amber-900", children: preview }) }) : null
+    card.summary ? /* @__PURE__ */ jsx16("div", { className: "mt-1 break-words font-mono text-[11px] text-amber-800/90", children: card.summary }) : null,
+    showOutputSection ? /* @__PURE__ */ jsx16("div", { className: "mt-2", children: !output ? /* @__PURE__ */ jsx16("div", { className: "text-[11px] text-amber-700/80", children: card.emptyLabel }) : showDetails ? /* @__PURE__ */ jsxs9("details", { className: "group", children: [
+      /* @__PURE__ */ jsx16("summary", { className: "cursor-pointer text-[11px] text-amber-700", children: card.outputLabel }),
+      /* @__PURE__ */ jsx16("pre", { className: "mt-2 whitespace-pre-wrap break-words rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] text-amber-900", children: output })
+    ] }) : /* @__PURE__ */ jsx16("pre", { className: "rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] whitespace-pre-wrap break-words text-amber-900", children: preview }) }) : null
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function ChatUnknownPart(props) {
-  return /* @__PURE__ */ jsxs11("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "font-semibold text-gray-700", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "font-semibold text-gray-700", children: [
       props.label,
       ": ",
       props.rawType
     ] }),
-    props.text ? /* @__PURE__ */ jsx18("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
+    props.text ? /* @__PURE__ */ jsx17("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-message.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ChatMessage(props) {
   const { message, texts } = props;
   const { role } = message;
   const isUser = role === "user";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: cn(
         "inline-block w-fit max-w-full rounded-2xl border px-4 py-3 shadow-sm",
         isUser ? "border-primary bg-primary text-white" : role === "assistant" ? "border-gray-200 bg-white text-gray-900" : "border-orange-200/80 bg-orange-50/70 text-gray-900"
       ),
-      children: /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: message.parts.map((part, index) => {
+      children: /* @__PURE__ */ jsx18("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         if (part.type === "markdown") {
-          return /* @__PURE__ */ jsx19(ChatMessageMarkdown, { text: part.text, role, texts }, `markdown-${index}`);
+          return /* @__PURE__ */ jsx18(ChatMessageMarkdown, { text: part.text, role, texts }, `markdown-${index}`);
         }
         if (part.type === "reasoning") {
-          return /* @__PURE__ */ jsx19(ChatReasoningBlock, { label: part.label, text: part.text, isUser }, `reasoning-${index}`);
+          return /* @__PURE__ */ jsx18(ChatReasoningBlock, { label: part.label, text: part.text, isUser }, `reasoning-${index}`);
         }
         if (part.type === "tool-card") {
-          return /* @__PURE__ */ jsx19("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx19(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+          return /* @__PURE__ */ jsx18("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx18(ChatToolCard, { card: part.card }) }, `tool-${index}`);
         }
         if (part.type === "unknown") {
-          return /* @__PURE__ */ jsx19(ChatUnknownPart, { label: part.label, rawType: part.rawType, text: part.text }, `unknown-${index}`);
+          return /* @__PURE__ */ jsx18(ChatUnknownPart, { label: part.label, rawType: part.rawType, text: part.text }, `unknown-${index}`);
         }
         return null;
       }) })
@@ -1096,48 +2186,77 @@ function ChatMessage(props) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-import { jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsxs as jsxs11 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs12("div", { className: cn("px-1 text-[11px]", props.isUser ? "text-primary-300" : "text-gray-400"), children: [
-    props.roleLabel,
-    " \xB7 ",
-    props.timestampLabel
-  ] });
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(
+        "px-1 text-[11px] leading-4 text-gray-400",
+        props.isUser ? "text-right" : "text-left"
+      ),
+      children: [
+        props.roleLabel,
+        " \xB7 ",
+        props.timestampLabel
+      ]
+    }
+  );
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
+function hasRenderableText(value) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return false;
+  }
+  return trimmed.replace(INVISIBLE_ONLY_TEXT_PATTERN, "").trim().length > 0;
+}
+function hasRenderableMessageContent(message) {
+  return message.parts.some((part) => {
+    if (part.type === "markdown" || part.type === "reasoning") {
+      return hasRenderableText(part.text);
+    }
+    return true;
+  });
+}
 function ChatMessageList(props) {
-  return /* @__PURE__ */ jsxs13("div", { className: cn("space-y-5", props.className), children: [
-    props.messages.map((message) => {
+  const visibleMessages = props.messages.filter(hasRenderableMessageContent);
+  const hasRenderableAssistantDraft = visibleMessages.some(
+    (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending")
+  );
+  return /* @__PURE__ */ jsxs12("div", { className: cn("space-y-5", props.className), children: [
+    visibleMessages.map((message) => {
       const isUser = message.role === "user";
-      return /* @__PURE__ */ jsxs13("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
-        !isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null,
-        /* @__PURE__ */ jsxs13("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
-          /* @__PURE__ */ jsx20(ChatMessage, { message, texts: props.texts }),
-          /* @__PURE__ */ jsx20(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser })
+      return /* @__PURE__ */ jsxs12("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
+        !isUser ? /* @__PURE__ */ jsx19(ChatMessageAvatar, { role: message.role }) : null,
+        /* @__PURE__ */ jsxs12("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsx19(ChatMessage, { message, texts: props.texts }),
+          /* @__PURE__ */ jsx19(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser })
         ] }),
-        isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx19(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !props.hasStreamingDraft ? /* @__PURE__ */ jsxs13("div", { className: "flex justify-start gap-3", children: [
-      /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: "assistant" }),
-      /* @__PURE__ */ jsx20("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
+    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs12("div", { className: "flex justify-start gap-3", children: [
+      /* @__PURE__ */ jsx19(ChatMessageAvatar, { role: "assistant" }),
+      /* @__PURE__ */ jsx19("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
     ] }) : null
   ] });
 }
 
 // src/components/chat/hooks/use-sticky-bottom-scroll.ts
-import { useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
 var DEFAULT_STICKY_THRESHOLD_PX = 10;
 function scrollElementToBottom(element) {
   element.scrollTop = element.scrollHeight;
 }
 function useStickyBottomScroll(params) {
-  const isStickyRef = useRef4(true);
-  const isProgrammaticScrollRef = useRef4(false);
-  const previousResetKeyRef = useRef4(null);
-  const pendingInitialScrollRef = useRef4(false);
+  const isStickyRef = useRef5(true);
+  const isProgrammaticScrollRef = useRef5(false);
+  const previousResetKeyRef = useRef5(null);
+  const pendingInitialScrollRef = useRef5(false);
   const onScroll = useCallback2(() => {
     if (isProgrammaticScrollRef.current) {
       isProgrammaticScrollRef.current = false;
@@ -1150,7 +2269,7 @@ function useStickyBottomScroll(params) {
     const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
     isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
   }, [params.scrollRef, params.stickyThresholdPx]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (previousResetKeyRef.current === params.resetKey) {
       return;
     }
@@ -1158,7 +2277,7 @@ function useStickyBottomScroll(params) {
     isStickyRef.current = true;
     pendingInitialScrollRef.current = true;
   }, [params.resetKey]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) {
       return;
     }
@@ -1170,7 +2289,7 @@ function useStickyBottomScroll(params) {
     isProgrammaticScrollRef.current = true;
     scrollElementToBottom(element);
   }, [params.hasContent, params.isLoading, params.scrollRef]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!isStickyRef.current || !params.hasContent) {
       return;
     }
@@ -1187,6 +2306,17 @@ export {
   ChatInputBar,
   ChatMessageList,
   copyText,
+  createChatComposerNodesFromText,
+  createChatComposerTextNode,
+  createChatComposerTokenNode,
+  createEmptyChatComposerNodes,
+  extractChatComposerTokenKeys,
+  normalizeChatComposerNodes,
+  removeChatComposerTokenNodes,
+  replaceChatComposerRange,
+  resolveChatComposerSlashTrigger,
+  serializeChatComposerDocument,
+  serializeChatComposerPlainText,
   useActiveItemScroll,
   useCopyFeedback,
   useElementWidth,