@ai-matrx/agents 0.59.229 → 0.59.231

package/dist/catalog/react/index.cjs

@@ -401,85 +401,6 @@ function useAgentConsumer(consumerId, options) {
 // catalog/shared/useAgentListCore.ts
 var import_react5 = require("react");
 
-// quick/shape.ts
-var QUICK_AGENT_TAG = "kind:quick";
-var QUICK_AGENT_DEFAULT_SETTINGS = Object.freeze({
-  temperature: 0.7,
-  topP: 1,
-  maxOutputTokens: 4096
-});
-function isQuickAgentSummary(row) {
-  return row.tags.includes(QUICK_AGENT_TAG);
-}
-function withoutQuickAgents(rows) {
-  return rows.filter((row) => !isQuickAgentSummary(row));
-}
-
-// catalog/types.ts
-function isMandateAgentId(id) {
-  return id.startsWith("mandate:");
-}
-var SORT_OPTIONS = [
-  { value: "updated-desc", label: "Recent" },
-  { value: "created-desc", label: "Created" },
-  { value: "name-asc", label: "A \u2192 Z" },
-  { value: "name-desc", label: "Z \u2192 A" },
-  { value: "category-asc", label: "Category" }
-];
-var ARCHIVE_FILTER_ORDER = [
-  "active",
-  "both",
-  "archived"
-];
-var ARCHIVE_FILTER_OPTIONS = [
-  { value: "active", label: "Hide archived", chip: "Archive" },
-  { value: "both", label: "Show all", chip: "All + archived" },
-  { value: "archived", label: "Archived only", chip: "Archived only" }
-];
-function nextArchFilter(current) {
-  const index = ARCHIVE_FILTER_ORDER.indexOf(current);
-  if (index < 0) return ARCHIVE_FILTER_ORDER[0];
-  return ARCHIVE_FILTER_ORDER[(index + 1) % ARCHIVE_FILTER_ORDER.length];
-}
-var AGENT_NONE_SENTINEL = "__none__";
-
-// catalog/labels.ts
-function agentListEmptyLabel(tab, labels) {
-  switch (tab) {
-    case "system":
-      return labels.emptySystem;
-    case "shared":
-      return labels.emptyShared;
-    default:
-      return labels.emptyDefault;
-  }
-}
-function shouldDefaultAgentListToPublicTab(args) {
-  if (!args.userId) return true;
-  if (!args.agentsLoaded) return false;
-  return args.ownedCount === 0;
-}
-function agentArchiveFilterChipLabel(archFilter) {
-  return ARCHIVE_FILTER_OPTIONS.find((o) => o.value === archFilter)?.chip ?? "Archive";
-}
-function agentArchiveFilterStateLabel(archFilter) {
-  return ARCHIVE_FILTER_OPTIONS.find((o) => o.value === archFilter)?.label ?? "Hide archived";
-}
-function agentArchiveFilterControlLabel(archFilter) {
-  return `Archive filter: ${agentArchiveFilterStateLabel(
-    archFilter
-  ).toLowerCase()}. Click for ${agentArchiveFilterStateLabel(
-    nextArchFilter(archFilter)
-  ).toLowerCase()}`;
-}
-function agentListFooterLabel(args) {
-  const { count, archFilter, archivedHiddenCount } = args;
-  if (archFilter === "archived") return `${count} archived shown`;
-  const base = `${count} agent${count !== 1 ? "s" : ""}`;
-  if (archFilter === "both") return `${base} \xB7 archived shown`;
-  return archivedHiddenCount > 0 ? `${base} \xB7 ${archivedHiddenCount} archived hidden` : base;
-}
-
 // catalog/score.ts
 function computeAgentSearchScore(agent, query) {
   const q = query.trim().toLowerCase();
@@ -526,6 +447,34 @@ function agentMatchesSearch(agent, query) {
   return computeAgentSearchScore(agent, query) > 0;
 }
 
+// catalog/types.ts
+function isMandateAgentId(id) {
+  return id.startsWith("mandate:");
+}
+var SORT_OPTIONS = [
+  { value: "updated-desc", label: "Recent" },
+  { value: "created-desc", label: "Created" },
+  { value: "name-asc", label: "A \u2192 Z" },
+  { value: "name-desc", label: "Z \u2192 A" },
+  { value: "category-asc", label: "Category" }
+];
+var ARCHIVE_FILTER_ORDER = [
+  "active",
+  "both",
+  "archived"
+];
+var ARCHIVE_FILTER_OPTIONS = [
+  { value: "active", label: "Hide archived", chip: "Archive" },
+  { value: "both", label: "Show all", chip: "All + archived" },
+  { value: "archived", label: "Archived only", chip: "Archived only" }
+];
+function nextArchFilter(current) {
+  const index = ARCHIVE_FILTER_ORDER.indexOf(current);
+  if (index < 0) return ARCHIVE_FILTER_ORDER[0];
+  return ARCHIVE_FILTER_ORDER[(index + 1) % ARCHIVE_FILTER_ORDER.length];
+}
+var AGENT_NONE_SENTINEL = "__none__";
+
 // catalog/selectors.ts
 function memoize1(fn) {
   let lastA;
@@ -794,6 +743,52 @@ var selectTotalFavoriteAgentsCount = memoize1(
   (agents) => countUserRows(agents, "active", isFavorite)
 );
 
+// quick/shape.ts
+var QUICK_AGENT_TAG = "kind:quick";
+function isQuickAgentSummary(row) {
+  return row.tags.includes(QUICK_AGENT_TAG);
+}
+function withoutQuickAgents(rows) {
+  return rows.filter((row) => !isQuickAgentSummary(row));
+}
+
+// catalog/labels.ts
+function agentListEmptyLabel(tab, labels) {
+  switch (tab) {
+    case "system":
+      return labels.emptySystem;
+    case "shared":
+      return labels.emptyShared;
+    default:
+      return labels.emptyDefault;
+  }
+}
+function shouldDefaultAgentListToPublicTab(args) {
+  if (!args.userId) return true;
+  if (!args.agentsLoaded) return false;
+  return args.ownedCount === 0;
+}
+function agentArchiveFilterChipLabel(archFilter) {
+  return ARCHIVE_FILTER_OPTIONS.find((o) => o.value === archFilter)?.chip ?? "Archive";
+}
+function agentArchiveFilterStateLabel(archFilter) {
+  return ARCHIVE_FILTER_OPTIONS.find((o) => o.value === archFilter)?.label ?? "Hide archived";
+}
+function agentArchiveFilterControlLabel(archFilter) {
+  return `Archive filter: ${agentArchiveFilterStateLabel(
+    archFilter
+  ).toLowerCase()}. Click for ${agentArchiveFilterStateLabel(
+    nextArchFilter(archFilter)
+  ).toLowerCase()}`;
+}
+function agentListFooterLabel(args) {
+  const { count, archFilter, archivedHiddenCount } = args;
+  if (archFilter === "archived") return `${count} archived shown`;
+  const base = `${count} agent${count !== 1 ? "s" : ""}`;
+  if (archFilter === "both") return `${base} \xB7 archived shown`;
+  return archivedHiddenCount > 0 ? `${base} \xB7 ${archivedHiddenCount} archived hidden` : base;
+}
+
 // catalog/shared/useAgentListCore.ts
 var HOVER_GRACE_MS = 900;
 function coerceVisibleTab(current, allowed, initialTab) {
@@ -1045,7 +1040,9 @@ var SearchInput = ({
   ref,
   value,
   onChange,
-  placeholder
+  placeholder,
+  onKeyDown,
+  inputProps
 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1.5 h-7 px-2 rounded-md bg-muted/40 border border-border/50", children: [
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.SearchIcon, { className: "w-3 h-3 text-muted-foreground shrink-0" }),
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1055,6 +1052,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" }
@@ -1373,11 +1372,8 @@ function makeIcon(name) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Svg, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Shape, { name, filled: false }) });
   };
 }
