@ai-matrx/agents 0.14.0 → 0.15.0

package/dist/catalog/react/index.js

@@ -905,7 +905,7 @@ var selectStatus = (state) => state.status;
 
 // catalog/react/AgentListDropdown.tsx
 import {
-  cn as cn6,
+  cn as cn7,
   Drawer,
   DrawerContent,
   DrawerTitle,
@@ -916,9 +916,13 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  useIsMobile
+  useIsMobile as useIsMobile2
 } from "@ai-matrx/design-system";
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef4, useState as useState3 } from "react";
+import { useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
+
+// catalog/react/AgentListPanel.tsx
+import { cn as cn6, useIsMobile } from "@ai-matrx/design-system";
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState3 } from "react";
 
 // catalog/react/primitives.tsx
 import { cn } from "@ai-matrx/design-system";
@@ -1549,6 +1553,15 @@ import { useEffect as useEffect3, useRef as useRef3 } from "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
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1747,7 +1760,15 @@ function AgentRow({
                   ]
                 }
               ),
-              agent.agentType === "builtin" ? /* @__PURE__ */ jsx10("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__ */ jsx10("span", { className: "text-[9px] text-muted-foreground bg-muted px-1 py-px rounded shrink-0 ml-auto", children: "shared" }) : null
+              agent.isArchived ? /* @__PURE__ */ jsx10(
+                "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__ */ jsx10("span", { className: cn5("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__ */ jsx10("span", { className: cn5("text-[9px] text-muted-foreground bg-muted px-1 py-px rounded shrink-0", !agent.isArchived && "ml-auto"), children: "shared" }) : null
             ]
           }
         ),
@@ -2145,33 +2166,22 @@ function AgentTagsPanel({
   ] });
 }
 
-// catalog/react/AgentListDropdown.tsx
+// catalog/react/AgentListPanel.tsx
 import { jsx as jsx15, jsxs as jsxs12 } from "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 = useIsMobile();
   const { labels } = useAgentCatalog();
-  const { popoverContainer } = useAgentCatalogUiPorts();
-  const [open, setOpen] = useState3(false);
   const [rightPanel, setRightPanel] = useState3(null);
   const [catSearch, setCatSearch] = useState3("");
   const [tagSearch, setTagSearch] = useState3("");
