@meetreeve/ui 0.8.0 → 0.9.0

package/dist/index.mjs

@@ -784,13 +784,23 @@ function Flyout({
             className: cn(
               "group flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
               collapsed && "justify-center px-0",
-              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+              // DEV-6586: this trigger renders as a row inside AppSidebar's own
+              // `<nav>` (a `bg-sidebar` surface that stays dark navy in both
+              // themes) — same fix as NavLink, same measured ratios (default
+              // 8.05:1, hover 13.65:1, active 10.95:1). The flyout PANEL below
+              // is intentionally left on document tokens: it renders via
+              // `position: fixed`, floating over the main content area on
+              // `bg-background`, not over the sidebar.
+              active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
             ),
             children: [
               /* @__PURE__ */ jsx3(
                 Icon,
                 {
-                  className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+                  className: cn(
+                    "size-4 shrink-0",
+                    active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
+                  ),
                   strokeWidth: 1.5,
                   "aria-hidden": "true"
                 }
@@ -873,13 +883,23 @@ function NavLink({
       className: cn(
         "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
         collapsed && "justify-center px-0",
-        active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+        // DEV-6586: the sidebar is a permanently dark-navy surface in BOTH
+        // app themes (see `--sidebar-*` in globals.css) — styling from
+        // document-theme tokens (text-foreground/text-muted-foreground) put
+        // dark-on-dark text here in light mode. `--sidebar-foreground` /
+        // `--sidebar-accent(-foreground)` are theme-invariant, so hover/
+        // active reliably INCREASE legibility instead of erasing it:
+        // default 8.05:1, hover 13.65:1, active 10.95:1 (all >= 4.5:1 AA).
+        active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
       ),
       children: [
         /* @__PURE__ */ jsx4(
           Icon,
           {
-            className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+            className: cn(
+              "size-4 shrink-0",
+              active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
+            ),
             strokeWidth: 1.5,
             "aria-hidden": "true"
           }
@@ -1022,7 +1042,7 @@ function AppSidebar({
           href: brand.href,
           "data-testid": "app-sidebar-brand",
           title: brand.label,
-          className: "flex items-center justify-center border-b border-border px-1 py-4",
+          className: "flex items-center justify-center border-b border-sidebar-border px-1 py-4",
           children: [
             /* @__PURE__ */ jsx4("span", { className: "sr-only", children: brand.label }),
             /* @__PURE__ */ jsx4(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
@@ -1035,9 +1055,9 @@ function AppSidebar({
       {
         href: brand.href,
         "data-testid": "app-sidebar-brand",
-        className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
+        className: "flex items-center gap-2.5 border-b border-sidebar-border px-5 py-4 text-sidebar-foreground",
         children: [
-          /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
+          /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
           /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
         ]
       }
@@ -1093,7 +1113,7 @@ function AppSidebar({
           "aria-modal": "true",
           "aria-label": "Navigation",
           "data-testid": "app-sidebar-mobile-drawer",
-          className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-border bg-sidebar",
+          className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar",
           children: [
             /* @__PURE__ */ jsx4("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ jsx4(
               "button",
@@ -1104,7 +1124,7 @@ function AppSidebar({
                 "aria-label": `Close ${menuLabel.toLowerCase()}`,
                 onClick: () => setMobileOpen(false),
                 style: TOUCH_TARGET_STYLE,
-                className: "flex items-center justify-center rounded-md p-2 text-foreground hover:bg-foreground/5",
+                className: "flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
                 children: /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" })
               }
             ) }),
@@ -1122,7 +1142,7 @@ function AppSidebar({
       {
         "data-testid": "app-sidebar-desktop",
         className: cn(
-          "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
+          "hidden shrink-0 flex-col border-r border-sidebar-border bg-sidebar md:flex",
           collapsed ? COLLAPSED_WIDTH_CLASS : EXPANDED_WIDTH_CLASS,
           // DEV-5331: a plain CSS width transition is enough — no new deps
           // for a spring/JS animation. Respect prefers-reduced-motion.
@@ -1143,7 +1163,7 @@ function AppSidebar({
               ) })
             }
           ),
-          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
+          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-sidebar-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
@@ -1153,7 +1173,7 @@ function AppSidebar({
               title: collapsed ? "Expand sidebar" : "Collapse sidebar",
               onClick: handleToggleCollapsed,
               className: cn(
-                "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
+                "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
                 collapsed && "justify-center px-0"
               ),
               children: [
@@ -1291,18 +1311,18 @@ function ContextSwitcher({
         type: "button",
         title: active?.name || placeholder,
         "aria-label": active?.name || placeholder,
-        className: "flex h-10 w-10 items-center justify-center rounded-lg text-zinc-700 transition-colors hover:bg-zinc-900/5 dark:text-zinc-300 dark:hover:bg-white/5",
+        className: "flex h-10 w-10 items-center justify-center rounded-lg text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
         children: /* @__PURE__ */ jsx6(BrandGlyph, { brand: toBrand(active ?? { name: "" }), size: "lg" })
       }
     ) : /* @__PURE__ */ jsxs5(
       "button",
       {
         type: "button",
-        className: "group flex items-center gap-2 rounded-md border border-border bg-card/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-muted",
+        className: "group flex items-center gap-2 rounded-md border border-sidebar-border bg-sidebar-accent/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar",
         children: [
           /* @__PURE__ */ jsx6(BrandGlyph, { brand: toBrand(active ?? { name: "" }) }),
-          /* @__PURE__ */ jsx6("span", { className: "max-w-[140px] truncate text-foreground/90", children: active?.name || placeholder }),
-          /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+          /* @__PURE__ */ jsx6("span", { className: "max-w-[140px] truncate text-sidebar-accent-foreground", children: active?.name || placeholder }),
+          /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3.5 w-3.5 text-sidebar-foreground/70 transition-transform group-data-[state=open]:rotate-180" })
         ]
       }
     ) }),
@@ -1348,6 +1368,10 @@ 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 SKELETON_COUNT = 3;
 function capabilityLabel(capability) {
   if (capability === "read") return "Read only";
@@ -1362,6 +1386,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,
@@ -1373,6 +1408,7 @@ 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 clientRef = useRef5(client);
   clientRef.current = client;
   const purposeRef = useRef5(purpose);
@@ -1431,10 +1467,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;
@@ -1474,121 +1510,429 @@ 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,
+          onConnect: handleConnect,
+          onDisconnect: handleDisconnect,
+          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,
+          onConnect: handleConnect,
+          onDisconnect: handleDisconnect,
+          listGrants,
+          addGrant,
+          revokeGrant
+        },
+        entry.slug
+      )) })
+    ] })
   ] });
 }
 function ConnectorTile({
   entry,
   ui,
   layout,
+  shared = false,
+  grantsSupported,
   onConnect,
-  onDisconnect
+  onDisconnect,
+  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 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__ */ 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-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"
             }
-          ),
-          errorMessage && /* @__PURE__ */ jsx7("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
+          )
         ] }),
-        isConnected ? /* @__PURE__ */ jsx7(
-          "button",
+        canManageSharing && sharingOpen && /* @__PURE__ */ jsx7(
+          ManageSharing,
           {
-            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"
+            entry,
+            listGrants,
+            addGrant,
+            revokeGrant
           }
-        ) : /* @__PURE__ */ jsx7(
-          "button",
+        )
+      ]
+    }
+  );
+}
+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-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"
+            "data-testid": `connector-grants-loading-${entry.slug}`,
+            className: "text-xs text-muted-foreground",
+            children: "Loading sharing\u2026"
           }
-        )
+        ),
+        error && /* @__PURE__ */ jsx7(
+          "p",
+          {
+            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"
+            }
+          )
+        ] })
       ]
     }
   );