@ai-matrx/agents 0.59.230 → 0.59.232

package/dist/catalog/react/index.js

@@ -973,7 +973,7 @@ var selectStatus = (state) => state.status;
 
 // catalog/react/AgentListDropdown.tsx
 import {
-  cn as cn5,
+  cn as cn6,
   Drawer,
   DrawerContent,
   DrawerTitle,
@@ -986,11 +986,11 @@ import {
   TooltipTrigger,
   useIsMobile as useIsMobile2
 } from "@ai-matrx/design-system";
-import { useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
+import { useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
 
 // catalog/react/AgentListPanel.tsx
-import { cn as cn4, useIsMobile } from "@ai-matrx/design-system";
-import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState3 } from "react";
+import { cn as cn5, useIsMobile } from "@ai-matrx/design-system";
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 
 // catalog/react/primitives.tsx
 import { cn } from "@ai-matrx/design-system";
@@ -1000,7 +1000,9 @@ var SearchInput = ({
   ref,
   value,
   onChange,
-  placeholder
+  placeholder,
+  onKeyDown,
+  inputProps
 }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 h-7 px-2 rounded-md bg-muted/40 border border-border/50", children: [
   /* @__PURE__ */ jsx3(SearchIcon, { className: "w-3 h-3 text-muted-foreground shrink-0" }),
   /* @__PURE__ */ jsx3(
@@ -1010,6 +1012,8 @@ var SearchInput = ({
       type: "text",
       value,
       onChange: (e) => onChange(e.target.value),
+      onKeyDown,
+      ...inputProps,
       placeholder,
       className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 outline-none min-w-0",
       style: { fontSize: "16px" }
@@ -1464,8 +1468,9 @@ function AgentDetailCard({ agent, onSelect, duplicate, onHoldChange }) {
 }
 
 // catalog/react/AgentListContent.tsx
-import { ErrorBox } from "@ai-matrx/design-system";
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { cn as cn4, ErrorBox } from "@ai-matrx/design-system";
+import { computeWindow } from "@ai-matrx/design-system/data-table/virtual-window";
+import { useEffect as useEffect4, useId, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
 
 // catalog/react/AgentFilterBar.tsx
 import { ArchiveIcon, StarIcon } from "@ai-matrx/design-system/icons";
@@ -1735,6 +1740,10 @@ function AgentRow({
 // catalog/react/AgentListContent.tsx
 import { XIcon as XIcon2 } from "@ai-matrx/design-system/icons";
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var AGENT_ROW_HEIGHT = 36;
+var UNMEASURED_VIEWPORT = 480;
+var ROW_OVERSCAN = 8;
+var WINDOW_ABOVE = 50;
 function AgentListContent({
   agents,
   isLoading,
@@ -1766,11 +1775,104 @@ function AgentListContent({
 }) {
   const catalog = useAgentCatalog();
   const listScrollRef = useRef3(null);
+  const windowRef = useRef3(null);
+  const listboxId = useId();
+  const [scrollTop, setScrollTop] = useState3(0);
+  const [viewport, setViewport] = useState3(0);
+  const [listStart, setListStart] = useState3(0);
+  const [activeIndex, setActiveIndex] = useState3(-1);
+  const [resetKey, setResetKey] = useState3(
+    `${consumer.tab}\0${consumer.searchTerm}`
+  );
+  const nextResetKey = `${consumer.tab}\0${consumer.searchTerm}`;
+  if (nextResetKey !== resetKey) {
+    setResetKey(nextResetKey);
+    setActiveIndex(-1);
+  }
+  const defaultAgentId = defaultRow?.row?.id ?? null;
+  useLayoutEffect(() => {
+    const scroller = listScrollRef.current;
+    if (!scroller) return void 0;
+    const measure = () => {
+      setViewport(scroller.clientHeight);
+      setListStart(windowRef.current?.offsetTop ?? 0);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [isLoading, pinnedAgent?.id, defaultAgentId, agents.length === 0]);
   useEffect4(() => {
-    if (listOpen && pinnedAgent) {
-      listScrollRef.current?.scrollTo({ top: 0 });
+    const scroller = listScrollRef.current;
+    if (!listOpen || !scroller) return;
+    if (pinnedAgent) {
+      scroller.scrollTo({ top: 0 });
+      return;
     }
-  }, [listOpen, pinnedAgent?.id]);
+    const index = activeAgentId ? agents.findIndex((a) => a.id === activeAgentId) : -1;
+    if (index < 0) return;
+    const view = scroller.clientHeight || UNMEASURED_VIEWPORT;
+    const top = Math.max(
+      0,
+      (windowRef.current?.offsetTop ?? 0) + index * AGENT_ROW_HEIGHT - (view - AGENT_ROW_HEIGHT) / 2
+    );
+    scroller.scrollTo({ top });
+    setScrollTop(top);
+  }, [listOpen, pinnedAgent?.id, activeAgentId, isLoading]);
+  const win = agents.length <= WINDOW_ABOVE ? { start: 0, end: agents.length, padStart: 0, padEnd: 0 } : computeWindow({
+    count: agents.length,
+    itemSize: AGENT_ROW_HEIGHT,
+    viewport: viewport > 0 ? viewport : UNMEASURED_VIEWPORT,
+    offset: Math.max(0, scrollTop - listStart),
+    overscan: ROW_OVERSCAN
+  });
+  const visibleAgents = agents.slice(win.start, win.end);
+  const optionId = (index) => `${listboxId}-option-${index}`;
+  const revealIndex = (index) => {
+    const scroller = listScrollRef.current;
+    if (!scroller) return;
+    const view = scroller.clientHeight || UNMEASURED_VIEWPORT;
+    const top = listStart + index * AGENT_ROW_HEIGHT;
+    const bottom = top + AGENT_ROW_HEIGHT;
+    let next = null;
+    if (top < scroller.scrollTop) next = top;
+    else if (bottom > scroller.scrollTop + view) next = bottom - view;
+    if (next === null) return;
+    scroller.scrollTop = next;
+    setScrollTop(next);
+  };
+  const handleListKeyDown = (event) => {
+    if (agents.length === 0) return;
+    const last = agents.length - 1;
+    let next = null;
+    switch (event.key) {
+      case "ArrowDown":
+        next = activeIndex < 0 ? 0 : Math.min(last, activeIndex + 1);
+        break;
+      case "ArrowUp":
+        next = activeIndex <= 0 ? 0 : activeIndex - 1;
+        break;
+      case "PageDown":
+        next = Math.min(last, Math.max(0, activeIndex) + 10);
+        break;
+      case "PageUp":
+        next = Math.max(0, activeIndex - 10);
+        break;
+      case "Enter": {
+        const agent = activeIndex >= 0 ? agents[activeIndex] : void 0;
+        if (!agent) return;
+        event.preventDefault();
+        onSelectAgent(agent);
+        return;
+      }
+      default:
+        return;
+    }
+    event.preventDefault();
+    setActiveIndex(next);
+    revealIndex(next);
+  };
   const { labels } = catalog;
   const emptyLabel = catalog.getUserIdOrNull() === null ? labels.emptySignedOut : agentListEmptyLabel(consumer.tab, labels);
   const defaultAgent = defaultRow?.row ?? null;
@@ -1781,7 +1883,15 @@ function AgentListContent({
         ref: inputRef,
         value: consumer.searchTerm,
         onChange: consumer.setSearchTerm,
-        placeholder: labels.searchPlaceholder
+        placeholder: labels.searchPlaceholder,
+        onKeyDown: handleListKeyDown,
+        inputProps: {
+          role: "combobox",
+          "aria-controls": listboxId,
+          "aria-expanded": true,
+          "aria-autocomplete": "list",
+          ...activeIndex >= 0 && activeIndex < agents.length ? { "aria-activedescendant": optionId(activeIndex) } : {}
+        }
       }
     ) }),
     /* @__PURE__ */ jsx10(
@@ -1870,65 +1980,106 @@ function AgentListContent({
       }
     ),
     /* @__PURE__ */ jsx10("div", { className: "h-px bg-border shrink-0" }),
-    /* @__PURE__ */ jsx10("div", { ref: listScrollRef, className: "overflow-y-auto flex-1 min-h-0", children: isLoading ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-center py-8 gap-2 text-muted-foreground", children: [
-      /* @__PURE__ */ jsx10(LoaderIcon, { className: "w-4 h-4 matrx-agent-spin" }),
-      /* @__PURE__ */ jsx10("span", { className: "text-xs", children: labels.loading })
-    ] }) : agents.length === 0 && !pinnedAgent && !defaultAgent ? /* @__PURE__ */ jsx10("div", { className: "flex flex-col items-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsx10("span", { className: "text-xs", children: emptyLabel }) }) : /* @__PURE__ */ jsxs7("div", { className: "py-0.5", children: [
-      defaultAgent && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-        /* @__PURE__ */ jsx10("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Default" }) }),
-        /* @__PURE__ */ jsx10(
-          AgentRow,
-          {
-            agent: defaultAgent,
-            isActive: defaultAgent.id === activeAgentId,
-            isHovered: hoveredAgent?.id === defaultAgent.id,
-            isMobile,
-            onClick: () => onSelectAgent(defaultAgent),
-            href: resolveAgentHref?.(defaultAgent),
-            onHover: () => onAgentHover(defaultAgent),
-            onHoverEnd: () => onAgentHoverEnd(defaultAgent),
-            onDetailPress: () => onDetailPress(defaultAgent)
-          },
-          `default-${defaultAgent.id}`
-        ),
-        /* @__PURE__ */ jsx10("div", { className: "mx-2 my-0.5 h-px bg-border" })
-      ] }),
-      pinnedAgent && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-        /* @__PURE__ */ jsx10("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: labels.currentAgentHeading }) }),
-        /* @__PURE__ */ jsx10(
-          AgentRow,
-          {
-            agent: pinnedAgent,
-            isActive: true,
-            isHovered: hoveredAgent?.id === pinnedAgent.id,
-            isMobile,
-            onClick: () => onSelectAgent(pinnedAgent),
-            href: resolveAgentHref?.(pinnedAgent),
-            onHover: () => onAgentHover(pinnedAgent),
-            onHoverEnd: () => onAgentHoverEnd(pinnedAgent),
-            onDetailPress: () => onDetailPress(pinnedAgent)
-          },
-          `pinned-${pinnedAgent.id}`
-        ),
-        /* @__PURE__ */ jsx10("div", { className: "mx-2 my-0.5 h-px bg-border" })
-      ] }),
-      agents.map((agent) => /* @__PURE__ */ jsx10(
-        AgentRow,
-        {
-          agent,
-          isActive: agent.id === activeAgentId,
-          isHovered: hoveredAgent?.id === agent.id,
-          isMobile,
-          onClick: () => onSelectAgent(agent),
-          href: resolveAgentHref?.(agent),
-          onHover: () => onAgentHover(agent),
-          onHoverEnd: () => onAgentHoverEnd(agent),
-          onDetailPress: () => onDetailPress(agent)
-        },
-        agent.id
-      )),
-      agents.length === 0 && (pinnedAgent || defaultAgent) && /* @__PURE__ */ jsx10("div", { className: "flex flex-col items-center py-4 text-muted-foreground", children: /* @__PURE__ */ jsx10("span", { className: "text-xs", children: emptyLabel }) })
-    ] }) }),
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref: listScrollRef,
+        "data-agent-list-scroll": "",
+        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+        className: "relative overflow-y-auto flex-1 min-h-0",
+        children: isLoading ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-center py-8 gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx10(LoaderIcon, { className: "w-4 h-4 matrx-agent-spin" }),
+          /* @__PURE__ */ jsx10("span", { className: "text-xs", children: labels.loading })
+        ] }) : agents.length === 0 && !pinnedAgent && !defaultAgent ? /* @__PURE__ */ jsx10("div", { className: "flex flex-col items-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsx10("span", { className: "text-xs", children: emptyLabel }) }) : /* @__PURE__ */ jsxs7("div", { className: "py-0.5", children: [
+          defaultAgent && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsx10("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Default" }) }),
+            /* @__PURE__ */ jsx10(
+              AgentRow,
+              {
+                agent: defaultAgent,
+                isActive: defaultAgent.id === activeAgentId,
+                isHovered: hoveredAgent?.id === defaultAgent.id,
+                isMobile,
+                onClick: () => onSelectAgent(defaultAgent),
+                href: resolveAgentHref?.(defaultAgent),
+                onHover: () => onAgentHover(defaultAgent),
+                onHoverEnd: () => onAgentHoverEnd(defaultAgent),
+                onDetailPress: () => onDetailPress(defaultAgent)
+              },
+              `default-${defaultAgent.id}`
+            ),
+            /* @__PURE__ */ jsx10("div", { className: "mx-2 my-0.5 h-px bg-border" })
+          ] }),
+          pinnedAgent && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsx10("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: labels.currentAgentHeading }) }),
+            /* @__PURE__ */ jsx10(
+              AgentRow,
+              {
+                agent: pinnedAgent,
+                isActive: true,
+                isHovered: hoveredAgent?.id === pinnedAgent.id,
+                isMobile,
+                onClick: () => onSelectAgent(pinnedAgent),
+                href: resolveAgentHref?.(pinnedAgent),
+                onHover: () => onAgentHover(pinnedAgent),
+                onHoverEnd: () => onAgentHoverEnd(pinnedAgent),
+                onDetailPress: () => onDetailPress(pinnedAgent)
+              },
+              `pinned-${pinnedAgent.id}`
+            ),
+            /* @__PURE__ */ jsx10("div", { className: "mx-2 my-0.5 h-px bg-border" })
+          ] }),
+          /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              ref: windowRef,
+              id: listboxId,
+              role: "listbox",
+              "aria-label": labels.searchPlaceholder,
+              children: [
+                win.padStart > 0 && /* @__PURE__ */ jsx10("div", { "aria-hidden": true, style: { height: win.padStart } }),
+                visibleAgents.map((agent, offset) => {
+                  const index = win.start + offset;
+                  return /* @__PURE__ */ jsx10(
+                    "div",
+                    {
+                      id: optionId(index),
+                      role: "option",
+                      "aria-selected": agent.id === activeAgentId,
+                      "aria-posinset": index + 1,
+                      "aria-setsize": agents.length,
+                      "data-agent-index": index,
+                      style: { height: AGENT_ROW_HEIGHT },
+                      className: cn4(
+                        "flex overflow-hidden",
+                        index === activeIndex && "bg-muted/60"
+                      ),
+                      children: /* @__PURE__ */ jsx10(
+                        AgentRow,
+                        {
+                          agent,
+                          isActive: agent.id === activeAgentId,
+                          isHovered: hoveredAgent?.id === agent.id,
+                          isMobile,
+                          onClick: () => onSelectAgent(agent),
+                          href: resolveAgentHref?.(agent),
+                          onHover: () => onAgentHover(agent),
+                          onHoverEnd: () => onAgentHoverEnd(agent),
+                          onDetailPress: () => onDetailPress(agent)
+                        }
+                      )
+                    },
+                    agent.id
+                  );
+                }),
+                win.padEnd > 0 && /* @__PURE__ */ jsx10("div", { "aria-hidden": true, style: { height: win.padEnd } })
+              ]
+            }
+          ),
+          agents.length === 0 && (pinnedAgent || defaultAgent) && /* @__PURE__ */ jsx10("div", { className: "flex flex-col items-center py-4 text-muted-foreground", children: /* @__PURE__ */ jsx10("span", { className: "text-xs", children: emptyLabel }) })
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsx10("div", { className: "h-px bg-border shrink-0" }),
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-2.5 py-1.5 shrink-0", children: [
       /* @__PURE__ */ jsx10(
@@ -2148,11 +2299,11 @@ function AgentListPanelBody({
 }) {
   const isMobile = useIsMobile();
   const { labels } = useAgentCatalog();
-  const [rightPanel, setRightPanel] = useState3(null);
-  const [catSearch, setCatSearch] = useState3("");
-  const [tagSearch, setTagSearch] = useState3("");
-  const [mobileDetailAgent, setMobileDetailAgent] = useState3(null);
-  const [mobileSubView, setMobileSubView] = useState3(null);
+  const [rightPanel, setRightPanel] = useState4(null);
+  const [catSearch, setCatSearch] = useState4("");
+  const [tagSearch, setTagSearch] = useState4("");
+  const [mobileDetailAgent, setMobileDetailAgent] = useState4(null);
+  const [mobileSubView, setMobileSubView] = useState4(null);
   const inputRef = useRef4(null);
   const {
     agents,
@@ -2274,7 +2425,7 @@ function AgentListPanelBody({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ jsx14("div", { className: cn4("flex min-h-0 flex-1 flex-col overflow-hidden", className), children: mobileDetailAgent ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col overflow-hidden", children: [
+    return /* @__PURE__ */ jsx14("div", { className: cn5("flex min-h-0 flex-1 flex-col overflow-hidden", className), children: mobileDetailAgent ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsxs11(
         "button",
         {
@@ -2313,7 +2464,7 @@ function AgentListPanelBody({
       }
     ) : listPanel });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: cn4("flex h-full", className), children: [
+  return /* @__PURE__ */ jsxs11("div", { className: cn5("flex h-full", className), children: [
     /* @__PURE__ */ jsx14("div", { className: "flex flex-col min-w-[340px] flex-1 border-r border-border", children: listPanel }),
     /* @__PURE__ */ jsxs11(
       "div",
@@ -2414,7 +2565,7 @@ function AgentListPanel({
   return /* @__PURE__ */ jsx14(
     "div",
     {
-      className: cn4("flex min-h-0 flex-col overflow-hidden", (isMobile || fill) && "h-full w-full", className),
+      className: cn5("flex min-h-0 flex-col overflow-hidden", (isMobile || fill) && "h-full w-full", className),
       style: isMobile || fill ? void 0 : { width: PANEL_WIDTH, height: PANEL_HEIGHT },
       children: /* @__PURE__ */ jsx14(
         AgentListPanelBody,
@@ -2460,10 +2611,10 @@ function AgentListDropdown({
   const isMobile = useIsMobile2();
   const { labels } = useAgentCatalog();
   const { popoverContainer } = useAgentCatalogUiPorts();
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   const triggerRef = useRef5(null);
-  const [fitHeight, setFitHeight] = useState4(null);
-  const [openSide, setOpenSide] = useState4(contentSide);
+  const [fitHeight, setFitHeight] = useState5(null);
+  const [openSide, setOpenSide] = useState5(contentSide);
   const core = useAgentListCore({
     consumerId,
     ...onSelect ? { onSelect } : {},
@@ -2504,7 +2655,7 @@ function AgentListDropdown({
     "button",
     {
       type: "button",
-      className: cn5(
+      className: cn6(
         "inline-flex items-center rounded-md text-xs font-medium transition-colors",
         "bg-background hover:bg-muted/50 text-foreground/80 hover:text-foreground",
         compact ? "h-5 gap-1 px-1.5" : "h-7 gap-1.5 px-2.5",
@@ -2568,8 +2719,8 @@ function AgentListDropdown({
 }
 
 // catalog/react/AgentListInlinePicker.tsx
-import { cn as cn6 } from "@ai-matrx/design-system";
-import { useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "react";
+import { cn as cn7 } from "@ai-matrx/design-system";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } from "react";
 import { ChevronRightIcon as ChevronRightIcon4 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function AgentListInlinePicker({
@@ -2590,10 +2741,10 @@ function AgentListInlinePicker({
   includeQuickAgents
 }) {
   const inputRef = useRef6(null);
-  const [catSearch, setCatSearch] = useState5("");
-  const [tagSearch, setTagSearch] = useState5("");
-  const [mobileDetailAgent, setMobileDetailAgent] = useState5(null);
-  const [mobileSubView, setMobileSubView] = useState5(null);
+  const [catSearch, setCatSearch] = useState6("");
+  const [tagSearch, setTagSearch] = useState6("");
+  const [mobileDetailAgent, setMobileDetailAgent] = useState6(null);
+  const [mobileSubView, setMobileSubView] = useState6(null);
   const {
     agents,
     archivedHiddenCount,
@@ -2642,7 +2793,7 @@ function AgentListInlinePicker({
   };
   const isMobile = true;
   if (mobileDetailAgent) {
-    return /* @__PURE__ */ jsxs13("div", { className: cn6("flex h-full min-h-0 flex-col", className), children: [
+    return /* @__PURE__ */ jsxs13("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: [
       /* @__PURE__ */ jsxs13(
         "button",
         {
@@ -2665,7 +2816,7 @@ function AgentListInlinePicker({
     ] });
   }
   if (mobileSubView) {
-    return /* @__PURE__ */ jsx16("div", { className: cn6("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx16(
       AgentMobileSubView,
       {
         view: mobileSubView,
@@ -2684,7 +2835,7 @@ function AgentListInlinePicker({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx16("div", { className: cn6("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx16("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx16(
     AgentListContent,
     {
       agents,
@@ -2722,7 +2873,7 @@ function AgentListInlinePicker({
 }
 
 // catalog/react/FavoriteAgentButton.tsx
-import { cn as cn7 } from "@ai-matrx/design-system";
+import { cn as cn8 } from "@ai-matrx/design-system";
 import { useCallback as useCallback6 } from "react";
 import { StarIcon as StarIcon3 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -2750,7 +2901,7 @@ function FavoriteAgentButton({
       "button",
       {
         type: "button",
-        className: cn7(
+        className: cn8(
           "flex-shrink-0 p-0.5 rounded transition-all duration-150",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
           disabled ? "cursor-not-allowed" : "hover:scale-110 cursor-pointer"
@@ -2763,7 +2914,7 @@ function FavoriteAgentButton({
           StarIcon3,
           {
             fill: isFavorite2 ? "currentColor" : "none",
-            className: cn7(
+            className: cn8(
               "h-3.5 w-3.5 transition-all duration-150",
               isFavorite2 ? "matrx-agent-star-on" : "text-muted-foreground/40 hover:matrx-agent-star-on"
             )
@@ -2776,7 +2927,7 @@ function FavoriteAgentButton({
     "button",
     {
       type: "button",
-      className: cn7(
+      className: cn8(
         "absolute top-2.5 right-2.5 z-10 p-0.5 rounded transition-all duration-150",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         disabled ? "cursor-not-allowed" : "hover:scale-110 cursor-pointer",