@checkstack/healthcheck-frontend 0.19.4 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,121 @@
 # @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
+
+- f23f3c9: Retrofit the highest-traffic configuration list tables
+  (`HealthCheckList`, `SloConfigPage`, and the integration
+  `DeliveryLogsPage`) onto the `ResponsiveTable` + `MobileCardList`
+  primitives from `@checkstack/ui`. On `sm` and up each page still
+  renders the unchanged 5- to 7-column table; below that breakpoint a
+  sibling stacked-card layout surfaces the same data with the resource
+  name + status badge at the top, secondary columns in a muted line, and
+  the existing action buttons in a right-aligned footer. The
+  `HealthCheckListSkeleton` placeholder mirrors both branches so the page
+  no longer jumps when data resolves. No business logic, column order,
+  or query inputs changed.
+- f23f3c9: Establish the canonical optimistic-UI pattern for oRPC mutations
+  (`onMutate` snapshot / patch, `onError` rollback, `onSettled`
+  invalidate) and apply it to the two highest-frequency toggles where
+  perceived latency was most visible:
+
+  - `markAsRead` on the Notifications page — clicking the check on a
+    notification card now flips the read state immediately instead of
+    waiting for the round-trip.
+  - `pauseConfiguration` / `resumeConfiguration` on the Health Check
+    Config page — pause/resume now flip the row's badge instantly,
+    rolling back on server error.
+
+  The wrapper type for `useMutation` on each plugin client gained an
+  optional `TContext` generic so optimistic sites can return a snapshot
+  from `onMutate` and consume it in `onError` without `unknown` casts.
+  The runtime behaviour and the auto-invalidation on success are
+  unchanged; the change is additive on the type surface only.
+
+  Full pattern and "when NOT to use it" guidance live in
+  `docs/frontend/optimistic-updates.md`.
+
+- f23f3c9: Gate decorative motion and blur effects behind
+  `usePerformance().isLowPower` on a focused set of high-traffic plugin
+  pages (Dashboard, Dependency map, System node, Notification bell,
+  Announcement banner / cards, Anomaly field overrides editor, SLO
+  attribution chart, Catalog droppable group). Hover scales, backdrop
+  blurs, `animate-pulse`/`animate-ping` accents, and entry transitions
+  now drop to static states on low-power devices; functional UX
+  transitions (Drawer/Dialog open-close, colour transitions) are left
+  alone.
+
+  Standardise the post-mutation error-toast voice on plugin pages by
+  migrating multi-clause `toast.error(extractErrorMessage(error, "Failed
+to X"))` call sites onto the `toastError(toast, "Failed to X", error)`
+  helper from `@checkstack/ui`. The helper applies the canonical
+  `"action: message"` prefix and 100-character truncation in one place,
+  and the now-orphaned `extractErrorMessage` imports are dropped from
+  the affected files. No business logic or component APIs changed.
+
+- f23f3c9: Standardise the empty / loading / error story on key list pages using
+  the shared `ListEmptyState`, `QueryErrorState`, and `Skeleton`
+  primitives from `@checkstack/ui`. Each affected page now branches
+  through the same `isLoading -> isError -> empty -> data` ladder, so
+  failed queries surface a retry-able inline error instead of silently
+  rendering an empty table, and loading states match the final layout
+  rather than flashing a generic spinner. No layout, business logic, or
+  query input shapes changed.
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+  - @checkstack/common@0.11.0
+  - @checkstack/auth-frontend@0.6.5
+  - @checkstack/frontend-api@0.5.2
+  - @checkstack/dashboard-frontend@0.7.5
+  - @checkstack/gitops-frontend@0.4.5
+  - @checkstack/ui@1.10.0
+  - @checkstack/anomaly-common@1.2.2
+  - @checkstack/catalog-common@2.2.2
+  - @checkstack/healthcheck-common@1.1.2
+  - @checkstack/satellite-common@0.5.2
+  - @checkstack/tips-frontend@0.2.5
+  - @checkstack/signal-frontend@0.1.4
+
 ## 0.19.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.19.4",
