@meetreeve/ui 0.12.0 → 0.14.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,7 +1462,7 @@ 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.";
@@ -1432,7 +1471,6 @@ var DEFAULT_LOAD_ERROR = "Couldn't load connections. Please try again.";
 var DEFAULT_GRANTS_LOAD_ERROR = "Couldn't load sharing. Please try again.";
 var DEFAULT_GRANT_ERROR = "Couldn't share. Please try again.";
 var DEFAULT_REVOKE_ERROR = "Couldn't revoke access. Please try again.";
-var DEFAULT_ORG_DISABLED_REASON = "Org-wide connections aren't available to you.";
 var DEFAULT_CREDENTIAL_ERROR = "Couldn't save that credential. Please try again.";
 var DEFAULT_CREDENTIAL_TEST_ERROR = "Couldn't test that credential. Please try again.";
 var DEFAULT_RECONNECT_MESSAGE = "This connection needs to be reconnected to keep working.";
@@ -1451,11 +1489,6 @@ function capabilityLabel(capability) {
   if (capability === "write") return "Write only";
   return "Read & write";
 }
-function formatSince(since) {
-  const parsed = new Date(since);
-  if (Number.isNaN(parsed.getTime())) return since;
-  return parsed.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
-}
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
 }
@@ -1677,35 +1710,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,
@@ -1725,9 +1758,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,
@@ -1779,11 +1812,11 @@ function ConnectorTile({
   const guide = entry.guide ?? null;
   const canSetUp = !isConnected && (pasteSupported || guide !== null);
   const orgPermitted = entry.org_connect?.permitted === true;
-  const orgDisabledReason = entry.org_connect?.reason || DEFAULT_ORG_DISABLED_REASON;
+  const connectKind = orgPermitted ? kind : "personal";
   const attribution = ownerLabel(entry);
   const canDisconnect = isConnected && !shared;
   const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       "data-testid": `connector-tile-${entry.slug}`,
@@ -1791,12 +1824,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}`,
@@ -1805,22 +1838,24 @@ 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) }),
+              isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  "span",
+                  {
+                    "data-testid": `connector-connected-${entry.slug}`,
+                    className: "inline-flex items-center gap-1",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
+                      "Connected"
+                    ]
+                  }
+                )
               ] })
             ] }),
-            isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "p",
-              {
-                "data-testid": `connector-connected-since-${entry.slug}`,
-                className: "text-xs text-muted-foreground",
-                children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
-              }
-            ),
-            isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "p",
               {
                 "data-testid": `connector-account-${entry.slug}`,
@@ -1831,7 +1866,7 @@ function ConnectorTile({
                 ]
               }
             ),
-            isConnected && entry.access_summary && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            isConnected && entry.access_summary && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 "data-testid": `connector-access-summary-${entry.slug}`,
@@ -1839,7 +1874,7 @@ function ConnectorTile({
                 children: entry.access_summary
               }
             ),
-            unhealthy && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            unhealthy && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 role: "alert",
@@ -1848,7 +1883,7 @@ function ConnectorTile({
                 children: DEFAULT_RECONNECT_MESSAGE
               }
             ),
-            attribution && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            attribution && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 "data-testid": `connector-owner-${entry.slug}`,
@@ -1856,7 +1891,7 @@ function ConnectorTile({
                 children: attribution
               }
             ),
-            !isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            !isConnected && orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 "data-testid": `connector-kind-toggle-${entry.slug}`,
@@ -1864,13 +1899,14 @@ 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",
                       "data-testid": `connector-kind-personal-${entry.slug}`,
                       "aria-pressed": kind === "personal",
                       disabled: isConnecting,
+                      title: "Just for you",
                       onClick: () => setKind("personal"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
@@ -1880,37 +1916,30 @@ function ConnectorTile({
                       children: "Personal"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
                       "data-testid": `connector-kind-org-${entry.slug}`,
                       "aria-pressed": kind === "org",
-                      disabled: isConnecting || !orgPermitted,
-                      title: orgPermitted ? void 0 : orgDisabledReason,
+                      disabled: isConnecting,
+                      title: "For your whole org",
                       onClick: () => setKind("org"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
                         kind === "org" ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
                         "disabled:opacity-50"
                       ),
-                      children: [
-                        "Org",
-                        !orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "sr-only", children: [
-                          " (",
-                          orgDisabledReason,
-                          ")"
-                        ] })
-                      ]
+                      children: "Org"
                     }
                   )
                 ]
               }
             ),
-            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: [
-            unhealthy && !shared && /* @__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",
@@ -1921,7 +1950,11 @@ function ConnectorTile({
                 children: isConnecting ? "Reconnecting\u2026" : "Reconnect"
               }
             ),
-            canDisconnect && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            canDisconnect && // DEV-11580: the revoke reassurance lives in the title only —
+            // as an always-visible paragraph it wrapped to four lines
+            // beside every connected tile. Muted until hover so a
+            // destructive action isn't the loudest thing on the tile.
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -1929,28 +1962,11 @@ function ConnectorTile({
                 title: DISCONNECT_REVOKES_HINT,
                 onClick: () => onDisconnect(entry),
                 disabled: isDisconnecting || isConnecting,
-                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-50",
                 children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
               }
             ),
-            canDisconnect && // Outcome-eval finding (DEV-7873): with no width cap, this
-            // paragraph's one long sentence forced the WHOLE shrink-0
-            // button column to grow to its natural (unwrapped) width,
-            // squeezing the sibling `min-w-0 flex-1` text column down to
-            // one word per line at any realistic tile width. RTL's jsdom
-            // tests never caught it — jsdom doesn't lay out real flexbox
-            // sizing, so every textContent assertion still passed. A
-            // narrow max-width forces the hint to wrap within the same
-            // footprint as the button above it instead.
-            /* @__PURE__ */ (0, import_jsx_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)(
+            canManageSharing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -1961,19 +1977,19 @@ 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",
                 "data-testid": `connector-connect-${entry.slug}`,
-                onClick: () => onConnect(entry, kind),
+                onClick: () => onConnect(entry, connectKind),
                 disabled: isConnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Connecting\u2026" : "Connect"
               }
             ),
-            canSetUp && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            canSetUp && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -1987,20 +2003,20 @@ 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,
                   fields: credentialFields,
-                  kind,
+                  kind: connectKind,
                   verify: guide?.verify ?? null,
                   testSupported: credentialTestSupported,
                   onSubmitCredentials,
@@ -2010,7 +2026,7 @@ function ConnectorTile({
             ]
           }
         ),
-        canManageSharing && sharingOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        canManageSharing && sharingOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ManageSharing,
           {
             entry,
@@ -2060,8 +2076,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`,
@@ -2069,7 +2085,7 @@ function CopyableValue({ value, testId }) {
         children: value
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -2095,8 +2111,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",
@@ -2108,25 +2124,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,
@@ -2136,7 +2152,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}`,
@@ -2144,7 +2160,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}`,
@@ -2208,7 +2224,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}`,
@@ -2222,12 +2238,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,
@@ -2247,7 +2263,7 @@ function CredentialForm({
                 )
               }
             ),
-            fieldError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            fieldError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 id: `${inputId}-error`,
@@ -2258,7 +2274,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}`,
@@ -2266,8 +2282,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",
@@ -2276,8 +2292,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",
@@ -2288,7 +2304,7 @@ function CredentialForm({
               children: testing ? "Testing\u2026" : "Test connection"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "submit",
@@ -2309,15 +2325,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}`,
@@ -2330,7 +2346,7 @@ function CredentialTestResult({
     );
   }
   if (result.valid === false) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "p",
       {
         role: "alert",
@@ -2340,7 +2356,7 @@ function CredentialTestResult({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "p",
     {
       role: "status",
@@ -2403,13 +2419,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}`,
@@ -2417,7 +2433,7 @@ function ManageSharing({
             children: "Loading sharing\u2026"
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             role: "alert",
@@ -2426,7 +2442,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}`,
@@ -2434,21 +2450,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",
@@ -2463,8 +2479,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}`,
@@ -2477,12 +2493,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}`,
@@ -2493,7 +2509,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}`,
@@ -2503,12 +2519,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",
@@ -2532,6 +2548,7 @@ function ManageSharing({
   ContextSwitcher,
   Flyout,
   GLYPH_CANVAS_FILL,
+  InfoTip,
   LOCKUP_GAP,
   LOCKUP_ROW,
   MARK_CAP_RATIO,