@checkstack/healthcheck-frontend 0.19.5 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @checkstack/healthcheck-frontend
 
+## 0.20.0
+
+### Minor Changes
+
+- ba07ae2: Quiet down notification spam on flapping systems, auto-open incidents when a check goes critical, and let operators land directly on the broken checks.
+
+  Notification policy lives **per healthcheck assignment** (one row per `system × configuration`). Different checks on the same system are fully independent — disabling a setting on one check does not affect the others. Defaults preserve existing behaviour for `suppressDeEscalations`; **auto-incident defaults to on** for new and existing assignments.
+
+  - **`suppressDeEscalations`** (off by default). When on, transitions from a worse state to a better-but-still-failing state (e.g. `unhealthy → degraded`) no longer fire a notification. Escalations and full recoveries to `healthy` are unaffected. Resolved per assignment (the just-ran check is the one driving any aggregate transition).
+  - **`autoOpenIncidentOnUnhealthy`** (on by default). Either of two independent triggers can open the auto-incident:
+    - **`sustainedUnhealthyTrigger`** (default 30 min) — opens when the check stays continuously unhealthy for the configured duration. Catches real outages.
+    - **`flappingTrigger`** (default 3 transitions in 60 min) — opens when the check flips to unhealthy that many times in the window. Catches persistent flapping where each unhealthy phase is too brief for the sustained trigger.
+      Each trigger can be individually disabled. One incident per system: triggering checks attach to an existing active auto-incident.
+  - **`useNotificationSuppression`** (on by default, only meaningful when auto-open is on). Controls whether the auto-opened incident is created with `suppressNotifications: true` — leaving this off opens the incident but still pings operators on each transition.
+  - **`skipDuringMaintenance`** (on by default). No auto-incident is opened while the system has an active maintenance window with suppression. The system is intentionally down and shouldn't trip the on-call.
+  - **`autoCloseAfterMinutes`** (default 30). Auto-close cooldown is now per-assignment and snapshotted per-incident at open time — later policy edits don't alter in-flight incidents. Setting `null` ("Never auto-close") leaves the incident for manual resolution.
+  - **Require-recovery rule.** After any auto-incident closes (manual or auto), no new auto-incident can open until the check has logged at least one healthy run. Prevents a "operator dismissed but it's still broken" loop.
+  - **Auto-close worker** ticks every 60s and resolves auto-opened incidents whose systems have been healthy for their per-row `cooldownMinutes`. Rows with `null` cooldown are skipped entirely. Per-incident: failed close attempts are logged but never abort the sweep.
+  - **`incidentResolved` hook subscriber** syncs the auto-incident mapping when an operator manually resolves the incident, so the require-recovery rule sees the close immediately.
+  - **Platform-wide defaults.** New admin RPCs `getPlatformNotificationDefaults` / `setPlatformNotificationDefaults` (under the existing `healthcheck.configuration.{read,manage}` access rules) let operators set notification policy once for the whole instance. Per-assignment rows with `notificationPolicy: null` inherit the platform defaults at read time. UI: a "Notification defaults" button in the Assignment IDE opens a modal editor. The per-assignment Notifications panel shows an inheritance banner — "Using platform defaults" (read-only) with an "Override" button, or "Custom override" with a "Use platform defaults" button to revert. The all-or-nothing model keeps the mental model simple: each assignment is either fully inherited or fully overridden.
+  - **New service-level RPCs** on the incident plugin (`createAutoIncident`, `resolveAutoIncident`) let other plugins open/close incidents without a user context. Reused by the healthcheck auto-incident flow.
+  - **Health-state notification CTA** now deep-links to `?filter=failing` on the system detail page for non-recovery transitions (label changes to "View failing checks"). The system overview gains an `All / Failing / Healthy` segmented filter wired to the same `?filter=…` param.
+  - **Notification bell badge** now counts collapse groups instead of raw rows, so the number matches what the user sees in the notifications list. Built on `COUNT(DISTINCT COALESCE(collapse_key, id))` — notifications without a collapse key still each count as one.
+  - **`statusFilter` on `getHistory` / `getDetailedHistory`** lets the run-history page and the drawer's Recent Runs panel filter to `All / Healthy / Failing` via shared pills, with the page resetting to the first page on filter change.
+  - **Pagination defaults aligned with selector options.** Several pages defaulted to a page size (5 or 20) that wasn't in the dropdown's options (`[10, 25, 50, 100]`), so the page-size `<Select>` rendered empty. The drawer's Recent Runs now defaults to 10; the Run History, History List, and Delivery Logs pages now default to 25.
+
+  Includes Drizzle migrations adding the `notification_policy` jsonb column to `system_health_checks`, plus two new tables: `health_check_unhealthy_transitions` (for threshold counting) and `health_check_auto_incidents` (for mapping back to incident ids during auto-close).
+
+### Patch Changes
+
+- Updated dependencies [ba07ae2]
+  - @checkstack/healthcheck-common@1.2.0
+  - @checkstack/dashboard-frontend@0.7.6
+  - @checkstack/satellite-common@0.5.3
+
 ## 0.19.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.19.5",
