@invergent/agent-chat-react 2.8.1 → 2.8.4

package/dist/index.js

@@ -364,20 +364,69 @@ function BrowserControlBar({
     )
   ] });
 }
+function toWsUrl(src) {
+  const url = new URL(src, window.location.href);
+  if (url.protocol === "http:") {
+    url.protocol = "ws:";
+  } else if (url.protocol === "https:") {
+    url.protocol = "wss:";
+  }
+  return url.toString();
+}
 function BrowserLiveView({
   src,
-  testId = "browser-iframe"
+  testId = "browser-rfb",
+  onDisconnect
 }) {
-  return /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      "data-testid": testId,
-      title: "Browser live view",
-      src,
-      className: "h-full w-full border-0 bg-black",
-      allow: "clipboard-read; clipboard-write"
-    }
-  );
+  const containerRef = useRef(null);
+  const onDisconnectRef = useRef(onDisconnect);
+  onDisconnectRef.current = onDisconnect;
+  const [state, setState] = useState("connecting");
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    setState("connecting");
+    let rfb;
+    let disposed = false;
+    const handleConnect = () => setState("connected");
+    const handleDisconnect = (event) => {
+      const detail = event.detail;
+      setState("disconnected");
+      onDisconnectRef.current?.(detail?.clean ?? false);
+    };
+    void import('@novnc/novnc').then((mod) => {
+      if (disposed || !containerRef.current) return;
+      const instance = new mod.default(containerRef.current, toWsUrl(src), {
+        wsProtocols: ["binary"]
+      });
+      instance.viewOnly = false;
+      instance.scaleViewport = true;
+      instance.addEventListener("connect", handleConnect);
+      instance.addEventListener("disconnect", handleDisconnect);
+      rfb = instance;
+    }).catch(() => {
+      if (!disposed) setState("disconnected");
+    });
+    return () => {
+      disposed = true;
+      if (rfb) {
+        rfb.removeEventListener("connect", handleConnect);
+        rfb.removeEventListener("disconnect", handleDisconnect);
+        rfb.disconnect();
+      }
+    };
+  }, [src]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full bg-black", children: [
+    /* @__PURE__ */ jsx("div", { ref: containerRef, "data-testid": testId, className: "h-full w-full" }),
+    state !== "connected" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "browser-rfb-overlay",
+        className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/70 text-sm text-muted-foreground",
+        children: state === "connecting" ? "Connecting to browser\u2026" : "Live view disconnected \u2014 take control again to reconnect."
+      }
+    )
+  ] });
 }
 function BrowserStatusDot({
   status
@@ -572,7 +621,13 @@ function BrowserPane({
               /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Full screen" })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-black", children: state.status === "provisioning" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Starting browser..." }) : state.status === "closed" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser closed." }) : canUseLiveView ? /* @__PURE__ */ jsx(BrowserLiveView, { src: liveViewUrl }) : previewSnapshot ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-black", children: state.status === "provisioning" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Starting browser..." }) : state.status === "closed" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser closed." }) : canUseLiveView ? /* @__PURE__ */ jsx(
+            BrowserLiveView,
+            {
+              src: liveViewUrl,
+              onDisconnect: () => setLocalControlActive(false)
+            }
+          ) : previewSnapshot ? /* @__PURE__ */ jsx(
             BrowserPreviewImage,
             {
               src: previewSnapshot.src,
@@ -616,7 +671,8 @@ function BrowserPane({
             BrowserLiveView,
             {
               src: liveViewUrl,
-              testId: "browser-fullscreen-iframe"
+              testId: "browser-fullscreen-rfb",
+              onDisconnect: () => setLocalControlActive(false)
             }
           ) : previewSnapshot ? /* @__PURE__ */ jsx(
             BrowserPreviewImage,
@@ -715,6 +771,36 @@ var ConversationScrollButton = ({
     }
   );
 };
+var buttonGroupVariants = cva(
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
 
 // src/lib/oauth-popup.ts
 function openOAuthPopup(url) {
@@ -777,8 +863,8 @@ var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "group flex w-full flex-col gap-2",
-      from === "user" ? "is-user max-w-[85%]" : "is-assistant max-w-full",
+      "group flex flex-col gap-2",
+      from === "user" ? "is-user ml-auto max-w-[85%]" : "is-assistant max-w-full",
       className
     ),
     ...props
@@ -4852,25 +4938,6 @@ function Command({
     }
   );
 }
-function CommandInput({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "command-input-wrapper", className: "p-3", children: /* @__PURE__ */ jsxs(InputGroup, { className: "rounded-lg border-transparent bg-muted px-3", children: [
-    /* @__PURE__ */ jsx(
-      Command$1.Input,
-      {
-        "data-slot": "command-input",
-        className: cn(
-          "w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5 shrink-0 opacity-50" }) })
-  ] }) });
-}
 function CommandList({
   className,
   ...props
@@ -5396,7 +5463,7 @@ var PromptInput = ({
         onSubmit: handleSubmit,
         ref: formRef,
         ...props,
-        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-3 py-1 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children })
+        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-4 py-2 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children })
       }
     )
   ] });
