@checkstack/incident-frontend 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @checkstack/incident-frontend
 
+## 0.6.1
+
+### 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/incident-common@0.5.0
+  - @checkstack/dashboard-frontend@0.5.1
+  - @checkstack/auth-frontend@0.5.31
+  - @checkstack/catalog-common@1.5.3
+  - @checkstack/ui@1.6.1
+
 ## 0.6.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/incident-frontend",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,14 +12,14 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.5.29",
-    "@checkstack/catalog-common": "1.5.1",
-    "@checkstack/common": "0.6.5",
-    "@checkstack/dashboard-frontend": "0.4.6",
-    "@checkstack/frontend-api": "0.3.10",
-    "@checkstack/incident-common": "0.4.8",
-    "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.1",
+    "@checkstack/auth-frontend": "0.5.30",
+    "@checkstack/catalog-common": "1.5.2",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/dashboard-frontend": "0.5.0",
+    "@checkstack/frontend-api": "0.3.11",
+    "@checkstack/incident-common": "0.4.9",
+    "@checkstack/signal-frontend": "0.0.16",
+    "@checkstack/ui": "1.6.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",

package/src/components/SystemIncidentBadge.tsx

@@ -1,12 +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 { IncidentApi } from "../api";
-import {
-  INCIDENT_UPDATED,
-  type IncidentWithSystems,
-} from "@checkstack/incident-common";
+import { type IncidentWithSystems } from "@checkstack/incident-common";
 import { Badge } from "@checkstack/ui";
 import { useSystemBadgeDataOptional } from "@checkstack/dashboard-frontend";
 
@@ -50,23 +46,15 @@ export const SystemIncidentBadge: React.FC<Props> = ({ system }) => {
     : undefined;
 
   // Query for incidents if not using provider
-  const { data: incidents, refetch } =
-    incidentClient.getIncidentsForSystem.useQuery(
-      { systemId: system?.id ?? "" },
-      { enabled: !badgeData && !!system?.id }
-    );
+  const { data: incidents } = incidentClient.getIncidentsForSystem.useQuery(
+    { systemId: system?.id ?? "" },
+    { enabled: !badgeData && !!system?.id }
+  );
 
   const localIncident = incidents
     ? getMostSevereIncident(incidents)
     : undefined;
 
-  // Listen for realtime incident updates (only in fallback mode)
-  useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
-    if (!badgeData && system?.id && systemIds.includes(system.id)) {
-      void refetch();
-    }
-  });
-
   // Use provider data if available, otherwise use local state
   const activeIncident = badgeData ? providerIncident : localIncident;
 

package/src/components/SystemIncidentPanel.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
 import { SystemDetailsTopSlot } from "@checkstack/catalog-common";
 import { IncidentApi } from "../api";
 import {
   incidentRoutes,
-  INCIDENT_UPDATED,
   type IncidentWithSystems,
 } from "@checkstack/incident-common";
 import { Badge, LoadingSpinner, Button } from "@checkstack/ui";
@@ -43,21 +41,11 @@ export const SystemIncidentPanel: React.FC<Props> = ({ system }) => {
   const incidentClient = usePluginClient(IncidentApi);
 
   // Fetch incidents with useQuery
-  const {
-    data: incidents = [],
-    isLoading: loading,
-    refetch,
-  } = incidentClient.getIncidentsForSystem.useQuery(
-    { systemId: system?.id ?? "" },
-    { enabled: !!system?.id }
-  );
-
-  // Listen for realtime incident updates
-  useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
-    if (system?.id && systemIds.includes(system.id)) {
-      void refetch();
-    }
-  });
+  const { data: incidents = [], isLoading: loading } =
+    incidentClient.getIncidentsForSystem.useQuery(
+      { systemId: system?.id ?? "" },
+      { enabled: !!system?.id }
+    );
 
   if (loading) {
     return (

package/src/pages/IncidentDetailPage.tsx

@@ -6,14 +6,9 @@ import {
   useApi,
   wrapInSuspense,
 } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute, extractErrorMessage} from "@checkstack/common";
 import { IncidentApi } from "../api";
-import {
-  incidentRoutes,
-  INCIDENT_UPDATED,
-  incidentAccess,
-} from "@checkstack/incident-common";
+import { incidentRoutes, incidentAccess } from "@checkstack/incident-common";
 import { CatalogApi } from "@checkstack/catalog-common";
 import {
   Card,
@@ -77,13 +72,6 @@ const IncidentDetailPageContent: React.FC = () => {
   const systems = systemsData?.systems ?? [];
   const loading = incidentLoading || systemsLoading;
 
-  // Listen for realtime updates
-  useSignal(INCIDENT_UPDATED, ({ incidentId: updatedId }) => {
-    if (incidentId === updatedId) {
-      void refetchIncident();
-    }
-  });
-
   // Resolve mutation
   const resolveMutation = incidentClient.resolveIncident.useMutation({
     onSuccess: () => {

package/src/pages/SystemIncidentHistoryPage.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import { useParams, Link, useNavigate } from "react-router-dom";
 import { usePluginClient, wrapInSuspense } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
 import { IncidentApi } from "../api";
 import {
   incidentRoutes,
-  INCIDENT_UPDATED,
   type IncidentStatus,
 } from "@checkstack/incident-common";
 import { CatalogApi, catalogRoutes } from "@checkstack/catalog-common";
@@ -27,15 +25,12 @@ const SystemIncidentHistoryPageContent: React.FC = () => {
   const incidentClient = usePluginClient(IncidentApi);
   const catalogClient = usePluginClient(CatalogApi);
 
-  // Fetch incidents with useQuery
-  const {
-    data: incidentsData,
-    isLoading: incidentsLoading,
-    refetch: refetchIncidents,
-  } = incidentClient.listIncidents.useQuery(
-    { systemId, includeResolved: true },
-    { enabled: !!systemId },
-  );
+  // Fetch incidents with useQuery — kept fresh via SignalAutoInvalidator.
+  const { data: incidentsData, isLoading: incidentsLoading } =
+    incidentClient.listIncidents.useQuery(
+      { systemId, includeResolved: true },
+      { enabled: !!systemId },
+    );
 
   // Fetch systems with useQuery
   const { data: systemsData, isLoading: systemsLoading } =
@@ -46,13 +41,6 @@ const SystemIncidentHistoryPageContent: React.FC = () => {
   const system = systems.find((s) => s.id === systemId);
   const loading = incidentsLoading || systemsLoading;
 
-  // Listen for realtime updates
-  useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
-    if (systemId && systemIds.includes(systemId)) {
-      void refetchIncidents();
-    }
-  });
-
   const getStatusBadge = (status: IncidentStatus) => {
     switch (status) {
       case "investigating": {