@meetreeve/ui 0.13.0 → 0.15.0

package/dist/index.d.mts

@@ -632,7 +632,7 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * errors, and a return-from-OAuth refresh). Every label is derived from the
  * entry data the client returns — this file must never hardcode a specific
  * provider's name (an explicit acceptance criterion); a host app supplies
- * that entirely through `ConnectableEntry.name` / `.logo` / `.category`.
+ * that entirely through `ConnectableEntry.name` / `.logo`.
  *
  * Transport-injection precedent: `linkComponent` (DEV-4429/DEV-4391) —
  * inject the transport, keep behavior in the package. Here the "transport"
@@ -649,7 +649,17 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * optional grant methods, so a pre-CD-5 client keeps working unchanged.
  */
 type ConnectableTransport = "composio" | "native";
+/**
+ * The widest access an entry offers. "write" is retired (DEV-13661: no
+ * provider ever only acted, so its old label was never true); it stays in the
+ * union so an older server payload still type-checks, and it renders as
+ * "Read + write".
+ */
 type ConnectableCapability = "read" | "write" | "readwrite";
+/** What a connection lets Reeve do: ingest/query, or also act (DEV-13661). */
+type ConnectableAccess = "read" | "readwrite";
+/** The ONE access -> words mapping; nothing is labeled as acting alone (DEV-13661). */
+declare function accessLabel(access: ConnectableCapability): string;
 type ConnectionKind = "personal" | "org";
 type ConnectorGranteeType = "user" | "role";
 /** An RBAC role a grant can target, injected via the entry data (CD-2). */
@@ -664,7 +674,7 @@ interface ConnectorRoleOption {
  */
 interface OrgConnectPolicy {
     permitted: boolean;
-    /** Human-readable reason shown on the disabled org option. */
+    /** Why org connect isn't permitted (server-authored). */
     reason?: string | null;
     /** Role options offered by manage-sharing's "role" grantee type. */
     role_options?: ConnectorRoleOption[];
@@ -806,7 +816,24 @@ interface ConnectableEntry {
          * picker never assumes an email shape or synthesizes this itself.
          */
         account_label?: string | null;
+        /**
+         * What this live connection lets Reeve do (DEV-13661). Absent on a
+         * pre-DEV-13661 payload, where the entry's `capability` stands in.
+         */
+        access?: ConnectableAccess | null;
     };
+    /**
+     * The accesses this entry may be connected as (DEV-13661), in
+     * ("read", "readwrite") order. More than one renders a Read / Read + write
+     * choice whose pick reaches `client.connect` as `opts.access`.
+     */
+    access_options?: ConnectableAccess[] | null;
+    /**
+     * Every connection provider key that belongs to this entry's provider
+     * (its own slug first), so a host can group stored connections onto one
+     * row per provider (DEV-13661).
+     */
+    provider_keys?: string[] | null;
     /** true = tenant has a live connection but the entry left the allowlist. */
     deprecated: boolean;
     /** Org-connect permission + role options for this entry (CD-4). */
@@ -841,9 +868,12 @@ interface ConnectorPickerClient {
      * composio -> open the returned connect_url; native may resolve with none.
      * `opts.kind` is additive (DEV-5654): a pre-CD-5 client declaring only
      * `connect(entry)` still satisfies this signature and simply ignores it.
+     * `opts.access` (DEV-13661) is the row's Read / Read + write pick, sent
+     * only when the entry offers a choice.
      */
     connect(entry: ConnectableEntry, opts?: {
         kind: ConnectionKind;
+        access?: ConnectableAccess;
     }): Promise<{
         connect_url?: string;
     }>;
@@ -895,4 +925,4 @@ interface ConnectorPickerProps {
 }
 declare function ConnectorPicker({ client, purpose, lens, layout, onConnected, }: ConnectorPickerProps): react.JSX.Element | null;
 
-export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };
+export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableAccess, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, accessLabel, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };

package/dist/index.d.ts

@@ -632,7 +632,7 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * errors, and a return-from-OAuth refresh). Every label is derived from the
  * entry data the client returns — this file must never hardcode a specific
  * provider's name (an explicit acceptance criterion); a host app supplies