@@ -5531,7 +5598,7 @@ var PromptInputButton = ({
     InputGroupButton,
     {
       className: cn(
-        "rounded-sm border border-input/70 text-foreground hover:bg-accent",
+        "rounded-sm border border-input/70 text-foreground bg-accent",
         newSize === "icon-sm" && "size-9",
         className
       ),
@@ -5589,7 +5656,7 @@ var PromptInputSubmit = ({
     InputGroupButton,
     {
       "aria-label": isGenerating ? "Stop" : "Submit",
-      className: cn("rounded-full", className),
+      className: cn("rounded-full bg-amber-400 hover:bg-amber-500 text-black", className),
       onClick: handleClick,
       size,
       type: isGenerating && onStop ? "button" : "submit",
@@ -6072,6 +6139,168 @@ function Skeleton({ className, ...props }) {
     }
   );
 }
+var SEARCH_PLACEHOLDER = {
+  commands: "Search commands\u2026",
+  skills: "Search skills\u2026",
+  scheduled: "Search scheduled tasks\u2026",
+  all: "Type a command or search\u2026"
+};
+var NAV_HINT = "\u2191\u2193 navigate   \xB7   Enter select   \xB7   Esc dismiss";
+var SEARCH_HINT = {
+  commands: NAV_HINT,
+  skills: "Esc dismiss",
+  scheduled: NAV_HINT,
+  all: NAV_HINT
+};
+var ROW_CLASS = "grid grid-cols-[120px_1fr] items-baseline gap-3 rounded-md px-3 py-[9px] data-[selected=true]:bg-foreground/[0.06] [&_svg]:hidden";
+function ComposerCommandMenu({
+  menuMode,
+  searchQuery,
+  onSearchChange,
+  skillsLoading,
+  builtinCommands,
+  adapterCommands,
+  scheduledExamples,
+  onCommandSelect,
+  onEscapeDismiss
+}) {
+  const controlledSearch = menuMode === "commands" || menuMode === "all";
+  const showCommands = menuMode === "commands" || menuMode === "all";
+  const showSkills = menuMode === "skills" || menuMode === "all";
+  const skillsUnattached = menuMode === "skills" && !skillsLoading && adapterCommands.length === 0;
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      side: "top",
+      align: "start",
+      className: "overflow-hidden rounded-xl p-0",
+      style: { width: "var(--radix-popover-trigger-width)" },
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      onEscapeKeyDown: () => {
+        onEscapeDismiss();
+      },
+      children: /* @__PURE__ */ jsxs(Command, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-[13px]", children: [
+          /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            Command$1.Input,
+            {
+              "data-slot": "command-input",
+              placeholder: SEARCH_PLACEHOLDER[menuMode],
+              className: "min-w-0 flex-1 bg-transparent text-[13.5px] text-foreground outline-hidden placeholder:text-muted-foreground",
+              ...controlledSearch ? { value: searchQuery, onValueChange: onSearchChange } : {}
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap text-[11px] text-muted-foreground", children: SEARCH_HINT[menuMode] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-foreground/[0.07]" }),
+        skillsUnattached ? /* @__PURE__ */ jsx(SkillsEmptyState, {}) : /* @__PURE__ */ jsxs(CommandList, { className: "p-2", children: [
+          !(skillsLoading && showSkills) && /* @__PURE__ */ jsx(CommandEmpty, { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: menuMode === "skills" ? "No skills match your search." : menuMode === "scheduled" ? "No scheduled tasks found." : "No commands found." }),
+          showSkills && skillsLoading && adapterCommands.length === 0 && [0, 1, 2].map((i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "grid grid-cols-[120px_1fr] items-baseline gap-3 px-3 py-[9px]",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full max-w-[16rem]" })
+              ]
+            },
+            `skill-skeleton-${i}`
+          )),
+          menuMode === "scheduled" && scheduledExamples.map((cmd) => /* @__PURE__ */ jsx(
+            MenuRow,
+            {
+              cmd,
+              onSelect: onCommandSelect
+            },
+            cmd.value
+          )),
+          showCommands && builtinCommands.map((cmd) => /* @__PURE__ */ jsx(
+            MenuRow,
+            {
+              cmd,
+              onSelect: onCommandSelect
+            },
+            cmd.value
+          )),
+          showSkills && adapterCommands.map((cmd) => /* @__PURE__ */ jsx(
+            MenuRow,
+            {
+              cmd,
+              keywords: cmd.isExpert ? [cmd.description, "expert"] : void 0,
+              badge: cmd.isExpert ? "expert" : void 0,
+              onSelect: onCommandSelect
+            },
+            cmd.value
+          ))
+        ] })
+      ] })
+    }
+  );
+}
+function MenuRow({
+  cmd,
+  keywords,
+  badge,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      value: cmd.value,
+      keywords: keywords ?? [cmd.description],
+      onSelect: () => onSelect(cmd.value),
+      className: ROW_CLASS,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex min-w-0 max-w-full items-center gap-1.5",
+            title: cmd.label,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-[13px] font-medium text-amber-500", children: cmd.label }),
+              badge && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "shrink-0 rounded-sm bg-amber-500/10 px-1 text-[9px] font-semibold uppercase tracking-wider text-amber-500",
+                  "aria-label": "Expert specialist",
+                  children: badge
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "min-w-0 truncate text-[12.5px] text-muted-foreground",
+            title: cmd.description,
+            children: cmd.description
+          }
+        )
+      ]
+    }
+  );
+}
+function SkillsEmptyState() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2.5 px-6 py-[30px] text-center", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-2xl leading-none text-muted-foreground/70",
+        "aria-hidden": "true",
+        children: "\u2726"
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "No skills attached" }),
+    /* @__PURE__ */ jsxs("p", { className: "text-[12.5px] text-muted-foreground", children: [
+      "Add them in",
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "text-amber-500", children: "Configure \u2192 Skills & Tools" })
+    ] })
+  ] });
+}
 function ChatComposer(props) {
   return /* @__PURE__ */ jsx(PromptInputProvider, { children: /* @__PURE__ */ jsx(ChatComposerInner, { ...props }) });
 }
