@meetreeve/ui 0.11.0 → 0.13.0

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   ContextSwitcher: () => ContextSwitcher,
   Flyout: () => Flyout,
   GLYPH_CANVAS_FILL: () => GLYPH_CANVAS_FILL,
+  InfoTip: () => InfoTip,
   LOCKUP_GAP: () => LOCKUP_GAP,
   LOCKUP_ROW: () => LOCKUP_ROW,
   MARK_CAP_RATIO: () => MARK_CAP_RATIO,
@@ -472,6 +473,44 @@ function useResponsivePlaceholder(desktop, mobile) {
   return isDesktop ? desktop : mobile ?? desktop;
 }
 
+// src/info-tip.tsx
+var import_popover = require("@base-ui/react/popover");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function InfoTip({ children, label = "More information", side = "top", align = "center", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_popover.Popover.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_popover.Popover.Trigger,
+      {
+        openOnHover: true,
+        delay: 150,
+        closeDelay: 100,
+        "aria-label": label,
+        style: TOUCH_TARGET_STYLE,
+        className: cn(
+          "group -my-3.5 inline-flex shrink-0 cursor-help items-center justify-center rounded-full align-middle text-muted-foreground outline-none transition-colors hover:text-foreground data-[popup-open]:text-foreground",
+          className
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "inline-flex size-4 items-center justify-center rounded-full border border-current text-[0.625rem] font-semibold leading-none group-focus-visible:ring-2 group-focus-visible:ring-ring/50",
+            children: "?"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover.Popover.Positioner, { side, align, sideOffset: 8, collisionPadding: 16, className: "z-50", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_popover.Popover.Popup,
+      {
+        "aria-label": label,
+        className: "max-w-[min(20rem,calc(100vw-2rem))] origin-[var(--transform-origin)] rounded-md border border-border bg-popover px-3 py-2 text-left text-xs font-normal leading-relaxed text-popover-foreground shadow-md outline-none transition-[opacity,transform] duration-150 ease-out data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 motion-reduce:transition-none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover.Popover.Description, { children })
+      }
+    ) }) })
+  ] });
+}
+
 // src/app-sidebar.tsx
 var import_react8 = require("react");
 var import_lucide_react2 = require("lucide-react");
