@checkstack/anomaly-frontend 0.4.7 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # @checkstack/anomaly-frontend
 
+## 0.5.0
+
+### Minor Changes
+
+- 9dcc848: Auto-resolve anomalies that settle at a new normal, and add global suppression.
+
+  Part A (bug fix): a confirmed anomaly used to stay stuck in `anomaly` indefinitely when the metric settled at a new stable level. Both detectors now carry a baseline-independent self-resolution path - spike: after `STABLE_RESOLUTION_RUN_COUNT` (5) consecutive healthy samples within `STABLE_RESOLUTION_RELATIVE_BAND` (10%) the row self-resolves to `recovered`; drift: when the projected change goes flat relative to the new mean for `STABLE_DRIFT_RESOLUTION_RUN_COUNT` (2) analyzer runs. The original baseline-relative recovery path is unchanged.
+
+  Part B (feature): global (per-row) suppression. New `suppressedAt` / `suppressedValue` / `suppressedBaseline` columns (Drizzle migration `0005`), `suppressAnomaly` / `unsuppressAnomaly` RPCs gated by `anomaly_feed.manage`, and a `suppression` filter on `getAnomalies` (default `active` hides suppressed rows). Suppressed rows drop out of the dashboard badge/widget active count; the widget exposes an eye-off suppress affordance. Suppression auto-clears once the observed value moves more than `SUPPRESSION_REACTIVATION_DELTA` (25%) from the value it was suppressed at. All suppression state lives on the shared `anomalies` row, so every pod reads the same active/suppressed set. Distinct from the existing per-user notification mute.
+
+  This is a beta minor.
+
+- 9dcc848: Redesign the dashboard as an extensible "needs attention" overview, and normalize system state badges.
+
+  The dashboard now surfaces ONLY systems that need attention (degraded, unhealthy, breaching/at-risk SLO, under an incident or active maintenance, anomalous, or with a dependency problem) and hides everything healthy. A compact header summarises fleet health and filters by severity; each problem renders as an elevated card with one row per issue that deep-links to where the issue originates. A calm "all clear" state shows when nothing needs attention, a live "recent activity" feed sits below, and a "View catalog" link replaces the duplicated system list.
+
+  New platform contract `SystemSignalsSlot` (`@checkstack/catalog-common`): a headless, render-once slot where any plugin bulk-fetches and reports structured `SystemSignal[]` per system via `onSignals(sourceId, map)`. The dashboard aggregates every source agnostic to which plugins contribute; each core reliability plugin (healthcheck, incident, SLO, maintenance, anomaly, dependency) ships a filler, and third-party plugins add new per-system state the same way with no dashboard change. Signals carry an `iconName` rendered via `DynamicIcon` so the contract stays React-free. The dashboard's old summary tiles and overview sheets are removed, so it no longer depends on those plugins' packages. The group "subscribe" control moved onto the catalog browse page's group headers.
+
+  System state badges are normalized into one icon-only `@checkstack/ui` `StatusBadge` primitive - a small tinted icon chip with the full label on hover/focus (and via `aria-label`). Each signal uses its feature's navbar icon (health = Activity, incident = AlertTriangle, SLO = Target, maintenance = Wrench, dependency = GitBranch; anomaly = ChartSpline). Badges self-sort by severity via CSS `order` (error -> warn -> info), tooltips are scoped to a named group, and in catalog browse rows the cluster moved to the right edge.
+
+  This is a beta minor.
+
+- 9dcc848: Cut initial-load JS: lazy plugin contributions, a hardened lazy-by-default contribution contract, on-demand Monaco, and a lighter icon/chart load.
+
+  - Lazy plugin route pages: each plugin's route `element` references a `React.lazy`-wrapped page rendered inside a shared `<Suspense>` boundary. Plugins still register synchronously, so nav, slots, commands, API factories, and `foreignSignals` are available on first paint. This moves ~37 route-page chunks (~600 KB) out of the entry; the entry chunk drops from ~2.4 MB to ~190 KB. Auth flow pages stay eager. The `@checkstack/scripts` scaffold template generates lazy route pages too.
+  - Hardened contribution contract (BREAKING, frontend plugin contract): plugins declare contributions lazily and let the framework own code-splitting, Suspense, and per-plugin error isolation. Routes use `load: () => import("./Page").then((m) => ({ default: m.Page }))` instead of `element: <Page />` (`element` is still accepted for the rare page that must paint without a chunk fetch; provide exactly one). Slot extensions accept either an eager `component` or a lazy `load`; new `getLazyContribution` + `ExtensionComponent` exports from `@checkstack/frontend-api` render either kind. This also fixes runtime-installed plugins: `ExtensionSlot` subscribes to the plugin registry, and the API registry rebuilds when the plugin set changes (`getPlugins()` returns an immutable snapshot via `useSyncExternalStore`). A per-plugin error boundary contains a bad contribution.
+  - On-demand Monaco: the `@checkstack/ui` barrel no longer pulls the `@codingame/*` / `monaco-languageclient` stack into the initial load. `CodeEditor` lazy-loads its Monaco-backed editor behind `React.lazy` + Suspense, `validateTypeScriptSources` imports the editor API via in-body `await import(...)`, and the "vscode services ready" signal moved to a Monaco-free module. The ~10 MB editor body loads only when a `CodeEditor` mounts. A `react-vendor` `manualChunks` split was added for stable vendor caching.
+  - lucide-react 1.x + lighter icons/charts (BREAKING for icon consumers): lucide-react unified from three drifting ranges to `^1.17.0`. lucide v1 removed brand icons, so the GitHub/GitLab marks are vendored in `@checkstack/ui` (`GithubIcon`, `GitlabIcon`, `brandIcons`); a new `IconName` type (`LucideIconName | BrandIconName`) in `@checkstack/common` is canonical, accepted by `AuthStrategy.icon` and the card components, so data-driven brand names keep working. `DynamicIcon` no longer eagerly imports lucide's ~1600-icon map (~1 MB) - it lives in a `React.lazy` `iconRegistry` chunk fetched on first data-driven render, while statically named-imported icons tree-shake normally. The recharts-backed health-check charts (~300 KB) and the `HealthCheckSystemOverview` drawer leave the initial load.
+
+  BREAKING CHANGES:
+
+  - Frontend plugin contract: routes/slot contributions are lazy-by-default (`load` instead of `element`/eager elements) as described above.
+  - Any external consumer importing a brand icon from `lucide-react` (e.g. `import { Github } from "lucide-react"`) must switch to the vendored `@checkstack/ui` brand icons or a custom SVG.
+
+  This is a beta minor.
+
+- 9dcc848: Align workspace dependency versions and migrate React Router to v7.
+
+  BREAKING CHANGES (React Router v7): All frontend packages now depend on `react-router-dom@^7.16.0`. Previously the workspace declared four divergent ranges (`^6.20.0`, `^6.22.0`, `^7.1.1`, `^7.14.2`), which resolved both `react-router@6` and `react-router@7` into a single bundle. Everything is now unified on v7. The public imports the app uses (`BrowserRouter`, `Routes`, `Route`, `Link`, `NavLink`, `MemoryRouter`, `useNavigate`, `useParams`, `useSearchParams`, `useLocation`) are unchanged between v6 and v7, so no source rewrites were required - but any out-of-tree plugin still on react-router v6 should upgrade to v7 (see the React Router v6 -> v7 upgrade guide) to share the host's single router instance via the import map.
+
+  Other unified ranges (no API change): `react` -> `^18.3.1`, the `@orpc/*` family (`contract`, `server`, `client`, `tanstack-query`, `openapi`, `zod`) -> `^1.14.4`, and `better-auth` -> `^1.6.13`.
+
+  Removed the pre-rename `@orpc/react-query` leftover from `@checkstack/frontend-api`; its `createRouterUtils` / `RouterUtils` / `ProcedureUtils` now come from `@orpc/tanstack-query` (the package already in use).
+
+  Stale in-range runtime deps pulled up to current published versions: `hono` `^4.12.23`, `@tanstack/react-query` (+devtools) `^5.100.14`, `date-fns` `^4.4.0`, `jose` `^6.2.3`, `tar` `^7.5.16`, `semver` `^7.8.1`, `@xyflow/react` `^12.11.0`.
+
+### Patch Changes
+
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+  - @checkstack/ui@1.13.0
+  - @checkstack/healthcheck-common@1.5.0
+  - @checkstack/notification-common@1.3.0
+  - @checkstack/anomaly-common@1.3.0
+  - @checkstack/catalog-common@2.3.0
+  - @checkstack/healthcheck-frontend@0.23.0
+  - @checkstack/common@0.13.0
+  - @checkstack/frontend-api@0.7.0
+  - @checkstack/notification-frontend@0.5.0
+  - @checkstack/signal-frontend@0.2.0
+
+## 0.4.8
+
+### Patch Changes
+
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+  - @checkstack/ui@1.12.0
+  - @checkstack/healthcheck-common@1.4.0
+  - @checkstack/healthcheck-frontend@0.22.0
+  - @checkstack/notification-frontend@0.4.7
+
 ## 0.4.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/anomaly-frontend",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,24 +13,24 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.2.2",
