@checkstack/anomaly-frontend 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,316 @@
 # @checkstack/anomaly-frontend
 
+## 0.3.1
+
+### Patch Changes
+
+- 50e5f5f: Runtime plugin system: install + uninstall plugins from npm, GitHub releases
+  (including private GitHub Enterprise instances), or tarball uploads at
+  runtime, with multi-package bundles, dependency-derived compatibility checks,
+  multi-instance coordination via a Postgres artifact store, and
+  single-coordinator destructive cleanup.
+
+  Highlights:
+
+  - New `PluginSource` discriminated union and `PluginInstaller` /
+    `PluginInstallerRegistry` interfaces in `@checkstack/backend-api`. The
+    GitHub variant accepts an optional `apiBaseUrl` so deployments backed by
+    GitHub Enterprise can install from `https://ghe.example.com/api/v3`
+    instead of `api.github.com`.
+  - New `installPackageMetadataSchema` (Zod) in `@checkstack/common` validates
+    every plugin's `package.json` at install time. Required fields: `name`,
+    `version`, `description`, `author`, `license`, `checkstack.type`,
+    `checkstack.pluginId`. Optional: `checkstack.bundle`,
+    `checkstack.usageInstructions`, `checkstack.allowInstallScripts`.
+  - New `pluginManagerContract` in `@checkstack/pluginmanager-common` with
+    `list`, `previewInstall`, `install`, `previewUninstall`, `uninstall`, and
+    `events` procedures.
+  - New `@checkstack/pluginmanager-frontend` admin UI: installed-plugins list
+    with per-row uninstall (typed-confirmation modal, schema/configs/cascade
+    toggles), install page with NPM / Tarball Upload / GitHub Release tabs
+    (Catalog tab disabled — coming soon), and an events page surfacing the
+    install/uninstall audit log.
+  - New `bunx @checkstack/scripts plugin-pack` CLI for plugin authors —
+    per-package mode produces an npm-shaped tarball; `--bundle` mode produces
+    an outer tarball containing every sibling declared in
+    `package.json#checkstack.bundle`. Published to npm so external authors
+    can `bunx` it directly without a workspace checkout.
+  - Compatibility derived from `package.json#dependencies` ranges
+    (`semver.satisfies` against the platform's loaded `@checkstack/*`
+    versions) — no separate `compatibility` field.
+  - Multi-instance: originator persists artifacts + `plugins` rows + broadcasts
+    install/uninstall; receiving instances do in-process register/unregister
+    only. Destructive ops (drop schema, delete plugin_configs, delete
+    artifacts, delete `plugins` rows) run exactly once on the originator.
+  - Fresh-instance bootstrap: `loadPlugins()` hydrates any
+    `is_uninstallable=true` plugin missing from `node_modules` from the
+    artifact store before normal Phase 1 register.
+  - New schema: `plugin_artifacts` (tarball storage), `plugin_install_events`
+    (audit/error log). `plugins` extended with `version`, `metadata`,
+    `source`, `bundle_id`, `is_primary`. Local plugin sync now writes
+    `version` from each plugin's `package.json` so the admin UI shows real
+    versions instead of `—`.
+  - Tarball-upload endpoint (`POST /api/pluginmanager/upload-tarball`) for
+    the install UI; access-gated by `pluginmanager.plugin.manage`.
+  - Plugin Manager menu link added to the user menu (main grid, alongside
+    Profile / Notification Settings / etc.).
+
+  Cross-cutting changes:
+
+  - Backend request/response logging now flows through `rootLogger` (winston)
+    instead of `hono/logger`. 5xx responses include the response body inline
+    so swallowed early-return errors are visible in the log.
+  - The `/api/:pluginId/*` dispatcher now logs which core service is missing
+    or which `pluginId` had no metadata when it 500s.
+  - New `registerCorePluginMetadata` on `PluginManager` for core routers
+    (like the plugin manager itself) that need their metadata visible to the
+    RPC dispatcher without going through the full plugin lifecycle.
+  - ESLint: `unicorn/no-null` is now disabled globally. Drizzle distinguishes
+    between `null` (writes a real SQL NULL) and `undefined` (skip the column
+    on insert), so treating them as interchangeable produced latent bugs at
+    the persistence boundary. The bulk of the patch-bumped packages above
+    reflect lint-fix touches that landed when this rule was relaxed.
+  - Workspace-wide license normalization to `Elastic-2.0` (matches
+    `LICENSE.md`). Every `package.json` in the workspace now declares the
+    same SPDX identifier; the patch bumps capture this.
+
+  Plugin packages (every `plugins/*`): added a `pack` npm script
+  (`bunx @checkstack/scripts plugin-pack`), mirrored each plugin's
+  `pluginId` from `plugin-metadata.ts` into `package.json#checkstack.pluginId`
+  so install-time validation passes, stubbed any missing required metadata
+  fields (`description`, `author`, `license`), and added
+  `checkstack.bundle` to multi-package plugin primaries (telegram, rcon, ssh,
+  jira, queue-bullmq, queue-memory, cache-memory).
+
+  Breaking changes:
+
+  - The legacy single-method `PluginInstaller` interface (`install(packageName)`)
+    is removed. Callers must use `coreServices.pluginInstallerRegistry`.
+  - The old `pluginAdminContract` and `createPluginAdminRouter` are removed.
+    Replaced by `pluginManagerContract` in `@checkstack/pluginmanager-common`
+    and `createPluginManagerRouter` in `core/backend`.
+  - `@checkstack/test-utils-backend` no longer exports
+    `createMockPluginInstaller` / `MockPluginInstaller` (the legacy interface
+    it shimmed is gone).
+
+  Note: bumps are limited to `minor` (for packages with new public API
+  surface) and `patch` (for downstream consumers, license normalization,
+  and lint fixes). No `major` bumps despite the `PluginInstaller` removal —
+  the legacy interface had no third-party consumers in the wild before this
+  runtime plugin system landed, and the contract surface is the same shape
+  modulo the rename.
+
+- Updated dependencies [50e5f5f]
+  - @checkstack/catalog-common@2.0.1
+  - @checkstack/common@0.8.0
+  - @checkstack/healthcheck-frontend@0.18.2
+  - @checkstack/notification-frontend@0.3.1
+  - @checkstack/signal-frontend@0.1.1
+  - @checkstack/ui@1.7.1
+  - @checkstack/anomaly-common@1.0.1
+  - @checkstack/frontend-api@0.4.2
+  - @checkstack/healthcheck-common@1.0.1
+  - @checkstack/notification-common@1.0.1
+
+## 0.3.0
+
+### Minor Changes
+
+- 32d52c6: feat(anomaly): per-system and per-field notification mute
+
+  Anomaly notifications now flow through their own subscription group
+  (`anomaly.system.<systemId>`) instead of the shared catalog system group, so
+  users can opt out of anomaly noise without losing incident or healthcheck
+  alerts for the same system. On first deploy, existing subscribers of each
+  `catalog.system.<id>` group are seeded onto the new anomaly group so no one
+  silently stops getting alerts.
+
+  A new mute table (`anomaly_notification_mutes`) backs two granularities:
+
+  - **Per-field**: silence a single noisy metric on one system.
+  - **Per-system**: silence every anomaly for one system in one click.
+
+  The system anomaly widget now exposes a bell icon on each anomaly row plus a
+  `Mute all` toggle in the card header. Mutes are user-scoped and persist
+  across sessions.
+
+  Catalog gains a `systemCreated` hook so anomaly (and any future plugin) can
+  provision per-system state on creation rather than waiting for a restart.
+  The notification service gains a `bulkSubscribe` service-RPC used by the
+  one-time migration described above.
+
+- 32d52c6: feat: unified notification-subscription manager dialog driven by spec registry
+
+  Replaces the bell-toggle UX (which only managed a single legacy
+  catalog group) with a modal that lists every notification type
+  registered against a target — system or group — and exposes both
+  per-type toggles and a bulk "Subscribe to all / Unsubscribe from all"
+  action. Both surfaces (system detail page header bell, dashboard group
+  header bell) now open the same `NotificationSubscriptionsManager`
+  component.
+
+  **Key change vs. the prior slot-based approach**: rows are now driven
+  by `notificationClient.listSubscriptionSpecs` — the backend's spec
+  registry is the single source of truth. Previously, a row only
+  appeared if a frontend plugin had remembered to register a
+  `createNotificationSubscriptionExtension`; this caused silent drift
+  (healthcheck and dependency registered backend specs without frontend
+  extensions, so the dialog counted them but never rendered rows). Now,
+  every spec the platform knows about renders a row using the spec's
+  `display` metadata (title, description, iconName resolved via
+  `DynamicIcon`).
+
+  **Sub-controls registry** (`@checkstack/notification-frontend`):
+  plugins that want sub-granularity (anomaly's per-field mute list,
+  future severity / channel filters) call
+  `registerSubscriptionSubControls(spec, Component)` at module load —
+  the manager looks the component up by `specId` when expanding a row.
+
+  **Removed (no compat)**:
+
+  - `createNotificationSubscriptionExtension` (replaced by the
+    spec-driven manager + the SubControls registry)
+  - `target.slot` field on `NotificationTarget` and the
+    `NotificationTargetInput.slot` parameter on
+    `defineNotificationTarget`
+  - `SystemNotificationSubscriptionsSlot` and
+    `GroupNotificationSubscriptionsSlot` from `@checkstack/catalog-common`
+  - `SystemNotificationsCard` from the system detail page's main column
+  - `SubscribeButton` wiring on dashboard group cards and the system
+    detail page header
+
+  **Migrated frontends**: anomaly (now registers `AnomalyFieldMuteList`
+  via the SubControls registry), incident, maintenance — all dropped
+  their `createNotificationSubscriptionExtension` calls. healthcheck and
+  dependency now show up automatically via the spec registry — no
+  frontend changes needed for them to render.
+
+  The trigger button reflects aggregate state — filled bell when at
+  least one spec is subscribed for the resource, ghost bell when none.
+
+- 32d52c6: feat: notification target pattern + per-spec subscriptions
+
+  Replaces the all-or-nothing catalog system/group notification model with a
+  platform-level target pattern. Each notification-emitting plugin declares
+  _subscription specs_ against typed _target_ objects exported from the
+  target's owning plugin (catalog ships `catalogSystemTarget` and
+  `catalogGroupTarget`). Notification-backend handles every per-resource
+  group lifecycle, parent-edge inheritance, and legacy-subscription seeding
+  — plugins never author groupId helpers, lifecycle hooks, or migration
+  code again.
+
+  **Plugin-author surface area is now ~12 lines per emitter:**
+
+  ```ts
+  // <plugin>-common
+  const { defineSubscription } = createSubscriptionFactory(pluginMetadata);
+  export const fooSystemSubscription = defineSubscription({
+    localId: "system",
+    target: catalogSystemTarget,
+    display: { title: "Foo Alerts", description: "...", iconName: "Bell" },
+  });
+
+  // <plugin>-backend register()
+  env.registerSubscriptionSpecs([fooSystemSubscription]);
+  //   ^ feeds the plugin loader's dependency sorter — each spec's
+  //     target.ownerPlugin becomes an implicit init-order dep, so this
+  //     plugin automatically waits for catalog (the target owner) to
+  //     finish init + afterPluginsReady before its own runs.
+
+  // <plugin>-backend afterPluginsReady
+  await notificationClient.registerSubscriptionSpec(
+    specToRegistration(fooSystemSubscription)
+  );
+  // dispatch
+  await notificationClient.notifyForSubscription({
+    specId: fooSystemSubscription.specId,
+    resourceKeys: [systemId],
+    title,
+    body,
+    importance,
+    action,
+    collapseKey,
+    subjects,
+  });
+
+  // <plugin>-frontend
+  createNotificationSubscriptionExtension({ spec: fooSystemSubscription });
+  ```
+
+  **Migrated plugins**: anomaly, incident, maintenance, healthcheck,
+  dependency. Each lost its bespoke `notification-groups.ts`,
+  `bootstrap*NotificationGroups`, `ensure*Group`, and inheritance walk —
+  all of that is now centralized in notification-backend's
+  `subscription-engine`.
+
+  **Plugin loader change** (`@checkstack/backend-api`,
+  `@checkstack/backend`): the register-time API gains
+  `env.registerSubscriptionSpecs([...specs])`. The dependency sorter
+  walks `spec.target.ownerPlugin` for every declared spec and adds the
+  target owner as an init-order dependency of the emitting plugin. This
+  guarantees that catalog (the owner of the platform's `system` and
+  `group` targets) completes init + afterPluginsReady before any
+  emitting plugin tries to register its specs against the notification
+  service — no string-prefix heuristics, no manual `dependsOnPlugins`
+  list, no stub rows. Plugins that fail to declare their specs at
+  register time get a clear `Target type X is not registered. Did the
+emitting plugin declare this spec via env.registerSubscriptionSpecs?`
+  error from the dispatcher.
+
+  **Removed** (no backwards compat):
+
+  - `catalogClient.notifySystemSubscribers` and
+    `catalogClient.notifyManySystemSubscribers`
+  - `notificationClient.notifyUsers` and `notificationClient.notifyGroups`
+    as direct dispatch primitives — replaced by spec-bound
+    `notifyForSubscription`
+  - catalog's `bootstrapNotificationGroups` (replaced by
+    `bootstrapNotificationTargets`)
+
+  **Enforcement**: the dispatcher rejects calls referencing unregistered
+  specIds, specs owned by other plugins, or resourceKeys that haven't been
+  pushed via `upsertNotificationResource`. Display metadata for any
+  groupId is recoverable via the spec registry, so audit lists render
+  correct labels even when an emitter's frontend isn't loaded.
+
+  **Per-field anomaly mute** keeps working — it now lives inside the
+  generic SubscriptionRow's optional `SubControls` panel
+  (`AnomalyFieldMuteList`), exposed through the catalog system detail
+  page's notifications card.
+
+  The catalog system detail page renders a "Notifications" card hosting
+  `SystemNotificationSubscriptionsSlot`. The matching group surface is
+  not yet rendered — group-level subscriptions are wired end-to-end on
+  the backend; a follow-up will add the host UI.
+
+  **Migration of existing subscribers**: target types declare a
+  `legacyGroupIdTemplate`; on first registration of each spec,
+  notification-backend reads subscribers from the legacy
+  `catalog.system.<id>` / `catalog.group.<id>` groups and seeds the new
+  spec groups exactly once per (spec × resource) pair, tracked in
+  `subscription_migrations`. Anomaly stays opt-in (its target also
+  declares the template, but the user-explicit nature of the original
+  opt-in flow means the seeding produces the same set of subscribers
+  they already had).
+
+### Patch Changes
+
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+  - @checkstack/anomaly-common@1.0.0
+  - @checkstack/notification-common@1.0.0
+  - @checkstack/notification-frontend@0.3.0
+  - @checkstack/catalog-common@2.0.0
+  - @checkstack/healthcheck-common@1.0.0
+  - @checkstack/frontend-api@0.4.1
+  - @checkstack/ui@1.7.0
+  - @checkstack/healthcheck-frontend@0.18.1
+
 ## 0.2.2
 
 ### Patch Changes