+  "version": "0.20.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,18 +13,18 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.2.1",
-    "@checkstack/auth-frontend": "0.6.4",
-    "@checkstack/catalog-common": "2.2.1",
-    "@checkstack/common": "0.10.0",
-    "@checkstack/dashboard-frontend": "0.7.4",
-    "@checkstack/frontend-api": "0.5.1",
-    "@checkstack/gitops-frontend": "0.4.4",
-    "@checkstack/healthcheck-common": "1.1.1",
-    "@checkstack/satellite-common": "0.5.1",
-    "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/tips-frontend": "0.2.4",
-    "@checkstack/ui": "1.9.0",
+    "@checkstack/anomaly-common": "1.2.2",
+    "@checkstack/auth-frontend": "0.6.5",
+    "@checkstack/catalog-common": "2.2.2",
+    "@checkstack/common": "0.11.0",
+    "@checkstack/dashboard-frontend": "0.7.5",
+    "@checkstack/frontend-api": "0.5.2",
+    "@checkstack/gitops-frontend": "0.4.5",
+    "@checkstack/healthcheck-common": "1.1.2",
+    "@checkstack/satellite-common": "0.5.2",
+    "@checkstack/signal-frontend": "0.1.4",
+    "@checkstack/tips-frontend": "0.2.5",
+    "@checkstack/ui": "1.10.0",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -36,7 +36,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.3.2",
+    "@checkstack/scripts": "0.3.3",
     "@checkstack/tsconfig": "0.0.7",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0"

