@the-portland-company/shell 0.76.15 → 0.76.18

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+## 0.76.18
+
+Consolidates 0.76.16 and 0.76.17, neither of which reached npm (their publish gates failed). Specs cited: Global-Rules v38, UI-Platform v46, Specs/Left-Navigation (no Tribes row, §9.1), Specs/System-Communications §6.3 and §12.2 (Binding, 2026-10-03).
+
+- **`NotificationsAdapter` (comms bell).** `src/notifications/adapter.ts`: `list(orgId)`, `markRead`, `archive`, `resolve`. The default reads `me/notifications` through the chrome proxy with the viewer's session (comms `GET /v1/me/notifications`, `POST /v1/me/notifications/:id/{read,archive,resolve}`, politogy-comms #14). Any failure (401, 404, network, malformed body) is an empty bell, never an error; owner actions resolve `false` instead of throwing. `NavChromeProvider` and `PolitogyAppChrome` take `notificationsAdapter`: omitted = comms (default); `null` = legacy contacts-shaped feed (replies, imports, quarantine). Alert rows read the server `read_at`; the badge is the server count.
+- **Behavior change for consumers.** Apps that rely on the legacy contacts replies, imports or quarantine rows in the bell must pass `notificationsAdapter={null}`.
+- **Tests.** `__tests__/notificationsAdapter.test.ts` (new). `__tests__/chromeFetchDedupe.test.tsx` counts `me/notifications`. `__tests__/chromeActions.test.tsx` pins its legacy `NotificationsAction` tests to `notificationsAdapter={null}`; this is what fixed the 8 CI-only failures that blocked the 0.76.16 publish gate.
+- **Tribes.** No `tribes` registry row in this release. Tribes lives inside Contacts; a `tribes.politogyvrm.com` entry would point at an empty scaffold.
+- **Tab containers are left-aligned and fluid** (Spencer, 2026-10-11: "all apps, all tabs, all screens"; Reference/Global-Rules "Tabs & UI Styling": the strip spans the full width of the content area, tabs keep their natural width, left-aligned). `HeaderTabBar` (deprecated) no longer stretches each tab with `flex-1`: tabs sit at natural width packed from the left on a full-width strip (40px hit area). `NavTabStrip` already met this (full-width block, `flex` with default start alignment, natural-width tabs) and is unchanged; `__tests__/tabsLeftAligned.test.tsx` (new) pins both so neither grows `mx-auto`, `justify-center` or a fixed width.
+
+## 0.76.17
+
+Tooltips on the Spec tooltip theme, and the new-reply toast no longer paints over the bell's tooltip. Specs cited: Brand guideline "Tooltips point at their trigger" (`tooltips-point-at-their-trigger`, Spencer 2026-10-06), Reference/UI-Platform "Top-bar tooltips and panels - one shared treatment", Reference/Global-Rules "Tooltip on every tab / UX", tokens v150 `shellChrome.button.tooltipBg/Fg`.
+
+- **`TopBarTooltip` is styled on the tooltip tokens.** Body, border and arrow use `--app-btn-tooltip-bg` (v150: #2F3136), title and description use `--app-btn-tooltip-fg` (#FFFFFF, description at 75% opacity). It was on the panel surface (`--panel-elevated` / `--line`), which is why it rendered as a light card. Opens on keyboard focus (`group-focus-visible/tbtip`) as well as hover, per the guideline.
+- **Toast/tooltip overlap (a2p dashboard, reported 2026-10-11).** The new-reply toast and the bell's hover tooltip are both z-50 under the same trigger; hovering the bell while a toast was up painted the toast over "Alerts & Notifications". `TopBarPopover` takes `hideTooltip`; `NotificationsAction` passes it while the toast is visible and `FuelAction` while the low-fuel hint is up. One surface per trigger.
+- **`HeaderTabBar` (deprecated) uses the shared tooltip** instead of Chakra's `Tooltip`; the shell no longer ships a second tooltip.
+- Tests: `__tests__/tooltipTheme.test.tsx` (new).
+- **Not changed:** `src/css/chrome.css` still carries the pre-v150 fallbacks (`--app-btn-tooltip-bg: #0F172A`, mode primaries). `npm run gen:tokens` against Specs v150 produces a 508-line diff including `--mode-relationship-primary` #D32F3B -> #2F3136, which is a Brand-token question, not this fix; the runtime token sheet (`ensureRuntimeBrandTokens`) already overrides every fallback live.
+- **Still open:** `aria-describedby` from trigger to tooltip (guideline) is not wired; apps outside the chrome still use native `title=` attributes rather than `TopBarTooltip` (exported from `./native`).
+
+## 0.76.16
+
+The shell's Notifications bell reads the comms feed through a `NotificationsAdapter`. Specs cited: Global-Rules v38, UI-Platform v46, Specs/Left-Navigation (no Tribes row, §9.1), Specs/System-Communications §6.3 and §12.2 (Binding, 2026-10-03).
+
+- **`NotificationsAdapter` (bell).** New `src/notifications/adapter.ts`: `list(orgId)`, `markRead`, `archive`, `resolve`. The default reads `me/notifications` through the chrome proxy with the viewer's session, which is the comms `GET /v1/me/notifications` and `POST /v1/me/notifications/:id/{read,archive,resolve}` (politogy-comms #14). Any failure (401, 404, network, malformed body) is an empty bell, never an error state; owner actions resolve `false` instead of throwing.
+- **Bell wiring.** `NavChromeProvider` and `PolitogyAppChrome` take `notificationsAdapter`. Omitted, the comms adapter is used. `null` keeps the legacy contacts-shaped feed (replies, imports, quarantine) for any app that needs it. Alert rows read the server `read_at` state; the badge is the server's single count.
+- Exports: `createCommsNotificationsAdapter`, `normalizeNotificationsFeed`, `emptyNotificationsFeed` and the adapter types from the package root.
+- Tests: `__tests__/notificationsAdapter.test.ts` (new); `__tests__/chromeFetchDedupe.test.tsx` now counts `me/notifications`. The 41 pre-existing localStorage/cookie failures are unchanged and not addressed.
+- **Still open:** `subscribe` (realtime) is not implemented; the bell refreshes on open and after a mark-read. Resolve and archive are on the adapter but have no panel control yet.
+
 ## 0.76.15
 
 TITLEBAR: the chrome no longer draws the 56px page-title `<h1>` strip (for example "A2P Messaging" above the "CAMPAIGN MODE" eyebrow) for feature apps. The Design shows the page opening on its own eyebrow + H2, so `PolitogyAppFrame` now passes only core's own page title as `topBar.title`. The `title` grant is kept but inert; removing it is a follow-up.

package/dist/app-chrome.cjs

@@ -415,6 +415,79 @@ function SpeculationRulesScript({ items }) {
   return null;
 }
 
+// src/notifications/adapter.ts
+function emptyNotificationsFeed() {
+  return { notifications: [], badge: 0 };
+}
+function asString(value) {
+  return typeof value === "string" ? value : null;
+}
+function normalizeNotificationsFeed(raw) {
+  if (!raw || typeof raw !== "object") return emptyNotificationsFeed();
+  const body = raw;
+  const rows = Array.isArray(body.notifications) ? body.notifications : [];
+  const notifications = [];
+  for (const row of rows) {
+    if (!row || typeof row !== "object") continue;
+    const r = row;
+    const id = asString(r.id);
+    if (!id || asString(r.archived_at)) continue;
+    notifications.push({
+      id,
+      kind: r.kind === "alert" ? "alert" : "notification",
+      title: asString(r.title) ?? "",
+      body: asString(r.body) ?? "",
+      icon: asString(r.icon),
+      link: asString(r.link),
+      readAt: asString(r.read_at),
+      orgId: asString(r.org_id),
+      createdAt: asString(r.created_at)
+    });
+  }
+  const badge = typeof body.badge === "number" && Number.isFinite(body.badge) ? Math.max(0, Math.floor(body.badge)) : notifications.filter((n) => n.kind === "alert" || n.readAt === null).length;
+  return { notifications, badge };
+}
+function createCommsNotificationsAdapter(fetchJson) {
+  const act = async (id, action) => {
+    if (!fetchJson || !id) return false;
+    try {
+      await fetchJson(`me/notifications/${encodeURIComponent(id)}/${action}`, { method: "POST" });
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  return {
+    async list(orgId) {
+      if (!fetchJson) return emptyNotificationsFeed();
+      try {
+        const query = orgId ? `?org_id=${encodeURIComponent(orgId)}` : "";
+        return normalizeNotificationsFeed(await fetchJson(`me/notifications${query}`));
+      } catch {
+        return emptyNotificationsFeed();
+      }
+    },
+    markRead: (id) => act(id, "read"),
+    archive: (id) => act(id, "archive"),
+    resolve: (id) => act(id, "resolve")
+  };
+}
+function notificationsFeedToPayload(feed, orgId) {
+  return {
+    organizationId: orgId ?? "",
+    alerts: feed.notifications.map((n) => ({
+      id: n.id,
+      title: n.title,
+      description: n.body,
+      href: n.link,
+      kind: n.kind,
+      read: n.readAt !== null
+    })),
+    replies: [],
+    badge: feed.badge
+  };
+}
+
 // src/theme-preference.ts
 var THEME_STORAGE_KEY = "politogy_theme";
 var THEME_COOKIE = "politogy_theme";
@@ -558,17 +631,17 @@ function TopBarTooltip({
     "span",
     {
       role: "tooltip",
-      className: "pointer-events-none absolute left-1/2 top-full z-50 mt-2 hidden w-max max-w-56 -translate-x-1/2 flex-col rounded-lg border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex",
+      className: "pointer-events-none absolute left-1/2 top-full z-50 mt-2 hidden w-max max-w-56 -translate-x-1/2 flex-col rounded-lg border border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex group-focus-visible/tbtip:flex",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "aria-hidden": true,
-            className: "absolute -top-[5px] left-1/2 h-2.5 w-2.5 -translate-x-1/2 rotate-45 border-l border-t border-[color:var(--line)] bg-[color:var(--panel-elevated)]"
+            className: "absolute -top-[5px] left-1/2 h-2.5 w-2.5 -translate-x-1/2 rotate-45 border-l border-t border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)]"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: title }),
-        description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-[11px] leading-snug text-[color:var(--muted)]", children: description }) : null
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--app-btn-tooltip-fg,#FFFFFF)]", children: title }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-[11px] leading-snug text-[color:var(--app-btn-tooltip-fg,#FFFFFF)] opacity-75", children: description }) : null
       ]
     }
   );
@@ -652,6 +725,7 @@ function createChromeFetchCache(getFetchJson) {
 var NavChromeContext = react.createContext(null);
 function NavChromeProvider({
   fetchJson,
+  notificationsAdapter,
   children
 }) {
   const fetchJsonRef = react.useRef(fetchJson);
@@ -661,6 +735,13 @@ function NavChromeProvider({
     cacheRef.current = createChromeFetchCache(() => fetchJsonRef.current);
   }
   const { dedupedFetch, invalidate: invalidateChromeCache } = cacheRef.current;
+  const defaultAdapterRef = react.useRef(null);
+  if (!defaultAdapterRef.current) {
+    defaultAdapterRef.current = createCommsNotificationsAdapter(
+      (path, init) => fetchJsonRef.current(path, init)
+    );
+  }
+  const adapter = notificationsAdapter === void 0 ? defaultAdapterRef.current : notificationsAdapter;
   const [me, setMe] = react.useState(null);
   const [meLoaded, setMeLoaded] = react.useState(false);
   react.useEffect(() => {
@@ -675,7 +756,13 @@ function NavChromeProvider({
       cancelled = true;
     };
   }, [dedupedFetch]);
-  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson, dedupedFetch, invalidateChromeCache, me, meLoaded }, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavChromeContext.Provider,
+    {
+      value: { fetchJson, dedupedFetch, invalidateChromeCache, me, meLoaded, notificationsAdapter: adapter },
+      children
+    }
+  );
 }
 function useChromeMe() {
   const ctx = react.useContext(NavChromeContext);
@@ -756,6 +843,7 @@ function TopBarPopover({
   onOpen,
   openToken,
   onOpenChange,
+  hideTooltip = false,
   children,
   panelClassName
 }) {
@@ -812,7 +900,7 @@ function TopBarPopover({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
           typeof badge === "number" ? /* @__PURE__ */ jsxRuntime.jsx(TopBarCountBadge, { count: badge }) : null,
-          !open ? /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description }) : null
+          !open && !hideTooltip ? /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description }) : null
         ]
       }
     ),
