@invergent/agent-chat-react 2.8.0 → 2.8.2

package/dist/index.d.cts

@@ -1265,6 +1265,10 @@ declare function ScheduledWorkPanel({ adapter, agentId, title, limit, status, hi
 interface SessionTreePanelProps {
     adapter: AgentChatAdapter;
     sessionId?: string | null;
+    /**
+     * ID of the currently highlighted session. Defaults to `sessionId`.
+     * Pass `""` (empty string) to clear the active highlight when `sessionId` is set.
+     */
     activeSessionId?: string;
     agentId?: string;
     title?: string;

package/dist/index.d.ts

@@ -1265,6 +1265,10 @@ declare function ScheduledWorkPanel({ adapter, agentId, title, limit, status, hi
 interface SessionTreePanelProps {
     adapter: AgentChatAdapter;
     sessionId?: string | null;
+    /**
+     * ID of the currently highlighted session. Defaults to `sessionId`.
+     * Pass `""` (empty string) to clear the active highlight when `sessionId` is set.
+     */
     activeSessionId?: string;
     agentId?: string;
     title?: string;

package/dist/index.js

@@ -4852,25 +4852,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
@@ -6072,6 +6053,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 +6245,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 +6469,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 +6565,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")
             }
           )
         ] }),
@@ -6645,135 +6783,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
           }
         )
       ]
@@ -16082,10 +16102,20 @@ function fallbackSessionTitle(entry) {
   if (entry.runKind === "scheduled") return "Scheduled run";
   return "New session";
 }
+function rowStateClass(isActive, isInActiveGroup) {
+  if (isActive) {
+    return "bg-faint/30 dark:bg-[#1e2840] text-foreground border-l-primary";
+  }
+  if (isInActiveGroup) {
+    return "bg-line/70 dark:bg-line/60 text-foreground/80 hover:bg-input hover:text-foreground border-l-transparent";
+  }
+  return "bg-transparent text-foreground/80 hover:bg-input hover:text-foreground border-l-transparent";
+}
 function TreeNodeRow({
   entry,
   depth,
   activeSessionId,
+  activeGroupRootId,
   canStop,
   canDelete,
   onSelect,
@@ -16097,11 +16127,15 @@ function TreeNodeRow({
   const isActive = entry.id === activeSessionId;
   const isRunning = entry.status === "active";
   const isChildSession = entry.parentId != null;
+  const isInActiveGroup = activeGroupRootId !== null && (entry.id === activeGroupRootId || entry.parentId === activeGroupRootId);
   const title = entry.title ?? fallbackSessionTitle(entry);
   const subtitle = [
     formatRunKind(entry.runKind),
     formatSessionTime(entry.updatedAt)
   ].filter(Boolean).join(" \xB7 ");
+  useEffect(() => {
+    if (hasChildren) setExpanded(isInActiveGroup);
+  }, [isInActiveGroup, hasChildren]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -16115,7 +16149,7 @@ function TreeNodeRow({
         className: cn(
           "group flex items-center gap-2 w-full py-2 pr-2 text-left cursor-pointer transition-colors border-l-2",
           "min-h-11 md:min-h-0",
-          isActive ? "bg-line text-foreground border-l-primary" : "bg-transparent text-foreground/80 hover:bg-input hover:text-foreground border-l-transparent"
+          rowStateClass(isActive, isInActiveGroup)
         ),
         style: { paddingLeft: `${depth * 12 + 12}px` },
         children: [
@@ -16174,6 +16208,7 @@ function TreeNodeRow({
         entry: child,
         depth: depth + 1,
         activeSessionId,
+        activeGroupRootId,
         canStop,
         canDelete,
         onSelect,
@@ -16290,6 +16325,21 @@ function SessionTreePanel({
     return () => clearInterval(id);
   }, [refetch, runningCount]);
   const roots = useMemo(() => buildTree(nodes), [nodes]);
+  const activeGroupRootId = useMemo(() => {
+    if (!activeSessionId) return null;
+    const parentOf = /* @__PURE__ */ new Map();
+    for (const n of nodes) parentOf.set(n.id, n.parentId ?? null);
+    const visited = /* @__PURE__ */ new Set();
+    let current = activeSessionId;
+    let parent = parentOf.get(current);
+    while (parent != null) {
+      if (visited.has(parent)) break;
+      visited.add(current);
+      current = parent;
+      parent = parentOf.get(current);
+    }
+    return parentOf.has(current) ? current : null;
+  }, [activeSessionId, nodes]);
   const handleSelect = useCallback(
     (id) => {
       onSessionSelect?.(id);
@@ -16353,6 +16403,7 @@ function SessionTreePanel({
         entry,
         depth: 0,
         activeSessionId: activeSessionId ?? "",
+        activeGroupRootId,
         canStop: Boolean(adapter.stopSession),
         canDelete: Boolean(adapter.deleteSession),
         onSelect: handleSelect,