@meetreeve/ui 0.8.1 → 0.10.0

package/dist/index.mjs

@@ -1368,7 +1368,21 @@ import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-run
 var DEFAULT_CONNECT_ERROR = "Couldn't start the connection. Please try again.";
 var DEFAULT_DISCONNECT_ERROR = "Couldn't disconnect. Please try again.";
 var DEFAULT_LOAD_ERROR = "Couldn't load connections. Please try again.";
+var DEFAULT_GRANTS_LOAD_ERROR = "Couldn't load sharing. Please try again.";
+var DEFAULT_GRANT_ERROR = "Couldn't share. Please try again.";
+var DEFAULT_REVOKE_ERROR = "Couldn't revoke access. Please try again.";
+var DEFAULT_ORG_DISABLED_REASON = "Org-wide connections aren't available to you.";
+var DEFAULT_CREDENTIAL_ERROR = "Couldn't save that credential. Please try again.";
+var DEFAULT_CREDENTIAL_TEST_ERROR = "Couldn't test that credential. Please try again.";
+var UNVERIFIABLE_CREDENTIAL_NOTE = "We can't verify this automatically \u2014 saving it is safe, but nothing has checked it yet.";
 var SKELETON_COUNT = 3;
+var UNGROUNDED_PLACEHOLDER = /\{\{[^}]*\}\}/;
+function hasUngroundedPlaceholder(text) {
+  return UNGROUNDED_PLACEHOLDER.test(text);
+}
+function isDevEnvironment() {
+  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+}
 function capabilityLabel(capability) {
   if (capability === "read") return "Read only";
   if (capability === "write") return "Write only";
@@ -1382,6 +1396,17 @@ function formatSince(since) {
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
 }
+function ownerLabel(entry) {
+  const connection = entry.connection;
+  if (connection.status !== "connected") return null;
+  if (connection.kind === "org") return "Org";
+  if (connection.owned_by_viewer) return "Yours";
+  if (connection.shared_by) return `Shared by ${connection.shared_by.name}`;
+  return null;
+}
+function isSharedWithViewer(entry) {
+  return entry.connection.status === "connected" && Boolean(entry.connection.shared_by) && !entry.connection.owned_by_viewer;
+}
 function ConnectorPicker({
   client,
   purpose,
@@ -1393,6 +1418,9 @@ function ConnectorPicker({
   const [entries, setEntries] = useState7(null);
   const [loadError, setLoadError] = useState7(null);
   const [uiState, setUiState] = useState7({});
+  const grantsSupported = typeof client.listGrants === "function" && typeof client.grant === "function" && typeof client.revokeGrant === "function";
+  const credentialsSupported = typeof client.submitCredentials === "function";
+  const credentialTestSupported = typeof client.testCredentials === "function";
   const clientRef = useRef5(client);
   clientRef.current = client;
   const purposeRef = useRef5(purpose);
@@ -1451,10 +1479,10 @@ function ConnectorPicker({
     };
   }, [gated, refreshAfterReturn]);
   const handleConnect = useCallback4(
-    async (entry) => {
+    async (entry, kind) => {
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
-        const result = await clientRef.current.connect(entry);
+        const result = await clientRef.current.connect(entry, { kind });
         if (result?.connect_url) {
           window.open(result.connect_url, "_blank", "noopener,noreferrer");
           return;
@@ -1476,6 +1504,38 @@ function ConnectorPicker({
     },
     [load]
   );
+  const handleSubmitCredentials = useCallback4(
+    async (entry, values, kind) => {
+      setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
+      try {
+        await clientRef.current.submitCredentials?.(entry, values, { kind });
+        const list = await load();
+        const updated = list?.find((e) => e.slug === entry.slug) ?? null;
+        setUiState((prev) => {
+          const next = { ...prev };
+          delete next[entry.slug];
+          return next;
+        });
+        if (updated?.connection.status === "connected") {
+          onConnectedRef.current?.(updated);
+        } else {
+          throw new Error(DEFAULT_CREDENTIAL_ERROR);
+        }
+      } catch (err) {
+        setUiState((prev) => {
+          const next = { ...prev };
+          delete next[entry.slug];
+          return next;
+        });
+        throw err;
+      }
+    },
+    [load]
+  );
+  const testCredentials = useCallback4(
+    (entry, values) => clientRef.current.testCredentials?.(entry, values) ?? Promise.resolve({ valid: null }),
+    []
+  );
   const handleDisconnect = useCallback4(
     async (entry) => {
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "disconnecting" } }));
@@ -1494,121 +1554,810 @@ function ConnectorPicker({
     },
     [load]
   );
+  const listGrants = useCallback4(
+    (entry) => clientRef.current.listGrants?.(entry) ?? Promise.resolve([]),
+    []
+  );
+  const addGrant = useCallback4(
+    (entry, input) => clientRef.current.grant?.(entry, input) ?? Promise.resolve(),
+    []
+  );
+  const revokeGrant = useCallback4(
+    (entry, grantId) => clientRef.current.revokeGrant?.(entry, grantId) ?? Promise.resolve(),
+    []
+  );
   if (gated) return null;
   const containerClassName = cn(
     "flex flex-col",
     layout === "tiles" ? "gap-3 sm:grid sm:grid-cols-2 lg:grid-cols-3" : "divide-y divide-border"
   );
-  return /* @__PURE__ */ jsxs6("div", { "data-testid": "connector-picker", "data-layout": layout, className: containerClassName, children: [
-    entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        "data-testid": "connector-picker-skeleton-item",
-        "aria-hidden": "true",
-        className: "flex items-center gap-3 rounded-lg border border-border p-3",
-        children: [
-          /* @__PURE__ */ jsx7("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
-          /* @__PURE__ */ jsx7("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
-        ]
-      },
-      i
-    )),
-    loadError && /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        role: "alert",
-        "data-testid": "connector-picker-load-error",
-        className: "flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive",
-        children: [
-          /* @__PURE__ */ jsx7("span", { children: loadError }),
-          /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
-        ]
-      }
-    ),
-    entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ jsx7("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
-    entries?.map((entry) => /* @__PURE__ */ jsx7(
-      ConnectorTile,
-      {
-        entry,
-        ui: uiState[entry.slug],
-        layout,
-        onConnect: handleConnect,
-        onDisconnect: handleDisconnect
-      },
-      entry.slug
-    ))
+  const ownEntries = entries?.filter((entry) => !isSharedWithViewer(entry)) ?? null;
+  const sharedEntries = entries?.filter(isSharedWithViewer) ?? [];
+  return /* @__PURE__ */ jsxs6("div", { "data-testid": "connector-picker", "data-layout": layout, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs6("div", { className: containerClassName, children: [
+      entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          "data-testid": "connector-picker-skeleton-item",
+          "aria-hidden": "true",
+          className: "flex items-center gap-3 rounded-lg border border-border p-3",
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
+            /* @__PURE__ */ jsx7("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
+          ]
+        },
+        i
+      )),
+      loadError && /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          role: "alert",
+          "data-testid": "connector-picker-load-error",
+          className: "flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive",
+          children: [
+            /* @__PURE__ */ jsx7("span", { children: loadError }),
+            /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
+          ]
+        }
+      ),
+      entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ jsx7("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
+      ownEntries?.map((entry) => /* @__PURE__ */ jsx7(
+        ConnectorTile,
+        {
+          entry,
+          ui: uiState[entry.slug],
+          layout,
+          grantsSupported,
+          credentialsSupported,
+          credentialTestSupported,
+          onConnect: handleConnect,
+          onDisconnect: handleDisconnect,
+          onSubmitCredentials: handleSubmitCredentials,
+          onTestCredentials: testCredentials,
+          listGrants,
+          addGrant,
+          revokeGrant
+        },
+        entry.slug
+      ))
+    ] }),
+    sharedEntries.length > 0 && /* @__PURE__ */ jsxs6("section", { "data-testid": "connector-picker-shared-with-me", className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx7("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Shared with me" }),
+      /* @__PURE__ */ jsx7("div", { className: containerClassName, children: sharedEntries.map((entry) => /* @__PURE__ */ jsx7(
+        ConnectorTile,
+        {
+          entry,
+          ui: uiState[entry.slug],
+          layout,
+          shared: true,
+          grantsSupported,
+          credentialsSupported,
+          credentialTestSupported,
+          onConnect: handleConnect,
+          onDisconnect: handleDisconnect,
+          onSubmitCredentials: handleSubmitCredentials,
+          onTestCredentials: testCredentials,
+          listGrants,
+          addGrant,
+          revokeGrant
+        },
+        entry.slug
+      )) })
+    ] })
   ] });
 }
 function ConnectorTile({
   entry,
   ui,
   layout,
+  shared = false,
+  grantsSupported,
+  credentialsSupported,
+  credentialTestSupported,
   onConnect,
-  onDisconnect
+  onDisconnect,
+  onSubmitCredentials,
+  onTestCredentials,
+  listGrants,
+  addGrant,
+  revokeGrant
 }) {
   const isConnected = entry.connection.status === "connected";
   const isConnecting = ui?.kind === "connecting";
   const isDisconnecting = ui?.kind === "disconnecting";
   const errorMessage = ui?.kind === "error" ? ui.message : null;
+  const [kind, setKind] = useState7("personal");
+  const [sharingOpen, setSharingOpen] = useState7(false);
+  const [setupOpen, setSetupOpen] = useState7(false);
+  const credentialFields = entry.credential_fields ?? [];
+  const pasteSupported = credentialsSupported && credentialFields.length > 0;
+  const guide = entry.guide ?? null;
+  const canSetUp = !isConnected && (pasteSupported || guide !== null);
+  const orgPermitted = entry.org_connect?.permitted === true;
+  const orgDisabledReason = entry.org_connect?.reason || DEFAULT_ORG_DISABLED_REASON;
+  const attribution = ownerLabel(entry);
+  const canDisconnect = isConnected && !shared;
+  const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-testid": `connector-tile-${entry.slug}`,
       "data-connected": isConnected || void 0,
       "data-deprecated": entry.deprecated || void 0,
-      className: cn("flex items-center gap-3 p-3", layout === "tiles" && "rounded-lg border border-border"),
+      className: cn("flex flex-col p-3", layout === "tiles" && "rounded-lg border border-border"),
       children: [
-        /* @__PURE__ */ jsx7(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
-        /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx7("p", { className: "truncate text-sm font-medium", children: entry.name }),
-            entry.deprecated && /* @__PURE__ */ jsx7(
-              "span",
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx7(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
+          /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx7("p", { className: "truncate text-sm font-medium", children: entry.name }),
+              entry.deprecated && /* @__PURE__ */ jsx7(
+                "span",
+                {
+                  "data-testid": `connector-deprecated-${entry.slug}`,
+                  className: "shrink-0 rounded-full bg-foreground/10 px-2 py-0.5 text-[11px] text-muted-foreground",
+                  children: "No longer available"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx7("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
+              entry.category && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+                /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xB7" }),
+                /* @__PURE__ */ jsx7("span", { className: "truncate", children: entry.category })
+              ] })
+            ] }),
+            isConnected && /* @__PURE__ */ jsx7(
+              "p",
               {
-                "data-testid": `connector-deprecated-${entry.slug}`,
-                className: "shrink-0 rounded-full bg-foreground/10 px-2 py-0.5 text-[11px] text-muted-foreground",
-                children: "No longer available"
+                "data-testid": `connector-connected-since-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx7("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
-            entry.category && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-              /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xB7" }),
-              /* @__PURE__ */ jsx7("span", { className: "truncate", children: entry.category })
-            ] })
+            ),
+            attribution && /* @__PURE__ */ jsx7(
+              "p",
+              {
+                "data-testid": `connector-owner-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: attribution
+              }
+            ),
+            !isConnected && /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                "data-testid": `connector-kind-toggle-${entry.slug}`,
+                role: "group",
+                "aria-label": "Connect as",
+                className: "mt-1 flex items-center gap-1",
+                children: [
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": `connector-kind-personal-${entry.slug}`,
+                      "aria-pressed": kind === "personal",
+                      disabled: isConnecting,
+                      onClick: () => setKind("personal"),
+                      className: cn(
+                        "rounded-full border px-2 py-0.5 text-[11px]",
+                        kind === "personal" ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                        "disabled:opacity-50"
+                      ),
+                      children: "Personal"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs6(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": `connector-kind-org-${entry.slug}`,
+                      "aria-pressed": kind === "org",
+                      disabled: isConnecting || !orgPermitted,
+                      title: orgPermitted ? void 0 : orgDisabledReason,
+                      onClick: () => setKind("org"),
+                      className: cn(
+                        "rounded-full border px-2 py-0.5 text-[11px]",
+                        kind === "org" ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                        "disabled:opacity-50"
+                      ),
+                      children: [
+                        "Org",
+                        !orgPermitted && /* @__PURE__ */ jsxs6("span", { className: "sr-only", children: [
+                          " (",
+                          orgDisabledReason,
+                          ")"
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            errorMessage && /* @__PURE__ */ jsx7("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
           ] }),
-          isConnected && /* @__PURE__ */ jsx7(
-            "p",
+          isConnected ? /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            canDisconnect && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-disconnect-${entry.slug}`,
+                onClick: () => onDisconnect(entry),
+                disabled: isDisconnecting,
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
+              }
+            ),
+            canManageSharing && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-manage-sharing-${entry.slug}`,
+                "aria-expanded": sharingOpen,
+                onClick: () => setSharingOpen((open) => !open),
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-foreground/10",
+                children: sharingOpen ? "Hide sharing" : "Manage sharing"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-connect-${entry.slug}`,
+                onClick: () => onConnect(entry, kind),
+                disabled: isConnecting,
+                className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
+                children: isConnecting ? "Connecting\u2026" : "Connect"
+              }
+            ),
+            canSetUp && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-setup-toggle-${entry.slug}`,
+                "aria-expanded": setupOpen,
+                "aria-controls": `connector-setup-panel-${entry.slug}`,
+                onClick: () => setSetupOpen((open) => !open),
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-foreground/10",
+                children: setupOpen ? "Hide setup" : pasteSupported ? "Use a token instead" : "Setup guide"
+              }
+            )
+          ] })
+        ] }),
+        canSetUp && setupOpen && /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            id: `connector-setup-panel-${entry.slug}`,
+            "data-testid": `connector-setup-panel-${entry.slug}`,
+            className: "mt-2 flex flex-col gap-3 rounded-md border border-border bg-foreground/5 p-2",
+            children: [
+              guide && /* @__PURE__ */ jsx7(SetupGuidePanel, { entry, guide, showVerify: !pasteSupported }),
+              pasteSupported && /* @__PURE__ */ jsx7(
+                CredentialForm,
+                {
+                  entry,
+                  fields: credentialFields,
+                  kind,
+                  verify: guide?.verify ?? null,
+                  testSupported: credentialTestSupported,
+                  onSubmitCredentials,
+                  onTestCredentials
+                }
+              )
+            ]
+          }
+        ),
+        canManageSharing && sharingOpen && /* @__PURE__ */ jsx7(
+          ManageSharing,
+          {
+            entry,
+            listGrants,
+            addGrant,
+            revokeGrant
+          }
+        )
+      ]
+    }
+  );
+}
+function groundGuide(guide) {
+  const ungrounded = [];
+  const keep = (text) => {
+    if (!hasUngroundedPlaceholder(text)) return true;
+    ungrounded.push(text);
+    return false;
+  };
+  const prerequisites = guide.prerequisites.filter(keep);
+  const steps = guide.steps.filter(
+    (step) => keep(step.text) && (!step.copyable || keep(step.copyable))
+  );
+  const scopeNote = keep(guide.scope_note) ? guide.scope_note : null;
+  const verify = keep(guide.verify) ? guide.verify : null;
+  return { prerequisites, steps, scopeNote, verify, ungrounded };
+}
+function CopyableValue({ value, testId }) {
+  const [copied, setCopied] = useState7(false);
+  const timer = useRef5(null);
+  useEffect6(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const copy = useCallback4(async () => {
+    try {
+      if (typeof navigator.clipboard?.writeText !== "function") {
+        throw new Error("clipboard unavailable");
+      }
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs6("span", { className: "mt-1 flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx7(
+      "code",
+      {
+        "data-testid": `${testId}-value`,
+        className: "min-w-0 flex-1 truncate rounded bg-foreground/10 px-1.5 py-0.5 text-[11px]",
+        children: value
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        "data-testid": testId,
+        onClick: () => void copy(),
+        className: "shrink-0 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground hover:bg-foreground/10",
+        children: copied ? "Copied" : "Copy"
+      }
+    )
+  ] });
+}
+function SetupGuidePanel({
+  entry,
+  guide,
+  showVerify
+}) {
+  const { prerequisites, steps, scopeNote, verify, ungrounded } = groundGuide(guide);
+  const leaked = ungrounded.length > 0;
+  useEffect6(() => {
+    if (!leaked) return;
+    console.error(
+      `[ConnectorPicker] setup guide for "${entry.slug}" arrived with ungrounded placeholders:`,
+      ungrounded
+    );
+  }, [entry.slug, guide, leaked]);
+  return /* @__PURE__ */ jsxs6("div", { "data-testid": `connector-guide-${entry.slug}`, className: "flex flex-col gap-2", children: [
+    leaked && isDevEnvironment() && /* @__PURE__ */ jsxs6(
+      "p",
+      {
+        role: "alert",
+        "data-testid": `connector-guide-ungrounded-${entry.slug}`,
+        className: "rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1 text-xs text-destructive",
+        children: [
+          "Setup guide arrived with unresolved placeholders and those lines were dropped: ",
+          ungrounded.join(" \xB7 ")
+        ]
+      }
+    ),
+    prerequisites.length > 0 && /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx7("h4", { className: "text-xs font-medium", children: "Before you start" }),
+      /* @__PURE__ */ jsx7(
+        "ul",
+        {
+          "data-testid": `connector-guide-prerequisites-${entry.slug}`,
+          className: "mt-1 list-disc pl-4 text-xs text-muted-foreground",
+          children: prerequisites.map((item) => /* @__PURE__ */ jsx7("li", { children: item }, item))
+        }
+      )
+    ] }),
+    steps.length > 0 && /* @__PURE__ */ jsx7(
+      "ol",
+      {
+        "data-testid": `connector-guide-steps-${entry.slug}`,
+        className: "list-decimal pl-4 text-xs",
+        children: steps.map((step, index) => /* @__PURE__ */ jsxs6("li", { className: "mt-1 first:mt-0", children: [
+          /* @__PURE__ */ jsx7("span", { children: step.text }),
+          step.copyable && /* @__PURE__ */ jsx7(
+            CopyableValue,
+            {
+              value: step.copyable,
+              testId: `connector-guide-copy-${entry.slug}-${index}`
+            }
+          )
+        ] }, step.text))
+      }
+    ),
+    scopeNote && /* @__PURE__ */ jsx7(
+      "p",
+      {
+        "data-testid": `connector-guide-scope-note-${entry.slug}`,
+        className: "rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-xs font-medium",
+        children: scopeNote
+      }
+    ),
+    showVerify && verify && /* @__PURE__ */ jsx7(
+      "p",
+      {
+        "data-testid": `connector-guide-verify-${entry.slug}`,
+        className: "text-xs text-muted-foreground",
+        children: verify
+      }
+    )
+  ] });
+}
+function CredentialForm({
+  entry,
+  fields,
+  kind,
+  verify,
+  testSupported,
+  onSubmitCredentials,
+  onTestCredentials
+}) {
+  const [values, setValues] = useState7(() => {
+    const initial = {};
+    for (const field of fields) {
+      if (field.defaultValue) initial[field.key] = field.defaultValue;
+    }
+    return initial;
+  });
+  const [busy, setBusy] = useState7(false);
+  const [testing, setTesting] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [result, setResult] = useState7(null);
+  const entryRef = useRef5(entry);
+  entryRef.current = entry;
+  const updateField = useCallback4((key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setError(null);
+    setResult(null);
+  }, []);
+  const missingRequired = fields.filter((field) => field.required !== false).some((field) => !values[field.key]?.trim());
+  const failedTest = result?.valid === false;
+  const untested = testSupported && result === null;
+  const fieldErrors = result?.field_errors ?? null;
+  const handleTest = useCallback4(async () => {
+    setTesting(true);
+    setError(null);
+    setResult(null);
+    try {
+      setResult(await onTestCredentials(entryRef.current, values));
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_CREDENTIAL_TEST_ERROR));
+    } finally {
+      setTesting(false);
+    }
+  }, [onTestCredentials, values]);
+  const handleSubmit = useCallback4(async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await onSubmitCredentials(entryRef.current, values, kind);
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_CREDENTIAL_ERROR));
+    } finally {
+      setBusy(false);
+    }
+  }, [kind, onSubmitCredentials, values]);
+  return /* @__PURE__ */ jsxs6(
+    "form",
+    {
+      "data-testid": `connector-credential-form-${entry.slug}`,
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (missingRequired || busy || testing || failedTest || untested) return;
+        void handleSubmit();
+      },
+      className: "flex flex-col gap-2",
+      children: [
+        fields.map((field) => {
+          const inputId = `connector-credential-${entry.slug}-${field.key}`;
+          const fieldError = fieldErrors?.[field.key] ?? null;
+          return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs6("label", { htmlFor: inputId, className: "text-xs font-medium", children: [
+              field.label,
+              field.required !== false && /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                id: inputId,
+                "data-testid": `connector-credential-input-${entry.slug}-${field.key}`,
+                type: field.type ?? "text",
+                value: values[field.key] ?? "",
+                onChange: (event) => updateField(field.key, event.target.value),
+                placeholder: field.placeholder ?? void 0,
+                required: field.required !== false,
+                disabled: busy || testing,
+                autoComplete: "off",
+                "aria-invalid": fieldError ? true : void 0,
+                "aria-describedby": fieldError ? `${inputId}-error` : void 0,
+                className: cn(
+                  "rounded-md border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50",
+                  fieldError ? "border-destructive" : "border-border"
+                )
+              }
+            ),
+            fieldError && /* @__PURE__ */ jsx7(
+              "p",
+              {
+                id: `${inputId}-error`,
+                "data-testid": `connector-credential-field-error-${entry.slug}-${field.key}`,
+                className: "text-xs text-destructive",
+                children: fieldError
+              }
+            )
+          ] }, field.key);
+        }),
+        verify && /* @__PURE__ */ jsx7(
+          "p",
+          {
+            "data-testid": `connector-guide-verify-${entry.slug}`,
+            className: "text-xs text-muted-foreground",
+            children: verify
+          }
+        ),
+        result && /* @__PURE__ */ jsx7(CredentialTestResult, { entry, result }),
+        error && /* @__PURE__ */ jsx7(
+          "p",
+          {
+            role: "alert",
+            "data-testid": `connector-credential-error-${entry.slug}`,
+            className: "text-xs text-destructive",
+            children: error
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-1.5", children: [
+          testSupported && /* @__PURE__ */ jsx7(
+            "button",
             {
-              "data-testid": `connector-connected-since-${entry.slug}`,
-              className: "text-xs text-muted-foreground",
-              children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
+              type: "button",
+              "data-testid": `connector-credential-test-${entry.slug}`,
+              onClick: () => void handleTest(),
+              disabled: missingRequired || busy || testing,
+              className: "rounded-md border border-border px-2.5 py-1 text-xs font-medium disabled:opacity-50",
+              children: testing ? "Testing\u2026" : "Test connection"
             }
           ),
-          errorMessage && /* @__PURE__ */ jsx7("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
-        ] }),
-        isConnected ? /* @__PURE__ */ jsx7(
-          "button",
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "submit",
+              "data-testid": `connector-credential-save-${entry.slug}`,
+              disabled: missingRequired || busy || testing || failedTest || untested,
+              title: failedTest ? "That credential failed its own check \u2014 fix it and test again." : untested ? "Test the credential before saving it." : void 0,
+              className: "rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
+              children: busy ? "Saving\u2026" : "Save credential"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CredentialTestResult({
+  entry,
+  result
+}) {
+  if (result.valid === true) {
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        role: "status",
+        "data-testid": `connector-credential-test-pass-${entry.slug}`,
+        className: "rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-xs",
+        children: [
+          /* @__PURE__ */ jsx7("p", { children: result.account_name ? `Verified \u2014 connected as ${result.account_name}.` : "Verified \u2014 these credentials work." }),
+          result.permissions_note && /* @__PURE__ */ jsx7(
+            "p",
+            {
+              "data-testid": `connector-credential-permissions-${entry.slug}`,
+              className: "mt-0.5 font-medium",
+              children: result.permissions_note
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (result.valid === false) {
+    return /* @__PURE__ */ jsx7(
+      "p",
+      {
+        role: "alert",
+        "data-testid": `connector-credential-test-fail-${entry.slug}`,
+        className: "rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1 text-xs text-destructive",
+        children: result.error || "That credential didn't pass its check."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx7(
+    "p",
+    {
+      role: "status",
+      "data-testid": `connector-credential-test-unverified-${entry.slug}`,
+      className: "rounded-md border border-border px-2 py-1 text-xs text-muted-foreground",
+      children: UNVERIFIABLE_CREDENTIAL_NOTE
+    }
+  );
+}
+function ManageSharing({
+  entry,
+  listGrants,
+  addGrant,
+  revokeGrant
+}) {
+  const [grants, setGrants] = useState7(null);
+  const [error, setError] = useState7(null);
+  const [busy, setBusy] = useState7(false);
+  const [granteeType, setGranteeType] = useState7("user");
+  const [granteeId, setGranteeId] = useState7("");
+  const roleOptions = entry.org_connect?.role_options ?? [];
+  const entryRef = useRef5(entry);
+  entryRef.current = entry;
+  const load = useCallback4(async () => {
+    try {
+      setGrants(await listGrants(entryRef.current));
+      setError(null);
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_GRANTS_LOAD_ERROR));
+    }
+  }, [listGrants]);
+  useEffect6(() => {
+    void load();
+  }, [load]);
+  const handleAdd = useCallback4(async () => {
+    const id = granteeId.trim();
+    if (!id) return;
+    setBusy(true);
+    try {
+      await addGrant(entryRef.current, { granteeType, granteeId: id });
+      setGranteeId("");
+      await load();
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_GRANT_ERROR));
+    } finally {
+      setBusy(false);
+    }
+  }, [addGrant, granteeId, granteeType, load]);
+  const handleRevoke = useCallback4(
+    async (grantId) => {
+      setBusy(true);
+      try {
+        await revokeGrant(entryRef.current, grantId);
+        await load();
+      } catch (err) {
+        setError(errorMessageFrom(err, DEFAULT_REVOKE_ERROR));
+      } finally {
+        setBusy(false);
+      }
+    },
+    [load, revokeGrant]
+  );
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-testid": `connector-sharing-panel-${entry.slug}`,
+      className: "mt-2 flex flex-col gap-2 rounded-md border border-border bg-foreground/5 p-2",
+      children: [
+        grants === null && !error && /* @__PURE__ */ jsx7(
+          "p",
           {
-            type: "button",
-            "data-testid": `connector-disconnect-${entry.slug}`,
-            onClick: () => onDisconnect(entry),
-            disabled: isDisconnecting,
-            className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
-            children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
+            "data-testid": `connector-grants-loading-${entry.slug}`,
+            className: "text-xs text-muted-foreground",
+            children: "Loading sharing\u2026"
           }
-        ) : /* @__PURE__ */ jsx7(
-          "button",
+        ),
+        error && /* @__PURE__ */ jsx7(
+          "p",
           {
-            type: "button",
-            "data-testid": `connector-connect-${entry.slug}`,
-            onClick: () => onConnect(entry),
-            disabled: isConnecting,
-            className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
-            children: isConnecting ? "Connecting\u2026" : "Connect"
+            role: "alert",
+            "data-testid": `connector-sharing-error-${entry.slug}`,
+            className: "text-xs text-destructive",
+            children: error
           }
-        )
+        ),
+        grants !== null && grants.length === 0 && /* @__PURE__ */ jsx7(
+          "p",
+          {
+            "data-testid": `connector-grants-empty-${entry.slug}`,
+            className: "text-xs text-muted-foreground",
+            children: "Not shared with anyone yet."
+          }
+        ),
+        grants?.map((grant) => /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            "data-testid": `connector-grant-${entry.slug}-${grant.id}`,
+            className: "flex items-center justify-between gap-2 text-xs",
+            children: [
+              /* @__PURE__ */ jsxs6("span", { className: "truncate", children: [
+                grant.grantee_name || grant.grantee_id,
+                /* @__PURE__ */ jsxs6("span", { className: "text-muted-foreground", children: [
+                  " ",
+                  "\xB7 ",
+                  grant.grantee_type === "role" ? "Role" : "User"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": `connector-grant-revoke-${entry.slug}-${grant.id}`,
+                  onClick: () => void handleRevoke(grant.id),
+                  disabled: busy,
+                  className: "shrink-0 rounded-md px-2 py-0.5 font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                  children: "Revoke"
+                }
+              )
+            ]
+          },
+          grant.id
+        )),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxs6(
+            "select",
+            {
+              "data-testid": `connector-grant-type-${entry.slug}`,
+              "aria-label": "Grantee type",
+              value: granteeType,
+              onChange: (event) => {
+                setGranteeType(event.target.value);
+                setGranteeId("");
+              },
+              disabled: busy,
+              className: "rounded-md border border-border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ jsx7("option", { value: "user", children: "User" }),
+                /* @__PURE__ */ jsx7("option", { value: "role", children: "Role" })
+              ]
+            }
+          ),
+          granteeType === "user" ? /* @__PURE__ */ jsx7(
+            "input",
+            {
+              "data-testid": `connector-grant-grantee-${entry.slug}`,
+              "aria-label": "User ID",
+              value: granteeId,
+              onChange: (event) => setGranteeId(event.target.value),
+              placeholder: "User ID",
+              disabled: busy,
+              className: "min-w-0 flex-1 rounded-md border border-border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50"
+            }
+          ) : /* @__PURE__ */ jsxs6(
+            "select",
+            {
+              "data-testid": `connector-grant-role-${entry.slug}`,
+              "aria-label": "Role",
+              value: granteeId,
+              onChange: (event) => setGranteeId(event.target.value),
+              disabled: busy,
+              className: "min-w-0 flex-1 rounded-md border border-border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ jsx7("option", { value: "", children: "Select a role\u2026" }),
+                roleOptions.map((role) => /* @__PURE__ */ jsx7("option", { value: role.id, children: role.name }, role.id))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              "data-testid": `connector-grant-add-${entry.slug}`,
+              onClick: () => void handleAdd(),
+              disabled: busy || !granteeId.trim(),
+              className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
+              children: "Share"
+            }
+          )
+        ] })
       ]
     }
   );