@termix-ssh/plugin-sdk 1.0.12 → 1.0.13

package/dist/host/{PluginsTab-EV4MSGY6.js → PluginsTab-OXQQ7M4I.js}

@@ -17,23 +17,27 @@ import {
   formatCount,
   groupChanges,
   isSevere,
+  kindsOf,
   matchesQuery,
   mergePlugins,
   mergeReleaseNotes,
   orderByRisk,
+  pageOf,
   reportIssueUrl,
   requestFeatureUrl,
   require_semver,
   sortPlugins,
   uploadEntry,
   youtubeEmbedUrl
-} from "./chunk-X4QZKO5G.js";
+} from "./chunk-54KCK6IZ.js";
 import {
   ArrowDownWideNarrow,
   BookOpen,
   Bug,
   Button,
   Check,
+  ChevronLeft,
+  ChevronRight,
   Columns3,
   DEVELOPER_MODE_CHANGED_EVENT,
   Database,
@@ -49,6 +53,7 @@ import {
   Input,
   Library,
   Lightbulb,
+  ListFilter,
   PANEL,
   PanePrompt,
   PanelShell,
@@ -72,6 +77,7 @@ import {
   TriangleAlert,
   Upload,
   ViewToggle,
+  X,
   addRegistry,
   cn,
   deletePluginData,
@@ -101,8 +107,8 @@ import {
   updatePlugin,
   uploadPlugin,
   useConfirm
-} from "./chunk-AWR6FYDO.js";
-import "./chunk-RUPLD6RF.js";
+} from "./chunk-ERGN4YW6.js";
+import "./chunk-CN5UBTBP.js";
 import {
   __toESM,
   define_import_meta_env_default,
@@ -111,7 +117,7 @@ import {
 
 // src/ui/plugins/PluginsTab.tsx
 init_define_import_meta_env();
-import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
 import { useTranslation as useTranslation7 } from "react-i18next";
 
 // src/ui/plugins/plugin-bits.tsx
@@ -898,7 +904,16 @@ function PluginDetail({
                   ]
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs5(
+            ] }) : plugin.unsupported ? /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: "text-xs text-muted-foreground",
+                title: t("plugins.manager.unsupportedHint"),
+                children: plugin.needsTermix ? t("plugins.manager.needsTermix", {
+                  range: plugin.needsTermix
+                }) : t("plugins.manager.unsupported")
+              }
+            ) : /* @__PURE__ */ jsxs5(
               Button,
               {
                 variant: "outline",
@@ -1936,7 +1951,7 @@ function PluginsTabBody() {
             onTabChange: (id) => setSection(id)
           }
         ),
-        children: /* @__PURE__ */ jsxs6("div", { className: "min-h-0 flex-1 overflow-y-auto thin-scrollbar", children: [
+        children: /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 flex-1 flex-col", children: [
           manager.managedByServer && /* @__PURE__ */ jsx6(Notice, { children: t("plugins.manager.managedByServer") }),
           manager.registryError && /* @__PURE__ */ jsx6(Notice, { children: t("plugins.manager.registryUnreachable", {
             error: manager.registryError
@@ -1963,14 +1978,14 @@ function PluginsTabBody() {
               layout,
               layoutControls
             }
-          ) : section === "updates" ? /* @__PURE__ */ jsx6(
+          ) : /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-y-auto thin-scrollbar", children: section === "updates" ? /* @__PURE__ */ jsx6(
             UpdatesSection,
             {
               plugins: updates,
               manager,
               onOpen: setDetailId
             }
-          ) : /* @__PURE__ */ jsx6(RegistriesSection, { manager })
+          ) : /* @__PURE__ */ jsx6(RegistriesSection, { manager }) })
         ] })
       }
     ),
