@checkstack/dashboard-frontend 0.4.6 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,100 @@
 # @checkstack/dashboard-frontend
 
+## 0.5.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/anomaly-common@0.3.0
+  - @checkstack/healthcheck-common@0.13.0
+  - @checkstack/incident-common@0.5.0
+  - @checkstack/maintenance-common@0.5.0
+  - @checkstack/notification-common@0.3.0
+  - @checkstack/queue-frontend@0.3.1
+  - @checkstack/auth-frontend@0.5.31
+  - @checkstack/catalog-common@1.5.3
+  - @checkstack/catalog-frontend@0.8.7
+  - @checkstack/command-frontend@0.2.32
+  - @checkstack/ui@1.6.1
+
+## 0.5.0
+
+### Minor Changes
+
+- 8d1ef12: ## Anomaly Detection & UI Improvements
+
+  ### Anomaly Detection Enhancements (Phase 2)
+
+  - **`@checkstack/anomaly-backend`**: Implemented background baseline analyzer jobs and anomaly trend deviation detection mechanics.
+  - **`@checkstack/anomaly-common`**: Added new baseline statistical logic and inference rules.
+  - **`@checkstack/anomaly-frontend`**: Added new Anomaly Widget and refactored system detail rendering to be more human-readable.
+  - **`@checkstack/dashboard-frontend`**: Refined the global anomaly widget and fixed hardcoded access gating to render appropriately.
+  - **`@checkstack/healthcheck-backend`**: Connected executor telemetry to the anomaly pipeline.
+  - **`@checkstack/healthcheck-frontend`**: Reconciled baseline display consistency in Drawer and charts.
+
+  ### Notification Identifiers
+
+  - **`@checkstack/incident-backend`**: Resolved system IDs to human-readable System Names within Incident notifications to eliminate ID-only alert content.
+  - **`@checkstack/maintenance-backend`**: Adopted the same resolution strategy for Maintenance notifications to keep parity.
+
+  ### UI Experience
+
+  - **`@checkstack/incident-frontend`**: Fixed the "Back to X" BackLink to properly use `react-router` hook `useNavigate` instead of doing a full application reload.
+  - **`@checkstack/healthcheck-frontend`**: Implemented `useNavigate` for seamless SPA back-linking.
+  - **`@checkstack/integration-frontend`**: Updated connections and delivery logs links to navigate without hard reloads.
+
+### Patch Changes
+
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+  - @checkstack/healthcheck-common@0.12.0
+  - @checkstack/anomaly-common@0.2.0
+  - @checkstack/common@0.7.0
+  - @checkstack/queue-frontend@0.3.0
+  - @checkstack/ui@1.6.0
+  - @checkstack/auth-frontend@0.5.30
+  - @checkstack/catalog-common@1.5.2
+  - @checkstack/catalog-frontend@0.8.6
+  - @checkstack/command-common@0.2.9
+  - @checkstack/command-frontend@0.2.31
+  - @checkstack/frontend-api@0.3.11
+  - @checkstack/incident-common@0.4.9
+  - @checkstack/maintenance-common@0.4.11
+  - @checkstack/notification-common@0.2.9
+  - @checkstack/signal-frontend@0.0.16
+
 ## 0.4.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dashboard-frontend",
