@open-mercato/ui 0.6.7-develop.6749.1.6b54c56dfe → 0.6.7-develop.6751.1.ac823a3d26

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 145 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 394 entry points
+[build:ui] found 395 entry points
 [build:ui] built successfully

package/agentic/standalone-guide.md

@@ -189,7 +189,7 @@ import {
 | `usePortalAppEvent(pattern, handler, deps?)` | Listen for portal SSE events by glob pattern (e.g., `'sales.order.*'`) |
 | `usePortalEventBridge()` | Establish singleton SSE connection — mount once in shell/layout |
 | `usePortalInjectedMenuItems(surfaceId)` | Load feature-gated menu items for portal nav surfaces: `{ items, isLoading }` |
-| `usePortalNotifications()` | Poll portal notifications: `{ notifications, unreadCount, hasNew, isLoading, refresh, markAsRead, dismiss, markAllRead }` |
+| `usePortalNotifications()` | Load portal notifications with SSE-first refresh and an 8-second fallback until the portal event bridge reports healthy: `{ notifications, unreadCount, hasNew, isLoading, refresh, markAsRead, dismiss, markAllRead }` |
 | `usePortalDashboardWidgets(spotId)` | Load UI injection widgets (with `Widget` component) for a portal spot: `{ widgets, isLoading, error }` |
 
 ### Portal Components

package/dist/portal/hooks/portalBridgeStatus.js

@@ -0,0 +1,25 @@
+const PORTAL_BRIDGE_STATUS_DOM_NAME = "om:portal-bridge:status";
+function readPortalBridgeHealth() {
+  if (typeof window === "undefined") return void 0;
+  return window.__portalBridgeHealthy;
+}
+function publishPortalBridgeHealth(healthy) {
+  if (typeof window === "undefined") return;
+  window.__portalBridgeHealthy = healthy;
+  window.dispatchEvent(
+    new CustomEvent(PORTAL_BRIDGE_STATUS_DOM_NAME, {
+      detail: { healthy }
+    })
+  );
+}
+function clearPortalBridgeHealth() {
+  if (typeof window === "undefined") return;
+  delete window.__portalBridgeHealthy;
+}
+export {
+  PORTAL_BRIDGE_STATUS_DOM_NAME,
+  clearPortalBridgeHealth,
+  publishPortalBridgeHealth,
+  readPortalBridgeHealth
+};
+//# sourceMappingURL=portalBridgeStatus.js.map

package/dist/portal/hooks/portalBridgeStatus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/portal/hooks/portalBridgeStatus.ts"],
+  "sourcesContent": ["export const PORTAL_BRIDGE_STATUS_DOM_NAME = 'om:portal-bridge:status'\n\nexport type PortalBridgeStatusDetail = {\n  healthy: boolean\n}\n\ntype PortalBridgeWindow = Window & {\n  __portalBridgeHealthy?: boolean\n}\n\nexport function readPortalBridgeHealth(): boolean | undefined {\n  if (typeof window === 'undefined') return undefined\n  return (window as PortalBridgeWindow).__portalBridgeHealthy\n}\n\nexport function publishPortalBridgeHealth(healthy: boolean): void {\n  if (typeof window === 'undefined') return\n  ;(window as PortalBridgeWindow).__portalBridgeHealthy = healthy\n  window.dispatchEvent(\n    new CustomEvent<PortalBridgeStatusDetail>(PORTAL_BRIDGE_STATUS_DOM_NAME, {\n      detail: { healthy },\n    }),\n  )\n}\n\nexport function clearPortalBridgeHealth(): void {\n  if (typeof window === 'undefined') return\n  delete (window as PortalBridgeWindow).__portalBridgeHealthy\n}\n"],
+  "mappings": "AAAO,MAAM,gCAAgC;AAUtC,SAAS,yBAA8C;AAC5D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAQ,OAA8B;AACxC;AAEO,SAAS,0BAA0B,SAAwB;AAChE,MAAI,OAAO,WAAW,YAAa;AAClC,EAAC,OAA8B,wBAAwB;AACxD,SAAO;AAAA,IACL,IAAI,YAAsC,+BAA+B;AAAA,MACvE,QAAQ,EAAE,QAAQ;AAAA,IACpB,CAAC;AAAA,EACH;AACF;AAEO,SAAS,0BAAgC;AAC9C,MAAI,OAAO,WAAW,YAAa;AACnC,SAAQ,OAA8B;AACxC;",
+  "names": []
+}

package/dist/portal/hooks/usePortalEventBridge.js

@@ -2,6 +2,7 @@
 import { useEffect, useRef } from "react";
 import { PORTAL_EVENT_DOM_NAME } from "./usePortalAppEvent.js";
 import { createLogger } from "@open-mercato/shared/lib/logger";
+import { publishPortalBridgeHealth } from "./portalBridgeStatus.js";
 const logger = createLogger("ui").child({ component: "PortalEventBridge" });
 const PORTAL_SSE_ENDPOINT = "/api/customer_accounts/portal/events/stream";
 const HEARTBEAT_TIMEOUT = 45e3;
