@checkstack/notification-frontend 0.2.34 → 0.2.36

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @checkstack/notification-frontend
 
+## 0.2.36
+
+### Patch Changes
+
+- 208ad71: Centralize realtime cache invalidation: signals now carry their owning `pluginId` end-to-end, and a single `SignalAutoInvalidator` mounted near the React Query client invalidates `[[pluginId]]` for every incoming signal automatically.
+
+  **Breaking change to `createSignal`** (`@checkstack/signal-common`): the factory now takes a single object argument with `pluginMetadata`, `event`, and `payloadSchema`. The signal id is constructed as `${pluginMetadata.pluginId}.${event}` and the resulting `Signal` carries a `pluginId` field. The `SignalMessage` wire envelope and `ServerToClientMessage` `signal` variant gained a `pluginId` field so the frontend can route invalidations without parsing the id.
+
+  ```ts
+  // Before
+  export const ANOMALY_STATE_CHANGED = createSignal(
+    "anomaly.state_changed",
+    z.object({ ... }),
+  );
+
+  // After
+  export const ANOMALY_STATE_CHANGED = createSignal({
+    pluginMetadata,
+    event: "state_changed",
+    payloadSchema: z.object({ ... }),
+  });
+  ```
+
+  **New plugin field**: `FrontendPlugin.foreignSignals?: Signal<unknown>[]` lets a plugin opt its `[[pluginId]]` cache into invalidation when another plugin's signal fires (e.g. `dependency-frontend` declares `[SYSTEM_STATUS_CHANGED]` because dependency payloads embed system status). Same-plugin signals must NOT be listed — they are always auto-invalidated.
+
+  **Removed boilerplate**: per-component `useSignal(X, () => refetch())` and `useSignal(X, () => queryClient.invalidateQueries(...))` calls have been removed across `incident-frontend`, `maintenance-frontend`, `healthcheck-frontend`, `slo-frontend`, `dependency-frontend`, `satellite-frontend`, `announcement-frontend`, `notification-frontend`, and `dashboard-frontend`. The `NotificationBell` unread count is now derived directly from the `getUnreadCount` query (auto-invalidated) instead of a local state mirror.
+
+  **User-visible bug fix**: the system detail page anomaly widget (`SystemAnomalyWidget`) now updates in real-time when anomalies change, with no per-widget signal subscription required. The dashboard status page also stays fresh on `ANOMALY_STATE_CHANGED`, `ANOMALY_BASELINE_UPDATED`, and `ANOMALY_TREND_DETECTED`.
+
+  UI-state consumers that legitimately need a `useSignal` (the dashboard activity terminal, the queue lag alert, and the rolling-preset date refresh in `useHealthCheckData`) keep their handlers; the auto-invalidator runs alongside them.
+
+- Updated dependencies [208ad71]
+  - @checkstack/signal-frontend@0.1.0
+  - @checkstack/frontend-api@0.4.0
+  - @checkstack/notification-common@0.3.0
+  - @checkstack/auth-frontend@0.5.31
+  - @checkstack/ui@1.6.1
+
+## 0.2.35
+
+### Patch Changes
+
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+  - @checkstack/common@0.7.0
+  - @checkstack/ui@1.6.0
+  - @checkstack/auth-frontend@0.5.30
+  - @checkstack/frontend-api@0.3.11
+  - @checkstack/notification-common@0.2.9
+  - @checkstack/signal-frontend@0.0.16
+
 ## 0.2.34
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/notification-frontend",
-  "version": "0.2.34",
+  "version": "0.2.36",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,12 +12,12 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/notification-common": "0.2.8",
-    "@checkstack/frontend-api": "0.3.9",
-    "@checkstack/auth-frontend": "0.5.28",
-    "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/common": "0.6.5",
-    "@checkstack/ui": "1.5.0",
+    "@checkstack/notification-common": "0.2.9",
+    "@checkstack/frontend-api": "0.3.11",
+    "@checkstack/auth-frontend": "0.5.30",
+    "@checkstack/signal-frontend": "0.0.16",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/ui": "1.6.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "lucide-react": "^0.344.0"

package/src/components/NotificationBell.tsx