-var ArrowUpDownIcon = makeIcon("arrowUpDown");
 var LoaderIcon = makeIcon("loader");
 var UsersIcon = makeIcon("users");
-var MessageCircleIcon = makeIcon("messageCircle");
-var RocketIcon = makeIcon("rocket");
 var CircleCheckIcon = makeIcon("circleCheck");
 var AlertTriangleIcon = makeIcon("alertTriangle");
 var Music4Icon = makeIcon("music4");
@@ -1513,6 +1509,7 @@ function AgentDetailCard({ agent, onSelect, duplicate, onHoldChange }) {
 
 // catalog/react/AgentListContent.tsx
 var import_design_system5 = require("@ai-matrx/design-system");
+var import_virtual_window = require("@ai-matrx/design-system/data-table/virtual-window");
 var import_react7 = require("react");
 
 // catalog/react/AgentFilterBar.tsx
@@ -1558,7 +1555,7 @@ function AgentFilterBar({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       FilterChip,
       {
-        icon: ArrowUpDownIcon,
+        icon: import_icons2.ArrowUpDownIcon,
         label: SORT_OPTIONS.find((o) => o.value === consumer.sortBy)?.label ?? "Sort",
         active: consumer.sortBy !== "updated-desc",
         focused: !isMobile && rightPanel === "sort",
@@ -1783,6 +1780,10 @@ function AgentRow({
 // catalog/react/AgentListContent.tsx
 var import_icons10 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var AGENT_ROW_HEIGHT = 36;
+var UNMEASURED_VIEWPORT = 480;
+var ROW_OVERSCAN = 8;
+var WINDOW_ABOVE = 50;
 function AgentListContent({
   agents,
   isLoading,
@@ -1814,11 +1815,104 @@ function AgentListContent({
 }) {
   const catalog = useAgentCatalog();
   const listScrollRef = (0, import_react7.useRef)(null);
+  const windowRef = (0, import_react7.useRef)(null);
+  const listboxId = (0, import_react7.useId)();
+  const [scrollTop, setScrollTop] = (0, import_react7.useState)(0);
+  const [viewport, setViewport] = (0, import_react7.useState)(0);
+  const [listStart, setListStart] = (0, import_react7.useState)(0);
+  const [activeIndex, setActiveIndex] = (0, import_react7.useState)(-1);
+  const [resetKey, setResetKey] = (0, import_react7.useState)(
+    `${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;
+  (0, import_react7.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]);
   (0, import_react7.useEffect)(() => {
-    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 } : (0, import_virtual_window.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;
@@ -1829,7 +1923,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__ */ (0, import_jsx_runtime10.jsx)(
@@ -1918,65 +2020,106 @@ function AgentListContent({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px bg-border shrink-0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: listScrollRef, className: "overflow-y-auto flex-1 min-h-0", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center py-8 gap-2 text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoaderIcon, { className: "w-4 h-4 matrx-agent-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: labels.loading })
-    ] }) : agents.length === 0 && !pinnedAgent && !defaultAgent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-8 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "py-0.5", children: [
-      defaultAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Default" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
-      ] }),
-      pinnedAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: labels.currentAgentHeading }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
-      ] }),
-      agents.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-4 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center py-8 gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoaderIcon, { className: "w-4 h-4 matrx-agent-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: labels.loading })
+        ] }) : agents.length === 0 && !pinnedAgent && !defaultAgent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-8 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "py-0.5", children: [
+          defaultAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Default" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
+          ] }),
+          pinnedAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: labels.currentAgentHeading }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              ref: windowRef,
+              id: listboxId,
+              role: "listbox",
+              "aria-label": labels.searchPlaceholder,
+              children: [
+                win.padStart > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-hidden": true, style: { height: win.padStart } }),
+                visibleAgents.map((agent, offset) => {
+                  const index = win.start + offset;
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "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: (0, import_design_system5.cn)(
+                        "flex overflow-hidden",
+                        index === activeIndex && "bg-muted/60"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        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__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-hidden": true, style: { height: win.padEnd } })
+              ]
+            }
+          ),
+          agents.length === 0 && (pinnedAgent || defaultAgent) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-4 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) })
+        ] })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px bg-border shrink-0" }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-2.5 py-1.5 shrink-0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(

package/dist/catalog/react/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, Ref, SVGProps } from 'react';
+import { ComponentType, ReactNode, Ref, KeyboardEventHandler, InputHTMLAttributes, SVGProps } from 'react';
 
 /**
  * `@ai-matrx/agents/catalog` — the row shape and the per-consumer view state.
@@ -1174,11 +1174,15 @@ interface FavoriteAgentButtonProps {
 }
 declare function FavoriteAgentButton({ id, variant, disabled, }: FavoriteAgentButtonProps): react.JSX.Element;
 
-declare const SearchInput: ({ ref, value, onChange, placeholder, }: {
+declare const SearchInput: ({ ref, value, onChange, placeholder, onKeyDown, inputProps, }: {
     ref?: Ref<HTMLInputElement>;
     value: string;
     onChange: (v: string) => void;
     placeholder: string;
+    /** Keyboard handler — the agent list drives its listbox from the field. */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /** ARIA wiring (combobox role, aria-controls, aria-activedescendant). */
+    inputProps?: Pick<InputHTMLAttributes<HTMLInputElement>, "role" | "aria-controls" | "aria-activedescendant" | "aria-expanded" | "aria-autocomplete" | "aria-label">;
 }) => react.JSX.Element;
 declare function FilterChip({ icon: Icon, label, active, focused, onClick, ariaLabel, testId, }: {
     icon: ComponentType<{

package/dist/catalog/react/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, Ref, SVGProps } from 'react';
+import { ComponentType, ReactNode, Ref, KeyboardEventHandler, InputHTMLAttributes, SVGProps } from 'react';
 
 /**
  * `@ai-matrx/agents/catalog` — the row shape and the per-consumer view state.
@@ -1174,11 +1174,15 @@ interface FavoriteAgentButtonProps {
 }
 declare function FavoriteAgentButton({ id, variant, disabled, }: FavoriteAgentButtonProps): react.JSX.Element;
 
-declare const SearchInput: ({ ref, value, onChange, placeholder, }: {
+declare const SearchInput: ({ ref, value, onChange, placeholder, onKeyDown, inputProps, }: {
     ref?: Ref<HTMLInputElement>;
     value: string;
     onChange: (v: string) => void;
     placeholder: string;
+    /** Keyboard handler — the agent list drives its listbox from the field. */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /** ARIA wiring (combobox role, aria-controls, aria-activedescendant). */
+    inputProps?: Pick<InputHTMLAttributes<HTMLInputElement>, "role" | "aria-controls" | "aria-activedescendant" | "aria-expanded" | "aria-autocomplete" | "aria-label">;
 }) => react.JSX.Element;
 declare function FilterChip({ icon: Icon, label, active, focused, onClick, ariaLabel, testId, }: {
     icon: ComponentType<{