@the-portland-company/shell 0.82.0 → 0.85.0

package/dist/app-chrome.cjs

@@ -423,6 +423,81 @@ function SpeculationRulesScript({ items }) {
   return null;
 }
 
+// src/native/credits.ts
+var CREDIT_TYPE_ORDER = [
+  "signal",
+  "broadcast",
+  "ai",
+  "enhancement"
+];
+var CREDIT_TYPE_LABELS = {
+  signal: "Signal Credits",
+  broadcast: "Broadcast Credits",
+  ai: "AI Credits",
+  enhancement: "Enhancement Credits"
+};
+var RANK = {
+  unknown: 0,
+  good: 1,
+  low: 2,
+  out: 3
+};
+function creditsIconState(channels) {
+  let worst = "unknown";
+  for (const channel of channels) {
+    const state = channel?.state ?? null;
+    if (state === null || state === "not_in_use") continue;
+    if (RANK[state] > RANK[worst]) worst = state;
+  }
+  return worst;
+}
+function creditGaugeRatio(channel) {
+  if (!channel || channel.state == null || channel.state === "not_in_use")
+    return null;
+  const fullMark = channel.fullMarkUnits ?? 0;
+  if (!(fullMark > 0)) return null;
+  return Math.min(1, Math.max(0, channel.remainingUnits / fullMark));
+}
+function creditStateWord(state) {
+  switch (state) {
+    case "good":
+      return "Good";
+    case "low":
+      return "Low";
+    case "out":
+      return "Out";
+    case "not_in_use":
+      return "Not in use";
+    default:
+      return "Unknown";
+  }
+}
+function daysPhrase(days) {
+  if (days < 1) return "less than a day at your recent pace";
+  const rounded = Math.round(days);
+  return `about ${rounded} ${rounded === 1 ? "day" : "days"} at your recent pace`;
+}
+function creditTooltipLine(type, channel) {
+  const label = CREDIT_TYPE_LABELS[type];
+  if (!channel) return `${label}: unavailable`;
+  const left = `${Math.max(0, channel.remainingUnits).toLocaleString()} left`;
+  if (channel.state === "not_in_use") return `${label}: not in use`;
+  if (channel.state == null) return `${label}: ${left}`;
+  if (channel.state === "out") return `${label}: ${left}, out`;
+  const days = channel.daysOfUseLeft;
+  const pace = typeof days === "number" && Number.isFinite(days) ? `, ${daysPhrase(days)}` : "";
+  return `${label}: ${left}${pace}`;
+}
+function creditsAriaLabel(channels) {
+  const worst = creditsIconState(CREDIT_TYPE_ORDER.map((t) => channels[t]));
+  if (worst === "unknown") return "Credits";
+  if (worst === "good") return "Credits: all good";
+  const named = CREDIT_TYPE_ORDER.filter(
+    (t) => channels[t]?.state === worst
+  ).map((t) => CREDIT_TYPE_LABELS[t]);
+  return `Credits: ${worst === "low" ? "low on" : "out of"} ${named.join(", ")}`;
+}
+
 // src/notifications/adapter.ts
 function emptyNotificationsFeed() {
   return { notifications: [], badge: 0 };
@@ -517,7 +592,7 @@ function resolveOrgLogoUrl(url) {
 }
 var TOPBAR_GLYPH_SIZE = 17;
 function topBarIconButtonClass(tone = "default") {
-  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : tone === "ok" ? "text-[color:var(--credits-good,#00783B)] hover:text-[color:var(--credits-good,#00783B)]" : tone === "low" ? "text-[color:var(--credits-low,#B7791F)] hover:text-[color:var(--credits-low,#B7791F)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
   return [
     // `group/tbtip` powers the shared <TopBarTooltip> rendered inside the trigger.
     "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-transparent transition",
@@ -746,6 +821,9 @@ function ValueSkeleton({ className }) {
     }
   );
 }
+function IconGlyph({ icon: Icon, size = TOPBAR_GLYPH_SIZE }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size, className: "text-current" });
+}
 function SlotGlyph({
   slot,
   fallback: Fallback,
@@ -758,9 +836,12 @@ function SlotGlyph({
 }
 function TopBarPopover({
   label,
+  ariaLabel,
   description,
+  tooltip,
   slot,
   fallbackIcon,
+  icon,
   badge,
   tone,
   onOpen,
@@ -810,7 +891,7 @@ function TopBarPopover({
       "button",
       {
         type: "button",
-        "aria-label": label,
+        "aria-label": ariaLabel ?? label,
         "aria-expanded": open,
         className: topBarIconButtonClass(tone),
         onClick: () => {
@@ -821,9 +902,9 @@ function TopBarPopover({
           });
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
+          icon ? /* @__PURE__ */ jsxRuntime.jsx(IconGlyph, { icon }) : /* @__PURE__ */ jsxRuntime.jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
           typeof badge === "number" ? /* @__PURE__ */ jsxRuntime.jsx(TopBarCountBadge, { count: badge }) : null,
-          !open && !hideTooltip ? /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description }) : null
+          !open && !hideTooltip ? /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description: tooltip ?? description }) : null
         ]
       }
     ),
@@ -897,147 +978,145 @@ function XGlyph({ size = 14, className }) {
 function CheckGlyph({ size = 14, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
 }
-var LOW_FUEL_HINT_DISMISSED_KEY = "politogy_low_fuel_hint_dismissed";
-function FuelRow({
-  label,
+function batteryFillWidth(state) {
+  switch (state) {
+    case "good":
+      return 12;
+    case "low":
+      return 5;
+    default:
+      return 0;
+  }
+}
+function creditsBatteryGlyph(state) {
+  const fill = batteryFillWidth(state);
+  const Glyph = ({ size = TOPBAR_GLYPH_SIZE, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "data-credits-state": state,
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14" }),
+        fill > 0 ? /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "9", width: fill, height: "6", rx: "1", fill: "currentColor", stroke: "none", opacity: 0.35 }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.5 8 8.5 12.5h3L10.5 16l3.5-4.5h-3L11.5 8z", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  );
+  Glyph.displayName = `CreditsBatteryGlyph(${state})`;
+  return Glyph;
+}
+function stateTone(state) {
+  switch (state) {
+    case "good":
+      return "ok";
+    case "low":
+      return "low";
+    case "out":
+      return "danger";
+    default:
+      return "default";
+  }
+}
+function stateColorVar(state) {
+  switch (state) {
+    case "good":
+      return "var(--credits-good,#00783B)";
+    case "low":
+      return "var(--credits-low,#B7791F)";
+    case "out":
+      return "var(--chrome-danger)";
+    default:
+      return "var(--muted)";
+  }
+}
+function CreditGauge({ channel, className }) {
+  const ratio = creditGaugeRatio(channel);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "meter",
+      "aria-label": `${creditStateWord(channel?.state)} level`,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": ratio === null ? void 0 : Math.round(ratio * 100),
+      className: ["h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", className ?? ""].join(" "),
+      children: ratio === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full rounded-full transition-[width]",
+          style: { width: `${Math.round(ratio * 100)}%`, backgroundColor: stateColorVar(channel?.state) }
+        }
+      )
+    }
+  );
+}
+function formatGrantDate(iso) {
+  if (!iso) return null;
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return null;
+  return new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function CreditRow({
+  type,
   channel,
   loading,
-  addHref,
-  addLabel
+  addHref
 }) {
+  const label = CREDIT_TYPE_LABELS[type];
   const remaining = channel?.remainingUnits ?? 0;
-  const total = channel ? Math.max(channel.rawBalanceUnits, channel.remainingUnits) : 0;
-  const ratio = total > 0 ? Math.min(100, Math.max(0, remaining / total * 100)) : 0;
-  const low = channel?.lowFuel ?? false;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+  const state = channel?.state ?? null;
+  const unavailable = !loading && !channel;
+  const nextGrant = formatGrantDate(channel?.nextGrantAt);
+  const pools = channel && typeof channel.includedUnits === "number" && typeof channel.purchasedUnits === "number" ? `Included ${channel.includedUnits.toLocaleString()}${nextGrant ? ` (next ${nextGrant})` : ""} \xB7 Purchased ${channel.purchasedUnits.toLocaleString()}` : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", "data-credit-type": type, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-3.5 w-14" }) : /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: [
-              "text-xs font-semibold tabular-nums",
-              low ? "text-[color:var(--chrome-danger)]" : "text-[color:var(--muted)]"
-            ].join(" "),
-            children: [
-              remaining.toLocaleString(),
-              " left"
-            ]
-          }
-        ),
-        addHref ? /* @__PURE__ */ jsxRuntime.jsx(
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-3.5 w-14" }) : unavailable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[color:var(--muted)]", children: "Unavailable" }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold tabular-nums", style: { color: stateColorVar(state) }, children: [
+          remaining.toLocaleString(),
+          " left",
+          state === "not_in_use" ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-normal text-[color:var(--muted)]", children: [
+            " \xB7 ",
+            creditStateWord(state)
+          ] })
+        ] }),
+        addHref && !unavailable ? /* @__PURE__ */ jsxRuntime.jsx(
           "a",
           {
             href: addHref,
-            "aria-label": addLabel,
+            "aria-label": `Add ${label}`,
             className: "flex h-5 w-5 items-center justify-center rounded-full border border-[color:var(--line)] text-[color:var(--muted)] transition hover:border-[color:var(--foreground)] hover:text-[color:var(--foreground)]",
             children: /* @__PURE__ */ jsxRuntime.jsx(PlusGlyph, {})
           }
         ) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full animate-pulse bg-[color:var(--line)]" }) : /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: [