@@ -2030,7 +2045,7 @@ function Toolbar({
   children
 }) {
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "relative min-w-40 max-w-xs flex-1", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "relative min-w-40 max-w-md flex-1", children: [
       /* @__PURE__ */ jsx6(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
       /* @__PURE__ */ jsx6(
         Input,
@@ -2148,6 +2163,274 @@ function DescriptionCell({ plugin }) {
 function stop(e) {
   e.stopPropagation();
 }
+var NO_FACETS = { kind: null, category: null, registry: null };
+function applyFacets(rows, facets, skip) {
+  return rows.filter(
+    (p) => (skip === "kind" || !facets.kind || p.kinds.includes(facets.kind)) && (skip === "category" || !facets.category || p.category === facets.category) && (skip === "registry" || !facets.registry || p.registryId === facets.registry)
+  );
+}
+function activeFacets(facets) {
+  return [facets.kind, facets.category, facets.registry].filter(Boolean).length;
+}
+var PAGE_SIZES = ["24", "48", "96"];
+function usePage(signature) {
+  const [state, setState] = useState5({ signature, page: 1 });
+  const page = state.signature === signature ? state.page : 1;
+  return [page, (next) => setState({ signature, page: next })];
+}
+function FacetGroup({
+  title,
+  allLabel,
+  options,
+  value,
+  onChange
+}) {
+  if (options.length === 0) return null;
+  const row = (key, label, count) => {
+    const active = value === key;
+    return /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active,
+        onClick: () => onChange(key),
+        className: cn(
+          "flex w-full items-center gap-2 border-l-2 px-2.5 py-1 text-left text-xs transition-colors",
+          active ? "border-accent-brand bg-accent-brand/10 text-accent-brand" : "border-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+          count === 0 && !active && "opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", children: label }),
+          count !== void 0 && /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-[10px] tabular-nums opacity-70", children: count })
+        ]
+      },
+      key ?? "__all"
+    );
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx6("span", { className: "px-2.5 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: title }),
+    row(null, allLabel),
+    options.map((o) => row(o.value, o.label, o.count))
+  ] });
+}
+function FilterRail({
+  rows,
+  facets,
+  onFacets,
+  registries,
+  children
+}) {
+  const { t } = useTranslation7();
+  const byKind = applyFacets(rows, facets, "kind");
+  const kinds = kindsOf(rows).map(({ kind }) => ({
+    value: kind,
+    label: t(`plugins.manager.kinds.${kind}`),
+    count: byKind.filter((p) => p.kinds.includes(kind)).length
+  }));
+  const byCategory = applyFacets(rows, facets, "category");
+  const categories = categoriesOf(rows).map((c) => ({
+    value: c,
+    label: c,
+    count: byCategory.filter((p) => p.category === c).length
+  }));
+  const byRegistry = applyFacets(rows, facets, "registry");
+  const registryOptions = registries && registries.length > 1 ? registries.map((r) => ({
+    value: r.id,
+    label: r.name,
+    count: byRegistry.filter((p) => p.registryId === r.id).length
+  })) : [];
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-4 py-3", children: [
+    /* @__PURE__ */ jsx6(
+      FacetGroup,
+      {
+        title: t("plugins.manager.filters.type"),
+        allLabel: t("plugins.manager.filters.allTypes"),
+        options: kinds,
+        value: facets.kind,
+        onChange: (kind) => onFacets({ ...facets, kind })
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      FacetGroup,
+      {
+        title: t("plugins.manager.filters.category"),
+        allLabel: t("plugins.manager.filters.allCategories"),
+        options: categories,
+        value: facets.category,
+        onChange: (category) => onFacets({ ...facets, category })
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      FacetGroup,
+      {
+        title: t("plugins.manager.registries.filter"),
+        allLabel: t("plugins.manager.registries.allRegistries"),
+        options: registryOptions,
+        value: facets.registry,
+        onChange: (registry) => onFacets({ ...facets, registry })
+      }
+    ),
+    children && /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2.5 border-t border-border px-2.5 pt-3", children })
+  ] });
+}
+function RailToggle({
+  label,
+  hint,
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs6("label", { className: "flex items-center justify-between gap-2", title: hint, children: [
+    /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx6(FakeSwitch, { checked, onChange })
+  ] });
+}
+function ActiveFilters({
+  facets,
+  onFacets,
+  registries,
+  shown
+}) {
+  const { t } = useTranslation7();
+  const chips = [];
+  if (facets.kind) {
+    chips.push({
+      key: "kind",
+      label: t(`plugins.manager.kinds.${facets.kind}`)
+    });
+  }
+  if (facets.category) chips.push({ key: "category", label: facets.category });
+  if (facets.registry) {
+    chips.push({
+      key: "registry",
+      label: registries?.find((r) => r.id === facets.registry)?.name ?? facets.registry
+    });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "flex min-h-6 flex-wrap items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-muted-foreground", children: t("plugins.manager.filters.results", { count: shown }) }),
+    chips.map((chip) => /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        onClick: () => onFacets({ ...facets, [chip.key]: null }),
+        className: "flex items-center gap-1 border border-accent-brand/40 bg-accent-brand/10 px-1.5 py-0.5 text-[11px] text-accent-brand hover:bg-accent-brand/20",
+        "aria-label": t("plugins.manager.filters.remove", {
+          name: chip.label
+        }),
+        children: [
+          chip.label,
+          /* @__PURE__ */ jsx6(X, { className: "size-3" })
+        ]
+      },
+      chip.key
+    )),
+    chips.length > 1 && /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: () => onFacets(NO_FACETS),
+        className: "text-[11px] text-muted-foreground hover:text-foreground",
+        children: t("plugins.manager.filters.clear")
+      }
+    )
+  ] });
+}
+function Pager({
+  page,
+  pages,
+  total,
+  size,
+  onPage,
+  onSize
+}) {
+  const { t } = useTranslation7();
+  const per = Number(size);
+  if (total <= Number(PAGE_SIZES[0])) return null;
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2 border-t border-border pt-2.5", children: [
+    /* @__PURE__ */ jsx6("span", { className: "text-[11px] tabular-nums text-muted-foreground", children: t("plugins.manager.pager.range", {
+      from: (page - 1) * per + 1,
+      to: Math.min(page * per, total),
+      total
+    }) }),
+    /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxs6(Select, { value: size, onValueChange: (v) => onSize(v), children: [
+        /* @__PURE__ */ jsx6(
+          SelectTrigger,
+          {
+            size: "sm",
+            className: "w-auto text-xs",
+            "aria-label": t("plugins.manager.pager.perPageLabel"),
+            children: /* @__PURE__ */ jsx6(SelectValue, {})
+          }
+        ),
+        /* @__PURE__ */ jsx6(SelectContent, { children: PAGE_SIZES.map((n) => /* @__PURE__ */ jsx6(SelectItem, { value: n, className: "text-xs", children: t("plugins.manager.pager.perPage", { count: Number(n) }) }, n)) })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon-sm",
+          disabled: page <= 1,
+          onClick: () => onPage(page - 1),
+          title: t("plugins.manager.pager.previous"),
+          "aria-label": t("plugins.manager.pager.previous"),
+          children: /* @__PURE__ */ jsx6(ChevronLeft, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx6("span", { className: "px-1 text-[11px] tabular-nums text-muted-foreground", children: t("plugins.manager.pager.page", { page, pages }) }),
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon-sm",
+          disabled: page >= pages,
+          onClick: () => onPage(page + 1),
+          title: t("plugins.manager.pager.next"),
+          "aria-label": t("plugins.manager.pager.next"),
+          children: /* @__PURE__ */ jsx6(ChevronRight, { className: "size-3.5" })
+        }
+      )
+    ] })
+  ] });
+}
+function FilteredLayout({
+  rail,
+  activeCount,
+  scrollRef,
+  children
+}) {
+  const { t } = useTranslation7();
+  const [open, setOpen] = useState5(false);
+  const button = /* @__PURE__ */ jsxs6(
+    Button,
+    {
+      variant: "outline",
+      className: cn(
+        "gap-1.5 @3xl:hidden",
+        activeCount > 0 && "border-accent-brand/40 text-accent-brand"
+      ),
+      "aria-expanded": open,
+      onClick: () => setOpen((v) => !v),
+      children: [
+        /* @__PURE__ */ jsx6(ListFilter, { className: "size-3.5" }),
+        activeCount > 0 ? t("plugins.manager.filters.buttonCount", { count: activeCount }) : t("plugins.manager.filters.button")
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs6("div", { className: "@container flex min-h-0 flex-1", children: [
+    /* @__PURE__ */ jsx6("aside", { className: "hidden w-52 shrink-0 overflow-y-auto border-r border-border thin-scrollbar @3xl:block", children: rail }),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: scrollRef,
+        className: "min-h-0 flex-1 overflow-y-auto thin-scrollbar",
+        children: [
+          open && /* @__PURE__ */ jsx6("div", { className: "border-b border-border @3xl:hidden", children: rail }),
+          children(button)
+        ]
+      }
+    )
+  ] });
+}
 function InstalledSection({
   plugins,
   manager,
@@ -2159,10 +2442,9 @@ function InstalledSection({
 }) {
   const { t } = useTranslation7();
   const [sort, setSort] = useState5("name");
-  const rows = sortPlugins(
-    plugins.filter((p) => matchesQuery(p, query)),
-    sort
-  );
+  const [facets, setFacets] = useState5(NO_FACETS);
+  const searched = plugins.filter((p) => matchesQuery(p, query));
+  const rows = sortPlugins(applyFacets(searched, facets), sort);
   const running = rows.filter((p) => p.status === "running");
   const onServer = rows.filter((p) => p.status === "server");
   const stopped = rows.filter(
@@ -2224,66 +2506,84 @@ function InstalledSection({
       onOpen
     }
   );
-  return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col ${PANEL.gap} ${PANEL.body}`, children: [
-    /* @__PURE__ */ jsx6(
-      Toolbar,
-      {
-        query,
-        onQuery,
-        placeholder: t("plugins.manager.searchInstalled"),
-        children: /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx6(SortSelect, { value: sort, onChange: setSort }),
-          layoutControls,
-          manager.developerMode && !manager.signedOnly && /* @__PURE__ */ jsx6(UploadButton, { manager }),
-          /* @__PURE__ */ jsxs6(
-            Button,
+  return /* @__PURE__ */ jsx6(
+    FilteredLayout,
+    {
+      activeCount: activeFacets(facets),
+      rail: /* @__PURE__ */ jsx6(FilterRail, { rows: searched, facets, onFacets: setFacets }),
+      children: (filtersButton) => /* @__PURE__ */ jsxs6("div", { className: `flex flex-col ${PANEL.gap} ${PANEL.body}`, children: [
+        /* @__PURE__ */ jsxs6(
+          Toolbar,
+          {
+            query,
+            onQuery,
+            placeholder: t("plugins.manager.searchInstalled"),
+            children: [
+              filtersButton,
+              /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx6(SortSelect, { value: sort, onChange: setSort }),
+                layoutControls,
+                manager.developerMode && !manager.signedOnly && /* @__PURE__ */ jsx6(UploadButton, { manager }),
+                /* @__PURE__ */ jsxs6(
+                  Button,
+                  {
+                    variant: "outline",
+                    className: "gap-1.5",
+                    disabled: pending.length === 0 || manager.busy.size > 0 || manager.managedByServer,
+                    onClick: () => void manager.updateAll(),
+                    children: [
+                      /* @__PURE__ */ jsx6(Download, { className: "size-3.5" }),
+                      t("plugins.manager.updateAll")
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        activeFacets(facets) > 0 && /* @__PURE__ */ jsx6(
+          ActiveFilters,
+          {
+            facets,
+            onFacets: setFacets,
+            shown: rows.length
+          }
+        ),
+        rows.length === 0 ? /* @__PURE__ */ jsx6(
+          EmptyState,
+          {
+            icon: Puzzle,
+            title: plugins.length === 0 ? t("plugins.manager.noneInstalled") : t("plugins.manager.nothingMatches")
+          }
+        ) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          running.length > 0 && /* @__PURE__ */ jsx6(
+            Group,
             {
-              variant: "outline",
-              className: "gap-1.5",
-              disabled: pending.length === 0 || manager.busy.size > 0 || manager.managedByServer,
-              onClick: () => void manager.updateAll(),
-              children: [
-                /* @__PURE__ */ jsx6(Download, { className: "size-3.5" }),
-                t("plugins.manager.updateAll")
-              ]
+              title: t("plugins.manager.groups.running"),
+              count: running.length,
+              children: collection(running)
+            }
+          ),
+          onServer.length > 0 && /* @__PURE__ */ jsx6(
+            Group,
+            {
+              title: t("plugins.manager.groups.onServer"),
+              count: onServer.length,
+              children: collection(onServer)
+            }
+          ),
+          stopped.length > 0 && /* @__PURE__ */ jsx6(
+            Group,
+            {
+              title: t("plugins.manager.groups.notRunning"),
+              count: stopped.length,
+              children: collection(stopped)
             }
           )
         ] })
-      }
-    ),
-    rows.length === 0 ? /* @__PURE__ */ jsx6(
-      EmptyState,
-      {
-        icon: Puzzle,
-        title: plugins.length === 0 ? t("plugins.manager.noneInstalled") : t("plugins.manager.nothingMatches")
-      }
-    ) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
-      running.length > 0 && /* @__PURE__ */ jsx6(
-        Group,
-        {
-          title: t("plugins.manager.groups.running"),
-          count: running.length,
-          children: collection(running)
-        }
-      ),
-      onServer.length > 0 && /* @__PURE__ */ jsx6(
-        Group,
-        {
-          title: t("plugins.manager.groups.onServer"),
-          count: onServer.length,
-          children: collection(onServer)
-        }
-      ),
-      stopped.length > 0 && /* @__PURE__ */ jsx6(
-        Group,
-        {
-          title: t("plugins.manager.groups.notRunning"),
-          count: stopped.length,
-          children: collection(stopped)
-        }
-      )
-    ] })
-  ] });
+      ] })
+    }
+  );
 }
 function UploadButton({ manager }) {
   const { t } = useTranslation7();
@@ -2570,31 +2870,49 @@ function BrowseSection({
   layoutControls
 }) {
   const { t } = useTranslation7();
-  const [category, setCategory] = useState5(null);
-  const [registry, setRegistry] = useState5(null);
+  const [facets, setFacets] = useState5(NO_FACETS);
   const [sort, setSort] = useState5("popular");
   const [installedChoice, setInstalledChoice] = useStoredChoice(
     "pluginsTab.browseInstalled",
     ["hide", "show"],
     "hide"
   );
+  const [unsupportedChoice, setUnsupportedChoice] = useStoredChoice(
+    "pluginsTab.browseUnsupported",
+    ["hide", "show"],
+    "hide"
+  );
+  const [pageSize, setPageSize] = useStoredChoice(
+    "pluginsTab.pageSize",
+    PAGE_SIZES,
+    "24"
+  );
+  const scroller = useRef2(null);
   const showInstalled = installedChoice === "show";
-  const categories = useMemo3(() => categoriesOf(plugins), [plugins]);
+  const showUnsupported = unsupportedChoice === "show";
   const registries = manager.registries;
-  const registryFilter = registries.some((entry) => entry.id === registry) ? registry : null;
-  const rows = sortPlugins(
-    plugins.filter(
-      (p) => (showInstalled || !p.installed) && matchesQuery(p, query) && (category === null || p.category === category) && (registryFilter === null || p.registryId === registryFilter)
-    ),
-    sort
+  const unsupportedCount = plugins.filter(
+    (p) => p.unsupported && !p.installed
+  ).length;
+  const searched = plugins.filter(
+    (p) => (showInstalled || !p.installed) && (showUnsupported || !p.unsupported || p.installed) && matchesQuery(p, query)
   );
+  const rows = sortPlugins(applyFacets(searched, facets), sort);
+  const [page, setPage] = usePage(
+    JSON.stringify([query, facets, sort, showInstalled, showUnsupported])
+  );
+  const paged = pageOf(rows, page, Number(pageSize));
+  const goTo = (next) => {
+    setPage(next);
+    if (scroller.current) scroller.current.scrollTop = 0;
+  };
   const allInstalledHidden = !showInstalled && plugins.length > 0 && plugins.every((p) => p.installed);
   const listColumns = [
     {
       key: "name",
       header: t("plugins.manager.table.name"),
       width: "minmax(0,1.3fr)",
-      cell: (p) => /* @__PURE__ */ jsx6(NameCell, { plugin: p })
+      cell: (p) => /* @__PURE__ */ jsx6(NameCell, { plugin: p, muted: p.unsupported })
     },
     {
       key: "description",
@@ -2626,117 +2944,124 @@ function BrowseSection({
     {
       key: "actions",
       header: "",
-      width: "120px",
+      width: "150px",
       align: "end",
       cell: (p) => /* @__PURE__ */ jsx6(BrowseAction, { plugin: p, manager })
     }
   ];
-  return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col ${PANEL.gap} ${PANEL.body}`, children: [
-    /* @__PURE__ */ jsx6(
-      Toolbar,
-      {
-        query,
-        onQuery,
-        placeholder: t("plugins.manager.searchPlugins"),
-        children: /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: t("plugins.manager.showInstalled") }),
+  return /* @__PURE__ */ jsx6(
+    FilteredLayout,
+    {
+      activeCount: activeFacets(facets),
+      scrollRef: scroller,
+      rail: /* @__PURE__ */ jsxs6(
+        FilterRail,
+        {
+          rows: searched,
+          facets,
+          onFacets: setFacets,
+          registries,
+          children: [
             /* @__PURE__ */ jsx6(
-              FakeSwitch,
+              RailToggle,
               {
+                label: t("plugins.manager.showInstalled"),
                 checked: showInstalled,
                 onChange: (v) => setInstalledChoice(v ? "show" : "hide")
               }
+            ),
+            unsupportedCount > 0 && /* @__PURE__ */ jsx6(
+              RailToggle,
+              {
+                label: t("plugins.manager.showUnsupported", {
+                  count: unsupportedCount
+                }),
+                hint: t("plugins.manager.showUnsupportedHint"),
+                checked: showUnsupported,
+                onChange: (v) => setUnsupportedChoice(v ? "show" : "hide")
+              }
             )
-          ] }),
-          registries.length > 1 && /* @__PURE__ */ jsxs6(
-            Select,
-            {
-              value: registryFilter ?? "__all",
-              onValueChange: (v) => setRegistry(v === "__all" ? null : v),
-              children: [
-                /* @__PURE__ */ jsxs6(
-                  SelectTrigger,
-                  {
-                    size: "sm",
-                    className: "w-auto gap-1.5 text-xs",
-                    "aria-label": t("plugins.manager.registries.filter"),
-                    children: [
-                      /* @__PURE__ */ jsx6(Library, { className: "size-3.5 text-muted-foreground" }),
-                      /* @__PURE__ */ jsx6(SelectValue, {})
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs6(SelectContent, { children: [
-                  /* @__PURE__ */ jsx6(SelectItem, { value: "__all", className: "text-xs", children: t("plugins.manager.registries.allRegistries") }),
-                  registries.map((entry) => /* @__PURE__ */ jsx6(
-                    SelectItem,
-                    {
-                      value: entry.id,
-                      className: "text-xs",
-                      children: entry.name
-                    },
-                    entry.id
-                  ))
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx6(SortSelect, { value: sort, onChange: setSort }),
-          layoutControls
-        ] })
-      }
-    ),
-    categories.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-1", children: [null, ...categories].map((c) => /* @__PURE__ */ jsx6(
-      "button",
-      {
-        type: "button",
-        onClick: () => setCategory(c),
-        className: cn(
-          "border px-2 py-1 text-[11px] font-medium transition-colors",
-          category === c ? "border-accent-brand bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"
+          ]
+        }
+      ),
+      children: (filtersButton) => /* @__PURE__ */ jsxs6("div", { className: `flex flex-col ${PANEL.gap} ${PANEL.body}`, children: [
+        /* @__PURE__ */ jsxs6(
+          Toolbar,
+          {
+            query,
+            onQuery,
+            placeholder: t("plugins.manager.searchPlugins"),
+            children: [
+              filtersButton,
+              /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx6(SortSelect, { value: sort, onChange: setSort }),
+                layoutControls
+              ] })
+            ]
+          }
         ),
-        children: c ?? t("plugins.manager.allCategories")
-      },
-      c ?? "__all"
-    )) }),
-    rows.length === 0 ? allInstalledHidden ? /* @__PURE__ */ jsx6(
-      EmptyState,
-      {
-        icon: Puzzle,
-        title: t("plugins.manager.allInstalled"),
-        hint: t("plugins.manager.allInstalledHint")
-      }
-    ) : /* @__PURE__ */ jsx6(
-      EmptyState,
-      {
-        icon: Puzzle,
-        title: t("plugins.manager.nothingHere"),
-        hint: plugins.length === 0 ? void 0 : t("plugins.manager.nothingHereHint")
-      }
-    ) : /* @__PURE__ */ jsx6(
-      PluginCollection,
-      {
-        plugins: rows,
-        layout,
-        renderCard: (p) => /* @__PURE__ */ jsx6(
-          BrowseCard,
+        /* @__PURE__ */ jsx6(
+          ActiveFilters,
           {
-            plugin: p,
-            manager,
-            onOpen: () => onOpen(p.id)
+            facets,
+            onFacets: setFacets,
+            registries,
+            shown: rows.length
           }
         ),
-        listColumns,
-        onOpen
-      }
-    ),
-    /* @__PURE__ */ jsxs6("p", { className: "text-[11px] text-muted-foreground", children: [
-      t("plugins.manager.registries.browseHint"),
-      " ",
-      /* @__PURE__ */ jsx6(DocsLink, { core: "communityRegistry", className: "text-[11px]", children: t("plugins.manager.communitySubmit") })
-    ] })
-  ] });
+        rows.length === 0 ? allInstalledHidden ? /* @__PURE__ */ jsx6(
+          EmptyState,
+          {
+            icon: Puzzle,
+            title: t("plugins.manager.allInstalled"),
+            hint: t("plugins.manager.allInstalledHint")
+          }
+        ) : /* @__PURE__ */ jsx6(
+          EmptyState,
+          {
+            icon: Puzzle,
+            title: t("plugins.manager.nothingHere"),
+            hint: plugins.length === 0 ? void 0 : t("plugins.manager.nothingHereHint")
+          }
+        ) : /* @__PURE__ */ jsx6(
+          PluginCollection,
+          {
+            plugins: paged.items,
+            layout,
+            renderCard: (p) => /* @__PURE__ */ jsx6(
+              BrowseCard,
+              {
+                plugin: p,
+                manager,
+                onOpen: () => onOpen(p.id)
+              }
+            ),
+            listColumns,
+            onOpen
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Pager,
+          {
+            page: paged.page,
+            pages: paged.pages,
+            total: rows.length,
+            size: pageSize,
+            onPage: goTo,
+            onSize: (next) => {
+              setPageSize(next);
+              goTo(1);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs6("p", { className: "text-[11px] text-muted-foreground", children: [
+          t("plugins.manager.registries.browseHint"),
+          " ",
+          /* @__PURE__ */ jsx6(DocsLink, { core: "communityRegistry", className: "text-[11px]", children: t("plugins.manager.communitySubmit") })
+        ] })
+      ] })
+    }
+  );
 }
 function BrowseCard({
   plugin,
@@ -2750,6 +3075,7 @@ function BrowseCard({
       CardHead,
       {
         plugin,
+        muted: plugin.unsupported,
         onOpen,
         facts: /* @__PURE__ */ jsxs6(Fragment4, { children: [
           /* @__PURE__ */ jsx6(
@@ -2770,7 +3096,7 @@ function BrowseCard({
       }
     ),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 border-t border-border px-3 py-2", children: [
-      /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground", children: severe.length > 0 ? t(`plugins.capabilities.${severe[0]}.title`, {
+      /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground", children: plugin.unsupported && !plugin.installed ? "" : severe.length > 0 ? t(`plugins.capabilities.${severe[0]}.title`, {
         defaultValue: severe[0],
         nsSeparator: false
       }) : t("plugins.manager.noServerAccess") }),
@@ -2794,7 +3120,14 @@ function BrowseAction({
         plugin.installed ? /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1 text-[11px] font-medium text-accent-brand", children: [
           /* @__PURE__ */ jsx6(Check, { className: "size-3" }),
           t("plugins.manager.installedBadge")
-        ] }) : /* @__PURE__ */ jsx6(
+        ] }) : plugin.unsupported ? /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "shrink-0 text-[11px] text-muted-foreground",
+            title: t("plugins.manager.unsupportedHint"),
+            children: plugin.needsTermix ? t("plugins.manager.needsTermix", { range: plugin.needsTermix }) : t("plugins.manager.unsupported")
+          }
+        ) : /* @__PURE__ */ jsx6(
           Button,
           {
             variant: "outline",