@the-portland-company/shell 0.82.0 → 0.84.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 0.84.0
+
+An organization switch lands on the new organization's Relationship Dashboard. Spec cited: Specs/Left-Navigation §6 and §11.2 (v21, decided 2026-10-15 by Ben; supersedes the 2026-10-06 rule that kept mode, page and tab).
+
+- **Why.** Measured by Ben on production 2026-10-15: switching from "We need Steve" in Campaign Mode to an organization without Campaign Mode kept the Campaign rail, then showed an access error that required signing out and in again.
+- **Token-org path.** After the IdP accepts the switch, the tab keeps the switch pending (Loading Screen up), lets the current app re-exchange for up to 4 seconds, then navigates to `https://dashboard.politogyvrm.com/dashboard?mode=relationship&org=<new org>` (`-staging` twin from a staging host). A refused switch still rolls back and calls `onSwitchError`.
+- **Legacy path.** `ChromeStateProvider` navigates to the same landing after writing the cookie.
+- **Frame.** The Loading Screen's synthetic ready signal waits while `orgPending` is true.
+- **New export** `orgSwitchLanding` (`href`, `navigate`); tests replace `navigate`.
+- **Not changed.** A per-tab `?org_id=` override and a switch made in another tab (followed on focus) do not navigate: neither is a switch made in this tab.
+
+## 0.83.0
+
+The top bar's Credits icon shows credit health. Spec cited: Reference/UI-Platform v57 "Top bar → Credits" and "Credit health in the payload" (decided by Ben, 2026-10-13); VRM-Admin/Pricing-and-Metering v5 §7.5.
+
+- **Icon.** The battery with the lightning bolt, coloured by the worst state among the credit types in use: green when every one is Good, yellow when at least one is Low, red when at least one is Out. Not in use never changes it. The fill drains with the state (full, part, empty) and the state is in the `aria-label` ("Credits: low on Signal Credits"), so colour is never the only signal. A payload without `state` is unknown: neutral icon, no colour, no gauge level.
+- **Tooltip** (hover or focus) lists all four types, each with Available, a gauge against its full mark and the state in words ("Signal Credits: 38 left, about 1 day at your recent pace"). **Click** opens the breakdown: four rows, Available, Included (with the next grant date) and Purchased when the ledger publishes them, gauge, state, and a "+" to buy that type.
+- **Retired.** The low-balance hint that hung under the icon ("You're low on fuel" / "Buy More Fuel"), its sessionStorage dismissal and the new-reply toast's clearance for it. No pop-up about credits opens by itself. `lowFuel` / `lowFuelThreshold` are no longer read. The word is Credits everywhere; "fuel" appears in no string.
+- API: `FuelChannelStatus` gains `state`, `fullMarkUnits`, `daysOfUseLeft`, `includedUnits`, `purchasedUnits`, `nextGrantAt`; `CommunicationsFuelStatus` gains optional `ai` and `enhancement`. `TopBarPopover` gains `icon`, `ariaLabel` and `tooltip`; `topBarIconButtonClass` tones gain `ok` and `low` (`TopBarIconTone`). New export `CreditsAction` (alias of `FuelAction`) and the pure helpers from `./native` (`creditsIconState`, `creditGaugeRatio`, `creditTooltipLine`, `creditsAriaLabel`). New tokens `--credits-good`, `--credits-low`.
+- Tests: `__tests__/credits.test.ts`, `__tests__/chromeActions.test.tsx` (Credits block).
+
+## 0.82.1
+
+The legacy chrome provider (Contacts, and any app not yet on `tokenOrg`) writes the organization to the address bar as the 7-char `org_id` tail and never the full-uuid `?org=`. Spec cited: Reference/UI-Platform "URL state" (`org_id`, always present; the legacy `org=` and cookie stay only until every app reads the org from the token).
+
+- **Cause.** The provider's sync effect set `?org=<full uuid>` whenever the active org changed, so Contacts' canonical URL regained a second org key after every load (reported by Ben's agent, 2026-10-13).
+- **Fix.** The effect deletes `org=` and sets `org_id=<tail>` (a replace, never a navigation); the cookie mirror is unchanged. At boot an `org_id` tail counts as an explicit selector and, once the member list resolves, selects that org (uncontrolled apps); a non-member tail is rewritten to the active org.
+- Tests: `__tests__/legacyOrgIdUrl.test.tsx`.
+
 ## 0.82.0
 
 The universal-search placeholder names what the current Mode searches. Spec cited: Reference/UI-Platform v56 "Top bar — required elements" (decided by Ben, 2026-10-12).

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"
@@ -4824,7 +4876,7 @@ function FrameBody({
       {
         visible: bootVisible,
         bootProgress,
-        syntheticReady: appReady ?? chromeResolved,
+        syntheticReady: (appReady ?? chromeResolved) && !chrome?.orgPending,
         onExitComplete: () => setBootVisible(false)
       },
       bootGeneration
@@ -4914,6 +4966,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 +4993,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 +5034,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 +5057,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 +5131,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 +5174,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 +5234,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 +5304,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 {
@@ -5584,6 +5669,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;