@@ -36,6 +37,7 @@ function usePortalEventBridge() {
       if (heartbeatTimer.current) clearTimeout(heartbeatTimer.current);
       heartbeatTimer.current = setTimeout(() => {
         logger.warn("Heartbeat timeout \u2014 reconnecting");
+        publishPortalBridgeHealth(false);
         disconnect();
         scheduleReconnect();
       }, HEARTBEAT_TIMEOUT);
@@ -51,6 +53,7 @@ function usePortalEventBridge() {
           hasEverConnected.current = true;
           reconnectPending.current = false;
           reconnectAttempts.current = 0;
+          publishPortalBridgeHealth(true);
           resetHeartbeatTimer();
           if (shouldEmitReconnect) {
             window.dispatchEvent(
@@ -82,6 +85,7 @@ function usePortalEventBridge() {
           if (hasEverConnected.current) {
             reconnectPending.current = true;
           }
+          publishPortalBridgeHealth(false);
           disconnect();
           if (mounted) scheduleReconnect();
         };
@@ -89,6 +93,7 @@ function usePortalEventBridge() {
         if (hasEverConnected.current) {
           reconnectPending.current = true;
         }
+        publishPortalBridgeHealth(false);
         if (mounted) scheduleReconnect();
       }
     }
@@ -117,6 +122,7 @@ function usePortalEventBridge() {
     connect();
     return () => {
       mounted = false;
+      publishPortalBridgeHealth(false);
       disconnect();
       if (reconnectTimer.current) {
         clearTimeout(reconnectTimer.current);

package/dist/portal/hooks/usePortalEventBridge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/portal/hooks/usePortalEventBridge.ts"],
-  "sourcesContent": ["\"use client\"\nimport { useEffect, useRef } from 'react'\nimport type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'\nimport { PORTAL_EVENT_DOM_NAME } from './usePortalAppEvent'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'PortalEventBridge' })\n\nconst PORTAL_SSE_ENDPOINT = '/api/customer_accounts/portal/events/stream'\nconst HEARTBEAT_TIMEOUT = 45_000\nconst RECONNECT_BASE_MS = 1_000\nconst RECONNECT_MAX_MS = 30_000\nconst DEDUP_WINDOW_MS = 500\nconst PORTAL_BRIDGE_RECONNECTED_EVENT_ID = 'om:portal-bridge:reconnected'\n\n/**\n * React hook that establishes a singleton SSE connection to the portal event bridge.\n *\n * Mount once in the portal shell/layout. Receives server-side events with\n * `portalBroadcast: true` and dispatches them as `om:portal-event` CustomEvents\n * on the window object for consumption by `usePortalAppEvent`.\n *\n * Uses customer auth (cookie-based JWT) instead of staff auth.\n *\n * @example\n * ```tsx\n * import { usePortalEventBridge } from '@open-mercato/ui/portal/hooks/usePortalEventBridge'\n *\n * function PortalShell({ children }) {\n *   usePortalEventBridge()\n *   return <div>{children}</div>\n * }\n * ```\n */\nexport function usePortalEventBridge(): void {\n  const sourceRef = useRef<EventSource | null>(null)\n  const reconnectAttempts = useRef(0)\n  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const heartbeatTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const recentEvents = useRef<Map<string, number>>(new Map())\n  const hasEverConnected = useRef(false)\n  const reconnectPending = useRef(false)\n\n  useEffect(() => {\n    let mounted = true\n\n    function isDuplicate(eventPayload: AppEventPayload): boolean {\n      const key = `${eventPayload.id}:${JSON.stringify(eventPayload.payload ?? {})}`\n      const lastSeen = recentEvents.current.get(key)\n      if (lastSeen && Date.now() - lastSeen < DEDUP_WINDOW_MS) return true\n      recentEvents.current.set(key, Date.now())\n      if (recentEvents.current.size > 100) {\n        const now = Date.now()\n        for (const [k, v] of recentEvents.current) {\n          if (now - v > DEDUP_WINDOW_MS * 2) recentEvents.current.delete(k)\n        }\n      }\n      return false\n    }\n\n    function resetHeartbeatTimer() {\n      if (heartbeatTimer.current) clearTimeout(heartbeatTimer.current)\n      heartbeatTimer.current = setTimeout(() => {\n        logger.warn('Heartbeat timeout \u2014 reconnecting')\n        disconnect()\n        scheduleReconnect()\n      }, HEARTBEAT_TIMEOUT)\n    }\n\n    function connect() {\n      if (!mounted) return\n      if (sourceRef.current) return\n\n      try {\n        const source = new EventSource(PORTAL_SSE_ENDPOINT, { withCredentials: true })\n        sourceRef.current = source\n\n        source.onopen = () => {\n          const shouldEmitReconnect = hasEverConnected.current && reconnectPending.current\n          hasEverConnected.current = true\n          reconnectPending.current = false\n          reconnectAttempts.current = 0\n          resetHeartbeatTimer()\n          if (shouldEmitReconnect) {\n            window.dispatchEvent(\n              new CustomEvent(PORTAL_EVENT_DOM_NAME, {\n                detail: {\n                  id: PORTAL_BRIDGE_RECONNECTED_EVENT_ID,\n                  payload: {},\n                  timestamp: Date.now(),\n                  organizationId: '',\n                } satisfies AppEventPayload,\n              }),\n            )\n          }\n        }\n\n        source.onmessage = (event) => {\n          resetHeartbeatTimer()\n          if (!event.data || event.data === ':heartbeat') return\n\n          try {\n            const parsed = JSON.parse(event.data) as AppEventPayload\n            if (!parsed.id || typeof parsed.id !== 'string') return\n            if (isDuplicate(parsed)) return\n\n            window.dispatchEvent(\n              new CustomEvent(PORTAL_EVENT_DOM_NAME, { detail: parsed }),\n            )\n          } catch {\n            // Ignore malformed events\n          }\n        }\n\n        source.onerror = () => {\n          if (hasEverConnected.current) {\n            reconnectPending.current = true\n          }\n          disconnect()\n          if (mounted) scheduleReconnect()\n        }\n      } catch {\n        if (hasEverConnected.current) {\n          reconnectPending.current = true\n        }\n        if (mounted) scheduleReconnect()\n      }\n    }\n\n    function disconnect() {\n      if (sourceRef.current) {\n        sourceRef.current.close()\n        sourceRef.current = null\n      }\n      if (heartbeatTimer.current) {\n        clearTimeout(heartbeatTimer.current)\n        heartbeatTimer.current = null\n      }\n    }\n\n    function scheduleReconnect() {\n      if (reconnectTimer.current) return\n      const delay = Math.min(\n        RECONNECT_BASE_MS * Math.pow(2, reconnectAttempts.current),\n        RECONNECT_MAX_MS,\n      )\n      reconnectAttempts.current++\n      reconnectTimer.current = setTimeout(() => {\n        reconnectTimer.current = null\n        connect()\n      }, delay)\n    }\n\n    connect()\n\n    return () => {\n      mounted = false\n      disconnect()\n      if (reconnectTimer.current) {\n        clearTimeout(reconnectTimer.current)\n        reconnectTimer.current = null\n      }\n    }\n  }, [])\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport { useEffect, useRef } from 'react'\nimport type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'\nimport { PORTAL_EVENT_DOM_NAME } from './usePortalAppEvent'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\nimport { publishPortalBridgeHealth } from './portalBridgeStatus'\n\nconst logger = createLogger('ui').child({ component: 'PortalEventBridge' })\n\nconst PORTAL_SSE_ENDPOINT = '/api/customer_accounts/portal/events/stream'\nconst HEARTBEAT_TIMEOUT = 45_000\nconst RECONNECT_BASE_MS = 1_000\nconst RECONNECT_MAX_MS = 30_000\nconst DEDUP_WINDOW_MS = 500\nconst PORTAL_BRIDGE_RECONNECTED_EVENT_ID = 'om:portal-bridge:reconnected'\n\n/**\n * React hook that establishes a singleton SSE connection to the portal event bridge.\n *\n * Mount once in the portal shell/layout. Receives server-side events with\n * `portalBroadcast: true` and dispatches them as `om:portal-event` CustomEvents\n * on the window object for consumption by `usePortalAppEvent`.\n *\n * Uses customer auth (cookie-based JWT) instead of staff auth.\n *\n * @example\n * ```tsx\n * import { usePortalEventBridge } from '@open-mercato/ui/portal/hooks/usePortalEventBridge'\n *\n * function PortalShell({ children }) {\n *   usePortalEventBridge()\n *   return <div>{children}</div>\n * }\n * ```\n */\nexport function usePortalEventBridge(): void {\n  const sourceRef = useRef<EventSource | null>(null)\n  const reconnectAttempts = useRef(0)\n  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const heartbeatTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const recentEvents = useRef<Map<string, number>>(new Map())\n  const hasEverConnected = useRef(false)\n  const reconnectPending = useRef(false)\n\n  useEffect(() => {\n    let mounted = true\n\n    function isDuplicate(eventPayload: AppEventPayload): boolean {\n      const key = `${eventPayload.id}:${JSON.stringify(eventPayload.payload ?? {})}`\n      const lastSeen = recentEvents.current.get(key)\n      if (lastSeen && Date.now() - lastSeen < DEDUP_WINDOW_MS) return true\n      recentEvents.current.set(key, Date.now())\n      if (recentEvents.current.size > 100) {\n        const now = Date.now()\n        for (const [k, v] of recentEvents.current) {\n          if (now - v > DEDUP_WINDOW_MS * 2) recentEvents.current.delete(k)\n        }\n      }\n      return false\n    }\n\n    function resetHeartbeatTimer() {\n      if (heartbeatTimer.current) clearTimeout(heartbeatTimer.current)\n      heartbeatTimer.current = setTimeout(() => {\n        logger.warn('Heartbeat timeout \u2014 reconnecting')\n        publishPortalBridgeHealth(false)\n        disconnect()\n        scheduleReconnect()\n      }, HEARTBEAT_TIMEOUT)\n    }\n\n    function connect() {\n      if (!mounted) return\n      if (sourceRef.current) return\n\n      try {\n        const source = new EventSource(PORTAL_SSE_ENDPOINT, { withCredentials: true })\n        sourceRef.current = source\n\n        source.onopen = () => {\n          const shouldEmitReconnect = hasEverConnected.current && reconnectPending.current\n          hasEverConnected.current = true\n          reconnectPending.current = false\n          reconnectAttempts.current = 0\n          publishPortalBridgeHealth(true)\n          resetHeartbeatTimer()\n          if (shouldEmitReconnect) {\n            window.dispatchEvent(\n              new CustomEvent(PORTAL_EVENT_DOM_NAME, {\n                detail: {\n                  id: PORTAL_BRIDGE_RECONNECTED_EVENT_ID,\n                  payload: {},\n                  timestamp: Date.now(),\n                  organizationId: '',\n                } satisfies AppEventPayload,\n              }),\n            )\n          }\n        }\n\n        source.onmessage = (event) => {\n          resetHeartbeatTimer()\n          if (!event.data || event.data === ':heartbeat') return\n\n          try {\n            const parsed = JSON.parse(event.data) as AppEventPayload\n            if (!parsed.id || typeof parsed.id !== 'string') return\n            if (isDuplicate(parsed)) return\n\n            window.dispatchEvent(\n              new CustomEvent(PORTAL_EVENT_DOM_NAME, { detail: parsed }),\n            )\n          } catch {\n            // Ignore malformed events\n          }\n        }\n\n        source.onerror = () => {\n          if (hasEverConnected.current) {\n            reconnectPending.current = true\n          }\n          publishPortalBridgeHealth(false)\n          disconnect()\n          if (mounted) scheduleReconnect()\n        }\n      } catch {\n        if (hasEverConnected.current) {\n          reconnectPending.current = true\n        }\n        publishPortalBridgeHealth(false)\n        if (mounted) scheduleReconnect()\n      }\n    }\n\n    function disconnect() {\n      if (sourceRef.current) {\n        sourceRef.current.close()\n        sourceRef.current = null\n      }\n      if (heartbeatTimer.current) {\n        clearTimeout(heartbeatTimer.current)\n        heartbeatTimer.current = null\n      }\n    }\n\n    function scheduleReconnect() {\n      if (reconnectTimer.current) return\n      const delay = Math.min(\n        RECONNECT_BASE_MS * Math.pow(2, reconnectAttempts.current),\n        RECONNECT_MAX_MS,\n      )\n      reconnectAttempts.current++\n      reconnectTimer.current = setTimeout(() => {\n        reconnectTimer.current = null\n        connect()\n      }, delay)\n    }\n\n    connect()\n\n    return () => {\n      mounted = false\n      publishPortalBridgeHealth(false)\n      disconnect()\n      if (reconnectTimer.current) {\n        clearTimeout(reconnectTimer.current)\n        reconnectTimer.current = null\n      }\n    }\n  }, [])\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/portal/hooks/usePortalNotifications.js

@@ -1,6 +1,10 @@
 "use client";
 import * as React from "react";
 import { apiCall } from "../../backend/utils/apiCall.js";
+import {
+  PORTAL_BRIDGE_STATUS_DOM_NAME,
+  readPortalBridgeHealth
+} from "./portalBridgeStatus.js";
 const POLL_INTERVAL = 8e3;
 const BASE = "/api/customer_accounts/portal/notifications";
 async function fetchJson(url, init) {
@@ -37,21 +41,55 @@ function usePortalNotifications() {
     }
     setIsLoading(false);
   }, []);
+  const [usePolling, setUsePolling] = React.useState(() => {
+    if (typeof window === "undefined" || !("EventSource" in window)) {
+      return true;
+    }
+    return readPortalBridgeHealth() !== true;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !("EventSource" in window)) {
+      return;
+    }
+    const handleStatusChange = (event) => {
+      const detail = event.detail;
+      if (detail && typeof detail.healthy === "boolean") {
+        setUsePolling(!detail.healthy);
+        if (!detail.healthy) {
+          fetchAll();
+        }
+      }
+    };
+    window.addEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange);
+    return () => {
+      window.removeEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange);
+    };
+  }, [fetchAll]);
   React.useEffect(() => {
     fetchAll();
+  }, [fetchAll]);
+  React.useEffect(() => {
+    if (!usePolling) return;
     const interval = setInterval(fetchAll, POLL_INTERVAL);
     return () => clearInterval(interval);
-  }, [fetchAll]);
+  }, [fetchAll, usePolling]);
   React.useEffect(() => {
-    const handler = (e) => {
-      const detail = e.detail;
-      if (detail?.id === "notifications.notification.created" || detail?.id === "notifications.notification.batch_created") {
+    const handler = (event) => {
+      const detail = event.detail;
+      if (detail?.id === "notifications.notification.created" || detail?.id === "notifications.notification.batch_created" || detail?.id === "om:portal-bridge:reconnected") {
         fetchAll();
       }
     };
     window.addEventListener("om:portal-event", handler);
     return () => window.removeEventListener("om:portal-event", handler);
   }, [fetchAll]);
+  React.useEffect(() => {
+    const onFocus = () => {
+      fetchAll();
+    };
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [fetchAll]);
   const markAsRead = React.useCallback(async (id) => {
     await fetchJson(`${BASE}/${id}/read`, { method: "PUT" });
     setNotifications(

package/dist/portal/hooks/usePortalNotifications.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/portal/hooks/usePortalNotifications.ts"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\nimport { apiCall } from '../../backend/utils/apiCall'\n\nexport type UsePortalNotificationsResult = {\n  notifications: NotificationDto[]\n  unreadCount: number\n  hasNew: boolean\n  isLoading: boolean\n  refresh: () => void\n  markAsRead: (id: string) => Promise<void>\n  dismiss: (id: string) => Promise<void>\n  markAllRead: () => Promise<void>\n}\n\nconst POLL_INTERVAL = 8000\nconst BASE = '/api/customer_accounts/portal/notifications'\n\nasync function fetchJson<T>(url: string, init?: RequestInit): Promise<T | null> {\n  try {\n    const { ok, result } = await apiCall<T>(url, init)\n    if (!ok) return null\n    return result\n  } catch {\n    return null\n  }\n}\n\n/**\n * Portal notification hook \u2014 polls customer notification endpoints.\n *\n * Fetches notifications from `/api/customer_accounts/portal/notifications`\n * and unread count from `.../unread-count`. Polls every 8 seconds.\n *\n * Also listens for portal SSE events (`notifications.notification.created`)\n * to trigger immediate refresh.\n */\nexport function usePortalNotifications(): UsePortalNotificationsResult {\n  const [notifications, setNotifications] = React.useState<NotificationDto[]>([])\n  const [unreadCount, setUnreadCount] = React.useState(0)\n  const [hasNew, setHasNew] = React.useState(false)\n  const [isLoading, setIsLoading] = React.useState(true)\n  const lastIdRef = React.useRef<string | null>(null)\n\n  const fetchAll = React.useCallback(async () => {\n    const [listData, countData] = await Promise.all([\n      fetchJson<{ ok: boolean; items: NotificationDto[] }>(`${BASE}?pageSize=50`),\n      fetchJson<{ ok: boolean; unreadCount: number }>(`${BASE}/unread-count`),\n    ])\n\n    if (listData?.ok && listData.items) {\n      const items = listData.items\n      if (lastIdRef.current && items.length > 0 && items[0].id !== lastIdRef.current) {\n        setHasNew(true)\n        setTimeout(() => setHasNew(false), 3000)\n      }\n      if (items.length > 0) lastIdRef.current = items[0].id\n      setNotifications(items)\n    }\n\n    if (countData?.ok) {\n      setUnreadCount(countData.unreadCount)\n    }\n\n    setIsLoading(false)\n  }, [])\n\n  // Poll\n  React.useEffect(() => {\n    fetchAll()\n    const interval = setInterval(fetchAll, POLL_INTERVAL)\n    return () => clearInterval(interval)\n  }, [fetchAll])\n\n  // Listen for portal SSE notification events\n  React.useEffect(() => {\n    const handler = (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      if (detail?.id === 'notifications.notification.created' || detail?.id === 'notifications.notification.batch_created') {\n        fetchAll()\n      }\n    }\n    window.addEventListener('om:portal-event', handler)\n    return () => window.removeEventListener('om:portal-event', handler)\n  }, [fetchAll])\n\n  const markAsRead = React.useCallback(async (id: string) => {\n    await fetchJson(`${BASE}/${id}/read`, { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) => (n.id === id ? { ...n, status: 'read', readAt: new Date().toISOString() } : n)),\n    )\n    setUnreadCount((prev) => Math.max(0, prev - 1))\n  }, [])\n\n  const dismiss = React.useCallback(async (id: string) => {\n    await fetchJson(`${BASE}/${id}/dismiss`, { method: 'PUT' })\n    setNotifications((prev) => prev.filter((n) => n.id !== id))\n    setUnreadCount((prev) => {\n      const wasDismissedUnread = notifications.find((n) => n.id === id)?.status === 'unread'\n      return wasDismissedUnread ? Math.max(0, prev - 1) : prev\n    })\n  }, [notifications])\n\n  const markAllRead = React.useCallback(async () => {\n    await fetchJson(`${BASE}/mark-all-read`, { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) => (n.status === 'unread' ? { ...n, status: 'read', readAt: new Date().toISOString() } : n)),\n    )\n    setUnreadCount(0)\n  }, [])\n\n  const refresh = React.useCallback(() => { fetchAll() }, [fetchAll])\n\n  return { notifications, unreadCount, hasNew, isLoading, refresh, markAsRead, dismiss, markAllRead }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\nimport { apiCall } from '../../backend/utils/apiCall'\nimport {\n  PORTAL_BRIDGE_STATUS_DOM_NAME,\n  readPortalBridgeHealth,\n  type PortalBridgeStatusDetail,\n} from './portalBridgeStatus'\n\nexport type UsePortalNotificationsResult = {\n  notifications: NotificationDto[]\n  unreadCount: number\n  hasNew: boolean\n  isLoading: boolean\n  refresh: () => void\n  markAsRead: (id: string) => Promise<void>\n  dismiss: (id: string) => Promise<void>\n  markAllRead: () => Promise<void>\n}\n\nconst POLL_INTERVAL = 8000\nconst BASE = '/api/customer_accounts/portal/notifications'\n\nasync function fetchJson<T>(url: string, init?: RequestInit): Promise<T | null> {\n  try {\n    const { ok, result } = await apiCall<T>(url, init)\n    if (!ok) return null\n    return result\n  } catch {\n    return null\n  }\n}\n\n/**\n * Portal notification hook with SSE-first delivery and polling fallback.\n *\n * Performs an initial list/count reconciliation, refreshes on notification,\n * reconnect, and focus events, and polls every 8 seconds until the portal\n * event bridge explicitly reports a healthy connection.\n */\nexport function usePortalNotifications(): UsePortalNotificationsResult {\n  const [notifications, setNotifications] = React.useState<NotificationDto[]>([])\n  const [unreadCount, setUnreadCount] = React.useState(0)\n  const [hasNew, setHasNew] = React.useState(false)\n  const [isLoading, setIsLoading] = React.useState(true)\n  const lastIdRef = React.useRef<string | null>(null)\n\n  const fetchAll = React.useCallback(async () => {\n    const [listData, countData] = await Promise.all([\n      fetchJson<{ ok: boolean; items: NotificationDto[] }>(`${BASE}?pageSize=50`),\n      fetchJson<{ ok: boolean; unreadCount: number }>(`${BASE}/unread-count`),\n    ])\n\n    if (listData?.ok && listData.items) {\n      const items = listData.items\n      if (lastIdRef.current && items.length > 0 && items[0].id !== lastIdRef.current) {\n        setHasNew(true)\n        setTimeout(() => setHasNew(false), 3000)\n      }\n      if (items.length > 0) lastIdRef.current = items[0].id\n      setNotifications(items)\n    }\n\n    if (countData?.ok) {\n      setUnreadCount(countData.unreadCount)\n    }\n\n    setIsLoading(false)\n  }, [])\n\n  const [usePolling, setUsePolling] = React.useState(() => {\n    if (typeof window === 'undefined' || !('EventSource' in window)) {\n      return true\n    }\n    return readPortalBridgeHealth() !== true\n  })\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined' || !('EventSource' in window)) {\n      return\n    }\n    const handleStatusChange = (event: Event) => {\n      const detail = (event as CustomEvent<PortalBridgeStatusDetail>).detail\n      if (detail && typeof detail.healthy === 'boolean') {\n        setUsePolling(!detail.healthy)\n        if (!detail.healthy) {\n          fetchAll()\n        }\n      }\n    }\n    window.addEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange)\n    return () => {\n      window.removeEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange)\n    }\n  }, [fetchAll])\n\n  React.useEffect(() => {\n    fetchAll()\n  }, [fetchAll])\n\n  React.useEffect(() => {\n    if (!usePolling) return\n    const interval = setInterval(fetchAll, POLL_INTERVAL)\n    return () => clearInterval(interval)\n  }, [fetchAll, usePolling])\n\n  React.useEffect(() => {\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<{ id?: string }>).detail\n      if (\n        detail?.id === 'notifications.notification.created' ||\n        detail?.id === 'notifications.notification.batch_created' ||\n        detail?.id === 'om:portal-bridge:reconnected'\n      ) {\n        fetchAll()\n      }\n    }\n    window.addEventListener('om:portal-event', handler)\n    return () => window.removeEventListener('om:portal-event', handler)\n  }, [fetchAll])\n\n  React.useEffect(() => {\n    const onFocus = () => {\n      fetchAll()\n    }\n    window.addEventListener('focus', onFocus)\n    return () => window.removeEventListener('focus', onFocus)\n  }, [fetchAll])\n\n  const markAsRead = React.useCallback(async (id: string) => {\n    await fetchJson(`${BASE}/${id}/read`, { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) => (n.id === id ? { ...n, status: 'read', readAt: new Date().toISOString() } : n)),\n    )\n    setUnreadCount((prev) => Math.max(0, prev - 1))\n  }, [])\n\n  const dismiss = React.useCallback(async (id: string) => {\n    await fetchJson(`${BASE}/${id}/dismiss`, { method: 'PUT' })\n    setNotifications((prev) => prev.filter((n) => n.id !== id))\n    setUnreadCount((prev) => {\n      const wasDismissedUnread = notifications.find((n) => n.id === id)?.status === 'unread'\n      return wasDismissedUnread ? Math.max(0, prev - 1) : prev\n    })\n  }, [notifications])\n\n  const markAllRead = React.useCallback(async () => {\n    await fetchJson(`${BASE}/mark-all-read`, { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) => (n.status === 'unread' ? { ...n, status: 'read', readAt: new Date().toISOString() } : n)),\n    )\n    setUnreadCount(0)\n  }, [])\n\n  const refresh = React.useCallback(() => { fetchAll() }, [fetchAll])\n\n  return { notifications, unreadCount, hasNew, isLoading, refresh, markAsRead, dismiss, markAllRead }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.7-develop.6749.1.6b54c56dfe",
+  "version": "0.6.7-develop.6751.1.ac823a3d26",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.7-develop.6749.1.6b54c56dfe",
+    "@open-mercato/shared": "0.6.7-develop.6751.1.ac823a3d26",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.7-develop.6749.1.6b54c56dfe",
+    "@open-mercato/shared": "0.6.7-develop.6751.1.ac823a3d26",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/portal/hooks/__tests__/usePortalEventBridge.test.tsx

@@ -0,0 +1,66 @@
+/** @jest-environment jsdom */
+import { act, renderHook } from '@testing-library/react'
+import { usePortalEventBridge } from '../usePortalEventBridge'
+import {
+  clearPortalBridgeHealth,
+  PORTAL_BRIDGE_STATUS_DOM_NAME,
+  readPortalBridgeHealth,
+  type PortalBridgeStatusDetail,
+} from '../portalBridgeStatus'
+
+class EventSourceMock {
+  static instances: EventSourceMock[] = []
+
+  onopen: ((event: Event) => void) | null = null
+  onmessage: ((event: MessageEvent) => void) | null = null
+  onerror: ((event: Event) => void) | null = null
+  close = jest.fn()
+
+  constructor() {
+    EventSourceMock.instances.push(this)
+  }
+}
+
+describe('usePortalEventBridge health lifecycle', () => {
+  const originalEventSource = globalThis.window?.EventSource
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    EventSourceMock.instances = []
+    clearPortalBridgeHealth()
+    ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = EventSourceMock as unknown as typeof EventSource
+  })
+
+  afterEach(() => {
+    clearPortalBridgeHealth()
+    if (typeof originalEventSource === 'undefined') {
+      delete (window as unknown as { EventSource?: typeof EventSource }).EventSource
+    } else {
+      ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = originalEventSource
+    }
+  })
+
+  it('publishes healthy on open and unhealthy when the bridge unmounts', () => {
+    const statuses: boolean[] = []
+    const handleStatus = (event: Event) => {
+      statuses.push((event as CustomEvent<PortalBridgeStatusDetail>).detail.healthy)
+    }
+    window.addEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatus)
+
+    const { unmount } = renderHook(() => usePortalEventBridge())
+    const source = EventSourceMock.instances[0]
+    expect(source).toBeDefined()
+
+    act(() => {
+      source.onopen?.(new Event('open'))
+    })
+    expect(readPortalBridgeHealth()).toBe(true)
+
+    unmount()
+
+    expect(source.close).toHaveBeenCalledTimes(1)
+    expect(readPortalBridgeHealth()).toBe(false)
+    expect(statuses).toEqual([true, false])
+    window.removeEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatus)
+  })
+})

package/src/portal/hooks/__tests__/usePortalNotifications.test.tsx

@@ -0,0 +1,155 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { renderHook, act, waitFor } from '@testing-library/react'
+import { usePortalNotifications } from '../usePortalNotifications'
+import {
+  clearPortalBridgeHealth,
+  publishPortalBridgeHealth,
+} from '../portalBridgeStatus'
+
+const apiCallMock = jest.fn()
+
+jest.mock('../../../backend/utils/apiCall', () => ({
+  apiCall: (...args: unknown[]) => apiCallMock(...args),
+}))
+
+describe('usePortalNotifications strategy', () => {
+  const originalEventSource = globalThis.window?.EventSource
+  let setIntervalSpy: jest.SpyInstance
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    apiCallMock.mockResolvedValue({
+      ok: true,
+      result: { ok: true, items: [], unreadCount: 0 },
+    })
+    setIntervalSpy = jest.spyOn(global, 'setInterval')
+    clearPortalBridgeHealth()
+  })
+
+  afterEach(() => {
+    setIntervalSpy.mockRestore()
+    if (typeof originalEventSource === 'undefined') {
+      delete (window as unknown as { EventSource?: typeof EventSource }).EventSource
+    } else {
+      ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = originalEventSource
+    }
+  })
+
+  it('keeps polling until an available EventSource bridge reports healthy', async () => {
+    ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = function EventSourceMock() {
+      return {} as EventSource
+    } as unknown as typeof EventSource
+
+    const { result } = renderHook(() => usePortalNotifications())
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+
+    expect(apiCallMock).toHaveBeenCalled()
+    expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 8000)
+  })
+
+  it('uses SSE strategy without polling when the bridge is explicitly healthy', async () => {
+    ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = function EventSourceMock() {
+      return {} as EventSource
+    } as unknown as typeof EventSource
+    publishPortalBridgeHealth(true)
+
+    const { result } = renderHook(() => usePortalNotifications())
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+
+    expect(apiCallMock).toHaveBeenCalled()
+    expect(setIntervalSpy).not.toHaveBeenCalledWith(expect.any(Function), 8000)
+  })
+
+  it('falls back to polling strategy when EventSource is unavailable', async () => {
+    delete (window as unknown as { EventSource?: typeof EventSource }).EventSource
+
+    const { result } = renderHook(() => usePortalNotifications())
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+
+    expect(apiCallMock).toHaveBeenCalled()
+    expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 8000)
+  })
+
+  it('activates polling when SSE is explicitly marked unhealthy', async () => {
+    ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = function EventSourceMock() {
+      return {} as EventSource
+    } as unknown as typeof EventSource
+
+    publishPortalBridgeHealth(false)
+
+    const { result } = renderHook(() => usePortalNotifications())
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+
+    expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 8000)
+  })
+
+  it('switches to polling fallback dynamically when status becomes unhealthy', async () => {
+    ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = function EventSourceMock() {
+      return {} as EventSource
+    } as unknown as typeof EventSource
+    publishPortalBridgeHealth(true)
+
+    const { result } = renderHook(() => usePortalNotifications())
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    expect(apiCallMock).toHaveBeenCalledTimes(2)
+
+    expect(setIntervalSpy).not.toHaveBeenCalledWith(expect.any(Function), 8000)
+
+    act(() => {
+      publishPortalBridgeHealth(false)
+    })
+
+    expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 8000)
+    await waitFor(() => expect(apiCallMock).toHaveBeenCalledTimes(4))
+  })
+
+  it('performs one reconciliation for an unhealthy-to-reconnected sequence', async () => {
+    ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = function EventSourceMock() {
+      return {} as EventSource
+    } as unknown as typeof EventSource
+    publishPortalBridgeHealth(true)
+
+    const { result } = renderHook(() => usePortalNotifications())
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    expect(apiCallMock).toHaveBeenCalledTimes(2)
+
+    act(() => {
+      publishPortalBridgeHealth(false)
+    })
+    await waitFor(() => expect(apiCallMock).toHaveBeenCalledTimes(4))
+
+    act(() => {
+      publishPortalBridgeHealth(true)
+      window.dispatchEvent(
+        new CustomEvent('om:portal-event', {
+          detail: {
+            id: 'om:portal-bridge:reconnected',
+            payload: {},
+          },
+        })
+      )
+    })
+
+    await waitFor(() => expect(apiCallMock).toHaveBeenCalledTimes(6))
+  })
+
+  it('reconciles notifications when the portal window regains focus', async () => {
+    ;(window as unknown as { EventSource?: typeof EventSource }).EventSource = function EventSourceMock() {
+      return {} as EventSource
+    } as unknown as typeof EventSource
+
+    const { result } = renderHook(() => usePortalNotifications())
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    expect(apiCallMock).toHaveBeenCalledTimes(2)
+
+    await act(async () => {
+      window.dispatchEvent(new Event('focus'))
+      await new Promise<void>((resolve) => {
+        setTimeout(resolve, 0)
+      })
+    })
+
+    await waitFor(() => expect(apiCallMock).toHaveBeenCalledTimes(4))
+  })
+})