-    "@checkstack/catalog-common": "2.2.2",
-    "@checkstack/common": "0.11.0",
-    "@checkstack/frontend-api": "0.5.2",
-    "@checkstack/healthcheck-common": "1.2.0",
-    "@checkstack/healthcheck-frontend": "0.20.0",
-    "@checkstack/notification-common": "1.2.0",
-    "@checkstack/notification-frontend": "0.4.5",
-    "@checkstack/signal-frontend": "0.1.4",
-    "@checkstack/ui": "1.10.0",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.344.0",
-    "react": "^18.2.0",
-    "react-router-dom": "^7.14.2",
+    "@checkstack/anomaly-common": "1.2.3",
+    "@checkstack/catalog-common": "2.2.3",
+    "@checkstack/common": "0.12.0",
+    "@checkstack/frontend-api": "0.6.0",
+    "@checkstack/healthcheck-common": "1.4.0",
+    "@checkstack/healthcheck-frontend": "0.22.0",
+    "@checkstack/notification-common": "1.2.1",
+    "@checkstack/notification-frontend": "0.4.7",
+    "@checkstack/signal-frontend": "0.1.5",
+    "@checkstack/ui": "1.12.0",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^1.17.0",
+    "react": "^18.3.1",
+    "react-router-dom": "^7.16.0",
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.3.3",
+    "@checkstack/scripts": "0.3.4",
     "@checkstack/tsconfig": "0.0.7",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0"

