@meetreeve/ui 0.11.0 → 0.12.0

package/dist/index.d.mts

@@ -719,6 +719,19 @@ interface ConnectorCredentialTestResult {
      */
     permissions_note?: string | null;
 }
+/**
+ * Connector health as the DEV-1964 probe classifies it — Reeve.Connects-wide
+ * vocabulary, not provider-specific (the same shape the adbuyer surfaces
+ * already read off `GET /api/connects/v1/connections`). Deliberately
+ * tri-state, never a `needs_reconnect` boolean (Matt's call, DEV-7873): a
+ * probe that has not run yet ("unknown") or has not run at all (the whole
+ * field absent) is not the same claim as a probe that ran and failed.
+ */
+interface ConnectorConnectionHealth {
+    status: "healthy" | "unhealthy" | "unknown";
+    error_code?: string | null;
+    checked_at?: string | null;
+}
 interface ConnectableEntry {
     slug: string;
     name: string;
@@ -749,6 +762,21 @@ interface ConnectableEntry {
         } | null;
         /** true = the viewer owns this connection (enables manage-sharing). */
         owned_by_viewer?: boolean;
+        /**
+         * Live health probe for this connection (DEV-1964 / DEV-7873), when the
+         * backend has one. Absent/undefined is NOT "healthy" — it means no probe
+         * has run; the picker only ever reacts to an explicit "unhealthy"
+         * status, so "unknown" and absent both render as a plain connected
+         * tile, same as before this field existed.
+         */
+        health?: ConnectorConnectionHealth | null;
+        /**
+         * Human-readable identity of the external account this connection
+         * authenticated as (an email, a workspace name, whatever the provider's
+         * own identity claim resolves to). Optional and provider-agnostic — the
+         * picker never assumes an email shape or synthesizes this itself.
+         */
+        account_label?: string | null;
     };
     /** true = tenant has a live connection but the entry left the allowlist. */
     deprecated: boolean;