@@ -950,7 +1038,11 @@ function subscribeLowFuelHintVisible(onChange) {
   return () => lowFuelHintListeners.delete(onChange);
 }
 function useLowFuelHintVisible() {
-  return react.useSyncExternalStore(subscribeLowFuelHintVisible, () => lowFuelHintVisible);
+  return react.useSyncExternalStore(
+    subscribeLowFuelHintVisible,
+    () => lowFuelHintVisible,
+    () => false
+  );
 }
 var LOW_FUEL_HINT_CLEARANCE_PX = 96;
 function LowFuelHint({ lowFuel, orgId }) {
@@ -1055,6 +1147,7 @@ function FuelAction({ orgId }) {
     };
   }, [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).
@@ -1067,6 +1160,7 @@ function FuelAction({ orgId }) {
           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: [
@@ -1256,7 +1350,7 @@ function NewReplyToast({
   );
 }
 function NotificationsAction({ orgId }) {
-  const { dedupedFetch } = useNavChrome("NotificationsAction");
+  const { dedupedFetch, notificationsAdapter } = useNavChrome("NotificationsAction");
   const [payload, setPayload] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(false);
@@ -1265,6 +1359,7 @@ function NotificationsAction({ orgId }) {
   const [toastsMuted, setToastsMuted] = react.useState(() => readToastsMuted());
   const [openToken, setOpenToken] = react.useState(0);
   const [panelOpen, setPanelOpen] = react.useState(false);
+  const [reloadToken, setReloadToken] = react.useState(0);
   const anyPanelOpen = useAnyTopBarPanelOpen();
   react.useEffect(() => {
     setNotif(readNotifState(orgId));
@@ -1276,6 +1371,19 @@ function NotificationsAction({ orgId }) {
       setLoading(false);
       return;
     }
+    if (notificationsAdapter) {
+      setError(false);
+      notificationsAdapter.list(orgId).then((feed) => {
+        if (!cancelled) setPayload(notificationsFeedToPayload(feed, orgId));
+      }).catch(() => {
+        if (!cancelled) setPayload(notificationsFeedToPayload(emptyNotificationsFeed(), orgId));
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
     setLoading(true);
     setError(false);
     setPayload(null);
@@ -1293,9 +1401,14 @@ function NotificationsAction({ orgId }) {
     return () => {
       cancelled = true;
     };
-  }, [dedupedFetch, orgId]);
+  }, [dedupedFetch, notificationsAdapter, orgId, reloadToken]);
   const markRead = react.useCallback(
     (id) => {
+      if (notificationsAdapter) {
+        void notificationsAdapter.markRead(id).then((ok) => {
+          if (ok) setReloadToken((t) => t + 1);
+        });
+      }
       setNotif((prev) => {
         if (prev.readAlertIds.includes(id)) return prev;
         const next = { ...prev, readAlertIds: [...prev.readAlertIds, id] };
@@ -1303,7 +1416,7 @@ function NotificationsAction({ orgId }) {
         return next;
       });
     },
-    [orgId]
+    [orgId, notificationsAdapter]
   );
   const markUnread = react.useCallback(
     (id) => {
@@ -1373,14 +1486,16 @@ function NotificationsAction({ orgId }) {
     }
     setOpenToken((t) => t + 1);
   }, [toastReply]);
-  const unreadAlertCount = alerts.filter((a) => !notif.readAlertIds.includes(a.id)).length;
+  const isAlertRead = (a) => a.read === true || notif.readAlertIds.includes(a.id);
+  const unreadAlertCount = alerts.filter((a) => !isAlertRead(a)).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 badgeCount = notificationsAdapter && payload?.badge !== void 0 ? payload.badge : unreadAlertCount + unseenReplyCount;
   const isEmpty = alerts.length === 0 && replies.length === 0 && imports.length === 0 && quarantined.length === 0;
+  const toastVisible = toastReply !== null && !panelOpen && !anyPanelOpen;
   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).
@@ -1396,6 +1511,7 @@ function NotificationsAction({ orgId }) {
           onOpen,
           openToken,
           onOpenChange: setPanelOpen,
+          hideTooltip: toastVisible,
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
@@ -1415,7 +1531,7 @@ function NotificationsAction({ orgId }) {
             ] }) : 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);
+                  const isRead = isAlertRead(a);
                   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",
@@ -1434,7 +1550,7 @@ function NotificationsAction({ orgId }) {
                       {
                         type: "button",
                         "aria-label": isRead ? "Mark as unread" : "Mark as read",
-                        onClick: () => isRead ? markUnread(a.id) : markRead(a.id),
+                        onClick: () => isRead && !notificationsAdapter ? 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, {})
                       }
@@ -1493,7 +1609,7 @@ function NotificationsAction({ orgId }) {
           ] })
         }
       ),