-          "h-full rounded-full transition-[width]",
-          low ? "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--color-ok,#00783B)]"
-        ].join(" "),
-        style: { width: `${ratio}%` }
-      }
-    ) })
+    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full animate-pulse bg-[color:var(--line)]" }) }) : /* @__PURE__ */ jsxRuntime.jsx(CreditGauge, { channel: unavailable ? null : channel }),
+    !loading && state === "not_in_use" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-[color:var(--muted)]", children: "Not in use" }) : pools ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-[color:var(--muted)]", children: pools }) : null
   ] });
 }
-var lowFuelHintVisible = false;
-var lowFuelHintListeners = /* @__PURE__ */ new Set();
-function setLowFuelHintVisible(visible) {
-  if (lowFuelHintVisible === visible) return;
-  lowFuelHintVisible = visible;
-  lowFuelHintListeners.forEach((l) => l());
+function CreditsTooltip({ fuel }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex w-56 flex-col gap-1.5", "data-testid": "credits-tooltip", children: CREDIT_TYPE_ORDER.map((type) => {
+    const channel = fuel ? fuel[type] ?? null : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: creditTooltipLine(type, channel) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CreditGauge, { channel, className: "bg-[#FFFFFF]/20" })
+    ] }, type);
+  }) });
 }
-function subscribeLowFuelHintVisible(onChange) {
-  lowFuelHintListeners.add(onChange);
-  return () => lowFuelHintListeners.delete(onChange);
-}
-function useLowFuelHintVisible() {
-  return react.useSyncExternalStore(
-    subscribeLowFuelHintVisible,
-    () => lowFuelHintVisible,
-    () => false
-  );
-}
-var LOW_FUEL_HINT_CLEARANCE_PX = 96;
-function LowFuelHint({ lowFuel, orgId }) {
-  const [dismissed, setDismissed] = react.useState(() => {
-    if (typeof window === "undefined") return false;
-    try {
-      return window.sessionStorage.getItem(LOW_FUEL_HINT_DISMISSED_KEY) === "1";
-    } catch {
-      return false;
-    }
-  });
-  react.useEffect(() => {
-    if (lowFuel) return;
-    try {
-      window.sessionStorage.removeItem(LOW_FUEL_HINT_DISMISSED_KEY);
-    } catch {
-    }
-  }, [lowFuel]);
-  const panelOpen = useAnyTopBarPanelOpen();
-  const showing = lowFuel && !dismissed && !panelOpen;
-  react.useEffect(() => {
-    setLowFuelHintVisible(showing);
-    return () => setLowFuelHintVisible(false);
-  }, [showing]);
-  if (!showing) return null;
-  const dismiss = () => {
-    try {
-      window.sessionStorage.setItem(LOW_FUEL_HINT_DISMISSED_KEY, "1");
-    } catch {
-    }
-    setDismissed(true);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      role: "status",
-      className: "absolute right-0 top-[calc(100%+10px)] z-[60] w-60 rounded-lg border border-[color:var(--chrome-danger)] bg-[color:var(--chrome-danger)] px-3 py-2 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 bg-[color:var(--chrome-danger)]"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: "You\u2019re low on fuel" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                href: withOrgParam(CORE_BILLING_URL, orgId),
-                className: "mt-1 inline-block text-sm font-bold underline hover:opacity-90",
-                children: "Buy More Fuel"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Dismiss low fuel notice",
-              onClick: dismiss,
-              className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[#FFFFFF]/90 transition hover:bg-[#FFFFFF]/20",
-              children: /* @__PURE__ */ jsxRuntime.jsx(XGlyph, {})
-            }
-          )
-        ] })
-      ]
-    }
-  );
+function channelsOf(fuel) {
+  if (!fuel) return {};
+  return { signal: fuel.signal, broadcast: fuel.broadcast, ai: fuel.ai, enhancement: fuel.enhancement };
 }
 function FuelAction({ orgId }) {
   const { dedupedFetch } = useNavChrome("FuelAction");
@@ -1069,50 +1148,25 @@ function FuelAction({ orgId }) {
       cancelled = true;
     };
   }, [dedupedFetch, orgId]);
