@ai-matrx/agents 0.14.0 → 0.15.0

package/dist/catalog/react/index.cjs

@@ -29,6 +29,8 @@ __export(react_exports, {
   AgentListContent: () => AgentListContent,
   AgentListDropdown: () => AgentListDropdown,
   AgentListInlinePicker: () => AgentListInlinePicker,
+  AgentListPanel: () => AgentListPanel,
+  AgentListPanelBody: () => AgentListPanelBody,
   AgentListTabs: () => AgentListTabs,
   AgentMobileSubView: () => AgentMobileSubView,
   AgentRow: () => AgentRow,
@@ -42,6 +44,7 @@ __export(react_exports, {
   Music4Icon: () => Music4Icon,
   OptionRow: () => OptionRow,
   PANEL_HEIGHT: () => PANEL_HEIGHT,
+  PANEL_WIDTH: () => PANEL_WIDTH,
   SORT_OPTIONS: () => SORT_OPTIONS,
   SearchInput: () => SearchInput,
   SidePanelHeader: () => SidePanelHeader,
@@ -50,6 +53,7 @@ __export(react_exports, {
   orchestraDepthLine: () => orchestraDepthLine,
   orchestraLabel: () => orchestraLabel,
   orchestraModeLabel: () => orchestraModeLabel,
+  panelHeightBelow: () => panelHeightBelow,
   useAgentCatalog: () => useAgentCatalog,
   useAgentCatalogRows: () => useAgentCatalogRows,
   useAgentCatalogState: () => useAgentCatalogState,
@@ -950,6 +954,10 @@ function useAgentListCore({
 var selectStatus = (state) => state.status;
 
 // catalog/react/AgentListDropdown.tsx
+var import_design_system8 = require("@ai-matrx/design-system");
+var import_react8 = require("react");
+
+// catalog/react/AgentListPanel.tsx
 var import_design_system7 = require("@ai-matrx/design-system");
 var import_react7 = require("react");
 
@@ -1582,6 +1590,15 @@ var import_react6 = require("react");
 // catalog/react/types.ts
 var PANEL_HEIGHT = "528px";
 var LIST_MAX_HEIGHT = "min(528px, var(--radix-popper-available-height, 528px))";
+function panelHeightBelow(trigger, options = {}) {
+  if (!trigger || typeof window === "undefined") return null;
+  const full = options.full ?? 528;
+  const minUsable = options.minUsable ?? 300;
+  const gap = options.gap ?? 16;
+  const below = window.innerHeight - trigger.getBoundingClientRect().bottom - gap;
+  if (below >= full) return null;
+  return below >= minUsable ? `${Math.floor(below)}px` : null;
+}
 
 // catalog/react/AgentFilterBar.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -1780,7 +1797,15 @@ function AgentRow({
                   ]
                 }
               ),
-              agent.agentType === "builtin" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[9px] font-medium text-primary bg-primary/10 px-1 py-px rounded shrink-0 ml-auto", children: labels.systemBadge }) : agent.isOwner === false ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[9px] text-muted-foreground bg-muted px-1 py-px rounded shrink-0 ml-auto", children: "shared" }) : null
+              agent.isArchived ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "span",
+                {
+                  "data-testid": `agent-archived-badge-${agent.id}`,
+                  className: "text-[9px] font-medium text-muted-foreground bg-muted px-1 py-px rounded shrink-0 ml-auto",
+                  children: labels.archivedBadge
+                }
+              ) : null,
+              agent.agentType === "builtin" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: (0, import_design_system5.cn)("text-[9px] font-medium text-primary bg-primary/10 px-1 py-px rounded shrink-0", !agent.isArchived && "ml-auto"), children: labels.systemBadge }) : agent.isOwner === false ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: (0, import_design_system5.cn)("text-[9px] text-muted-foreground bg-muted px-1 py-px rounded shrink-0", !agent.isArchived && "ml-auto"), children: "shared" }) : null
             ]
           }
         ),
@@ -2178,33 +2203,22 @@ function AgentTagsPanel({
   ] });
 }
 