package/src/components/EmptyRunsTableRow.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { TableRow, TableCell } from "@checkstack/ui";
+
+interface EmptyRunsTableRowProps {
+  /** Number of columns in the parent table (drives `colSpan`). */
+  colSpan: number;
+  /** Message to display in the empty cell. Plain strings or rich nodes. */
+  children: React.ReactNode;
+}
+
+/**
+ * Single-row empty state rendered inside a runs table body. Centralises
+ * the look so the drawer's Recent Runs and the Run History page can
+ * share the same in-table empty state.
+ */
+export function EmptyRunsTableRow({ colSpan, children }: EmptyRunsTableRowProps) {
+  return (
+    <TableRow>
+      <TableCell
+        colSpan={colSpan}
+        className="text-center text-xs text-muted-foreground py-6"
+      >
+        {children}
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/components/HealthCheckDrawer.tsx

@@ -56,6 +56,12 @@ import { HealthCheckLatencyChart } from "./HealthCheckLatencyChart";
 import { useHealthCheckData } from "../hooks/useHealthCheckData";
 import { AggregatedDataBanner } from "./AggregatedDataBanner";
 import { HealthCheckDiagramSlot } from "../slots";
+import {
+  StatusFilterPills,
+  STATUS_FILTER_TO_STATUSES,
+  type StatusFilter,
+} from "./StatusFilterPills";
+import { EmptyRunsTableRow } from "./EmptyRunsTableRow";
 import { Heart, Clock, CheckCircle, AlertTriangle } from "lucide-react";
 
 import type {
@@ -130,6 +136,8 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
   );
   const [isRollingPreset, setIsRollingPreset] = useState(true);
   const [sourceFilter, setSourceFilter] = useState<string | undefined>();
+  const [runsStatusFilter, setRunsStatusFilter] =
+    useState<StatusFilter>("all");
 
   const activePreset = detectPreset(dateRange);
   const activePresetLabel = PRESETS.find((p) => p.id === activePreset)?.shortLabel ?? "Custom";
@@ -195,7 +203,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
   );
 
   // Pagination for history table
-  const pagination = usePagination({ defaultLimit: 5 });
+  const pagination = usePagination({ defaultLimit: 10 });
 
   const { data: historyData, isLoading: historyLoading } =
     healthCheckClient.getHistory.useQuery({
@@ -205,6 +213,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
     offset: pagination.offset,
     startDate: dateRange.startDate,
     sourceFilter,
+    statusFilter: STATUS_FILTER_TO_STATUSES[runsStatusFilter],
     sortOrder: "desc",
   });
 
@@ -437,7 +446,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
           </div>
 
           {/* Zone 3 — Recent Runs */}
-          {runs.length > 0 && (
+          {(runs.length > 0 || runsStatusFilter !== "all") && (
             <div className="space-y-3">
               <div className="flex items-center gap-4">
                 <div className="flex-1 h-px bg-border" />
@@ -450,6 +459,16 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                 <div className="flex-1 h-px bg-border" />
               </div>
 
+              <div className="flex justify-end">
+                <StatusFilterPills
+                  value={runsStatusFilter}
+                  onChange={(next) => {
+                    setRunsStatusFilter(next);
+                    pagination.setPage(1);
+                  }}
+                />
+              </div>
+
               <div className="rounded-md border">
                 <Table>
                   <TableHeader>
@@ -460,6 +479,13 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                     </TableRow>
                   </TableHeader>
                   <TableBody>
+                    {runs.length === 0 && !historyLoading && (
+                      <EmptyRunsTableRow colSpan={3}>
+                        No runs match the{" "}
+                        <span className="font-medium">{runsStatusFilter}</span>{" "}
+                        filter.
+                      </EmptyRunsTableRow>
+                    )}
                     {runs.map((run) => (
                       <TableRow
                         key={run.id}

package/src/components/HealthCheckRunsTable.tsx

@@ -14,6 +14,7 @@ import { ExternalLink, Loader2, Satellite, Server } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
+import { EmptyRunsTableRow } from "./EmptyRunsTableRow";
 
 export interface HealthCheckRunDetailed {
   id: string;
@@ -64,10 +65,6 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     prevRunsRef.current = runs;
   }
 
-  if (!loading && runs.length === 0 && prevRunsRef.current.length === 0) {
-    return <p className="text-muted-foreground text-sm">{emptyMessage}</p>;
-  }
-
   const handleRowClick = (run: HealthCheckRunDetailed) => {
     navigate(
       resolveRoute(healthcheckRoutes.routes.historyRun, {
@@ -78,6 +75,11 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     );
   };
 
+  // 3 base columns (Status, Timestamp, Source) + 3 extras when
+  // showFilterColumns is on (System ID, Configuration ID, link icon).
+  const columnCount = showFilterColumns ? 6 : 3;
+  const showEmptyRow = !loading && displayRuns.length === 0;
+
   return (
     <>
       <div className="rounded-md border">
@@ -102,6 +104,11 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
             </TableRow>
           </TableHeader>
           <TableBody>
+            {showEmptyRow && (
+              <EmptyRunsTableRow colSpan={columnCount}>
+                {emptyMessage}
+              </EmptyRunsTableRow>
+            )}
             {displayRuns.map((run) => (
               <TableRow
                 key={run.id}

package/src/components/HealthCheckSystemOverview.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import {
   usePluginClient,
   type SlotContext,
@@ -12,6 +13,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Button,
 } from "@checkstack/ui";
 import { Heart } from "lucide-react";
 import { HealthCheckSparkline } from "./HealthCheckSparkline";
@@ -22,6 +24,24 @@ import type {
   HealthCheckStatus,
 } from "@checkstack/healthcheck-common";
 
+type HealthFilter = "all" | "failing" | "healthy";
+
+const FILTERS: { value: HealthFilter; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "failing", label: "Failing" },
+  { value: "healthy", label: "Healthy" },
+];
+
+function parseFilter(raw: string | null): HealthFilter {
+  return raw === "failing" || raw === "healthy" ? raw : "all";
+}
+
+function matchesFilter(state: HealthCheckStatus, filter: HealthFilter) {
+  if (filter === "all") return true;
+  if (filter === "healthy") return state === "healthy";
+  return state !== "healthy";
+}
+
 type SlotProps = SlotContext<typeof SystemDetailsSlot>;
 
 /**
@@ -54,6 +74,8 @@ interface HealthCheckOverviewItem {
 export function HealthCheckSystemOverview(props: SlotProps) {
   const systemId = props.system.id;
   const healthCheckClient = usePluginClient(HealthCheckApi);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filter = parseFilter(searchParams.get("filter"));
 
   const [selectedCheck, setSelectedCheck] = useState<
     HealthCheckOverviewItem | undefined
@@ -82,6 +104,21 @@ export function HealthCheckSystemOverview(props: SlotProps) {
     }));
   }, [overviewData]);
 
+  const visible = React.useMemo(
+    () => overview.filter((item) => matchesFilter(item.state, filter)),
+    [overview, filter],
+  );
+
+  const setFilter = (next: HealthFilter) => {
+    const params = new URLSearchParams(searchParams);
+    if (next === "all") {
+      params.delete("filter");
+    } else {
+      params.set("filter", next);
+    }
+    setSearchParams(params, { replace: true });
+  };
+
   if (initialLoading) {
     return <LoadingSpinner />;
   }
@@ -94,16 +131,46 @@ export function HealthCheckSystemOverview(props: SlotProps) {
     <>
       <Card>
         <CardHeader className="pb-3">
-          <div className="flex items-center gap-2">
-            <Heart className="h-4 w-4 text-muted-foreground" />
-            <CardTitle className="text-base font-semibold">
-              Health Checks
-            </CardTitle>
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Heart className="h-4 w-4 text-muted-foreground" />
+              <CardTitle className="text-base font-semibold">
+                Health Checks
+              </CardTitle>
+            </div>
+            <div
+              className="flex items-center gap-1 rounded-md border bg-muted/30 p-0.5"
+              role="tablist"
+              aria-label="Filter health checks"
+            >
+              {FILTERS.map((f) => {
+                const active = filter === f.value;
+                return (
+                  <Button
+                    key={f.value}
+                    size="sm"
+                    variant={active ? "secondary" : "ghost"}
+                    className="h-7 px-2 text-xs"
+                    onClick={() => setFilter(f.value)}
+                    role="tab"
+                    aria-selected={active}
+                  >
+                    {f.label}
+                  </Button>
+                );
+              })}
+            </div>
           </div>
         </CardHeader>
         <CardContent className="p-0">
-          <div className="divide-y divide-border">
-            {overview.map((item) => (
+          {visible.length === 0 ? (
+            <div className="px-4 py-6 text-center text-xs text-muted-foreground">
+              No health checks match the{" "}
+              <span className="font-medium">{filter}</span> filter.
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {visible.map((item) => (
               <button
                 key={item.configurationId}
                 className="w-full px-4 py-3 text-left hover:bg-muted/50 transition-colors flex items-center gap-3"
@@ -133,8 +200,9 @@ export function HealthCheckSystemOverview(props: SlotProps) {
                   {formatCompactTime(item.lastRunAt)}
                 </span>
               </button>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </CardContent>
       </Card>
 

package/src/components/StatusFilterPills.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { CheckCircle, AlertTriangle } from "lucide-react";
+import type { HealthCheckStatus } from "@checkstack/healthcheck-common";
+
+/**
+ * Coarse status filter buckets for run-history surfaces. "Failing"
+ * collapses degraded and unhealthy because operators investigating a
+ * problem usually care about "anything not green" rather than the
+ * degraded/unhealthy distinction.
+ */
+export type StatusFilter = "all" | "healthy" | "failing";
+
+export const STATUS_FILTER_TO_STATUSES: Record<
+  StatusFilter,
+  HealthCheckStatus[] | undefined
+> = {
+  all: undefined,
+  healthy: ["healthy"],
+  failing: ["degraded", "unhealthy"],
+};
+
+interface StatusFilterPillsProps {
+  value: StatusFilter;
+  onChange: (next: StatusFilter) => void;
+}
+
+const OPTIONS: {
+  value: StatusFilter;
+  label: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  activeClass: string;
+}[] = [
+  {
+    value: "all",
+    label: "All",
+    activeClass: "bg-primary text-primary-foreground",
+  },
+  {
+    value: "healthy",
+    label: "Healthy",
+    icon: CheckCircle,
+    activeClass: "bg-success text-white",
+  },
+  {
+    value: "failing",
+    label: "Failing",
+    icon: AlertTriangle,
+    activeClass: "bg-destructive text-destructive-foreground",
+  },
+];
+
+export function StatusFilterPills({ value, onChange }: StatusFilterPillsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-muted-foreground">Status:</span>
+      <div className="flex items-center gap-1">
+        {OPTIONS.map((opt) => {
+          const active = value === opt.value;
+          const Icon = opt.icon;
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => onChange(opt.value)}
+              className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                active
+                  ? opt.activeClass
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+            >
+              {Icon && <Icon className="h-3 w-3" />}
+              {opt.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/assignments/AssignmentTree.tsx

@@ -1,5 +1,13 @@
 import React from "react";
-import { Settings, Gauge, Database, Radio, Plus, Check } from "lucide-react";
+import {
+  Settings,
+  Gauge,
+  Database,
+  Radio,
+  Plus,
+  Check,
+  Bell,
+} from "lucide-react";
 import { IDETreeNode, IDETreeSection } from "@checkstack/ui";
 import { ExtensionSlot } from "@checkstack/frontend-api";
 import { AssignmentIDENodeSlot } from "../../slots";
@@ -97,6 +105,18 @@ export const AssignmentTree: React.FC<AssignmentTreeProps> = ({
             indent
             badge={assoc.satelliteCount > 0 ? `${assoc.satelliteCount}` : undefined}
           />
+          <IDETreeNode
+            nodeId={`notifications:${assoc.configurationId}`}
+            label="Notifications"
+            icon={Bell}
+            selected={
+              selectedNode === `notifications:${assoc.configurationId}`
+            }
+            onClick={() =>
+              onSelectNode(`notifications:${assoc.configurationId}`)
+            }
+            indent
+          />
           <ExtensionSlot 
             slot={AssignmentIDENodeSlot} 
             context={{

package/src/components/assignments/NotificationsPanel.tsx

@@ -0,0 +1,385 @@
+import React from "react";
+import type { NotificationPolicy } from "@checkstack/healthcheck-common";
+import { Button, Input, Label, Toggle, Tooltip } from "@checkstack/ui";
+
+interface NotificationsPanelProps {
+  policy: NotificationPolicy;
+  onChange: (policy: NotificationPolicy) => void;
+  onSave: () => void;
+  saving: boolean;
+  isLocked?: boolean;
+  /**
+   * Inheritance state — only meaningful when the panel is rendered
+   * for an assignment (not the platform-defaults editor). When
+   * `false`, the panel shows a banner explaining that values are
+   * inherited and offers an "Override" action.
+   */
+  isOverridden?: boolean;
+  /** Switch to "use platform defaults" mode for this assignment. */
+  onUseDefaults?: () => void;
+  /** Start overriding (clones the current inherited values). */
+  onOverride?: () => void;
+}
+
+/**
+ * Panel for configuring per-association notification behaviour. All
+ * settings are scoped to a single (system, configuration) assignment
+ * — different checks on the same system are independent.
+ */
+export const NotificationsPanel: React.FC<NotificationsPanelProps> = ({
+  policy,
+  onChange,
+  onSave,
+  saving,
+  isLocked,
+  isOverridden,
+  onUseDefaults,
+  onOverride,
+}) => {
+  // Inheritance UI only applies when the panel is hosted by an
+  // assignment — the platform-defaults editor passes neither
+  // `isOverridden` nor the callbacks.
+  const inheritanceMode =
+    typeof isOverridden === "boolean" && (onUseDefaults || onOverride);
+  // The Override / Use-defaults buttons in the banner must stay
+  // clickable even while the form is locked; only saving / GitOps
+  // lock should disable them.
+  const actionsDisabled = saving || isLocked;
+  // While the assignment inherits, the form values themselves are
+  // visible but read-only — operators must click Override to edit
+  // them.
+  const disabled =
+    actionsDisabled || (inheritanceMode ? !isOverridden : false);
+  return (
+    <div className="p-6 space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold">Notifications</h3>
+        <p className="text-xs text-muted-foreground mt-1">
+          Control which health state transitions notify subscribers for this
+          check, and when an incident is auto-opened for the system.
+        </p>
+      </div>
+
+      {inheritanceMode && (
+        <div
+          className={`p-3 rounded-lg border flex items-center justify-between gap-3 ${
+            isOverridden
+              ? "bg-warning/5 border-warning/30"
+              : "bg-muted/40 border-border"
+          }`}
+        >
+          <div className="text-xs">
+            {isOverridden ? (
+              <>
+                <span className="font-medium text-warning">
+                  Custom override
+                </span>{" "}
+                — this check ignores the platform defaults.
+              </>
+            ) : (
+              <>
+                <span className="font-medium">Using platform defaults</span>{" "}
+                — fields below are read-only. Click Override to customise
+                them for this check only.
+              </>
+            )}
+          </div>
+          {isOverridden && onUseDefaults && (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={onUseDefaults}
+              disabled={actionsDisabled}
+            >
+              Use platform defaults
+            </Button>
+          )}
+          {!isOverridden && onOverride && (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={onOverride}
+              disabled={actionsDisabled}
+            >
+              Override
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Suppress de-escalations */}
+      <div className="p-4 bg-muted/50 rounded-lg border space-y-3">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <Label className="text-sm font-medium">
+                Suppress de-escalation notifications
+              </Label>
+              <Tooltip content="When on, transitions from a worse state to a better one (but not back to healthy) are skipped. Recoveries and escalations still notify." />
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Skips intermediate notifications like{" "}
+              <code className="text-[11px]">unhealthy &rarr; degraded</code>.
+              You still get notified when the system gets worse or fully
+              recovers.
+            </p>
+          </div>
+          <Toggle
+            checked={policy.suppressDeEscalations}
+            onCheckedChange={(checked: boolean) =>
+              onChange({ ...policy, suppressDeEscalations: checked })
+            }
+            disabled={disabled}
+            aria-label="Suppress de-escalation notifications"
+          />
+        </div>
+      </div>
+
+      {/* Auto-open incident */}
+      <div className="p-4 bg-muted/50 rounded-lg border space-y-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <Label className="text-sm font-medium">
+                Auto-open incident when this check is critical
+              </Label>
+              <Tooltip content="When either trigger below fires, an incident is auto-opened on the system. Different checks on the same system are independent — disabling here only affects this check." />
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              One incident per outage instead of one ping per state change.
+              Especially useful for Jira / Slack / email — the incident's
+              suppression silences downstream channels for the lifetime of
+              the incident.
+            </p>
+          </div>
+          <Toggle
+            checked={policy.autoOpenIncidentOnUnhealthy}
+            onCheckedChange={(checked: boolean) =>
+              onChange({ ...policy, autoOpenIncidentOnUnhealthy: checked })
+            }
+            disabled={disabled}
+            aria-label="Auto-open incident when this check is critical"
+          />
+        </div>
+
+        {policy.autoOpenIncidentOnUnhealthy && (
+          <div className="pl-4 border-l-2 border-border space-y-4">
+            {/* Suppress further notifications */}
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1 min-w-0">
+                <Label className="text-sm">
+                  Suppress further notifications while open
+                </Label>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Email, Jira, Slack all silenced for this system until the
+                  incident is resolved.
+                </p>
+              </div>
+              <Toggle
+                checked={policy.useNotificationSuppression}
+                onCheckedChange={(checked: boolean) =>
+                  onChange({
+                    ...policy,
+                    useNotificationSuppression: checked,
+                  })
+                }
+                disabled={disabled}
+                aria-label="Suppress further notifications while open"
+              />
+            </div>
+
+            {/* Skip during maintenance */}
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1 min-w-0">
+                <Label className="text-sm">
+                  Skip during active maintenance
+                </Label>
+                <p className="text-xs text-muted-foreground mt-1">
+                  No auto-incident is opened while the system has an active
+                  maintenance window with suppression.
+                </p>
+              </div>
+              <Toggle
+                checked={policy.skipDuringMaintenance}
+                onCheckedChange={(checked: boolean) =>
+                  onChange({ ...policy, skipDuringMaintenance: checked })
+                }
+                disabled={disabled}
+                aria-label="Skip auto-incident during active maintenance"
+              />
+            </div>
+
+            {/* Sustained-duration trigger */}
+            <div className="space-y-2 pt-2 border-t border-border">
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-2">
+                  <Label className="text-sm">
+                    Open when unhealthy continuously
+                  </Label>
+                  <Tooltip content="Catches real outages: the check has stayed unhealthy for at least this long without recovering." />
+                </div>
+                <Toggle
+                  checked={policy.sustainedUnhealthyTrigger.enabled}
+                  onCheckedChange={(checked: boolean) =>
+                    onChange({
+                      ...policy,
+                      sustainedUnhealthyTrigger: {
+                        ...policy.sustainedUnhealthyTrigger,
+                        enabled: checked,
+                      },
+                    })
+                  }
+                  disabled={disabled}
+                  aria-label="Enable sustained-unhealthy trigger"
+                />
+              </div>
+              {policy.sustainedUnhealthyTrigger.enabled && (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <span>Open after</span>
+                  <Input
+                    type="number"
+                    min={1}
+                    className="h-8 w-16 text-center"
+                    value={policy.sustainedUnhealthyTrigger.durationMinutes}
+                    onChange={(e) =>
+                      onChange({
+                        ...policy,
+                        sustainedUnhealthyTrigger: {
+                          ...policy.sustainedUnhealthyTrigger,
+                          durationMinutes:
+                            Number.parseInt(e.target.value, 10) || 1,
+                        },
+                      })
+                    }
+                    disabled={disabled}
+                  />
+                  <span>minutes of continuous unhealthy state</span>
+                </div>
+              )}
+            </div>
+
+            {/* Flapping trigger */}
+            <div className="space-y-2 pt-2 border-t border-border">
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-2">
+                  <Label className="text-sm">Open on flapping</Label>
+                  <Tooltip content="Catches checks that flip in and out of unhealthy too quickly for the sustained trigger to fire." />
+                </div>
+                <Toggle
+                  checked={policy.flappingTrigger.enabled}
+                  onCheckedChange={(checked: boolean) =>
+                    onChange({
+                      ...policy,
+                      flappingTrigger: {
+                        ...policy.flappingTrigger,
+                        enabled: checked,
+                      },
+                    })
+                  }
+                  disabled={disabled}
+                  aria-label="Enable flapping trigger"
+                />
+              </div>
+              {policy.flappingTrigger.enabled && (
+                <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                  <span>Open after</span>
+                  <Input
+                    type="number"
+                    min={1}
+                    className="h-8 w-16 text-center"
+                    value={policy.flappingTrigger.transitions}
+                    onChange={(e) =>
+                      onChange({
+                        ...policy,
+                        flappingTrigger: {
+                          ...policy.flappingTrigger,
+                          transitions:
+                            Number.parseInt(e.target.value, 10) || 1,
+                        },
+                      })
+                    }
+                    disabled={disabled}
+                  />
+                  <span>transitions to unhealthy within</span>
+                  <Input
+                    type="number"
+                    min={1}
+                    className="h-8 w-16 text-center"
+                    value={policy.flappingTrigger.windowMinutes}
+                    onChange={(e) =>
+                      onChange({
+                        ...policy,
+                        flappingTrigger: {
+                          ...policy.flappingTrigger,
+                          windowMinutes:
+                            Number.parseInt(e.target.value, 10) || 1,
+                        },
+                      })
+                    }
+                    disabled={disabled}
+                  />
+                  <span>minutes</span>
+                </div>
+              )}
+            </div>
+
+            {/* Auto-close cooldown */}
+            <div className="space-y-2 pt-2 border-t border-border">
+              <div className="flex items-center gap-2">
+                <Label className="text-sm">Auto-close cooldown</Label>
+                <Tooltip content="Resolve the auto-incident once the system has stayed healthy for this long. Snapshotted per-incident at open time — later policy edits don't change in-flight incidents." />
+              </div>
+              <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                <label className="inline-flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={policy.autoCloseAfterMinutes === null}
+                    onChange={(e) =>
+                      onChange({
+                        ...policy,
+                        autoCloseAfterMinutes: e.target.checked ? null : 30,
+                      })
+                    }
+                    disabled={disabled}
+                  />
+                  <span>Never auto-close (manual resolve only)</span>
+                </label>
+                {policy.autoCloseAfterMinutes !== null && (
+                  <div className="flex items-center gap-2">
+                    <span>After</span>
+                    <Input
+                      type="number"
+                      min={1}
+                      className="h-8 w-16 text-center"
+                      value={policy.autoCloseAfterMinutes}
+                      onChange={(e) =>
+                        onChange({
+                          ...policy,
+                          autoCloseAfterMinutes:
+                            Number.parseInt(e.target.value, 10) || 1,
+                        })
+                      }
+                      disabled={disabled}
+                    />
+                    <span>minutes of sustained healthy</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Save button hides when the assignment is inheriting — there
+          is nothing to save. The Override button drives the transition
+          into edit mode. */}
+      {(!inheritanceMode || isOverridden) && (
+        <div className="flex justify-end pt-2 border-t">
+          <Button size="sm" onClick={onSave} disabled={disabled}>
+            {saving ? "Saving..." : "Save Notifications"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/assignments/PlatformDefaultsDialog.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import {
+  DEFAULT_NOTIFICATION_POLICY,
+  HealthCheckApi,
+  type NotificationPolicy,
+} from "@checkstack/healthcheck-common";
+import { usePluginClient } from "@checkstack/frontend-api";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  LoadingSpinner,
+  useToast,
+} from "@checkstack/ui";
+import { extractErrorMessage } from "@checkstack/common";
+import { NotificationsPanel } from "./NotificationsPanel";
+
+interface PlatformDefaultsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Modal editor for platform-wide notification defaults. Reuses the
+ * per-assignment NotificationsPanel because the shape is identical —
+ * the only difference is where it reads from and writes to.
+ *
+ * Once saved, every assignment with `notificationPolicy = null`
+ * (the "Use platform defaults" state) picks up the new values on the
+ * next read. In-flight auto-incidents are unaffected — their cooldown
+ * was snapshotted at open time.
+ */
+export const PlatformDefaultsDialog: React.FC<PlatformDefaultsDialogProps> = ({
+  open,
+  onOpenChange,
+}) => {
+  const client = usePluginClient(HealthCheckApi);
+  const toast = useToast();
+
+  const { data, isLoading, refetch } =
+    client.getPlatformNotificationDefaults.useQuery(undefined, {
+      enabled: open,
+    });
+
+  const setMutation = client.setPlatformNotificationDefaults.useMutation({
+    onSuccess: () => {
+      toast.success("Platform notification defaults saved");
+      void refetch();
+      onOpenChange(false);
+    },
+    onError: (error) =>
+      toast.error(extractErrorMessage(error, "Failed to save defaults")),
+  });
+
+  const [draft, setDraft] = useState<NotificationPolicy>(
+    DEFAULT_NOTIFICATION_POLICY,
+  );
+
+  useEffect(() => {
+    if (data) setDraft(data);
+  }, [data]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="lg">
+        <DialogHeader>
+          <DialogTitle>Platform notification defaults</DialogTitle>
+          <DialogDescription>
+            Edits here apply to every health-check assignment that is set
+            to &quot;Use platform defaults&quot;. Assignments with a custom
+            override are unaffected.
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <LoadingSpinner />
+        ) : (
+          <NotificationsPanel
+            policy={draft}
+            onChange={setDraft}
+            onSave={() => setMutation.mutate(draft)}
+            saving={setMutation.isPending}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/pages/AssignmentIDEPage.tsx

@@ -6,10 +6,14 @@ import { SatelliteApi } from "@checkstack/satellite-common";
 import {
   DEFAULT_STATE_THRESHOLDS,
   DEFAULT_RETENTION_CONFIG,
+  DEFAULT_NOTIFICATION_POLICY,
+} from "@checkstack/healthcheck-common";
+import type {
+  StateThresholds,
+  NotificationPolicy,
 } from "@checkstack/healthcheck-common";
-import type { StateThresholds } from "@checkstack/healthcheck-common";
 import { PageLayout, IDELayout, useToast, BackLink, Button } from "@checkstack/ui";
-import { Settings, Plus } from "lucide-react";
+import { Settings, Plus, Bell } from "lucide-react";
 import { extractErrorMessage, resolveRoute } from "@checkstack/common";
 import { catalogRoutes } from "@checkstack/catalog-common";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
@@ -25,6 +29,8 @@ import {
   type RetentionData,
 } from "../components/assignments/RetentionPanel";
 import { ExecutionPanel } from "../components/assignments/ExecutionPanel";
+import { NotificationsPanel } from "../components/assignments/NotificationsPanel";
+import { PlatformDefaultsDialog } from "../components/assignments/PlatformDefaultsDialog";
 import { AssignmentIDEPanelSlot } from "../slots";
 
 // =============================================================================
@@ -32,12 +38,22 @@ import { AssignmentIDEPanelSlot } from "../slots";
 // =============================================================================
 
 function parseNodeId(nodeId: AssignmentNodeId): {
-  panel: "general" | "thresholds" | "retention" | "execution";
+  panel:
+    | "general"
+    | "thresholds"
+    | "retention"
+    | "execution"
+    | "notifications";
   configId: string;
 } {
   const [panel, ...rest] = nodeId.split(":") as [string, ...string[]];
   return {
-    panel: panel as "general" | "thresholds" | "retention" | "execution",
+    panel: panel as
+      | "general"
+      | "thresholds"
+      | "retention"
+      | "execution"
+      | "notifications",
     configId: rest.join(":"),
   };
 }
@@ -80,6 +96,16 @@ const AssignmentIDEPageContent = () => {
   const [retentionData, setRetentionData] = useState<
     Record<string, RetentionData>
   >({});
+  const [localNotificationPolicy, setLocalNotificationPolicy] = useState<
+    Record<string, NotificationPolicy>
+  >({});
+  const [platformDefaultsOpen, setPlatformDefaultsOpen] = useState(false);
+
+  // Platform notification defaults — used as the fallback for any
+  // assignment that hasn't overridden them. Refetched whenever the
+  // platform-defaults dialog closes so changes propagate immediately.
+  const { data: platformDefaults } =
+    healthCheckClient.getPlatformNotificationDefaults.useQuery();
 
   const configs = useMemo(
     () => configurationsData?.configurations ?? [],
@@ -214,6 +240,7 @@ const AssignmentIDEPageContent = () => {
         stateThresholds: assoc.stateThresholds,
         satelliteIds: assoc.satelliteIds,
         includeLocal: assoc.includeLocal,
+        notificationPolicy: assoc.notificationPolicy,
       },
     });
   };
@@ -238,6 +265,9 @@ const AssignmentIDEPageContent = () => {
           configurationId: configId,
           enabled: assoc.enabled,
           stateThresholds: thresholds,
+          satelliteIds: assoc.satelliteIds,
+          includeLocal: assoc.includeLocal,
+          notificationPolicy: assoc.notificationPolicy,
         },
       },
       {
@@ -253,6 +283,96 @@ const AssignmentIDEPageContent = () => {
     );
   };
 
+  const handleNotificationPolicyChange = (
+    configId: string,
+    policy: NotificationPolicy,
+  ) => {
+    setLocalNotificationPolicy((prev) => ({ ...prev, [configId]: policy }));
+  };
+
+  const handleSaveNotificationPolicy = (configId: string) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+    const policy =
+      localNotificationPolicy[configId] ??
+      assoc.notificationPolicy ??
+      platformDefaults ??
+      DEFAULT_NOTIFICATION_POLICY;
+
+    associateMutation.mutate(
+      {
+        systemId,
+        body: {
+          configurationId: configId,
+          enabled: assoc.enabled,
+          stateThresholds: assoc.stateThresholds,
+          satelliteIds: assoc.satelliteIds,
+          includeLocal: assoc.includeLocal,
+          notificationPolicy: policy,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success("Notification policy saved");
+          setLocalNotificationPolicy((prev) => {
+            const next = { ...prev };
+            delete next[configId];
+            return next;
+          });
+        },
+      },
+    );
+  };
+
+  /**
+   * Revert this assignment to platform defaults. Sends an undefined
+   * `notificationPolicy` which is persisted as null and re-resolves to
+   * the platform defaults on the next read.
+   */
+  const handleUseDefaultsForAssignment = (configId: string) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+
+    associateMutation.mutate(
+      {
+        systemId,
+        body: {
+          configurationId: configId,
+          enabled: assoc.enabled,
+          stateThresholds: assoc.stateThresholds,
+          satelliteIds: assoc.satelliteIds,
+          includeLocal: assoc.includeLocal,
+          notificationPolicy: undefined,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success("Reverted to platform defaults");
+          setLocalNotificationPolicy((prev) => {
+            const next = { ...prev };
+            delete next[configId];
+            return next;
+          });
+        },
+      },
+    );
+  };
+
+  /**
+   * Start customising — clone the current platform defaults into the
+   * draft state so the operator has a baseline to edit, then persist.
+   * The persistence step is what flips the row out of "inherit" mode.
+   */
+  const handleOverrideForAssignment = (configId: string) => {
+    const baseline = platformDefaults ?? DEFAULT_NOTIFICATION_POLICY;
+    setLocalNotificationPolicy((prev) => ({ ...prev, [configId]: baseline }));
+    // Defer the actual save: operators may want to tweak the cloned
+    // baseline before persisting. The Save button at the bottom of
+    // the panel handles it.
+  };
+
   const handleToggleSatellite = (configId: string, satelliteId: string) => {
     if (!systemId) return;
     const assoc = associations.find((a) => a.configurationId === configId);
@@ -272,6 +392,7 @@ const AssignmentIDEPageContent = () => {
         stateThresholds: assoc.stateThresholds,
         satelliteIds: newIds,
         includeLocal: assoc.includeLocal,
+        notificationPolicy: assoc.notificationPolicy,
       },
     });
   };
@@ -289,6 +410,7 @@ const AssignmentIDEPageContent = () => {
         stateThresholds: assoc.stateThresholds,
         satelliteIds: assoc.satelliteIds,
         includeLocal: !assoc.includeLocal,
+        notificationPolicy: assoc.notificationPolicy,
       },
     });
   };
@@ -450,6 +572,31 @@ const AssignmentIDEPageContent = () => {
           />
         );
       }
+      case "notifications": {
+        // Is the operator actively editing a draft? Drafts are stored
+        // when override starts, so the presence of a draft AND the
+        // assignment being persisted-as-override mean the same thing.
+        const draft = localNotificationPolicy[configId];
+        const isOverridden =
+          draft !== undefined || assoc.notificationPolicy !== undefined;
+        const policy =
+          draft ??
+          assoc.notificationPolicy ??
+          platformDefaults ??
+          DEFAULT_NOTIFICATION_POLICY;
+        return (
+          <NotificationsPanel
+            policy={policy}
+            onChange={(p) => handleNotificationPolicyChange(configId, p)}
+            onSave={() => handleSaveNotificationPolicy(configId)}
+            saving={saving}
+            isLocked={isLocked}
+            isOverridden={isOverridden}
+            onOverride={() => handleOverrideForAssignment(configId)}
+            onUseDefaults={() => handleUseDefaultsForAssignment(configId)}
+          />
+        );
+      }
       default: {
         return (
           <ExtensionSlot 
@@ -482,6 +629,14 @@ const AssignmentIDEPageContent = () => {
       maxWidth="full"
       actions={
         <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setPlatformDefaultsOpen(true)}
+          >
+            <Bell className="mr-2 h-4 w-4" />
+            Notification defaults
+          </Button>
           {!isLocked && systemId && (
             <Button
               size="sm"
@@ -522,6 +677,10 @@ const AssignmentIDEPageContent = () => {
         }
         panel={renderPanel()}
       />
+      <PlatformDefaultsDialog
+        open={platformDefaultsOpen}
+        onOpenChange={setPlatformDefaultsOpen}
+      />
     </PageLayout>
   );
 };

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -35,6 +35,11 @@ import {
 } from "../components/HealthCheckRunsTable";
 import { ExpandedResultView } from "../components/ExpandedResultView";
 import { SingleRunChartGrid } from "../auto-charts";
+import {
+  StatusFilterPills,
+  STATUS_FILTER_TO_STATUSES,
+  type StatusFilter,
+} from "../components/StatusFilterPills";
 
 const HealthCheckHistoryDetailPageContent = () => {
   const { systemId, configurationId, runId } = useParams<{
@@ -53,9 +58,10 @@ const HealthCheckHistoryDetailPageContent = () => {
 
   const [dateRange, setDateRange] = useState<DateRange>(getDefaultDateRange);
   const [sourceFilter, setSourceFilter] = useState<string | undefined>();
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
 
   // Pagination state
-  const pagination = usePagination({ defaultLimit: 20 });
+  const pagination = usePagination({ defaultLimit: 25 });
 
   // Fetch satellites for the source filter dropdown
   const { data: satellitesData } = satelliteClient.listSatellites.useQuery({});
@@ -89,6 +95,7 @@ const HealthCheckHistoryDetailPageContent = () => {
     startDate: dateRange.startDate,
     endDate: dateRange.endDate,
     sourceFilter,
+    statusFilter: STATUS_FILTER_TO_STATUSES[statusFilter],
     limit: pagination.limit,
     offset: pagination.offset,
     sortOrder: "desc",
@@ -166,6 +173,13 @@ const HealthCheckHistoryDetailPageContent = () => {
         <CardContent>
           <div className="flex flex-wrap items-center gap-3 mb-4">
             <DateRangeFilter value={dateRange} onChange={setDateRange} />
+            <StatusFilterPills
+              value={statusFilter}
+              onChange={(next) => {
+                setStatusFilter(next);
+                pagination.setPage(1);
+              }}
+            />
             {/* Source filter */}
             <div className="flex items-center gap-2">
               <span className="text-sm text-muted-foreground">Source:</span>
@@ -211,7 +225,11 @@ const HealthCheckHistoryDetailPageContent = () => {
           <HealthCheckRunsTable
             runs={runs}
             loading={isLoading}
-            emptyMessage="No health check runs found for this configuration."
+            emptyMessage={
+              statusFilter !== "all" || sourceFilter !== undefined
+                ? "No runs match the current filters."
+                : "No health check runs found for this configuration."
+            }
             pagination={pagination}
           />
         </CardContent>

package/src/pages/HealthCheckHistoryPage.tsx

@@ -31,7 +31,7 @@ const HealthCheckHistoryPageContent = () => {
   );
 
   // Pagination state
-  const pagination = usePagination({ defaultLimit: 20 });
+  const pagination = usePagination({ defaultLimit: 25 });
 
   // Fetch data with useQuery - newest first for table display
   const { data, isLoading } = healthCheckClient.getDetailedHistory.useQuery({