@checkstack/anomaly-frontend 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,219 @@
 # @checkstack/anomaly-frontend
 
+## 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
+
+- Updated dependencies [a914b31]
+- Updated dependencies [ac1e5d4]
+- Updated dependencies [208ad71]
+  - @checkstack/healthcheck-frontend@0.18.0
+  - @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/catalog-common@1.5.3
+  - @checkstack/ui@1.6.1
+
 ## 0.2.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/anomaly-frontend",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,14 +12,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "0.1.0",
-    "@checkstack/catalog-common": "1.5.1",
-    "@checkstack/common": "0.6.5",
-    "@checkstack/frontend-api": "0.3.10",
-    "@checkstack/healthcheck-common": "0.11.0",
-    "@checkstack/healthcheck-frontend": "0.16.5",
-    "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.1",
+    "@checkstack/anomaly-common": "0.3.0",
+    "@checkstack/catalog-common": "1.5.3",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/frontend-api": "0.4.0",
+    "@checkstack/healthcheck-common": "0.13.0",
+    "@checkstack/healthcheck-frontend": "0.18.0",
+    "@checkstack/notification-common": "0.3.0",
+    "@checkstack/notification-frontend": "0.2.36",
+    "@checkstack/signal-frontend": "0.1.0",
+    "@checkstack/ui": "1.6.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.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,
+);