package/src/portal/hooks/portalBridgeStatus.ts

@@ -0,0 +1,29 @@
+export const PORTAL_BRIDGE_STATUS_DOM_NAME = 'om:portal-bridge:status'
+
+export type PortalBridgeStatusDetail = {
+  healthy: boolean
+}
+
+type PortalBridgeWindow = Window & {
+  __portalBridgeHealthy?: boolean
+}
+
+export function readPortalBridgeHealth(): boolean | undefined {
+  if (typeof window === 'undefined') return undefined
+  return (window as PortalBridgeWindow).__portalBridgeHealthy
+}
+
+export function publishPortalBridgeHealth(healthy: boolean): void {
+  if (typeof window === 'undefined') return
+  ;(window as PortalBridgeWindow).__portalBridgeHealthy = healthy
+  window.dispatchEvent(
+    new CustomEvent<PortalBridgeStatusDetail>(PORTAL_BRIDGE_STATUS_DOM_NAME, {
+      detail: { healthy },
+    }),
+  )
+}
+
+export function clearPortalBridgeHealth(): void {
+  if (typeof window === 'undefined') return
+  delete (window as PortalBridgeWindow).__portalBridgeHealthy
+}

package/src/portal/hooks/usePortalEventBridge.ts

@@ -3,6 +3,7 @@ import { useEffect, useRef } from 'react'
 import type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'
 import { PORTAL_EVENT_DOM_NAME } from './usePortalAppEvent'
 import { createLogger } from '@open-mercato/shared/lib/logger'
