@checkstack/signal-frontend 0.0.15 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @checkstack/signal-frontend
 
+## 0.1.0
+
+### Minor 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.
+
+### Patch Changes
+
+- Updated dependencies [208ad71]
+  - @checkstack/signal-common@0.2.0
+
+## 0.0.16
+
+### Patch Changes
+
+- @checkstack/signal-common@0.1.10
+
 ## 0.0.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/signal-frontend",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "type": "module",
   "exports": {
     ".": {
@@ -11,7 +11,7 @@
     "react": "^18.0.0"
   },
   "dependencies": {
-    "@checkstack/signal-common": "0.1.8"
+    "@checkstack/signal-common": "0.1.10"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/SignalProvider.tsx

@@ -15,11 +15,27 @@ import type {
 // CONTEXT TYPES
 // =============================================================================
 
+/**
+ * Wildcard subscription callback. Fires for every incoming signal message
+ * regardless of signalId, with the pluginId already extracted from the wire envelope.
+ * Used by the auto-invalidation layer; not intended for component-level use.
+ */
+export type SignalAllCallback = (props: {
+  signalId: string;
+  pluginId: string;
+  payload: unknown;
+}) => void;
+
 interface SignalContextValue {
   /** Whether the WebSocket connection is established */
   isConnected: boolean;
-  /** Subscribe to a signal. Returns an unsubscribe function. */
+  /** Subscribe to a specific signal. Returns an unsubscribe function. */
   subscribe<T>(signal: Signal<T>, callback: (payload: T) => void): () => void;
+  /**
+   * Subscribe to ALL incoming signals. Returns an unsubscribe function.
+   * Used by the auto-invalidation layer to receive every message.
+   */
+  subscribeAll(callback: SignalAllCallback): () => void;
 }
 
 const SignalContext = createContext<SignalContextValue | undefined>(undefined);
@@ -58,6 +74,7 @@ export const SignalProvider: React.FC<SignalProviderProps> = ({
   const listenersRef = useRef<Map<string, Set<(payload: unknown) => void>>>(
     new Map()
   );
+  const allListenersRef = useRef<Set<SignalAllCallback>>(new Set());
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
     undefined
   );
@@ -115,6 +132,14 @@ export const SignalProvider: React.FC<SignalProviderProps> = ({
                 callback(message.payload);
               }
             }
+            // Notify wildcard listeners (auto-invalidator etc.)
+            for (const callback of allListenersRef.current) {
+              callback({
+                signalId: message.signalId,
+                pluginId: message.pluginId,
+                payload: message.payload,
+              });
+            }
           }
           // Ignore "connected" and "pong" messages
         } catch (error) {
@@ -154,9 +179,17 @@ export const SignalProvider: React.FC<SignalProviderProps> = ({
     []
   );
 
+  const subscribeAll = useCallback((callback: SignalAllCallback) => {
+    allListenersRef.current.add(callback);
+    return () => {
+      allListenersRef.current.delete(callback);
+    };
+  }, []);
+
   const value: SignalContextValue = {
     isConnected,
     subscribe,
+    subscribeAll,
   };
 
   return (

package/src/index.ts

@@ -1,5 +1,13 @@
 // Provider component
-export { SignalProvider, useSignalContext } from "./SignalProvider";
+export {
+  SignalProvider,
+  useSignalContext,
+  type SignalAllCallback,
+} from "./SignalProvider";
 
 // Hooks
-export { useSignal, useSignalConnection } from "./useSignal";
+export {
+  useSignal,
+  useSignalConnection,
+  useSubscribeAllSignals,
+} from "./useSignal";

package/src/useSignal.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { Signal } from "@checkstack/signal-common";
-import { useSignalContext } from "./SignalProvider";
+import { useSignalContext, type SignalAllCallback } from "./SignalProvider";
 
 /**
  * Subscribe to a signal and receive typed payloads.
@@ -65,3 +65,27 @@ export function useSignalConnection(): { isConnected: boolean } {
   const { isConnected } = useSignalContext();
   return { isConnected };
 }
+
+/**
+ * Subscribe to ALL incoming signals. Used by the auto-invalidation layer.
+ *
+ * The callback receives `signalId`, `pluginId`, and the raw payload for every
+ * signal message that arrives over the WebSocket. Subscriptions are automatically
+ * cleaned up on unmount; the latest callback is always used (no stale closures).
+ *
+ * Component code should prefer the typed `useSignal(signal, ...)` hook over this.
+ */
+export function useSubscribeAllSignals(callback: SignalAllCallback): void {
+  const { subscribeAll } = useSignalContext();
+
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  useEffect(() => {
+    const stableCallback: SignalAllCallback = (props) => {
+      callbackRef.current(props);
+    };
+
+    return subscribeAll(stableCallback);
+  }, [subscribeAll]);
+}