package/src/components/AnomalyFieldMuteList.tsx

@@ -23,8 +23,11 @@ export const AnomalyFieldMuteList: React.FC<{
   const anomalyClient = usePluginClient(AnomalyApi);
   const toast = useToast();
 
+  // Notification mute is a per-user concern orthogonal to global suppression,
+  // so the mute-management list must include suppressed rows — otherwise a
+  // field that is both suppressed and muted would lose its unmute affordance.
   const { data: anomalies = [] } = anomalyClient.getAnomalies.useQuery(
-    { systemId, limit: 50 },
+    { systemId, limit: 50, suppression: "all" },
     { staleTime: 30_000 },
   );
 

package/src/components/AnomalySignalsFiller.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useMemo } from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import {
+  SystemSignalsSlot,
+  type SystemSignal,
+  type SystemSignalsMap,
+} from "@checkstack/catalog-common";
+import { AnomalyApi } from "@checkstack/anomaly-common";
+import { healthcheckRoutes } from "@checkstack/healthcheck-common";
+
+type Props = SlotContext<typeof SystemSignalsSlot>;
+
+const SOURCE_ID = "anomaly";
+
+/**
+ * Reports confirmed anomalies and suspicious states as dashboard signals.
+ * Reuses the two globally-deduped anomaly queries (the same ones the badge
+ * uses) and emits one signal per anomaly for systems in the overview, deep-
+ * linking to the affected check's history. Headless filler for
+ * {@link SystemSignalsSlot}.
+ */
+export const AnomalySignalsFiller: React.FC<Props> = ({
+  systemIds,
+  onSignals,
+}) => {
+  const anomalyClient = usePluginClient(AnomalyApi);
+
+  const { data: confirmed = [] } = anomalyClient.getAnomalies.useQuery(
+    { state: "anomaly", limit: 500 },
+    { staleTime: 30_000 },
+  );
+  const { data: suspicious = [] } = anomalyClient.getAnomalies.useQuery(
+    { state: "suspicious", limit: 500 },
+    { staleTime: 30_000 },
+  );
+
+  const signals = useMemo<SystemSignalsMap>(() => {
+    const result: SystemSignalsMap = {};
+    const inOverview = new Set(systemIds);
+
+    const add = (
+      systemId: string,
+      configurationId: string,
+      fieldPath: string,
+      startedAt: string,
+      tone: SystemSignal["tone"],
+      label: string,
+    ) => {
+      if (!inOverview.has(systemId)) return;
+      const signal: SystemSignal = {
+        source: SOURCE_ID,
+        tone,
+        label,
+        detail: fieldPath,
+        href: resolveRoute(healthcheckRoutes.routes.historyDetail, {
+          systemId,
+          configurationId,
+        }),
+        since: new Date(startedAt).toISOString(),
+        iconName: "ChartSpline",
+      };
+      (result[systemId] ??= []).push(signal);
+    };
+
+    for (const a of confirmed) {
+      add(a.systemId, a.configurationId, a.fieldPath, a.startedAt, "warn", "Anomaly detected");
+    }
+    for (const a of suspicious) {
+      add(a.systemId, a.configurationId, a.fieldPath, a.startedAt, "info", "Suspicious behaviour");
+    }
+    return result;
+  }, [confirmed, suspicious, systemIds]);
+
+  useEffect(() => {
+    onSignals(SOURCE_ID, signals);
+  }, [signals, onSignals]);
+
+  return null;
+};

