@checkstack/automation-frontend 0.12.6 → 0.12.8

package/CHANGELOG.md

@@ -1,5 +1,149 @@
 # @checkstack/automation-frontend
 
+## 0.12.8
+
+### Patch Changes
+
+- be74b01: Migrate the automation surfaces onto the shared filter bar, and dedupe useDebouncedValue
+
+  Follows the native `DataTable` facet API with the first wave of migrations.
+
+  - `DataTableFacet` gains `kind: "select" | "pills"`. A segmented pill row is the
+    right control for two or three short options a reader benefits from seeing at
+    a glance, and several surfaces had independently built one - so the shared bar
+    renders that variant rather than forcing every list into a dropdown. Both
+    variants share one state, sentinel and URL round-trip, and the pills set
+    `aria-pressed`, which two of the hand-rolled groups they replace had omitted.
+  - `parsedFacetValue` reads a facet's selection back as a domain value by parsing
+    it against the schema that defines it. Facet state is stringly-typed because
+    it round-trips through the URL, but a server-side filter needs the narrow union
+    its query input declares; parsing rather than casting means a stale link
+    degrades to unconstrained instead of smuggling an unknown value into a request.
+  - The automation list and run-history pages drop their hand-rolled status pill
+    rows for the shared bar. Their filters now persist to the URL, so a link to
+    "the failed runs of this automation" reopens filtered. The run-history table
+    also gains the `surface={false}` it was missing, fixing a panel-in-panel.
+  - `useDebouncedValue` had been copied verbatim into six plugin packages, each
+    with a comment noting no shared version existed. All six now import the one in
+    `@checkstack/ui` and the copies are deleted.
+
+- be74b01: Move every table's filters into the table itself
+
+  The earlier migration unified how filter controls are BUILT but left several
+  rendering above their table as a detached bar, justified by the filtering
+  running server-side. That justification was wrong: where the narrowing runs says
+  nothing about where the control belongs, and a bar floating above a card reads
+  as unrelated to the list under it.
+
+  Now in the table's own bar:
+
+  - **Incidents** and **maintenances** - the Status column declares `filterValue`,
+    so the control sits with the column it filters. The selection still narrows
+    the list query, which is what actually reduces the fetch; the column filter
+    re-applying it over already-scoped rows is a harmless no-op.
+  - **Automation run history** - same, with the status pills.
+  - **Health-check list** - search, strategy and status move onto their columns.
+    The assigned-system control has no row to read (selecting a system swaps the
+    data source, which is what makes the catalog's per-system link work without
+    health-check grants), so it rides in as a control-only facet.
+  - **Health-check drawer** - the run-status control moves into the runs table.
+
+  `DataTable`'s `facets` now accepts a control WITHOUT a row accessor, rendered but
+  not applied. That is what lets a server-applied dimension stay in the table's bar
+  instead of forcing a second bar onto the page.
+
+  Fixes a trap the move exposed: with server-side filtering an empty `data` means
+  either "none exist" or "none match", and three of these pages rendered their
+  onboarding empty state either way - automation's run history replaced the whole
+  table, taking the filter controls with it, so a filter matching nothing could not
+  be cleared. Each now suppresses its `emptyState` while a filter is active and
+  offers a "no matches, clear filters" state instead.
+
+  Three surfaces deliberately keep an external bar, each narrowing more than one
+  list: the catalog toolbar (a browse grid plus three manage tabs), the automation
+  list (one table per accordion group), and the health-check drawer's source
+  control (it scopes the charts as well as the runs). The history detail page's
+  list is not a `DataTable` at all.
+
+- be74b01: Let you search the incident, maintenance and automation lists
+
+  These three management lists had their search box switched off, on the
+  assumption that you find a record by status rather than by typing its name. That
+  was wrong: every one of them shows a title or name column, and none of the
+  underlying queries paginate, so the full set is already in the browser and there
+  was nothing to gain by withholding search.
+
+  - **Incidents** gain a search box and a **severity filter**. Severity had a
+    column and a sort but no filter, so "show me the criticals" needed reading the
+    whole table. Its options are ordered by impact, matching how the column sorts;
+    deriving them would have sorted alphabetically as critical / major / minor.
+  - **Maintenances** gain a search box.
+  - **Automations** gain a search box. It is page-level rather than table-level
+    because that list renders one table per group - a table-owned box would only
+    ever search its own group, so a match inside a collapsed group could never
+    surface. Filtering ahead of the grouping also makes groups with no match
+    disappear instead of leaving a wall of empty accordions.
+
+  All three searches match the title/name AND the second line the row renders (a
+  description, or the group label), so a search matches the words you can actually
+  see on the row.
+
+- Updated dependencies [be74b01]
+- Updated dependencies [be5c907]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+- Updated dependencies [be74b01]
+  - @checkstack/ui@1.30.0
+  - @checkstack/auth-frontend@0.15.0
+  - @checkstack/script-packages-frontend@0.4.18
+  - @checkstack/gitops-frontend@0.7.9
+  - @checkstack/secrets-frontend@0.3.17
+  - @checkstack/auth-common@0.16.0
+  - @checkstack/frontend-api@0.17.0
+  - @checkstack/catalog-common@2.8.1
+
+## 0.12.7
+
+### Patch Changes
+
+- 6c8b36b: Annotate two deliberate effect-based state mirrors with the
+  `checkstack/no-state-seed-in-effect` lint rule: the automation edit page's
+  YAML-tab mirror of the visual editor's `definition`, and the theme toggle's
+  mirror of the global resolved theme. Both are one-way mirrors of values the user
+  never edits directly, so they are safe exceptions to the rule. Comment-only - no
+  runtime behavior change.
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+  - @checkstack/ui@1.29.0
+  - @checkstack/auth-common@0.15.0
+  - @checkstack/auth-frontend@0.14.0
+  - @checkstack/catalog-common@2.8.0
+  - @checkstack/frontend-api@0.16.1
+  - @checkstack/gitops-frontend@0.7.8
+  - @checkstack/secrets-frontend@0.3.16
+  - @checkstack/common@0.23.0
+  - @checkstack/script-packages-frontend@0.4.17
+  - @checkstack/ai-common@0.6.7
+  - @checkstack/automation-common@0.10.2
+  - @checkstack/integration-common@0.9.10
+  - @checkstack/template-engine@0.4.12
+  - @checkstack/signal-frontend@0.3.7
+
 ## 0.12.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/automation-frontend",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "license": "Elastic-2.0",
   "type": "module",
   "sideEffects": [
@@ -16,20 +16,20 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-common": "0.14.0",
-    "@checkstack/auth-frontend": "0.13.6",
-    "@checkstack/automation-common": "0.10.1",
-    "@checkstack/ai-common": "0.6.6",
-    "@checkstack/catalog-common": "2.7.3",
-    "@checkstack/common": "0.22.0",
-    "@checkstack/frontend-api": "0.16.0",
-    "@checkstack/gitops-frontend": "0.7.7",
-    "@checkstack/integration-common": "0.9.9",
-    "@checkstack/script-packages-frontend": "0.4.16",
-    "@checkstack/secrets-frontend": "0.3.15",
-    "@checkstack/signal-frontend": "0.3.6",
-    "@checkstack/template-engine": "0.4.11",
-    "@checkstack/ui": "1.28.2",
+    "@checkstack/auth-common": "0.16.0",
+    "@checkstack/auth-frontend": "0.15.0",
+    "@checkstack/automation-common": "0.10.2",
+    "@checkstack/ai-common": "0.6.7",
+    "@checkstack/catalog-common": "2.8.1",
+    "@checkstack/common": "0.23.0",
+    "@checkstack/frontend-api": "0.17.0",
+    "@checkstack/gitops-frontend": "0.7.9",
+    "@checkstack/integration-common": "0.9.10",
+    "@checkstack/script-packages-frontend": "0.4.18",
+    "@checkstack/secrets-frontend": "0.3.17",
+    "@checkstack/signal-frontend": "0.3.7",
+    "@checkstack/template-engine": "0.4.12",
+    "@checkstack/ui": "1.30.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -43,6 +43,6 @@
     "typescript": "^5.0.0",
     "@types/react": "^19.0.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.7.5"
+    "@checkstack/scripts": "0.7.6"
   }
 }