-      toastReply && !panelOpen && !anyPanelOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+      toastVisible && toastReply ? /* @__PURE__ */ jsxRuntime.jsx(
         NewReplyToast,
         {
           reply: toastReply,
@@ -5388,6 +5504,7 @@ function PolitogyAppChrome({
   storagePrefix,
   proxyBasePath = "/api/chrome",
   fetchJson: fetchJsonOverride,
+  notificationsAdapter,
   devNotes,
   org,
   tokenOrg,
@@ -5419,7 +5536,7 @@ function PolitogyAppChrome({
       children
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeProvider, { fetchJson, children: tokenOrg ? /* @__PURE__ */ jsxRuntime.jsx(TokenChromeStateProvider, { tokenOrg, children: devNotesTree }) : /* @__PURE__ */ jsxRuntime.jsx(ChromeStateProvider, { controlledOrg: org, children: devNotesTree }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeProvider, { fetchJson, notificationsAdapter, children: tokenOrg ? /* @__PURE__ */ jsxRuntime.jsx(TokenChromeStateProvider, { tokenOrg, children: devNotesTree }) : /* @__PURE__ */ jsxRuntime.jsx(ChromeStateProvider, { controlledOrg: org, children: devNotesTree }) });
 }
 function ChromeTopBarActions() {
   const state = useChromeState();