package/package.json

@@ -1,25 +1,28 @@
 {
   "name": "@checkstack/anomaly-frontend",
-  "version": "0.2.2",
+  "version": "0.3.1",
+  "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
     "type": "frontend"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsgo -b",
     "lint": "bun run lint:code",
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "0.2.0",
-    "@checkstack/catalog-common": "1.5.2",
+    "@checkstack/anomaly-common": "1.0.0",
+    "@checkstack/catalog-common": "2.0.0",
     "@checkstack/common": "0.7.0",
-    "@checkstack/frontend-api": "0.3.11",
-    "@checkstack/healthcheck-common": "0.12.0",
-    "@checkstack/healthcheck-frontend": "0.17.1",
-    "@checkstack/signal-frontend": "0.0.16",
-    "@checkstack/ui": "1.6.0",
+    "@checkstack/frontend-api": "0.4.1",
+    "@checkstack/healthcheck-common": "1.0.0",
+    "@checkstack/healthcheck-frontend": "0.18.1",
+    "@checkstack/notification-common": "1.0.0",
+    "@checkstack/notification-frontend": "0.3.0",
+    "@checkstack/signal-frontend": "0.1.0",
+    "@checkstack/ui": "1.7.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
@@ -28,7 +31,7 @@
   },
   "devDependencies": {
     "@checkstack/scripts": "0.1.2",
-    "@checkstack/tsconfig": "0.0.5",
+    "@checkstack/tsconfig": "0.0.6",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0"
   }