@@ -2198,42 +2208,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;
+  useEffect4(() => {
+    ensureLoaded();
+    if (!autoFocusSearch) return void 0;
+    const timer = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(timer);
+  }, [ensureLoaded, autoFocusSearch]);
+  const pinnedPreviewedRef = useRef4(false);
+  useEffect4(() => {
+    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) {
@@ -2262,39 +2256,7 @@ function AgentListDropdown({
   const handleDetailPanelMouseLeave = useCallback5(() => {
     coreDetailMouseLeave(() => setRightPanel(null));
   }, [coreDetailMouseLeave]);
-  const resolveAgentHref = useMemo4(() => {
-    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__ */ jsxs12(
-    "button",
-    {
-      type: "button",
-      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",
-        !noBorder && "border border-border",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx15("span", { className: "min-w-0 max-w-[200px] flex-1 truncate text-left", children: displayLabel }),
-        activeFilterCount > 0 && /* @__PURE__ */ jsx15("span", { className: "flex items-center justify-center w-4 h-4 rounded-md bg-primary text-primary-foreground text-[10px]", children: activeFilterCount }),
-        /* @__PURE__ */ jsx15(ChevronDownIcon, { className: "w-3 h-3 text-muted-foreground/60" })
-      ]
-    }
-  );
-  const wrapTrigger = (Trigger) => {
-    if (!showAssignedTooltip) {
-      return /* @__PURE__ */ jsx15(Trigger, { asChild: true, children: triggerButton });
-    }
-    return /* @__PURE__ */ jsxs12(Tooltip, { ...open ? { open: false } : {}, children: [
-      /* @__PURE__ */ jsx15(Trigger, { asChild: true, children: /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: triggerButton }) }),
-      /* @__PURE__ */ jsx15(TooltipContent, { side: "bottom", className: "max-w-xs", children: displayLabel })
-    ] });
-  };
+  const effectiveSystemTabLabel = systemTabLabel ?? (includeSystemInAll ? "System" : void 0);
   const listPanel = /* @__PURE__ */ jsx15(
     AgentListContent,
     {
@@ -2319,139 +2281,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__ */ jsxs12(Drawer, { open, onOpenChange: handleOpen, children: [
-      wrapTrigger(DrawerTrigger),
-      /* @__PURE__ */ jsxs12(DrawerContent, { className: "h-[85dvh]", children: [
-        /* @__PURE__ */ jsx15(DrawerTitle, { className: "sr-only", children: "Select Agent" }),
-        /* @__PURE__ */ jsx15("div", { className: "flex flex-col overflow-hidden flex-1 min-h-0", children: mobileDetailAgent ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col overflow-hidden", children: [
-          /* @__PURE__ */ jsxs12(
-            "button",
+    return /* @__PURE__ */ jsx15("div", { className: cn6("flex min-h-0 flex-1 flex-col overflow-hidden", className), children: mobileDetailAgent ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs12(
+        "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__ */ jsx15(ChevronRightIcon, { className: "w-4 h-4 rotate-180" }),
+            "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx15("div", { className: "overflow-y-auto", children: /* @__PURE__ */ jsx15(
+        AgentDetailCard,
+        {
+          agent: mobileDetailAgent,
+          onSelect: () => handleSelectAgent(mobileDetailAgent)
+        }
+      ) })
+    ] }) : mobileSubView ? /* @__PURE__ */ jsx15(
+      AgentMobileSubView,
+      {
+        view: mobileSubView,
+        consumer,
+        allCategories,
+        allTags,
+        catSearch,
+        setCatSearch,
+        tagSearch,
+        setTagSearch,
+        onBack: () => {
+          setMobileSubView(null);
+          setCatSearch("");
+          setTagSearch("");
+        }
+      }
+    ) : listPanel });
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: cn6("flex h-full", className), children: [
+    /* @__PURE__ */ jsx15("div", { className: "flex flex-col min-w-0 w-[340px] shrink-0 border-r border-border", children: listPanel }),
+    /* @__PURE__ */ jsxs12(
+      "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__ */ jsx15("div", { className: "h-full matrx-agent-fade-in", children: /* @__PURE__ */ jsx15(
+            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__ */ jsx15(ChevronRightIcon, { className: "w-4 h-4 rotate-180" }),
-                "Back"
-              ]
+              agent: hoveredAgent,
+              onSelect: () => handleSelectAgent(hoveredAgent)
+            }
+          ) }, hoveredAgent.id),
+          rightPanel === "sort" && /* @__PURE__ */ jsx15(
+            AgentSortPanel,
+            {
+              consumer,
+              onClose: () => setRightPanel(null)
             }
           ),
-          /* @__PURE__ */ jsx15("div", { className: "overflow-y-auto", children: /* @__PURE__ */ jsx15(
-            AgentDetailCard,
+          rightPanel === "categories" && /* @__PURE__ */ jsx15(
+            AgentCategoriesPanel,
             {
-              agent: mobileDetailAgent,
-              onSelect: () => handleSelectAgent(mobileDetailAgent)
+              consumer,
+              allCategories,
+              search: catSearch,
+              setSearch: setCatSearch,
+              onClose: () => {
+                setRightPanel(null);
+                setCatSearch("");
+              }
             }
-          ) })
-        ] }) : mobileSubView ? /* @__PURE__ */ jsx15(
-          AgentMobileSubView,
-          {
-            view: mobileSubView,
-            consumer,
-            allCategories,
-            allTags,
-            catSearch,
-            setCatSearch,
-            tagSearch,
-            setTagSearch,
-            onBack: () => {
-              setMobileSubView(null);
-              setCatSearch("");
-              setTagSearch("");
+          ),
+          rightPanel === "tags" && /* @__PURE__ */ jsx15(
+            AgentTagsPanel,
+            {
+              consumer,
+              allTags,
+              search: tagSearch,
+              setSearch: setTagSearch,
+              onClose: () => {
+                setRightPanel(null);
+                setTagSearch("");
+              }
             }
-          }
-        ) : listPanel })
+          ),
+          rightPanel === null && /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center", children: [
+            /* @__PURE__ */ jsx15(MousePointerClickIcon, { className: "h-6 w-6 text-muted-foreground/40" }),
+            /* @__PURE__ */ jsx15("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 = 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 = useMemo4(() => {
+    if (resolveAgentHrefProp) return resolveAgentHrefProp;
+    if (!navigateTo) return void 0;
+    return (agent) => navigateTo.replace("{id}", agent.id);
+  }, [navigateTo, resolveAgentHrefProp]);
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn6("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__ */ jsx15(
+        AgentListPanelBody,
+        {
+          core,
+          includeSystemInAll,
+          ...visibleTabs ? { visibleTabs } : {},
+          ...resolveAgentHref ? { resolveAgentHref } : {},
+          ...display
+        }
+      )
+    }
+  );
+}
+
+// catalog/react/AgentListDropdown.tsx
+import { jsx as jsx16, jsxs as jsxs13 } from "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 = useIsMobile2();
+  const { labels } = useAgentCatalog();
+  const { popoverContainer } = useAgentCatalogUiPorts();
+  const [open, setOpen] = useState4(false);
+  const triggerRef = useRef5(null);
+  const [fitHeight, setFitHeight] = useState4(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 = useMemo5(() => {
+    if (resolveAgentHrefProp) return resolveAgentHrefProp;
+    if (!navigateTo) return void 0;
+    return (agent) => navigateTo.replace("{id}", agent.id);
+  }, [navigateTo, resolveAgentHrefProp]);
+  const triggerButton = triggerSlot ?? /* @__PURE__ */ jsxs13(
+    "button",
+    {
+      type: "button",
+      className: cn7(
+        "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__ */ jsx16("span", { className: "min-w-0 max-w-[200px] flex-1 truncate text-left", children: displayLabel }),
+        activeFilterCount > 0 && /* @__PURE__ */ jsx16("span", { className: "flex items-center justify-center w-4 h-4 rounded-md bg-primary text-primary-foreground text-[10px]", children: activeFilterCount }),
+        /* @__PURE__ */ jsx16(ChevronDownIcon, { className: "w-3 h-3 text-muted-foreground/60" })
+      ]
+    }
+  );
+  const wrapTrigger = (Trigger) => {
+    if (!showAssignedTooltip) {
+      return /* @__PURE__ */ jsx16(Trigger, { asChild: true, ref: triggerRef, children: triggerButton });
+    }
+    return /* @__PURE__ */ jsxs13(Tooltip, { ...open ? { open: false } : {}, children: [
+      /* @__PURE__ */ jsx16(Trigger, { asChild: true, ref: triggerRef, children: /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: triggerButton }) }),
+      /* @__PURE__ */ jsx16(TooltipContent, { side: "bottom", className: "max-w-xs", children: displayLabel })
+    ] });
+  };
+  const body = /* @__PURE__ */ jsx16(
+    AgentListPanelBody,
+    {
+      core,
+      includeSystemInAll,
+      showPinnedAgent,
+      onAfterSelect: () => setOpen(false),
+      ...visibleTabs ? { visibleTabs } : {},
+      ...systemTabLabel ? { systemTabLabel } : {},
+      ...resolveAgentHref ? { resolveAgentHref } : {}
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs13(Drawer, { open, onOpenChange: handleOpen, children: [
+      wrapTrigger(DrawerTrigger),
+      /* @__PURE__ */ jsxs13(DrawerContent, { className: "h-[85dvh]", children: [
+        /* @__PURE__ */ jsx16(DrawerTitle, { className: "sr-only", children: "Select Agent" }),
+        /* @__PURE__ */ jsx16("div", { className: "flex flex-col overflow-hidden flex-1 min-h-0", children: body })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: handleOpen, modal: false, children: [
+  return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: handleOpen, modal: false, children: [
     wrapTrigger(PopoverTrigger),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       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__ */ jsxs12("div", { className: "flex h-full", children: [
-          /* @__PURE__ */ jsx15("div", { className: "flex flex-col min-w-0 w-[340px] shrink-0 border-r border-border", children: listPanel }),
-          /* @__PURE__ */ jsxs12(
-            "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__ */ jsx15("div", { className: "h-full matrx-agent-fade-in", children: /* @__PURE__ */ jsx15(
-                  AgentDetailCard,
-                  {
-                    agent: hoveredAgent,
-                    onSelect: () => handleSelectAgent(hoveredAgent)
-                  }
-                ) }, hoveredAgent.id),
-                rightPanel === "sort" && /* @__PURE__ */ jsx15(
-                  AgentSortPanel,
-                  {
-                    consumer,
-                    onClose: () => setRightPanel(null)
-                  }
-                ),
-                rightPanel === "categories" && /* @__PURE__ */ jsx15(
-                  AgentCategoriesPanel,
-                  {
-                    consumer,
-                    allCategories,
-                    search: catSearch,
-                    setSearch: setCatSearch,
-                    onClose: () => {
-                      setRightPanel(null);
-                      setCatSearch("");
-                    }
-                  }
-                ),
-                rightPanel === "tags" && /* @__PURE__ */ jsx15(
-                  AgentTagsPanel,
-                  {
-                    consumer,
-                    allTags,
-                    search: tagSearch,
-                    setSearch: setTagSearch,
-                    onClose: () => {
-                      setRightPanel(null);
-                      setTagSearch("");
-                    }
-                  }
-                ),
-                !hasRightPanel && /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center", children: [
-                  /* @__PURE__ */ jsx15(MousePointerClickIcon, { className: "h-6 w-6 text-muted-foreground/40" }),
-                  /* @__PURE__ */ jsx15("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
-import { cn as cn7 } from "@ai-matrx/design-system";
-import { useEffect as useEffect4, useRef as useRef5, useState as useState4 } from "react";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { cn as cn8 } from "@ai-matrx/design-system";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function AgentListInlinePicker({
   consumerId,
   onSelect,
@@ -2467,11 +2578,11 @@ function AgentListInlinePicker({
   excludeAgentIds,
   defaultMandateKey
 }) {
-  const inputRef = useRef5(null);
-  const [catSearch, setCatSearch] = useState4("");
-  const [tagSearch, setTagSearch] = useState4("");
-  const [mobileDetailAgent, setMobileDetailAgent] = useState4(null);
-  const [mobileSubView, setMobileSubView] = useState4(null);
+  const inputRef = useRef6(null);
+  const [catSearch, setCatSearch] = useState5("");
+  const [tagSearch, setTagSearch] = useState5("");
+  const [mobileDetailAgent, setMobileDetailAgent] = useState5(null);
+  const [mobileSubView, setMobileSubView] = useState5(null);
   const {
     agents,
     archivedHiddenCount,
@@ -2500,7 +2611,7 @@ function AgentListInlinePicker({
     ...excludeAgentIds ? { excludeAgentIds } : {},
     ...defaultMandateKey ? { defaultMandateKey } : {}
   });
-  useEffect4(() => {
+  useEffect5(() => {
     ensureLoaded();
     if (!autoFocusSearch) return void 0;
     const timer = setTimeout(() => inputRef.current?.focus(), 50);
@@ -2516,20 +2627,20 @@ function AgentListInlinePicker({
   };
   const isMobile = true;
   if (mobileDetailAgent) {
-    return /* @__PURE__ */ jsxs13("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: [
-      /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14("div", { className: cn8("flex h-full min-h-0 flex-col", className), children: [
+      /* @__PURE__ */ jsxs14(
         "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__ */ jsx16(ChevronRightIcon, { className: "h-4 w-4 rotate-180" }),
+            /* @__PURE__ */ jsx17(ChevronRightIcon, { className: "h-4 w-4 rotate-180" }),
             "Back"
           ]
         }
       ),
-      /* @__PURE__ */ jsx16("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx17(
         AgentDetailCard,
         {
           agent: mobileDetailAgent,
@@ -2539,7 +2650,7 @@ function AgentListInlinePicker({
     ] });
   }
   if (mobileSubView) {
-    return /* @__PURE__ */ jsx16("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17("div", { className: cn8("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx17(
       AgentMobileSubView,
       {
         view: mobileSubView,
@@ -2558,7 +2669,7 @@ function AgentListInlinePicker({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx16("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17("div", { className: cn8("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx17(
     AgentListContent,
     {
       agents,
@@ -2600,6 +2711,8 @@ export {
   AgentListContent,
   AgentListDropdown,
   AgentListInlinePicker,
+  AgentListPanel,
+  AgentListPanelBody,
   AgentListTabs,
   AgentMobileSubView,
   AgentRow,
@@ -2613,6 +2726,7 @@ export {
   Music4Icon,
   OptionRow,
   PANEL_HEIGHT,
+  PANEL_WIDTH,
   SORT_OPTIONS,
   SearchInput,
   SidePanelHeader,
@@ -2621,6 +2735,7 @@ export {
   orchestraDepthLine,
   orchestraLabel,
   orchestraModeLabel,
+  panelHeightBelow,
   useAgentCatalog,
   useAgentCatalogRows,
   useAgentCatalogState,