+import { publishPortalBridgeHealth } from './portalBridgeStatus'
 
 const logger = createLogger('ui').child({ component: 'PortalEventBridge' })
 
@@ -62,6 +63,7 @@ export function usePortalEventBridge(): void {
       if (heartbeatTimer.current) clearTimeout(heartbeatTimer.current)
       heartbeatTimer.current = setTimeout(() => {
         logger.warn('Heartbeat timeout — reconnecting')
+        publishPortalBridgeHealth(false)
         disconnect()
         scheduleReconnect()
       }, HEARTBEAT_TIMEOUT)
@@ -80,6 +82,7 @@ export function usePortalEventBridge(): void {
           hasEverConnected.current = true
           reconnectPending.current = false
           reconnectAttempts.current = 0
+          publishPortalBridgeHealth(true)
           resetHeartbeatTimer()
           if (shouldEmitReconnect) {
             window.dispatchEvent(
@@ -116,6 +119,7 @@ export function usePortalEventBridge(): void {
           if (hasEverConnected.current) {
             reconnectPending.current = true
           }
+          publishPortalBridgeHealth(false)
           disconnect()
           if (mounted) scheduleReconnect()
         }
@@ -123,6 +127,7 @@ export function usePortalEventBridge(): void {
         if (hasEverConnected.current) {
           reconnectPending.current = true
         }
+        publishPortalBridgeHealth(false)
         if (mounted) scheduleReconnect()
       }
     }
@@ -155,6 +160,7 @@ export function usePortalEventBridge(): void {
 
     return () => {
       mounted = false
+      publishPortalBridgeHealth(false)
       disconnect()
       if (reconnectTimer.current) {
         clearTimeout(reconnectTimer.current)

package/src/portal/hooks/usePortalNotifications.ts

@@ -2,6 +2,11 @@
 import * as React from 'react'
 import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
 import { apiCall } from '../../backend/utils/apiCall'
+import {
+  PORTAL_BRIDGE_STATUS_DOM_NAME,
+  readPortalBridgeHealth,
+  type PortalBridgeStatusDetail,
+} from './portalBridgeStatus'
 
 export type UsePortalNotificationsResult = {
   notifications: NotificationDto[]
@@ -28,13 +33,11 @@ async function fetchJson<T>(url: string, init?: RequestInit): Promise<T | null>
 }
 
 /**
- * Portal notification hook — polls customer notification endpoints.
+ * Portal notification hook with SSE-first delivery and polling fallback.
  *
- * Fetches notifications from `/api/customer_accounts/portal/notifications`
- * and unread count from `.../unread-count`. Polls every 8 seconds.
- *
- * Also listens for portal SSE events (`notifications.notification.created`)
- * to trigger immediate refresh.
+ * Performs an initial list/count reconciliation, refreshes on notification,
+ * reconnect, and focus events, and polls every 8 seconds until the portal
+ * event bridge explicitly reports a healthy connection.
  */
 export function usePortalNotifications(): UsePortalNotificationsResult {
   const [notifications, setNotifications] = React.useState<NotificationDto[]>([])
@@ -66,18 +69,50 @@ export function usePortalNotifications(): UsePortalNotificationsResult {
     setIsLoading(false)
   }, [])
 
-  // Poll
+  const [usePolling, setUsePolling] = React.useState(() => {
+    if (typeof window === 'undefined' || !('EventSource' in window)) {
+      return true
+    }
+    return readPortalBridgeHealth() !== true
+  })
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !('EventSource' in window)) {
+      return
+    }
+    const handleStatusChange = (event: Event) => {
+      const detail = (event as CustomEvent<PortalBridgeStatusDetail>).detail
+      if (detail && typeof detail.healthy === 'boolean') {
+        setUsePolling(!detail.healthy)
+        if (!detail.healthy) {
+          fetchAll()
+        }
+      }
+    }
+    window.addEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange)
+    return () => {
+      window.removeEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange)
+    }
+  }, [fetchAll])
+
   React.useEffect(() => {
     fetchAll()
+  }, [fetchAll])
+
+  React.useEffect(() => {
+    if (!usePolling) return
     const interval = setInterval(fetchAll, POLL_INTERVAL)
     return () => clearInterval(interval)
-  }, [fetchAll])
+  }, [fetchAll, usePolling])
 
-  // Listen for portal SSE notification events
   React.useEffect(() => {
-    const handler = (e: Event) => {
-      const detail = (e as CustomEvent).detail
-      if (detail?.id === 'notifications.notification.created' || detail?.id === 'notifications.notification.batch_created') {
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent<{ id?: string }>).detail
+      if (
+        detail?.id === 'notifications.notification.created' ||
+        detail?.id === 'notifications.notification.batch_created' ||
+        detail?.id === 'om:portal-bridge:reconnected'
+      ) {
         fetchAll()
       }
     }
@@ -85,6 +120,14 @@ export function usePortalNotifications(): UsePortalNotificationsResult {
     return () => window.removeEventListener('om:portal-event', handler)
   }, [fetchAll])
 
+  React.useEffect(() => {
+    const onFocus = () => {
+      fetchAll()
+    }
+    window.addEventListener('focus', onFocus)
+    return () => window.removeEventListener('focus', onFocus)
+  }, [fetchAll])
+
   const markAsRead = React.useCallback(async (id: string) => {
     await fetchJson(`${BASE}/${id}/read`, { method: 'PUT' })
     setNotifications((prev) =>