-// catalog/react/AgentListDropdown.tsx
+// catalog/react/AgentListPanel.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var CONSUMER_ID = "agent-list-dropdown";
-function AgentListDropdown({
-  onSelect,
-  navigateTo,
-  className,
-  label,
-  triggerSlot,
-  noBorder = false,
-  compact = false,
-  activeAgentId: activeAgentIdProp,
-  contentSide,
-  consumerId = CONSUMER_ID,
-  initialTab,
-  includeSystemInAll = false,
+var PANEL_WIDTH = "680px";
+function AgentListPanelBody({
+  core,
   visibleTabs,
   systemTabLabel,
-  resolveAgentHref: resolveAgentHrefProp,
+  includeSystemInAll = false,
+  resolveAgentHref,
   showPinnedAgent = true,
-  excludeAgentIds,
-  defaultMandateKey
+  autoFocusSearch = true,
+  onAfterSelect,
+  className
 }) {
   const isMobile = (0, import_design_system7.useIsMobile)();
   const { labels } = useAgentCatalog();
-  const { popoverContainer } = useAgentCatalogUiPorts();
-  const [open, setOpen] = (0, import_react7.useState)(false);
   const [rightPanel, setRightPanel] = (0, import_react7.useState)(null);
   const [catSearch, setCatSearch] = (0, import_react7.useState)("");
   const [tagSearch, setTagSearch] = (0, import_react7.useState)("");
@@ -2231,42 +2245,26 @@ function AgentListDropdown({
     handleAgentHoverEnd: coreAgentHoverEnd,
     handleDetailPanelMouseEnter,
     handleDetailPanelMouseLeave: coreDetailMouseLeave
-  } = useAgentListCore({
-    consumerId,
-    ...onSelect ? { onSelect } : {},
-    ...navigateTo ? { navigateTo } : {},
-    ...activeAgentIdProp !== void 0 ? { activeAgentIdOverride: activeAgentIdProp } : {},
-    ...initialTab ? { initialTab } : {},
-    includeSystemInAll,
-    // The restriction has to reach the CORE, not just the tab strip — see
-    // `AgentListCoreOptions.visibleTabs`.
-    ...visibleTabs ? { visibleTabs } : {},
-    ...excludeAgentIds ? { excludeAgentIds } : {},
-    ...defaultMandateKey ? { defaultMandateKey } : {}
-  });
-  const activeDefaultRow = defaultRow?.row?.id === activeAgentId ? defaultRow.row : null;
-  const displayLabel = label ?? pinnedAgent?.name ?? activeDefaultRow?.name ?? (activeAgentId ? isLoading ? labels.triggerResolving : labels.triggerUnnameable : labels.triggerFallback);
-  const showAssignedTooltip = Boolean(activeAgentId) && displayLabel.trim().length > 0 && displayLabel !== "Select an agent" && displayLabel !== labels.triggerFallback;
-  const handleOpen = (nextOpen) => {
-    setOpen(nextOpen);
-    if (nextOpen) {
-      ensureLoaded();
-      if (pinnedAgent && !isMobile) {
-        setHoveredAgent(pinnedAgent);
-        setRightPanel("detail");
-      }
-      setTimeout(() => inputRef.current?.focus(), 50);
-    } else {
-      setRightPanel(null);
-      setCatSearch("");
-      setTagSearch("");
-      setMobileDetailAgent(null);
-      setMobileSubView(null);
-    }
-  };
+  } = core;
+  (0, import_react7.useEffect)(() => {
+    ensureLoaded();
+    if (!autoFocusSearch) return void 0;
+    const timer = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(timer);
+  }, [ensureLoaded, autoFocusSearch]);
+  const pinnedPreviewedRef = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
+    if (pinnedPreviewedRef.current || isMobile || !pinnedAgent) return;
+    pinnedPreviewedRef.current = true;
+    if (rightPanel !== null) return;
+    setHoveredAgent(pinnedAgent);
+    setRightPanel("detail");
+  }, [pinnedAgent, isMobile, rightPanel, setHoveredAgent]);
   const handleSelectAgent = (agent) => {
     coreSelectAgent(agent);
-    setOpen(false);
+    setMobileDetailAgent(null);
+    setMobileSubView(null);
+    onAfterSelect?.(agent);
   };
   const handleFilterChipClick = (panel) => {
     if (isMobile) {
@@ -2295,39 +2293,7 @@ function AgentListDropdown({
   const handleDetailPanelMouseLeave = (0, import_react7.useCallback)(() => {
     coreDetailMouseLeave(() => setRightPanel(null));
   }, [coreDetailMouseLeave]);
-  const resolveAgentHref = (0, import_react7.useMemo)(() => {
-    if (resolveAgentHrefProp) return resolveAgentHrefProp;
-    if (!navigateTo) return void 0;
-    return (agent) => navigateTo.replace("{id}", agent.id);
-  }, [navigateTo, resolveAgentHrefProp]);
-  const hasRightPanel = rightPanel !== null;
-  const triggerButton = triggerSlot ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    "button",
-    {
-      type: "button",
-      className: (0, import_design_system7.cn)(
-        "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",
-        !noBorder && "border border-border",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "min-w-0 max-w-[200px] flex-1 truncate text-left", children: displayLabel }),
-        activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "flex items-center justify-center w-4 h-4 rounded-md bg-primary text-primary-foreground text-[10px]", children: activeFilterCount }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { className: "w-3 h-3 text-muted-foreground/60" })
-      ]
-    }
-  );
-  const wrapTrigger = (Trigger) => {
-    if (!showAssignedTooltip) {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Trigger, { asChild: true, children: triggerButton });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system7.Tooltip, { ...open ? { open: false } : {}, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system7.TooltipTrigger, { asChild: true, children: triggerButton }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system7.TooltipContent, { side: "bottom", className: "max-w-xs", children: displayLabel })
-    ] });
-  };
+  const effectiveSystemTabLabel = systemTabLabel ?? (includeSystemInAll ? "System" : void 0);
   const listPanel = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     AgentListContent,
     {
@@ -2352,139 +2318,288 @@ function AgentListDropdown({
       tabCounts,
       archivedHiddenCount,
       ...visibleTabs ? { visibleTabs } : {},
-      ...systemTabLabel ?? (includeSystemInAll ? "System" : void 0) ? {
-        systemTabLabel: systemTabLabel ?? (includeSystemInAll ? "System" : void 0)
-      } : {},
+      ...effectiveSystemTabLabel ? { systemTabLabel: effectiveSystemTabLabel } : {},
       pinnedAgent: showPinnedAgent ? pinnedAgent : null,
       defaultRow,
-      listOpen: open
+      listOpen: true
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system7.Drawer, { open, onOpenChange: handleOpen, children: [
-      wrapTrigger(import_design_system7.DrawerTrigger),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system7.DrawerContent, { className: "h-[85dvh]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system7.DrawerTitle, { className: "sr-only", children: "Select Agent" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col overflow-hidden flex-1 min-h-0", children: mobileDetailAgent ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col overflow-hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-            "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_design_system7.cn)("flex min-h-0 flex-1 flex-col overflow-hidden", className), children: mobileDetailAgent ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMobileDetailAgent(null),
+          className: "flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium text-primary hover:bg-muted/30 transition-colors border-b border-border shrink-0",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronRightIcon, { className: "w-4 h-4 rotate-180" }),
+            "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        AgentDetailCard,
+        {
+          agent: mobileDetailAgent,
+          onSelect: () => handleSelectAgent(mobileDetailAgent)
+        }
+      ) })
+    ] }) : mobileSubView ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      AgentMobileSubView,
+      {
+        view: mobileSubView,
+        consumer,
+        allCategories,
+        allTags,
+        catSearch,
+        setCatSearch,
+        tagSearch,
+        setTagSearch,
+        onBack: () => {
+          setMobileSubView(null);
+          setCatSearch("");
+          setTagSearch("");
+        }
+      }
+    ) : listPanel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_design_system7.cn)("flex h-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col min-w-0 w-[340px] shrink-0 border-r border-border", children: listPanel }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        className: "h-full w-[340px] shrink-0 overflow-hidden flex flex-col",
+        onMouseEnter: rightPanel === "detail" ? handleDetailPanelMouseEnter : void 0,
+        onMouseLeave: rightPanel === "detail" ? handleDetailPanelMouseLeave : void 0,
+        children: [
+          rightPanel === "detail" && hoveredAgent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-full matrx-agent-fade-in", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            AgentDetailCard,
             {
-              type: "button",
-              onClick: () => setMobileDetailAgent(null),
-              className: "flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium text-primary hover:bg-muted/30 transition-colors border-b border-border shrink-0",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronRightIcon, { className: "w-4 h-4 rotate-180" }),
-                "Back"
-              ]
+              agent: hoveredAgent,
+              onSelect: () => handleSelectAgent(hoveredAgent)
+            }
+          ) }, hoveredAgent.id),
+          rightPanel === "sort" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            AgentSortPanel,
+            {
+              consumer,
+              onClose: () => setRightPanel(null)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            AgentDetailCard,
+          rightPanel === "categories" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            AgentCategoriesPanel,
             {
-              agent: mobileDetailAgent,
-              onSelect: () => handleSelectAgent(mobileDetailAgent)
+              consumer,
+              allCategories,
+              search: catSearch,
+              setSearch: setCatSearch,
+              onClose: () => {
+                setRightPanel(null);
+                setCatSearch("");
+              }
             }
-          ) })
-        ] }) : mobileSubView ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          AgentMobileSubView,
-          {
-            view: mobileSubView,
-            consumer,
-            allCategories,
-            allTags,
-            catSearch,
-            setCatSearch,
-            tagSearch,
-            setTagSearch,
-            onBack: () => {
-              setMobileSubView(null);
-              setCatSearch("");
-              setTagSearch("");
+          ),
+          rightPanel === "tags" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            AgentTagsPanel,
+            {
+              consumer,
+              allTags,
+              search: tagSearch,
+              setSearch: setTagSearch,
+              onClose: () => {
+                setRightPanel(null);
+                setTagSearch("");
+              }
             }
-          }
-        ) : listPanel })
+          ),
+          rightPanel === null && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MousePointerClickIcon, { className: "h-6 w-6 text-muted-foreground/40" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-muted-foreground/70 leading-relaxed", children: labels.hoverHint })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function AgentListPanel({
+  consumerId,
+  onSelect,
+  navigateTo,
+  activeAgentId,
+  initialTab,
+  includeSystemInAll = false,
+  visibleTabs,
+  excludeAgentIds,
+  defaultMandateKey,
+  resolveAgentHref: resolveAgentHrefProp,
+  className,
+  ...display
+}) {
+  const isMobile = (0, import_design_system7.useIsMobile)();
+  const core = useAgentListCore({
+    consumerId,
+    ...onSelect ? { onSelect } : {},
+    ...navigateTo ? { navigateTo } : {},
+    ...activeAgentId !== void 0 ? { activeAgentIdOverride: activeAgentId } : {},
+    ...initialTab ? { initialTab } : {},
+    includeSystemInAll,
+    ...visibleTabs ? { visibleTabs } : {},
+    ...excludeAgentIds ? { excludeAgentIds } : {},
+    ...defaultMandateKey ? { defaultMandateKey } : {}
+  });
+  const resolveAgentHref = (0, import_react7.useMemo)(() => {
+    if (resolveAgentHrefProp) return resolveAgentHrefProp;
+    if (!navigateTo) return void 0;
+    return (agent) => navigateTo.replace("{id}", agent.id);
+  }, [navigateTo, resolveAgentHrefProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: (0, import_design_system7.cn)("flex min-h-0 flex-col overflow-hidden", isMobile && "h-full w-full", className),
+      style: isMobile ? void 0 : { width: PANEL_WIDTH, height: PANEL_HEIGHT },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        AgentListPanelBody,
+        {
+          core,
+          includeSystemInAll,
+          ...visibleTabs ? { visibleTabs } : {},
+          ...resolveAgentHref ? { resolveAgentHref } : {},
+          ...display
+        }
+      )
+    }
+  );
+}
+
+// catalog/react/AgentListDropdown.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CONSUMER_ID = "agent-list-dropdown";
+function AgentListDropdown({
+  onSelect,
+  navigateTo,
+  className,
+  label,
+  triggerSlot,
+  noBorder = false,
+  compact = false,
+  activeAgentId: activeAgentIdProp,
+  contentSide,
+  consumerId = CONSUMER_ID,
+  initialTab,
+  includeSystemInAll = false,
+  visibleTabs,
+  systemTabLabel,
+  resolveAgentHref: resolveAgentHrefProp,
+  showPinnedAgent = true,
+  excludeAgentIds,
+  defaultMandateKey
+}) {
+  const isMobile = (0, import_design_system8.useIsMobile)();
+  const { labels } = useAgentCatalog();
+  const { popoverContainer } = useAgentCatalogUiPorts();
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const triggerRef = (0, import_react8.useRef)(null);
+  const [fitHeight, setFitHeight] = (0, import_react8.useState)(null);
+  const core = useAgentListCore({
+    consumerId,
+    ...onSelect ? { onSelect } : {},
+    ...navigateTo ? { navigateTo } : {},
+    ...activeAgentIdProp !== void 0 ? { activeAgentIdOverride: activeAgentIdProp } : {},
+    ...initialTab ? { initialTab } : {},
+    includeSystemInAll,
+    // The restriction has to reach the CORE, not just the tab strip — see
+    // `AgentListCoreOptions.visibleTabs`.
+    ...visibleTabs ? { visibleTabs } : {},
+    ...excludeAgentIds ? { excludeAgentIds } : {},
+    ...defaultMandateKey ? { defaultMandateKey } : {}
+  });
+  const { pinnedAgent, defaultRow, activeAgentId, isLoading, activeFilterCount } = core;
+  const activeDefaultRow = defaultRow?.row?.id === activeAgentId ? defaultRow.row : null;
+  const displayLabel = label ?? pinnedAgent?.name ?? activeDefaultRow?.name ?? (activeAgentId ? isLoading ? labels.triggerResolving : labels.triggerUnnameable : labels.triggerFallback);
+  const showAssignedTooltip = Boolean(activeAgentId) && displayLabel.trim().length > 0 && displayLabel !== "Select an agent" && displayLabel !== labels.triggerFallback;
+  const handleOpen = (nextOpen) => {
+    setOpen(nextOpen);
+    if (nextOpen) {
+      setFitHeight(contentSide || isMobile ? null : panelHeightBelow(triggerRef.current));
+    }
+  };
+  const resolveAgentHref = (0, import_react8.useMemo)(() => {
+    if (resolveAgentHrefProp) return resolveAgentHrefProp;
+    if (!navigateTo) return void 0;
+    return (agent) => navigateTo.replace("{id}", agent.id);
+  }, [navigateTo, resolveAgentHrefProp]);
+  const triggerButton = triggerSlot ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: (0, import_design_system8.cn)(
+        "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",
+        !noBorder && "border border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "min-w-0 max-w-[200px] flex-1 truncate text-left", children: displayLabel }),
+        activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex items-center justify-center w-4 h-4 rounded-md bg-primary text-primary-foreground text-[10px]", children: activeFilterCount }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDownIcon, { className: "w-3 h-3 text-muted-foreground/60" })
+      ]
+    }
+  );
+  const wrapTrigger = (Trigger) => {
+    if (!showAssignedTooltip) {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Trigger, { asChild: true, ref: triggerRef, children: triggerButton });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system8.Tooltip, { ...open ? { open: false } : {}, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Trigger, { asChild: true, ref: triggerRef, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system8.TooltipTrigger, { asChild: true, children: triggerButton }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system8.TooltipContent, { side: "bottom", className: "max-w-xs", children: displayLabel })
+    ] });
+  };
+  const body = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    AgentListPanelBody,
+    {
+      core,
+      includeSystemInAll,
+      showPinnedAgent,
+      onAfterSelect: () => setOpen(false),
+      ...visibleTabs ? { visibleTabs } : {},
+      ...systemTabLabel ? { systemTabLabel } : {},
+      ...resolveAgentHref ? { resolveAgentHref } : {}
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system8.Drawer, { open, onOpenChange: handleOpen, children: [
+      wrapTrigger(import_design_system8.DrawerTrigger),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system8.DrawerContent, { className: "h-[85dvh]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system8.DrawerTitle, { className: "sr-only", children: "Select Agent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col overflow-hidden flex-1 min-h-0", children: body })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system7.Popover, { open, onOpenChange: handleOpen, modal: false, children: [
-    wrapTrigger(import_design_system7.PopoverTrigger),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_design_system7.PopoverContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system8.Popover, { open, onOpenChange: handleOpen, modal: false, children: [
+    wrapTrigger(import_design_system8.PopoverTrigger),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_design_system8.PopoverContent,
       {
-        ...contentSide ? { side: contentSide } : {},
+        ...contentSide ? { side: contentSide } : fitHeight ? { side: "bottom" } : {},
         align: "start",
         sideOffset: 4,
         collisionPadding: 12,
         sticky: "always",
         ...popoverContainer ? { container: popoverContainer } : {},
-        className: "p-0 overflow-hidden w-[680px]",
-        style: { height: PANEL_HEIGHT, maxHeight: LIST_MAX_HEIGHT },
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex h-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col min-w-0 w-[340px] shrink-0 border-r border-border", children: listPanel }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-            "div",
-            {
-              className: "h-full w-[340px] shrink-0 overflow-hidden flex flex-col",
-              onMouseEnter: rightPanel === "detail" ? handleDetailPanelMouseEnter : void 0,
-              onMouseLeave: rightPanel === "detail" ? handleDetailPanelMouseLeave : void 0,
-              children: [
-                rightPanel === "detail" && hoveredAgent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-full matrx-agent-fade-in", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  AgentDetailCard,
-                  {
-                    agent: hoveredAgent,
-                    onSelect: () => handleSelectAgent(hoveredAgent)
-                  }
-                ) }, hoveredAgent.id),
-                rightPanel === "sort" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  AgentSortPanel,
-                  {
-                    consumer,
-                    onClose: () => setRightPanel(null)
-                  }
-                ),
-                rightPanel === "categories" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  AgentCategoriesPanel,
-                  {
-                    consumer,
-                    allCategories,
-                    search: catSearch,
-                    setSearch: setCatSearch,
-                    onClose: () => {
-                      setRightPanel(null);
-                      setCatSearch("");
-                    }
-                  }
-                ),
-                rightPanel === "tags" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  AgentTagsPanel,
-                  {
-                    consumer,
-                    allTags,
-                    search: tagSearch,
-                    setSearch: setTagSearch,
-                    onClose: () => {
-                      setRightPanel(null);
-                      setTagSearch("");
-                    }
-                  }
-                ),
-                !hasRightPanel && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MousePointerClickIcon, { className: "h-6 w-6 text-muted-foreground/40" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-muted-foreground/70 leading-relaxed", children: labels.hoverHint })
-                ] })
-              ]
-            }
-          )
-        ] })
+        className: "p-0 overflow-hidden",
+        style: { width: PANEL_WIDTH, height: fitHeight ?? PANEL_HEIGHT, maxHeight: fitHeight ?? LIST_MAX_HEIGHT },
+        children: body
       }
     )
   ] });
 }
 
 // catalog/react/AgentListInlinePicker.tsx