@@ -13,14 +13,9 @@ import {
   useToast,
 } from "@checkstack/ui";
 import { useApi, usePluginClient } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
-import type { Notification } from "@checkstack/notification-common";
 import {
   NotificationApi,
-  NOTIFICATION_RECEIVED,
-  NOTIFICATION_COUNT_CHANGED,
-  NOTIFICATION_READ,
   notificationRoutes,
 } from "@checkstack/notification-common";
 import { authApiRef } from "@checkstack/auth-frontend/api";
@@ -33,22 +28,14 @@ export const NotificationBell = () => {
 
   const [isOpen, setIsOpen] = useState(false);
 
-  // State for real-time updates
-  const [signalUnreadCount, setSignalUnreadCount] = useState<
-    number | undefined
-  >();
-  const [signalNotifications, setSignalNotifications] = useState<
-    Notification[] | undefined
-  >();
-
-  // Fetch unread count via useQuery
+  // Realtime updates arrive via SignalAutoInvalidator on `[["notification"]]`,
+  // so both queries stay fresh without per-component signal handlers.
   const { data: unreadData, isLoading: unreadLoading } =
     notificationClient.getUnreadCount.useQuery(undefined, {
       enabled: !!session,
       staleTime: 30_000,
     });
 
-  // Fetch recent notifications via useQuery
   const { data: notificationsData, isLoading: notificationsLoading } =
     notificationClient.getNotifications.useQuery(
       { limit: 5, offset: 0, unreadOnly: true },
@@ -58,80 +45,14 @@ export const NotificationBell = () => {
       },
     );
 
-  // Mark all as read mutation
   const markAsReadMutation = notificationClient.markAsRead.useMutation();
 
-  // Use signal data if available, otherwise use query data
-  const unreadCount = signalUnreadCount ?? unreadData?.count ?? 0;
-  const recentNotifications =
-    signalNotifications ?? notificationsData?.notifications ?? [];
-
-  // ==========================================================================
-  // REALTIME SIGNAL SUBSCRIPTIONS (replaces polling)
-  // ==========================================================================
-
-  // Handle new notification received
-  useSignal(
-    NOTIFICATION_RECEIVED,
-    useCallback((payload) => {
-      // Increment unread count
-      setSignalUnreadCount((prev) => (prev ?? 0) + 1);
-
-      // Add to recent notifications if dropdown is open
-      setSignalNotifications((prev) => [
-        {
-          id: payload.id,
-          title: payload.title,
-          body: payload.body,
-          importance: payload.importance,
-          userId: "", // Not needed for display
-          isRead: false,
-          createdAt: new Date(),
-        },
-        ...(prev ?? []).slice(0, 4), // Keep only 5 items
-      ]);
-    }, []),
-  );
-
-  // Handle count changes from other sources
-  useSignal(
-    NOTIFICATION_COUNT_CHANGED,
-    useCallback((payload) => {
-      setSignalUnreadCount(payload.unreadCount);
-    }, []),
-  );
-
-  // Handle notification marked as read
-  useSignal(
-    NOTIFICATION_READ,
-    useCallback(
-      (payload) => {
-        if (payload.notificationId) {
-          // Single notification marked as read - remove from list
-          setSignalNotifications((prev) =>
-            (prev ?? []).filter((n) => n.id !== payload.notificationId),
-          );
-          // Use unreadData?.count as fallback when signalUnreadCount hasn't been set yet
-          setSignalUnreadCount((prev) =>
-            Math.max(0, (prev ?? unreadData?.count ?? 1) - 1),
-          );
-        } else {
-          // All marked as read - clear the list
-          setSignalNotifications([]);
-          setSignalUnreadCount(0);
-        }
-      },
-      [unreadData?.count],
-    ),
-  );
-
-  // ==========================================================================
+  const unreadCount = unreadData?.count ?? 0;
+  const recentNotifications = notificationsData?.notifications ?? [];
 
   const handleMarkAllAsRead = async () => {
     try {
       await markAsReadMutation.mutateAsync({});
-      setSignalUnreadCount(0);
-      setSignalNotifications([]);
     } catch {
       toast.error("Failed to mark all as read");
     }