@checkstack/dependency-frontend 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @checkstack/dependency-frontend
 
+## 0.3.3
+
+### 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/dependency-common@0.3.0
+  - @checkstack/healthcheck-common@0.13.0
+  - @checkstack/dashboard-frontend@0.5.1
+  - @checkstack/catalog-common@1.5.3
+  - @checkstack/ui@1.6.1
+
 ## 0.3.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dependency-frontend",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,14 +12,14 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "1.5.1",
-    "@checkstack/common": "0.6.5",
-    "@checkstack/dashboard-frontend": "0.4.6",
-    "@checkstack/dependency-common": "0.2.2",
-    "@checkstack/frontend-api": "0.3.10",
-    "@checkstack/healthcheck-common": "0.11.0",
-    "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.1",
+    "@checkstack/catalog-common": "1.5.2",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/dashboard-frontend": "0.5.0",
+    "@checkstack/dependency-common": "0.2.3",
+    "@checkstack/frontend-api": "0.3.11",
+    "@checkstack/healthcheck-common": "0.12.0",
+    "@checkstack/signal-frontend": "0.0.16",
+    "@checkstack/ui": "1.6.0",
     "@xyflow/react": "^12.10.2",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",

package/src/components/DependencyAlert.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { SystemDetailsTopSlot } from "@checkstack/catalog-common";
 import {
   DependencyApi,
-  DEPENDENCY_CHANGED,
-  DEPENDENCY_WARNINGS_CHANGED,
   type DerivedState,
   type AffectedUpstream,
 } from "@checkstack/dependency-common";
