@opengeni/react 6.0.0-canary.1 → 6.1.0-canary.0

package/dist/connect.js

@@ -1,7 +1,7 @@
 import "./chunk-IWIDV7SB.js";
 import {
   Markdown
-} from "./chunk-IHQII5WO.js";
+} from "./chunk-G5JFM6ZE.js";
 import {
   copyTextToClipboard
 } from "./chunk-JVYQRRC4.js";
@@ -12,15 +12,117 @@ import "./chunk-22KP6LR5.js";
 // src/connect.ts
 import { useMemo, useSyncExternalStore } from "react";
 
+// src/capability-catalog-row.tsx
+import { AlertTriangleIcon, CheckIcon, Loader2Icon, PlusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var labels = {
+  available: "Available to add",
+  added: "Added",
+  attention: "Needs attention",
+  unavailable: "Unavailable",
+  loading: "Working"
+};
+function CapabilityCatalogIndicator({
+  status = "available",
+  label,
+  showLabel = false
+}) {
+  const Icon = status === "added" ? CheckIcon : status === "attention" || status === "unavailable" ? AlertTriangleIcon : status === "loading" ? Loader2Icon : PlusIcon;
+  return /* @__PURE__ */ jsxs("span", { className: "og-capability-catalog-indicator", "data-status": status, children: [
+    /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: showLabel || status === "attention" || status === "unavailable" ? "og-capability-catalog-notice" : "og-capability-catalog-sr-only",
+        children: label ?? labels[status]
+      }
+    )
+  ] });
+}
+function CapabilityCatalogRow({
+  name,
+  description,
+  icon,
+  status = "available",
+  statusLabel,
+  showStatusLabel = false,
+  onOpen,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      type: "button",
+      className: `og-capability-catalog-row ${className}`,
+      onClick: onOpen,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "og-capability-catalog-icon", children: icon }) : null,
+        /* @__PURE__ */ jsxs("span", { className: "og-capability-catalog-copy", children: [
+          /* @__PURE__ */ jsx("strong", { children: name }),
+          description ? /* @__PURE__ */ jsx("span", { children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(CapabilityCatalogIndicator, { status, label: statusLabel, showLabel: showStatusLabel })
+      ]
+    }
+  );
+}
+
 // src/skill-discovery.tsx
 import { useEffect, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/discovery-cache.ts
+function createDiscoveryCache(ttlMs = 6e4, capacity = 64) {
+  const clients = /* @__PURE__ */ new WeakMap();
+  return {
+    peek(client, key) {
+      const entry = clients.get(client)?.get(key);
+      return entry && entry.expires > Date.now() ? entry.value : void 0;
+    },
+    read(client, key, fetch) {
+      let entries = clients.get(client);
+      if (!entries) {
+        entries = /* @__PURE__ */ new Map();
+        clients.set(client, entries);
+      }
+      const existing = entries.get(key);
+      if (existing && existing.expires > Date.now()) return existing.pending;
+      entries.delete(key);
+      while (entries.size >= capacity) entries.delete(entries.keys().next().value);
+      const entry = {
+        expires: Date.now() + ttlMs,
+        value: void 0,
+        pending: Promise.resolve().then(fetch)
+      };
+      entries.set(key, entry);
+      entry.pending = entry.pending.then(
+        (value) => {
+          entry.value = value;
+          entry.expires = Date.now() + ttlMs;
+          return value;
+        },
+        (error) => {
+          if (entries.get(key) === entry) entries.delete(key);
+          throw error;
+        }
+      );
+      return entry.pending;
+    }
+  };
+}
+
+// src/skill-discovery.tsx
+import { BookOpenIcon } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var discoveryCache = createDiscoveryCache();
 function SkillDiscovery(props) {
   const query = props.query.trim();
-  return /* @__PURE__ */ jsxs("section", { className: "og-skill-discovery", "aria-label": "Discover skills", children: [
-    /* @__PURE__ */ jsxs("header", { children: [
-      /* @__PURE__ */ jsx("h3", { children: "Discover skills" }),
-      /* @__PURE__ */ jsx(
+  const discoveryQuery = query || "agent";
+  return /* @__PURE__ */ jsxs2("section", { className: "og-skill-discovery", "aria-label": "Discover skills", children: [
+    /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsx2("h3", { children: props.resultLimit ? "Skills" : query ? "Search skills" : "Browse skills" }),
+      !props.resultLimit ? /* @__PURE__ */ jsx2(
         "a",
         {
           href: "https://skills.sh/",
@@ -29,12 +131,20 @@ function SkillDiscovery(props) {
           className: "og-skill-discovery-browse",
           children: "Browse skills.sh \u2197"
         }
-      )
+      ) : null
     ] }),
-    !query && props.onSearch ? /* @__PURE__ */ jsx("button", { type: "button", className: "og-skill-discovery-search", onClick: props.onSearch, children: "Search skills" }) : null,
-    /* @__PURE__ */ jsx(DiscoveryResults, { ...props, query }, `${props.workspaceId}:${query}`)
+    !query ? /* @__PURE__ */ jsx2("p", { children: "Agent skills from skills.sh. Search above for another topic." }) : query.length < 2 ? /* @__PURE__ */ jsx2("p", { children: "Enter at least two characters to search skills.sh." }) : null,
+    /* @__PURE__ */ jsx2(
+      DiscoveryResults,
+      {
+        ...props,
+        query: discoveryQuery
+      },
+      `${props.workspaceId}:${discoveryQuery}`
+    )
   ] });
 }
+var EMPTY_LOCAL_SKILLS = [];
 var EMPTY_INSTALLED_SKILLS = [];
 function DiscoveryResults({
   client,
@@ -42,21 +152,31 @@ function DiscoveryResults({
   query,
   canManage,
   onImport,
+  resultLimit,
+  onShowMore,
+  localSkills = EMPTY_LOCAL_SKILLS,
   installedSkills = EMPTY_INSTALLED_SKILLS
 }) {
-  const [result, setResult] = useState(null);
-  const [loading, setLoading] = useState(query.length >= 2);
+  const cacheKey = JSON.stringify([workspaceId, query]);
+  const cached = discoveryCache.peek(client, cacheKey);
+  const [result, setResult] = useState(cached ?? null);
+  const [loading, setLoading] = useState(query.length >= 2 && !cached);
   const [error, setError] = useState(false);
   const [retry, setRetry] = useState(0);
   useEffect(() => {
     let active = true;
     setError(false);
     if (query.length < 2) return;
-    setLoading(true);
+    const existing = discoveryCache.peek(client, cacheKey);
+    setLoading(!existing);
     let timer;
     const search = async (attempt) => {
       try {
-        const data = await client.searchPublicSkills(workspaceId, query);
+        const data = await discoveryCache.read(
+          client,
+          cacheKey,
+          () => client.searchPublicSkills(workspaceId, query)
+        );
         if (!active) return;
         setResult(data);
         setLoading(false);
@@ -72,54 +192,64 @@ function DiscoveryResults({
         setLoading(false);
       }
     };
-    timer = setTimeout(() => void search(0), 300);
+    timer = setTimeout(() => void search(0), existing ? 0 : 300);
     return () => {
       active = false;
       clearTimeout(timer);
     };
-  }, [client, workspaceId, query, retry]);
-  return /* @__PURE__ */ jsxs("div", { "aria-busy": loading, children: [
-    /* @__PURE__ */ jsx("div", { className: "og-skill-discovery-grid", children: result?.items.map((skill) => {
-      const installed = installedSkills.some(
-        (entry) => entry.sourceUrl.replace(/\/$/, "").toLowerCase() === skill.url.toLowerCase() || entry.repositoryUrl.replace(/\/$/, "").toLowerCase() === `https://github.com/${skill.source}`.toLowerCase() && entry.name.toLowerCase() === skill.name.toLowerCase()
-      );
-      return /* @__PURE__ */ jsxs(
-        "button",
+  }, [client, workspaceId, query, cacheKey, retry]);
+  const remoteSkills = result?.items.filter(
+    (skill) => !localSkills.some((local) => local.name.toLowerCase() === skill.name.toLowerCase())
+  ) ?? [];
+  return /* @__PURE__ */ jsxs2("div", { "aria-busy": loading, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "og-skill-discovery-grid", children: [
+      localSkills.slice(0, resultLimit).map((skill) => /* @__PURE__ */ jsx2(
+        CapabilityCatalogRow,
         {
-          type: "button",
-          className: "og-skill-discovery-item",
-          disabled: !canManage,
-          onClick: () => onImport(skill.url),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "og-skill-discovery-copy", children: [
-              /* @__PURE__ */ jsx("strong", { children: skill.name }),
-              /* @__PURE__ */ jsx("span", { children: skill.source }),
-              /* @__PURE__ */ jsxs("small", { children: [
-                skill.installs.toLocaleString(),
-                " installs"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "og-skill-discovery-action", children: installed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713 " }),
-              "Installed"
-            ] }) : !canManage ? "Admin required" : "Preview \u2192" })
-          ]
+          name: skill.name,
+          description: skill.description,
+          icon: /* @__PURE__ */ jsx2(BookOpenIcon, { "aria-hidden": "true" }),
+          status: skill.status ?? "added",
+          statusLabel: skill.statusLabel,
+          onOpen: skill.onOpen
         },
         skill.id
-      );
-    }) }),
-    loading ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading skills\u2026" }) : null,
-    error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "og-skill-discovery-error", children: [
+      )),
+      remoteSkills.slice(
+        0,
+        resultLimit === void 0 ? void 0 : Math.max(0, resultLimit - localSkills.length)
+      ).map((skill) => {
+        const installed = installedSkills.some(
+          (entry) => entry.sourceUrl.replace(/\/$/, "").toLowerCase() === skill.url.toLowerCase() || entry.repositoryUrl.replace(/\/$/, "").toLowerCase() === `https://github.com/${skill.source}`.toLowerCase() && entry.name.toLowerCase() === skill.name.toLowerCase()
+        );
+        return /* @__PURE__ */ jsx2(
+          CapabilityCatalogRow,
+          {
+            disabled: !canManage,
+            name: skill.name,
+            description: skill.source,
+            icon: /* @__PURE__ */ jsx2(BookOpenIcon, { "aria-hidden": "true" }),
+            status: !canManage ? "unavailable" : installed ? "added" : "available",
+            statusLabel: !canManage ? "Admin required" : installed ? "Installed" : "Available to add",
+            onOpen: () => onImport(skill.url)
+          },
+          skill.id
+        );
+      })
+    ] }),
+    resultLimit && remoteSkills.length + localSkills.length > resultLimit && !loading ? /* @__PURE__ */ jsx2("button", { className: "og-catalog-more", type: "button", onClick: onShowMore, children: "View all skills" }) : null,
+    loading ? /* @__PURE__ */ jsx2("p", { role: "status", children: "Loading skills\u2026" }) : null,
+    error ? /* @__PURE__ */ jsxs2("div", { role: "alert", className: "og-skill-discovery-error", children: [
       "Could not load skills.",
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setRetry((value) => value + 1), children: "Retry" })
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setRetry((value) => value + 1), children: "Retry" })
     ] }) : null,
-    result && !result.items.length && !loading && !error ? /* @__PURE__ */ jsx("p", { role: "status", children: "No skills found. Try a different search." }) : null
+    result && !remoteSkills.length && !localSkills.length && !loading && !error ? /* @__PURE__ */ jsx2("p", { role: "status", children: "No skills found. Try a different search." }) : null
   ] });
 }
 
 // src/connect-setup.tsx
 import { useState as useState2 } from "react";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var setupStatus = {
   ready: "Ready to connect",
   requires_user_action: "Authorize your account",
@@ -152,9 +282,15 @@ function ConnectSetup(props) {
     setScope(props.controller);
     setGeneration(generation + 1);
   }
-  return /* @__PURE__ */ jsx2(ScopedSetup, { ...props }, generation);
+  return /* @__PURE__ */ jsx3(ScopedSetup, { ...props }, generation);
 }
-function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }) {
+function ScopedSetup({
+  controller,
+  onAuthorize,
+  onBrowseResources,
+  className,
+  authorizeLabel = "Authorize connection"
+}) {
   const view = useConnect(controller);
   const [localError, setLocalError] = useState2(false);
   const invoke = (operation) => {
@@ -167,7 +303,14 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
   };
   const attempt = view.attempt;
   if (!attempt)
-    return /* @__PURE__ */ jsx2("section", { className, "aria-label": "Connection setup", children: /* @__PURE__ */ jsx2("p", { role: "status", children: "Choose a connection to begin." }) });
+    return /* @__PURE__ */ jsx3(
+      "section",
+      {
+        className: ["og-connect-setup", className].filter(Boolean).join(" "),
+        "aria-label": "Connection setup",
+        children: /* @__PURE__ */ jsx3("p", { role: "status", children: "Choose a connection to begin." })
+      }
+    );
   const action = attempt.nextAction;
   const verificationUrl = deviceVerificationUrl(action);
   const terminal = ["complete", "cancelled", "expired"].includes(attempt.state);
@@ -206,173 +349,198 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
       );
     }
   };
