@runwisp/ui 1.3.0 → 1.5.0

package/src/lib/components/dashboard/RunsList.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-    import { Clock, ArrowUpDown, X, Square, Trash2, RotateCw } from "@lucide/svelte";
+    import { Clock, ArrowUpDown, X, Square, Trash, RotateCw } from "@lucide/svelte";
     import { untrack } from "svelte";
     import { SvelteSet } from "svelte/reactivity";
     import { createVirtualizer } from "@tanstack/svelte-virtual";
@@ -19,9 +19,8 @@
     import type { RunMotion } from "../../utils/run-motion.js";
     import EmptyState from "../EmptyState.svelte";
     import RunFilterPopover from "./RunFilterPopover.svelte";
-    import type { Run } from "./types.js";
-    import type { RunSelector, RunStatus } from "@runwisp/common";
-    import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
+    import { displayStatus, type Run, type RunSelector, type RunStatus } from "@runwisp/common";
+    import { RUN_STATUS_CONFIG } from "./status-config.js";
     import {
         activeDimensions,
         clearDimension,
@@ -71,7 +70,6 @@
         onBulkRerun,
         getInstanceCount = () => 1,
         motion,
-        flush = false,
         outputSearch = false,
         outputQuery = "",
         outputMatches = null,
@@ -105,11 +103,6 @@
         // Which runs arrived or were removed live moments ago: their rows animate
         // in or out. Page loads, scrolling and filtering never do.
         motion?: RunMotion;
-        // Flush rail mode (task detail page): render as a borderless rail that
-        // fills its column and is divided from the detail panel by a single right
-        // border — no card chrome of its own. Default renders the standalone card
-        // the cross-task /runs grid expects.
-        flush?: boolean;
         // Output search (history rail): filters runs by what they printed. The
         // search box lives in the app header now; the parent owns the box, the
         // query, and the async log search. This component just renders the
@@ -392,17 +385,15 @@
     });
 </script>
 
+<!-- A borderless rail that fills its column, divided from the detail panel by
+     a single right border. -->
 <div
-    class={flush
-        ? "flex h-full w-full flex-col overflow-hidden border-b border-outline bg-surface md:w-[300px] md:shrink-0 md:border-r md:border-b-0"
-        : "flex flex-col overflow-hidden rounded-[4px] border border-outline bg-surface-raised shadow-sm md:col-span-4 lg:col-span-3"}
+    class="flex h-full w-full flex-col overflow-hidden border-b border-outline bg-surface md:w-[300px] md:shrink-0 md:border-r md:border-b-0"
 >
     <div
         class="flex shrink-0 items-center gap-2 border-b px-3 py-2 {hasSelection
             ? 'border-outline-faint bg-primary-soft/40'
-            : flush
-              ? 'border-transparent bg-surface'
-              : 'border-outline-faint bg-surface-sunken'}"
+            : 'border-transparent bg-surface'}"
     >
         {#if bulkActions}
             <label
@@ -459,7 +450,7 @@
                             )}
                         title="Delete run{selectionCount === 1 ? '' : 's'}"
                     >