@@ -6102,6 +6331,26 @@ function formatBytes2(n) {
   }
   return `${n} B`;
 }
+function ComposerMenuButton({
+  icon: Icon,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "secondary",
+      size: "sm",
+      className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent cursor-pointer",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(Icon, {}),
+        label
+      ]
+    }
+  );
+}
 function AttachmentPreviewStrip() {
   const attachments = useProviderAttachments();
   if (attachments.files.length === 0) return null;
@@ -6306,6 +6555,11 @@ function ChatComposerInner({
       textarea.setSelectionRange(end, end);
     });
   }, []);
+  const openMenu = useCallback((mode) => {
+    setMenuMode(mode);
+    setMenuDismissed(false);
+    setButtonMenuOpen(true);
+  }, []);
   const handleCommandSelect = useCallback(
     (commandValue) => {
       textInput.setInput(`${commandValue} `);
@@ -6397,58 +6651,28 @@ function ChatComposerInner({
       children: [
         /* @__PURE__ */ jsx(AttachmentPreviewStrip, {}),
         viewMode === "expert" && !disabled && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2 px-1 pb-2", children: [
-          /* @__PURE__ */ jsxs(
-            Button,
+          /* @__PURE__ */ jsx(
+            ComposerMenuButton,
             {
-              type: "button",
-              variant: "secondary",
-              size: "sm",
-              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent cursor-pointer",
-              onClick: () => {
-                setMenuMode("commands");
-                setMenuDismissed(false);
-                setButtonMenuOpen(true);
-              },
-              children: [
-                /* @__PURE__ */ jsx(TerminalIcon, {}),
-                "Commands"
-              ]
+              icon: TerminalIcon,
+              label: "Commands",
+              onClick: () => openMenu("commands")
             }
           ),
-          /* @__PURE__ */ jsxs(
-            Button,
+          /* @__PURE__ */ jsx(
+            ComposerMenuButton,
             {
-              type: "button",
-              variant: "secondary",
-              size: "sm",
-              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent cursor-pointer",
-              onClick: () => {
-                setMenuMode("skills");
-                setMenuDismissed(false);
-                setButtonMenuOpen(true);
-              },
-              children: [
-                /* @__PURE__ */ jsx(SparklesIcon, {}),
-                "Skills"
-              ]
+              icon: SparklesIcon,
+              label: "Skills",
+              onClick: () => openMenu("skills")
             }
           ),
-          loopsEnabled && /* @__PURE__ */ jsxs(
-            Button,
+          loopsEnabled && /* @__PURE__ */ jsx(
+            ComposerMenuButton,
             {
-              type: "button",
-              variant: "secondary",
-              size: "sm",
-              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent cursor-pointer",
-              onClick: () => {
-                setMenuMode("scheduled");
-                setMenuDismissed(false);
-                setButtonMenuOpen(true);
-              },
-              children: [
-                /* @__PURE__ */ jsx(ClockIcon, {}),
-                "Scheduled Tasks"
-              ]
+              icon: ClockIcon,
+              label: "Scheduled Tasks",
+              onClick: () => openMenu("scheduled")
             }
           )
         ] }),
@@ -6602,29 +6826,32 @@ function ChatComposerInner({
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   onViewModeChange && /* @__PURE__ */ jsxs(
-                    "div",
+                    ButtonGroup,
                     {
-                      role: "group",
                       "aria-label": "Chat view mode",
-                      className: "inline-flex overflow-hidden rounded-md border border-border",
+                      className: "overflow-hidden rounded-md border border-border",
                       children: [
                         /* @__PURE__ */ jsx(
-                          "button",
+                          Button,
                           {
                             type: "button",
+                            size: "xs",
+                            className: "capitalize font-normal",
+                            variant: viewMode === "simple" ? "secondary" : "ghost",
                             "aria-pressed": viewMode === "simple",
                             onClick: () => onViewModeChange("simple"),
-                            className: viewMode === "simple" ? "bg-accent px-2 py-1 text-xs text-foreground" : "px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
                             children: "Simple"
                           }
                         ),
                         /* @__PURE__ */ jsx(
-                          "button",
+                          Button,
                           {
                             type: "button",
+                            size: "xs",
+                            className: "capitalize font-normal",
+                            variant: viewMode === "expert" ? "secondary" : "ghost",
                             "aria-pressed": viewMode === "expert",
                             onClick: () => onViewModeChange("expert"),
-                            className: viewMode === "expert" ? "bg-accent px-2 py-1 text-xs text-foreground" : "px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
                             children: "Advanced"
                           }
                         )
@@ -6636,7 +6863,7 @@ function ChatComposerInner({
                     {
                       status,
                       onStop,
-                      className: "md:size-8"
+                      className: "size-10"
                     }
                   )
                 ] })
@@ -6645,135 +6872,17 @@ function ChatComposerInner({
           }
         ) }),
         /* @__PURE__ */ jsx(
-          PopoverContent,
+          ComposerCommandMenu,
           {
-            side: "top",
-            align: "start",
-            className: "overflow-hidden rounded-xl p-0",
-            style: { width: "var(--radix-popover-trigger-width)" },
-            onCloseAutoFocus: (e) => e.preventDefault(),
-            onEscapeKeyDown: () => {
-              focusTextareaAtEnd();
-            },
-            children: /* @__PURE__ */ jsxs(Command, { children: [
-              menuMode === "skills" ? /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search skills..." }) : menuMode === "scheduled" ? /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search scheduled tasks..." }) : /* @__PURE__ */ jsx(
-                CommandInput,
-                {
-                  placeholder: "Type a command or search...",
-                  value: searchQuery,
-                  onValueChange: handleSearchChange
-                }
-              ),
-              /* @__PURE__ */ jsxs(CommandList, { children: [
-                !(skillsLoading && (menuMode === "skills" || menuMode === "all")) && /* @__PURE__ */ jsx(CommandEmpty, { children: menuMode === "skills" ? "No skills found." : menuMode === "scheduled" ? "No scheduled tasks found." : "No commands found." }),
-                (menuMode === "skills" || menuMode === "all") && skillsLoading && adapterCommands.length === 0 && [0, 1, 2].map((i) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "grid grid-cols-[12rem_1fr] items-baseline gap-3 px-2 py-2",
-                    "aria-hidden": "true",
-                    children: [
-                      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
-                      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full max-w-[16rem]" })
-                    ]
-                  },
-                  `skill-skeleton-${i}`
-                )),
-                menuMode === "scheduled" && scheduledExamples.map((cmd) => /* @__PURE__ */ jsxs(
-                  CommandItem,
-                  {
-                    value: cmd.value,
-                    keywords: [cmd.description],
-                    onSelect: () => handleCommandSelect(cmd.value),
-                    className: "grid grid-cols-[14rem_1fr] items-baseline gap-3 [&_svg]:hidden",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "font-mono font-semibold text-foreground truncate",
-                          title: cmd.label,
-                          children: cmd.label
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "min-w-0 truncate text-sm text-muted-foreground",
-                          title: cmd.description,
-                          children: cmd.description
-                        }
-                      )
-                    ]
-                  },
-                  cmd.value
-                )),
-                (menuMode === "commands" || menuMode === "all") && builtinCommands.map((cmd) => /* @__PURE__ */ jsxs(
-                  CommandItem,
-                  {
-                    value: cmd.value,
-                    keywords: [cmd.description],
-                    onSelect: () => handleCommandSelect(cmd.value),
-                    className: "grid grid-cols-[12rem_1fr] items-baseline gap-3 [&_svg]:hidden",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "font-mono font-semibold text-foreground truncate",
-                          title: cmd.label,
-                          children: cmd.label
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "min-w-0 truncate text-sm text-muted-foreground",
-                          title: cmd.description,
-                          children: cmd.description
-                        }
-                      )
-                    ]
-                  },
-                  cmd.value
-                )),
-                (menuMode === "skills" || menuMode === "all") && adapterCommands.map((cmd) => /* @__PURE__ */ jsxs(
-                  CommandItem,
-                  {
-                    value: cmd.value,
-                    keywords: cmd.isExpert ? [cmd.description, "expert"] : [cmd.description],
-                    onSelect: () => handleCommandSelect(cmd.value),
-                    className: "grid grid-cols-[12rem_1fr] items-baseline gap-3 [&_svg]:hidden",
-                    children: [
-                      /* @__PURE__ */ jsxs(
-                        "span",
-                        {
-                          className: "inline-flex items-center gap-1.5 min-w-0 max-w-full",
-                          title: cmd.label,
-                          children: [
-                            /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-foreground truncate", children: cmd.label }),
-                            cmd.isExpert && /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                className: "shrink-0 rounded-sm bg-primary/10 px-1 text-[9px] font-semibold uppercase tracking-wider text-primary",
-                                "aria-label": "Expert specialist",
-                                children: "expert"
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "min-w-0 truncate text-sm text-muted-foreground",
-                          title: cmd.description,
-                          children: cmd.description
-                        }
-                      )
-                    ]
-                  },
-                  cmd.value
-                ))
-              ] })
-            ] })
+            menuMode,
+            searchQuery,
+            onSearchChange: handleSearchChange,
+            skillsLoading,
+            builtinCommands,
+            adapterCommands,
+            scheduledExamples,
+            onCommandSelect: handleCommandSelect,
+            onEscapeDismiss: focusTextareaAtEnd
           }
         )
       ]