@ai-matrx/agents 0.6.1 → 0.7.0

package/dist/catalog/react/index.js

@@ -0,0 +1,2340 @@
+"use client";
+"use client";
+
+// catalog/react/context.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useSyncExternalStore
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var AgentCatalogContext = createContext(null);
+function AgentCatalogProvider({
+  catalog,
+  children,
+  ...ports
+}) {
+  const value = useMemo(
+    () => ({ catalog, ...ports }),
+    // The ports are plain values a host declares once; re-binding on identity
+    // change is correct and cheap.
+    [
+      catalog,
+      ports.navigate,
+      ports.LinkComponent,
+      ports.renderModelRef,
+      ports.openPeek,
+      ports.popoverContainer
+    ]
+  );
+  return /* @__PURE__ */ jsx(AgentCatalogContext.Provider, { value, children });
+}
+function useBinding() {
+  const binding = useContext(AgentCatalogContext);
+  if (!binding) {
+    throw new Error(
+      "@ai-matrx/agents/catalog/react: no <AgentCatalogProvider> is mounted above this component. Create the catalog once with createAgentCatalog({ client, identity }) and mount <AgentCatalogProvider catalog={catalog}> at the top of your tree."
+    );
+  }
+  return binding;
+}
+function useAgentCatalog() {
+  return useBinding().catalog;
+}
+function useAgentCatalogUiPorts() {
+  const binding = useBinding();
+  const navigate = useCallback(
+    (href) => {
+      if (binding.navigate) {
+        binding.navigate(href);
+        return;
+      }
+      if (typeof window !== "undefined") window.location.assign(href);
+    },
+    [binding.navigate]
+  );
+  return {
+    navigate,
+    LinkComponent: binding.LinkComponent ?? DefaultLink,
+    renderModelRef: binding.renderModelRef ?? defaultRenderModelRef,
+    openPeek: binding.openPeek,
+    popoverContainer: binding.popoverContainer
+  };
+}
+var DefaultLink = ({ children, ...props }) => /* @__PURE__ */ jsx("a", { ...props, children });
+var defaultRenderModelRef = ({
+  modelId,
+  className
+}) => /* @__PURE__ */ jsx("span", { className, children: modelId });
+function useAgentCatalogState(select) {
+  const catalog = useAgentCatalog();
+  const getSnapshot = useCallback(
+    () => select(catalog.getState()),
+    [catalog, select]
+  );
+  return useSyncExternalStore(catalog.subscribe, getSnapshot, getSnapshot);
+}
+function useAgentCatalogRows() {
+  return useAgentCatalogState(selectRows);
+}
+var selectRows = (state) => state.rows;
+
+// catalog/react/useAgentConsumer.ts
+import { useCallback as useCallback2, useEffect, useRef, useState } from "react";
+
+// catalog/types.ts
+function isMandateAgentId(id) {
+  return id.startsWith("mandate:");
+}
+var AGENT_NONE_SENTINEL = "__none__";
+var DEFAULT_AGENT_CONSUMER_STATE = {
+  tab: "mine",
+  sortBy: "updated-desc",
+  searchTerm: "",
+  includedCats: [],
+  includedTags: [],
+  favFilter: "all",
+  archFilter: "active",
+  accessFilter: "any",
+  favoritesFirst: true,
+  listPage: 1,
+  sharedPage: 1,
+  serverMatchedIds: [],
+  isServerSearching: false,
+  deepSearch: false
+};
+
+// catalog/react/useAgentConsumer.ts
+var DEBOUNCE_MS = 250;
+var MIN_QUERY_LENGTH = 2;
+function useAgentConsumer(consumerId, options) {
+  const catalog = useAgentCatalog();
+  const selectConsumer = useCallback2(
+    (state) => state.consumers[consumerId] ?? DEFAULT_AGENT_CONSUMER_STATE,
+    [consumerId]
+  );
+  const consumer = useAgentCatalogState(selectConsumer);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  useEffect(() => {
+    const opts = optionsRef.current;
+    catalog.registerConsumer(
+      consumerId,
+      opts?.initialTab ? { tab: opts.initialTab } : void 0
+    );
+    return () => {
+      if (optionsRef.current?.unregisterOnUnmount) {
+        catalog.unregisterConsumer(consumerId);
+      }
+    };
+  }, [consumerId, catalog]);
+  const setSearchTerm = useCallback2(
+    (value) => catalog.setConsumerFilter(consumerId, { searchTerm: value }),
+    [consumerId, catalog]
+  );
+  const setDeepSearch = useCallback2(
+    (value) => catalog.setConsumerFilter(consumerId, { deepSearch: value }),
+    [consumerId, catalog]
+  );
+  const setSortBy = useCallback2(
+    (value) => catalog.setConsumerFilter(consumerId, { sortBy: value }),
+    [consumerId, catalog]
+  );
+  const setTab = useCallback2(
+    (value) => catalog.setConsumerFilter(consumerId, { tab: value }),
+    [consumerId, catalog]
+  );
+  const setFavFilter = useCallback2(
+    (value) => catalog.setConsumerFilter(consumerId, { favFilter: value }),
+    [consumerId, catalog]
+  );
+  const setArchFilter = useCallback2(
+    (value) => catalog.setConsumerFilter(consumerId, { archFilter: value }),
+    [consumerId, catalog]
+  );
+  const setAccessFilter = useCallback2(
+    (value) => catalog.setConsumerFilter(consumerId, { accessFilter: value }),
+    [consumerId, catalog]
+  );
+  const toggleCategory = useCallback2(
+    (cat) => {
+      const current = catalog.getConsumer(consumerId).includedCats;
+      const next = current.includes(cat) ? current.filter((c) => c !== cat) : [...current, cat];
+      catalog.setConsumerFilter(consumerId, { includedCats: next });
+    },
+    [consumerId, catalog]
+  );
+  const toggleTag = useCallback2(
+    (tag) => {
+      const current = catalog.getConsumer(consumerId).includedTags;
+      const next = current.includes(tag) ? current.filter((t) => t !== tag) : [...current, tag];
+      catalog.setConsumerFilter(consumerId, { includedTags: next });
+    },
+    [consumerId, catalog]
+  );
+  const setIncludedCats = useCallback2(
+    (next) => catalog.setConsumerFilter(consumerId, { includedCats: next }),
+    [consumerId, catalog]
+  );
+  const setIncludedTags = useCallback2(
+    (next) => catalog.setConsumerFilter(consumerId, { includedTags: next }),
+    [consumerId, catalog]
+  );
+  const toggleFavoritesFirst = useCallback2(
+    () => catalog.setConsumerFilter(consumerId, {
+      favoritesFirst: !catalog.getConsumer(consumerId).favoritesFirst
+    }),
+    [consumerId, catalog]
+  );
+  const loadMoreList = useCallback2(
+    () => catalog.setConsumerPage(
+      consumerId,
+      "list",
+      catalog.getConsumer(consumerId).listPage + 1
+    ),
+    [consumerId, catalog]
+  );
+  const loadMoreShared = useCallback2(
+    () => catalog.setConsumerPage(
+      consumerId,
+      "shared",
+      catalog.getConsumer(consumerId).sharedPage + 1
+    ),
+    [consumerId, catalog]
+  );
+  const resetFilters = useCallback2(
+    () => catalog.resetConsumerFilters(consumerId),
+    [consumerId, catalog]
+  );
+  const [isSearching, setIsSearching] = useState(false);
+  const [matchedIds, setMatchedIds] = useState(null);
+  const requestSeq = useRef(0);
+  const query = consumer.searchTerm;
+  const deep = consumer.deepSearch;
+  useEffect(() => {
+    const q = query.trim();
+    if (q.length < MIN_QUERY_LENGTH) {
+      setIsSearching(false);
+      setMatchedIds(null);
+      return void 0;
+    }
+    const seq = ++requestSeq.current;
+    setIsSearching(true);
+    const timer = setTimeout(() => {
+      void catalog.searchServer(q, deep).then((ids) => {
+        if (seq !== requestSeq.current) return;
+        setMatchedIds(ids);
+        setIsSearching(false);
+      }).catch((e) => {
+        if (seq !== requestSeq.current) return;
+        catalog.errorSink({
+          code: "server_search_failed",
+          message: `agent search failed: ${e instanceof Error ? e.message : String(e)}`,
+          context: { query: q, deep }
+        });
+        setIsSearching(false);
+      });
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [query, deep, catalog]);
+  useEffect(() => {
+    catalog.setConsumerServerSearch(consumerId, {
+      matchedIds: matchedIds ?? [],
+      isSearching
+    });
+  }, [consumerId, catalog, matchedIds, isSearching]);
+  const hasActiveFilters = consumer.searchTerm !== "" || consumer.includedCats.length > 0 || consumer.includedTags.length > 0 || consumer.favFilter !== "all" || consumer.archFilter !== "active" || consumer.accessFilter !== "any" || !consumer.favoritesFirst;
+  return {
+    tab: consumer.tab,
+    sortBy: consumer.sortBy,
+    searchTerm: consumer.searchTerm,
+    includedCats: consumer.includedCats,
+    includedTags: consumer.includedTags,
+    favFilter: consumer.favFilter,
+    archFilter: consumer.archFilter,
+    accessFilter: consumer.accessFilter,
+    favoritesFirst: consumer.favoritesFirst,
+    listPage: consumer.listPage,
+    sharedPage: consumer.sharedPage,
+    state: consumer,
+    hasActiveFilters,
+    deepSearch: consumer.deepSearch,
+    isServerSearching: consumer.isServerSearching,
+    setSearchTerm,
+    setDeepSearch,
+    setSortBy,
+    setTab,
+    setFavFilter,
+    setArchFilter,
+    setAccessFilter,
+    toggleCategory,
+    toggleTag,
+    setIncludedCats,
+    setIncludedTags,
+    toggleFavoritesFirst,
+    loadMoreList,
+    loadMoreShared,
+    resetFilters
+  };
+}
+
+// catalog/react/useAgentListCore.ts
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// 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;
+}
+
+// catalog/score.ts
+function computeAgentSearchScore(agent, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return 0;
+  let score = 0;
+  const name = (agent.name ?? "").toLowerCase();
+  const desc = (agent.description ?? "").toLowerCase();
+  if (name === q) score += 1e4;
+  else if (name.startsWith(q)) score += 5e3;
+  else if (matchesWholeWord(name, q)) score += 3e3;
+  else if (name.includes(q)) score += 2e3;
+  if (desc === q) score += 1e3;
+  else if (desc.includes(q)) score += 500;
+  if (agent.category?.toLowerCase().includes(q)) score += 300;
+  if (agent.tags?.some((t) => t.toLowerCase().includes(q))) score += 300;
+  if (agent.modelId?.toLowerCase().includes(q)) score += 100;
+  if (agent.agentType?.toLowerCase().includes(q)) score += 100;
+  if (agent.outputFormat?.toLowerCase().includes(q)) score += 100;
+  const id = agent.id.toLowerCase();
+  if (id === q) score += 1e5;
+  else if (id.includes(q)) score += 5e3;
+  if (agent.sharedByEmail?.toLowerCase().includes(q)) score += 200;
+  if (score === 0 && q.includes(" ")) {
+    const terms = q.split(/\s+/).filter(Boolean);
+    let hits = 0;
+    let termScore = 0;
+    for (const term of terms) {
+      const inName = name.includes(term);
+      const matched = inName || desc.includes(term) || (agent.category?.toLowerCase().includes(term) ?? false) || (agent.tags?.some((t) => t.toLowerCase().includes(term)) ?? false);
+      if (matched) {
+        hits += 1;
+        termScore += inName ? 400 : 100;
+      }
+    }
+    if (hits === terms.length) score += termScore;
+  }
+  return score;
+}
+function matchesWholeWord(haystack, q) {
+  const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`\\b${escaped}\\b`).test(haystack);
+}
+function agentMatchesSearch(agent, query) {
+  return computeAgentSearchScore(agent, query) > 0;
+}
+
+// catalog/selectors.ts
+function memoize1(fn) {
+  let lastA;
+  let last;
+  let has = false;
+  return (a) => {
+    if (!has || lastA !== a) {
+      last = fn(a);
+      lastA = a;
+      has = true;
+    }
+    return last;
+  };
+}
+function memoize2(fn) {
+  let lastA;
+  let lastB;
+  let last;
+  let has = false;
+  return (a, b) => {
+    if (!has || lastA !== a || lastB !== b) {
+      last = fn(a, b);
+      lastA = a;
+      lastB = b;
+      has = true;
+    }
+    return last;
+  };
+}
+function applyAgentSortComparator(a, b, sortBy) {
+  switch (sortBy) {
+    case "name-asc":
+      return (a.name ?? "").localeCompare(b.name ?? "");
+    case "name-desc":
+      return (b.name ?? "").localeCompare(a.name ?? "");
+    case "created-desc":
+      return +new Date(b.createdAt ?? 0) - +new Date(a.createdAt ?? 0);
+    case "category-asc":
+      return (a.category ?? "").localeCompare(b.category ?? "");
+    case "updated-desc":
+    default:
+      return +new Date(b.updatedAt ?? 0) - +new Date(a.updatedAt ?? 0);
+  }
+}
+var selectAllAgentCategories = memoize1(
+  (agents) => {
+    const cats = /* @__PURE__ */ new Set();
+    for (const a of agents) {
+      if (a.agentType === "user" && a.category) cats.add(a.category);
+    }
+    return Array.from(cats).sort();
+  }
+);
+var selectAllSystemAgentCategories = memoize1(
+  (agents) => {
+    const cats = /* @__PURE__ */ new Set();
+    for (const a of agents) {
+      if (a.agentType === "builtin" && a.category) cats.add(a.category);
+    }
+    return Array.from(cats).sort();
+  }
+);
+var selectAllAgentTags = memoize1(
+  (agents) => {
+    const tags = /* @__PURE__ */ new Set();
+    for (const a of agents) {
+      if (a.agentType === "user") a.tags?.forEach((t) => tags.add(t));
+    }
+    return Array.from(tags).sort();
+  }
+);
+var selectAllSystemAgentTags = memoize1(
+  (agents) => {
+    const tags = /* @__PURE__ */ new Set();
+    for (const a of agents) {
+      if (a.agentType === "builtin") a.tags?.forEach((t) => tags.add(t));
+    }
+    return Array.from(tags).sort();
+  }
+);
+var selectUserTypeAgents = memoize1(
+  (agents) => agents.filter((a) => a.agentType === "user")
+);
+var selectBuiltinTypeAgents = memoize1(
+  (agents) => agents.filter((a) => a.agentType === "builtin")
+);
+function sortFilteredAgents(filtered, consumer) {
+  const { searchTerm, sortBy, favFilter, favoritesFirst } = consumer;
+  if (searchTerm) {
+    const scores = /* @__PURE__ */ new Map();
+    filtered.forEach((a) => {
+      scores.set(a.id, computeAgentSearchScore(a, searchTerm));
+    });
+    const serverRank = /* @__PURE__ */ new Map();
+    consumer.serverMatchedIds.forEach((id, i) => serverRank.set(id, i));
+    return [...filtered].sort((a, b) => {
+      const sa = scores.get(a.id) ?? 0;
+      const sb = scores.get(b.id) ?? 0;
+      if (sb !== sa) return sb - sa;
+      if (sa === 0) {
+        const ra = serverRank.get(a.id);
+        const rb = serverRank.get(b.id);
+        if (ra !== void 0 && rb !== void 0 && ra !== rb) return ra - rb;
+      }
+      return applyAgentSortComparator(a, b, sortBy);
+    });
+  }
+  return [...filtered].sort((a, b) => {
+    if (favoritesFirst && favFilter === "all") {
+      const aFav = a.isFavorite ? 1 : 0;
+      const bFav = b.isFavorite ? 1 : 0;
+      if (bFav !== aFav) return bFav - aFav;
+    }
+    return applyAgentSortComparator(a, b, sortBy);
+  });
+}
+function filterUserTypeAgents(agents, consumer) {
+  const {
+    searchTerm,
+    includedCats,
+    includedTags,
+    favFilter,
+    archFilter,
+    accessFilter,
+    tab
+  } = consumer;
+  const serverMatched = new Set(consumer.serverMatchedIds);
+  const filtered = agents.filter((agent) => {
+    if (tab === "mine" && agent.isOwner !== true) return false;
+    if (tab === "shared" && !(agent.isOwner === false && agent.accessLevel != null))
+      return false;
+    if (archFilter === "active" && agent.isArchived) return false;
+    if (archFilter === "archived" && !agent.isArchived) return false;
+    if (favFilter === "yes" && !agent.isFavorite) return false;
+    if (favFilter === "no" && agent.isFavorite) return false;
+    if (accessFilter === "owned" && agent.isOwner !== true) return false;
+    if (accessFilter === "shared" && agent.isOwner !== false) return false;
+    if (accessFilter === "editable" && agent.accessLevel !== "owner" && agent.accessLevel !== "admin" && agent.accessLevel !== "editor")
+      return false;
+    if (includedCats.length > 0) {
+      const category = agent.category;
+      if (!category) {
+        if (!includedCats.includes(AGENT_NONE_SENTINEL)) return false;
+      } else if (!includedCats.includes(category)) {
+        return false;
+      }
+    }
+    if (includedTags.length > 0) {
+      const isUntagged = !agent.tags?.length;
+      if (isUntagged) {
+        if (!includedTags.includes(AGENT_NONE_SENTINEL)) return false;
+      } else if (!agent.tags?.some((t) => includedTags.includes(t))) {
+        return false;
+      }
+    }
+    if (searchTerm && !agentMatchesSearch(agent, searchTerm) && !serverMatched.has(agent.id))
+      return false;
+    return true;
+  });
+  return sortFilteredAgents(filtered, consumer);
+}
+function filterBuiltinTypeAgents(agents, consumer) {
+  const { searchTerm, favFilter, includedCats, includedTags } = consumer;
+  const serverMatched = new Set(consumer.serverMatchedIds);
+  const filtered = agents.filter((agent) => {
+    if (favFilter === "yes" && !agent.isFavorite) return false;
+    if (favFilter === "no" && agent.isFavorite) return false;
+    if (includedCats.length > 0) {
+      const category = agent.category;
+      if (!category) {
+        if (!includedCats.includes(AGENT_NONE_SENTINEL)) return false;
+      } else if (!includedCats.includes(category)) {
+        return false;
+      }
+    }
+    if (includedTags.length > 0) {
+      const isUntagged = !agent.tags?.length;
+      if (isUntagged) {
+        if (!includedTags.includes(AGENT_NONE_SENTINEL)) return false;
+      } else if (!agent.tags?.some((t) => includedTags.includes(t))) {
+        return false;
+      }
+    }
+    if (searchTerm && !agentMatchesSearch(agent, searchTerm) && !serverMatched.has(agent.id))
+      return false;
+    return true;
+  });
+  return sortFilteredAgents(filtered, consumer);
+}
+var makeSelectFilteredAgents = (includeSystemInAll = false) => memoize2(
+  (agents, consumer) => {
+    const userAgents = selectUserTypeAgents(agents);
+    const builtinAgents = selectBuiltinTypeAgents(agents);
+    if (consumer.tab === "system") {
+      return filterBuiltinTypeAgents(builtinAgents, consumer);
+    }
+    if (includeSystemInAll && consumer.tab === "all") {
+      return [
+        ...filterUserTypeAgents(userAgents, consumer),
+        ...filterBuiltinTypeAgents(builtinAgents, consumer)
+      ];
+    }
+    return filterUserTypeAgents(userAgents, consumer);
+  }
+);
+var selectTotalUserAgentsCount = memoize1(
+  (agents) => selectUserTypeAgents(agents).length
+);
+var selectTotalOwnedAgentsCount = memoize1(
+  (agents) => selectUserTypeAgents(agents).filter((a) => a.isOwner === true).length
+);
+var selectTotalSharedAgentsCount = memoize1(
+  (agents) => selectUserTypeAgents(agents).filter(
+    (a) => a.isOwner === false && a.accessLevel != null
+  ).length
+);
+var selectTotalBuiltinAgentsCount = memoize1(
+  (agents) => selectBuiltinTypeAgents(agents).length
+);
+var selectTotalFavoriteAgentsCount = memoize1(
+  (agents) => selectUserTypeAgents(agents).filter((a) => a.isFavorite).length
+);
+
+// catalog/react/useAgentListCore.ts
+var HOVER_GRACE_MS = 900;
+function coerceVisibleTab(current, allowed, initialTab) {
+  if (allowed.length === 0) return null;
+  if (allowed.includes(current)) return null;
+  return initialTab && allowed.includes(initialTab) ? initialTab : allowed[0] ?? null;
+}
+var EMPTY_EXCLUDES = [];
+function useAgentListCore({
+  consumerId,
+  onSelect,
+  navigateTo,
+  activeAgentIdOverride,
+  initialTab,
+  includeSystemInAll = false,
+  visibleTabs,
+  excludeAgentIds = EMPTY_EXCLUDES,
+  defaultMandateKey
+}) {
+  const catalog = useAgentCatalog();
+  const { navigate } = useAgentCatalogUiPorts();
+  const hasFetchedRef = useRef2(false);
+  const [hoveredAgent, setHoveredAgent] = useState2(null);
+  const hoverLeaveTimerRef = useRef2(null);
+  const defaultTabAppliedRef = useRef2(false);
+  const consumer = useAgentConsumer(consumerId, { unregisterOnUnmount: true });
+  const rows = useAgentCatalogRows();
+  const userId = catalog.getUserIdOrNull();
+  const ownedCount = selectTotalOwnedAgentsCount(rows);
+  const selectFiltered = useMemo2(
+    () => makeSelectFilteredAgents(includeSystemInAll),
+    [includeSystemInAll]
+  );
+  const filteredAgents = selectFiltered(rows, consumer.state);
+  const excludedAgentIds = useMemo2(
+    () => new Set(excludeAgentIds),
+    [excludeAgentIds]
+  );
+  const agents = excludedAgentIds.size === 0 ? filteredAgents : filteredAgents.filter((agent) => !excludedAgentIds.has(agent.id));
+  const status = useAgentCatalogState(selectStatus);
+  const activeAgentId = activeAgentIdOverride ?? null;
+  const pinnedAgent = activeAgentId ? catalog.getAgent(activeAgentId) : void 0;
+  const onSystemTab = consumer.tab === "system";
+  const allCategories = onSystemTab ? selectAllSystemAgentCategories(rows) : selectAllAgentCategories(rows);
+  const allTags = onSystemTab ? selectAllSystemAgentTags(rows) : selectAllAgentTags(rows);
+  const tabCounts = {
+    mine: ownedCount,
+    shared: selectTotalSharedAgentsCount(rows),
+    all: selectTotalUserAgentsCount(rows),
+    system: selectTotalBuiltinAgentsCount(rows)
+  };
+  const isLoading = status === "loading";
+  const agentsLoaded = status === "succeeded" || status === "failed";
+  const ensureLoaded = useCallback3(() => {
+    if (!hasFetchedRef.current) {
+      hasFetchedRef.current = true;
+      void catalog.ensureLoaded().catch(() => {
+      });
+    }
+  }, [catalog]);
+  const selectDefaultRow = useCallback3(
+    (state) => defaultMandateKey ? state.defaultRows[defaultMandateKey] : void 0,
+    [defaultMandateKey]
+  );
+  const defaultRow = useAgentCatalogState(selectDefaultRow);
+  useEffect2(() => {
+    if (!defaultMandateKey) return;
+    catalog.ensureDefaultRow(defaultMandateKey);
+  }, [catalog, defaultMandateKey]);
+  useEffect2(() => {
+    if (defaultTabAppliedRef.current) return;
+    if (initialTab) {
+      defaultTabAppliedRef.current = true;
+      if (consumer.tab !== initialTab) consumer.setTab(initialTab);
+      return;
+    }
+    if (consumer.tab !== "mine") {
+      defaultTabAppliedRef.current = true;
+      return;
+    }
+    const wantsPublic = shouldDefaultAgentListToPublicTab({
+      userId,
+      ownedCount,
+      agentsLoaded
+    });
+    if (!wantsPublic) {
+      if (!userId || agentsLoaded) {
+        defaultTabAppliedRef.current = true;
+      }
+      return;
+    }
+    consumer.setTab("system");
+    defaultTabAppliedRef.current = true;
+  }, [
+    userId,
+    ownedCount,
+    agentsLoaded,
+    initialTab,
+    consumer.tab,
+    consumer.setTab
+  ]);
+  const allowedTabsKey = visibleTabs ? visibleTabs.join(",") : "";
+  useEffect2(() => {
+    if (!allowedTabsKey) return;
+    const next = coerceVisibleTab(
+      consumer.tab,
+      allowedTabsKey.split(","),
+      initialTab
+    );
+    if (next) consumer.setTab(next);
+  }, [allowedTabsKey, initialTab, consumer.tab, consumer.setTab]);
+  useEffect2(() => {
+    ensureLoaded();
+  }, [ensureLoaded]);
+  const handleSelectAgent = useCallback3(
+    (agent) => {
+      if (onSelect) {
+        onSelect(agent.id);
+      } else if (navigateTo) {
+        navigate(navigateTo.replace("{id}", agent.id));
+      } else {
+        catalog.errorSink({
+          code: "select_has_nowhere_to_go",
+          message: "an agent was chosen but this picker was given neither onSelect nor navigateTo, so the choice went nowhere.",
+          context: { consumerId, agentId: agent.id }
+        });
+      }
+    },
+    [onSelect, navigateTo, navigate, catalog, consumerId]
+  );
+  const activeFilterCount = (consumer.sortBy !== "updated-desc" ? 1 : 0) + (consumer.includedCats.length > 0 ? 1 : 0) + (consumer.includedTags.length > 0 ? 1 : 0) + (consumer.favFilter !== "all" ? 1 : 0);
+  const handleAgentHover = useCallback3(
+    (agent, panelOpen) => {
+      if (panelOpen) return;
+      if (hoverLeaveTimerRef.current) {
+        clearTimeout(hoverLeaveTimerRef.current);
+        hoverLeaveTimerRef.current = null;
+      }
+      setHoveredAgent(agent);
+    },
+    []
+  );
+  const handleAgentHoverEnd = useCallback3(
+    (agent, onClear) => {
+      if (hoveredAgent?.id === agent.id) {
+        hoverLeaveTimerRef.current = setTimeout(() => {
+          setHoveredAgent(null);
+          onClear();
+        }, HOVER_GRACE_MS);
+      }
+    },
+    [hoveredAgent]
+  );
+  const handleDetailPanelMouseEnter = useCallback3(() => {
+    if (hoverLeaveTimerRef.current) {
+      clearTimeout(hoverLeaveTimerRef.current);
+      hoverLeaveTimerRef.current = null;
+    }
+  }, []);
+  const handleDetailPanelMouseLeave = useCallback3((onClear) => {
+    hoverLeaveTimerRef.current = setTimeout(() => {
+      setHoveredAgent(null);
+      onClear();
+    }, HOVER_GRACE_MS);
+  }, []);
+  useEffect2(
+    () => () => {
+      if (hoverLeaveTimerRef.current) clearTimeout(hoverLeaveTimerRef.current);
+    },
+    []
+  );
+  return {
+    agents,
+    isLoading,
+    activeAgentId,
+    pinnedAgent: pinnedAgent ?? null,
+    defaultRow: defaultRow ?? null,
+    allCategories,
+    allTags,
+    consumer,
+    tabCounts,
+    activeFilterCount,
+    hoveredAgent,
+    setHoveredAgent,
+    ensureLoaded,
+    handleSelectAgent,
+    handleAgentHover,
+    handleAgentHoverEnd,
+    handleDetailPanelMouseEnter,
+    handleDetailPanelMouseLeave
+  };
+}
+var selectStatus = (state) => state.status;
+
+// catalog/react/AgentListDropdown.tsx
+import {
+  cn as cn6,
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  useIsMobile
+} from "@ai-matrx/design-system";
+import { useCallback as useCallback5, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+
+// catalog/react/primitives.tsx
+import { cn } from "@ai-matrx/design-system";
+
+// catalog/react/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Svg({ children, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children
+    }
+  );
+}
+function StarIcon({
+  filled = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(Svg, { ...props, fill: filled ? "currentColor" : "none", children: /* @__PURE__ */ jsx2("path", { d: "M11.5 3.2a.6.6 0 0 1 1 0l2.3 4.7 5.2.8a.6.6 0 0 1 .3 1l-3.8 3.7.9 5.2a.6.6 0 0 1-.9.6L12 16.8l-4.6 2.4a.6.6 0 0 1-.9-.6l.9-5.2-3.8-3.7a.6.6 0 0 1 .3-1l5.2-.8Z" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ jsx2(Svg, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx2(Svg, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx2("path", { d: "m21 21-4.3-4.3" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+  ] });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsx2(Svg, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function ArrowUpDownIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "m21 16-4 4-4-4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M17 20V4" }),
+    /* @__PURE__ */ jsx2("path", { d: "m3 8 4-4 4 4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M7 4v16" })
+  ] });
+}
+function FolderIcon(props) {
+  return /* @__PURE__ */ jsx2(Svg, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }) });
+}
+function TagIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor" })
+  ] });
+}
+function RotateCcwIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 3v5h5" })
+  ] });
+}
+function LoaderIcon(props) {
+  return /* @__PURE__ */ jsx2(Svg, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function MousePointerClickIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M14 4.1 12 6" }),
+    /* @__PURE__ */ jsx2("path", { d: "m5.1 8-2.9-.8" }),
+    /* @__PURE__ */ jsx2("path", { d: "m6 12-1.9 2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M7.2 2.2 8 5.1" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z" })
+  ] });
+}
+function UsersIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
+    /* @__PURE__ */ jsx2("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+  ] });
+}
+function ClockIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 6v6l4 2" })
+  ] });
+}
+function GlobeIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2 12h20" })
+  ] });
+}
+function ExternalLinkIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M15 3h6v6" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10 14 21 3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+  ] });
+}
+function MessageCircleIcon(props) {
+  return /* @__PURE__ */ jsx2(Svg, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) });
+}
+function RocketIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91 0" }),
+    /* @__PURE__ */ jsx2("path", { d: "m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" })
+  ] });
+}
+function AlertTriangleIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 17h.01" })
+  ] });
+}
+
+// catalog/react/primitives.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SearchInput = ({
+  ref,
+  value,
+  onChange,
+  placeholder
+}) => /* @__PURE__ */ jsxs2("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(
+    "input",
+    {
+      ref,
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 outline-none min-w-0",
+      style: { fontSize: "16px" }
+    }
+  ),
+  value && /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(""),
+      className: "text-muted-foreground hover:text-foreground",
+      "aria-label": "Clear search",
+      children: /* @__PURE__ */ jsx3(XIcon, { className: "w-3 h-3" })
+    }
+  )
+] });
+function FilterChip({
+  icon: Icon,
+  label,
+  active,
+  focused,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "inline-flex items-center gap-1 h-6 px-1.5 rounded text-[11px] font-medium shrink-0 transition-colors",
+        focused ? "bg-primary/15 text-primary border border-primary/30 ring-1 ring-primary/20" : active ? "bg-primary/10 text-primary border border-primary/20" : "text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-transparent"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(Icon, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsx3("span", { children: label })
+      ]
+    }
+  );
+}
+function OptionRow({
+  label,
+  selected,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex items-center w-full px-3 py-2 text-xs transition-colors",
+        "hover:bg-muted/50 active:bg-muted/70",
+        selected && "text-primary font-medium"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "flex-1 text-left", children: label }),
+        selected && /* @__PURE__ */ jsx3(CheckIcon, { className: "w-3.5 h-3.5 text-primary shrink-0" })
+      ]
+    }
+  );
+}
+function CheckRow({
+  label,
+  checked,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-muted/50 active:bg-muted/70 transition-colors",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: cn(
+              "w-3.5 h-3.5 rounded-sm border flex items-center justify-center shrink-0 transition-colors",
+              checked ? "bg-primary border-primary" : "border-muted-foreground/30"
+            ),
+            children: checked && /* @__PURE__ */ jsx3(CheckIcon, { className: "w-2.5 h-2.5 text-primary-foreground" })
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { className: "flex-1 text-left truncate", children: label })
+      ]
+    }
+  );
+}
+function SidePanelHeader({
+  title,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border shrink-0", children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-xs font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        className: "w-5 h-5 rounded flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsx3(XIcon, { className: "w-3.5 h-3.5" })
+      }
+    )
+  ] });
+}
+
+// catalog/react/AgentCategoriesPanel.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function AgentCategoriesPanel({
+  consumer,
+  allCategories,
+  search,
+  setSearch,
+  onClose
+}) {
+  const filtered = allCategories.filter(
+    (c) => !search || c.toLowerCase().includes(search.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx4(SidePanelHeader, { title: "Categories", onClose }),
+    /* @__PURE__ */ jsx4("div", { className: "px-2 pt-2 pb-1 shrink-0", children: /* @__PURE__ */ jsx4(
+      SearchInput,
+      {
+        value: search,
+        onChange: setSearch,
+        placeholder: "Filter categories..."
+      }
+    ) }),
+    consumer.includedCats.length > 0 && /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: () => consumer.setIncludedCats([]),
+        className: "mx-2 mb-1 h-6 rounded text-[11px] font-medium text-primary hover:bg-muted/50 transition-colors text-left shrink-0",
+        children: [
+          "Clear (",
+          consumer.includedCats.length,
+          ")"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4("div", { className: "overflow-y-auto flex-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "text-xs text-muted-foreground text-center py-6", children: "No categories" }) : filtered.map((cat) => /* @__PURE__ */ jsx4(
+      CheckRow,
+      {
+        label: cat,
+        checked: consumer.includedCats.includes(cat),
+        onClick: () => consumer.toggleCategory(cat)
+      },
+      cat
+    )) })
+  ] });
+}
+
+// catalog/react/AgentDetailCard.tsx
+import { cn as cn3 } from "@ai-matrx/design-system";
+
+// catalog/react/FavoriteAgentButton.tsx
+import { cn as cn2 } from "@ai-matrx/design-system";
+import { useCallback as useCallback4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function FavoriteAgentButton({
+  id,
+  variant = "card",
+  disabled
+}) {
+  const catalog = useAgentCatalog();
+  const select = useCallback4(
+    (state) => state.byId[id],
+    [id]
+  );
+  const record = useAgentCatalogState(select);
+  const isFavorite = record?.isFavorite ?? false;
+  const isOwner = record?.isOwner ?? true;
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (disabled || !isOwner) return;
+    void catalog.setFavorite(id, !isFavorite).catch(() => {
+    });
+  };
+  const title = isOwner ? isFavorite ? "Remove from favorites" : "Add to favorites" : "Shared \u2014 cannot favorite";
+  if (variant === "list") {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: cn2(
+          "flex-shrink-0 p-0.5 rounded transition-all duration-150",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+          disabled || !isOwner ? "cursor-not-allowed" : "hover:scale-110 cursor-pointer"
+        ),
+        onClick: handleClick,
+        disabled: disabled || !isOwner,
+        title,
+        "aria-label": isFavorite ? "Remove from favorites" : "Add to favorites",
+        children: /* @__PURE__ */ jsx5(
+          StarIcon,
+          {
+            filled: isFavorite,
+            className: cn2(
+              "h-3.5 w-3.5 transition-all duration-150",
+              isFavorite ? "matrx-agent-star-on" : "text-muted-foreground/40 hover:matrx-agent-star-on"
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      className: cn2(
+        "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 || !isOwner ? "cursor-not-allowed" : "hover:scale-110 cursor-pointer",
+        isFavorite ? "matrx-agent-star-on" : "text-muted-foreground/40 hover:matrx-agent-star-on"
+      ),
+      onClick: handleClick,
+      disabled: disabled || !isOwner,
+      title,
+      "aria-label": isFavorite ? "Remove from favorites" : "Add to favorites",
+      children: /* @__PURE__ */ jsx5(StarIcon, { filled: isFavorite, className: "w-4 h-4 transition-all duration-150" })
+    }
+  );
+}
+
+// catalog/react/AgentDetailCard.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function AgentDetailCard({ agent, onSelect }) {
+  const { LinkComponent, renderModelRef, openPeek } = useAgentCatalogUiPorts();
+  const updatedDate = agent.updatedAt ? new Date(agent.updatedAt) : null;
+  const createdDate = agent.createdAt ? new Date(agent.createdAt) : null;
+  const isDefaultRow = isMandateAgentId(agent.id);
+  const formatDate = (d) => {
+    if (!d) return null;
+    return d.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx6("div", { className: "px-4 pt-4 pb-3", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx6("div", { className: "w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx6("h3", { className: "text-sm font-semibold text-foreground leading-tight truncate", children: agent.name || "Untitled" }),
+        agent.isFavorite && /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-1 mt-0.5", children: /* @__PURE__ */ jsx6("span", { className: "text-[11px] matrx-agent-star-on", children: "Pinned to favorites" }) })
+      ] }),
+      !isDefaultRow && /* @__PURE__ */ jsx6(FavoriteAgentButton, { id: agent.id, variant: "list" })
+    ] }) }),
+    /* @__PURE__ */ jsx6("div", { className: "h-px bg-border mx-3" }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex-1 overflow-y-auto px-4 py-3 space-y-3", children: [
+      agent.description && /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx6("p", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-1", children: "Description" }),
+        /* @__PURE__ */ jsx6("p", { className: "text-xs text-foreground/80 leading-relaxed", children: agent.description })
+      ] }),
+      agent.category && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6(FolderIcon, { className: "w-3.5 h-3.5 text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsx6("span", { className: "text-xs text-foreground/80", children: agent.category })
+      ] }),
+      agent.tags && agent.tags.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
+          /* @__PURE__ */ jsx6(TagIcon, { className: "w-3.5 h-3.5 text-muted-foreground shrink-0" }),
+          /* @__PURE__ */ jsx6("span", { className: "text-[11px] font-medium text-muted-foreground", children: "Tags" })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-1", children: agent.tags.map((tag) => /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "inline-flex items-center h-5 px-1.5 rounded text-[10px] font-medium bg-muted text-muted-foreground",
+            children: tag
+          },
+          tag
+        )) })
+      ] }),
+      agent.accessLevel && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        agent.isOwner === false ? /* @__PURE__ */ jsx6(UsersIcon, { className: "w-3.5 h-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx6(GlobeIcon, { className: "w-3.5 h-3.5 text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-xs text-foreground/80 capitalize", children: agent.accessLevel === "owner" ? "You own this" : `Shared \u2014 ${agent.accessLevel}` }),
+          agent.sharedByEmail && /* @__PURE__ */ jsxs4("span", { className: "text-[10px] text-muted-foreground", children: [
+            "by ",
+            agent.sharedByEmail
+          ] })
+        ] })
+      ] }),
+      agent.modelId && /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-2", children: renderModelRef({
+        modelId: agent.modelId,
+        className: "max-w-full text-xs text-foreground/80"
+      }) }),
+      (updatedDate || createdDate) && /* @__PURE__ */ jsxs4("div", { className: "pt-1 space-y-1", children: [
+        updatedDate && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx6(ClockIcon, { className: "w-3.5 h-3.5 text-muted-foreground shrink-0" }),
+          /* @__PURE__ */ jsxs4("span", { className: "text-[11px] text-muted-foreground", children: [
+            "Updated ",
+            formatDate(updatedDate)
+          ] })
+        ] }),
+        createdDate && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx6(ClockIcon, { className: "w-3.5 h-3.5 text-muted-foreground/50 shrink-0" }),
+          /* @__PURE__ */ jsxs4("span", { className: "text-[11px] text-muted-foreground/70", children: [
+            "Created ",
+            formatDate(createdDate)
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "h-px bg-border mx-3 mt-auto" }),
+    /* @__PURE__ */ jsxs4("div", { className: "px-3 py-2 shrink-0 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: onSelect,
+          className: "flex-1 h-7 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 active:bg-primary/80 transition-colors",
+          children: "Select"
+        }
+      ),
+      openPeek && /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            openPeek(agent);
+          },
+          title: "Sneak Peek",
+          "aria-label": "Sneak Peek",
+          className: iconButtonClass,
+          children: /* @__PURE__ */ jsx6(RocketIcon, { className: "w-3.5 h-3.5" })
+        }
+      ),
+      !isDefaultRow && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx6(
+          LinkComponent,
+          {
+            href: `/chat/a/${agent.id}`,
+            onClick: (e) => e.stopPropagation(),
+            title: "Open in chat",
+            "aria-label": "Open in chat",
+            className: iconButtonClass,
+            children: /* @__PURE__ */ jsx6(MessageCircleIcon, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          LinkComponent,
+          {
+            href: `/agents/go/${agent.id}`,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            onClick: (e) => e.stopPropagation(),
+            title: "Open in new tab",
+            "aria-label": "Open in new tab",
+            className: cn3(
+              iconButtonClass,
+              "hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ jsx6(ExternalLinkIcon, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var iconButtonClass = "flex items-center justify-center h-7 w-7 rounded-md border border-border bg-background text-muted-foreground hover:text-primary hover:bg-muted/50 transition-colors shrink-0";
+
+// catalog/react/AgentListContent.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+
+// catalog/react/types.ts
+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 PANEL_HEIGHT = "528px";
+var LIST_MAX_HEIGHT = "min(528px, var(--radix-popper-available-height, 528px))";
+
+// catalog/react/AgentFilterBar.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function AgentFilterBar({
+  consumer,
+  allCategories,
+  allTags,
+  activeFilterCount,
+  isMobile,
+  rightPanel,
+  onFilterChipClick,
+  onReset
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 px-2 pb-1.5 overflow-x-auto matrx-agent-scrollbar-none shrink-0", children: [
+    /* @__PURE__ */ jsx7(
+      FilterChip,
+      {
+        icon: ArrowUpDownIcon,
+        label: SORT_OPTIONS.find((o) => o.value === consumer.sortBy)?.label ?? "Sort",
+        active: consumer.sortBy !== "updated-desc",
+        focused: !isMobile && rightPanel === "sort",
+        onClick: () => onFilterChipClick("sort")
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      FilterChip,
+      {
+        icon: StarIcon,
+        label: consumer.favFilter === "no" ? "No Favs" : "Favs",
+        active: consumer.favFilter !== "all",
+        onClick: () => {
+          const next = consumer.favFilter === "all" ? "yes" : consumer.favFilter === "yes" ? "no" : "all";
+          consumer.setFavFilter(next);
+        }
+      }
+    ),
+    allCategories.length > 0 && /* @__PURE__ */ jsx7(
+      FilterChip,
+      {
+        icon: FolderIcon,
+        label: consumer.includedCats.length > 0 ? `${consumer.includedCats.length}` : "Category",
+        active: consumer.includedCats.length > 0,
+        focused: !isMobile && rightPanel === "categories",
+        onClick: () => onFilterChipClick("categories")
+      }
+    ),
+    allTags.length > 0 && /* @__PURE__ */ jsx7(
+      FilterChip,
+      {
+        icon: TagIcon,
+        label: consumer.includedTags.length > 0 ? `${consumer.includedTags.length}` : "Tags",
+        active: consumer.includedTags.length > 0,
+        focused: !isMobile && rightPanel === "tags",
+        onClick: () => onFilterChipClick("tags")
+      }
+    ),
+    activeFilterCount > 0 && /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        onClick: onReset,
+        "aria-label": "Reset filters",
+        className: "flex items-center gap-0.5 h-6 px-1.5 rounded text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors shrink-0",
+        children: /* @__PURE__ */ jsx7(RotateCcwIcon, { className: "w-3 h-3" })
+      }
+    )
+  ] });
+}
+
+// catalog/react/AgentListTabs.tsx
+import { cn as cn4 } from "@ai-matrx/design-system";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function AgentListTabs({
+  consumer,
+  tabCounts,
+  systemTabLabel,
+  visibleTabs
+}) {
+  const { labels } = useAgentCatalog();
+  const tabs = [
+    { value: "mine", label: "Mine", countKey: "mine" },
+    { value: "shared", label: "Shared", countKey: "shared" },
+    { value: "all", label: "All", countKey: "all" },
+    { value: "system", label: labels.publicTab, countKey: "system" }
+  ];
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "flex items-center gap-0.5 px-2 pb-1 overflow-x-auto matrx-agent-scrollbar-none shrink-0",
+      role: "tablist",
+      "aria-label": "Agent ownership",
+      children: tabs.filter(({ value }) => !visibleTabs || visibleTabs.includes(value)).map(({ value, label: baseLabel, countKey }) => {
+        const label = value === "system" ? systemTabLabel ?? baseLabel : baseLabel;
+        const active = consumer.tab === value;
+        const count = tabCounts[countKey];
+        return /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => consumer.setTab(value),
+            className: cn4(
+              "inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium transition-colors shrink-0",
+              active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            ),
+            children: [
+              /* @__PURE__ */ jsx8("span", { children: label }),
+              /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  className: cn4("tabular-nums opacity-70", active && "opacity-90"),
+                  children: count
+                }
+              )
+            ]
+          },
+          value
+        );
+      })
+    }
+  );
+}
+
+// catalog/react/AgentRow.tsx
+import { cn as cn5 } from "@ai-matrx/design-system";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function AgentRow({
+  agent,
+  isActive,
+  isHovered,
+  isMobile,
+  href,
+  onClick,
+  onHover,
+  onHoverEnd,
+  onDetailPress
+}) {
+  const { LinkComponent } = useAgentCatalogUiPorts();
+  const { labels } = useAgentCatalog();
+  const rowHref = href ?? `/agents/go/${agent.id}`;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn5(
+        "flex items-center w-full text-left transition-colors group",
+        "hover:bg-muted/50 active:bg-muted/70",
+        isActive && "bg-primary/5",
+        !isMobile && isHovered && "bg-muted/40"
+      ),
+      onMouseEnter: isMobile ? void 0 : onHover,
+      onMouseLeave: isMobile ? void 0 : onHoverEnd,
+      children: [
+        /* @__PURE__ */ jsxs7(
+          LinkComponent,
+          {
+            href: rowHref,
+            onClick: (e) => {
+              if (e.metaKey || e.ctrlKey) return;
+              e.preventDefault();
+              onClick();
+            },
+            className: "flex items-center gap-2 flex-1 min-w-0 px-3 py-2",
+            children: [
+              agent.isFavorite && /* @__PURE__ */ jsx9(StarIcon, { filled: true, className: "w-3 h-3 matrx-agent-star-on shrink-0" }),
+              /* @__PURE__ */ jsx9(
+                "span",
+                {
+                  className: cn5(
+                    "text-[13px] font-medium truncate",
+                    isActive ? "text-primary" : "text-foreground"
+                  ),
+                  children: agent.name || "Untitled"
+                }
+              ),
+              agent.agentType === "builtin" ? /* @__PURE__ */ jsx9("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__ */ jsx9("span", { className: "text-[9px] text-muted-foreground bg-muted px-1 py-px rounded shrink-0 ml-auto", children: "shared" }) : null
+            ]
+          }
+        ),
+        isMobile && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Show details",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDetailPress();
+            },
+            className: "flex items-center justify-center w-10 h-full shrink-0 text-muted-foreground/40 active:text-muted-foreground",
+            children: /* @__PURE__ */ jsx9(ChevronRightIcon, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// catalog/react/AgentListContent.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function AgentListContent({
+  agents,
+  isLoading,
+  consumer,
+  activeAgentId,
+  allCategories,
+  allTags,
+  inputRef,
+  onSelectAgent,
+  resolveAgentHref,
+  onReset,
+  activeFilterCount,
+  isMobile,
+  hoveredAgent,
+  onAgentHover,
+  onAgentHoverEnd,
+  onDetailPress,
+  onFilterChipClick,
+  rightPanel,
+  tabCounts,
+  visibleTabs,
+  systemTabLabel,
+  pinnedAgent = null,
+  defaultRow = null,
+  listOpen = false
+}) {
+  const catalog = useAgentCatalog();
+  const listScrollRef = useRef3(null);
+  useEffect3(() => {
+    if (listOpen && pinnedAgent) {
+      listScrollRef.current?.scrollTo({ top: 0 });
+    }
+  }, [listOpen, pinnedAgent?.id]);
+  const { labels } = catalog;
+  const emptyLabel = agentListEmptyLabel(consumer.tab, labels);
+  const defaultAgent = defaultRow?.row ?? null;
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx10("div", { className: "px-2 pt-2 pb-1 shrink-0", children: /* @__PURE__ */ jsx10(
+      SearchInput,
+      {
+        ref: inputRef,
+        value: consumer.searchTerm,
+        onChange: consumer.setSearchTerm,
+        placeholder: labels.searchPlaceholder
+      }
+    ) }),
+    /* @__PURE__ */ jsx10(
+      AgentListTabs,
+      {
+        consumer,
+        tabCounts,
+        systemTabLabel,
+        visibleTabs
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      AgentFilterBar,
+      {
+        consumer,
+        allCategories,
+        allTags,
+        activeFilterCount,
+        isMobile,
+        rightPanel,
+        onFilterChipClick,
+        onReset
+      }
+    ),
+    defaultRow?.drift && /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        role: "status",
+        className: "matrx-agent-drift-banner mx-2 mb-1.5 flex items-start gap-2 rounded-md px-2 py-1.5 shrink-0",
+        children: [
+          /* @__PURE__ */ jsx10(AlertTriangleIcon, { className: "w-3.5 h-3.5 shrink-0 mt-px" }),
+          /* @__PURE__ */ jsx10("span", { className: "text-[11px] leading-snug flex-1", children: defaultRow.drift }),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Dismiss",
+              onClick: () => catalog.dismissDefaultRowDrift(defaultRow.mandateKey),
+              className: "shrink-0 opacity-70 hover:opacity-100",
+              children: /* @__PURE__ */ jsx10(XIcon, { className: "w-3 h-3" })
+            }
+          )
+        ]
+      }
+    ),
+    defaultRow?.error && /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        role: "alert",
+        className: "matrx-agent-drift-banner mx-2 mb-1.5 flex items-start gap-2 rounded-md px-2 py-1.5 shrink-0",
+        children: [
+          /* @__PURE__ */ jsx10(AlertTriangleIcon, { className: "w-3.5 h-3.5 shrink-0 mt-px" }),
+          /* @__PURE__ */ jsx10("span", { className: "text-[11px] leading-snug flex-1", children: defaultRow.error })
+        ]
+      }
+    ),
+    /* @__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__ */ jsxs8("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__ */ jsxs8("div", { className: "py-0.5", children: [
+      defaultAgent && /* @__PURE__ */ jsxs8(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__ */ jsxs8(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", { className: "h-px bg-border shrink-0" }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-2.5 py-1.5 shrink-0", children: [
+      /* @__PURE__ */ jsxs8("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: [
+        agents.length,
+        " agent",
+        agents.length !== 1 ? "s" : ""
+      ] }),
+      consumer.searchTerm && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: () => consumer.setSearchTerm(""),
+          className: "text-[10px] text-muted-foreground hover:text-foreground transition-colors",
+          children: "Clear search"
+        }
+      )
+    ] })
+  ] });
+}
+
+// catalog/react/AgentMobileSubView.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function AgentMobileSubView({
+  view,
+  consumer,
+  allCategories,
+  allTags,
+  catSearch,
+  setCatSearch,
+  tagSearch,
+  setTagSearch,
+  onBack
+}) {
+  const title = view === "sort" ? "Sort" : view === "categories" ? "Categories" : "Tags";
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        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__ */ jsx11(ChevronRightIcon, { className: "w-4 h-4 rotate-180" }),
+          title
+        ]
+      }
+    ),
+    view === "sort" && SORT_OPTIONS.map((opt) => /* @__PURE__ */ jsx11(
+      OptionRow,
+      {
+        label: opt.label,
+        selected: consumer.sortBy === opt.value,
+        onClick: () => {
+          consumer.setSortBy(opt.value);
+          onBack();
+        }
+      },
+      opt.value
+    )),
+    view === "categories" && /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsx11("div", { className: "px-2 pt-2 pb-1", children: /* @__PURE__ */ jsx11(
+        SearchInput,
+        {
+          value: catSearch,
+          onChange: setCatSearch,
+          placeholder: "Filter categories..."
+        }
+      ) }),
+      consumer.includedCats.length > 0 && /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          type: "button",
+          onClick: () => consumer.setIncludedCats([]),
+          className: "mx-2 mb-1 h-6 rounded text-[11px] font-medium text-primary hover:bg-muted/50 transition-colors text-left",
+          children: [
+            "Clear (",
+            consumer.includedCats.length,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx11("div", { className: "overflow-y-auto max-h-[300px]", children: allCategories.filter(
+        (c) => !catSearch || c.toLowerCase().includes(catSearch.toLowerCase())
+      ).map((cat) => /* @__PURE__ */ jsx11(
+        CheckRow,
+        {
+          label: cat,
+          checked: consumer.includedCats.includes(cat),
+          onClick: () => consumer.toggleCategory(cat)
+        },
+        cat
+      )) })
+    ] }),
+    view === "tags" && /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsx11("div", { className: "px-2 pt-2 pb-1", children: /* @__PURE__ */ jsx11(
+        SearchInput,
+        {
+          value: tagSearch,
+          onChange: setTagSearch,
+          placeholder: "Filter tags..."
+        }
+      ) }),
+      consumer.includedTags.length > 0 && /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          type: "button",
+          onClick: () => consumer.setIncludedTags([]),
+          className: "mx-2 mb-1 h-6 rounded text-[11px] font-medium text-primary hover:bg-muted/50 transition-colors text-left",
+          children: [
+            "Clear (",
+            consumer.includedTags.length,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx11("div", { className: "overflow-y-auto max-h-[300px]", children: allTags.filter(
+        (t) => !tagSearch || t.toLowerCase().includes(tagSearch.toLowerCase())
+      ).map((tag) => /* @__PURE__ */ jsx11(
+        CheckRow,
+        {
+          label: tag,
+          checked: consumer.includedTags.includes(tag),
+          onClick: () => consumer.toggleTag(tag)
+        },
+        tag
+      )) })
+    ] })
+  ] });
+}
+
+// catalog/react/AgentSortPanel.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function AgentSortPanel({ consumer, onClose }) {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx12(SidePanelHeader, { title: "Sort By", onClose }),
+    /* @__PURE__ */ jsx12("div", { className: "overflow-y-auto flex-1", children: SORT_OPTIONS.map((opt) => /* @__PURE__ */ jsx12(
+      OptionRow,
+      {
+        label: opt.label,
+        selected: consumer.sortBy === opt.value,
+        onClick: () => consumer.setSortBy(opt.value)
+      },
+      opt.value
+    )) })
+  ] });
+}
+
+// catalog/react/AgentTagsPanel.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function AgentTagsPanel({
+  consumer,
+  allTags,
+  search,
+  setSearch,
+  onClose
+}) {
+  const filtered = allTags.filter(
+    (t) => !search || t.toLowerCase().includes(search.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx13(SidePanelHeader, { title: "Tags", onClose }),
+    /* @__PURE__ */ jsx13("div", { className: "px-2 pt-2 pb-1 shrink-0", children: /* @__PURE__ */ jsx13(
+      SearchInput,
+      {
+        value: search,
+        onChange: setSearch,
+        placeholder: "Filter tags..."
+      }
+    ) }),
+    consumer.includedTags.length > 0 && /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        type: "button",
+        onClick: () => consumer.setIncludedTags([]),
+        className: "mx-2 mb-1 h-6 rounded text-[11px] font-medium text-primary hover:bg-muted/50 transition-colors text-left shrink-0",
+        children: [
+          "Clear (",
+          consumer.includedTags.length,
+          ")"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx13("div", { className: "overflow-y-auto flex-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground text-center py-6", children: "No tags" }) : filtered.map((tag) => /* @__PURE__ */ jsx13(
+      CheckRow,
+      {
+        label: tag,
+        checked: consumer.includedTags.includes(tag),
+        onClick: () => consumer.toggleTag(tag)
+      },
+      tag
+    )) })
+  ] });
+}
+
+// catalog/react/AgentListDropdown.tsx
+import { jsx as jsx14, 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,
+  visibleTabs,
+  systemTabLabel,
+  resolveAgentHref: resolveAgentHrefProp,
+  showPinnedAgent = true,
+  excludeAgentIds,
+  defaultMandateKey
+}) {
+  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("");
+  const [mobileDetailAgent, setMobileDetailAgent] = useState3(null);
+  const [mobileSubView, setMobileSubView] = useState3(null);
+  const inputRef = useRef4(null);
+  const {
+    agents,
+    isLoading,
+    activeAgentId,
+    pinnedAgent,
+    defaultRow,
+    allCategories,
+    allTags,
+    consumer,
+    tabCounts,
+    activeFilterCount,
+    hoveredAgent,
+    setHoveredAgent,
+    ensureLoaded,
+    handleSelectAgent: coreSelectAgent,
+    handleAgentHover: coreAgentHover,
+    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 displayLabel = label ?? pinnedAgent?.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);
+    }
+  };
+  const handleSelectAgent = (agent) => {
+    coreSelectAgent(agent);
+    setOpen(false);
+  };
+  const handleFilterChipClick = (panel) => {
+    if (isMobile) {
+      setMobileSubView(panel);
+    } else {
+      setRightPanel(rightPanel === panel ? null : panel);
+    }
+  };
+  const handleAgentHover = useCallback5(
+    (agent) => {
+      if (isMobile) return;
+      const filterPanelOpen = rightPanel === "sort" || rightPanel === "categories" || rightPanel === "tags";
+      coreAgentHover(agent, filterPanelOpen);
+      if (!filterPanelOpen) setRightPanel("detail");
+    },
+    [isMobile, rightPanel, coreAgentHover]
+  );
+  const handleAgentHoverEnd = useCallback5(
+    (agent) => {
+      if (isMobile) return;
+      if (rightPanel !== "detail") return;
+      coreAgentHoverEnd(agent, () => setRightPanel(null));
+    },
+    [isMobile, rightPanel, coreAgentHoverEnd]
+  );
+  const handleDetailPanelMouseLeave = useCallback5(() => {
+    coreDetailMouseLeave(() => setRightPanel(null));
+  }, [coreDetailMouseLeave]);
+  const resolveAgentHref = useMemo3(() => {
+    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__ */ jsx14("span", { className: "min-w-0 max-w-[200px] flex-1 truncate text-left", children: displayLabel }),
+        activeFilterCount > 0 && /* @__PURE__ */ jsx14("span", { className: "flex items-center justify-center w-4 h-4 rounded-md bg-primary text-primary-foreground text-[10px]", children: activeFilterCount }),
+        /* @__PURE__ */ jsx14(ChevronDownIcon, { className: "w-3 h-3 text-muted-foreground/60" })
+      ]
+    }
+  );
+  const wrapTrigger = (Trigger) => {
+    if (!showAssignedTooltip) {
+      return /* @__PURE__ */ jsx14(Trigger, { asChild: true, children: triggerButton });
+    }
+    return /* @__PURE__ */ jsxs12(Tooltip, { ...open ? { open: false } : {}, children: [
+      /* @__PURE__ */ jsx14(Trigger, { asChild: true, children: /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: triggerButton }) }),
+      /* @__PURE__ */ jsx14(TooltipContent, { side: "bottom", className: "max-w-xs", children: displayLabel })
+    ] });
+  };
+  const listPanel = /* @__PURE__ */ jsx14(
+    AgentListContent,
+    {
+      agents,
+      isLoading,
+      consumer,
+      activeAgentId,
+      allCategories,
+      allTags,
+      inputRef,
+      onSelectAgent: handleSelectAgent,
+      ...resolveAgentHref ? { resolveAgentHref } : {},
+      onReset: consumer.resetFilters,
+      activeFilterCount,
+      isMobile,
+      hoveredAgent,
+      onAgentHover: handleAgentHover,
+      onAgentHoverEnd: handleAgentHoverEnd,
+      onDetailPress: setMobileDetailAgent,
+      onFilterChipClick: handleFilterChipClick,
+      rightPanel,
+      tabCounts,
+      ...visibleTabs ? { visibleTabs } : {},
+      ...systemTabLabel ?? (includeSystemInAll ? "System" : void 0) ? {
+        systemTabLabel: systemTabLabel ?? (includeSystemInAll ? "System" : void 0)
+      } : {},
+      pinnedAgent: showPinnedAgent ? pinnedAgent : null,
+      defaultRow,
+      listOpen: open
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs12(Drawer, { open, onOpenChange: handleOpen, children: [
+      wrapTrigger(DrawerTrigger),
+      /* @__PURE__ */ jsxs12(DrawerContent, { className: "h-[85dvh]", children: [
+        /* @__PURE__ */ jsx14(DrawerTitle, { className: "sr-only", children: "Select Agent" }),
+        /* @__PURE__ */ jsx14("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",
+            {
+              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__ */ jsx14(ChevronRightIcon, { className: "w-4 h-4 rotate-180" }),
+                "Back"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx14("div", { className: "overflow-y-auto", children: /* @__PURE__ */ jsx14(
+            AgentDetailCard,
+            {
+              agent: mobileDetailAgent,
+              onSelect: () => handleSelectAgent(mobileDetailAgent)
+            }
+          ) })
+        ] }) : mobileSubView ? /* @__PURE__ */ jsx14(
+          AgentMobileSubView,
+          {
+            view: mobileSubView,
+            consumer,
+            allCategories,
+            allTags,
+            catSearch,
+            setCatSearch,
+            tagSearch,
+            setTagSearch,
+            onBack: () => {
+              setMobileSubView(null);
+              setCatSearch("");
+              setTagSearch("");
+            }
+          }
+        ) : listPanel })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: handleOpen, modal: false, children: [
+    wrapTrigger(PopoverTrigger),
+    /* @__PURE__ */ jsx14(
+      PopoverContent,
+      {
+        ...contentSide ? { side: contentSide } : {},
+        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__ */ jsx14("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__ */ jsx14("div", { className: "h-full matrx-agent-fade-in", children: /* @__PURE__ */ jsx14(
+                  AgentDetailCard,
+                  {
+                    agent: hoveredAgent,
+                    onSelect: () => handleSelectAgent(hoveredAgent)
+                  }
+                ) }, hoveredAgent.id),
+                rightPanel === "sort" && /* @__PURE__ */ jsx14(
+                  AgentSortPanel,
+                  {
+                    consumer,
+                    onClose: () => setRightPanel(null)
+                  }
+                ),
+                rightPanel === "categories" && /* @__PURE__ */ jsx14(
+                  AgentCategoriesPanel,
+                  {
+                    consumer,
+                    allCategories,
+                    search: catSearch,
+                    setSearch: setCatSearch,
+                    onClose: () => {
+                      setRightPanel(null);
+                      setCatSearch("");
+                    }
+                  }
+                ),
+                rightPanel === "tags" && /* @__PURE__ */ jsx14(
+                  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__ */ jsx14(MousePointerClickIcon, { className: "h-6 w-6 text-muted-foreground/40" }),
+                  /* @__PURE__ */ jsx14("p", { className: "text-xs text-muted-foreground/70 leading-relaxed", children: labels.hoverHint })
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// 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 jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function AgentListInlinePicker({
+  consumerId,
+  onSelect,
+  activeAgentId = null,
+  className,
+  autoFocusSearch = true,
+  initialTab,
+  includeSystemInAll = false,
+  visibleTabs,
+  systemTabLabel,
+  resolveAgentHref,
+  showPinnedAgent = true,
+  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 {
+    agents,
+    isLoading,
+    allCategories,
+    allTags,
+    consumer,
+    tabCounts,
+    activeFilterCount,
+    hoveredAgent,
+    pinnedAgent,
+    defaultRow,
+    ensureLoaded,
+    handleSelectAgent: coreSelectAgent,
+    handleAgentHover,
+    handleAgentHoverEnd
+  } = useAgentListCore({
+    consumerId,
+    onSelect,
+    activeAgentIdOverride: activeAgentId,
+    ...initialTab ? { initialTab } : {},
+    includeSystemInAll,
+    // The restriction has to reach the CORE, not just the tab strip — see
+    // `AgentListCoreOptions.visibleTabs`.
+    ...visibleTabs ? { visibleTabs } : {},
+    ...excludeAgentIds ? { excludeAgentIds } : {},
+    ...defaultMandateKey ? { defaultMandateKey } : {}
+  });
+  useEffect4(() => {
+    ensureLoaded();
+    if (!autoFocusSearch) return void 0;
+    const timer = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(timer);
+  }, [ensureLoaded, autoFocusSearch]);
+  const handleSelectAgent = (agent) => {
+    coreSelectAgent(agent);
+    setMobileDetailAgent(null);
+    setMobileSubView(null);
+  };
+  const handleFilterChipClick = (panel) => {
+    setMobileSubView(panel);
+  };
+  const isMobile = true;
+  if (mobileDetailAgent) {
+    return /* @__PURE__ */ jsxs13("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: [
+      /* @__PURE__ */ jsxs13(
+        "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__ */ jsx15(ChevronRightIcon, { className: "h-4 w-4 rotate-180" }),
+            "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx15("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx15(
+        AgentDetailCard,
+        {
+          agent: mobileDetailAgent,
+          onSelect: () => handleSelectAgent(mobileDetailAgent)
+        }
+      ) })
+    ] });
+  }
+  if (mobileSubView) {
+    return /* @__PURE__ */ jsx15("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx15(
+      AgentMobileSubView,
+      {
+        view: mobileSubView,
+        consumer,
+        allCategories,
+        allTags,
+        catSearch,
+        setCatSearch,
+        tagSearch,
+        setTagSearch,
+        onBack: () => {
+          setMobileSubView(null);
+          setCatSearch("");
+          setTagSearch("");
+        }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx15("div", { className: cn7("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx15(
+    AgentListContent,
+    {
+      agents,
+      isLoading,
+      consumer,
+      activeAgentId,
+      allCategories,
+      allTags,
+      inputRef,
+      onSelectAgent: handleSelectAgent,
+      ...resolveAgentHref ? { resolveAgentHref } : {},
+      onReset: consumer.resetFilters,
+      activeFilterCount,
+      isMobile,
+      hoveredAgent,
+      onAgentHover: (agent) => handleAgentHover(agent, false),
+      onAgentHoverEnd: (agent) => handleAgentHoverEnd(agent, () => {
+      }),
+      onDetailPress: setMobileDetailAgent,
+      onFilterChipClick: handleFilterChipClick,
+      rightPanel: null,
+      tabCounts,
+      ...visibleTabs ? { visibleTabs } : {},
+      ...systemTabLabel ?? (includeSystemInAll ? "System" : void 0) ? {
+        systemTabLabel: systemTabLabel ?? (includeSystemInAll ? "System" : void 0)
+      } : {},
+      pinnedAgent: showPinnedAgent ? pinnedAgent : null,
+      defaultRow,
+      listOpen: true
+    }
+  ) });
+}
+export {
+  AgentCatalogProvider,
+  AgentCategoriesPanel,
+  AgentDetailCard,
+  AgentFilterBar,
+  AgentListContent,
+  AgentListDropdown,
+  AgentListInlinePicker,
+  AgentListTabs,
+  AgentMobileSubView,
+  AgentRow,
+  AgentSortPanel,
+  AgentTagsPanel,
+  CheckRow,
+  FavoriteAgentButton,
+  FilterChip,
+  HOVER_GRACE_MS,
+  LIST_MAX_HEIGHT,
+  OptionRow,
+  PANEL_HEIGHT,
+  SORT_OPTIONS,
+  SearchInput,
+  SidePanelHeader,
+  coerceVisibleTab,
+  useAgentCatalog,
+  useAgentCatalogRows,
+  useAgentCatalogState,
+  useAgentCatalogUiPorts,
+  useAgentConsumer,
+  useAgentListCore
+};
+//# sourceMappingURL=index.js.map