-                        {#snippet icon()}<Trash2 size={14} />{/snippet}
+                        {#snippet icon()}<Trash size={14} />{/snippet}
                     </Button>
                 {/if}
             </div>
@@ -474,6 +465,8 @@
             >
                 {#if outputSearchActive}
                     {matchedRuns.length} of {items.length}
+                {:else if loading && items.length === 0}
+                    <!-- Count unknown until the first page lands. -->
                 {:else}
                     {total}
                     {total === 1 ? "run" : "runs"}
@@ -481,7 +474,7 @@
             </span>
             <div class="ml-auto flex items-center gap-1">
                 {#if showFilters}
-                    <RunFilterPopover bind:filters {showTask} {tasks} compact={flush} />
+                    <RunFilterPopover bind:filters {showTask} {tasks} />
                 {/if}
                 <Button
                     variant="ghost"
@@ -533,22 +526,7 @@
             <!-- Output-search results: the rail filters to runs that printed the
                  query, each annotated with the matching line. -->
             {#if outputSearchPending}
-                <!-- Searching: shimmer placeholders shaped like result rows. -->
-                <div class="flex flex-col gap-0.5" aria-busy="true" aria-label="Searching output">
-                    {#each [0, 1, 2, 3, 4] as i (i)}
-                        <div class="flex items-center gap-2.5 rounded-[3px] px-3 py-2.5">
-                            <span
-                                class="size-[9px] shrink-0 animate-pulse rounded-full bg-surface-sunken"
-                            ></span>
-                            <span
-                                class="h-3 animate-pulse rounded bg-surface-sunken"
-                                style:width="{70 - i * 8}%"
-                            ></span>
-                            <span class="ml-auto h-3 w-9 animate-pulse rounded bg-surface-sunken"
-                            ></span>
-                        </div>
-                    {/each}
-                </div>
+                {@render skeletonRows("Searching output")}
             {:else if matchedRuns.length === 0}
                 <div class="px-4 py-8 text-center text-xs leading-relaxed text-on-surface-muted">
                     No output matches
@@ -571,7 +549,9 @@
                     {/each}
                 </div>
             {/if}
-        {:else if items.length === 0 && !loading}
+        {:else if items.length === 0 && loading}
+            {@render skeletonRows("Loading runs")}
+        {:else if items.length === 0}
             <EmptyState
                 title={emptyText}
                 description={emptyDescription}
@@ -622,6 +602,46 @@
 
 <!-- Status dot. With bulk actions on it fades out — on row hover, or whenever a
      selection exists — so the row checkbox can take its place over it. -->
+<!-- Placeholders shaped like this list's run rows (same padding, dot, text
+     and right readout), while a search or the first page is in flight. -->
+{#snippet skeletonRows(label: string)}
+    <div class="flex flex-col gap-0.5" role="status" aria-busy="true" aria-label={label}>
+        {#each [0, 1, 2, 3, 4, 5] as i (i)}
+            <div
+                class="rounded-[3px] border border-transparent {showTaskName
+                    ? 'p-3'
+                    : 'px-3 py-[11px]'}"
+            >
+                <div class="flex items-center {showTaskName ? 'gap-2.5' : 'gap-[11px]'}">
+                    <span class="size-[9px] shrink-0 animate-pulse rounded-full bg-outline-hover"
+                    ></span>
+                    {#if showTaskName}
+                        <span class="flex min-w-0 flex-1 flex-col gap-1.5 py-0.5">
+                            <span
+                                class="h-3 animate-pulse rounded-[3px] bg-outline-hover"
+                                style:width="{62 - (i % 3) * 12}%"
+                            ></span>
+                            <span class="h-2 w-2/5 animate-pulse rounded-[3px] bg-outline-hover"
+                            ></span>
+                        </span>
+                        <span
+                            class="h-2.5 w-9 shrink-0 animate-pulse self-start rounded-[3px] bg-outline-hover"
+                        ></span>
+                    {:else}
+                        <span
+                            class="h-3 animate-pulse rounded-[3px] bg-outline-hover"
+                            style:width="{58 - (i % 3) * 8}%"
+                        ></span>
+                        <span
+                            class="ml-auto h-2.5 w-9 shrink-0 animate-pulse rounded-[3px] bg-outline-hover"
+                        ></span>
+                    {/if}
+                </div>
+            </div>
+        {/each}
+    </div>
+{/snippet}
+
 {#snippet statusDot(colorClass: string, running: boolean)}
     <span
         class="{colorClass} size-[9px] shrink-0 rounded-full bg-current ring-[3px] ring-current/20 {running
@@ -659,8 +679,8 @@
 {/snippet}
 
 {#snippet runRowButton(run: Run, isActive: boolean, match: RunOutputMatch | undefined)}
-    {@const dstatus = runDisplayStatus(run)}
-    {@const config = getRunStatusConfig(dstatus)}
+    {@const dstatus = displayStatus(run.status, run.endReason)}
+    {@const config = RUN_STATUS_CONFIG[dstatus]}
     {@const running = run.status === "running"}
     {@const spine = config.dot.replace(" animate-pulse", "")}
     {@const startedAt = run.startedAt ?? run.createdAt}

package/src/lib/components/dashboard/cron-format.ts

@@ -2,7 +2,7 @@
 
 import cronstrue from "cronstrue";
 
-export interface HumanizedCron {
+interface HumanizedCron {
     /** Display text — humanized when possible, otherwise the raw expression. */
     humanized: string;
     /** The original cron expression, for tooltips. */

package/src/lib/components/dashboard/run-filters.test.ts

@@ -6,13 +6,10 @@ import { END_REASONS } from "@runwisp/common";
 import {
     emptyRunFilters,
     FAILURE_STATUS_TOKEN,
-    NEEDS_ATTENTION_STATUSES,
-    isNeedsAttention,
     dimensionActive,
     activeDimensions,
     activeFilterCount,
     clearDimension,
-    clearPopoverFilters,
     humanizeStatus,
     triggerDescription,
     FILTERABLE_TRIGGERS,
@@ -29,7 +26,6 @@ import {
     exitCodeRangeActive,
     isExitCodeExprValid,
     exitCodeChipLabel,
-    exitCodePropChanged,
     type StatusBucket,
     type RunsListFilters,
 } from "./run-filters.js";
@@ -54,23 +50,6 @@ describe("emptyRunFilters", () => {
     });
 });
 
-describe("isNeedsAttention", () => {
-    it("is true for exactly the attention set, order-insensitive", () => {
-        expect(isNeedsAttention([...NEEDS_ATTENTION_STATUSES])).toBe(true);
-        expect(isNeedsAttention([...NEEDS_ATTENTION_STATUSES].reverse())).toBe(true);
-    });
-
-    it("is exactly the failure sentinel (server resolves it to is_failure)", () => {
-        expect(NEEDS_ATTENTION_STATUSES).toEqual([FAILURE_STATUS_TOKEN]);
-    });
-
-    it("is false for a raw end reason or a different set", () => {
-        expect(isNeedsAttention(["failed"])).toBe(false);
-        expect(isNeedsAttention(["succeeded"])).toBe(false);
-        expect(isNeedsAttention([])).toBe(false);
-    });
-});
-
 describe("dimensionActive / activeDimensions", () => {
     it("detects each dimension independently", () => {
         expect(dimensionActive(base({ statuses: ["failed"] }), "status")).toBe(true);
@@ -125,25 +104,6 @@ describe("clearDimension", () => {
     });
 });
 
-describe("clearPopoverFilters", () => {
-    it("clears every popover dimension but keeps search and sort", () => {
-        const f = base({
-            search: "nightly",
-            sortDirection: "asc",
-            statuses: ["failed"],
-            taskName: "backup",
-            triggeredBy: "cron",
-            exitCode: "1",
-            retriesOnly: true,
-            createdAfter: "2026-01-01T00:00:00Z",
-        });
-        const cleared = clearPopoverFilters(f);
-        expect(activeFilterCount(cleared)).toBe(0);
-        expect(cleared.search).toBe("nightly");
-        expect(cleared.sortDirection).toBe("asc");
-    });
-});
-
 describe("humanizeStatus", () => {
     it("title-cases and de-snakes a status token", () => {
         expect(humanizeStatus("log_overflow")).toBe("Log overflow");
@@ -154,8 +114,8 @@ describe("humanizeStatus", () => {
 
 describe("statusChipLabel", () => {
     it("names a bucket when the selection matches one exactly", () => {
-        // The Failed bucket is the needs-attention set.
-        expect(statusChipLabel([...NEEDS_ATTENTION_STATUSES])).toBe("Failed");
+        // The Failed bucket is the failure sentinel.
+        expect(statusChipLabel([FAILURE_STATUS_TOKEN])).toBe("Failed");
         expect(statusChipLabel(["pending", "running"])).toBe("Running");
         expect(statusChipLabel(["succeeded"])).toBe("Succeeded");
     });
@@ -332,19 +292,3 @@ describe("exit-code expression", () => {
         expect(exitCodeChipLabel(" 137 ")).toBe("Exit 137");
     });
 });
-
-describe("exitCodePropChanged", () => {
-    it("is false when the committed value is unchanged (unrelated filters update)", () => {
-        expect(exitCodePropChanged("137", "137")).toBe(false);
-        expect(exitCodePropChanged(undefined, undefined)).toBe(false);
-    });
-
-    it("is true when the exit-code filter was cleared externally (chip removed)", () => {
-        expect(exitCodePropChanged("137", undefined)).toBe(true);
-    });
-
-    it("is true when the exit-code filter was set to a new committed value", () => {
-        expect(exitCodePropChanged(undefined, "200")).toBe(true);
-        expect(exitCodePropChanged("137", "200")).toBe(true);
-    });
-});

package/src/lib/components/dashboard/run-filters.ts

@@ -3,8 +3,6 @@
 
 import { TRIGGERS, type Trigger } from "@runwisp/common";
 
-export type RunsListSortDirection = "asc" | "desc" | "";
-
 /**
  * The single filter shape shared by the runs list, the filter popover, the
  * SSE-merge source, and the bulk selector. Every field beyond `search` and
@@ -19,7 +17,7 @@ export type RunsListSortDirection = "asc" | "desc" | "";
 export interface RunsListFilters {
     search: string;
     statuses: string[];
-    sortDirection: RunsListSortDirection;
+    sortDirection: "asc" | "desc" | "";
     // Optional dimensions explicitly admit `undefined` so a dimension can be
     // cleared by reassignment (`{ ...f, x: undefined }`) under the project's
     // exactOptionalPropertyTypes — a fresh object reference is what re-triggers
@@ -52,21 +50,6 @@ export function emptyRunFilters(): RunsListFilters {
  */
 export const FAILURE_STATUS_TOKEN = "failure";
 
-/**
- * The status set backing the "Failed" browse filter and the one-click preset
- * that serves Prime Directive #1 — nothing silently fails. Just the failure
- * sentinel: the server resolves it to the per-task `isFailure` classification
- * rather than a fixed end-reason list.
- */
-export const NEEDS_ATTENTION_STATUSES: readonly string[] = [FAILURE_STATUS_TOKEN];
-
-/** True when `statuses` is exactly the needs-attention set (order-insensitive). */
-export function isNeedsAttention(statuses: string[]): boolean {
-    if (statuses.length !== NEEDS_ATTENTION_STATUSES.length) return false;
-    const set = new Set(statuses);
-    return NEEDS_ATTENTION_STATUSES.every((s) => set.has(s));
-}
-
 /**
  * Outcome buckets: the 14 individual run statuses collapsed into five
  * plain-language groups, so the common case is a five-item pick instead of a
@@ -74,8 +57,9 @@ export function isNeedsAttention(statuses: string[]): boolean {
  * one adds/removes its members, and the popover's "Advanced" section still
  * exposes the individual statuses for surgical filters (e.g. only `timeout`).
  *
- * Every status appears in exactly one bucket; `Failed` is the needs-attention
- * set (Prime Directive #1). `dot` mirrors that group's color in
+ * Every status appears in exactly one bucket; `Failed` is the failure sentinel,
+ * which the server resolves to each run's `isFailure` bit. `dot` mirrors that
+ * group's color in
  * RUN_STATUS_CONFIG so the bucket reads at a glance.
  */
 export interface StatusBucket {
@@ -93,7 +77,7 @@ export const STATUS_BUCKETS: readonly StatusBucket[] = [
         key: "failed",
         label: "Failed",
         dot: "bg-danger-surface",
-        statuses: NEEDS_ATTENTION_STATUSES,
+        statuses: [FAILURE_STATUS_TOKEN],
     },
     {
         key: "skipped",
@@ -199,23 +183,6 @@ export function clearDimension(f: RunsListFilters, dim: FilterDimension): RunsLi
     }
 }
 
-/**
- * Clear every popover dimension at once, preserving the header search and the
- * sort direction (those are separate toolbar controls, not popover state).
- */
-export function clearPopoverFilters(f: RunsListFilters): RunsListFilters {
-    return {
-        ...f,
-        statuses: [],
-        createdAfter: undefined,
-        createdBefore: undefined,
-        taskName: undefined,
-        triggeredBy: undefined,
-        exitCode: undefined,
-        retriesOnly: undefined,
-    };
-}
-
 /** Human label for a status value, e.g. `log_overflow` → "Log overflow". */
 export function humanizeStatus(status: string): string {
     if (!status) return status;
@@ -401,18 +368,3 @@ export function isExitCodeExprValid(expr: string): boolean {
 export function exitCodeChipLabel(expr: string | undefined): string {
     return `Exit ${(expr ?? "").trim()}`;
 }
-
-/**
- * Whether the popover's exit-code text buffer must resync to the `filters`
- * prop. True only when the committed `exitCode` value actually moved since
- * the buffer last matched it — e.g. the "Exit code" chip was removed, or
- * "clear filters" ran elsewhere. An unrelated filters update (any other
- * dimension) leaves `exitCode` untouched and must not clobber in-progress
- * typing in the still-open popover.
- */
-export function exitCodePropChanged(
-    previous: string | undefined,
-    next: string | undefined,
-): boolean {
-    return previous !== next;
-}

package/src/lib/components/dashboard/run-helpers.test.ts

@@ -2,23 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { RUN_STATUSES } from "@runwisp/common";
 import {
     runDuration,
     runStartDelay,
     runVerdict,
     formatTriggeredByLabel,
     runRetryLabel,
+    runUsageLabel,
     instanceSuffix,
 } from "./run-helpers.js";
 
 describe("runVerdict", () => {
-    it("covers every run status", () => {
-        for (const status of RUN_STATUSES) {
-            expect(runVerdict(status).verb, status).toBeTruthy();
-        }
-    });
-
     it("phrases a timed outcome so a duration reads after it", () => {
         expect(runVerdict("succeeded")).toEqual({ verb: "succeeded in", timed: true });
         expect(runVerdict("failed")).toEqual({ verb: "failed after", timed: true });
@@ -116,6 +110,22 @@ describe("formatTriggeredByLabel", () => {
     });
 });
 
+describe("runUsageLabel", () => {
+    it("is undefined for an unmeasured run", () => {
+        expect(runUsageLabel({})).toBeUndefined();
+    });
+
+    it("joins peak memory and CPU time", () => {
+        expect(runUsageLabel({ peakMemoryBytes: 48 * 1024 * 1024, cpuTimeMs: 1500 })).toBe(
+            "peak 48 MB · CPU 1s",
+        );
+    });
+
+    it("shows whichever was measured", () => {
+        expect(runUsageLabel({ cpuTimeMs: 0 })).toBe("CPU 0ms");
+    });
+});
+
 describe("runRetryLabel", () => {
     it("returns undefined for a first attempt that is not a retry", () => {
         expect(runRetryLabel({ retryAttempt: 0 })).toBeUndefined();

package/src/lib/components/dashboard/run-helpers.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Run, RunStatus } from "@runwisp/common";
-import { formatDuration } from "../../utils/format.js";
+import { formatBytes, formatDuration } from "../../utils/format.js";
 
 export interface RunVerdict {
     /** Verb phrase for the outcome, ending in its preposition when `timed`. */
@@ -107,6 +107,17 @@ export function runRetryLabel(run: Pick<Run, "retryAttempt" | "retryOfRunId">):
     return undefined;
 }
 
+/**
+ * "peak 48 MB · CPU 1s" for a run whose resources were measured (shell runs
+ * only), else undefined.
+ */
+export function runUsageLabel(run: Pick<Run, "peakMemoryBytes" | "cpuTimeMs">): string | undefined {
+    const parts: string[] = [];
+    if (run.peakMemoryBytes !== undefined) parts.push("peak " + formatBytes(run.peakMemoryBytes));
+    if (run.cpuTimeMs !== undefined) parts.push("CPU " + formatDuration(run.cpuTimeMs));
+    return parts.length > 0 ? parts.join(" · ") : undefined;
+}
+
 /**
  * Monotonic position of a run's status in its lifecycle. Used to reject stale
  * updates (e.g. a `pending` HTTP response arriving after an SSE already

package/src/lib/components/dashboard/status-config.ts

@@ -16,25 +16,44 @@ import {
     HeartCrack,
 } from "@lucide/svelte";
 import type { Component } from "svelte";
-import { displayStatus, type RunStatus, type Run } from "@runwisp/common";
+import type { RunStatus } from "@runwisp/common";
 
-export interface RunStatusConfig {
+interface RunStatusConfig {
     icon: Component;
     color: string;
     bg: string;
-    border: string;
     dot: string;
     badge: string;
     /** One-sentence explanation of what this status means, for tooltips. */
     description: string;
 }
 
+// Full literal class strings (not built from a tone name) so Tailwind's
+// scanner picks them up.
+const DANGER = {
+    color: "text-danger-surface",
+    bg: "bg-danger-soft",
+    dot: "bg-danger-surface",
+    badge: "bg-danger-soft text-danger-soft-text",
+};
+const WARNING = {
+    color: "text-warning-surface",
+    bg: "bg-warning-soft",
+    dot: "bg-warning-surface",
+    badge: "bg-warning-soft text-warning-soft-text",
+};
+const NEUTRAL = {
+    color: "text-on-surface-muted",
+    bg: "bg-surface-sunken",
+    dot: "bg-on-surface-faint",
+    badge: "bg-surface-sunken text-on-surface",
+};
+
 export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
     running: {
         icon: LoaderCircle,
         color: "text-info-surface",
         bg: "bg-info-soft",
-        border: "border-info-soft",
         dot: "bg-info-surface animate-pulse",
         badge: "bg-info-soft text-info-soft-text",
         description: "This run is executing right now.",
@@ -43,151 +62,87 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         icon: CircleCheck,
         color: "text-success-surface",
         bg: "bg-success-soft",
-        border: "border-success-soft",
         dot: "bg-success-surface",
         badge: "bg-success-soft text-success-soft-text",
         description: "The run finished with exit code 0 - everything OK.",
     },
     failed: {
+        ...DANGER,
         icon: CircleX,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description: "The run exited with a non-zero code.",
     },
     crashed: {
+        ...DANGER,
         icon: CircleAlert,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "The process was killed, or the daemon found it still 'running' after a hard crash and marked it crashed. It was not resumed.",
     },
     stopped: {
+        ...WARNING,
         icon: CircleStop,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description: "A human or an external script manually stopped this run before it finished.",
     },
     timeout: {
+        ...WARNING,
         icon: TimerOff,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description:
             "The run exceeded its configured timeout and was terminated. Timeout duration can be changed.",
     },
     skipped: {
+        ...NEUTRAL,
         icon: SkipForward,
-        color: "text-on-surface-muted",
-        bg: "bg-surface-sunken",
-        border: "border-outline-faint",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
         description:
             'Skipped by the concurrency policy (on_overlap = "skip") because a previous run was still going.',
     },
     log_overflow: {
+        ...DANGER,
         icon: FileExclamationPoint,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description: "The run hit log_max_size and was handled because of log_on_full.",
     },
     queue_full: {
+        ...WARNING,
         icon: SkipForward,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description: "Skipped because the task's queue was already at max_queued.",
     },
     dst_skipped: {
+        ...NEUTRAL,
         icon: SkipForward,
-        color: "text-on-surface-muted",
-        bg: "bg-surface-sunken",
-        border: "border-outline-faint",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
         description:
             "Skipped: this cron tick was the duplicate half of a DST fall-back, so it was recorded but not run.",
     },
     daemon_stopped: {
+        ...WARNING,
         icon: CircleStop,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description:
             "The daemon shut down while this run was in flight and it exceeded shutdown_timeout; it was not resumed.",
     },
     missed: {
+        ...DANGER,
         icon: CalendarX,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "A scheduled run never happened because the daemon was down. Detected and recorded on restart.",
     },
     start_failed: {
+        ...DANGER,
         icon: OctagonX,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "The run (or service instance) kept failing; after restart_attempts consecutive failures, RunWisp gave up restarting it automatically.",
     },
     unhealthy: {
+        ...DANGER,
         icon: HeartCrack,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "The service instance kept failing its health_check, so RunWisp stopped it. Its restart policy decides what happens next.",
     },
     pending: {
+        ...NEUTRAL,
         icon: Clock,
-        color: "text-on-surface-muted",
-        bg: "bg-surface-sunken",
-        border: "border-outline",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
         description: "Queued and waiting to start.",
     },
     ended: {
-        icon: CircleDashed,
+        ...NEUTRAL,
         color: "text-on-surface-faint",
-        bg: "bg-surface-sunken",
-        border: "border-outline-faint",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
+        icon: CircleDashed,
         description: "The run finished. No specific end reason was recorded.",
     },
 };
-
-export function getRunStatusConfig(status: RunStatus): RunStatusConfig {
-    return RUN_STATUS_CONFIG[status];
-}
-
-export function runDisplayStatus(run: Pick<Run, "status" | "endReason">): RunStatus {
-    return displayStatus(run.status, run.endReason);
-}