-  "version": "0.4.6",
+  "version": "0.5.1",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -13,20 +13,22 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.5.28",
-    "@checkstack/catalog-common": "1.4.1",
-    "@checkstack/catalog-frontend": "0.8.3",
-    "@checkstack/command-common": "0.2.8",
-    "@checkstack/command-frontend": "0.2.29",
-    "@checkstack/common": "0.6.5",
-    "@checkstack/frontend-api": "0.3.9",
-    "@checkstack/healthcheck-common": "0.11.0",
-    "@checkstack/incident-common": "0.4.7",
-    "@checkstack/maintenance-common": "0.4.9",
-    "@checkstack/notification-common": "0.2.8",
-    "@checkstack/queue-frontend": "0.2.30",
-    "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.0",
+    "@checkstack/anomaly-common": "0.2.0",
+    "@checkstack/auth-frontend": "0.5.30",
+    "@checkstack/catalog-common": "1.5.2",
+    "@checkstack/catalog-frontend": "0.8.6",
+    "@checkstack/command-common": "0.2.9",
+    "@checkstack/command-frontend": "0.2.31",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/frontend-api": "0.3.11",
+    "@checkstack/healthcheck-common": "0.12.0",
+    "@checkstack/incident-common": "0.4.9",
+    "@checkstack/maintenance-common": "0.4.11",
+    "@checkstack/notification-common": "0.2.9",
+    "@checkstack/queue-frontend": "0.3.0",
+    "@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",
     "react-router-dom": "^6.22.0"

package/src/Dashboard.tsx

@@ -19,6 +19,7 @@ import {
 } from "@checkstack/notification-common";
 import { IncidentApi } from "@checkstack/incident-common";
 import { MaintenanceApi } from "@checkstack/maintenance-common";