- * that entirely through `ConnectableEntry.name` / `.logo` / `.category`.
+ * that entirely through `ConnectableEntry.name` / `.logo`.
  *
  * Transport-injection precedent: `linkComponent` (DEV-4429/DEV-4391) —
  * inject the transport, keep behavior in the package. Here the "transport"
@@ -649,7 +649,17 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * optional grant methods, so a pre-CD-5 client keeps working unchanged.
  */
 type ConnectableTransport = "composio" | "native";
+/**
+ * The widest access an entry offers. "write" is retired (DEV-13661: no
+ * provider ever only acted, so its old label was never true); it stays in the
+ * union so an older server payload still type-checks, and it renders as
+ * "Read + write".
+ */
 type ConnectableCapability = "read" | "write" | "readwrite";
+/** What a connection lets Reeve do: ingest/query, or also act (DEV-13661). */
+type ConnectableAccess = "read" | "readwrite";
+/** The ONE access -> words mapping; nothing is labeled as acting alone (DEV-13661). */
+declare function accessLabel(access: ConnectableCapability): string;
 type ConnectionKind = "personal" | "org";
 type ConnectorGranteeType = "user" | "role";
 /** An RBAC role a grant can target, injected via the entry data (CD-2). */
@@ -664,7 +674,7 @@ interface ConnectorRoleOption {
  */
 interface OrgConnectPolicy {
     permitted: boolean;
-    /** Human-readable reason shown on the disabled org option. */
+    /** Why org connect isn't permitted (server-authored). */
     reason?: string | null;
     /** Role options offered by manage-sharing's "role" grantee type. */
     role_options?: ConnectorRoleOption[];
@@ -806,7 +816,24 @@ interface ConnectableEntry {
          * picker never assumes an email shape or synthesizes this itself.
          */
         account_label?: string | null;
+        /**
+         * What this live connection lets Reeve do (DEV-13661). Absent on a
+         * pre-DEV-13661 payload, where the entry's `capability` stands in.
+         */
+        access?: ConnectableAccess | null;
     };
+    /**
+     * The accesses this entry may be connected as (DEV-13661), in
+     * ("read", "readwrite") order. More than one renders a Read / Read + write
+     * choice whose pick reaches `client.connect` as `opts.access`.
+     */
+    access_options?: ConnectableAccess[] | null;
+    /**
+     * Every connection provider key that belongs to this entry's provider
+     * (its own slug first), so a host can group stored connections onto one
+     * row per provider (DEV-13661).
+     */
+    provider_keys?: string[] | null;
     /** true = tenant has a live connection but the entry left the allowlist. */
     deprecated: boolean;
     /** Org-connect permission + role options for this entry (CD-4). */
@@ -841,9 +868,12 @@ interface ConnectorPickerClient {
      * composio -> open the returned connect_url; native may resolve with none.
      * `opts.kind` is additive (DEV-5654): a pre-CD-5 client declaring only
      * `connect(entry)` still satisfies this signature and simply ignores it.
+     * `opts.access` (DEV-13661) is the row's Read / Read + write pick, sent
+     * only when the entry offers a choice.
      */
     connect(entry: ConnectableEntry, opts?: {
         kind: ConnectionKind;
+        access?: ConnectableAccess;
     }): Promise<{
         connect_url?: string;
     }>;
@@ -895,4 +925,4 @@ interface ConnectorPickerProps {
 }
 declare function ConnectorPicker({ client, purpose, lens, layout, onConnected, }: ConnectorPickerProps): react.JSX.Element | null;
 
-export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };
+export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableAccess, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, type ConnectionKind, type ConnectorConnectionHealth, type ConnectorCredentialField, type ConnectorCredentialTestResult, type ConnectorGrant, type ConnectorGrantInput, type ConnectorGranteeType, type ConnectorGuideStep, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ConnectorRoleOption, type ConnectorSetupGuide, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, InfoTip, type InfoTipProps, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, type OrgConnectPolicy, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, accessLabel, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };

package/dist/index.js

@@ -45,6 +45,7 @@ __export(src_exports, {
   REEVE_ACCENT: () => REEVE_ACCENT,
   ResponsiveHeader: () => ResponsiveHeader,
   WORDMARK_WEIGHT: () => WORDMARK_WEIGHT,
+  accessLabel: () => accessLabel,
   deriveFallbackLadder: () => deriveFallbackLadder,
   faviconUrl: () => faviconUrl,
   groupByOrg: () => groupByOrg,
@@ -1463,6 +1464,9 @@ function ContextSwitcher({
 // src/connector-picker.tsx
 var import_react9 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function accessLabel(access) {
+  return access === "read" ? "Read" : "Read + write";
+}
 var DEFAULT_CONNECT_ERROR = "Couldn't start the connection. Please try again.";
 var MAX_RECONNECT_REFOCUS_CHECKS = 3;
 var RECONNECT_UNCONFIRMED_ERROR = "Couldn't confirm the reconnect \u2014 the connection still reports unhealthy. Try again, or disconnect and reconnect.";
@@ -1471,7 +1475,6 @@ 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 DEFAULT_RECONNECT_MESSAGE = "This connection needs to be reconnected to keep working.";
@@ -1485,15 +1488,17 @@ function hasUngroundedPlaceholder(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";
-  return "Read & write";
+function tileAccess(entry) {
+  if (entry.connection.status === "connected" && entry.connection.access) {
+    return entry.connection.access;
+  }
+  return entry.capability;
 }
-function formatSince(since) {
-  const parsed = new Date(since);
-  if (Number.isNaN(parsed.getTime())) return since;
-  return parsed.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+function accessChoices(entry) {
+  const options = (entry.access_options ?? []).filter(
+    (a) => a === "read" || a === "readwrite"
+  );
+  return options.length > 1 ? options : [];
 }
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
@@ -1612,7 +1617,7 @@ function ConnectorPicker({
     };
   }, [gated, refreshAfterReturn]);
   const handleConnect = (0, import_react9.useCallback)(
-    async (entry, kind) => {
+    async (entry, kind, access) => {
       if (isUnhealthy(entry)) {
         reconnectingRef.current.add(entry.slug);
       } else {
@@ -1621,7 +1626,10 @@ function ConnectorPicker({
       reconnectChecksRef.current.delete(entry.slug);
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
-        const result = await clientRef.current.connect(entry, { kind });
+        const result = await clientRef.current.connect(
+          entry,
+          access ? { kind, access } : { kind }
+        );
         if (result?.connect_url) {
           window.open(result.connect_url, "_blank", "noopener,noreferrer");
           return;
@@ -1811,6 +1819,9 @@ function ConnectorTile({
   const errorMessage = ui?.kind === "error" ? ui.message : null;
   const unhealthy = isUnhealthy(entry);
   const [kind, setKind] = (0, import_react9.useState)("personal");
+  const choices = accessChoices(entry);
+  const [access, setAccess] = (0, import_react9.useState)(null);
+  const connectAccess = choices.length ? access && choices.includes(access) ? access : choices[choices.length - 1] : void 0;
   const [sharingOpen, setSharingOpen] = (0, import_react9.useState)(false);
   const [setupOpen, setSetupOpen] = (0, import_react9.useState)(false);
   const credentialFields = entry.credential_fields ?? [];
@@ -1818,7 +1829,7 @@ function ConnectorTile({
   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 connectKind = orgPermitted ? kind : "personal";
   const attribution = ownerLabel(entry);
   const canDisconnect = isConnected && !shared;
   const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
@@ -1845,20 +1856,22 @@ function ConnectorTile({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
-              entry.category && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+              (isConnected || choices.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: accessLabel(tileAccess(entry)) }),
+              isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate", children: entry.category })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  "span",
+                  {
+                    "data-testid": `connector-connected-${entry.slug}`,
+                    className: "inline-flex items-center gap-1",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
+                      "Connected"
+                    ]
+                  }
+                )
               ] })
             ] }),
-            isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "p",
-              {
-                "data-testid": `connector-connected-since-${entry.slug}`,
-                className: "text-xs text-muted-foreground",
-                children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
-              }
-            ),
             isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "p",
               {
@@ -1895,7 +1908,33 @@ function ConnectorTile({
                 children: attribution
               }
             ),
-            !isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            !isConnected && choices.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                "data-testid": `connector-access-choice-${entry.slug}`,
+                role: "group",
+                "aria-label": "Access",
+                className: "mt-1 flex items-center gap-1",
+                children: choices.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": `connector-access-${option}-${entry.slug}`,
+                    "aria-pressed": connectAccess === option,
+                    disabled: isConnecting,
+                    onClick: () => setAccess(option),
+                    className: cn(
+                      "rounded-full border px-2 py-0.5 text-[11px]",
+                      connectAccess === option ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                      "disabled:opacity-50"
+                    ),
+                    children: accessLabel(option)
+                  },
+                  option
+                ))
+              }
+            ),
+            !isConnected && orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 "data-testid": `connector-kind-toggle-${entry.slug}`,
@@ -1910,6 +1949,7 @@ function ConnectorTile({
                       "data-testid": `connector-kind-personal-${entry.slug}`,
                       "aria-pressed": kind === "personal",
                       disabled: isConnecting,
+                      title: "Just for you",
                       onClick: () => setKind("personal"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
@@ -1919,28 +1959,21 @@ function ConnectorTile({
                       children: "Personal"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
                       "data-testid": `connector-kind-org-${entry.slug}`,
                       "aria-pressed": kind === "org",
-                      disabled: isConnecting || !orgPermitted,
-                      title: orgPermitted ? void 0 : orgDisabledReason,
+                      disabled: isConnecting,
+                      title: "For your whole org",
                       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__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "sr-only", children: [
-                          " (",
-                          orgDisabledReason,
-                          ")"
-                        ] })
-                      ]
+                      children: "Org"
                     }
                   )
                 ]
@@ -1954,13 +1987,17 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-reconnect-${entry.slug}`,
-                onClick: () => onConnect(entry, entry.connection.kind ?? "personal"),
+                onClick: () => onConnect(entry, entry.connection.kind ?? "personal", entry.connection.access ?? void 0),
                 disabled: isConnecting || isDisconnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Reconnecting\u2026" : "Reconnect"
               }
             ),
-            canDisconnect && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            canDisconnect && // DEV-11580: the revoke reassurance lives in the title only —
+            // as an always-visible paragraph it wrapped to four lines
+            // beside every connected tile. Muted until hover so a
+            // destructive action isn't the loudest thing on the tile.
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -1968,27 +2005,10 @@ function ConnectorTile({
                 title: DISCONNECT_REVOKES_HINT,
                 onClick: () => onDisconnect(entry),
                 disabled: isDisconnecting || isConnecting,
-                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-50",
                 children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
               }
             ),
-            canDisconnect && // Outcome-eval finding (DEV-7873): with no width cap, this
-            // paragraph's one long sentence forced the WHOLE shrink-0
-            // button column to grow to its natural (unwrapped) width,
-            // squeezing the sibling `min-w-0 flex-1` text column down to
-            // one word per line at any realistic tile width. RTL's jsdom
-            // tests never caught it — jsdom doesn't lay out real flexbox
-            // sizing, so every textContent assertion still passed. A
-            // narrow max-width forces the hint to wrap within the same
-            // footprint as the button above it instead.
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "p",
-              {
-                "data-testid": `connector-disconnect-hint-${entry.slug}`,
-                className: "max-w-28 text-right text-[11px] text-muted-foreground",
-                children: DISCONNECT_REVOKES_HINT
-              }
-            ),
             canManageSharing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
@@ -2006,7 +2026,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-connect-${entry.slug}`,
-                onClick: () => onConnect(entry, kind),
+                onClick: () => onConnect(entry, connectKind, connectAccess),
                 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"
@@ -2039,7 +2059,7 @@ function ConnectorTile({
                 {
                   entry,
                   fields: credentialFields,
-                  kind,
+                  kind: connectKind,
                   verify: guide?.verify ?? null,
                   testSupported: credentialTestSupported,
                   onSubmitCredentials,
@@ -2579,6 +2599,7 @@ function ManageSharing({
   REEVE_ACCENT,
   ResponsiveHeader,
   WORDMARK_WEIGHT,
+  accessLabel,
   deriveFallbackLadder,
   faviconUrl,
   groupByOrg,

package/dist/index.mjs

@@ -1407,6 +1407,9 @@ function ContextSwitcher({
 // src/connector-picker.tsx
 import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function accessLabel(access) {
+  return access === "read" ? "Read" : "Read + write";
+}
 var DEFAULT_CONNECT_ERROR = "Couldn't start the connection. Please try again.";
 var MAX_RECONNECT_REFOCUS_CHECKS = 3;
 var RECONNECT_UNCONFIRMED_ERROR = "Couldn't confirm the reconnect \u2014 the connection still reports unhealthy. Try again, or disconnect and reconnect.";
@@ -1415,7 +1418,6 @@ 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 DEFAULT_RECONNECT_MESSAGE = "This connection needs to be reconnected to keep working.";
@@ -1429,15 +1431,17 @@ function hasUngroundedPlaceholder(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";
-  return "Read & write";
+function tileAccess(entry) {
+  if (entry.connection.status === "connected" && entry.connection.access) {
+    return entry.connection.access;
+  }
+  return entry.capability;
 }
-function formatSince(since) {
-  const parsed = new Date(since);
-  if (Number.isNaN(parsed.getTime())) return since;
-  return parsed.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+function accessChoices(entry) {
+  const options = (entry.access_options ?? []).filter(
+    (a) => a === "read" || a === "readwrite"
+  );
+  return options.length > 1 ? options : [];
 }
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
@@ -1556,7 +1560,7 @@ function ConnectorPicker({
     };
   }, [gated, refreshAfterReturn]);
   const handleConnect = useCallback4(
-    async (entry, kind) => {
+    async (entry, kind, access) => {
       if (isUnhealthy(entry)) {
         reconnectingRef.current.add(entry.slug);
       } else {
@@ -1565,7 +1569,10 @@ function ConnectorPicker({
       reconnectChecksRef.current.delete(entry.slug);
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
-        const result = await clientRef.current.connect(entry, { kind });
+        const result = await clientRef.current.connect(
+          entry,
+          access ? { kind, access } : { kind }
+        );
         if (result?.connect_url) {
           window.open(result.connect_url, "_blank", "noopener,noreferrer");
           return;
@@ -1755,6 +1762,9 @@ function ConnectorTile({
   const errorMessage = ui?.kind === "error" ? ui.message : null;
   const unhealthy = isUnhealthy(entry);
   const [kind, setKind] = useState7("personal");
+  const choices = accessChoices(entry);
+  const [access, setAccess] = useState7(null);
+  const connectAccess = choices.length ? access && choices.includes(access) ? access : choices[choices.length - 1] : void 0;
   const [sharingOpen, setSharingOpen] = useState7(false);
   const [setupOpen, setSetupOpen] = useState7(false);
   const credentialFields = entry.credential_fields ?? [];
@@ -1762,7 +1772,7 @@ function ConnectorTile({
   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 connectKind = orgPermitted ? kind : "personal";
   const attribution = ownerLabel(entry);
   const canDisconnect = isConnected && !shared;
   const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
@@ -1789,20 +1799,22 @@ function ConnectorTile({
               )
             ] }),
             /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx8("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
-              entry.category && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+              (isConnected || choices.length === 0) && /* @__PURE__ */ jsx8("span", { "data-testid": `connector-capability-${entry.slug}`, children: accessLabel(tileAccess(entry)) }),
+              isConnected && /* @__PURE__ */ jsxs7(Fragment4, { children: [
                 /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\xB7" }),
-                /* @__PURE__ */ jsx8("span", { className: "truncate", children: entry.category })
+                /* @__PURE__ */ jsxs7(
+                  "span",
+                  {
+                    "data-testid": `connector-connected-${entry.slug}`,
+                    className: "inline-flex items-center gap-1",
+                    children: [
+                      /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
+                      "Connected"
+                    ]
+                  }
+                )
               ] })
             ] }),
-            isConnected && /* @__PURE__ */ jsx8(
-              "p",
-              {
-                "data-testid": `connector-connected-since-${entry.slug}`,
-                className: "text-xs text-muted-foreground",
-                children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
-              }
-            ),
             isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ jsxs7(
               "p",
               {
@@ -1839,7 +1851,33 @@ function ConnectorTile({
                 children: attribution
               }
             ),
-            !isConnected && /* @__PURE__ */ jsxs7(
+            !isConnected && choices.length > 0 && /* @__PURE__ */ jsx8(
+              "div",
+              {
+                "data-testid": `connector-access-choice-${entry.slug}`,
+                role: "group",
+                "aria-label": "Access",
+                className: "mt-1 flex items-center gap-1",
+                children: choices.map((option) => /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": `connector-access-${option}-${entry.slug}`,
+                    "aria-pressed": connectAccess === option,
+                    disabled: isConnecting,
+                    onClick: () => setAccess(option),
+                    className: cn(
+                      "rounded-full border px-2 py-0.5 text-[11px]",
+                      connectAccess === option ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                      "disabled:opacity-50"
+                    ),
+                    children: accessLabel(option)
+                  },
+                  option
+                ))
+              }
+            ),
+            !isConnected && orgPermitted && /* @__PURE__ */ jsxs7(
               "div",
               {
                 "data-testid": `connector-kind-toggle-${entry.slug}`,
@@ -1854,6 +1892,7 @@ function ConnectorTile({
                       "data-testid": `connector-kind-personal-${entry.slug}`,
                       "aria-pressed": kind === "personal",
                       disabled: isConnecting,
+                      title: "Just for you",
                       onClick: () => setKind("personal"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
@@ -1863,28 +1902,21 @@ function ConnectorTile({
                       children: "Personal"
                     }
                   ),
-                  /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
                       "data-testid": `connector-kind-org-${entry.slug}`,
                       "aria-pressed": kind === "org",
-                      disabled: isConnecting || !orgPermitted,
-                      title: orgPermitted ? void 0 : orgDisabledReason,
+                      disabled: isConnecting,
+                      title: "For your whole org",
                       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__ */ jsxs7("span", { className: "sr-only", children: [
-                          " (",
-                          orgDisabledReason,
-                          ")"
-                        ] })
-                      ]
+                      children: "Org"
                     }
                   )
                 ]
@@ -1898,13 +1930,17 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-reconnect-${entry.slug}`,
-                onClick: () => onConnect(entry, entry.connection.kind ?? "personal"),
+                onClick: () => onConnect(entry, entry.connection.kind ?? "personal", entry.connection.access ?? void 0),
                 disabled: isConnecting || isDisconnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Reconnecting\u2026" : "Reconnect"
               }
             ),
-            canDisconnect && /* @__PURE__ */ jsx8(
+            canDisconnect && // DEV-11580: the revoke reassurance lives in the title only —
+            // as an always-visible paragraph it wrapped to four lines
+            // beside every connected tile. Muted until hover so a
+            // destructive action isn't the loudest thing on the tile.
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -1912,27 +1948,10 @@ function ConnectorTile({
                 title: DISCONNECT_REVOKES_HINT,
                 onClick: () => onDisconnect(entry),
                 disabled: isDisconnecting || isConnecting,
-                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-50",
                 children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
               }
             ),
-            canDisconnect && // Outcome-eval finding (DEV-7873): with no width cap, this
-            // paragraph's one long sentence forced the WHOLE shrink-0
-            // button column to grow to its natural (unwrapped) width,
-            // squeezing the sibling `min-w-0 flex-1` text column down to
-            // one word per line at any realistic tile width. RTL's jsdom
-            // tests never caught it — jsdom doesn't lay out real flexbox
-            // sizing, so every textContent assertion still passed. A
-            // narrow max-width forces the hint to wrap within the same
-            // footprint as the button above it instead.
-            /* @__PURE__ */ jsx8(
-              "p",
-              {
-                "data-testid": `connector-disconnect-hint-${entry.slug}`,
-                className: "max-w-28 text-right text-[11px] text-muted-foreground",
-                children: DISCONNECT_REVOKES_HINT
-              }
-            ),
             canManageSharing && /* @__PURE__ */ jsx8(
               "button",
               {
@@ -1950,7 +1969,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-connect-${entry.slug}`,
-                onClick: () => onConnect(entry, kind),
+                onClick: () => onConnect(entry, connectKind, connectAccess),
                 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"
@@ -1983,7 +2002,7 @@ function ConnectorTile({
                 {
                   entry,
                   fields: credentialFields,
-                  kind,
+                  kind: connectKind,
                   verify: guide?.verify ?? null,
                   testSupported: credentialTestSupported,
                   onSubmitCredentials,
@@ -2522,6 +2541,7 @@ export {
   REEVE_ACCENT,
   ResponsiveHeader,
   WORDMARK_WEIGHT,
+  accessLabel,
   deriveFallbackLadder,
   faviconUrl,
   groupByOrg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
   "license": "UNLICENSED",
   "main": "./dist/index.js",