@@ -79,23 +76,11 @@ function getImpactBadge(impactType: string): React.ReactNode {
 export const DependencyAlert: React.FC<Props> = ({ system }) => {
   const depClient = usePluginClient(DependencyApi);
 
-  const { data, refetch } = depClient.getWarningsForSystem.useQuery(
+  const { data } = depClient.getWarningsForSystem.useQuery(
     { systemId: system?.id ?? "" },
     { enabled: !!system?.id },
   );
 
-  // Listen for dependency graph changes
-  useSignal(DEPENDENCY_CHANGED, () => {
-    void refetch();
-  });
-
-  // Listen for warning re-evaluations
-  useSignal(DEPENDENCY_WARNINGS_CHANGED, ({ affectedSystemIds }) => {
-    if (system?.id && affectedSystemIds.includes(system.id)) {
-      void refetch();
-    }
-  });
-
   if (!data || data.affectedUpstreams.length === 0) return;
 
   const style = getAlertStyle(data.derivedState);

package/src/components/DependencyBadge.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
 import {
   DependencyApi,
-  DEPENDENCY_CHANGED,
-  DEPENDENCY_WARNINGS_CHANGED,
   type DerivedState,
 } from "@checkstack/dependency-common";
 import { Badge } from "@checkstack/ui";
@@ -46,28 +43,18 @@ function getBadgeLabel(state: DerivedState): string {
  * Displays a dependency warning badge for a system on the dashboard.
  * Shows nothing if no upstream systems are affected.
  *
- * Listens for realtime updates via signals.
+ * Realtime updates arrive via SignalAutoInvalidator on `[["dependency"]]`,
+ * including foreign-signal invalidation on SYSTEM_STATUS_CHANGED (declared in
+ * the dependency plugin's `foreignSignals`).
  */
 export const DependencyBadge: React.FC<Props> = ({ system }) => {
   const depClient = usePluginClient(DependencyApi);
 
-  const { data, refetch } = depClient.getWarningsForSystem.useQuery(
+  const { data } = depClient.getWarningsForSystem.useQuery(
     { systemId: system?.id ?? "" },
     { enabled: !!system?.id },
   );
 
-  // Listen for dependency changes
-  useSignal(DEPENDENCY_CHANGED, () => {
-    void refetch();
-  });
-
-  // Listen for warning re-evaluations
-  useSignal(DEPENDENCY_WARNINGS_CHANGED, ({ affectedSystemIds }) => {
-    if (system?.id && affectedSystemIds.includes(system.id)) {
-      void refetch();
-    }
-  });
-
   if (!data) return;
 
   return (

package/src/components/DependencyEditor.tsx

@@ -4,11 +4,9 @@ import {
   usePluginClient,
   type SlotContext,
 } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { SystemEditorSlot } from "@checkstack/catalog-common";
 import {
   DependencyApi,
-  DEPENDENCY_CHANGED,
   dependencyRoutes,
   type Dependency,
   type ImpactType,
@@ -91,11 +89,6 @@ export const DependencyEditor: React.FC<Props> = ({ systemId }) => {
     return map;
   }, [systemsData]);
 
-  // Listen for realtime changes
-  useSignal(DEPENDENCY_CHANGED, () => {
-    void refetchDeps();
-  });
-
   const createMutation = depClient.createDependency.useMutation({
     onSuccess: () => {
       setIsAdding(false);

package/src/components/DependencyMapPage.tsx

@@ -15,13 +15,10 @@ import {
 import "@xyflow/react/dist/style.css";
 
 import { usePluginClient, wrapInSuspense } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { CatalogApi } from "@checkstack/catalog-common";
-import { HealthCheckApi, SYSTEM_STATUS_CHANGED } from "@checkstack/healthcheck-common";
+import { HealthCheckApi } from "@checkstack/healthcheck-common";
 import {
   DependencyApi,
-  DEPENDENCY_CHANGED,
-  DEPENDENCY_WARNINGS_CHANGED,
   type Dependency,
   type NodePosition,
 } from "@checkstack/dependency-common";
@@ -137,12 +134,12 @@ function DependencyMapContent() {
       { enabled: systemIds.length > 0 },
     );
 
-  // Fetch real health statuses for all systems
-  const { data: healthData, refetch: refetchHealth } =
-    healthCheckClient.getBulkSystemHealthStatus.useQuery(
-      { systemIds },
-      { enabled: systemIds.length > 0 },
-    );
+  // Fetch real health statuses for all systems — kept fresh via SignalAutoInvalidator
+  // (foreignSignals declares SYSTEM_STATUS_CHANGED on the dependency plugin).
+  const { data: healthData } = healthCheckClient.getBulkSystemHealthStatus.useQuery(
+    { systemIds },
+    { enabled: systemIds.length > 0 },
+  );
 
   // Save positions mutation
   const saveMutation = depClient.saveNodePositions.useMutation({
@@ -381,20 +378,6 @@ function DependencyMapContent() {
     savePositions({ positions });
   }, [savePositions]);
 
-  // Listen for realtime dependency changes
-  useSignal(DEPENDENCY_CHANGED, () => {
-    void refetchDeps();
-  });
-
-  useSignal(DEPENDENCY_WARNINGS_CHANGED, () => {
-    void refetchWarnings();
-  });
-
-  useSignal(SYSTEM_STATUS_CHANGED, () => {
-    void refetchHealth();
-    void refetchWarnings();
-  });
-
   // Cleanup timeout on unmount
   useEffect(() => {
     return () => {

package/src/index.tsx

@@ -8,6 +8,7 @@ import {
   dependencyRoutes,
   dependencyAccess,
 } from "@checkstack/dependency-common";
+import { SYSTEM_STATUS_CHANGED } from "@checkstack/healthcheck-common";
 import {
   SystemDetailsTopSlot,
   SystemStateBadgesSlot,
@@ -21,6 +22,10 @@ import { DependencyMenuItems } from "./components/DependencyMenuItems";
 
 export default createFrontendPlugin({
   metadata: pluginMetadata,
+  // Dependency queries embed system health, so a system status change must
+  // also invalidate this plugin's cache. Same-plugin signals (DEPENDENCY_*)
+  // are auto-invalidated and must NOT be listed here.
+  foreignSignals: [SYSTEM_STATUS_CHANGED],
   routes: [
     {
       route: dependencyRoutes.routes.map,