package/src/components/SystemAnomalyBadge.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
 import { AnomalyApi, type AnomalyState } from "@checkstack/anomaly-common";
-import { Badge } from "@checkstack/ui";
-import { AlertTriangle, HelpCircle } from "lucide-react";
+import { StatusBadge } from "@checkstack/ui";
+import { ChartSpline } from "lucide-react";
 
 type Props = SlotContext<typeof SystemStateBadgesSlot>;
 
@@ -48,24 +48,8 @@ export const SystemAnomalyBadge: React.FC<Props> = ({ system }) => {
   if (!systemState) return <></>;
 
   if (systemState === "anomaly") {
-    return (
-      <Badge
-        variant="warning"
-        className="flex items-center gap-1 shrink-0 cursor-default"
-      >
-        <AlertTriangle className="h-3 w-3" />
-        Anomaly
-      </Badge>
-    );
+    return <StatusBadge tone="warn" icon={ChartSpline} label="Anomaly detected" />;
   }
 
-  return (
-    <Badge
-      variant="outline"
-      className="flex items-center gap-1 shrink-0 cursor-default border-warning/50 text-warning"
-    >
-      <HelpCircle className="h-3 w-3" />
-      Suspicious
-    </Badge>
-  );
+  return <StatusBadge tone="info" icon={ChartSpline} label="Suspicious behaviour" />;
 };

package/src/components/SystemAnomalyWidget.tsx

@@ -26,6 +26,7 @@ import {
   LineChart,
   Bell,
   BellOff,
+  EyeOff,
 } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import { Link } from "react-router-dom";
@@ -114,12 +115,16 @@ function AnomalyRow({
   isMuted,
   onToggleMute,
   isToggling,
+  onSuppress,
+  isSuppressing,
 }: {
   anomaly: AnomalyDto;
   systemId: string;
   isMuted: boolean;
   onToggleMute: (fieldPath: string, isMuted: boolean) => void;
   isToggling: boolean;
+  onSuppress: (anomalyId: string) => void;
+  isSuppressing: boolean;
 }) {
   const isSuspicious = anomaly.state === "suspicious";
   const isDrift = anomaly.kind === "drift";
@@ -237,6 +242,23 @@ function AnomalyRow({
             <Bell className="h-3.5 w-3.5" />
           )}
         </Button>
+        {!isSuspicious && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            disabled={isSuppressing}
+            title="Suppress this anomaly until it changes again"
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onSuppress(anomaly.id);
+            }}
+          >
+            <EyeOff className="h-3.5 w-3.5" />
+          </Button>
+        )}
         <ArrowRight className="h-3.5 w-3.5 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
       </div>
     </Link>
@@ -303,6 +325,19 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
     }
   };
 