-  const low = !!fuel && (fuel.signal.lowFuel || fuel.broadcast.lowFuel);
-  const lowFuelHintUp = useLowFuelHintVisible();
-  return (
-    // The nudge anchors to the trigger, so it sits OUTSIDE the popover panel in
-    // its own relative wrapper (same shape the VRM widget used).
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        TopBarPopover,
-        {
-          label: "Communications Fuel",
-          description: "Remaining SMS and email sending balance for the active organization.",
-          slot: "comms-fuel",
-          fallbackIcon: BatteryGlyph,
-          tone: low ? "warning" : "default",
-          hideTooltip: lowFuelHintUp,
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Communications Fuel" }),
-            error || !loading && !fuel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Fuel balance is unavailable right now." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                FuelRow,
-                {
-                  label: "SMS Signal",
-                  channel: fuel?.signal ?? null,
-                  loading,
-                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
-                  addLabel: "Add SMS Signal fuel"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                FuelRow,
-                {
-                  label: "Email Broadcast",
-                  channel: fuel?.broadcast ?? null,
-                  loading,
-                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
-                  addLabel: "Add Email Broadcast fuel"
-                }
-              )
-            ] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(LowFuelHint, { lowFuel: low, orgId })
-    ] })
+  const channels = channelsOf(fuel);
+  const iconState = creditsIconState(CREDIT_TYPE_ORDER.map((t) => channels[t]));
+  const Glyph = react.useMemo(() => creditsBatteryGlyph(iconState), [iconState]);
+  const addHref = withOrgParam(CORE_BILLING_URL, orgId);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TopBarPopover,
+    {
+      label: "Credits",
+      ariaLabel: creditsAriaLabel(channels),
+      tooltip: /* @__PURE__ */ jsxRuntime.jsx(CreditsTooltip, { fuel }),
+      slot: "comms-fuel",
+      fallbackIcon: BatteryGlyph,
+      icon: Glyph,
+      tone: stateTone(iconState),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Credits" }),
+        error || !loading && !fuel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Credits are unavailable right now." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: CREDIT_TYPE_ORDER.map((type) => /* @__PURE__ */ jsxRuntime.jsx(CreditRow, { type, channel: channels[type] ?? null, loading, addHref }, type)) })
+      ] })
+    }
   );
 }
 function notifStateKey(orgId) {
@@ -1193,7 +1247,6 @@ function NewReplyToast({
   const [visible, setVisible] = react.useState(false);
   const onCloseRef = react.useRef(onClose);
   onCloseRef.current = onClose;
-  const lowFuelHintVisible2 = useLowFuelHintVisible();
   react.useEffect(() => {
     setVisible(true);
     const fadeAt = Math.max(0, ttlMs - 450);
@@ -1223,7 +1276,6 @@ function NewReplyToast({
       },
       className: "absolute right-[-6px] top-[calc(100%+12px)] z-50 min-w-[240px] max-w-[320px] cursor-pointer rounded-xl bg-[#161616] px-4 py-3 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
       style: {
-        top: lowFuelHintVisible2 ? `calc(100% + 12px + ${LOW_FUEL_HINT_CLEARANCE_PX}px)` : void 0,
         opacity: visible ? 1 : 0,
         transform: visible ? "translateY(0px)" : "translateY(-4px)",
         transition: "opacity 250ms ease, transform 250ms ease"
@@ -4541,10 +4593,19 @@ var CORE_APP = "vrm";
 var DEFAULT_SIGN_OUT_URL = "/auth/signout";
 var POLITOGY_APPS = {
   vrm: { title: "Politogy VRM", origin: "https://app.politogyvrm.com", storagePrefix: "vrm" },
+  // Contacts, Forms, Surveys and CTAs are Relationship rows only (Specs/
+  // Left-Navigation §9.1; Campaign has none of them, §9.2), so they are
+  // PINNED to Relationship like the Dashboard below. Left unscoped, the mode
+  // switcher and rail colour took the user's last mode choice while the rows
+  // stayed Relationship: after picking Campaign, Contacts drew the red
+  // "Campaign mode" rail around Relationship rows, even after a reload
+  // (measured 2026-10-16 on We need Steve; §11.1 "the rail never shows a mix
+  // of two modes").
   contacts: {
     title: "Contacts",
     origin: "https://contacts.politogyvrm.com",
     storagePrefix: "contacts",
+    mode: "relationship",
     pageTitle: false
   },
   // 'title' for forms/surveys/polls/ctas for the same reason as petitions
@@ -4553,11 +4614,11 @@ var POLITOGY_APPS = {
   // page header falls back to the static registry title forever, so the
   // designed "<mode> mode" eyebrow + H2 + subtitle block never gets the real
   // per-page title an app passes it (UI-Platform → Page header).
-  forms: { title: "Forms", origin: "https://forms.politogyvrm.com", storagePrefix: "forms", grants: ["title"] },
-  surveys: { title: "Surveys", origin: "https://surveys.politogyvrm.com", storagePrefix: "surveys", grants: ["title"] },
+  forms: { title: "Forms", origin: "https://forms.politogyvrm.com", storagePrefix: "forms", mode: "relationship", grants: ["title"] },
+  surveys: { title: "Surveys", origin: "https://surveys.politogyvrm.com", storagePrefix: "surveys", mode: "relationship", grants: ["title"] },
   // Specs/Left-Navigation §9.2: Polling is a Campaign row (Research).
   polls: { title: "Polls", origin: "https://polls.politogyvrm.com", storagePrefix: "polls", mode: "campaign", grants: ["title"] },
-  ctas: { title: "CTAs", origin: "https://ctas.politogyvrm.com", storagePrefix: "ctas", grants: ["title"] },
+  ctas: { title: "CTAs", origin: "https://ctas.politogyvrm.com", storagePrefix: "ctas", mode: "relationship", grants: ["title"] },
   // V2 apps that replace retired app.politogyvrm.com pages (Reference/
   // UI-Platform v42 "Retirement of app.politogyvrm.com"). Dashboard is the
   // Relationship Dashboard, the Relationship Mode landing page, and nothing
@@ -4781,7 +4842,7 @@ function FrameBody({
   const coreOrgs = chrome?.orgs ?? [];
   const activeCoreOrg = coreOrgs.find((o) => o.id === chrome?.orgId) ?? null;
   const navDisplay = chrome?.navDisplay ?? "both";
-  const navMode = appMode ?? "relationship";
+  const navMode = appMode ?? (app !== CORE_APP && isStandardNavMode(mode.id) ? mode.id : "relationship");
   const activeOrgId = chrome?.orgId ?? null;
   const derivedNavItems = react.useMemo(
     () => standardPolitogyNav({
@@ -4824,7 +4885,7 @@ function FrameBody({
       {
         visible: bootVisible,
         bootProgress,
-        syntheticReady: appReady ?? chromeResolved,
+        syntheticReady: (appReady ?? chromeResolved) && !chrome?.orgPending && (appMode !== void 0 || mode.resolved !== false),
         onExitComplete: () => setBootVisible(false)
       },
       bootGeneration
@@ -4914,6 +4975,18 @@ function FrameBody({
 }
 var ORG_STORAGE_KEY = "vrm.activeOrg";
 var MODE_STORAGE_KEY = "vrm.activeMode";
+var orgSwitchLanding = {
+  href(orgId) {
+    return modeLandingHref("relationship", {
+      orgId,
+      hostname: typeof window === "undefined" ? null : window.location.hostname
+    });
+  },
+  navigate(href) {
+    window.location.assign(href);
+  }
+};
+var ORG_SWITCH_REEXCHANGE_BUDGET_MS = 4e3;
 var ChromeStateContext = react.createContext(null);
 function useChromeState() {
   return react.useContext(ChromeStateContext);
@@ -4929,6 +5002,7 @@ function TokenChromeStateProvider({
   const [pendingOrg, setPendingOrg] = react.useState(null);
   const tokenOrgRef = react.useRef(tokenOrg);
   tokenOrgRef.current = tokenOrg;
+  const leavingRef = react.useRef(false);
   react.useEffect(() => {
     setNavDisplayState(resolveNavDisplay());
   }, []);
@@ -4969,6 +5043,7 @@ function TokenChromeStateProvider({
   }, [overrideOrg, tokenOrg.orgId]);
   react.useEffect(() => {
     if (!pendingOrg || tokenOrg.orgId !== pendingOrg) return;
+    if (leavingRef.current) return;
     setPendingOrg(null);
     try {
       const next = syncOrgIdInUrl(window.location.href, pendingOrg);
@@ -4991,8 +5066,16 @@ function TokenChromeStateProvider({
           window.history.replaceState(window.history.state, "", url.toString());
         } catch {
         }
-        await tokenOrgRef.current.onReexchange(claims.orgId, { perTab: false });
+        leavingRef.current = true;
+        await Promise.race([
+          Promise.resolve(tokenOrgRef.current.onReexchange(claims.orgId, { perTab: false })).catch(() => {
+          }),
+          new Promise((resolve) => setTimeout(resolve, ORG_SWITCH_REEXCHANGE_BUDGET_MS))
+        ]);
+        const href = orgSwitchLanding.href(claims.orgId);
+        if (href) orgSwitchLanding.navigate(href);
       } catch (err) {
+        leavingRef.current = false;
         setPendingOrg(null);
         tokenOrgRef.current.onSwitchError?.(err);
       }
@@ -5057,10 +5140,13 @@ function ChromeStateProvider({
   const navReconciled = react.useRef(false);
   const orgReconciled = react.useRef(false);
   const hadBootSelector = react.useRef(false);
+  const bootUrlTail = react.useRef(null);
   react.useEffect(() => {
     try {
+      const urlSelector = readOrgSelectorFromUrl(window.location.search);
+      if (urlSelector && !isOrgId(urlSelector)) bootUrlTail.current = urlSelector;
       const selector = resolveActiveOrg();
-      if (selector) hadBootSelector.current = true;
+      if (selector || urlSelector) hadBootSelector.current = true;
       const storedOrg = selector ?? localStorage.getItem(ORG_STORAGE_KEY);
       if (storedOrg) setOrgIdState(storedOrg);
     } catch {
@@ -5097,7 +5183,9 @@ function ChromeStateProvider({
   }, []);
   react.useEffect(() => {
     if (!orgs || orgs.length === 0) return;
-    setOrgIdState((prev) => prev && orgs.some((o) => o.id === prev) ? prev : orgs[0].id);
+    const fromUrl = matchOrgSelector(bootUrlTail.current, orgs)?.id ?? null;
+    bootUrlTail.current = null;
+    setOrgIdState((prev) => fromUrl ?? (prev && orgs.some((o) => o.id === prev) ? prev : orgs[0].id));
   }, [orgs]);
   const activeOrgRef = react.useRef(null);
   const memberOrgsRef = react.useRef([]);
@@ -5155,6 +5243,10 @@ function ChromeStateProvider({
     } catch {
     }
     writeActiveOrgCookie(id);
+    if (isOrgId(id)) {
+      const href = orgSwitchLanding.href(id);
+      if (href) orgSwitchLanding.navigate(href);
+    }
   }, []);
   const setNavDisplay = react.useCallback(
     (m) => {
@@ -5221,8 +5313,10 @@ function ChromeStateProvider({
     }
     try {
       const url = new URL(window.location.href);
-      if (url.searchParams.get(ACTIVE_ORG_QUERY_PARAM) !== activeOrgId) {
-        url.searchParams.set(ACTIVE_ORG_QUERY_PARAM, activeOrgId);
+      const tail = orgIdTail(activeOrgId);
+      if (url.searchParams.has(ACTIVE_ORG_QUERY_PARAM) || url.searchParams.get(ORG_ID_QUERY_PARAM) !== tail) {
+        url.searchParams.delete(ACTIVE_ORG_QUERY_PARAM);
+        url.searchParams.set(ORG_ID_QUERY_PARAM, tail);
         window.history.replaceState(window.history.state, "", url.toString());
       }
     } catch {
@@ -5511,6 +5605,7 @@ function useChromeMode(arg = {}) {
   const orgId = ctx?.orgId ?? null;
   const orgPending = ctx?.orgPending ?? false;
   const [entitled, setEntitled] = react.useState(null);
+  const [settledOrgId, setSettledOrgId] = react.useState(null);
   const [selectedModeId, setSelectedModeId] = react.useState(null);
   react.useEffect(() => {
     try {
@@ -5525,6 +5620,7 @@ function useChromeMode(arg = {}) {
     const bootMe = me;
     if (bootMe && bootMe.account === orgId && bootMe.modes !== void 0) {
       setEntitled(bootMe.modes ?? null);
+      setSettledOrgId(orgId);
       return;
     }
     let cancelled = false;
@@ -5532,7 +5628,9 @@ function useChromeMode(arg = {}) {
       if (cancelled) return;
       const modes = data?.modes ?? null;
       setEntitled(modes);
+      setSettledOrgId(orgId);
     }).catch(() => {
+      if (!cancelled) setSettledOrgId(orgId);
     });
     return () => {
       cancelled = true;
@@ -5546,6 +5644,9 @@ function useChromeMode(arg = {}) {
     id: current.id,
     label: current.label,
     icon: current.icon,
+    // A registry pin is final at once; otherwise the mode is final when the
+    // active org's Modes are in (or nothing can be read: no chrome or no org).
+    resolved: Boolean(pinned) || !dedupedFetch || !orgId || settledOrgId === orgId && !orgPending,
     // Left-Navigation §7 / Reference/UI-Platform: always the row of three icon
     // buttons. A mode the organization does not hold is shown dimmed and not
     // selectable, never hidden. Before entitlements land only the current mode
@@ -5584,6 +5685,7 @@ exports.deriveBreadcrumbs = deriveBreadcrumbs;
 exports.footerLinks = footerLinks;
 exports.looksLikeEmail = looksLikeEmail;
 exports.modeLandingHref = modeLandingHref;
+exports.orgSwitchLanding = orgSwitchLanding;
 exports.resolveIdentity = resolveIdentity;
 exports.standardNavIcons = standardNavIcons;
 exports.useChromeFooter = useChromeFooter;