@the-portland-company/shell 0.33.0 → 0.34.0

package/dist/app-chrome.cjs

@@ -146,6 +146,10 @@ var d=document.documentElement;
 if(resolved==="dark"){d.classList.add("dark");}else{d.classList.remove("dark");}
 try{d.style.colorScheme=resolved;}catch(e){}
 }catch(e){}})();`;
+var CORE_APP_ORIGIN = "https://app.politogyvrm.com";
+var CORE_BILLING_PATH = "/organization-settings/subscription-billing/text-email";
+var CORE_BILLING_URL = `${CORE_APP_ORIGIN}${CORE_BILLING_PATH}`;
+var QUARANTINED_CONTACTS_URL = `${CORE_APP_ORIGIN}/relationship/contacts/quarantined`;
 function topBarIconButtonClass(tone = "default") {
   const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]" : "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 [
@@ -328,11 +332,22 @@ function TopBarPopover({
   badge,
   tone,
   onOpen,
+  openToken,
   children,
   panelClassName
 }) {
   const [open, setOpen] = react.useState(false);
   const rootRef = react.useRef(null);
+  const lastOpenTokenRef = react.useRef(openToken);
+  react.useEffect(() => {
+    if (openToken === void 0) return;
+    if (openToken === lastOpenTokenRef.current) return;
+    lastOpenTokenRef.current = openToken;
+    setOpen((v) => {
+      if (!v) onOpen?.();
+      return true;
+    });
+  }, [openToken, onOpen]);
   react.useEffect(() => {
     if (!open) return;
     const onDocClick = (e) => {
@@ -416,31 +431,60 @@ function LayoutGlyph({ size = 20, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "21", x2: "9", y2: "9" })
   ] });
 }
+function PlusGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("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("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] });
+}
+function XGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("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("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+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,
   channel,
-  loading
+  loading,
+  addHref,
+  addLabel
 }) {
   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: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", 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 }),
-      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(--color-race-red)]" : "text-[color:var(--muted)]"
-          ].join(" "),
-          children: [
-            remaining.toLocaleString(),
-            " left"
-          ]
-        }
-      )
+      /* @__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(--color-race-red)]" : "text-[color:var(--muted)]"
+            ].join(" "),
+            children: [
+              remaining.toLocaleString(),
+              " left"
+            ]
+          }
+        ),
+        addHref ? /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: addHref,
+            "aria-label": addLabel,
+            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",
@@ -454,6 +498,71 @@ function FuelRow({
     ) })
   ] });
 }
+function LowFuelHint({ lowFuel }) {
+  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]);
+  if (!lowFuel || dismissed) 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-50 w-60 rounded-lg border border-[color:var(--color-race-red)] bg-[color:var(--color-race-red)] px-3 py-2 text-white 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(--color-race-red)]"
+          }
+        ),
+        /* @__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: CORE_BILLING_URL,
+                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-white/90 transition hover:bg-white/20",
+              children: /* @__PURE__ */ jsxRuntime.jsx(XGlyph, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function FuelAction({ orgId }) {
   const { fetchJson } = useNavChrome("FuelAction");
   const [fuel, setFuel] = react.useState(null);
@@ -479,21 +588,154 @@ function FuelAction({ orgId }) {
     };
   }, [fetchJson, orgId]);
   const low = !!fuel && (fuel.signal.lowFuel || fuel.broadcast.lowFuel);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TopBarPopover,
+  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",
+          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: CORE_BILLING_URL,
+                  addLabel: "Add SMS Signal fuel"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FuelRow,
+                {
+                  label: "Email Broadcast",
+                  channel: fuel?.broadcast ?? null,
+                  loading,
+                  addHref: CORE_BILLING_URL,
+                  addLabel: "Add Email Broadcast fuel"
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(LowFuelHint, { lowFuel: low })
+    ] })
+  );
+}
+function notifStateKey(orgId) {
+  return `politogy_chrome_notif_state:${orgId ?? "none"}`;
+}
+function readNotifState(orgId) {
+  const empty = { readAlertIds: [], lastSeenAt: null, toastedReplyIds: [] };
+  if (typeof window === "undefined") return empty;
+  try {
+    const raw = window.localStorage.getItem(notifStateKey(orgId));
+    if (!raw) return empty;
+    const parsed = JSON.parse(raw);
+    return {
+      readAlertIds: Array.isArray(parsed?.readAlertIds) ? parsed.readAlertIds.filter((id) => typeof id === "string") : [],
+      lastSeenAt: typeof parsed?.lastSeenAt === "string" ? parsed.lastSeenAt : null,
+      toastedReplyIds: Array.isArray(parsed?.toastedReplyIds) ? parsed.toastedReplyIds.filter((id) => typeof id === "string") : []
+    };
+  } catch {
+    return empty;
+  }
+}
+function writeNotifState(orgId, state) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(notifStateKey(orgId), JSON.stringify(state));
+  } catch {
+  }
+}
+var TEN_DLC_REDIRECTED_KEY = "politogy_10dlc_redirected";
+function formatPhone(raw) {
+  const digits = raw.replace(/\D/g, "");
+  const ten = digits.length === 11 && digits.startsWith("1") ? digits.slice(1) : digits;
+  if (ten.length === 10) return `(${ten.slice(0, 3)}) ${ten.slice(3, 6)}-${ten.slice(6)}`;
+  return raw;
+}
+function ImportRow({ imp }) {
+  const pct = imp.percent == null ? null : Math.max(0, Math.min(100, imp.percent));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm text-[color:var(--foreground)]", children: imp.label }),
+      pct != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-xs tabular-nums text-[color:var(--muted)]", children: [
+        Math.round(pct),
+        "%"
+      ] }) : null
+    ] }),
+    pct != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-full rounded-full bg-[color:var(--color-race-red)] transition-[width]",
+        style: { width: `${pct}%` }
+      }
+    ) }) : null
+  ] });
+}
+function NewReplyToast({
+  reply,
+  onActivate,
+  onClose,
+  ttlMs = 12e3
+}) {
+  const [visible, setVisible] = react.useState(false);
+  const onCloseRef = react.useRef(onClose);
+  onCloseRef.current = onClose;
+  react.useEffect(() => {
+    setVisible(true);
+    const fadeAt = Math.max(0, ttlMs - 450);
+    const t1 = window.setTimeout(() => setVisible(false), fadeAt);
+    const t2 = window.setTimeout(() => onCloseRef.current(), ttlMs);
+    return () => {
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+    };
+  }, [ttlMs]);
+  const activate = () => {
+    setVisible(false);
+    onActivate();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      label: "Communications Fuel",
-      description: "Remaining SMS and email sending balance for the active organization.",
-      slot: "comms-fuel",
-      fallbackIcon: BatteryGlyph,
-      tone: low ? "warning" : "default",
-      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 }),
-          /* @__PURE__ */ jsxRuntime.jsx(FuelRow, { label: "Email Broadcast", channel: fuel?.broadcast ?? null, loading })
-        ] })
-      ] })
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Open new reply",
+      onClick: activate,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          activate();
+        }
+      },
+      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-white shadow-[var(--shadow-soft)]",
+      style: {
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0px)" : "translateY(-4px)",
+        transition: "opacity 250ms ease, transform 250ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute right-[18px] top-[-7px] h-0 w-0 border-x-[8px] border-x-transparent border-b-[8px] border-b-[#161616]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold", children: reply.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 truncate text-xs opacity-85", children: reply.preview })
+      ]
     }
   );
 }
@@ -502,6 +744,13 @@ function NotificationsAction({ orgId }) {
   const [payload, setPayload] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(false);
+  const [notif, setNotif] = react.useState(() => readNotifState(orgId));
+  const [toastReply, setToastReply] = react.useState(null);
+  const [openToken, setOpenToken] = react.useState(0);
+  react.useEffect(() => {
+    setNotif(readNotifState(orgId));
+    setToastReply(null);
+  }, [orgId]);
   react.useEffect(() => {
     let cancelled = false;
     setLoading(true);
@@ -520,51 +769,226 @@ function NotificationsAction({ orgId }) {
       cancelled = true;
     };
   }, [fetchJson, orgId]);
-  const count = (payload?.alerts.length ?? 0) + (payload?.replies.length ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TopBarPopover,
-    {
-      label: "Alerts & Notifications",
-      description: "System alerts and recent activity for the active organization.",
-      slot: "notifications",
-      fallbackIcon: BellGlyph,
-      badge: loading ? 0 : count,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
-        loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-full" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-3/4" })
-        ] }) : error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Notifications are unavailable right now." }) : count === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-1 text-sm text-[color:var(--muted)]", children: "You\u2019re all caught up." }) : /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex max-h-80 flex-col gap-1 overflow-y-auto", children: [
-          payload?.alerts.map((a) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: a.href ?? "#",
-              className: "block rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: a.title }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[color:var(--muted)]", children: a.description })
-              ]
-            }
-          ) }, a.id)),
-          payload?.replies.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
-          ] }, r.id))
-        ] })
-      ] })
+  react.useEffect(() => {
+    if (!payload || typeof window === "undefined") return;
+    const alert = payload.alerts.find((a) => a.kind === "10dlc_registration" && a.href);
+    if (!alert?.href) return;
+    try {
+      if (window.sessionStorage.getItem(TEN_DLC_REDIRECTED_KEY) === "1") return;
+    } catch {
+      return;
     }
+    let target;
+    try {
+      target = new URL(alert.href, window.location.href);
+    } catch {
+      return;
+    }
+    if (target.origin !== window.location.origin) return;
+    try {
+      window.sessionStorage.setItem(TEN_DLC_REDIRECTED_KEY, "1");
+    } catch {
+    }
+    window.location.assign(alert.href);
+  }, [payload]);
+  const markRead = react.useCallback(
+    (id) => {
+      setNotif((prev) => {
+        if (prev.readAlertIds.includes(id)) return prev;
+        const next = { ...prev, readAlertIds: [...prev.readAlertIds, id] };
+        writeNotifState(orgId, next);
+        return next;
+      });
+    },
+    [orgId]
+  );
+  const markUnread = react.useCallback(
+    (id) => {
+      setNotif((prev) => {
+        if (!prev.readAlertIds.includes(id)) return prev;
+        const next = { ...prev, readAlertIds: prev.readAlertIds.filter((x) => x !== id) };
+        writeNotifState(orgId, next);
+        return next;
+      });
+    },
+    [orgId]
+  );
+  const onOpen = react.useCallback(() => {
+    setNotif((prev) => {
+      const next = { ...prev, lastSeenAt: (/* @__PURE__ */ new Date()).toISOString() };
+      writeNotifState(orgId, next);
+      return next;
+    });
+  }, [orgId]);
+  const alerts = payload?.alerts ?? [];
+  const replies = payload?.replies ?? [];
+  const imports = payload?.imports ?? [];
+  const quarantined = payload?.quarantined ?? [];
+  react.useEffect(() => {
+    if (!payload || toastReply) return;
+    const candidate = replies.filter((r) => {
+      if (!r.createdAt) return false;
+      if (notif.lastSeenAt && r.createdAt <= notif.lastSeenAt) return false;
+      return !notif.toastedReplyIds.includes(r.id);
+    }).sort((a, b) => a.createdAt < b.createdAt ? 1 : -1)[0];
+    if (!candidate) return;
+    setToastReply(candidate);
+    setNotif((prev) => {
+      const next = {
+        ...prev,
+        toastedReplyIds: [candidate.id, ...prev.toastedReplyIds].slice(0, 50)
+      };
+      writeNotifState(orgId, next);
+      return next;
+    });
+  }, [payload, replies, toastReply, notif.lastSeenAt, notif.toastedReplyIds, orgId]);
+  const onToastActivate = react.useCallback(() => {
+    const href = toastReply?.href;
+    setToastReply(null);
+    if (href && typeof window !== "undefined") {
+      window.location.assign(href);
+      return;
+    }
+    setOpenToken((t) => t + 1);
+  }, [toastReply]);
+  const unreadAlertCount = alerts.filter((a) => !notif.readAlertIds.includes(a.id)).length;
+  const unseenReplyCount = replies.filter((r) => {
+    if (!notif.lastSeenAt) return true;
+    if (!r.createdAt) return false;
+    return r.createdAt > notif.lastSeenAt;
+  }).length;
+  const badgeCount = unreadAlertCount + unseenReplyCount;
+  const isEmpty = alerts.length === 0 && replies.length === 0 && imports.length === 0 && quarantined.length === 0;
+  return (
+    // Relative wrapper so the new-reply toast anchors to the bell trigger,
+    // outside the popover panel (same pattern as the fuel low-fuel nudge).
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TopBarPopover,
+        {
+          label: "Alerts & Notifications",
+          description: "System alerts and recent activity for the active organization.",
+          slot: "notifications",
+          fallbackIcon: BellGlyph,
+          badge: loading ? 0 : badgeCount,
+          onOpen,
+          openToken,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+            loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-full" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-3/4" })
+            ] }) : error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Notifications are unavailable right now." }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-1 text-sm text-[color:var(--muted)]", children: "You\u2019re all caught up." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-h-80 flex-col gap-2 overflow-y-auto", children: [
+              alerts.length > 0 || replies.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex flex-col gap-1", children: [
+                alerts.map((a) => {
+                  const isRead = notif.readAlertIds.includes(a.id);
+                  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: isRead ? "opacity-50" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1 rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "a",
+                      {
+                        href: a.href ?? "#",
+                        onClick: () => markRead(a.id),
+                        className: "block min-w-0 flex-1",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: a.title }),
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[color:var(--muted)]", children: a.description })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": isRead ? "Mark as unread" : "Mark as read",
+                        onClick: () => isRead ? markUnread(a.id) : markRead(a.id),
+                        className: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)]",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(CheckGlyph, {})
+                      }
+                    )
+                  ] }) }, a.id);
+                }),
+                replies.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
+                ] }, r.id))
+              ] }) : null,
+              imports.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Imports" }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: imports.map((imp) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: imp.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: imp.href, className: "block", children: /* @__PURE__ */ jsxRuntime.jsx(ImportRow, { imp }) }) : /* @__PURE__ */ jsxRuntime.jsx(ImportRow, { imp }) }, imp.id)) })
+              ] }) : null,
+              quarantined.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between px-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Quarantined Contacts" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: QUARANTINED_CONTACTS_URL,
+                      className: "text-[11px] font-semibold text-[color:var(--color-race-red)] hover:underline",
+                      children: "View all"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: quarantined.map((q) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: formatPhone(q.phone) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--panel)] px-1 text-[10px] tabular-nums text-[color:var(--muted)]", children: q.count })
+                  ] }),
+                  q.latestAt ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[color:var(--muted)]", children: new Date(q.latestAt).toLocaleString() }) : null
+                ] }, q.phone)) })
+              ] }) : null
+            ] })
+          ] })
+        }
+      ),
+      toastReply ? /* @__PURE__ */ jsxRuntime.jsx(
+        NewReplyToast,
+        {
+          reply: toastReply,
+          onActivate: onToastActivate,
+          onClose: () => setToastReply(null)
+        }
+      ) : null
+    ] })
   );
 }
-function SupportAction() {
+function composeSupportMessage(input) {
+  const ctx = [`Page: ${input.pageTitle || "Unknown"}`, `URL: ${input.url}`];
+  if (input.orgName) ctx.push(`Org: ${input.orgName}`);
+  const reply = [input.replyEmail?.trim(), input.replyPhone?.trim()].filter(Boolean).join(" / ");
+  if (reply) ctx.push(`Reply-to: ${reply}`);
+  return `${input.note.trim()}
+
+---
+${ctx.join("\n")}`;
+}
+function SupportAction({ orgId } = {}) {
   const { fetchJson } = useNavChrome("SupportAction");
+  const { me, loaded } = useChromeMe();
+  const { orgs } = useChromeOrgs();
   const [open, setOpen] = react.useState(false);
   const [message, setMessage] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [phone, setPhone] = react.useState("");
+  const [showEmailError, setShowEmailError] = react.useState(false);
   const [state, setState] = react.useState("idle");
+  const meEmail = me?.email ?? null;
+  const mePhone = me?.phone ?? null;
+  const missingEmail = loaded && !meEmail;
+  const missingPhone = loaded && !mePhone;
+  const activeOrg = (orgId ? orgs?.find((o) => o.id === orgId) : null) ?? (orgs && orgs.length === 1 ? orgs[0] : null);
+  const orgName = activeOrg?.name ?? null;
   const close = react.useCallback(() => {
     setOpen(false);
     setState("idle");
     setMessage("");
+    setShowEmailError(false);
   }, []);
+  react.useEffect(() => {
+    if (!open) return;
+    setEmail(meEmail ?? "");
+    setPhone(mePhone ?? "");
+    setShowEmailError(false);
+  }, [open, meEmail, mePhone]);
   react.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -575,12 +999,28 @@ function SupportAction() {
   }, [open, close]);
   const submit = async () => {
     if (!message.trim() || state === "sending") return;
+    const resolvedEmail = (missingEmail ? email : meEmail ?? "").trim();
+    const resolvedPhone = (missingPhone ? phone : mePhone ?? "").trim();
+    if (missingEmail && !resolvedEmail) {
+      setShowEmailError(true);
+      return;
+    }
+    setShowEmailError(false);
+    const collectedContact = missingEmail || missingPhone;
+    const fullMessage = composeSupportMessage({
+      note: message,
+      pageTitle: typeof document !== "undefined" ? document.title : "",
+      url: typeof window !== "undefined" ? window.location.href : "",
+      orgName,
+      replyEmail: collectedContact ? resolvedEmail : void 0,
+      replyPhone: collectedContact ? resolvedPhone : void 0
+    });
     setState("sending");
     try {
       await fetchJson("support", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: message.trim() })
+        body: JSON.stringify({ message: fullMessage })
       });
       setState("sent");
     } catch {
@@ -633,6 +1073,33 @@ function SupportAction() {
               ) })
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
+              missingEmail ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-4 block", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your email" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "email",
+                    value: email,
+                    onChange: (e) => setEmail(e.target.value),
+                    placeholder: "you@example.com",
+                    className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
+                  }
+                ),
+                showEmailError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-[color:var(--color-race-red)]", children: "Enter an email so support can reply." }) : null
+              ] }) : null,
+              missingPhone ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-3 block", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your phone \u2014 optional" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "tel",
+                    value: phone,
+                    onChange: (e) => setPhone(e.target.value),
+                    placeholder: "(503) 555-1212",
+                    className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
+                  }
+                )
+              ] }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
                 "textarea",
                 {
@@ -2369,7 +2836,7 @@ function ChromeTopBarActions() {
         children: /* @__PURE__ */ jsxRuntime.jsx(ChromeDevNotesMenu, {})
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(SupportAction, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(SupportAction, { orgId: state.orgId }),
     /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: state.orgId })
   ] });
 }