@@ -766,6 +794,15 @@ interface ConnectableEntry {
      * connect button renders, exactly as before.
      */
     credential_fields?: ConnectorCredentialField[] | null;
+    /**
+     * Plain-language description of what a LIVE connection actually reads or
+     * writes (e.g. "Reads recent activity to build your weekly summary") —
+     * entirely server-authored copy, same posture as `category`/`name`.
+     * Rendered only once connected (it describes a live grant, not the
+     * catalog listing); absent renders nothing. This file must never
+     * synthesize this text itself for a specific provider.
+     */
+    access_summary?: string | null;
 }
 interface ConnectorPickerClient {
     listConnectable(opts: {
@@ -829,4 +866,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 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, 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 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, 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 };

package/dist/index.d.ts

@@ -719,6 +719,19 @@ interface ConnectorCredentialTestResult {
      */
     permissions_note?: string | null;
 }
+/**
+ * Connector health as the DEV-1964 probe classifies it — Reeve.Connects-wide
+ * vocabulary, not provider-specific (the same shape the adbuyer surfaces
+ * already read off `GET /api/connects/v1/connections`). Deliberately
+ * tri-state, never a `needs_reconnect` boolean (Matt's call, DEV-7873): a
+ * probe that has not run yet ("unknown") or has not run at all (the whole
+ * field absent) is not the same claim as a probe that ran and failed.
+ */
+interface ConnectorConnectionHealth {
+    status: "healthy" | "unhealthy" | "unknown";
+    error_code?: string | null;
+    checked_at?: string | null;
+}
 interface ConnectableEntry {
     slug: string;
     name: string;
@@ -749,6 +762,21 @@ interface ConnectableEntry {
         } | null;
         /** true = the viewer owns this connection (enables manage-sharing). */
         owned_by_viewer?: boolean;
+        /**
+         * Live health probe for this connection (DEV-1964 / DEV-7873), when the
+         * backend has one. Absent/undefined is NOT "healthy" — it means no probe
+         * has run; the picker only ever reacts to an explicit "unhealthy"
+         * status, so "unknown" and absent both render as a plain connected
+         * tile, same as before this field existed.
+         */
+        health?: ConnectorConnectionHealth | null;
+        /**
+         * Human-readable identity of the external account this connection
+         * authenticated as (an email, a workspace name, whatever the provider's
+         * own identity claim resolves to). Optional and provider-agnostic — the
+         * picker never assumes an email shape or synthesizes this itself.
+         */
+        account_label?: string | null;
     };
     /** true = tenant has a live connection but the entry left the allowlist. */
     deprecated: boolean;
@@ -766,6 +794,15 @@ interface ConnectableEntry {
      * connect button renders, exactly as before.
      */
     credential_fields?: ConnectorCredentialField[] | null;
+    /**
+     * Plain-language description of what a LIVE connection actually reads or
+     * writes (e.g. "Reads recent activity to build your weekly summary") —
+     * entirely server-authored copy, same posture as `category`/`name`.
+     * Rendered only once connected (it describes a live grant, not the
+     * catalog listing); absent renders nothing. This file must never
+     * synthesize this text itself for a specific provider.
+     */
+    access_summary?: string | null;
 }
 interface ConnectorPickerClient {
     listConnectable(opts: {
@@ -829,4 +866,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 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, 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 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, 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 };

package/dist/index.js

@@ -1425,6 +1425,8 @@ function ContextSwitcher({
 var import_react9 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 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.";
 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.";
@@ -1433,6 +1435,8 @@ 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.";
+var DISCONNECT_REVOKES_HINT = "Disconnecting revokes Reeve's access to this account.";
 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 = /\{\{[^}]*\}\}/;
@@ -1466,6 +1470,9 @@ function ownerLabel(entry) {
 function isSharedWithViewer(entry) {
   return entry.connection.status === "connected" && Boolean(entry.connection.shared_by) && !entry.connection.owned_by_viewer;
 }
+function isUnhealthy(entry) {
+  return entry.connection.status === "connected" && entry.connection.health?.status === "unhealthy";
+}
 function ConnectorPicker({
   client,
   purpose,
@@ -1477,6 +1484,9 @@ function ConnectorPicker({
   const [entries, setEntries] = (0, import_react9.useState)(null);
   const [loadError, setLoadError] = (0, import_react9.useState)(null);
   const [uiState, setUiState] = (0, import_react9.useState)({});
+  const reconnectingRef = (0, import_react9.useRef)(/* @__PURE__ */ new Set());
+  const reconnectChecksRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  const refreshInFlightRef = (0, import_react9.useRef)(false);
   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";
@@ -1505,20 +1515,45 @@ function ConnectorPicker({
     void load();
   }, [gated, load, purpose]);
   const refreshAfterReturn = (0, import_react9.useCallback)(async () => {
-    const list = await load();
-    if (!list) return;
-    setUiState((prev) => {
-      let changed = false;
-      const next = { ...prev };
+    if (refreshInFlightRef.current) return;
+    refreshInFlightRef.current = true;
+    try {
+      const list = await load();
+      if (!list) return;
+      const stillUnhealthyChecks = /* @__PURE__ */ new Map();
       for (const entry of list) {
-        if (next[entry.slug]?.kind === "connecting" && entry.connection.status === "connected") {
-          changed = true;
-          delete next[entry.slug];
-          onConnectedRef.current?.(entry);
-        }
+        const stillUnhealthy = reconnectingRef.current.has(entry.slug) && entry.connection.health?.status === "unhealthy";
+        if (!stillUnhealthy) continue;
+        const checks = (reconnectChecksRef.current.get(entry.slug) ?? 0) + 1;
+        reconnectChecksRef.current.set(entry.slug, checks);
+        stillUnhealthyChecks.set(entry.slug, checks);
       }
-      return changed ? next : prev;
-    });
+      setUiState((prev) => {
+        let changed = false;
+        const next = { ...prev };
+        for (const entry of list) {
+          if (next[entry.slug]?.kind !== "connecting" || entry.connection.status !== "connected") {
+            continue;
+          }
+          const checks = stillUnhealthyChecks.get(entry.slug);
+          if (checks !== void 0 && checks >= MAX_RECONNECT_REFOCUS_CHECKS) {
+            changed = true;
+            reconnectingRef.current.delete(entry.slug);
+            reconnectChecksRef.current.delete(entry.slug);
+            next[entry.slug] = { kind: "error", message: RECONNECT_UNCONFIRMED_ERROR };
+          } else if (checks === void 0) {
+            changed = true;
+            delete next[entry.slug];
+            reconnectingRef.current.delete(entry.slug);
+            reconnectChecksRef.current.delete(entry.slug);
+            onConnectedRef.current?.(entry);
+          }
+        }
+        return changed ? next : prev;
+      });
+    } finally {
+      refreshInFlightRef.current = false;
+    }
   }, [load]);
   (0, import_react9.useEffect)(() => {
     if (gated) return;
@@ -1539,6 +1574,12 @@ function ConnectorPicker({
   }, [gated, refreshAfterReturn]);
   const handleConnect = (0, import_react9.useCallback)(
     async (entry, kind) => {
+      if (isUnhealthy(entry)) {
+        reconnectingRef.current.add(entry.slug);
+      } else {
+        reconnectingRef.current.delete(entry.slug);
+      }
+      reconnectChecksRef.current.delete(entry.slug);
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
         const result = await clientRef.current.connect(entry, { kind });
@@ -1548,6 +1589,8 @@ function ConnectorPicker({
         }
         const list = await load();
         const updated = list?.find((e) => e.slug === entry.slug) ?? null;
+        reconnectingRef.current.delete(entry.slug);
+        reconnectChecksRef.current.delete(entry.slug);
         setUiState((prev) => {
           const next = { ...prev };
           delete next[entry.slug];
@@ -1557,6 +1600,8 @@ function ConnectorPicker({
           onConnectedRef.current?.(updated);
         }
       } catch (err) {
+        reconnectingRef.current.delete(entry.slug);
+        reconnectChecksRef.current.delete(entry.slug);
         const message = errorMessageFrom(err, DEFAULT_CONNECT_ERROR);
         setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "error", message } }));
       }
@@ -1725,6 +1770,7 @@ function ConnectorTile({
   const isConnecting = ui?.kind === "connecting";
   const isDisconnecting = ui?.kind === "disconnecting";
   const errorMessage = ui?.kind === "error" ? ui.message : null;
+  const unhealthy = isUnhealthy(entry);
   const [kind, setKind] = (0, import_react9.useState)("personal");
   const [sharingOpen, setSharingOpen] = (0, import_react9.useState)(false);
   const [setupOpen, setSetupOpen] = (0, import_react9.useState)(false);
@@ -1774,6 +1820,34 @@ function ConnectorTile({
                 children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
               }
             ),
+            isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "p",
+              {
+                "data-testid": `connector-account-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: [
+                  "Connected as ",
+                  entry.connection.account_label
+                ]
+              }
+            ),
+            isConnected && entry.access_summary && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "p",
+              {
+                "data-testid": `connector-access-summary-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: entry.access_summary
+              }
+            ),
+            unhealthy && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "p",
+              {
+                role: "alert",
+                "data-testid": `connector-unhealthy-${entry.slug}`,
+                className: "text-xs font-medium text-destructive",
+                children: DEFAULT_RECONNECT_MESSAGE
+              }
+            ),
             attribution && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "p",
               {
@@ -1836,17 +1910,46 @@ function ConnectorTile({
             errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
           ] }),
           isConnected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            unhealthy && !shared && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-reconnect-${entry.slug}`,
+                onClick: () => onConnect(entry, entry.connection.kind ?? "personal"),
+                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_runtime7.jsx)(
               "button",
               {
                 type: "button",
                 "data-testid": `connector-disconnect-${entry.slug}`,
+                title: DISCONNECT_REVOKES_HINT,
                 onClick: () => onDisconnect(entry),
-                disabled: isDisconnecting,
+                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",
                 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_runtime7.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_runtime7.jsx)(
               "button",
               {

package/dist/index.mjs

@@ -1370,6 +1370,8 @@ function ContextSwitcher({
 import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 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.";
 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.";
@@ -1378,6 +1380,8 @@ 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.";
+var DISCONNECT_REVOKES_HINT = "Disconnecting revokes Reeve's access to this account.";
 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 = /\{\{[^}]*\}\}/;
@@ -1411,6 +1415,9 @@ function ownerLabel(entry) {
 function isSharedWithViewer(entry) {
   return entry.connection.status === "connected" && Boolean(entry.connection.shared_by) && !entry.connection.owned_by_viewer;
 }
+function isUnhealthy(entry) {
+  return entry.connection.status === "connected" && entry.connection.health?.status === "unhealthy";
+}
 function ConnectorPicker({
   client,
   purpose,
@@ -1422,6 +1429,9 @@ function ConnectorPicker({
   const [entries, setEntries] = useState7(null);
   const [loadError, setLoadError] = useState7(null);
   const [uiState, setUiState] = useState7({});
+  const reconnectingRef = useRef5(/* @__PURE__ */ new Set());
+  const reconnectChecksRef = useRef5(/* @__PURE__ */ new Map());
+  const refreshInFlightRef = useRef5(false);
   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";
@@ -1450,20 +1460,45 @@ function ConnectorPicker({
     void load();
   }, [gated, load, purpose]);
   const refreshAfterReturn = useCallback4(async () => {
-    const list = await load();
-    if (!list) return;
-    setUiState((prev) => {
-      let changed = false;
-      const next = { ...prev };
+    if (refreshInFlightRef.current) return;
+    refreshInFlightRef.current = true;
+    try {
+      const list = await load();
+      if (!list) return;
+      const stillUnhealthyChecks = /* @__PURE__ */ new Map();
       for (const entry of list) {
-        if (next[entry.slug]?.kind === "connecting" && entry.connection.status === "connected") {
-          changed = true;
-          delete next[entry.slug];
-          onConnectedRef.current?.(entry);
-        }
+        const stillUnhealthy = reconnectingRef.current.has(entry.slug) && entry.connection.health?.status === "unhealthy";
+        if (!stillUnhealthy) continue;
+        const checks = (reconnectChecksRef.current.get(entry.slug) ?? 0) + 1;
+        reconnectChecksRef.current.set(entry.slug, checks);
+        stillUnhealthyChecks.set(entry.slug, checks);
       }
-      return changed ? next : prev;
-    });
+      setUiState((prev) => {
+        let changed = false;
+        const next = { ...prev };
+        for (const entry of list) {
+          if (next[entry.slug]?.kind !== "connecting" || entry.connection.status !== "connected") {
+            continue;
+          }
+          const checks = stillUnhealthyChecks.get(entry.slug);
+          if (checks !== void 0 && checks >= MAX_RECONNECT_REFOCUS_CHECKS) {
+            changed = true;
+            reconnectingRef.current.delete(entry.slug);
+            reconnectChecksRef.current.delete(entry.slug);
+            next[entry.slug] = { kind: "error", message: RECONNECT_UNCONFIRMED_ERROR };
+          } else if (checks === void 0) {
+            changed = true;
+            delete next[entry.slug];
+            reconnectingRef.current.delete(entry.slug);
+            reconnectChecksRef.current.delete(entry.slug);
+            onConnectedRef.current?.(entry);
+          }
+        }
+        return changed ? next : prev;
+      });
+    } finally {
+      refreshInFlightRef.current = false;
+    }
   }, [load]);
   useEffect6(() => {
     if (gated) return;
@@ -1484,6 +1519,12 @@ function ConnectorPicker({
   }, [gated, refreshAfterReturn]);
   const handleConnect = useCallback4(
     async (entry, kind) => {
+      if (isUnhealthy(entry)) {
+        reconnectingRef.current.add(entry.slug);
+      } else {
+        reconnectingRef.current.delete(entry.slug);
+      }
+      reconnectChecksRef.current.delete(entry.slug);
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
         const result = await clientRef.current.connect(entry, { kind });
@@ -1493,6 +1534,8 @@ function ConnectorPicker({
         }
         const list = await load();
         const updated = list?.find((e) => e.slug === entry.slug) ?? null;
+        reconnectingRef.current.delete(entry.slug);
+        reconnectChecksRef.current.delete(entry.slug);
         setUiState((prev) => {
           const next = { ...prev };
           delete next[entry.slug];
@@ -1502,6 +1545,8 @@ function ConnectorPicker({
           onConnectedRef.current?.(updated);
         }
       } catch (err) {
+        reconnectingRef.current.delete(entry.slug);
+        reconnectChecksRef.current.delete(entry.slug);
         const message = errorMessageFrom(err, DEFAULT_CONNECT_ERROR);
         setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "error", message } }));
       }
@@ -1670,6 +1715,7 @@ function ConnectorTile({
   const isConnecting = ui?.kind === "connecting";
   const isDisconnecting = ui?.kind === "disconnecting";
   const errorMessage = ui?.kind === "error" ? ui.message : null;
+  const unhealthy = isUnhealthy(entry);
   const [kind, setKind] = useState7("personal");
   const [sharingOpen, setSharingOpen] = useState7(false);
   const [setupOpen, setSetupOpen] = useState7(false);
@@ -1719,6 +1765,34 @@ function ConnectorTile({
                 children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
               }
             ),
+            isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ jsxs6(
+              "p",
+              {
+                "data-testid": `connector-account-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: [
+                  "Connected as ",
+                  entry.connection.account_label
+                ]
+              }
+            ),
+            isConnected && entry.access_summary && /* @__PURE__ */ jsx7(
+              "p",
+              {
+                "data-testid": `connector-access-summary-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: entry.access_summary
+              }
+            ),
+            unhealthy && /* @__PURE__ */ jsx7(
+              "p",
+              {
+                role: "alert",
+                "data-testid": `connector-unhealthy-${entry.slug}`,
+                className: "text-xs font-medium text-destructive",
+                children: DEFAULT_RECONNECT_MESSAGE
+              }
+            ),
             attribution && /* @__PURE__ */ jsx7(
               "p",
               {
@@ -1781,17 +1855,46 @@ function ConnectorTile({
             errorMessage && /* @__PURE__ */ jsx7("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
           ] }),
           isConnected ? /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            unhealthy && !shared && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-reconnect-${entry.slug}`,
+                onClick: () => onConnect(entry, entry.connection.kind ?? "personal"),
+                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__ */ jsx7(
               "button",
               {
                 type: "button",
                 "data-testid": `connector-disconnect-${entry.slug}`,
+                title: DISCONNECT_REVOKES_HINT,
                 onClick: () => onDisconnect(entry),
-                disabled: isDisconnecting,
+                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",
                 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__ */ jsx7(
+              "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__ */ jsx7(
               "button",
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.11.0",
+  "version": "0.12.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",