+  "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.0",
-    "@checkstack/auth-frontend": "0.6.3",
-    "@checkstack/catalog-common": "2.2.0",
-    "@checkstack/common": "0.10.0",
-    "@checkstack/dashboard-frontend": "0.7.3",
-    "@checkstack/frontend-api": "0.5.1",
-    "@checkstack/gitops-frontend": "0.4.3",
-    "@checkstack/healthcheck-common": "1.1.0",
-    "@checkstack/satellite-common": "0.5.0",
-    "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/tips-frontend": "0.2.3",
-    "@checkstack/ui": "1.8.3",
+    "@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/HealthCheckList.tsx

@@ -12,6 +12,10 @@ import {
   TableRow,
   Button,
   Badge,
+  Skeleton,
+  ResponsiveTable,
+  MobileCardList,
+  Card,
 } from "@checkstack/ui";
 import { Trash2, Edit, Pause, Play } from "lucide-react";
 import { useProvenanceLock } from "@checkstack/gitops-frontend";
@@ -40,26 +44,20 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
   };
 
   return (
-    <div className="rounded-md border bg-card">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Strategy</TableHead>
-            <TableHead>Interval (s)</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {configurations.length === 0 ? (
+    <>
+      <ResponsiveTable className="rounded-md border bg-card">
+        <Table>
+          <TableHeader>
             <TableRow>
-              <TableCell colSpan={5} className="h-24 text-center">
-                No health checks configured.
-              </TableCell>
+              <TableHead>Name</TableHead>
+              <TableHead>Strategy</TableHead>
+              <TableHead>Interval (s)</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
             </TableRow>
-          ) : (
-            configurations.map((config) => (
+          </TableHeader>
+          <TableBody>
+            {configurations.map((config) => (
               <HealthCheckRow
                 key={config.id}
                 config={config}
@@ -70,11 +68,107 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
                 onResume={onResume}
                 canManage={canManage}
               />
-            ))
-          )}
-        </TableBody>
-      </Table>
-    </div>
+            ))}
+          </TableBody>
+        </Table>
+      </ResponsiveTable>
+
+      <MobileCardList>
+        {configurations.map((config) => (
+          <HealthCheckMobileCard
+            key={config.id}
+            config={config}
+            strategyName={getStrategyName(config.strategyId)}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            onPause={onPause}
+            onResume={onResume}
+            canManage={canManage}
+          />
+        ))}
+      </MobileCardList>
+    </>
+  );
+};
+
+interface HealthCheckListSkeletonProps {
+  /**
+   * Number of placeholder rows to render. Defaults to 4 so the skeleton
+   * roughly matches a typical first-page configuration list.
+   */
+  rows?: number;
+}
+
+/**
+ * HealthCheckListSkeleton mirrors the shape of {@link HealthCheckList} so
+ * the page doesn't jump on load. Renders the same table chrome with
+ * `Skeleton` placeholders in each cell on desktop, and a stacked card
+ * skeleton on mobile to mirror the {@link MobileCardList} layout.
+ */
+export const HealthCheckListSkeleton: React.FC<
+  HealthCheckListSkeletonProps
+> = ({ rows = 4 }) => {
+  return (
+    <>
+      <ResponsiveTable className="rounded-md border bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Strategy</TableHead>
+              <TableHead>Interval (s)</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: rows }, (_, index) => (
+              <TableRow key={index}>
+                <TableCell>
+                  <Skeleton className="h-4 w-32" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-24" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-5 w-16 rounded-full" />
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-2">
+                    <Skeleton className="h-8 w-8" />
+                    <Skeleton className="h-8 w-8" />
+                    <Skeleton className="h-8 w-8" />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </ResponsiveTable>
+
+      <MobileCardList>
+        {Array.from({ length: rows }, (_, index) => (
+          <Card key={index} className="p-3">
+            <div className="flex items-center justify-between gap-2">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+            </div>
+            <div className="mt-2 flex items-center gap-2">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-12" />
+            </div>
+            <div className="mt-3 flex justify-end gap-2">
+              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-8 w-8" />
+            </div>
+          </Card>
+        ))}
+      </MobileCardList>
+    </>
   );
 };
 
@@ -115,57 +209,139 @@ const HealthCheckRow: React.FC<HealthCheckRowProps> = ({
         )}
       </TableCell>
       <TableCell className="text-right">
