@the-portland-company/shell 0.56.0 → 0.58.0

package/CHANGELOG.md

@@ -1,3 +1,66 @@
+## 0.58.0 — 2026-09-30
+
+### Fixed — Meta build-metadata row renders for every viewer (`src/app-chrome/index.tsx`)
+
+`useChromeFooter` gated the `env | commit | version` / `date | author` rows
+behind Super Administrator. Reference/UI-Platform "Left bar — required
+elements" and Specs/Left-Navigation §10 list Meta unconditionally, so every
+non-admin viewer was missing a required rail element (DevNotes 83a64713).
+
+### Fixed — rail font pinned to the Brand token (`src/native/index.tsx`)
+
+`NavSidebar` now sets `font-family: var(--font-family, …)` directly instead
+of inheriting `body`, so an app-level font (Contacts) can no longer leak into
+the left rail (DevNotes 64a4961e).
+
+## 0.57.0 — 2026-09-30
+
+### Fixed — 10DLC alert no longer auto-redirects on every login (`src/native/chromeActions.tsx`)
+
+The once-per-session `10dlc_registration` alert redirect fired on every
+login because every login is a new browser session (a fresh
+`sessionStorage`), so the full-page `window.location.assign` re-booted the
+app on every single sign-in — visible to the user as a second loading-screen
+blink that always lands on
+`/organization-settings/subscription-billing/text-email`. The auto-redirect
+is removed entirely. The alert still surfaces in the notifications
+bell/panel (unread, like any other alert) — that panel is now the only
+user-visible surface for it.
+
+### Added — Spec overlay top-bar action, Spencer + Ben only (`./native`, `./app-chrome`)
+
+A new `SpecOverlayAction` top-bar control (wired into `ChromeTopBarActions`,
+between DevNotes and Support) shows the live spec/visual-regression status
+of the current page, sourced from the Specs app's overlay API
+(`https://specs.politogyvrm.com/api/overlay/access` and `/api/overlay/status`).
+It renders nothing — no icon, no network noise — for anyone the access
+check doesn't allow; the allow/deny answer is cached in `sessionStorage`
+for the session. When allowed, a "Spec" button shows a rounded
+mismatch-percentage badge (green when the compare passed, red when it
+didn't, a neutral "—" when the page has no compare target yet) and opens a
+480px right-hand drawer with the spec title, "Open spec" / "Compare tab"
+links, and an iframe of the live overlay. Status re-fetches (debounced
+300ms) on route change and org change. All calls are plain
+`fetch(..., { credentials: 'include' })` against the Specs origin — this
+does NOT go through the same-origin chrome proxy `fetchJson`.
+
+### Fixed — de-duped chrome fetches + lazy DevNotes boot fetch (`src/native/chromeActions.tsx`, `src/app-chrome/index.tsx`)
+
+`useChromeOrgs`, `me`, `FuelAction`'s `communications/fuel-status`, and
+`NotificationsAction`'s `notifications` were each fetched 2-4x per page load
+(consumers mounting independently), costing 1-3.5s per redundant call. Added
+a provider-scoped in-flight-promise + 30s-TTL cache
+(`dedupedFetch`/`invalidateChromeCache` on `useNavChrome`) keyed by
+`(path, orgId)`, so concurrent consumers share one request and org switches
+naturally miss the cache. Separately, DevNotes' boot-time reads (tasks,
+task types, task lists, collaborators, app-link status, capabilities — up to
+6.8s cold) are deferred until the DevNotes panel is first opened by wrapping
+the adapter passed into `@the-portland-company/devnotes`'s
+`DevNotesProvider`; the launcher button renders instantly and unblocks the
+gated calls via `onPointerDownCapture` before the click fires. The unread
+badge count still resolves on boot, via `requestIdleCallback` instead of
+blocking it.
+
 ## 0.56.0 — 2026-09-30
 
 ### Fixed — mode continuity for dual-mode apps (a2p)

package/dist/app-chrome.cjs

@@ -169,6 +169,7 @@ 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 = `https://contacts.politogyvrm.com/duplicates`;
+var SPECS_ORIGIN = "https://specs.politogyvrm.com";
 function withOrgParam(url, orgId) {
   if (!orgId) return url;
   return `${url}${url.includes("?") ? "&" : "?"}org=${orgId}`;
@@ -291,16 +292,46 @@ function NavThemeControl({
     )
   ] });
 }