-var import_design_system8 = require("@ai-matrx/design-system");
-var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_design_system9 = require("@ai-matrx/design-system");
+var import_react9 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function AgentListInlinePicker({
   consumerId,
   onSelect,
@@ -2500,11 +2615,11 @@ function AgentListInlinePicker({
   excludeAgentIds,
   defaultMandateKey
 }) {
-  const inputRef = (0, import_react8.useRef)(null);
-  const [catSearch, setCatSearch] = (0, import_react8.useState)("");
-  const [tagSearch, setTagSearch] = (0, import_react8.useState)("");
-  const [mobileDetailAgent, setMobileDetailAgent] = (0, import_react8.useState)(null);
-  const [mobileSubView, setMobileSubView] = (0, import_react8.useState)(null);
+  const inputRef = (0, import_react9.useRef)(null);
+  const [catSearch, setCatSearch] = (0, import_react9.useState)("");
+  const [tagSearch, setTagSearch] = (0, import_react9.useState)("");
+  const [mobileDetailAgent, setMobileDetailAgent] = (0, import_react9.useState)(null);
+  const [mobileSubView, setMobileSubView] = (0, import_react9.useState)(null);
   const {
     agents,
     archivedHiddenCount,
@@ -2533,7 +2648,7 @@ function AgentListInlinePicker({
     ...excludeAgentIds ? { excludeAgentIds } : {},
     ...defaultMandateKey ? { defaultMandateKey } : {}
   });
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     ensureLoaded();
     if (!autoFocusSearch) return void 0;
     const timer = setTimeout(() => inputRef.current?.focus(), 50);
@@ -2549,20 +2664,20 @@ function AgentListInlinePicker({
   };
   const isMobile = true;
   if (mobileDetailAgent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_design_system8.cn)("flex h-full min-h-0 flex-col", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_design_system9.cn)("flex h-full min-h-0 flex-col", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => setMobileDetailAgent(null),
           className: "flex shrink-0 items-center gap-1.5 border-b border-border px-3 py-2 text-sm font-medium text-primary transition-colors hover:bg-muted/30",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronRightIcon, { className: "h-4 w-4 rotate-180" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRightIcon, { className: "h-4 w-4 rotate-180" }),
             "Back"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         AgentDetailCard,
         {
           agent: mobileDetailAgent,
@@ -2572,7 +2687,7 @@ function AgentListInlinePicker({
     ] });
   }
   if (mobileSubView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_design_system8.cn)("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_design_system9.cn)("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       AgentMobileSubView,
       {
         view: mobileSubView,
@@ -2591,7 +2706,7 @@ function AgentListInlinePicker({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_design_system8.cn)("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_design_system9.cn)("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     AgentListContent,
     {
       agents,