package/src/pages/AutomationEditPage.tsx

@@ -250,6 +250,7 @@ const AutomationEditContent: React.FC = () => {
   // Keep the YAML mirror in sync with definition while the visual editor
   // is active — the YAML tab needs a non-stale starting point when the
   // operator switches over.
+  // eslint-disable-next-line checkstack/no-state-seed-in-effect -- deliberate live mirror of the visual editor's `definition` into the YAML tab's starting text; gated on the visual tab so it never overwrites in-progress YAML edits, and `definition` is local state (the actual query seeds already use useInitOnceForKey).
   React.useEffect(() => {
     if (tab === "visual") {
       setYamlText(stringifyYaml(definition));

package/src/pages/AutomationListPage.tsx

@@ -13,6 +13,7 @@ import {
   automationAccess,
   automationRoutes,
   automationResourceTypes,
+  AutomationStatusSchema,
   type Automation,
 } from "@checkstack/automation-common";
 import {
@@ -25,7 +26,11 @@ import {
   Badge,
   Toggle,
   DataTable,
+  DataTableFilterBar,
+  useDataTableFilters,
+  parsedFacetValue,
   type DataTableColumn,
+  type DataTableFacet,
   RowActions,
   RowAction,
   LoadingSpinner,
@@ -42,7 +47,10 @@ import {
 } from "@checkstack/ui";
 import { resolveRoute } from "@checkstack/common";
 import { formatDistanceToNow } from "date-fns";
-import { groupAutomations } from "./automation-grouping";
+import {
+  filterAutomationsByQuery,
+  groupAutomations,
+} from "./automation-grouping";
 
 /**
  * Left status-accent class for an automation's enabled/disabled state. Reuses
@@ -67,6 +75,23 @@ const automationAccent = (status: Automation["status"]): string =>
  * Cache shape of the `listAutomations` loader: the paginated wrapper around the
  * automation rows. Used to type the optimistic snapshot/patch on the toggle.
  */
+/**
+ * Enabled/disabled, as pills: two short options a reader benefits from seeing
+ * at a glance. `value` mirrors what the server filters on, so the facet stays
+ * meaningful if this list ever filters client-side.
+ */
+const AUTOMATION_STATUS_FACET: DataTableFacet<Automation> = {
+  id: "status",
+  label: "Status",
+  anyLabel: "All",
+  kind: "pills",
+  options: [
+    { value: "enabled", label: "Enabled" },
+    { value: "disabled", label: "Disabled" },
+  ],
+  value: (automation) => automation.status,
+};
+
 type AutomationsQueryData = {
   items: Automation[];
 };
@@ -93,9 +118,16 @@ const AutomationListContent: React.FC = () => {
     AutomationApi.contract.createAutomation,
   );
 
-  const [statusFilter, setStatusFilter] = React.useState<
-    "all" | "enabled" | "disabled"
-  >("all");
+  // Filtering is server-side (it narrows the list query's input), so the table
+  // itself declares no facets - the shared filter bar drives the query. The
+  // state still lives in the URL, so a filtered list is shareable and survives
+  // opening an automation and coming back.
+  const filters = useDataTableFilters({ facetIds: [AUTOMATION_STATUS_FACET.id] });
+  const statusFilter = parsedFacetValue({
+    filters: filters.state,
+    facetId: AUTOMATION_STATUS_FACET.id,
+    schema: AutomationStatusSchema,
+  });
   const [deleteId, setDeleteId] = React.useState<string | undefined>();
 
   // The loader input depends on the status filter, so the cache key changes
@@ -106,7 +138,7 @@ const AutomationListContent: React.FC = () => {
     () => ({
       limit: 100,
       offset: 0,
-      ...(statusFilter === "all" ? {} : { status: statusFilter }),
+      ...(statusFilter === undefined ? {} : { status: statusFilter }),
     }),
     [statusFilter],
   );
@@ -189,9 +221,21 @@ const AutomationListContent: React.FC = () => {
   });
 
   // Collapsible sections, sorted alphabetically with "Ungrouped" last.
+  // Search narrows BEFORE grouping, so a match inside a collapsed group still
+  // surfaces and groups left with nothing simply disappear. Debounced: a fast
+  // typist should not re-group a long list on every keystroke.
+  const matchedAutomations = React.useMemo(
+    () =>
+      filterAutomationsByQuery({
+        automations,
+        query: filters.debounced.query,
+      }),
+    [automations, filters.debounced.query],
+  );
+
   const groups = React.useMemo(
-    () => groupAutomations({ automations }),
-    [automations],
+    () => groupAutomations({ automations: matchedAutomations }),
+    [matchedAutomations],
   );
   // All sections expanded by default so nothing is hidden on first load.
   const allGroupKeys = React.useMemo(() => groups.map((g) => g.key), [groups]);
@@ -478,19 +522,15 @@ const AutomationListContent: React.FC = () => {
         <CardHeader className="border-b">
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <CardTitle className="text-base">All automations</CardTitle>
-            <div className="flex items-center gap-1">
-              {(["all", "enabled", "disabled"] as const).map((option) => (
-                <Button
-                  key={option}
-                  size="sm"
-                  variant={statusFilter === option ? "primary" : "outline"}
-                  onClick={() => setStatusFilter(option)}
-                  className="capitalize"
-                >
-                  {option}
-                </Button>
-              ))}
-            </div>
+            <DataTableFilterBar
+              filters={filters.state}
+              onFiltersChange={filters.setState}
+              facets={[AUTOMATION_STATUS_FACET]}
+              // The list groups into several tables, so there is no single one
+              // to search; the status facet is the whole control here.
+              searchable={false}
+              className="md:justify-end"
+            />
           </div>
         </CardHeader>
         <CardContent className="p-0">

package/src/pages/RunsPage.tsx

@@ -11,8 +11,9 @@ import {
   AutomationApi,
   automationAccess,
   automationRoutes,
+  RunStatusSchema,
 } from "@checkstack/automation-common";
-import type { RunStatus, AutomationRun } from "@checkstack/automation-common";
+import type { AutomationRun } from "@checkstack/automation-common";
 import {
   PageLayout,
   Card,
@@ -21,7 +22,10 @@ import {
   CardTitle,
   Button,
   DataTable,
+  useDataTableFilters,
+  parsedFacetValue,
   type DataTableColumn,
+  type DataTableFacetOption,
   RowActions,
   RowAction,
   LoadingSpinner,
@@ -33,6 +37,20 @@ import { formatDistanceToNow } from "date-fns";
 import { RunStatusPill } from "./run-status-pill";
 import { formatDuration } from "./run-duration";
 
+/**
+ * Run outcome, as pills: the whole point of this page is scanning for the runs
+ * that went wrong, so every outcome stays one click away rather than behind a
+ * dropdown. Options mirror `RunStatusSchema`, which is what the query filters on.
+ */
+const RUN_STATUS_FACET_ID = "status";
+const RUN_STATUS_OPTIONS: readonly DataTableFacetOption[] = [
+  { value: "running", label: "Running" },
+  { value: "success", label: "Success" },
+  { value: "failed", label: "Failed" },
+  { value: "cancelled", label: "Cancelled" },
+  { value: "waiting", label: "Waiting" },
+];
+
 /**
  * Run history for a single automation. Status filter pinned to the top;
  * rows link to the run detail page. We also surface a `← Back to
@@ -47,9 +65,15 @@ const RunsPageContent: React.FC = () => {
   const { allowed, loading: accessLoading } = accessApi.useAccess(
     automationAccess.read,
   );
-  const [statusFilter, setStatusFilter] = React.useState<RunStatus | "all">(
-    "all",
-  );
+  // The Status column owns the control; the selection ALSO narrows the runs
+  // query, which is what reduces the fetch. URL-backed, so a link to "the failed
+  // runs of this automation" reopens filtered.
+  const filters = useDataTableFilters({ facetIds: [RUN_STATUS_FACET_ID] });
+  const statusFilter = parsedFacetValue({
+    filters: filters.state,
+    facetId: RUN_STATUS_FACET_ID,
+    schema: RunStatusSchema,
+  });
 
   const automationQuery = client.getAutomation.useQuery(
     { id: automationId ?? "" },
@@ -63,7 +87,7 @@ const RunsPageContent: React.FC = () => {
     {
       automationId: automationId ?? "",
       limit: 50,
-      ...(statusFilter === "all" ? {} : { status: statusFilter }),
+      ...(statusFilter === undefined ? {} : { status: statusFilter }),
     },
     { enabled: Boolean(automationId) },
   );
@@ -75,6 +99,12 @@ const RunsPageContent: React.FC = () => {
       id: "status",
       header: "Status",
       sortValue: (run) => run.status,
+      filterValue: (run) => run.status,
+      filterOptions: RUN_STATUS_OPTIONS,
+      // Pills: the whole point of this page is scanning for the runs that went
+      // wrong, so every outcome stays one click away.
+      filterKind: "pills",
+      filterAnyLabel: "All",
       cell: (run) => <RunStatusPill status={run.status} />,
     },
     {
@@ -162,31 +192,7 @@ const RunsPageContent: React.FC = () => {
     >
       <Card>
         <CardHeader className="border-b">
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <CardTitle className="text-base">Runs</CardTitle>
-            <div className="flex flex-wrap items-center gap-1">
-              {(
-                [
-                  "all",
-                  "running",
-                  "success",
-                  "failed",
-                  "cancelled",
-                  "waiting",
-                ] as const
-              ).map((option) => (
-                <Button
-                  key={option}
-                  size="sm"
-                  variant={statusFilter === option ? "primary" : "outline"}
-                  onClick={() => setStatusFilter(option)}
-                  className="capitalize"
-                >
-                  {option}
-                </Button>
-              ))}
-            </div>
-          </div>
+          <CardTitle className="text-base">Runs</CardTitle>
         </CardHeader>
         <CardContent className="p-0">
           {runsQuery.isLoading ? (
@@ -198,18 +204,48 @@ const RunsPageContent: React.FC = () => {
               error={runsQuery.error}
               onRetry={() => runsQuery.refetch()}
             />
-          ) : runs.length === 0 ? (
-            <EmptyState
-              icon={<History className="h-8 w-8 text-muted-foreground" />}
-              title="No runs match this filter"
-              description="Manually trigger the automation from the edit page to generate a run."
-            />
           ) : (
             <DataTable
               data={runs}
               columns={columns}
               getRowId={(run) => run.id}
+              // The Status column declares its own filter, so the pills sit in
+              // the table's bar. Runs are identified by time and outcome, not
+              // by a name worth typing, so there is no search box.
+              filters={filters.state}
+              onFiltersChange={filters.setState}
+              onClearFilters={filters.clear}
               searchable={false}
+              // The list arrives already narrowed by the server, so an empty
+              // `data` means either outcome. Suppressing `emptyState` while a
+              // filter is active is what lets the table tell them apart - and
+              // rendering both INSIDE the table keeps the pills on screen, so a
+              // filter that matches nothing can still be cleared.
+              emptyState={
+                filters.active ? undefined : (
+                  <EmptyState
+                    icon={<History className="h-8 w-8 text-muted-foreground" />}
+                    title="No runs yet"
+                    description="Manually trigger the automation from the edit page to generate a run."
+                  />
+                )
+              }
+              noResultsState={
+                <EmptyState
+                  icon={<History className="h-8 w-8 text-muted-foreground" />}
+                  title="No runs match this filter"
+                  description="No run of this automation has that outcome."
+                  actions={
+                    <Button variant="outline" onClick={filters.clear}>
+                      Clear filter
+                    </Button>
+                  }
+                />
+              }
+              // Nested inside the page's opaque Card, so the default bg-card
+              // surface would create a panel-in-panel; the enclosing Card
+              // already provides the opaque background.
+              surface={false}
               renderMobileCard={(run) => (
                 <div className="rounded-md border bg-surface p-4">
                   <div className="flex items-start justify-between gap-2">

package/src/pages/automation-grouping.test.ts

@@ -1,6 +1,7 @@
-import { describe, expect, it } from "bun:test";
+import { describe, expect, it, test } from "bun:test";
 import type { Automation, AutomationDefinition } from "@checkstack/automation-common";
 import {
+  filterAutomationsByQuery,
   groupAutomations,
   UNGROUPED_LABEL,
 } from "./automation-grouping";
@@ -85,3 +86,39 @@ describe("groupAutomations", () => {
     expect(groups.some((g) => g.items.length === 0)).toBe(false);
   });
 });
+
+describe("filterAutomationsByQuery", () => {
+  const rows = [
+    { name: "Nightly backup", group: "Ops" },
+    { name: "Deploy notifier", group: "Release" },
+    { name: "Cleanup", group: undefined },
+  ] as Automation[];
+
+  const names = (query: string) =>
+    filterAutomationsByQuery({ automations: rows, query }).map((a) => a.name);
+
+  test("matches the name, case-insensitively on a substring", () => {
+    expect(names("NIGHT")).toEqual(["Nightly backup"]);
+  });
+
+  test("matches the group label too", () => {
+    // The group is a heading the reader can see, so it is fair to search.
+    expect(names("release")).toEqual(["Deploy notifier"]);
+  });
+
+  test("an ungrouped automation is still searchable by name", () => {
+    expect(names("cleanup")).toEqual(["Cleanup"]);
+  });
+
+  test("an empty or whitespace query returns the same reference", () => {
+    // An idle search box must not re-group the list on every render.
+    expect(filterAutomationsByQuery({ automations: rows, query: "" })).toBe(rows);
+    expect(filterAutomationsByQuery({ automations: rows, query: "  " })).toBe(
+      rows,
+    );
+  });
+
+  test("a query matching nothing yields an empty list, not every row", () => {
+    expect(names("nonexistent")).toEqual([]);
+  });
+});

package/src/pages/automation-grouping.ts

@@ -63,3 +63,32 @@ export function groupAutomations({
 
   return groups;
 }
+
+/**
+ * Narrow a flat automation list by a free-text query, matched against the name
+ * and the group label - the two things the list actually shows above the fold.
+ *
+ * Search lives here rather than on the table because the list renders ONE table
+ * per group: a table-owned search box would filter its own group only, so a
+ * query could never surface a match sitting in a collapsed group. Filtering
+ * before `groupAutomations` also makes empty groups disappear, so the result
+ * reads as "here is what matched" instead of a wall of empty accordions.
+ *
+ * An empty or whitespace-only query returns the SAME array reference, so an
+ * idle search box costs no re-grouping.
+ */
+export function filterAutomationsByQuery({
+  automations,
+  query,
+}: {
+  automations: Automation[];
+  query: string;
+}): Automation[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return automations;
+  return automations.filter((automation) =>
+    `${automation.name} ${automation.group ?? ""}`
+      .toLowerCase()
+      .includes(needle),
+  );
+}

package/src/pages/run-status-pill.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "@checkstack/ui";
+import { cn, pillToneStyles, StatusPill } from "@checkstack/ui";
 import type { RunStatus } from "@checkstack/automation-common";
 
 /**
@@ -21,36 +21,16 @@ export const RUN_STATUS_TONE: Record<RunStatus, RunStatusTone> = {
 };
 
 /**
- * Per-tone pill + dot + left-accent classes. Spelled out as full literal
- * strings (not interpolated) so Tailwind's JIT keeps them, driven by the
- * colorblind-safe status triad. Status reads as hue + dot + text label, never
- * color alone. The `accent` class drives the left status stripe on cards and
- * timeline rows so the stripe always matches this pill.
+ * Per-tone pill + dot + left-accent classes, taken from the shared
+ * `pillToneStyles` table rather than a private copy. The `accent` class drives
+ * the left status stripe on cards and timeline rows so the stripe always
+ * matches the pill.
  */
-export const RUN_TONE_STYLES: Record<
-  RunStatusTone,
-  { pill: string; dot: string; accent: string }
-> = {
-  ok: {
-    pill: "bg-status-ok/10 text-status-ok",
-    dot: "bg-status-ok",
-    accent: "bg-status-ok",
-  },
-  warn: {
-    pill: "bg-status-warn/10 text-status-warn",
-    dot: "bg-status-warn",
-    accent: "bg-status-warn",
-  },
-  down: {
-    pill: "bg-status-down/10 text-status-down",
-    dot: "bg-status-down",
-    accent: "bg-status-down",
-  },
-  unknown: {
-    pill: "bg-status-unknown/10 text-status-unknown",
-    dot: "bg-status-unknown",
-    accent: "bg-status-unknown",
-  },
+export const RUN_TONE_STYLES: Pick<typeof pillToneStyles, RunStatusTone> = {
+  ok: pillToneStyles.ok,
+  warn: pillToneStyles.warn,
+  down: pillToneStyles.down,
+  unknown: pillToneStyles.unknown,
 };
 
 /**
@@ -61,18 +41,11 @@ export const RUN_TONE_STYLES: Record<
 export const RunStatusPill: React.FC<{
   status: RunStatus;
   className?: string;
-}> = ({ status, className }) => {
-  const styles = RUN_TONE_STYLES[RUN_STATUS_TONE[status]];
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium capitalize",
-        styles.pill,
-        className,
-      )}
-    >
-      <span className={cn("size-1.5 rounded-full", styles.dot)} aria-hidden />
-      {status}
-    </span>
-  );
-};
+}> = ({ status, className }) => (
+  <StatusPill
+    tone={RUN_STATUS_TONE[status]}
+    className={cn("capitalize", className)}
+  >
+    {status}
+  </StatusPill>
+);