@checkstack/anomaly-frontend 0.2.0

package/src/components/AnomalySettingsForm.tsx

@@ -0,0 +1,211 @@
+import { Label, Toggle, Slider } from "@checkstack/ui";
+import type {
+  AnomalyDirection,
+  AnomalyFieldConfig,
+} from "@checkstack/anomaly-common";
+import { AnomalyFieldOverridesEditor } from "./AnomalyFieldOverridesEditor";
+import type { AnomalyFieldMeta } from "./useAnomalyFields";
+
+export interface AnomalySettingsFormValues {
+  enabled: boolean;
+  sensitivity: number;
+  confirmationWindow: number;
+  driftEnabled: boolean;
+  driftThreshold: number;
+  fieldOverrides: Record<string, AnomalyFieldConfig>;
+}
+
+export interface AnomalySettingsFormProps {
+  values: AnomalySettingsFormValues;
+  onChange: <K extends keyof AnomalySettingsFormValues>(
+    key: K,
+    value: AnomalySettingsFormValues[K],
+  ) => void;
+  availableFields: AnomalyFieldMeta[];
+  isLocked?: boolean;
+  /** Copy variant — template defaults vs assignment overrides. */
+  variant: "template" | "assignment";
+}
+
+const COPY = {
+  template: {
+    enabledLabel: "Enable Anomaly Detection by Default",
+    enabledDescription:
+      "Run background analysis to detect deviations from expected behavior across all systems using this template.",
+    sensitivityLabel: "Global Sensitivity Multiplier",
+    confirmationLabel: "Confirmation Window",
+    fieldOverridesTitle: "Global Field-Level Defaults",
+    fieldOverridesDescription:
+      "Set default anomaly behavior for specific metrics collected by this health check.",
+  },
+  assignment: {
+    enabledLabel: "Enable Assignment Exceptions",
+    enabledDescription: "Run background analysis for this specific system",
+    sensitivityLabel: "Sensitivity Multiplier Override",
+    confirmationLabel: "Confirmation Window Override",
+    fieldOverridesTitle: "Field-Level Overrides",
+    fieldOverridesDescription:
+      "Override anomaly settings for specific metrics collected by this health check.",
+  },
+} as const;
+
+export function AnomalySettingsForm({
+  values,
+  onChange,
+  availableFields,
+  isLocked,
+  variant,
+}: AnomalySettingsFormProps) {
+  const copy = COPY[variant];
+  const {
+    enabled,
+    sensitivity,
+    confirmationWindow,
+    driftEnabled,
+    driftThreshold,
+    fieldOverrides,
+  } = values;
+
+  const handleFieldOverrideChange = (
+    field: string,
+    key: keyof AnomalyFieldConfig,
+    value: number | boolean | AnomalyDirection | undefined,
+  ) => {
+    const next = { ...fieldOverrides };
+    next[field] = { ...next[field], [key]: value };
+    onChange("fieldOverrides", next);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between p-4 border rounded-md">
+        <div className="space-y-0.5">
+          <Label className="text-base font-medium">{copy.enabledLabel}</Label>
+          <div className="text-sm text-muted-foreground">{copy.enabledDescription}</div>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-sm font-medium">{enabled ? "Enabled" : "Disabled"}</span>
+          <Toggle
+            checked={enabled}
+            onCheckedChange={(val) => onChange("enabled", val)}
+            disabled={isLocked}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 p-4 border rounded-md">
+        <div className="space-y-2">
+          <Label htmlFor="sensitivity">{copy.sensitivityLabel}</Label>
+          <div className="pt-4 pb-2 px-1">
+            <Slider
+              id="sensitivity"
+              value={[sensitivity]}
+              min={0.5}
+              max={3}
+              step={0.1}
+              onValueChange={(val) => onChange("sensitivity", val[0])}
+              disabled={!enabled || isLocked}
+            />
+          </div>
+          <div className="flex justify-between items-center text-[10px] font-mono text-muted-foreground pt-1">
+            <span>0.5 (More)</span>
+            <span className="font-semibold text-foreground bg-muted px-1.5 py-0.5 rounded">
+              {sensitivity.toFixed(1)}x
+            </span>
+            <span>3.0 (Fewer)</span>
+          </div>
+          {variant === "template" && (
+            <p className="text-xs text-muted-foreground pt-2">
+              Higher multiplier = wider expected range (fewer alerts).
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="confirmationWindow">{copy.confirmationLabel}</Label>
+          <div className="pt-4 pb-2 px-1">
+            <Slider
+              id="confirmationWindow"
+              value={[confirmationWindow]}
+              min={1}
+              max={10}
+              step={1}
+              onValueChange={(val) => onChange("confirmationWindow", val[0])}
+              disabled={!enabled || isLocked}
+            />
+          </div>
+          <div className="flex justify-between items-center text-[10px] font-mono text-muted-foreground pt-1">
+            <span>1 Run</span>
+            <span className="font-semibold text-foreground bg-muted px-1.5 py-0.5 rounded">
+              {confirmationWindow} Runs
+            </span>
+            <span>10 Runs</span>
+          </div>
+          {variant === "template" && (
+            <p className="text-xs text-muted-foreground pt-2">
+              Number of consecutive anomalous runs required before an alert is triggered.
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 p-4 border rounded-md">
+        <div className="flex items-center justify-between md:col-span-2">
+          <div className="space-y-0.5">
+            <Label className="text-base font-medium">Trend Drift Detection</Label>
+            <div className="text-sm text-muted-foreground">
+              Catch slow, gradual degradation that never triggers a spike alert.
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium">{driftEnabled ? "Enabled" : "Disabled"}</span>
+            <Toggle
+              checked={driftEnabled}
+              onCheckedChange={(val) => onChange("driftEnabled", val)}
+              disabled={!enabled || isLocked}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2 md:col-span-2">
+          <Label htmlFor="driftThreshold">Drift Threshold (σ)</Label>
+          <div className="pt-4 pb-2 px-1">
+            <Slider
+              id="driftThreshold"
+              value={[driftThreshold]}
+              min={1}
+              max={4}
+              step={0.1}
+              onValueChange={(val) => onChange("driftThreshold", val[0])}
+              disabled={!enabled || !driftEnabled || isLocked}
+            />
+          </div>
+          <div className="flex justify-between items-center text-[10px] font-mono text-muted-foreground pt-1">
+            <span>1.0σ (More)</span>
+            <span className="font-semibold text-foreground bg-muted px-1.5 py-0.5 rounded">
+              {driftThreshold.toFixed(1)}σ
+            </span>
+            <span>4.0σ (Fewer)</span>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Drift fires when the projected change over the baseline window exceeds this many standard deviations.
+          </p>
+        </div>
+      </div>
+
+      <AnomalyFieldOverridesEditor
+        title={copy.fieldOverridesTitle}
+        description={copy.fieldOverridesDescription}
+        availableFields={availableFields}
+        fieldOverrides={fieldOverrides}
+        onChange={handleFieldOverrideChange}
+        parentEnabled={enabled}
+        isLocked={isLocked}
+        defaultSensitivity={sensitivity}
+        defaultConfirmationWindow={confirmationWindow}
+        defaultDriftEnabled={driftEnabled}
+        defaultDriftThreshold={driftThreshold}
+      />
+    </div>
+  );
+}

package/src/components/AnomalyTemplatePanel.tsx

@@ -0,0 +1,133 @@
+import { useState, useEffect } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+  useToast,
+} from "@checkstack/ui";
+import { Activity, Save } from "lucide-react";
+import type { HealthCheckConfigIDEContext } from "@checkstack/healthcheck-frontend";
+import { usePluginClient } from "@checkstack/frontend-api";
+import {
+  AnomalyApi,
+  type AnomalyFieldConfig,
+} from "@checkstack/anomaly-common";
+import { useAnomalyFields } from "./useAnomalyFields";
+import {
+  AnomalySettingsForm,
+  type AnomalySettingsFormValues,
+} from "./AnomalySettingsForm";
+
+const DEFAULT_VALUES: AnomalySettingsFormValues = {
+  enabled: true,
+  sensitivity: 1,
+  confirmationWindow: 3,
+  driftEnabled: true,
+  driftThreshold: 2,
+  fieldOverrides: {},
+};
+
+export function AnomalyTemplatePanel({ context }: { context: HealthCheckConfigIDEContext }) {
+  const toast = useToast();
+  const anomalyClient = usePluginClient(AnomalyApi);
+
+  const [values, setValues] = useState<AnomalySettingsFormValues>(DEFAULT_VALUES);
+  // Template-only settings — preserved on save but not surfaced as form controls.
+  const [baselineWindow, setBaselineWindow] = useState("7d");
+  const [notify, setNotify] = useState(true);
+
+  const { data: configRecord, isLoading } = anomalyClient.getAnomalyConfig.useQuery(
+    { configurationId: context.configurationId },
+    { enabled: !!context.configurationId },
+  );
+
+  const availableFields = useAnomalyFields(context.configurationId);
+
+  const updateMutation = anomalyClient.updateAnomalyConfig.useMutation({
+    onSuccess: () => toast.success("Anomaly detection settings saved"),
+    onError: () => toast.error("Failed to save settings"),
+  });
+
+  useEffect(() => {
+    if (configRecord?.data) {
+      setValues({
+        enabled: configRecord.data.enabled ?? true,
+        sensitivity: configRecord.data.sensitivity ?? 1,
+        confirmationWindow: configRecord.data.confirmationWindow ?? 3,
+        driftEnabled: configRecord.data.driftEnabled ?? true,
+        driftThreshold: configRecord.data.driftThreshold ?? 2,
+        fieldOverrides:
+          (configRecord.data.fieldOverrides as Record<string, AnomalyFieldConfig>) ??
+          {},
+      });
+      setBaselineWindow(configRecord.data.baselineWindow ?? "7d");
+      setNotify(configRecord.data.notify ?? true);
+    }
+  }, [configRecord]);
+
+  const handleChange = <K extends keyof AnomalySettingsFormValues>(
+    key: K,
+    value: AnomalySettingsFormValues[K],
+  ) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSave = () => {
+    updateMutation.mutate({
+      configurationId: context.configurationId,
+      config: {
+        ...values,
+        baselineWindow,
+        notify,
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <div className="p-6 text-muted-foreground">Loading anomaly settings...</div>;
+  }
+
+  return (
+    <Card className="flex flex-col h-full border-0 rounded-none shadow-none">
+      <CardHeader className="pb-4">
+        <div className="flex items-center gap-2">
+          <Activity className="h-5 w-5 text-primary" />
+          <div>
+            <CardTitle className="text-lg">Template Anomaly Defaults</CardTitle>
+            <CardDescription>
+              Configure the default machine learning sensitivity and baseline windows for this health check template. These settings cascade to all assignments unless specifically overridden.
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1 space-y-6 overflow-y-auto">
+        <AnomalySettingsForm
+          values={values}
+          onChange={handleChange}
+          availableFields={availableFields}
+          isLocked={context.isLocked}
+          variant="template"
+        />
+      </CardContent>
+
+      <CardFooter className="pt-4 border-t flex justify-end">
+        <Button
+          onClick={handleSave}
+          disabled={updateMutation.isPending || context.isLocked}
+        >
+          {updateMutation.isPending ? "Saving..." : (
+            <>
+              <Save className="mr-2 h-4 w-4" />
+              Save Defaults
+            </>
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/components/SystemAnomalyBadge.tsx

@@ -0,0 +1,71 @@
+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";
+
+type Props = SlotContext<typeof SystemStateBadgesSlot>;
+
+/**
+ * Renders an anomaly status badge for a system.
+ *
+ * Fetches ONLY active anomalies (state = "anomaly") and suspicious states
+ * in two separate queries. React Query deduplicates these globally across
+ * all badge instances on the dashboard, so even with 50+ badges we only
+ * issue 2 requests total. Recovered anomalies are excluded to prevent
+ * unbounded growth in the response payload.
+ */
+export const SystemAnomalyBadge: React.FC<Props> = ({ system }) => {
+  const anomalyClient = usePluginClient(AnomalyApi);
+
+  // Fetch confirmed anomalies — deduped across all badge instances via React Query
+  const { data: confirmedAnomalies = [] } = anomalyClient.getAnomalies.useQuery(
+    { state: "anomaly", limit: 500 },
+    { staleTime: 30_000 },
+  );
+
+  // Fetch suspicious states — deduped across all badge instances via React Query
+  const { data: suspiciousAnomalies = [] } =
+    anomalyClient.getAnomalies.useQuery(
+      { state: "suspicious", limit: 500 },
+      { staleTime: 30_000 },
+    );
+
+  // Find the worst state for this specific system
+  const systemState = useMemo(() => {
+    // Check confirmed anomalies first (worst state)
+    if (confirmedAnomalies.some((a) => a.systemId === system?.id)) {
+      return "anomaly" as AnomalyState;
+    }
+    // Check suspicious states
+    if (suspiciousAnomalies.some((a) => a.systemId === system?.id)) {
+      return "suspicious" as AnomalyState;
+    }
+    return;
+  }, [confirmedAnomalies, suspiciousAnomalies, system?.id]);
+
+  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 (
+    <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>
+  );
+};

package/src/components/SystemAnomalyWidget.tsx

@@ -0,0 +1,283 @@
+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 { healthcheckRoutes } from "@checkstack/healthcheck-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+} from "@checkstack/ui";
+import { Activity, AlertTriangle, HelpCircle, TrendingUp, TrendingDown, ArrowRight, LineChart } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { Link } from "react-router-dom";
+
+type Props = SlotContext<typeof SystemDetailsSlot>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Field Path Humanization
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Parses a raw anomaly field path like
+ *   `collectors.healthcheck-http.request.responseTimeMs`
+ * into structured display info:
+ *   { label: "Response Time", source: "HTTP Request", strategy: "healthcheck-http" }
+ */
+function parseFieldPath(fieldPath: string): {
+  label: string;
+  source: string;
+  strategy: string;
+} {
+  // Field paths follow the pattern: collectors.<strategyId>.<collectorId>.<fieldName>
+  const parts = fieldPath.split(".");
+
+  if (parts[0] !== "collectors" || parts.length < 3) {
+    return { label: fieldPath, source: "", strategy: "" };
+  }
+
+  const strategyId = parts[1]; // e.g. "healthcheck-http"
+  const fieldName = parts.at(-1) ?? fieldPath; // e.g. "responseTimeMs"
+
+  // Extract collector id (everything between strategy and field)
+  const collectorParts = parts.slice(2, -1); // e.g. ["request"]
+  const collectorId = collectorParts.join(" "); // e.g. "request"
+
+  return {
+    label: humanizeFieldName(fieldName),
+    source: humanizeCollectorSource(strategyId, collectorId),
+    strategy: strategyId,
+  };
+}
+
+/** Convert camelCase/snake_case field names to human-readable labels */
+function humanizeFieldName(name: string): string {
+  // Strip common suffixes for cleaner display
+  const cleaned = name
+    .replace(/Ms$/, "")
+    .replace(/Seconds$/, "")
+    .replace(/Bytes$/, "")
+    .replace(/Count$/, "");
+
+  // camelCase → spaces
+  const spaced = cleaned.replaceAll(/([a-z])([A-Z])/g, "$1 $2");
+
+  // snake_case → spaces
+  const words = spaced.replaceAll("_", " ");
+
+  // Capitalize
+  return words
+    .split(" ")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .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(" ")
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ");
+    return `${cleanStrategy} · ${cleanCollector}`;
+  }
+
+  return cleanStrategy;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Anomaly Row Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+function AnomalyRow({ anomaly, systemId }: { anomaly: AnomalyDto; systemId: string }) {
+  const isSuspicious = anomaly.state === "suspicious";
+  const isDrift = anomaly.kind === "drift";
+  const parsed = parseFieldPath(anomaly.fieldPath);
+  const deviationValue = anomaly.deviation?.toFixed(1) ?? "—";
+  const isAbove = anomaly.direction === "above";
+
+  const detailLink = resolveRoute(healthcheckRoutes.routes.historyDetail, {
+    systemId,
+    configurationId: anomaly.configurationId,
+  });
+
+  const StateIcon = isDrift
+    ? LineChart
+    : isSuspicious
+      ? HelpCircle
+      : AlertTriangle;
+
+  return (
+    <Link
+      to={detailLink}
+      className="group flex items-center gap-3 px-4 py-3 hover:bg-muted/50 transition-colors cursor-pointer"
+    >
+      {/* State icon */}
+      <div className={`shrink-0 rounded-full p-1.5 ${
+        isSuspicious
+          ? "bg-warning/10 text-warning/70"
+          : "bg-warning/15 text-warning"
+      }`}>
+        <StateIcon className="h-3.5 w-3.5" />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium truncate">
+            {parsed.label}
+          </span>
+          {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>
+          )}
+          {isDrift && (
+            <span className="text-[10px] text-muted-foreground bg-muted/40 px-1.5 py-0.5 rounded font-medium shrink-0">
+              drift
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2 mt-0.5 text-xs text-muted-foreground">
+          {isDrift ? (
+            <span>
+              Trending {isAbove ? "up" : "down"} from baseline {anomaly.baselineValue?.toFixed(1) ?? "—"}
+            </span>
+          ) : (
+            <>
+              <span className="font-mono tabular-nums">{anomaly.observedValue}</span>
+              <span className="opacity-50">
+                {isAbove ? "↑" : "↓"} baseline {anomaly.baselineValue?.toFixed(1)}
+              </span>
+            </>
+          )}
+          <span className="opacity-40">·</span>
+          <span>
+            {isSuspicious ? "Detected" : "Confirmed"}{" "}
+            {formatDistanceToNow(
+              new Date(isSuspicious ? anomaly.startedAt : (anomaly.confirmedAt ?? anomaly.startedAt)),
+              { addSuffix: true },
+            )}
+          </span>
+        </div>
+      </div>
+
+      {/* Deviation badge + arrow */}
+      <div className="flex items-center gap-2 shrink-0">
+        <Badge
+          variant={isSuspicious ? "outline" : "warning"}
+          className={`text-[10px] h-5 px-1.5 font-mono tabular-nums gap-1 ${
+            isSuspicious ? "border-warning/40 text-warning" : ""
+          }`}
+        >
+          {isAbove ? (
+            <TrendingUp className="h-2.5 w-2.5" />
+          ) : (
+            <TrendingDown className="h-2.5 w-2.5" />
+          )}
+          {deviationValue}σ
+        </Badge>
+        <ArrowRight className="h-3.5 w-3.5 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
+      </div>
+    </Link>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Widget
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
+  const anomalyClient = usePluginClient(AnomalyApi);
+
+  // Fetch only active anomalies — exclude recovered ones.
+  // Two queries with React Query deduplication: confirmed anomalies + suspicious.
+  const { data: confirmedAnomalies = [], isLoading: loadingConfirmed } =
+    anomalyClient.getAnomalies.useQuery(
+      { systemId: system.id, state: "anomaly", limit: 10 },
+      { staleTime: 30_000 },
+    );
+
+  const { data: suspiciousAnomalies = [], isLoading: loadingSuspicious } =
+    anomalyClient.getAnomalies.useQuery(
+      { systemId: system.id, state: "suspicious", limit: 10 },
+      { staleTime: 30_000 },
+    );
+
+  const isLoading = loadingConfirmed || loadingSuspicious;
+
+  // Confirmed anomalies first, then suspicious
+  const activeAnomalies = [...confirmedAnomalies, ...suspiciousAnomalies];
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Activity className="h-4 w-4" />
+            System Anomalies
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-16 items-center justify-center text-sm text-muted-foreground">
+            Loading anomalies...
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (activeAnomalies.length === 0) {
+    return <></>;
+  }
+
+  const confirmedCount = confirmedAnomalies.length;
+  const suspiciousCount = suspiciousAnomalies.length;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Activity className="h-4 w-4 text-warning" />
+            System Anomalies
+          </CardTitle>
+          <div className="flex items-center gap-1.5">
+            {confirmedCount > 0 && (
+              <Badge variant="warning" className="text-[10px] h-5 px-1.5 gap-1">
+                <AlertTriangle className="h-2.5 w-2.5" />
+                {confirmedCount}
+              </Badge>
+            )}
+            {suspiciousCount > 0 && (
+              <Badge
+                variant="outline"
+                className="text-[10px] h-5 px-1.5 gap-1 border-warning/40 text-warning"
+              >
+                <HelpCircle className="h-2.5 w-2.5" />
+                {suspiciousCount}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="flex flex-col divide-y">
+          {activeAnomalies.map((anomaly) => (
+            <AnomalyRow
+              key={anomaly.id}
+              anomaly={anomaly}
+              systemId={system.id}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};