-  return /* @__PURE__ */ jsxs2("section", { className, "aria-label": "Connection setup", "aria-busy": view.busy, children: [
-    /* @__PURE__ */ jsxs2("p", { children: [
-      "Ownership: ",
-      attempt.ownership === "personal" ? "Personal" : "Workspace"
-    ] }),
-    /* @__PURE__ */ jsx2("p", { role: "status", children: setupStatus[attempt.state] }),
-    attempt.account && /* @__PURE__ */ jsxs2("p", { children: [
-      "Account: ",
-      attempt.account.label
-    ] }),
-    (localError || view.error || attempt.error) && /* @__PURE__ */ jsx2("p", { role: "alert", children: attempt.error?.code === "source_changed" ? "The integration source changed. Review the new operations before installing." : "Connection setup could not continue. Refresh its status before trying again." }),
-    !terminal && /* @__PURE__ */ jsx2("form", { onSubmit: submit, autoComplete: "off", children: /* @__PURE__ */ jsxs2("fieldset", { disabled: view.busy, children: [
-      /* @__PURE__ */ jsx2("legend", { children: "Connection details" }),
-      attempt.state === "connected_but_incomplete" && action.type === "none" && /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: () => invoke(() => view.advance({ type: "retry" }, crypto.randomUUID())),
-          children: "Review integration operations"
-        }
-      ),
-      action.type === "credentials" && action.fields.map((field, i) => /* @__PURE__ */ jsxs2("label", { children: [
-        field.label,
-        field.options ? /* @__PURE__ */ jsxs2("select", { name: `field-${i}`, required: field.required, defaultValue: "", children: [
-          /* @__PURE__ */ jsx2("option", { value: "", children: field.required ? "Choose an option" : "No account (public service)" }),
-          field.options.map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, children: option.label }, option.value))
-        ] }) : /* @__PURE__ */ jsx2(
-          "input",
-          {
-            name: `field-${i}`,
-            type: field.secret ? "password" : "text",
-            required: field.required,
-            autoComplete: "off"
-          }
-        )
-      ] }, field.name)),
-      action.type === "select_account" && /* @__PURE__ */ jsxs2("label", { children: [
-        "Account",
-        /* @__PURE__ */ jsxs2("select", { name: "account", required: true, defaultValue: "", children: [
-          /* @__PURE__ */ jsx2("option", { value: "", disabled: true, children: "Choose an account" }),
-          action.accounts.map((account) => /* @__PURE__ */ jsxs2(
-            "option",
-            {
-              value: account.id,
-              disabled: account.status === "disabled",
-              children: [
-                account.label,
-                " \u2014 ",
-                account.id,
-                " (",
-                account.ownership,
-                ")"
-              ]
-            },
-            account.id
-          ))
-        ] })
-      ] }),
-      action.type === "select_resources" && action.resources.map((resource) => /* @__PURE__ */ jsxs2("label", { children: [
-        /* @__PURE__ */ jsx2("input", { type: "checkbox", name: "resource", value: resource.id }),
-        resource.label,
-        " (",
-        resource.kind,
-        ")"
-      ] }, resource.id)),
-      action.type === "select_resources" && action.cursor && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsx2("p", { children: "More resources are available. Review all pages before submitting a selection." }),
-        onBrowseResources && /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: () => invoke(() => onBrowseResources(structuredClone(attempt))),
-            children: "Browse all resources"
-          }
-        )
-      ] }),
-      action.type === "preview" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsx2("p", { children: "Select the operations to install." }),
-        action.operations.map((operation) => /* @__PURE__ */ jsxs2("label", { children: [
-          /* @__PURE__ */ jsx2("input", { type: "checkbox", name: "operation", value: operation.id }),
-          operation.label,
-          " (",
-          operation.kind,
-          ")"
-        ] }, operation.id))
-      ] }),
-      ["credentials", "select_account", "select_resources", "preview"].includes(
-        action.type
-      ) && /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "submit",
-          disabled: action.type === "select_resources" && Boolean(action.cursor),
-          children: action.type === "preview" ? "Install selected operations" : "Continue"
-        }
-      ),
-      action.type === "authorize" && /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: () => invoke(() => onAuthorize(structuredClone(attempt))),
-          children: "Authorize connection"
-        }
-      ),
-      action.type === "wait" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        action.userCode && /* @__PURE__ */ jsxs2("p", { children: [
-          "Verification code: ",
-          /* @__PURE__ */ jsx2("code", { children: action.userCode })
+  return /* @__PURE__ */ jsxs3(
+    "section",
+    {
+      className: ["og-connect-setup", className].filter(Boolean).join(" "),
+      "aria-label": "Connection setup",
+      "aria-busy": view.busy,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "og-connect-setup-summary", children: [
+          /* @__PURE__ */ jsx3("p", { className: "og-connect-setup-scope", children: attempt.ownership === "personal" ? "Personal connection" : "Workspace connection" }),
+          /* @__PURE__ */ jsx3("p", { role: "status", className: "og-connect-setup-status", children: setupStatus[attempt.state] }),
+          /* @__PURE__ */ jsx3("p", { className: "og-connect-setup-description", children: attempt.ownership === "personal" ? "Only your work can use this connection." : "Work in this workspace can use this connection." })
         ] }),
-        /* @__PURE__ */ jsx2("p", { children: "Complete provider authorization, then check the connection status." }),
-        verificationUrl && /* @__PURE__ */ jsx2("a", { href: verificationUrl, target: "_blank", rel: "noopener noreferrer", children: "Open provider verification page (new tab)" })
-      ] }),
-      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => invoke(() => view.refresh()), children: "Check status" }),
-      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => invoke(() => view.cancel(crypto.randomUUID())), children: "Cancel setup" })
-    ] }) }, `${attempt.id}:${attempt.revision}`)
-  ] });
+        attempt.account && /* @__PURE__ */ jsxs3("p", { children: [
+          "Account: ",
+          attempt.account.label
+        ] }),
+        (localError || view.error || attempt.error) && /* @__PURE__ */ jsx3("p", { role: "alert", children: attempt.error?.code === "source_changed" ? "The integration source changed. Review the new operations before installing." : "Connection setup could not continue. Refresh its status before trying again." }),
+        !terminal && /* @__PURE__ */ jsx3("form", { onSubmit: submit, autoComplete: "off", children: /* @__PURE__ */ jsxs3("fieldset", { disabled: view.busy, children: [
+          ["credentials", "select_account", "select_resources", "preview"].includes(
+            action.type
+          ) ? /* @__PURE__ */ jsx3("legend", { children: "Connection details" }) : null,
+          attempt.state === "connected_but_incomplete" && action.type === "none" && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "og-connect-setup-primary",
+              onClick: () => invoke(() => view.advance({ type: "retry" }, crypto.randomUUID())),
+              children: "Review integration operations"
+            }
+          ),
+          action.type === "credentials" && action.fields.map((field, i) => /* @__PURE__ */ jsxs3("label", { children: [
+            field.label,
+            field.options ? /* @__PURE__ */ jsxs3("select", { name: `field-${i}`, required: field.required, defaultValue: "", children: [
+              /* @__PURE__ */ jsx3("option", { value: "", children: field.required ? "Choose an option" : "No account (public service)" }),
+              field.options.map((option) => /* @__PURE__ */ jsx3("option", { value: option.value, children: option.label }, option.value))
+            ] }) : /* @__PURE__ */ jsx3(
+              "input",
+              {
+                name: `field-${i}`,
+                type: field.secret ? "password" : "text",
+                required: field.required,
+                autoComplete: "off"
+              }
+            )
+          ] }, field.name)),
+          action.type === "select_account" && /* @__PURE__ */ jsxs3("label", { children: [
+            "Account",
+            /* @__PURE__ */ jsxs3("select", { name: "account", required: true, defaultValue: "", children: [
+              /* @__PURE__ */ jsx3("option", { value: "", disabled: true, children: "Choose an account" }),
+              action.accounts.map((account) => /* @__PURE__ */ jsxs3(
+                "option",
+                {
+                  value: account.id,
+                  disabled: account.status === "disabled",
+                  children: [
+                    account.label,
+                    " \u2014 ",
+                    account.id,
+                    " (",
+                    account.ownership,
+                    ")"
+                  ]
+                },
+                account.id
+              ))
+            ] })
+          ] }),
+          action.type === "select_resources" && action.resources.map((resource) => /* @__PURE__ */ jsxs3("label", { children: [
+            /* @__PURE__ */ jsx3("input", { type: "checkbox", name: "resource", value: resource.id }),
+            resource.label,
+            " (",
+            resource.kind,
+            ")"
+          ] }, resource.id)),
+          action.type === "select_resources" && action.cursor && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx3("p", { children: "More resources are available. Review all pages before submitting a selection." }),
+            onBrowseResources && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: () => invoke(() => onBrowseResources(structuredClone(attempt))),
+                children: "Browse all resources"
+              }
+            )
+          ] }),
+          action.type === "preview" && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx3("p", { children: "Select the operations to install." }),
+            action.operations.map((operation) => /* @__PURE__ */ jsxs3("label", { children: [
+              /* @__PURE__ */ jsx3("input", { type: "checkbox", name: "operation", value: operation.id }),
+              operation.label,
+              " (",
+              operation.kind,
+              ")"
+            ] }, operation.id))
+          ] }),
+          ["credentials", "select_account", "select_resources", "preview"].includes(
+            action.type
+          ) && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "submit",
+              className: "og-connect-setup-primary",
+              disabled: action.type === "select_resources" && Boolean(action.cursor),
+              children: action.type === "preview" ? "Install selected operations" : "Continue"
+            }
+          ),
+          action.type === "authorize" && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "og-connect-setup-primary",
+              onClick: () => invoke(() => onAuthorize(structuredClone(attempt))),
+              children: authorizeLabel
+            }
+          ),
+          action.type === "wait" && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            action.userCode && /* @__PURE__ */ jsxs3("p", { children: [
+              "Verification code: ",
+              /* @__PURE__ */ jsx3("code", { children: action.userCode })
+            ] }),
+            /* @__PURE__ */ jsx3("p", { children: "Complete provider authorization, then check the connection status." }),
+            verificationUrl && /* @__PURE__ */ jsx3("a", { href: verificationUrl, target: "_blank", rel: "noopener noreferrer", children: "Open provider verification page (new tab)" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "og-connect-setup-secondary", children: [
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => invoke(() => view.refresh()), children: "Check status" }),
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => invoke(() => view.cancel(crypto.randomUUID())), children: "Cancel setup" })
+          ] })
+        ] }) }, `${attempt.id}:${attempt.revision}`)
+      ]
+    }
+  );
 }
 
 // src/connection-catalog.tsx
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ConnectionDetailsIndicator() {
-  return /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "og-connection-group-chevron", children: "\u203A" });
-}
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ConnectionOptionRow({ option }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "og-connection-catalog-action-row og-connection-option", children: [
-    /* @__PURE__ */ jsxs3("button", { type: "button", className: "og-connection-catalog-row", onClick: option.onOpen, children: [
-      /* @__PURE__ */ jsxs3("span", { className: "og-connection-catalog-copy", children: [
-        /* @__PURE__ */ jsx3("strong", { children: option.name }),
-        /* @__PURE__ */ jsx3("span", { children: option.description })
-      ] }),
-      /* @__PURE__ */ jsx3("span", { className: "og-connection-catalog-status", children: option.status }),
-      !option.action ? /* @__PURE__ */ jsx3(ConnectionDetailsIndicator, {}) : null
-    ] }),
-    option.action ? /* @__PURE__ */ jsx3("span", { className: "og-connection-option-action", children: option.action }) : null
+  return /* @__PURE__ */ jsxs4("div", { className: "og-connection-catalog-action-row og-connection-option", children: [
+    /* @__PURE__ */ jsx4(
+      CapabilityCatalogRow,
+      {
+        name: option.name,
+        description: option.description,
+        status: option.state ?? (option.connected ? "added" : "available"),
+        statusLabel: option.status,
+        showStatusLabel: option.state === void 0,
+        onOpen: option.onOpen
+      }
+    ),
+    option.action ? /* @__PURE__ */ jsx4("span", { className: "og-connection-option-action", children: option.action }) : null
   ] });
 }
 function ConnectionServiceRow({ service }) {
   if (!service.options.length) return null;
   const connected = service.options.filter((option) => option.connected).length;
-  const identity = /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx3("span", { className: "og-connection-catalog-logo", children: service.logo }),
-    /* @__PURE__ */ jsxs3("span", { className: "og-connection-catalog-copy", children: [
-      /* @__PURE__ */ jsx3("strong", { children: service.name }),
-      /* @__PURE__ */ jsx3("span", { children: service.options.length === 1 ? service.options[0]?.description : service.options.map((option) => option.name).join(" \xB7 ") })
+  const attention = service.options.find(
+    (option) => option.state === "attention" || option.state === "unavailable"
+  );
+  const groupState = attention?.state ?? (service.options.some((option) => option.state === "loading") ? "loading" : connected === service.options.length ? "added" : "available");
+  const identity = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("span", { className: "og-capability-catalog-icon", children: service.logo }),
+    /* @__PURE__ */ jsxs4("span", { className: "og-capability-catalog-copy", children: [
+      /* @__PURE__ */ jsx4("strong", { children: service.name }),
+      /* @__PURE__ */ jsx4("span", { children: service.options.length === 1 ? service.options[0]?.description : service.options.map((option) => option.name).join(" \xB7 ") })
     ] }),
-    /* @__PURE__ */ jsx3("span", { className: "og-connection-catalog-status", children: service.options.length === 1 ? service.options[0]?.status : `${connected} of ${service.options.length} connected` })
+    /* @__PURE__ */ jsx4(
+      CapabilityCatalogIndicator,
+      {
+        status: groupState,
+        label: attention?.status ?? `${connected} of ${service.options.length} added`
+      }
+    )
   ] });
-  return service.options.length === 1 ? /* @__PURE__ */ jsxs3("div", { className: "og-connection-catalog-action-row", children: [
-    /* @__PURE__ */ jsxs3(
-      "button",
+  return service.options.length === 1 ? /* @__PURE__ */ jsxs4("div", { className: "og-connection-catalog-action-row", children: [
+    /* @__PURE__ */ jsx4(
+      CapabilityCatalogRow,
       {
-        type: "button",
-        className: "og-connection-catalog-row",
-        onClick: service.options[0].onOpen,
-        children: [
-          identity,
-          !service.options[0]?.action ? /* @__PURE__ */ jsx3(ConnectionDetailsIndicator, {}) : null
-        ]
+        name: service.name,
+        description: service.options[0].description,
+        icon: service.logo,
+        status: service.options[0].state ?? (connected ? "added" : "available"),
+        statusLabel: service.options[0].status,
+        showStatusLabel: service.options[0].state === void 0,
+        onOpen: service.options[0].onOpen
       }
     ),
     service.options[0]?.action
-  ] }) : /* @__PURE__ */ jsxs3("details", { className: "og-connection-catalog-service", children: [
-    /* @__PURE__ */ jsxs3("summary", { className: "og-connection-catalog-row", children: [
+  ] }) : /* @__PURE__ */ jsxs4("details", { className: "og-connection-catalog-service", children: [
+    /* @__PURE__ */ jsxs4("summary", { className: "og-capability-catalog-row", children: [
       identity,
-      /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "og-connection-group-chevron", children: "\u2304" })
+      /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "og-connection-group-chevron", children: "\u2304" })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "og-connection-catalog-options", children: service.options.map((option) => /* @__PURE__ */ jsx3(ConnectionOptionRow, { option }, option.id)) })
+    /* @__PURE__ */ jsx4("div", { className: "og-connection-catalog-options", children: service.options.map((option) => /* @__PURE__ */ jsx4(ConnectionOptionRow, { option }, option.id)) })
   ] });
 }
 function ConnectionCatalog({
@@ -380,6 +548,8 @@ function ConnectionCatalog({
   query = "",
   columns = 1,
   grouped = true,
+  resultLimit,
+  onShowMore,
   className = "",
   emptyMessage = "No connections match your search."
 }) {
@@ -395,12 +565,15 @@ function ConnectionCatalog({
   const visible = entries.filter(
     (service) => [service.name, ...service.options.flatMap((option) => [option.name, option.description ?? ""])].join(" ").toLowerCase().includes(search)
   );
-  return /* @__PURE__ */ jsx3("div", { className: `og-connection-catalog ${className}`, "data-columns": columns, children: visible.length ? visible.map((service) => /* @__PURE__ */ jsx3(ConnectionServiceRow, { service }, service.id)) : /* @__PURE__ */ jsx3("p", { role: "status", children: emptyMessage }) });
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("div", { className: `og-connection-catalog ${className}`, "data-columns": columns, children: visible.length ? visible.slice(0, resultLimit).map((service) => /* @__PURE__ */ jsx4(ConnectionServiceRow, { service }, service.id)) : /* @__PURE__ */ jsx4("p", { role: "status", children: emptyMessage }) }),
+    resultLimit && visible.length > resultLimit ? /* @__PURE__ */ jsx4("button", { className: "og-catalog-more", type: "button", onClick: onShowMore, children: "View all connections" }) : null
+  ] });
 }
 
 // src/connect-chooser.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ConnectChooser(props) {
   const [scope, setScope] = useState3(props.controller);
   const [generation, setGeneration] = useState3(0);
@@ -408,7 +581,7 @@ function ConnectChooser(props) {
     setScope(props.controller);
     setGeneration(generation + 1);
   }
-  return /* @__PURE__ */ jsx4(ScopedChooser, { ...props }, generation);
+  return /* @__PURE__ */ jsx5(ScopedChooser, { ...props }, generation);
 }
 function ScopedChooser({
   controller,
@@ -451,22 +624,22 @@ function ScopedChooser({
       setFailed(true);
     }
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "section",
     {
       className,
       "aria-label": "Choose a connection",
       "aria-busy": view.busy || !catalog && !failed,
       children: [
-        failed && /* @__PURE__ */ jsx4("p", { role: "alert", children: "Connections could not be loaded or started. Check setup status before retrying." }),
-        !catalog && !failed && /* @__PURE__ */ jsx4("p", { role: "status", children: "Loading connections\u2026" }),
-        catalog?.length === 0 && /* @__PURE__ */ jsx4("p", { role: "status", children: "No connections are available." }),
-        Boolean(catalog?.length) && /* @__PURE__ */ jsx4("form", { onSubmit: submit, children: /* @__PURE__ */ jsxs4("fieldset", { disabled: view.busy, children: [
-          /* @__PURE__ */ jsx4("legend", { children: "Provider and ownership" }),
-          presentation === "catalog" && !provider ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
-            /* @__PURE__ */ jsxs4("label", { children: [
+        failed && /* @__PURE__ */ jsx5("p", { role: "alert", children: "Connections could not be loaded or started. Check setup status before retrying." }),
+        !catalog && !failed && /* @__PURE__ */ jsx5("p", { role: "status", children: "Loading connections\u2026" }),
+        catalog?.length === 0 && /* @__PURE__ */ jsx5("p", { role: "status", children: "No connections are available." }),
+        Boolean(catalog?.length) && /* @__PURE__ */ jsx5("form", { onSubmit: submit, children: /* @__PURE__ */ jsxs5("fieldset", { disabled: view.busy, children: [
+          /* @__PURE__ */ jsx5("legend", { children: "Provider and ownership" }),
+          presentation === "catalog" && !provider ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsxs5("label", { children: [
               "Search connections",
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "search",
@@ -475,7 +648,7 @@ function ScopedChooser({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               ConnectionCatalog,
               {
                 query,
@@ -501,7 +674,7 @@ function ScopedChooser({
               }
             )
           ] }) : null,
-          presentation === "catalog" && provider ? /* @__PURE__ */ jsx4(
+          presentation === "catalog" && provider ? /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -512,9 +685,9 @@ function ScopedChooser({
               children: "Back to connections"
             }
           ) : null,
-          /* @__PURE__ */ jsxs4("label", { hidden: presentation === "catalog", children: [
+          /* @__PURE__ */ jsxs5("label", { hidden: presentation === "catalog", children: [
             "Provider",
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "select",
               {
                 required: true,
@@ -524,8 +697,8 @@ function ScopedChooser({
                   setOwnership("");
                 },
                 children: [
-                  /* @__PURE__ */ jsx4("option", { value: "", disabled: true, children: "Choose a provider" }),
-                  catalog.map((entry) => /* @__PURE__ */ jsxs4(
+                  /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: "Choose a provider" }),
+                  catalog.map((entry) => /* @__PURE__ */ jsxs5(
                     "option",
                     {
                       value: entry.id,
@@ -545,25 +718,25 @@ function ScopedChooser({
               }
             )
           ] }),
-          provider && /* @__PURE__ */ jsxs4(Fragment4, { children: [
-            /* @__PURE__ */ jsx4("strong", { children: presentation === "catalog" ? provider.label : null }),
-            /* @__PURE__ */ jsxs4("label", { children: [
+          provider && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsx5("strong", { children: presentation === "catalog" ? provider.label : null }),
+            /* @__PURE__ */ jsxs5("label", { children: [
               "Ownership",
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs5(
                 "select",
                 {
                   required: true,
                   value: ownership,
                   onChange: (event) => setOwnership(event.target.value),
                   children: [
-                    /* @__PURE__ */ jsx4("option", { value: "", disabled: true, children: "Choose ownership" }),
-                    provider.ownership.map((choice) => /* @__PURE__ */ jsx4("option", { value: choice, children: choice === "personal" ? "Personal \u2014 owned by you" : "Workspace \u2014 shared connection" }, choice))
+                    /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: "Choose ownership" }),
+                    provider.ownership.map((choice) => /* @__PURE__ */ jsx5("option", { value: choice, children: choice === "personal" ? "Personal \u2014 owned by you" : "Workspace \u2014 shared connection" }, choice))
                   ]
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               hidden: presentation === "catalog" && !provider,
@@ -573,7 +746,7 @@ function ScopedChooser({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx4("button", { type: "button", disabled: view.busy, onClick: () => setLoad(load + 1), children: "Reload providers" })
+        /* @__PURE__ */ jsx5("button", { type: "button", disabled: view.busy, onClick: () => setLoad(load + 1), children: "Reload providers" })
       ]
     }
   );
@@ -581,7 +754,7 @@ function ScopedChooser({
 
 // src/connect-accounts.tsx
 import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ConnectAccounts(props) {
   const [scope, setScope] = useState4(props.controller);
   const [generation, setGeneration] = useState4(0);
@@ -589,7 +762,7 @@ function ConnectAccounts(props) {
     setScope(props.controller);
     setGeneration(generation + 1);
   }
-  return /* @__PURE__ */ jsx5(ScopedAccounts, { ...props }, generation);
+  return /* @__PURE__ */ jsx6(ScopedAccounts, { ...props }, generation);
 }
 function ScopedAccounts({ controller, className, returnUrl }) {
   const view = useConnect(controller);
@@ -657,18 +830,18 @@ function ScopedAccounts({ controller, className, returnUrl }) {
       setError(true);
     }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "section",
     {
       className,
       "aria-label": "Connected accounts",
       "aria-busy": busy || view.busy || !accounts && !error,
       children: [
-        error && /* @__PURE__ */ jsx5("p", { role: "alert", children: "Account state could not be confirmed. Reload before trying again." }),
-        !accounts && !error && /* @__PURE__ */ jsx5("p", { role: "status", children: "Loading accounts\u2026" }),
-        accounts?.length === 0 && /* @__PURE__ */ jsx5("p", { role: "status", children: "No connected accounts." }),
-        accounts && accounts.length > 0 && /* @__PURE__ */ jsx5("ul", { children: accounts.map((account) => /* @__PURE__ */ jsxs5("li", { children: [
-          /* @__PURE__ */ jsxs5("span", { children: [
+        error && /* @__PURE__ */ jsx6("p", { role: "alert", children: "Account state could not be confirmed. Reload before trying again." }),
+        !accounts && !error && /* @__PURE__ */ jsx6("p", { role: "status", children: "Loading accounts\u2026" }),
+        accounts?.length === 0 && /* @__PURE__ */ jsx6("p", { role: "status", children: "No connected accounts." }),
+        accounts && accounts.length > 0 && /* @__PURE__ */ jsx6("ul", { children: accounts.map((account) => /* @__PURE__ */ jsxs6("li", { children: [
+          /* @__PURE__ */ jsxs6("span", { children: [
             account.label,
             " \u2014 ",
             account.providerId,
@@ -678,7 +851,7 @@ function ScopedAccounts({ controller, className, returnUrl }) {
             " ",
             account.status.replaceAll("_", " ")
           ] }),
-          returnUrl && /* @__PURE__ */ jsxs5(
+          returnUrl && /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -690,9 +863,9 @@ function ScopedAccounts({ controller, className, returnUrl }) {
               ]
             }
           ),
-          selected === `${account.providerId}:${account.id}` ? /* @__PURE__ */ jsxs5("div", { role: "group", "aria-label": `Disconnect ${account.label}`, children: [
-            /* @__PURE__ */ jsx5("p", { children: "This removes local OpenGeni access. It does not revoke consent at the provider." }),
-            /* @__PURE__ */ jsx5(
+          selected === `${account.providerId}:${account.id}` ? /* @__PURE__ */ jsxs6("div", { role: "group", "aria-label": `Disconnect ${account.label}`, children: [
+            /* @__PURE__ */ jsx6("p", { children: "This removes local OpenGeni access. It does not revoke consent at the provider." }),
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -701,8 +874,8 @@ function ScopedAccounts({ controller, className, returnUrl }) {
                 children: "Confirm disconnect"
               }
             ),
-            /* @__PURE__ */ jsx5("button", { type: "button", disabled: busy, onClick: () => setSelected(null), children: "Keep account" })
-          ] }) : /* @__PURE__ */ jsxs5(
+            /* @__PURE__ */ jsx6("button", { type: "button", disabled: busy, onClick: () => setSelected(null), children: "Keep account" })
+          ] }) : /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -715,14 +888,14 @@ function ScopedAccounts({ controller, className, returnUrl }) {
             }
           )
         ] }, `${account.providerId}:${account.id}`)) }),
-        /* @__PURE__ */ jsx5("button", { type: "button", disabled: busy, onClick: () => setReload((value) => value + 1), children: "Reload accounts" })
+        /* @__PURE__ */ jsx6("button", { type: "button", disabled: busy, onClick: () => setReload((value) => value + 1), children: "Reload accounts" })
       ]
     }
   );
 }
 
 // src/connect-panel.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function ConnectPanel({
   returnUrl,
   title = "Connections",
@@ -731,9 +904,11 @@ function ConnectPanel({
   className,
   ...setup
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: ["og-connect", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx6("h2", { children: title }),
-    /* @__PURE__ */ jsx6(
+  const { attempt } = useConnect(setup.controller);
+  const activeSetup = attempt !== null && !["complete", "cancelled", "expired"].includes(attempt.state);
+  return /* @__PURE__ */ jsxs7("div", { className: ["og-connect", className].filter(Boolean).join(" "), children: [
+    title !== null && /* @__PURE__ */ jsx7("h2", { children: title }),
+    !activeSetup && /* @__PURE__ */ jsx7(
       ConnectChooser,
       {
         presentation,
@@ -741,14 +916,14 @@ function ConnectPanel({
         returnUrl
       }
     ),
-    /* @__PURE__ */ jsx6(ConnectSetup, { ...setup }),
-    showAccounts && /* @__PURE__ */ jsx6(ConnectAccounts, { controller: setup.controller, returnUrl })
+    /* @__PURE__ */ jsx7(ConnectSetup, { ...setup }),
+    showAccounts && !activeSetup && /* @__PURE__ */ jsx7(ConnectAccounts, { controller: setup.controller, returnUrl })
   ] });
 }
 
 // src/device-authorization.tsx
 import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function DeviceAuthorization(props) {
   const [copied, setCopied] = useState5(false);
   const [copyError, setCopyError] = useState5(false);
@@ -794,11 +969,11 @@ function DeviceAuthorization(props) {
   } catch {
   }
   if (props.render) return props.render({ copied, copyError, copy, verificationHref: href });
-  return /* @__PURE__ */ jsxs7("section", { className: `og-connect ${props.className ?? ""}`, "aria-label": "Device authorization", children: [
-    /* @__PURE__ */ jsx7("p", { children: props.description ?? `Enter this code at ${props.providerLabel ?? "the provider"}.` }),
-    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx7("code", { ...props.codeAttributes, style: { overflowWrap: "anywhere" }, children: props.userCode }),
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("section", { className: `og-connect ${props.className ?? ""}`, "aria-label": "Device authorization", children: [
+    /* @__PURE__ */ jsx8("p", { children: props.description ?? `Enter this code at ${props.providerLabel ?? "the provider"}.` }),
+    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx8("code", { ...props.codeAttributes, style: { overflowWrap: "anywhere" }, children: props.userCode }),
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -807,19 +982,19 @@ function DeviceAuthorization(props) {
           children: copied ? "Copied" : "Copy code"
         }
       ),
-      href ? /* @__PURE__ */ jsxs7("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
+      href ? /* @__PURE__ */ jsxs8("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
         "Open ",
         props.providerLabel ?? "auth page"
-      ] }) : /* @__PURE__ */ jsx7("span", { role: "alert", children: "Authorization address unavailable." })
+      ] }) : /* @__PURE__ */ jsx8("span", { role: "alert", children: "Authorization address unavailable." })
     ] }),
-    copyError ? /* @__PURE__ */ jsx7("p", { role: "alert", children: "Couldn't copy the code. Copy it manually instead." }) : null,
-    /* @__PURE__ */ jsx7("p", { role: "status", children: "Waiting for authorization\u2026" })
+    copyError ? /* @__PURE__ */ jsx8("p", { role: "alert", children: "Couldn't copy the code. Copy it manually instead." }) : null,
+    /* @__PURE__ */ jsx8("p", { role: "status", children: "Waiting for authorization\u2026" })
   ] });
 }
 
 // src/identity-link-consent.tsx
 import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function IdentityLinkConsent({
   client,
   workspaceId,
@@ -879,43 +1054,43 @@ function IdentityLinkConsent({
       if (generation.current === current) setBusy(false);
     }
   }
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "section",
     {
       className: ["og-connect og-identity-link", className].filter(Boolean).join(" "),
       "aria-label": "Link your account",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx8("h2", { children: "Link your OpenGeni account" }),
-        /* @__PURE__ */ jsx8("p", { children: "Only continue if you started this request in a product you trust. Linking lets that product act as your account with the permissions you select. It does not merge accounts or move existing work." }),
-        preview && /* @__PURE__ */ jsxs8("dl", { children: [
-          /* @__PURE__ */ jsx8("dt", { children: "Organization" }),
-          /* @__PURE__ */ jsx8("dd", { children: preview.organizationId }),
-          /* @__PURE__ */ jsx8("dt", { children: "Product user" }),
-          /* @__PURE__ */ jsxs8("dd", { children: [
+        /* @__PURE__ */ jsx9("h2", { children: "Link your OpenGeni account" }),
+        /* @__PURE__ */ jsx9("p", { children: "Only continue if you started this request in a product you trust. Linking lets that product act as your account with the permissions you select. It does not merge accounts or move existing work." }),
+        preview && /* @__PURE__ */ jsxs9("dl", { children: [
+          /* @__PURE__ */ jsx9("dt", { children: "Organization" }),
+          /* @__PURE__ */ jsx9("dd", { children: preview.organizationId }),
+          /* @__PURE__ */ jsx9("dt", { children: "Product user" }),
+          /* @__PURE__ */ jsxs9("dd", { children: [
             preview.externalIdentity.externalId,
             " (",
             preview.externalIdentity.source,
             ")"
           ] }),
-          /* @__PURE__ */ jsx8("dt", { children: "Your OpenGeni identity" }),
-          /* @__PURE__ */ jsx8("dd", { children: preview.nativeSubjectId })
+          /* @__PURE__ */ jsx9("dt", { children: "Your OpenGeni identity" }),
+          /* @__PURE__ */ jsx9("dd", { children: preview.nativeSubjectId })
         ] }),
-        error && /* @__PURE__ */ jsxs8("div", { role: "alert", children: [
+        error && /* @__PURE__ */ jsxs9("div", { role: "alert", children: [
           "This request could not be completed. It may have expired, changed, or require you to sign in to the right organization.",
-          !link && /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy, onClick: () => setRetry((value) => value + 1), children: "Try again" })
+          !link && /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => setRetry((value) => value + 1), children: "Try again" })
         ] }),
-        !link && busy && /* @__PURE__ */ jsx8("p", { role: "status", children: "Loading the account-link request\u2026" }),
-        link?.status === "pending" && /* @__PURE__ */ jsxs8(Fragment5, { children: [
-          /* @__PURE__ */ jsxs8("p", { children: [
+        !link && busy && /* @__PURE__ */ jsx9("p", { role: "status", children: "Loading the account-link request\u2026" }),
+        link?.status === "pending" && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsxs9("p", { children: [
             link.expiresAt ? `Access ends ${new Date(link.expiresAt).toLocaleString()}.` : "Access lasts until you or the product revoke this link.",
             " ",
             "Your current permissions still apply."
           ] }),
-          /* @__PURE__ */ jsxs8("fieldset", { disabled: busy, children: [
-            /* @__PURE__ */ jsx8("legend", { children: "Allow these permissions" }),
-            link.permissions.map((permission) => /* @__PURE__ */ jsxs8("label", { children: [
-              /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs9("fieldset", { disabled: busy, children: [
+            /* @__PURE__ */ jsx9("legend", { children: "Allow these permissions" }),
+            link.permissions.map((permission) => /* @__PURE__ */ jsxs9("label", { children: [
+              /* @__PURE__ */ jsx9(
                 "input",
                 {
                   type: "checkbox",
@@ -925,10 +1100,10 @@ function IdentityLinkConsent({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx8("span", { children: permission.replaceAll(":", " \xB7 ") })
+              /* @__PURE__ */ jsx9("span", { children: permission.replaceAll(":", " \xB7 ") })
             ] }, permission))
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -937,14 +1112,14 @@ function IdentityLinkConsent({
               children: busy ? "Saving\u2026" : "Allow selected access"
             }
           ),
-          /* @__PURE__ */ jsx8("p", { children: "You can close this page without granting access." })
+          /* @__PURE__ */ jsx9("p", { children: "You can close this page without granting access." })
         ] }),
-        link?.status === "active" && /* @__PURE__ */ jsxs8(Fragment5, { children: [
-          /* @__PURE__ */ jsx8("p", { role: "status", children: "Account linked. Return to your product to continue." }),
-          /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy, onClick: () => void mutate(true), children: "Revoke this link" })
+        link?.status === "active" && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx9("p", { role: "status", children: "Account linked. Return to your product to continue." }),
+          /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => void mutate(true), children: "Revoke this link" })
         ] }),
-        link?.status === "revoked" && /* @__PURE__ */ jsx8("p", { role: "status", children: "Link revoked. Your OpenGeni account and existing work are unchanged." }),
-        link?.status === "expired" && /* @__PURE__ */ jsx8("p", { role: "status", children: "This request has expired. Start a new request from your product." })
+        link?.status === "revoked" && /* @__PURE__ */ jsx9("p", { role: "status", children: "Link revoked. Your OpenGeni account and existing work are unchanged." }),
+        link?.status === "expired" && /* @__PURE__ */ jsx9("p", { role: "status", children: "This request has expired. Start a new request from your product." })
       ]
     }
   );
@@ -952,7 +1127,7 @@ function IdentityLinkConsent({
 
 // src/identity-link-accounts.tsx
 import { useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function IdentityLinkAccounts({
   client,
   workspaceId
@@ -1021,68 +1196,69 @@ function IdentityLinkAccounts({
       }
     }
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "section",
     {
       className: "og-connect og-identity-link",
       "aria-label": "Linked product access",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx9("h2", { children: "Linked product access" }),
-        /* @__PURE__ */ jsx9("p", { children: "Manage products allowed to act as your account in this organization. Revoking a link stops future linked access; it does not delete your work or undo an operation already started." }),
-        error && /* @__PURE__ */ jsxs9("div", { role: "alert", children: [
+        /* @__PURE__ */ jsx10("h2", { children: "Linked product access" }),
+        /* @__PURE__ */ jsx10("p", { children: "Manage products allowed to act as your account in this organization. Revoking a link stops future linked access; it does not delete your work or undo an operation already started." }),
+        error && /* @__PURE__ */ jsxs10("div", { role: "alert", children: [
           "Could not update account links. Reload to see current access.",
-          /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => setRevision((value) => value + 1), children: "Reload links" })
+          /* @__PURE__ */ jsx10("button", { type: "button", disabled: busy, onClick: () => setRevision((value) => value + 1), children: "Reload links" })
         ] }),
-        busy && /* @__PURE__ */ jsx9("p", { role: "status", children: "Loading account links\u2026" }),
-        !busy && !error && links.length === 0 && /* @__PURE__ */ jsx9("p", { children: "No products have linked access to this account." }),
-        /* @__PURE__ */ jsx9("ul", { children: links.map((link) => /* @__PURE__ */ jsxs9("li", { children: [
-          /* @__PURE__ */ jsxs9("p", { children: [
+        busy && /* @__PURE__ */ jsx10("p", { role: "status", children: "Loading account links\u2026" }),
+        !busy && !error && links.length === 0 && /* @__PURE__ */ jsx10("p", { children: "No products have linked access to this account." }),
+        /* @__PURE__ */ jsx10("ul", { children: links.map((link) => /* @__PURE__ */ jsxs10("li", { children: [
+          /* @__PURE__ */ jsxs10("p", { children: [
             link.externalIdentity?.source || "Product identity",
             " ",
-            /* @__PURE__ */ jsx9("code", { children: link.externalIdentity?.externalId ?? link.externalIdentityId })
+            /* @__PURE__ */ jsx10("code", { children: link.externalIdentity?.externalId ?? link.externalIdentityId })
           ] }),
-          /* @__PURE__ */ jsxs9("p", { children: [
+          /* @__PURE__ */ jsxs10("p", { children: [
             "Status: ",
             link.status,
             ".",
             " ",
             link.expiresAt ? `Expires ${new Date(link.expiresAt).toLocaleString()}.` : "No automatic expiry."
           ] }),
-          /* @__PURE__ */ jsx9("p", { children: link.permissions.join(", ") }),
-          (link.status === "active" || link.status === "pending") && /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => void act(link), children: "Revoke access" })
+          /* @__PURE__ */ jsx10("p", { children: link.permissions.join(", ") }),
+          (link.status === "active" || link.status === "pending") && /* @__PURE__ */ jsx10("button", { type: "button", disabled: busy, onClick: () => void act(link), children: "Revoke access" })
         ] }, link.id)) }),
-        cursor && /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => void act(), children: "Load more links" })
+        cursor && /* @__PURE__ */ jsx10("button", { type: "button", disabled: busy, onClick: () => void act(), children: "Load more links" })
       ]
     }
   );
 }
 
 // src/connection-installed.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function ConnectionInstalled({
   items,
   title = "Connected",
   className = ""
 }) {
   if (!items.length) return null;
-  return /* @__PURE__ */ jsxs10("section", { "aria-label": title, className: `og-connection-installed ${className}`, children: [
-    /* @__PURE__ */ jsxs10("h2", { children: [
+  return /* @__PURE__ */ jsxs11("section", { "aria-label": title, className: `og-connection-installed ${className}`, children: [
+    /* @__PURE__ */ jsxs11("h2", { children: [
       title,
       " ",
-      /* @__PURE__ */ jsx10("span", { children: items.length })
+      /* @__PURE__ */ jsx11("span", { children: items.length })
     ] }),
-    /* @__PURE__ */ jsx10("div", { children: items.map((item) => /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsx11("div", { children: items.map((item) => /* @__PURE__ */ jsxs11(
       "button",
       {
         type: "button",
         onClick: item.onOpen,
+        disabled: item.disabled,
         title: item.status,
         "aria-label": `${item.name} \xB7 ${item.status}`,
         children: [
           item.icon,
-          /* @__PURE__ */ jsx10("span", { children: item.name }),
-          item.needsAttention ? /* @__PURE__ */ jsx10("span", { "aria-label": "Needs attention", children: "!" }) : null
+          /* @__PURE__ */ jsx11("span", { children: item.name }),
+          item.needsAttention ? /* @__PURE__ */ jsx11("span", { "aria-label": "Needs attention", children: "!" }) : null
         ]
       },
       item.id
@@ -1092,21 +1268,21 @@ function ConnectionInstalled({
 
 // src/connection-type-picker.tsx
 import { useId } from "react";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function ConnectionTypePicker({
   value,
   onChange,
   disabled = false
 }) {
   const name = useId();
-  return /* @__PURE__ */ jsxs11("fieldset", { className: "og-connection-type-picker", disabled, children: [
-    /* @__PURE__ */ jsx11("legend", { children: "Connection type" }),
+  return /* @__PURE__ */ jsxs12("fieldset", { className: "og-connection-type-picker", disabled, children: [
+    /* @__PURE__ */ jsx12("legend", { children: "Connection type" }),
     [
       ["mcp", "MCP server"],
       ["openapi", "OpenAPI"],
       ["graphql", "GraphQL"]
-    ].map(([type, label]) => /* @__PURE__ */ jsxs11("label", { "data-selected": value === type, children: [
-      /* @__PURE__ */ jsx11(
+    ].map(([type, label]) => /* @__PURE__ */ jsxs12("label", { "data-selected": value === type, children: [
+      /* @__PURE__ */ jsx12(
         "input",
         {
           type: "radio",
@@ -1123,71 +1299,92 @@ function ConnectionTypePicker({
 
 // src/connection-logo.tsx
 import { useState as useState8 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function ConnectionLogo({
   src,
   name,
-  size = 40
+  size = 40,
+  fallback
 }) {
   const [failedSrc, setFailedSrc] = useState8(null);
-  return /* @__PURE__ */ jsx12("span", { className: "og-connection-logo", "aria-hidden": "true", style: { width: size, height: size }, children: src && src !== failedSrc ? /* @__PURE__ */ jsx12("img", { src, alt: "", loading: "lazy", decoding: "async", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx12("span", { children: name.split(/\s+/).map((part) => part[0]).join("").slice(0, 2).toUpperCase() }) });
+  return /* @__PURE__ */ jsx13("span", { className: "og-connection-logo", "aria-hidden": "true", style: { width: size, height: size }, children: src && src !== failedSrc ? /* @__PURE__ */ jsx13("img", { src, alt: "", loading: "lazy", decoding: "async", onError: () => setFailedSrc(src) }) : fallback ?? /* @__PURE__ */ jsx13("span", { children: name.split(/\s+/).map((part) => part[0]).join("").slice(0, 2).toUpperCase() }) });
 }
 
 // src/plugin-discovery.tsx
 import { useEffect as useEffect7, useRef as useRef5, useState as useState9 } from "react";
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { BoxesIcon } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var discoveryCache2 = createDiscoveryCache();
+var EMPTY_INSTALLED_IDS = /* @__PURE__ */ new Set();
 function PluginDiscovery(props) {
   const [provider, setProvider] = useState9("");
-  return /* @__PURE__ */ jsxs12("section", { className: "og-plugin-discovery", "aria-label": "Discover plugins", children: [
-    /* @__PURE__ */ jsxs12("header", { children: [
-      /* @__PURE__ */ jsx13("h3", { children: "Browse plugins" }),
-      /* @__PURE__ */ jsx13("div", { className: "og-plugin-filters", role: "group", "aria-label": "Plugin registry", children: [
-        { value: "", label: "All" },
-        { value: "openai", label: "OpenAI plugin registry" },
-        { value: "anthropic", label: "Anthropic plugin registry" }
-      ].map((option) => /* @__PURE__ */ jsx13(
-        "button",
-        {
-          type: "button",
-          "aria-pressed": provider === option.value,
-          onClick: () => setProvider(option.value),
-          children: option.label
-        },
-        option.value
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx13(
-      Results,
-      {
-        ...props,
-        provider
-      },
-      `${props.workspaceId}:${props.query}:${provider}`
-    )
-  ] });
+  return /* @__PURE__ */ jsxs13(
+    "section",
+    {
+      className: `og-plugin-discovery ${props.resultLimit ? "og-catalog-overview" : ""}`,
+      "aria-label": "Discover plugins",
+      children: [
+        /* @__PURE__ */ jsxs13("header", { children: [
+          /* @__PURE__ */ jsx14("h3", { children: props.resultLimit ? "Plugins" : "Browse plugins" }),
+          !props.resultLimit ? /* @__PURE__ */ jsx14("div", { className: "og-plugin-filters", role: "group", "aria-label": "Plugin registry", children: [
+            { value: "", label: "All" },
+            { value: "openai", label: "OpenAI plugin registry" },
+            { value: "anthropic", label: "Anthropic plugin registry" }
+          ].map((option) => /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": provider === option.value,
+              onClick: () => setProvider(option.value),
+              children: option.label
+            },
+            option.value
+          )) }) : null
+        ] }),
+        /* @__PURE__ */ jsx14(
+          Results,
+          {
+            ...props,
+            provider
+          },
+          `${props.workspaceId}:${props.query}:${provider}`
+        )
+      ]
+    }
+  );
 }
 function Results({
   client,
   workspaceId,
   query,
   provider,
-  onOpen
+  installedIds = EMPTY_INSTALLED_IDS,
+  onOpen,
+  resultLimit,
+  onShowMore
 }) {
-  const [items, setItems] = useState9([]);
+  const initial = discoveryCache2.peek(client, JSON.stringify([workspaceId, query, provider, 0]));
+  const [items, setItems] = useState9(initial?.items ?? []);
   const [offset, setOffset] = useState9(0);
-  const [next, setNext] = useState9(null);
-  const [total, setTotal] = useState9(0);
-  const [loading, setLoading] = useState9(true);
+  const [next, setNext] = useState9(initial?.nextOffset ?? null);
+  const [total, setTotal] = useState9(initial?.total ?? 0);
+  const [loading, setLoading] = useState9(!initial);
   const [error, setError] = useState9(false);
   const [retry, setRetry] = useState9(0);
   const sentinel = useRef5(null);
   useEffect7(() => {
     let active = true;
-    setLoading(true);
+    const cacheKey = JSON.stringify([workspaceId, query, provider, offset]);
+    const cached = discoveryCache2.peek(client, cacheKey);
+    setLoading(!cached);
     setError(false);
     const timer = setTimeout(
       () => {
-        void client.discoverPlugins(workspaceId, { query, provider, offset }).then(
+        void discoveryCache2.read(
+          client,
+          cacheKey,
+          () => client.discoverPlugins(workspaceId, { query, provider, offset })
+        ).then(
           (page) => {
             if (!active) return;
             setItems((previous) => offset ? [...previous, ...page.items] : page.items);
@@ -1203,7 +1400,7 @@ function Results({
           }
         );
       },
-      offset ? 0 : 200
+      cached || offset ? 0 : 200
     );
     return () => {
       active = false;
@@ -1211,7 +1408,7 @@ function Results({
     };
   }, [client, workspaceId, query, provider, offset, retry]);
   useEffect7(() => {
-    if (loading || error || next === null || !sentinel.current) return;
+    if (resultLimit || loading || error || next === null || !sentinel.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries.some((entry) => entry.isIntersecting)) setOffset(next);
@@ -1220,54 +1417,45 @@ function Results({
     );
     observer.observe(sentinel.current);
     return () => observer.disconnect();
-  }, [loading, error, next]);
-  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    !loading && !error ? /* @__PURE__ */ jsx13("p", { role: "status", children: total ? `${total} plugins` : "No matching plugins. Try another search or registry." }) : null,
-    /* @__PURE__ */ jsx13("div", { className: "og-plugin-discovery-grid", children: items.map((item) => /* @__PURE__ */ jsxs12(
-      "button",
+  }, [loading, error, next, resultLimit]);
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    !loading && !error ? /* @__PURE__ */ jsx14("p", { role: "status", children: total ? `${total} plugins` : "No matching plugins. Try another search or registry." }) : null,
+    /* @__PURE__ */ jsx14("div", { className: "og-plugin-discovery-grid", children: items.slice(0, resultLimit).map((item) => /* @__PURE__ */ jsx14(
+      CapabilityCatalogRow,
       {
-        className: "og-plugin-discovery-row",
-        type: "button",
-        onClick: () => onOpen(item),
-        children: [
-          item.logoUrl ? /* @__PURE__ */ jsx13(
-            "img",
-            {
-              src: item.logoUrl,
-              alt: "",
-              loading: "lazy",
-              onError: (event) => {
-                event.currentTarget.style.display = "none";
-              }
-            }
-          ) : null,
-          /* @__PURE__ */ jsxs12("span", { className: "og-plugin-copy", children: [
-            /* @__PURE__ */ jsxs12("span", { className: "og-plugin-title", children: [
-              /* @__PURE__ */ jsx13("strong", { children: item.displayName.replace(/-/g, " ") }),
-              /* @__PURE__ */ jsx13("small", { children: item.provider === "openai" ? "OpenAI plugin registry" : "Anthropic plugin registry" })
-            ] }),
-            /* @__PURE__ */ jsx13("span", { className: "og-plugin-description", children: item.description }),
-            item.category ? /* @__PURE__ */ jsx13("span", { className: "og-plugin-category", children: item.category }) : null
-          ] }),
-          /* @__PURE__ */ jsx13("span", { className: "og-plugin-open", "aria-hidden": "true", children: "\u203A" })
-        ]
+        "data-plugin-id": item.id,
+        name: item.displayName.replace(/-/g, " "),
+        description: item.description,
+        status: installedIds.has(item.id) ? "added" : "available",
+        statusLabel: installedIds.has(item.id) ? "Installed" : "Available to install",
+        onOpen: () => onOpen(item),
+        icon: /* @__PURE__ */ jsx14(
+          ConnectionLogo,
+          {
+            src: item.logoUrl,
+            name: item.displayName,
+            fallback: /* @__PURE__ */ jsx14(BoxesIcon, { "aria-hidden": "true" })
+          }
+        )
       },
       item.id
     )) }),
-    loading ? /* @__PURE__ */ jsx13("p", { role: "status", children: "Loading plugins\u2026" }) : null,
-    error ? /* @__PURE__ */ jsxs12("p", { role: "alert", children: [
+    loading ? /* @__PURE__ */ jsx14("p", { role: "status", children: "Loading plugins\u2026" }) : null,
+    error ? /* @__PURE__ */ jsxs13("p", { role: "alert", children: [
       "Couldn\u2019t load plugins.",
       " ",
-      /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => setRetry((value) => value + 1), children: "Retry" })
+      /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setRetry((value) => value + 1), children: "Retry" })
     ] }) : null,
-    /* @__PURE__ */ jsx13("div", { ref: sentinel, children: next !== null && !loading && !error ? /* @__PURE__ */ jsx13("button", { className: "og-plugin-more", type: "button", onClick: () => setOffset(next), children: "Show more plugins" }) : null })
+    resultLimit && !loading && !error && total > resultLimit ? /* @__PURE__ */ jsx14("button", { className: "og-catalog-more", type: "button", onClick: onShowMore, children: "View all plugins" }) : null,
+    /* @__PURE__ */ jsx14("div", { ref: sentinel, children: !resultLimit && next !== null && !loading && !error ? /* @__PURE__ */ jsx14("button", { className: "og-plugin-more", type: "button", onClick: () => setOffset(next), children: "Show more plugins" }) : null })
   ] });
 }
 
 // src/plugin-details.tsx
 import { useState as useState10 } from "react";
 import { pluginMcpUnavailableReason } from "@opengeni/sdk";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { BoxesIcon as BoxesIcon2 } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var componentLabels = {
   skills: "Skills",
   mcp: "MCP connections",
@@ -1291,57 +1479,63 @@ function PluginDetails({
   const contentsUnknown = item.skills == null || item.mcpServers == null;
   const installableCount = (item.skills?.length ?? 0) + (item.mcpServers?.filter(supported).length ?? 0);
   const exceedsInstallLimit = installableCount > 64;
-  const installable = installableCount > 0 && !exceedsInstallLimit;
+  const installable = !contentsUnknown && installableCount > 0 && !exceedsInstallLimit;
   const [expanded, setExpanded] = useState10(false);
-  const [logoFailed, setLogoFailed] = useState10(false);
   const description = item.longDescription || item.description;
   const lengthy = description.length > 700;
   const registryLabel = item.provider === "openai" ? "OpenAI plugin registry" : item.provider === "anthropic" ? "Anthropic plugin registry" : "Custom source";
-  return /* @__PURE__ */ jsxs13("article", { className: "og-plugin-details", children: [
-    /* @__PURE__ */ jsxs13("header", { className: "og-plugin-details-header", children: [
-      item.logoUrl && !logoFailed ? /* @__PURE__ */ jsx14("img", { src: item.logoUrl, alt: "", onError: () => setLogoFailed(true) }) : null,
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx14("h2", { children: item.displayName.replace(/-/g, " ") }),
-        item.author?.name ? /* @__PURE__ */ jsxs13("p", { children: [
+  return /* @__PURE__ */ jsxs14("article", { className: "og-plugin-details", children: [
+    /* @__PURE__ */ jsxs14("header", { className: "og-plugin-details-header", children: [
+      /* @__PURE__ */ jsx15(
+        ConnectionLogo,
+        {
+          src: item.logoUrl,
+          name: item.displayName,
+          fallback: /* @__PURE__ */ jsx15(BoxesIcon2, { "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx15("h2", { children: item.displayName.replace(/-/g, " ") }),
+        item.author?.name ? /* @__PURE__ */ jsxs14("p", { children: [
           "By ",
           item.author.name
         ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsxs13("div", { className: "og-plugin-details-meta", children: [
-      /* @__PURE__ */ jsx14("span", { children: registryLabel }),
-      item.category ? /* @__PURE__ */ jsx14("span", { children: item.category }) : null,
-      item.version ? /* @__PURE__ */ jsxs13("span", { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "og-plugin-details-meta", children: [
+      /* @__PURE__ */ jsx15("span", { children: registryLabel }),
+      item.category ? /* @__PURE__ */ jsx15("span", { children: item.category }) : null,
+      item.version ? /* @__PURE__ */ jsxs14("span", { children: [
         "v",
         item.version
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsxs13("section", { className: "og-plugin-details-members", children: [
-      /* @__PURE__ */ jsxs13("h3", { children: [
+    /* @__PURE__ */ jsxs14("section", { className: "og-plugin-details-members", children: [
+      /* @__PURE__ */ jsxs14("h3", { children: [
         "Skills ",
-        /* @__PURE__ */ jsx14("span", { children: item.skills?.length ?? "\u2014" })
+        /* @__PURE__ */ jsx15("span", { children: item.skills?.length ?? "\u2014" })
       ] }),
-      item.skills?.length ? /* @__PURE__ */ jsx14("ul", { children: item.skills.map((skill) => /* @__PURE__ */ jsx14("li", { children: /* @__PURE__ */ jsxs13("a", { href: skill.sourceUrl, target: "_blank", rel: "noopener noreferrer", children: [
-        /* @__PURE__ */ jsx14("strong", { children: skill.name }),
-        /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "\u2197" })
-      ] }) }, skill.sourceUrl)) }) : /* @__PURE__ */ jsx14("p", { children: item.skills ? "No bundled skills." : "Contents haven\u2019t been indexed for this repository." }),
-      /* @__PURE__ */ jsxs13("h3", { children: [
+      item.skills?.length ? /* @__PURE__ */ jsx15("ul", { children: item.skills.map((skill) => /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsxs14("a", { href: skill.sourceUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        /* @__PURE__ */ jsx15("strong", { children: skill.name }),
+        /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u2197" })
+      ] }) }, skill.sourceUrl)) }) : /* @__PURE__ */ jsx15("p", { children: item.skills ? "No bundled skills." : "Contents haven\u2019t been indexed for this repository." }),
+      /* @__PURE__ */ jsxs14("h3", { children: [
         "MCP servers ",
-        /* @__PURE__ */ jsx14("span", { children: item.mcpServers?.length ?? "\u2014" })
+        /* @__PURE__ */ jsx15("span", { children: item.mcpServers?.length ?? "\u2014" })
       ] }),
-      item.mcpServers?.length ? /* @__PURE__ */ jsx14("ul", { children: item.mcpServers.map((server) => {
+      item.mcpServers?.length ? /* @__PURE__ */ jsx15("ul", { children: item.mcpServers.map((server) => {
         const connected = Boolean(server.endpoint && connections[server.endpoint]);
         const unavailableReason = connected ? null : pluginMcpUnavailableReason(server);
-        return /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsxs14(
           "li",
           {
             className: unavailableReason ? "og-plugin-member-disabled" : void 0,
             children: [
-              /* @__PURE__ */ jsxs13("div", { className: "og-plugin-server-heading", children: [
-                /* @__PURE__ */ jsx14("strong", { children: server.name }),
-                !unavailableReason && onConnect ? /* @__PURE__ */ jsx14("button", { type: "button", disabled: busy, onClick: () => onConnect(server), children: connected ? "Manage" : "Connect" }) : null
+              /* @__PURE__ */ jsxs14("div", { className: "og-plugin-server-heading", children: [
+                /* @__PURE__ */ jsx15("strong", { children: server.name }),
+                !unavailableReason && onConnect ? /* @__PURE__ */ jsx15("button", { type: "button", disabled: busy, onClick: () => onConnect(server), children: connected ? "Manage" : "Connect" }) : null
               ] }),
-              /* @__PURE__ */ jsxs13("small", { children: [
+              /* @__PURE__ */ jsxs14("small", { children: [
                 connected ? "Connected \xB7 " : "",
                 unavailableReason ?? server.endpoint
               ] })
@@ -1349,16 +1543,16 @@ function PluginDetails({
           },
           server.name
         );
-      }) }) : /* @__PURE__ */ jsx14("p", { children: item.mcpServers ? "No bundled MCP servers." : "Server details haven\u2019t been indexed." }),
-      item.components?.some((component) => !["skills", "mcp"].includes(component)) ? /* @__PURE__ */ jsxs13("div", { className: "og-plugin-details-other", children: [
+      }) }) : /* @__PURE__ */ jsx15("p", { children: item.mcpServers ? "No bundled MCP servers." : "Server details haven\u2019t been indexed." }),
+      item.components?.some((component) => !["skills", "mcp"].includes(component)) ? /* @__PURE__ */ jsxs14("div", { className: "og-plugin-details-other", children: [
         "Not installed here:",
         " ",
         item.components.filter((component) => !["skills", "mcp"].includes(component)).map((component) => componentLabels[component] ?? component).join(", ")
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsxs13("section", { className: "og-plugin-details-overview", "aria-label": "Overview", children: [
-      /* @__PURE__ */ jsx14("div", { className: lengthy && !expanded ? "og-plugin-details-excerpt" : void 0, children: /* @__PURE__ */ jsx14(Markdown, { children: description }) }),
-      lengthy ? /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsxs14("section", { className: "og-plugin-details-overview", "aria-label": "Overview", children: [
+      /* @__PURE__ */ jsx15("div", { className: lengthy && !expanded ? "og-plugin-details-excerpt" : void 0, children: /* @__PURE__ */ jsx15(Markdown, { children: description }) }),
+      lengthy ? /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -1369,12 +1563,12 @@ function PluginDetails({
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsxs13("footer", { children: [
-      item.sourceUrl ? /* @__PURE__ */ jsxs13("a", { href: item.sourceUrl, target: "_blank", rel: "noopener noreferrer", children: [
+    /* @__PURE__ */ jsxs14("footer", { children: [
+      item.sourceUrl ? /* @__PURE__ */ jsxs14("a", { href: item.sourceUrl, target: "_blank", rel: "noopener noreferrer", children: [
         "View repository ",
-        /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "\u2197" })
+        /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u2197" })
       ] }) : null,
-      onInstall ? /* @__PURE__ */ jsx14(
+      onInstall ? /* @__PURE__ */ jsx15(
         "button",
         {
           className: "og-plugin-install",
@@ -1384,8 +1578,8 @@ function PluginDetails({
           children: installed ? "Installed" : busy ? "Installing\u2026" : "Install plugin"
         }
       ) : null,
-      error ? /* @__PURE__ */ jsx14("p", { role: "alert", children: error }) : null,
-      exceedsInstallLimit ? /* @__PURE__ */ jsx14("p", { children: "This plugin exceeds the current 64-component installation limit." }) : contentsUnknown ? /* @__PURE__ */ jsx14("p", { children: "Plugin contents are unavailable. Installation is disabled until the repository can be inspected." }) : !installable ? /* @__PURE__ */ jsx14("p", { children: "No installable skills or remote MCP servers." }) : /* @__PURE__ */ jsx14("p", { children: "Installs skills and adds connection references. Connect each server separately." })
+      error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: error }) : null,
+      exceedsInstallLimit ? /* @__PURE__ */ jsx15("p", { children: "This plugin exceeds the current 64-component installation limit." }) : contentsUnknown ? /* @__PURE__ */ jsx15("p", { children: "Plugin contents are unavailable. Installation is disabled until the repository can be inspected." }) : !installable ? /* @__PURE__ */ jsx15("p", { children: "No installable skills or remote MCP servers." }) : /* @__PURE__ */ jsx15("p", { children: "Installs skills and adds connection references. Connect each server separately." })
     ] })
   ] });
 }
@@ -1411,6 +1605,8 @@ function useConnect(controller) {
   return useMemo(() => ({ ...snapshot, ...actions }), [snapshot, actions]);
 }
 export {
+  CapabilityCatalogIndicator,
+  CapabilityCatalogRow,
   ConnectAccounts,
   ConnectChooser,
   ConnectPanel,