+  // Suppressing removes the row from the active feed. The mutation invalidates
+  // the anomaly plugin's own queries on success, so the active list (which
+  // defaults to the "active" suppression filter) refetches without the row.
+  const suppressMutation = anomalyClient.suppressAnomaly.useMutation({
+    onError: () => {
+      toast.error("Failed to suppress anomaly");
+    },
+  });
+
+  const handleSuppress = (anomalyId: string) => {
+    suppressMutation.mutate({ systemId: system.id, anomalyId });
+  };
+
   const isLoading = loadingConfirmed || loadingSuspicious;
 
   // Confirmed anomalies first, then suspicious
@@ -397,6 +432,8 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
               isMuted={isSystemMuted || mutedFields.has(anomaly.fieldPath)}
               onToggleMute={handleToggleMute}
               isToggling={isToggling}
+              onSuppress={handleSuppress}
+              isSuppressing={suppressMutation.isPending}
             />
           ))}
         </div>

package/src/plugin.tsx

@@ -1,3 +1,4 @@
+import { lazy, Suspense } from "react";
 import { definePluginMetadata } from "@checkstack/common";
 import { FrontendPlugin, createSlotExtension } from "@checkstack/frontend-api";
 import {
@@ -11,17 +12,30 @@ import {
 import {
   SystemStateBadgesSlot,
   SystemDetailsSlot,
+  SystemSignalsSlot,
 } from "@checkstack/catalog-common";
 import { registerSubscriptionSubControls } from "@checkstack/notification-frontend";
 import { anomalySystemSubscription } from "@checkstack/anomaly-common";
-import { AnomalyConfigPanel } from "./components/AnomalyConfigPanel";
-import { AnomalyTemplatePanel } from "./components/AnomalyTemplatePanel";
 import { SystemAnomalyBadge } from "./components/SystemAnomalyBadge";
 import { SystemAnomalyWidget } from "./components/SystemAnomalyWidget";
 import { AnomalyFieldMuteList } from "./components/AnomalyFieldMuteList";
 import { IDETreeNode } from "@checkstack/ui";
 import { Activity } from "lucide-react";
 
+// Heavy IDE panels — lazy-loaded so they stay out of the initial bundle and
+// load only when their IDE node is actually selected (the eager guards below
+// decide that), not whenever the IDE panel slot renders.
+const AnomalyTemplatePanel = lazy(() =>
+  import("./components/AnomalyTemplatePanel").then((m) => ({
+    default: m.AnomalyTemplatePanel,
+  })),
+);
+const AnomalyConfigPanel = lazy(() =>
+  import("./components/AnomalyConfigPanel").then((m) => ({
+    default: m.AnomalyConfigPanel,
+  })),
+);
+
 const pluginMetadata = definePluginMetadata({
   pluginId: "anomaly",
 });
@@ -33,6 +47,13 @@ export const plugin: FrontendPlugin = {
       id: "anomaly.system-badge",
       component: SystemAnomalyBadge,
     }),
+    createSlotExtension(SystemSignalsSlot, {
+      id: "anomaly.dashboard.signals",
+      load: () =>
+        import("./components/AnomalySignalsFiller").then((m) => ({
+          default: m.AnomalySignalsFiller,
+        })),
+    }),
     createSlotExtension(SystemDetailsSlot, {
       id: "anomaly.system-details.widget",
       component: SystemAnomalyWidget,
@@ -55,7 +76,11 @@ export const plugin: FrontendPlugin = {
         if (!context.selectedNode?.startsWith("anomaly-template:")) {
           return <></>;
         }
-        return <AnomalyTemplatePanel context={context} />;
+        return (
+          <Suspense fallback={null}>
+            <AnomalyTemplatePanel context={context} />
+          </Suspense>
+        );
       },
     }),
     createSlotExtension(AssignmentIDENodeSlot, {
@@ -77,7 +102,11 @@ export const plugin: FrontendPlugin = {
         if (!context.selectedNode?.startsWith("anomaly:")) {
           return <></>;
         }
-        return <AnomalyConfigPanel context={context} />;
+        return (
+          <Suspense fallback={null}>
+            <AnomalyConfigPanel context={context} />
+          </Suspense>
+        );
       },
     }),
   ],