package/src/components/AnomalyFieldMuteList.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { Bell, BellOff } from "lucide-react";
+import { Button, useToast } from "@checkstack/ui";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { AnomalyApi } from "@checkstack/anomaly-common";
+import { extractErrorMessage } from "@checkstack/common";
+
+/**
+ * Sub-controls panel rendered inside the generic SubscriptionRow when a
+ * user is reachable for `anomaly.system`. Lists the system's currently
+ * tracked anomaly fields with per-field mute toggles. Mutes survive
+ * unsubscribe (they're a separate per-(systemId, fieldPath) record).
+ *
+ * The list is built from existing baselines + active anomalies — fields
+ * the user has never seen activity on aren't shown to avoid an
+ * unbounded picker. A user who needs to mute proactively can do it from
+ * the inline bell button on each anomaly row in the system widget.
+ */
+export const AnomalyFieldMuteList: React.FC<{
+  resource: { systemId: string };
+}> = ({ resource }) => {
+  const { systemId } = resource;
+  const anomalyClient = usePluginClient(AnomalyApi);
+  const toast = useToast();
+
+  const { data: anomalies = [] } = anomalyClient.getAnomalies.useQuery(
+    { systemId, limit: 50 },
+    { staleTime: 30_000 },
+  );
+
+  const { data: mutes = [], refetch: refetchMutes } =
+    anomalyClient.listAnomalyNotificationMutes.useQuery(
+      { systemId },
+      { staleTime: 30_000 },
+    );
+
+  const mutedFields = React.useMemo(
+    () => new Set(mutes.map((m) => m.fieldPath)),
+    [mutes],
+  );
+  const isSystemMuted = mutedFields.has("");
+
+  const muteMutation = anomalyClient.muteAnomalyNotification.useMutation({
+    onSuccess: () => void refetchMutes(),
+    onError: (error) =>
+      toast.error(extractErrorMessage(error, "Failed to mute notifications")),
+  });
+  const unmuteMutation = anomalyClient.unmuteAnomalyNotification.useMutation({
+    onSuccess: () => void refetchMutes(),
+    onError: (error) =>
+      toast.error(extractErrorMessage(error, "Failed to unmute notifications")),
+  });
+
+  const isPending = muteMutation.isPending || unmuteMutation.isPending;
+
+  // Distinct fieldPaths from anomalies so the list reflects what the user
+  // would actually be paged about. Plus any explicitly muted fields,
+  // because the user should still see and be able to unmute them.
+  const fieldPaths = React.useMemo(() => {
+    const set = new Set<string>();
+    for (const a of anomalies) set.add(a.fieldPath);
+    for (const fp of mutedFields) if (fp !== "") set.add(fp);
+    return [...set].toSorted();
+  }, [anomalies, mutedFields]);
+
+  const handleToggle = (fieldPath: string, currentlyMuted: boolean) => {
+    if (currentlyMuted) {
+      unmuteMutation.mutate({ systemId, fieldPath });
+    } else {
+      muteMutation.mutate({ systemId, fieldPath });
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">
+          Mute the entire system or just specific fields. Mutes persist
+          across re-subscribes.
+        </span>
+        <Button
+          type="button"
+          variant={isSystemMuted ? "outline" : "primary"}
+          size="sm"
+          className="h-6 px-2 text-[11px] gap-1"
+          disabled={isPending}
+          onClick={() => handleToggle("", isSystemMuted)}
+        >
+          {isSystemMuted ? (
+            <>
+              <BellOff className="h-3 w-3" /> System muted
+            </>
+          ) : (
+            <>
+              <Bell className="h-3 w-3" /> Mute system
+            </>
+          )}
+        </Button>
+      </div>
+
+      {fieldPaths.length === 0 ? (
+        <div className="text-xs text-muted-foreground italic">
+          No tracked fields yet — mute will become available once anomalies
+          are observed.
+        </div>
+      ) : (
+        <div className="flex flex-col divide-y rounded-md border">
+          {fieldPaths.map((fp) => {
+            const muted = mutedFields.has(fp) || isSystemMuted;
+            return (
+              <div
+                key={fp}
+                className="flex items-center justify-between px-3 py-1.5 text-xs"
+              >
+                <span className="font-mono truncate">{fp}</span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  disabled={isPending || isSystemMuted}
+                  title={muted ? "Unmute this field" : "Mute this field"}
+                  onClick={() =>
+                    handleToggle(fp, mutedFields.has(fp))
+                  }
+                >
+                  {muted ? (
+                    <BellOff className="h-3 w-3" />
+                  ) : (
+                    <Bell className="h-3 w-3" />
+                  )}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/SystemAnomalyWidget.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { SystemDetailsSlot } from "@checkstack/catalog-common";
-import { AnomalyApi, type AnomalyDto } from "@checkstack/anomaly-common";
+import {
+  AnomalyApi,
+  type AnomalyDto,
+} from "@checkstack/anomaly-common";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
 import {
@@ -10,8 +13,20 @@ import {
   CardTitle,
   CardContent,
   Badge,
+  Button,
+  useToast,
 } from "@checkstack/ui";
-import { Activity, AlertTriangle, HelpCircle, TrendingUp, TrendingDown, ArrowRight, LineChart } from "lucide-react";
+import {
+  Activity,
+  AlertTriangle,
+  HelpCircle,
+  TrendingUp,
+  TrendingDown,
+  ArrowRight,
+  LineChart,
+  Bell,
+  BellOff,
+} from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import { Link } from "react-router-dom";
 
@@ -75,14 +90,12 @@ function humanizeFieldName(name: string): string {
     .join(" ");
 }
 
-/** Convert strategy + collector into a readable source label */
 function humanizeCollectorSource(strategyId: string, collectorId: string): string {
-  // Strip "healthcheck-" prefix if present
   const cleanStrategy = strategyId.replace(/^healthcheck-/, "").toUpperCase();
 
   if (collectorId) {
     const cleanCollector = collectorId
-      .split(" ")
+      .split("-")
       .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
       .join(" ");
     return `${cleanStrategy} · ${cleanCollector}`;
@@ -95,7 +108,19 @@ function humanizeCollectorSource(strategyId: string, collectorId: string): strin
 // Anomaly Row Component
 // ─────────────────────────────────────────────────────────────────────────────
 
-function AnomalyRow({ anomaly, systemId }: { anomaly: AnomalyDto; systemId: string }) {
+function AnomalyRow({
+  anomaly,
+  systemId,
+  isMuted,
+  onToggleMute,
+  isToggling,
+}: {
+  anomaly: AnomalyDto;
+  systemId: string;
+  isMuted: boolean;
+  onToggleMute: (fieldPath: string, isMuted: boolean) => void;
+  isToggling: boolean;
+}) {
   const isSuspicious = anomaly.state === "suspicious";
   const isDrift = anomaly.kind === "drift";
   const parsed = parseFieldPath(anomaly.fieldPath);
@@ -133,16 +158,22 @@ function AnomalyRow({ anomaly, systemId }: { anomaly: AnomalyDto; systemId: stri
           <span className="text-sm font-medium truncate">
             {parsed.label}
           </span>
-          {parsed.source && (
+          {parsed.source ? (
             <span className="text-[10px] text-muted-foreground bg-muted/80 px-1.5 py-0.5 rounded font-medium shrink-0">
               {parsed.source}
             </span>
-          )}
+          ) : undefined}
           {isDrift && (
             <span className="text-[10px] text-muted-foreground bg-muted/40 px-1.5 py-0.5 rounded font-medium shrink-0">
               drift
             </span>
           )}
+          {isMuted && (
+            <span className="text-[10px] text-muted-foreground bg-muted/60 px-1.5 py-0.5 rounded font-medium shrink-0 inline-flex items-center gap-0.5">
+              <BellOff className="h-2.5 w-2.5" />
+              muted
+            </span>
+          )}
         </div>
         <div className="flex items-center gap-2 mt-0.5 text-xs text-muted-foreground">
           {isDrift ? (
@@ -168,7 +199,7 @@ function AnomalyRow({ anomaly, systemId }: { anomaly: AnomalyDto; systemId: stri
         </div>
       </div>
 
-      {/* Deviation badge + arrow */}
+      {/* Deviation badge + mute toggle + arrow */}
       <div className="flex items-center gap-2 shrink-0">
         <Badge
           variant={isSuspicious ? "outline" : "warning"}
@@ -183,6 +214,29 @@ function AnomalyRow({ anomaly, systemId }: { anomaly: AnomalyDto; systemId: stri
           )}
           {deviationValue}σ
         </Badge>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 text-muted-foreground hover:text-foreground"
+          disabled={isToggling}
+          title={
+            isMuted
+              ? "Unmute notifications for this field"
+              : "Mute notifications for this field"
+          }
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggleMute(anomaly.fieldPath, isMuted);
+          }}
+        >
+          {isMuted ? (
+            <BellOff className="h-3.5 w-3.5" />
+          ) : (
+            <Bell 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>
@@ -195,6 +249,7 @@ function AnomalyRow({ anomaly, systemId }: { anomaly: AnomalyDto; systemId: stri
 
 export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
   const anomalyClient = usePluginClient(AnomalyApi);
+  const toast = useToast();
 
   // Fetch only active anomalies — exclude recovered ones.
   // Two queries with React Query deduplication: confirmed anomalies + suspicious.
@@ -210,6 +265,44 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
       { staleTime: 30_000 },
     );
 
+  const { data: mutes = [], refetch: refetchMutes } =
+    anomalyClient.listAnomalyNotificationMutes.useQuery(
+      { systemId: system.id },
+      { staleTime: 30_000 },
+    );
+
+  const mutedFields = React.useMemo(
+    () => new Set(mutes.map((m) => m.fieldPath)),
+    [mutes],
+  );
+  const isSystemMuted = mutedFields.has("");
+
+  const muteMutation = anomalyClient.muteAnomalyNotification.useMutation({
+    onSuccess: () => {
+      void refetchMutes();
+    },
+    onError: () => {
+      toast.error("Failed to mute notifications");
+    },
+  });
+
+  const unmuteMutation = anomalyClient.unmuteAnomalyNotification.useMutation({
+    onSuccess: () => {
+      void refetchMutes();
+    },
+    onError: () => {
+      toast.error("Failed to unmute notifications");
+    },
+  });
+
+  const handleToggleMute = (fieldPath: string, currentlyMuted: boolean) => {
+    if (currentlyMuted) {
+      unmuteMutation.mutate({ systemId: system.id, fieldPath });
+    } else {
+      muteMutation.mutate({ systemId: system.id, fieldPath });
+    }
+  };
+
   const isLoading = loadingConfirmed || loadingSuspicious;
 
   // Confirmed anomalies first, then suspicious
@@ -240,6 +333,8 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
   const confirmedCount = confirmedAnomalies.length;
   const suspiciousCount = suspiciousAnomalies.length;
 
+  const isToggling = muteMutation.isPending || unmuteMutation.isPending;
+
   return (
     <Card>
       <CardHeader>
@@ -264,6 +359,31 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
                 {suspiciousCount}
               </Badge>
             )}
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-[11px] gap-1"
+              disabled={isToggling}
+              title={
+                isSystemMuted
+                  ? "Resume anomaly notifications for this system"
+                  : "Stop receiving any anomaly notifications for this system"
+              }
+              onClick={() => handleToggleMute("", isSystemMuted)}
+            >
+              {isSystemMuted ? (
+                <>
+                  <BellOff className="h-3 w-3" />
+                  Muted
+                </>
+              ) : (
+                <>
+                  <Bell className="h-3 w-3" />
+                  Mute all
+                </>
+              )}
+            </Button>
           </div>
         </div>
       </CardHeader>
@@ -274,6 +394,9 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
               key={anomaly.id}
               anomaly={anomaly}
               systemId={system.id}
+              isMuted={isSystemMuted || mutedFields.has(anomaly.fieldPath)}
+              onToggleMute={handleToggleMute}
+              isToggling={isToggling}
             />
           ))}
         </div>

package/src/plugin.tsx

@@ -1,18 +1,24 @@
 import { definePluginMetadata } from "@checkstack/common";
 import { FrontendPlugin, createSlotExtension } from "@checkstack/frontend-api";
-import { 
-  AssignmentIDENodeSlot, 
-  AssignmentIDEPanelSlot, 
+import {
+  AssignmentIDENodeSlot,
+  AssignmentIDEPanelSlot,
   HealthCheckConfigIDENodeSlot,
   HealthCheckConfigIDEPanelSlot,
   type AssignmentIDEContext,
   type HealthCheckConfigIDEContext
 } from "@checkstack/healthcheck-frontend";
-import { SystemStateBadgesSlot, SystemDetailsSlot } from "@checkstack/catalog-common";
+import {
+  SystemStateBadgesSlot,
+  SystemDetailsSlot,
+} 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";
 
@@ -76,3 +82,13 @@ export const plugin: FrontendPlugin = {
     }),
   ],
 };
+
+// Sub-control panel for the per-system anomaly subscription — registered
+// once at module load so the notification dialog renders the per-field
+// mute list inline below the row when the user expands it. The dialog
+// itself is driven by the backend spec registry; no slot extension to
+// declare here.
+registerSubscriptionSubControls(
+  anomalySystemSubscription,
+  AnomalyFieldMuteList,
+);

package/tsconfig.json

@@ -5,5 +5,37 @@
   },
   "include": [
     "src"
+  ],
+  "references": [
+    {
+      "path": "../anomaly-common"
+    },
+    {
+      "path": "../catalog-common"
+    },
+    {
+      "path": "../common"
+    },
+    {
+      "path": "../frontend-api"
+    },
+    {
+      "path": "../healthcheck-common"
+    },
+    {
+      "path": "../healthcheck-frontend"
+    },
+    {
+      "path": "../notification-common"
+    },
+    {
+      "path": "../notification-frontend"
+    },
+    {
+      "path": "../signal-frontend"
+    },
+    {
+      "path": "../ui"
+    }
   ]
 }