+import { AnomalyApi } from "@checkstack/anomaly-common";
 import { HEALTH_CHECK_RUN_COMPLETED } from "@checkstack/healthcheck-common";
 import { useSignal } from "@checkstack/signal-frontend";
 import {
@@ -46,12 +47,14 @@ import {
   AlertTriangle,
   Wrench,
   Terminal,
+  ActivitySquare,
 } from "lucide-react";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 import { QueueLagAlert } from "@checkstack/queue-frontend";
 import { SystemBadgeDataProvider } from "./components/SystemBadgeDataProvider";
 import { IncidentOverviewSheet } from "./components/IncidentOverviewSheet";
 import { MaintenanceOverviewSheet } from "./components/MaintenanceOverviewSheet";
+import { AnomalyOverviewSheet } from "./components/AnomalyOverviewSheet";
 
 const CATALOG_PLUGIN_ID = "catalog";
 const MAX_TERMINAL_ENTRIES = 8;
@@ -87,6 +90,7 @@ export const Dashboard: React.FC = () => {
   const notificationClient = usePluginClient(NotificationApi);
   const incidentClient = usePluginClient(IncidentApi);
   const maintenanceClient = usePluginClient(MaintenanceApi);
+  const anomalyClient = usePluginClient(AnomalyApi);
 
   const navigate = useNavigate();
   const toast = useToast();
@@ -103,6 +107,7 @@ export const Dashboard: React.FC = () => {
 
   const [isIncidentSheetOpen, setIncidentSheetOpen] = useState(false);
   const [isMaintenanceSheetOpen, setMaintenanceSheetOpen] = useState(false);
+  const [isAnomalySheetOpen, setAnomalySheetOpen] = useState(false);
 
   // -------------------------------------------------------------------------
   // DATA QUERIES
@@ -146,6 +151,13 @@ export const Dashboard: React.FC = () => {
 
   const maintenancesLoading = inProgressLoading || scheduledLoading;
 
+  // Fetch active anomalies
+  const { data: anomalies = [], isLoading: anomaliesLoading } =
+    anomalyClient.getAnomalies.useQuery(
+      { limit: 100, state: "anomaly" },
+      { staleTime: 30_000 },
+    );
+
   // Fetch subscriptions (only when logged in)
   const { data: subscriptions = [], refetch: refetchSubscriptions } =
     notificationClient.getSubscriptions.useQuery(
@@ -154,7 +166,11 @@ export const Dashboard: React.FC = () => {
     );
 
   // Combined loading state
-  const loading = entitiesLoading || incidentsLoading || maintenancesLoading;
+  const loading =
+    entitiesLoading ||
+    incidentsLoading ||
+    maintenancesLoading ||
+    anomaliesLoading;
 
   // -------------------------------------------------------------------------
   // MUTATIONS
@@ -188,6 +204,7 @@ export const Dashboard: React.FC = () => {
   const systemsCount = systems.length;
   const activeIncidentsCount = incidents.length;
   const activeMaintenancesCount = maintenances.length;
+  const activeAnomaliesCount = anomalies.length;
 
   // Map groups to include their systems
   const groupsWithSystems = useMemo<GroupWithSystems[]>(() => {
@@ -373,7 +390,7 @@ export const Dashboard: React.FC = () => {
             title="Overview"
             icon={<Activity className="w-5 h-5" />}
           />
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
             <StatusCard
               title="Total Systems"
               value={loading ? "..." : <AnimatedCounter value={systemsCount} />}
@@ -436,6 +453,30 @@ export const Dashboard: React.FC = () => {
                   : ""
               }
             />
+
+            <StatusCard
+              variant={activeAnomaliesCount > 0 ? "gradient" : "default"}
+              title="Active Anomalies"
+              value={
+                loading ? (
+                  "..."
+                ) : (
+                  <AnimatedCounter value={activeAnomaliesCount} />
+                )
+              }
+              description="Unusual behavior detected"
+              icon={<ActivitySquare className="w-4 h-4" />}
+              onClick={
+                activeAnomaliesCount > 0
+                  ? () => setAnomalySheetOpen(true)
+                  : undefined
+              }
+              className={
+                activeAnomaliesCount > 0
+                  ? "cursor-pointer hover:opacity-90 hover:scale-[1.02] bg-gradient-to-br from-warning/20 to-warning/5 border-warning/30"
+                  : ""
+              }
+            />
           </div>
         </section>
 
@@ -478,6 +519,12 @@ export const Dashboard: React.FC = () => {
         maintenances={maintenances}
         systems={systems}
       />
+      <AnomalyOverviewSheet
+        open={isAnomalySheetOpen}
+        onOpenChange={setAnomalySheetOpen}
+        anomalies={anomalies}
+        systems={systems}
+      />
     </>
   );
 };

package/src/components/AnomalyOverviewSheet.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetBody,
+  Badge,
+} from "@checkstack/ui";
+import { Link } from "react-router-dom";
+import {
+  catalogRoutes,
+  type System,
+} from "@checkstack/catalog-common";
+import { resolveRoute } from "@checkstack/common";
+import { type AnomalyDto } from "@checkstack/anomaly-common";
+import { formatDistanceToNow } from "date-fns";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  anomalies: AnomalyDto[];
+  systems: System[];
+}
+
+export const AnomalyOverviewSheet: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  anomalies,
+  systems,
+}) => {
+  // Map of systemId -> systemName
+  const systemMap = new Map(systems.map((s) => [s.id, s.name]));
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader className="flex flex-row items-start justify-between gap-4 pt-6">
+          <div className="flex flex-col gap-1 text-left">
+            <SheetTitle>Active Anomalies</SheetTitle>
+            <p className="text-sm text-muted-foreground">
+              Overview of unusual system behavior
+            </p>
+          </div>
+        </SheetHeader>
+
+        <SheetBody className="flex flex-col gap-3 pb-8">
+          {anomalies.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No active anomalies
+            </p>
+          ) : (
+            anomalies.map((anomaly) => {
+              const systemName = systemMap.get(anomaly.systemId) || anomaly.systemId;
+              const deviationText = anomaly.deviation 
+                ? `${anomaly.deviation.toFixed(1)}σ`
+                : "unusual";
+
+              return (
+                <Link
+                  key={anomaly.id}
+                  to={resolveRoute(catalogRoutes.routes.systemDetail, { systemId: anomaly.systemId })}
+                  onClick={() => onOpenChange(false)}
+                  className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4 hover:border-primary/50 hover:shadow-sm transition-all text-left"
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <h4 className="font-medium text-foreground">
+                      {systemName}
+                    </h4>
+                    <Badge variant="warning" className="flex-shrink-0 font-mono">
+                      {deviationText}
+                    </Badge>
+                  </div>
+                  <div className="flex flex-col gap-1 mt-2">
+                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                      Metric
+                    </span>
+                    <span className="text-sm font-mono text-foreground break-all">
+                      {anomaly.fieldPath}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between mt-2 pt-2 border-t border-border/50 text-xs text-muted-foreground">
+                    <span className="font-mono">
+                      Observed: {anomaly.observedValue} <span className="opacity-70">(~{anomaly.baselineValue})</span>
+                    </span>
+                    <span>
+                      {formatDistanceToNow(new Date(anomaly.startedAt), { addSuffix: true })}
+                    </span>
+                  </div>
+                </Link>
+              );
+            })
+          )}
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+};

package/src/components/SystemBadgeDataProvider.tsx

@@ -1,19 +1,15 @@
 import React, { createContext, useContext, useCallback, useMemo } from "react";
-import { usePluginClient, useQueryClient } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
+import { usePluginClient } from "@checkstack/frontend-api";
 import {
   HealthCheckApi,
-  SYSTEM_STATUS_CHANGED,
   type SystemHealthStatusResponse,
 } from "@checkstack/healthcheck-common";
 import {
   IncidentApi,
-  INCIDENT_UPDATED,
   type IncidentWithSystems,
 } from "@checkstack/incident-common";
 import {
   MaintenanceApi,
-  MAINTENANCE_UPDATED,
   type MaintenanceWithSystems,
 } from "@checkstack/maintenance-common";
 
@@ -46,11 +42,14 @@ interface SystemBadgeDataProviderProps {
 /**
  * Provider that bulk-fetches badge data (health, incidents, maintenances)
  * for multiple systems using TanStack Query and provides it via context.
+ *
+ * Realtime invalidation of `[["healthcheck"]]`, `[["incident"]]`, and
+ * `[["maintenance"]]` is handled centrally by SignalAutoInvalidator — no
+ * per-component signal handlers needed here.
  */
 export const SystemBadgeDataProvider: React.FC<
   SystemBadgeDataProviderProps
 > = ({ systemIds, children }) => {
-  const queryClient = useQueryClient();
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const incidentClient = usePluginClient(IncidentApi);
   const maintenanceClient = usePluginClient(MaintenanceApi);
@@ -82,56 +81,6 @@ export const SystemBadgeDataProvider: React.FC<
 
   const loading = healthLoading || incidentLoading || maintenanceLoading;
 
-  // -------------------------------------------------------------------------
-  // SIGNAL HANDLERS - Invalidate queries on updates
-  // -------------------------------------------------------------------------
-
-  const refetchHealth = useCallback(
-    (systemId: string) => {
-      if (systemIds.includes(systemId)) {
-        // Invalidate the bulk query to refetch
-        queryClient.invalidateQueries({ queryKey: [["healthcheck"]] });
-      }
-    },
-    [systemIds, queryClient]
-  );
-
-  useSignal(SYSTEM_STATUS_CHANGED, ({ systemId }) => {
-    refetchHealth(systemId);
-  });
-
-  const refetchIncidents = useCallback(
-    (affectedSystemIds: string[]) => {
-      const hasAffected = affectedSystemIds.some((id) =>
-        systemIds.includes(id)
-      );
-      if (hasAffected) {
-        queryClient.invalidateQueries({ queryKey: [["incident"]] });
-      }
-    },
-    [systemIds, queryClient]
-  );
-
-  useSignal(INCIDENT_UPDATED, ({ systemIds: affectedIds }) => {
-    refetchIncidents(affectedIds);
-  });
-
-  const refetchMaintenances = useCallback(
-    (affectedSystemIds: string[]) => {
-      const hasAffected = affectedSystemIds.some((id) =>
-        systemIds.includes(id)
-      );
-      if (hasAffected) {
-        queryClient.invalidateQueries({ queryKey: [["maintenance"]] });
-      }
-    },
-    [systemIds, queryClient]
-  );
-
-  useSignal(MAINTENANCE_UPDATED, ({ systemIds: affectedIds }) => {
-    refetchMaintenances(affectedIds);
-  });
-
   // -------------------------------------------------------------------------
   // CONTEXT VALUE
   // -------------------------------------------------------------------------