@@ -754,7 +793,7 @@ function useLadderRung(ladder, containerRef, options = {}) {
 
 // src/ladder/flyout.tsx
 var import_react7 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PANEL_GAP = 4;
 function Flyout({
   label,
@@ -818,7 +857,7 @@ function Flyout({
   (0, import_react7.useEffect)(() => {
     if (clickOpen && panelPosition) firstItemRef.current?.focus();
   }, [clickOpen, panelPosition]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       "data-testid": "ladder-flyout",
@@ -826,7 +865,7 @@ function Flyout({
       onMouseEnter: () => setHoverOpen(true),
       onMouseLeave: () => setHoverOpen(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "button",
           {
             ref: triggerRef,
@@ -849,7 +888,7 @@ function Flyout({
               active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 Icon,
                 {
                   className: cn(
@@ -860,11 +899,11 @@ function Flyout({
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
             ]
           }
         ),
-        open && panelPosition && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        open && panelPosition && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             ref: panelRef,
@@ -886,7 +925,7 @@ function Flyout({
               // silently loses the focus-on-open behavior (a console ref
               // warning, not a crash) — same tradeoff any Link-injection
               // pattern accepts; not a regression from today's plain `<a>`.
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 LinkEl,
                 {
                   ref: i === 0 ? firstItemRef : void 0,
@@ -910,7 +949,7 @@ function Flyout({
 }
 
 // src/app-sidebar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DEFAULT_COLLAPSE_STORAGE_KEY = "reeve-sidebar-collapsed";
 var COLLAPSED_WIDTH_CLASS = "w-14";
 var EXPANDED_WIDTH_CLASS = "w-64";
@@ -928,7 +967,7 @@ function NavLink({
 }) {
   const Icon = resolveIcon(icon);
   const LinkEl = linkComponent ?? "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     LinkEl,
     {
       href,
@@ -948,7 +987,7 @@ function NavLink({
         active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Icon,
           {
             className: cn(
@@ -959,7 +998,7 @@ function NavLink({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
       ]
     }
   );
@@ -1047,7 +1086,7 @@ function AppSidebar({
   function renderAppItem(item, testIdPrefix, collapsedRow = false) {
     const def = moduleMap.get(item.moduleId);
     if (!def) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       NavLink,
       {
         href: def.href,
@@ -1073,7 +1112,7 @@ function AppSidebar({
       };
     });
     const active = children.some((c) => c.active);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Flyout,
       {
         label: item.label,
@@ -1091,7 +1130,7 @@ function AppSidebar({
   function brandBlockFor(collapsedMode) {
     if (!brand) return null;
     if (collapsedMode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "a",
         {
           href: brand.href,
@@ -1099,28 +1138,28 @@ function AppSidebar({
           title: brand.label,
           className: "flex items-center justify-center border-b border-sidebar-border px-1 py-4",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: brand.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: brand.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
           ]
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "a",
       {
         href: brand.href,
         "data-testid": "app-sidebar-brand",
         className: "flex items-center gap-2.5 border-b border-sidebar-border px-5 py-4 text-sidebar-foreground",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
         ]
       }
     );
   }
   function topItemBlock(testId, collapsedMode = false) {
     if (!topItem) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("px-3 pt-4", collapsedMode && "flex justify-center px-0"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("px-3 pt-4", collapsedMode && "flex justify-center px-0"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       NavLink,
       {
         href: topItem.href,
@@ -1133,8 +1172,8 @@ function AppSidebar({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    !isDesktop && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    !isDesktop && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         ref: mobileTriggerRef,
@@ -1146,11 +1185,11 @@ function AppSidebar({
         onClick: () => setMobileOpen((v) => !v),
         style: TOUCH_TARGET_STYLE,
         className: "flex items-center justify-center rounded-md border border-border p-2 text-foreground",
-        children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Menu, { className: "h-5 w-5", "aria-hidden": "true" })
+        children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Menu, { className: "h-5 w-5", "aria-hidden": "true" })
       }
     ),
-    !isDesktop && mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fixed inset-0 z-50", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    !isDesktop && mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fixed inset-0 z-50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           "data-testid": "app-sidebar-mobile-scrim",
@@ -1159,7 +1198,7 @@ function AppSidebar({
           onClick: () => setMobileOpen(false)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           ref: mobileDrawerRef,
@@ -1170,7 +1209,7 @@ function AppSidebar({
           "data-testid": "app-sidebar-mobile-drawer",
           className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 ref: mobileCloseRef,
@@ -1180,19 +1219,19 @@ function AppSidebar({
                 onClick: () => setMobileOpen(false),
                 style: TOUCH_TARGET_STYLE,
                 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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" })
               }
             ) }),
             brandBlockFor(false),
             topItemBlock("app-sidebar-mobile-top-item"),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: "flex-1 px-3 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-0.5", children: rung0.items.map(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: "flex-1 px-3 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col gap-0.5", children: rung0.items.map(
               (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-mobile-navlink") : null
             ) }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "aside",
       {
         "data-testid": "app-sidebar-desktop",
@@ -1207,18 +1246,18 @@ function AppSidebar({
         children: [
           brandBlockFor(collapsed),
           topItemBlock("app-sidebar-top-item", collapsed),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "nav",
             {
               ref: containerRef,
               "data-testid": "app-sidebar-nav",
               className: "flex-1 overflow-y-auto px-3 py-4",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-0.5", children: rung.items.map(
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col gap-0.5", children: rung.items.map(
                 (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink", collapsed) : renderGroupItem(item, collapsed)
               ) })
             }
           ),
-          collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-sidebar-border px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          collapsible && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border-t border-sidebar-border px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "button",
             {
               type: "button",
@@ -1232,8 +1271,8 @@ function AppSidebar({
                 collapsed && "justify-center px-0"
               ),
               children: [
-                collapsed ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.PanelLeftOpen, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.PanelLeftClose, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: collapsed ? "Expand sidebar" : "Collapse sidebar" })
+                collapsed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.PanelLeftOpen, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.PanelLeftClose, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: collapsed ? "Expand sidebar" : "Collapse sidebar" })
               ]
             }
           ) })
@@ -1272,19 +1311,19 @@ function groupItemsByOrg(rows, get) {
 
 // src/lib/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function DropdownMenu(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
 function DropdownMenuContent({
   className,
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -1301,7 +1340,7 @@ function DropdownMenuItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -1317,7 +1356,7 @@ function DropdownMenuLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -1328,7 +1367,7 @@ function DropdownMenuLabel({
 }
 
 // src/context-switcher.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function groupByOrg(items) {
   return groupItemsByOrg(items, {
     orgId: (it) => it.orgId,
@@ -1359,29 +1398,29 @@ function ContextSwitcher({
   const active = items.find((it) => it.refId === activeRefId) ?? null;
   const groups = groupByOrg(items);
   const showOrgHeaders = groups.length > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuTrigger, { asChild: true, children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuTrigger, { asChild: true, children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
         title: active?.name || placeholder,
         "aria-label": active?.name || placeholder,
         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__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }), size: "lg" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }), size: "lg" })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
         type: "button",
         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__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "max-w-[140px] truncate text-sidebar-accent-foreground", children: active?.name || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronDown, { className: "h-3.5 w-3.5 text-sidebar-foreground/70 transition-transform group-data-[state=open]:rotate-180" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "max-w-[140px] truncate text-sidebar-accent-foreground", children: active?.name || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronDown, { className: "h-3.5 w-3.5 text-sidebar-foreground/70 transition-transform group-data-[state=open]:rotate-180" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       DropdownMenuContent,
       {
         side,
@@ -1390,31 +1429,31 @@ function ContextSwitcher({
         collisionPadding: 8,
         className: cn("w-60 overflow-hidden p-0", contentClassName),
         children: [
-          groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-            showOrgHeaders && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuLabel, { className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group.orgName ?? "Other" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(showOrgHeaders && "ml-5 border-l border-border/60"), children: group.items.map((item) => {
+          groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+            showOrgHeaders && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuLabel, { className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group.orgName ?? "Other" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(showOrgHeaders && "ml-5 border-l border-border/60"), children: group.items.map((item) => {
               const isActive = item.refId === activeRefId;
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 DropdownMenuItem,
                 {
                   "data-active": isActive || void 0,
                   onSelect: () => onSelect(item),
                   className: "flex w-full items-center gap-2.5 rounded-none px-3 py-2 text-sm",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(item), subtle: true }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-1 truncate text-left text-foreground/90", children: item.name }),
-                    item.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandGlyph, { brand: toBrand(item), subtle: true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex-1 truncate text-left text-foreground/90", children: item.name }),
+                    item.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
                       " ",
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: item.kindLabel })
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: item.kindLabel })
                     ] }),
-                    isActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Check, { className: "size-3.5 text-emerald-500" })
+                    isActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Check, { className: "size-3.5 text-emerald-500" })
                   ]
                 },
                 item.refId
               );
             }) })
           ] }, group.orgId ?? "unattributed")),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sticky bottom-0 border-t border-border bg-popover", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sticky bottom-0 border-t border-border bg-popover", children: footer })
         ]
       }
     )
@@ -1423,8 +1462,10 @@ function ContextSwitcher({
 
 // src/connector-picker.tsx
 var import_react9 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = 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 +1474,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 +1509,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 +1523,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 +1554,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 +1613,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 +1628,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 +1639,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 } }));
       }
@@ -1632,35 +1716,35 @@ function ConnectorPicker({
   );
   const ownEntries = entries?.filter((entry) => !isSharedWithViewer(entry)) ?? null;
   const sharedEntries = entries?.filter(isSharedWithViewer) ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": "connector-picker", "data-layout": layout, className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: containerClassName, children: [
-      entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-testid": "connector-picker", "data-layout": layout, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: containerClassName, children: [
+      entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
           ]
         },
         i
       )),
-      loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      loadError && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "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__ */ (0, import_jsx_runtime7.jsx)("span", { children: loadError }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: loadError }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
           ]
         }
       ),
-      entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
-      ownEntries?.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
+      ownEntries?.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ConnectorTile,
         {
           entry,
@@ -1680,9 +1764,9 @@ function ConnectorPicker({
         entry.slug
       ))
     ] }),
-    sharedEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { "data-testid": "connector-picker-shared-with-me", className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Shared with me" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: containerClassName, children: sharedEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    sharedEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { "data-testid": "connector-picker-shared-with-me", className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Shared with me" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: containerClassName, children: sharedEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ConnectorTile,
         {
           entry,
@@ -1725,6 +1809,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);
@@ -1737,7 +1822,7 @@ function ConnectorTile({
   const attribution = ownerLabel(entry);
   const canDisconnect = isConnected && !shared;
   const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       "data-testid": `connector-tile-${entry.slug}`,
@@ -1745,12 +1830,12 @@ function ConnectorTile({
       "data-deprecated": entry.deprecated || void 0,
       className: cn("flex flex-col p-3", layout === "tiles" && "rounded-lg border border-border"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "truncate text-sm font-medium", children: entry.name }),
-              entry.deprecated && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "truncate text-sm font-medium", children: entry.name }),
+              entry.deprecated && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "span",
                 {
                   "data-testid": `connector-deprecated-${entry.slug}`,
@@ -1759,14 +1844,14 @@ function ConnectorTile({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
-              entry.category && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: entry.category })
+            /* @__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: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate", children: entry.category })
               ] })
             ] }),
-            isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 "data-testid": `connector-connected-since-${entry.slug}`,
@@ -1774,7 +1859,35 @@ function ConnectorTile({
                 children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
               }
             ),
-            attribution && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(
+              "p",
+              {
+                "data-testid": `connector-access-summary-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: entry.access_summary
+              }
+            ),
+            unhealthy && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(
               "p",
               {
                 "data-testid": `connector-owner-${entry.slug}`,
@@ -1782,7 +1895,7 @@ function ConnectorTile({
                 children: attribution
               }
             ),
-            !isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            !isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 "data-testid": `connector-kind-toggle-${entry.slug}`,
@@ -1790,7 +1903,7 @@ function ConnectorTile({
                 "aria-label": "Connect as",
                 className: "mt-1 flex items-center gap-1",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1806,7 +1919,7 @@ function ConnectorTile({
                       children: "Personal"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -1822,7 +1935,7 @@ function ConnectorTile({
                       ),
                       children: [
                         "Org",
-                        !orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "sr-only", children: [
+                        !orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "sr-only", children: [
                           " (",
                           orgDisabledReason,
                           ")"
@@ -1833,21 +1946,50 @@ 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 })
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.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: [
-            canDisconnect && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          isConnected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            unhealthy && !shared && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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"
               }
             ),
-            canManageSharing && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            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",
               {
                 type: "button",
@@ -1858,8 +2000,8 @@ function ConnectorTile({
                 children: sharingOpen ? "Hide sharing" : "Manage sharing"
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -1870,7 +2012,7 @@ function ConnectorTile({
                 children: isConnecting ? "Connecting\u2026" : "Connect"
               }
             ),
-            canSetUp && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            canSetUp && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -1884,15 +2026,15 @@ function ConnectorTile({
             )
           ] })
         ] }),
-        canSetUp && setupOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        canSetUp && setupOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             id: `connector-setup-panel-${entry.slug}`,
             "data-testid": `connector-setup-panel-${entry.slug}`,
             className: "mt-2 flex flex-col gap-3 rounded-md border border-border bg-foreground/5 p-2",
             children: [
-              guide && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SetupGuidePanel, { entry, guide, showVerify: !pasteSupported }),
-              pasteSupported && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              guide && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SetupGuidePanel, { entry, guide, showVerify: !pasteSupported }),
+              pasteSupported && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 CredentialForm,
                 {
                   entry,
@@ -1907,7 +2049,7 @@ function ConnectorTile({
             ]
           }
         ),
-        canManageSharing && sharingOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        canManageSharing && sharingOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ManageSharing,
           {
             entry,
@@ -1957,8 +2099,8 @@ function CopyableValue({ value, testId }) {
       setCopied(false);
     }
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mt-1 flex items-center gap-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "mt-1 flex items-center gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "code",
       {
         "data-testid": `${testId}-value`,
@@ -1966,7 +2108,7 @@ function CopyableValue({ value, testId }) {
         children: value
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -1992,8 +2134,8 @@ function SetupGuidePanel({
       ungrounded
     );
   }, [entry.slug, guide, leaked]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": `connector-guide-${entry.slug}`, className: "flex flex-col gap-2", children: [
-    leaked && isDevEnvironment() && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-testid": `connector-guide-${entry.slug}`, className: "flex flex-col gap-2", children: [
+    leaked && isDevEnvironment() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "p",
       {
         role: "alert",
@@ -2005,25 +2147,25 @@ function SetupGuidePanel({
         ]
       }
     ),
-    prerequisites.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { className: "text-xs font-medium", children: "Before you start" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    prerequisites.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { className: "text-xs font-medium", children: "Before you start" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "ul",
         {
           "data-testid": `connector-guide-prerequisites-${entry.slug}`,
           className: "mt-1 list-disc pl-4 text-xs text-muted-foreground",
-          children: prerequisites.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: item }, item))
+          children: prerequisites.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: item }, item))
         }
       )
     ] }),
-    steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "ol",
       {
         "data-testid": `connector-guide-steps-${entry.slug}`,
         className: "list-decimal pl-4 text-xs",
-        children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "mt-1 first:mt-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: step.text }),
-          step.copyable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "mt-1 first:mt-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: step.text }),
+          step.copyable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             CopyableValue,
             {
               value: step.copyable,
@@ -2033,7 +2175,7 @@ function SetupGuidePanel({
         ] }, step.text))
       }
     ),
-    scopeNote && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    scopeNote && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "p",
       {
         "data-testid": `connector-guide-scope-note-${entry.slug}`,
@@ -2041,7 +2183,7 @@ function SetupGuidePanel({
         children: scopeNote
       }
     ),
-    showVerify && verify && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    showVerify && verify && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "p",
       {
         "data-testid": `connector-guide-verify-${entry.slug}`,
@@ -2105,7 +2247,7 @@ function CredentialForm({
       setBusy(false);
     }
   }, [kind, onSubmitCredentials, values]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "form",
     {
       "data-testid": `connector-credential-form-${entry.slug}`,
@@ -2119,12 +2261,12 @@ function CredentialForm({
         fields.map((field) => {
           const inputId = `connector-credential-${entry.slug}-${field.key}`;
           const fieldError = fieldErrors?.[field.key] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: inputId, className: "text-xs font-medium", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor: inputId, className: "text-xs font-medium", children: [
               field.label,
-              field.required !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+              field.required !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "input",
               {
                 id: inputId,
@@ -2144,7 +2286,7 @@ function CredentialForm({
                 )
               }
             ),
-            fieldError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            fieldError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 id: `${inputId}-error`,
@@ -2155,7 +2297,7 @@ function CredentialForm({
             )
           ] }, field.key);
         }),
-        verify && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        verify && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             "data-testid": `connector-guide-verify-${entry.slug}`,
@@ -2163,8 +2305,8 @@ function CredentialForm({
             children: verify
           }
         ),
-        result && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CredentialTestResult, { entry, result }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        result && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CredentialTestResult, { entry, result }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             role: "alert",
@@ -2173,8 +2315,8 @@ function CredentialForm({
             children: error
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
-          testSupported && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
+          testSupported && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2185,7 +2327,7 @@ function CredentialForm({
               children: testing ? "Testing\u2026" : "Test connection"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "submit",
@@ -2206,15 +2348,15 @@ function CredentialTestResult({
   result
 }) {
   if (result.valid === true) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         role: "status",
         "data-testid": `connector-credential-test-pass-${entry.slug}`,
         className: "rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-xs",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: result.account_name ? `Verified \u2014 connected as ${result.account_name}.` : "Verified \u2014 these credentials work." }),
-          result.permissions_note && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: result.account_name ? `Verified \u2014 connected as ${result.account_name}.` : "Verified \u2014 these credentials work." }),
+          result.permissions_note && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "p",
             {
               "data-testid": `connector-credential-permissions-${entry.slug}`,
@@ -2227,7 +2369,7 @@ function CredentialTestResult({
     );
   }
   if (result.valid === false) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "p",
       {
         role: "alert",
@@ -2237,7 +2379,7 @@ function CredentialTestResult({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "p",
     {
       role: "status",
@@ -2300,13 +2442,13 @@ function ManageSharing({
     },
     [load, revokeGrant]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "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__ */ (0, import_jsx_runtime7.jsx)(
+        grants === null && !error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             "data-testid": `connector-grants-loading-${entry.slug}`,
@@ -2314,7 +2456,7 @@ function ManageSharing({
             children: "Loading sharing\u2026"
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             role: "alert",
@@ -2323,7 +2465,7 @@ function ManageSharing({
             children: error
           }
         ),
-        grants !== null && grants.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        grants !== null && grants.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             "data-testid": `connector-grants-empty-${entry.slug}`,
@@ -2331,21 +2473,21 @@ function ManageSharing({
             children: "Not shared with anyone yet."
           }
         ),
-        grants?.map((grant) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        grants?.map((grant) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             "data-testid": `connector-grant-${entry.slug}-${grant.id}`,
             className: "flex items-center justify-between gap-2 text-xs",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "truncate", children: [
                 grant.grantee_name || grant.grantee_id,
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-muted-foreground", children: [
                   " ",
                   "\xB7 ",
                   grant.grantee_type === "role" ? "Role" : "User"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2360,8 +2502,8 @@ function ManageSharing({
           },
           grant.id
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "select",
             {
               "data-testid": `connector-grant-type-${entry.slug}`,
@@ -2374,12 +2516,12 @@ function ManageSharing({
               disabled: busy,
               className: "rounded-md border border-border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "user", children: "User" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "role", children: "Role" })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "user", children: "User" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "role", children: "Role" })
               ]
             }
           ),
-          granteeType === "user" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          granteeType === "user" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
               "data-testid": `connector-grant-grantee-${entry.slug}`,
@@ -2390,7 +2532,7 @@ function ManageSharing({
               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__ */ (0, import_jsx_runtime7.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "select",
             {
               "data-testid": `connector-grant-role-${entry.slug}`,
@@ -2400,12 +2542,12 @@ function ManageSharing({
               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__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Select a role\u2026" }),
-                roleOptions.map((role) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: role.id, children: role.name }, role.id))
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "Select a role\u2026" }),
+                roleOptions.map((role) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: role.id, children: role.name }, role.id))
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2429,6 +2571,7 @@ function ManageSharing({
   ContextSwitcher,
   Flyout,
   GLYPH_CANVAS_FILL,
+  InfoTip,
   LOCKUP_GAP,
   LOCKUP_ROW,
   MARK_CAP_RATIO,