+var CHROME_FETCH_CACHE_TTL_MS = 3e4;
+function chromeCacheKey(path, orgId) {
+  return orgId === void 0 ? path : `${path}::${orgId ?? ""}`;
+}
+function createChromeFetchCache(getFetchJson) {
+  const cache = /* @__PURE__ */ new Map();
+  function dedupedFetch(path, init, opts = {}) {
+    const key = chromeCacheKey(path, opts.orgId);
+    const now = Date.now();
+    const hit = cache.get(key);
+    if (hit && hit.expiresAt > now) return hit.promise;
+    const promise = getFetchJson()(path, init);
+    promise.catch(() => cache.delete(key));
+    cache.set(key, { promise, expiresAt: now + (opts.ttlMs ?? CHROME_FETCH_CACHE_TTL_MS) });
+    return promise;
+  }
+  function invalidate(path) {
+    for (const key of cache.keys()) {
+      if (key === path || key.startsWith(`${path}::`)) cache.delete(key);
+    }
+  }
+  return { dedupedFetch, invalidate };
+}
 var NavChromeContext = react.createContext(null);
 function NavChromeProvider({
   fetchJson,
   children
 }) {
+  const fetchJsonRef = react.useRef(fetchJson);
+  fetchJsonRef.current = fetchJson;
+  const cacheRef = react.useRef(null);
+  if (!cacheRef.current) {
+    cacheRef.current = createChromeFetchCache(() => fetchJsonRef.current);
+  }
+  const { dedupedFetch, invalidate: invalidateChromeCache } = cacheRef.current;
   const [me, setMe] = react.useState(null);
   const [meLoaded, setMeLoaded] = react.useState(false);
   react.useEffect(() => {
     let cancelled = false;
-    fetchJson("me").then((data) => {
+    dedupedFetch("me", void 0).then((data) => {
       if (!cancelled) setMe(data);
     }).catch(() => {
     }).finally(() => {
@@ -309,8 +340,8 @@ function NavChromeProvider({
     return () => {
       cancelled = true;
     };
-  }, [fetchJson]);
-  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson, me, meLoaded }, children });
+  }, [dedupedFetch]);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson, dedupedFetch, invalidateChromeCache, me, meLoaded }, children });
 }
 function useChromeMe() {
   const ctx = react.useContext(NavChromeContext);
@@ -329,7 +360,7 @@ function useNavChrome(component) {
   return ctx;
 }
 function useChromeOrgs() {
-  const { fetchJson } = useNavChrome("useChromeOrgs");
+  const { dedupedFetch } = useNavChrome("useChromeOrgs");
   const [orgs, setOrgs] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(false);
@@ -337,7 +368,7 @@ function useChromeOrgs() {
     let cancelled = false;
     setLoading(true);
     setError(false);
-    fetchJson("orgs").then((data) => {
+    dedupedFetch("orgs", void 0).then((data) => {
       if (cancelled) return;
       const list = data?.orgs ?? [];
       setOrgs(list);
@@ -349,7 +380,7 @@ function useChromeOrgs() {
     return () => {
       cancelled = true;
     };
-  }, [fetchJson]);
+  }, [dedupedFetch]);
   return { orgs, loading, error };
 }
 function ValueSkeleton({ className }) {
@@ -633,7 +664,7 @@ function LowFuelHint({ lowFuel, orgId }) {
   );
 }
 function FuelAction({ orgId }) {
-  const { fetchJson } = useNavChrome("FuelAction");
+  const { dedupedFetch } = useNavChrome("FuelAction");
   const [fuel, setFuel] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(false);
@@ -642,9 +673,11 @@ function FuelAction({ orgId }) {
     setLoading(true);
     setError(false);
     setFuel(null);
-    fetchJson("communications/fuel-status", {
-      headers: orgId ? { "x-contacts-org": orgId } : void 0
-    }).then((data) => {
+    dedupedFetch(
+      "communications/fuel-status",
+      { headers: orgId ? { "x-contacts-org": orgId } : void 0 },
+      { orgId }
+    ).then((data) => {
       if (cancelled) return;
       setFuel(data?.fuel ?? null);
     }).catch(() => {
@@ -655,7 +688,7 @@ function FuelAction({ orgId }) {
     return () => {
       cancelled = true;
     };
-  }, [fetchJson, orgId]);
+  }, [dedupedFetch, orgId]);
   const low = !!fuel && (fuel.signal.lowFuel || fuel.broadcast.lowFuel);
   return (
     // The nudge anchors to the trigger, so it sits OUTSIDE the popover panel in
@@ -726,7 +759,6 @@ function writeNotifState(orgId, state) {
   } catch {
   }
 }
-var TEN_DLC_REDIRECTED_KEY = "politogy_10dlc_redirected";
 var TOASTS_MUTED_KEY = "politogy_chrome_toasts_muted";
 function readToastsMuted() {
   if (typeof window === "undefined") return false;
@@ -857,7 +889,7 @@ function NewReplyToast({
   );
 }
 function NotificationsAction({ orgId }) {
-  const { fetchJson } = useNavChrome("NotificationsAction");
+  const { dedupedFetch } = useNavChrome("NotificationsAction");
   const [payload, setPayload] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(false);
@@ -876,9 +908,11 @@ function NotificationsAction({ orgId }) {
     setLoading(true);
     setError(false);
     setPayload(null);
-    fetchJson("notifications", {
-      headers: orgId ? { "x-contacts-org": orgId } : void 0
-    }).then((data) => {
+    dedupedFetch(
+      "notifications",
+      { headers: orgId ? { "x-contacts-org": orgId } : void 0 },
+      { orgId }
+    ).then((data) => {
       if (!cancelled) setPayload(data);
     }).catch(() => {
       if (!cancelled) setError(true);
@@ -888,29 +922,7 @@ function NotificationsAction({ orgId }) {
     return () => {
       cancelled = true;
     };
-  }, [fetchJson, orgId]);
-  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]);
+  }, [dedupedFetch, orgId]);
   const markRead = react.useCallback(
     (id) => {
       setNotif((prev) => {
@@ -1311,6 +1323,216 @@ function SupportAction({ orgId } = {}) {
     ) : null
   ] });
 }
+var SPEC_OVERLAY_ACCESS_CACHE_KEY = "politogy_spec_overlay_access";
+function readSpecOverlayAccessCache() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(SPEC_OVERLAY_ACCESS_CACHE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed?.allowed === "boolean") return parsed;
+  } catch {
+  }
+  return null;
+}
+function writeSpecOverlayAccessCache(access) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(SPEC_OVERLAY_ACCESS_CACHE_KEY, JSON.stringify(access));
+  } catch {
+  }
+}
+var locationChangeListeners = /* @__PURE__ */ new Set();
+var historyPatched = false;
+function ensureHistoryPatched() {
+  if (historyPatched || typeof window === "undefined") return;
+  historyPatched = true;
+  const notify = () => locationChangeListeners.forEach((fn) => fn());
+  const originalPushState = window.history.pushState.bind(window.history);
+  const originalReplaceState = window.history.replaceState.bind(window.history);
+  window.history.pushState = (...args) => {
+    originalPushState(...args);
+    notify();
+  };
+  window.history.replaceState = (...args) => {
+    originalReplaceState(...args);
+    notify();
+  };
+  window.addEventListener("popstate", notify);
+}
+function useLocationHref() {
+  const [href, setHref] = react.useState(
+    () => typeof window === "undefined" ? "" : window.location.href
+  );
+  react.useEffect(() => {
+    ensureHistoryPatched();
+    const onChange = () => setHref(window.location.href);
+    locationChangeListeners.add(onChange);
+    return () => {
+      locationChangeListeners.delete(onChange);
+    };
+  }, []);
+  return href;
+}
+function specOverlayFetchJson(path) {
+  return fetch(`${SPECS_ORIGIN}${path}`, { credentials: "include" }).then((res) => {
+    if (!res.ok) throw new Error(`spec overlay ${path}: ${res.status}`);
+    return res.json();
+  });
+}
+function SpecOverlayAction({ orgId } = {}) {
+  const [access, setAccess] = react.useState(() => readSpecOverlayAccessCache());
+  const [status, setStatus] = react.useState(null);
+  const [open, setOpen] = react.useState(false);
+  const href = useLocationHref();
+  react.useEffect(() => {
+    if (access) return;
+    let cancelled = false;
+    specOverlayFetchJson("/api/overlay/access").then((data) => {
+      if (cancelled) return;
+      const next = data && typeof data.allowed === "boolean" ? data : { allowed: false };
+      setAccess(next);
+      writeSpecOverlayAccessCache(next);
+    }).catch(() => {
+      if (cancelled) return;
+      const next = { allowed: false };
+      setAccess(next);
+      writeSpecOverlayAccessCache(next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [access]);
+  react.useEffect(() => {
+    if (!access?.allowed || typeof window === "undefined") return;
+    const timer = window.setTimeout(() => {
+      const url = `/api/overlay/status?url=${encodeURIComponent(window.location.href)}`;
+      specOverlayFetchJson(url).then((data) => setStatus(data)).catch(() => setStatus(null));
+    }, 300);
+    return () => window.clearTimeout(timer);
+  }, [access?.allowed, href, orgId]);
+  if (!access?.allowed) return null;
+  const badgeLabel = status && status.matched ? `${Math.round(status.mismatch_pct)}%` : status ? "\u2014" : void 0;
+  const badgeTone = status && status.matched ? status.passed ? "default" : "danger" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Spec",
+        "aria-expanded": open,
+        className: topBarIconButtonClass(badgeTone),
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LayoutGlyph, { size: 20, className: "text-current" }),
+          badgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: [
+                "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-normal leading-none text-white",
+                status && status.matched ? status.passed ? "bg-[color:var(--chrome-success,#2f855a)]" : "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--muted)]"
+              ].join(" "),
+              children: badgeLabel
+            }
+          ) : null,
+          !open ? /* @__PURE__ */ jsxRuntime.jsx(
+            TopBarTooltip,
+            {
+              title: "Spec",
+              description: "Spec design + visual regression for this page."
+            }
+          ) : null
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex justify-end bg-black/40",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Spec overlay",
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) setOpen(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setOpen(false);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full max-w-[480px] flex-col border-l border-[color:var(--line)] bg-[color:var(--panel-elevated)] shadow-[var(--shadow-soft)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[color:var(--line)] px-4 py-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "truncate text-sm font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: [
+                "Spec",
+                status && status.matched ? `: ${status.spec_title}` : ""
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close",
+                  onClick: () => setOpen(false),
+                  className: "rounded-full p-1 text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { size: 16 })
+                }
+              )
+            ] }),
+            status && status.matched ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-b border-[color:var(--line)] px-4 py-2 text-xs font-semibold", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: status.spec_url,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "text-[color:var(--color-accent)] hover:underline",
+                    children: "Open spec \u2197"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: status.compare_url,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "text-[color:var(--color-accent)] hover:underline",
+                    children: "Compare tab \u2197"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "iframe",
+                {
+                  src: status.overlay_url,
+                  title: "Spec overlay",
+                  className: "h-full w-full flex-1 border-0"
+                }
+              )
+            ] }) : status && !status.matched ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-sm text-[color:var(--muted)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No compare target covers this page." }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: status.search_url,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: "mt-2 inline-block font-semibold text-[color:var(--color-accent)] hover:underline",
+                  children: "Search specs \u2197"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-full" }) })
+          ] })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+function CloseGlyph({ size = 16, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, 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" })
+  ] });
+}
 var NAV_DISPLAY_OPTIONS = [
   { value: "menu", label: "Sub Menu" },
   { value: "tabs", label: "Tabs Only" },
@@ -1872,6 +2094,7 @@ function NavSidebar({
           "fixed inset-y-0 left-0 w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--sidebar-bg,var(--nav-surface))] lg:flex",
           open ? "flex z-50" : "hidden z-30"
         ),
+        style: { fontFamily: 'var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif)' },
         onKeyDown: trapTab,
         onClick: (e) => {
           if (open && e.target.closest("a[href]")) onClose?.();
@@ -4210,18 +4433,71 @@ function AppDevNotes({
     }),
     [storagePrefix, identity.role]
   );
-  if (devNotes?.providedByApp) return /* @__PURE__ */ jsxRuntime.jsx(DevNotesSurface, { children });
-  return /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesProvider, { adapter, user, config, children: /* @__PURE__ */ jsxRuntime.jsx(DevNotesSurface, { children }) });
+  const activatedRef = react.useRef(false);
+  const activationWaitersRef = react.useRef([]);
+  const activate = react.useCallback(() => {
+    if (activatedRef.current) return;
+    activatedRef.current = true;
+    const waiters = activationWaitersRef.current;
+    activationWaitersRef.current = [];
+    waiters.forEach((resolve) => resolve());
+  }, []);
+  const waitForActivation = react.useCallback(() => {
+    if (activatedRef.current) return Promise.resolve();
+    return new Promise((resolve) => {
+      activationWaitersRef.current.push(resolve);
+    });
+  }, []);
+  const lazyAdapter = react.useMemo(() => {
+    const GATED_METHODS = [
+      "fetchTasks",
+      "fetchTaskTypes",
+      "fetchTaskLists",
+      "fetchCollaborators",
+      "fetchCapabilities",
+      "getAppLinkStatus",
+      "fetchBugReports",
+      "fetchBugReportTypes"
+    ];
+    const wrapped = { ...adapter };
+    for (const method of GATED_METHODS) {
+      const original = adapter[method].bind(adapter);
+      wrapped[method] = (...args) => waitForActivation().then(() => original(...args));
+    }
+    let idleScheduled = false;
+    const originalUnreadCounts = adapter.fetchUnreadCounts.bind(adapter);
+    wrapped.fetchUnreadCounts = () => {
+      if (idleScheduled || typeof window === "undefined") return originalUnreadCounts();
+      idleScheduled = true;
+      return new Promise((resolve, reject) => {
+        const run = () => originalUnreadCounts().then(resolve, reject);
+        const ric = window.requestIdleCallback;
+        if (ric) ric(run);
+        else setTimeout(run, 0);
+      });
+    };
+    return wrapped;
+  }, [adapter, waitForActivation]);
+  if (devNotes?.providedByApp) return /* @__PURE__ */ jsxRuntime.jsx(DevNotesSurface, { activate, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesProvider, { adapter: lazyAdapter, user, config, children: /* @__PURE__ */ jsxRuntime.jsx(DevNotesSurface, { activate, children }) });
 }
 var DevNotesTasksContext = react.createContext({
   ready: false,
   openTasks: () => {
+  },
+  activate: () => {
   }
 });
-function DevNotesSurface({ children }) {
+function DevNotesSurface({
+  activate,
+  children
+}) {
   const [tasksOpen, setTasksOpen] = react.useState(false);
-  const openTasks = react.useCallback(() => setTasksOpen(true), []);
-  const tasksCtx = react.useMemo(() => ({ ready: true, openTasks }), [openTasks]);
+  const openTasks = react.useCallback(() => {
+    activate();
+    setTasksOpen(true);
+  }, [activate]);
+  const tasksCtx = react.useMemo(() => ({ ready: true, openTasks, activate }), [openTasks, activate]);
   return /* @__PURE__ */ jsxRuntime.jsxs(DevNotesTasksContext.Provider, { value: tasksCtx, children: [
     children,
     tasksOpen ? /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesTaskListModal, { open: true, onClose: () => setTasksOpen(false) }) : null,
@@ -4277,14 +4553,15 @@ function ChromeTopBarActions() {
         children: /* @__PURE__ */ jsxRuntime.jsx(ChromeDevNotesMenu, {})
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsx(SpecOverlayAction, { orgId: state.orgId }),
     /* @__PURE__ */ jsxRuntime.jsx(SupportAction, { orgId: state.orgId }),
     /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: state.orgId })
   ] });
 }
 function ChromeDevNotesMenu() {
-  const { ready, openTasks } = react.useContext(DevNotesTasksContext);
+  const { ready, openTasks, activate } = react.useContext(DevNotesTasksContext);
   if (!ready) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesMenu, { position: "top-right", onViewTasks: openTasks });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "contents" }, onPointerDownCapture: activate, onFocusCapture: activate, onKeyDownCapture: activate, children: /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesMenu, { position: "top-right", onViewTasks: openTasks }) });
 }
 function useIsSuperAdmin() {
   const state = useChromeState();
@@ -4300,10 +4577,9 @@ var FOOTER_LINKS = [
   }
 ];
 function useChromeFooter(meta) {
-  const isSuperAdmin = useIsSuperAdmin();
   return react.useMemo(
-    () => isSuperAdmin ? { links: FOOTER_LINKS, ...meta } : { links: FOOTER_LINKS },
-    [isSuperAdmin, meta.envLabel, meta.version, meta.commit, meta.commitDate, meta.commitAuthor]
+    () => ({ links: FOOTER_LINKS, ...meta }),
+    [meta.envLabel, meta.version, meta.commit, meta.commitDate, meta.commitAuthor]
   );
 }
 function useChromeIdentity(fallback) {