-        <div className="flex justify-end gap-2">
-          {canManage &&
-            onPause &&
-            onResume &&
-            (config.paused ? (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => onResume(config.id)}
-                title={isLocked ? "Managed by GitOps" : "Resume health check"}
-                disabled={isLocked}
-              >
-                <Play className="h-4 w-4" />
-              </Button>
-            ) : (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => onPause(config.id)}
-                title={isLocked ? "Managed by GitOps" : "Pause health check"}
-                disabled={isLocked}
-              >
-                <Pause className="h-4 w-4" />
-              </Button>
-            ))}
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => onEdit(config)}
-            title={
-              isLocked
-                ? "View configuration (Managed by GitOps)"
-                : "Edit configuration"
-            }
-          >
-            <Edit className="h-4 w-4" />
-          </Button>
-          {canManage && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="text-destructive hover:text-destructive"
-              onClick={() => onDelete(config.id)}
-              disabled={isLocked}
-              title={isLocked ? "Managed by GitOps" : "Delete configuration"}
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
+        <HealthCheckActionButtons
+          config={config}
+          isLocked={isLocked}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onPause={onPause}
+          onResume={onResume}
+          canManage={canManage}
+        />
       </TableCell>
     </TableRow>
   );
 };
+
+interface HealthCheckMobileCardProps {
+  config: HealthCheckConfiguration;
+  strategyName: string;
+  onEdit: (config: HealthCheckConfiguration) => void;
+  onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage: boolean;
+}
+
+const HealthCheckMobileCard: React.FC<HealthCheckMobileCardProps> = ({
+  config,
+  strategyName,
+  onEdit,
+  onDelete,
+  onPause,
+  onResume,
+  canManage,
+}) => {
+  const { isLocked } = useProvenanceLock({
+    kind: "Healthcheck",
+    entityId: config.id,
+  });
+
+  return (
+    <Card className={`p-3 ${config.paused ? "opacity-60" : ""}`}>
+      <div className="flex items-start justify-between gap-2">
+        <span className="font-medium truncate">{config.name}</span>
+        {config.paused ? (
+          <Badge variant="secondary">Paused</Badge>
+        ) : (
+          <Badge variant="default">Active</Badge>
+        )}
+      </div>
+      <div className="mt-1 text-xs text-muted-foreground">
+        {strategyName} &middot; every {config.intervalSeconds}s
+      </div>
+      <div className="mt-3 flex justify-end gap-2">
+        <HealthCheckActionButtons
+          config={config}
+          isLocked={isLocked}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onPause={onPause}
+          onResume={onResume}
+          canManage={canManage}
+        />
+      </div>
+    </Card>
+  );
+};
+
+interface HealthCheckActionButtonsProps {
+  config: HealthCheckConfiguration;
+  isLocked: boolean;
+  onEdit: (config: HealthCheckConfiguration) => void;
+  onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage: boolean;
+}
+
+const HealthCheckActionButtons: React.FC<HealthCheckActionButtonsProps> = ({
+  config,
+  isLocked,
+  onEdit,
+  onDelete,
+  onPause,
+  onResume,
+  canManage,
+}) => (
+  <div className="flex justify-end gap-2">
+    {canManage &&
+      onPause &&
+      onResume &&
+      (config.paused ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onResume(config.id)}
+          title={isLocked ? "Managed by GitOps" : "Resume health check"}
+          disabled={isLocked}
+        >
+          <Play className="h-4 w-4" />
+        </Button>
+      ) : (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onPause(config.id)}
+          title={isLocked ? "Managed by GitOps" : "Pause health check"}
+          disabled={isLocked}
+        >
+          <Pause className="h-4 w-4" />
+        </Button>
+      ))}
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => onEdit(config)}
+      title={
+        isLocked
+          ? "View configuration (Managed by GitOps)"
+          : "Edit configuration"
+      }
+    >
+      <Edit className="h-4 w-4" />
+    </Button>
+    {canManage && (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="text-destructive hover:text-destructive"
+        onClick={() => onDelete(config.id)}
+        disabled={isLocked}
+        title={isLocked ? "Managed by GitOps" : "Delete configuration"}
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    )}
+  </div>
+);

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}