@runwisp/ui 1.5.1 → 1.7.0

package/src/lib/components/dashboard/bulk-selection.svelte.test.ts

@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { BulkSelection } from "./bulk-selection.svelte.js";
+
+describe("BulkSelection", () => {
+    it("tracks explicitly picked rows", () => {
+        const sel = new BulkSelection();
+        sel.toggle("a");
+        sel.toggle("b");
+        sel.toggle("a");
+        expect(sel.isSelected("a")).toBe(false);
+        expect(sel.isSelected("b")).toBe(true);
+        expect(sel.allSelected).toBe(false);
+        expect(sel.selector({}, ["b"])).toEqual({ matchAll: false, ids: ["b"] });
+    });
+
+    it("selects everything except opt-outs in all mode", () => {
+        const sel = new BulkSelection();
+        sel.toggle("x");
+        sel.selectAll();
+        expect(sel.isSelected("x")).toBe(true);
+        expect(sel.allSelected).toBe(true);
+        sel.toggle("x");
+        expect(sel.isSelected("x")).toBe(false);
+        expect(sel.allSelected).toBe(false);
+        expect(sel.selector({ taskName: "t" }, ["ignored"])).toEqual({
+            matchAll: true,
+            filter: { taskName: "t" },
+            exceptIds: ["x"],
+        });
+    });
+
+    it("clears back to nothing selected", () => {
+        const sel = new BulkSelection();
+        sel.selectAll();
+        sel.clear();
+        expect(sel.isSelected("a")).toBe(false);
+        expect(sel.allSelected).toBe(false);
+    });
+});

package/src/lib/components/dashboard/bulk-selection.svelte.ts

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { SvelteSet } from "svelte/reactivity";
+import type { RunSelector } from "@runwisp/common";
+
+/**
+ * Which runs are ticked in the list. Two modes:
+ *   1. explicit: the operator picked specific rows; `#explicit` holds them.
+ *   2. all: "everything matching the current filter"; `#except` holds opt-outs.
+ */
+export class BulkSelection {
+    #all = $state(false);
+    readonly #explicit = new SvelteSet<string>();
+    readonly #except = new SvelteSet<string>();
+
+    isSelected(id: string): boolean {
+        return this.#all ? !this.#except.has(id) : this.#explicit.has(id);
+    }
+
+    toggle(id: string): void {
+        const ids = this.#all ? this.#except : this.#explicit;
+        if (!ids.delete(id)) ids.add(id);
+    }
+
+    clear(): void {
+        this.#all = false;
+        this.#explicit.clear();
+        this.#except.clear();
+    }
+
+    selectAll(): void {
+        this.clear();
+        this.#all = true;
+    }
+
+    /** Every matching run is selected, with no opt-outs. */
+    get allSelected(): boolean {
+        return this.#all && this.#except.size === 0;
+    }
+
+    /**
+     * The server-side selector for a bulk operation. In "all" mode it targets
+     * everything matching `filter`; in explicit mode just `affectedIds`.
+     */
+    selector(filter: NonNullable<RunSelector["filter"]>, affectedIds: string[]): RunSelector {
+        if (!this.#all) return { matchAll: false, ids: affectedIds };
+        return { matchAll: true, filter, exceptIds: [...this.#except] };
+    }
+}

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

@@ -17,6 +17,15 @@ describe("humanizeCron", () => {
         expect(result.isHumanized).toBe(true);
     });
 
+    it("describes the nth and last weekday of the month", () => {
+        expect(humanizeCron("0 3 * * FRI#3").humanized).toBe(
+            "At 03:00 AM, on the third Friday of the month",
+        );
+        const last = humanizeCron("0 3 * * FRI#L");
+        expect(last.humanized).toBe("At 03:00 AM, on the last Friday of the month");
+        expect(last.raw).toBe("0 3 * * FRI#L");
+    });
+
     it("humanizes @hourly via cronstrue", () => {
         const result = humanizeCron("@hourly");
         expect(result.humanized).toBe("Every hour");

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

@@ -66,7 +66,11 @@ export function humanizeCron(cron: string): HumanizedCron {
     }
 
     try {
-        const humanized = cronstrue.toString(raw, { throwExceptionOnParseError: true });
+        // cronstrue reads a last weekday as Quartz's "5L"; "5#L" would come out as
+        // "on the null Friday of the month".
+        const humanized = cronstrue.toString(raw.replace(/#L/gi, "L"), {
+            throwExceptionOnParseError: true,
+        });
         return { humanized, raw, isHumanized: true };
     } catch {
         return { humanized: raw, raw, isHumanized: false };

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

@@ -26,6 +26,8 @@ import {
     exitCodeRangeActive,
     isExitCodeExprValid,
     exitCodeChipLabel,
+    runFilterParams,
+    filterChipLabel,
     type StatusBucket,
     type RunsListFilters,
 } from "./run-filters.js";
@@ -292,3 +294,61 @@ describe("exit-code expression", () => {
         expect(exitCodeChipLabel(" 137 ")).toBe("Exit 137");
     });
 });
+
+describe("runFilterParams", () => {
+    it("omits every inactive dimension", () => {
+        expect(runFilterParams(emptyRunFilters())).toEqual({});
+    });
+
+    it("maps each active dimension to its server field", () => {
+        expect(
+            runFilterParams({
+                search: " nightly ",
+                statuses: ["failed", "timeout"],
+                sortDirection: "asc",
+                taskName: "backup",
+                createdAfter: "2026-01-01T00:00:00Z",
+                createdBefore: "2026-01-02T00:00:00Z",
+                triggeredBy: "cron",
+                exitCode: ">100 <150",
+                retriesOnly: true,
+            }),
+        ).toEqual({
+            taskName: "backup",
+            search: "nightly",
+            status: "failed,timeout",
+            createdAfter: "2026-01-01T00:00:00Z",
+            createdBefore: "2026-01-02T00:00:00Z",
+            triggeredBy: "cron",
+            exitCodeMin: 101,
+            exitCodeMax: 149,
+            retriesOnly: true,
+        });
+    });
+
+    it("ignores an unparseable exit-code expression", () => {
+        expect(runFilterParams({ ...emptyRunFilters(), exitCode: "12a" })).toEqual({});
+    });
+});
+
+describe("filterChipLabel", () => {
+    it("labels each dimension", () => {
+        const f = base({
+            statuses: ["failed"],
+            taskName: "backup",
+            triggeredBy: "cron",
+            exitCode: ">100",
+            createdAfter: "2026-01-01T00:00:00Z",
+        });
+        expect(filterChipLabel(f, "status")).toBe(statusChipLabel(["failed"]));
+        expect(filterChipLabel(f, "task")).toBe("backup");
+        expect(filterChipLabel(f, "triggeredBy")).toBe("Trigger: " + triggerDescription("cron"));
+        expect(filterChipLabel(f, "exitCode")).toBe("Exit >100");
+        expect(filterChipLabel(f, "retries")).toBe("Retries only");
+        expect(filterChipLabel(f, "time")).toMatch(/^Since /);
+    });
+
+    it("has no time label without bounds", () => {
+        expect(filterChipLabel(base(), "time")).toBe("");
+    });
+});

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

@@ -2,7 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { TRIGGERS, type Trigger } from "@runwisp/common";
+import { formatCalendarDate, formatDateTime } from "../../utils/format.js";
 import { TRIGGER_LABELS } from "./run-helpers.js";
+import { RUN_STATUS_CONFIG } from "./status-config.js";
 
 /**
  * The filter shared by the runs list, the filter popover, the SSE-merge source
@@ -42,7 +44,7 @@ export const FAILURE_STATUS_TOKEN = "failure";
 /**
  * Outcome buckets: a UI grouping of the individual run statuses into five
  * plain-language picks. The popover's "Advanced" section still exposes the
- * individual statuses. `dot` mirrors the group's color in RUN_STATUS_CONFIG.
+ * individual statuses.
  */
 export interface StatusBucket {
     key: string;
@@ -52,24 +54,34 @@ export interface StatusBucket {
 }
 
 export const STATUS_BUCKETS: readonly StatusBucket[] = [
-    { key: "running", label: "Running", dot: "bg-info-surface", statuses: ["pending", "running"] },
-    { key: "succeeded", label: "Succeeded", dot: "bg-success-surface", statuses: ["succeeded"] },
+    {
+        key: "running",
+        label: "Running",
+        dot: RUN_STATUS_CONFIG.running.solidDot,
+        statuses: ["pending", "running"],
+    },
+    {
+        key: "succeeded",
+        label: "Succeeded",
+        dot: RUN_STATUS_CONFIG.succeeded.solidDot,
+        statuses: ["succeeded"],
+    },
     {
         key: "failed",
         label: "Failed",
-        dot: "bg-danger-surface",
+        dot: RUN_STATUS_CONFIG.failed.solidDot,
         statuses: [FAILURE_STATUS_TOKEN],
     },
     {
         key: "skipped",
         label: "Skipped",
-        dot: "bg-on-surface-faint",
+        dot: RUN_STATUS_CONFIG.skipped.solidDot,
         statuses: ["skipped", "dst_skipped", "queue_full"],
     },
     {
         key: "stopped",
         label: "Stopped",
-        dot: "bg-warning-surface",
+        dot: RUN_STATUS_CONFIG.stopped.solidDot,
         statuses: ["stopped", "daemon_stopped"],
     },
 ];
@@ -297,7 +309,67 @@ export function isExitCodeExprValid(expr: string): boolean {
     return parseExitCodeRange(expr).valid;
 }
 
+/**
+ * The server-side filter fields for a filter state. The list query and the
+ * bulk selector both build on it, so "select all matching" targets exactly the
+ * rows on screen. Dimensions that are off are omitted.
+ */
+export interface RunFilterParams {
+    taskName?: string;
+    search?: string;
+    status?: string;
+    createdAfter?: string;
+    createdBefore?: string;
+    triggeredBy?: string;
+    exitCodeMin?: number;
+    exitCodeMax?: number;
+    retriesOnly?: true;
+}
+
+export function runFilterParams(f: RunsListFilters): RunFilterParams {
+    const params: RunFilterParams = {};
+    if (f.taskName) params.taskName = f.taskName;
+    const search = f.search.trim();
+    if (search) params.search = search;
+    if (f.statuses.length > 0) params.status = f.statuses.join(",");
+    if (f.createdAfter) params.createdAfter = f.createdAfter;
+    if (f.createdBefore) params.createdBefore = f.createdBefore;
+    if (f.triggeredBy) params.triggeredBy = f.triggeredBy;
+    const exit = exitCodeRange(f.exitCode);
+    if (exit.min !== undefined) params.exitCodeMin = exit.min;
+    if (exit.max !== undefined) params.exitCodeMax = exit.max;
+    if (f.retriesOnly === true) params.retriesOnly = true;
+    return params;
+}
+
 /** Chip label for an active exit-code filter, e.g. `Exit >100 <150`. */
 export function exitCodeChipLabel(expr: string | undefined): string {
     return `Exit ${(expr ?? "").trim()}`;
 }
+
+function timeChipLabel(f: RunsListFilters): string {
+    const { createdAfter: after, createdBefore: before } = f;
+    if (isWholeDay(after, before) && after) return `On ${formatCalendarDate(after)}`;
+    if (after && before) return `${formatDateTime(after)} – ${formatDateTime(before)}`;
+    if (after) return `Since ${formatDateTime(after)}`;
+    if (before) return `Before ${formatDateTime(before)}`;
+    return "";
+}
+
+/** Label of the chip shown for an active filter dimension. */
+export function filterChipLabel(f: RunsListFilters, dim: FilterDimension): string {
+    switch (dim) {
+        case "status":
+            return statusChipLabel(f.statuses);
+        case "time":
+            return timeChipLabel(f);
+        case "task":
+            return f.taskName ?? "";
+        case "triggeredBy":
+            return "Trigger: " + triggerDescription(f.triggeredBy ?? "");
+        case "exitCode":
+            return exitCodeChipLabel(f.exitCode);
+        case "retries":
+            return "Retries only";
+    }
+}

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

@@ -2,13 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Run } from "@runwisp/common";
 import {
     runDuration,
     runStartDelay,
-    runVerdict,
+    RUN_VERDICTS,
+    runEndMarker,
+    runRowReadout,
+    highlightParts,
     formatTriggeredByLabel,
     runRetryLabel,
     runUsageLabel,
+    runUsageScale,
+    usageLevel,
     instanceSuffix,
     runLogDownloadUrl,
 } from "./run-helpers.js";
@@ -21,20 +27,32 @@ describe("runLogDownloadUrl", () => {
     });
 });
 
-describe("runVerdict", () => {
+describe("runEndMarker", () => {
+    it("warns only for ends the operator or daemon caused", () => {
+        expect(runEndMarker("stopped")).toEqual({
+            label: "run stopped by operator",
+            tone: "warn",
+        });
+        expect(runEndMarker("daemon_stopped").tone).toBe("warn");
+        expect(runEndMarker("timeout").label).toBe("run timed out");
+        expect(runEndMarker("failed")).toEqual({ label: "end of output", tone: "muted" });
+    });
+});
+
+describe("RUN_VERDICTS", () => {
     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 });
+        expect(RUN_VERDICTS.succeeded).toEqual({ verb: "succeeded in", timed: true });
+        expect(RUN_VERDICTS.failed).toEqual({ verb: "failed after", timed: true });
     });
 
     it("marks statuses that never produced a duration as untimed", () => {
         // These end without ever running, so the caller renders the verb alone
         // rather than "skipped after —".
-        expect(runVerdict("missed").timed).toBe(false);
-        expect(runVerdict("skipped").timed).toBe(false);
-        expect(runVerdict("dst_skipped").timed).toBe(false);
-        expect(runVerdict("queue_full").timed).toBe(false);
-        expect(runVerdict("pending").timed).toBe(false);
+        expect(RUN_VERDICTS.missed.timed).toBe(false);
+        expect(RUN_VERDICTS.skipped.timed).toBe(false);
+        expect(RUN_VERDICTS.dst_skipped.timed).toBe(false);
+        expect(RUN_VERDICTS.queue_full.timed).toBe(false);
+        expect(RUN_VERDICTS.pending.timed).toBe(false);
     });
 });
 
@@ -124,9 +142,9 @@ describe("runUsageLabel", () => {
         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("joins CPU time and memory, never saying peak", () => {
+        expect(runUsageLabel({ peakMemoryBytes: 48 * 1024 * 1024, cpuTimeMs: 112_000 })).toBe(
+            "CPU 1m 52s · RAM 48 MB",
         );
     });
 
@@ -167,3 +185,95 @@ describe("instanceSuffix", () => {
         expect(instanceSuffix(2, 3)).toBe("#3");
     });
 });
+
+describe("runRowReadout", () => {
+    const ended = { startedAt: "2026-01-01T00:00:00Z", endedAt: "2026-01-01T00:00:02Z" };
+
+    it("shows live, queued and the exit code of a failure", () => {
+        expect(runRowReadout({ ...ended, status: "running", exitCode: 0 }, "running")).toBe("live");
+        expect(runRowReadout({ ...ended, status: "pending", exitCode: 0 }, "pending")).toBe(
+            "queued",
+        );
+        expect(runRowReadout({ ...ended, status: "ended", exitCode: 3 }, "failed")).toBe("exit 3");
+    });
+
+    it("falls back to the duration, or a dash when it never started", () => {
+        expect(runRowReadout({ ...ended, status: "ended", exitCode: 0 }, "succeeded")).toBe("2s");
+        expect(runRowReadout({ status: "ended", exitCode: 0 }, "missed")).toBe("—");
+    });
+});
+
+describe("highlightParts", () => {
+    it("returns the whole line when nothing matches", () => {
+        expect(highlightParts("hello", "zzz")).toEqual({ before: "hello", match: "", after: "" });
+        expect(highlightParts("hello", "  ")).toEqual({ before: "hello", match: "", after: "" });
+    });
+
+    it("splits around a case-insensitive match", () => {
+        expect(highlightParts("an ERROR here", "error")).toEqual({
+            before: "an ",
+            match: "ERROR",
+            after: " here",
+        });
+    });
+
+    it("windows a long lead-in with an ellipsis", () => {
+        const parts = highlightParts("x".repeat(40) + "needle", "needle");
+        expect(parts.before).toBe("…" + "x".repeat(14));
+        expect(parts.match).toBe("needle");
+    });
+});
+
+describe("runUsageScale", () => {
+    const run = (
+        cpuTimeMs?: number,
+        peakMemoryBytes?: number,
+        status: Run["status"] = "ended",
+    ) => ({
+        status,
+        ...(cpuTimeMs === undefined ? {} : { cpuTimeMs }),
+        ...(peakMemoryBytes === undefined ? {} : { peakMemoryBytes }),
+    });
+
+    it("is undefined when no finished run was measured", () => {
+        expect(runUsageScale([])).toBeUndefined();
+        expect(runUsageScale([run(5, 10, "running"), run(undefined, 10)])).toBeUndefined();
+    });
+
+    it("scales to the largest run and takes the median as usual", () => {
+        expect(runUsageScale([run(100, 1400), run(110, 2900), run(30, 640), run(1, 1)])).toEqual({
+            max: { cpu: 110, ram: 2900 },
+            usual: { cpu: 100, ram: 1400 },
+        });
+    });
+
+    it("leaves out live and unmeasured runs", () => {
+        expect(runUsageScale([run(10, 10), run(999, 999, "running"), run(undefined, 999)])).toEqual(
+            {
+                max: { cpu: 10, ram: 10 },
+                usual: { cpu: 10, ram: 10 },
+            },
+        );
+    });
+});
+
+describe("usageLevel", () => {
+    it("is 0 as usual, 1 from 1.5x, 2 from twice the usual run", () => {
+        expect(usageLevel(1400, 1400, "cpu")).toBe(0);
+        expect(usageLevel(2099, 1400, "cpu")).toBe(0);
+        expect(usageLevel(2100, 1400, "cpu")).toBe(1);
+        expect(usageLevel(2799, 1400, "cpu")).toBe(1);
+        expect(usageLevel(2800, 1400, "cpu")).toBe(2);
+        expect(usageLevel(10, 1400, "cpu")).toBe(0);
+    });
+
+    it("judges a zero or tiny usual run against a floor", () => {
+        // A mostly idle task (median CPU 0) that burned 30s of CPU.
+        expect(usageLevel(30_000, 0, "cpu")).toBe(2);
+        expect(usageLevel(1, 0, "cpu")).toBe(0);
+        expect(usageLevel(3, 1, "cpu")).toBe(0);
+        // 64 MiB against an idle task's 1 MiB stands out; 8 MiB doesn't.
+        expect(usageLevel(64 * 1024 * 1024, 1024 * 1024, "ram")).toBe(2);
+        expect(usageLevel(8 * 1024 * 1024, 1024 * 1024, "ram")).toBe(0);
+    });
+});

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

@@ -12,7 +12,7 @@ export interface RunVerdict {
 }
 
 // The run's outcome as a verb phrase, read as one sentence: "succeeded in 933ms".
-const RUN_VERDICTS: Record<RunStatus, RunVerdict> = {
+export const RUN_VERDICTS: Record<RunStatus, RunVerdict> = {
     succeeded: { verb: "succeeded in", timed: true },
     failed: { verb: "failed after", timed: true },
     crashed: { verb: "crashed after", timed: true },
@@ -31,8 +31,21 @@ const RUN_VERDICTS: Record<RunStatus, RunVerdict> = {
     queue_full: { verb: "skipped", timed: false },
 };
 
-export function runVerdict(status: RunStatus): RunVerdict {
-    return RUN_VERDICTS[status];
+export interface RunEndMarker {
+    label: string;
+    tone: "muted" | "warn";
+}
+
+// The line closing a run's console output; only abnormal ends are worth a warning tone.
+const RUN_END_MARKERS: Partial<Record<RunStatus, RunEndMarker>> = {
+    stopped: { label: "run stopped by operator", tone: "warn" },
+    daemon_stopped: { label: "daemon stopped mid-run", tone: "warn" },
+    timeout: { label: "run timed out", tone: "warn" },
+};
+const DEFAULT_END_MARKER: RunEndMarker = { label: "end of output", tone: "muted" };
+
+export function runEndMarker(status: RunStatus): RunEndMarker {
+    return RUN_END_MARKERS[status] ?? DEFAULT_END_MARKER;
 }
 
 export function runDuration(
@@ -98,16 +111,82 @@ export function runRetryLabel(run: Pick<Run, "retryAttempt" | "retryOfRunId">):
 }
 
 /**
- * "peak 48 MB · CPU 1s" for a run whose resources were measured (shell runs
- * only), else undefined.
+ * "CPU 1m 52s · RAM 48 MB" for a run whose resources were measured (shell
+ * runs only), else undefined. CPU is the CPU time the run used, RAM the most
+ * memory it held.
  */
 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));
+    if (run.peakMemoryBytes !== undefined) parts.push("RAM " + formatBytes(run.peakMemoryBytes));
     return parts.length > 0 ? parts.join(" · ") : undefined;
 }
 
+/** CPU time (ms) and peak memory (bytes) of one run, or of a task's typical run. */
+export interface RunUsageAmounts {
+    cpu: number;
+    ram: number;
+}
+
+/**
+ * How a task's runs compare: `max` is its largest run (the full length of a
+ * usage bar), `usual` the median run (what "normal for this task" means).
+ */
+export interface RunUsageScale {
+    max: RunUsageAmounts;
+    usual: RunUsageAmounts;
+}
+
+/** A finished run's measured usage, or undefined when it wasn't measured. */
+export function runUsageAmounts(
+    run: Pick<Run, "status" | "cpuTimeMs" | "peakMemoryBytes">,
+): RunUsageAmounts | undefined {
+    if (run.status !== "ended") return undefined;
+    if (run.cpuTimeMs === undefined || run.peakMemoryBytes === undefined) return undefined;
+    return { cpu: run.cpuTimeMs, ram: run.peakMemoryBytes };
+}
+
+function median(values: number[]): number {
+    const sorted = values.toSorted((a, b) => a - b);
+    return sorted[Math.floor(sorted.length / 2)] ?? 0;
+}
+
+/** The scale for a task's usage bars, over the measured runs given. */
+export function runUsageScale(
+    runs: readonly Pick<Run, "status" | "cpuTimeMs" | "peakMemoryBytes">[],
+): RunUsageScale | undefined {
+    const amounts = runs.flatMap((run) => runUsageAmounts(run) ?? []);
+    if (amounts.length === 0) return undefined;
+    const cpu = amounts.map((a) => a.cpu);
+    const ram = amounts.map((a) => a.ram);
+    return {
+        max: { cpu: Math.max(...cpu), ram: Math.max(...ram) },
+        usual: { cpu: median(cpu), ram: median(ram) },
+    };
+}
+
+/**
+ * The least a usual run counts as using, so a tiny or zero baseline (a mostly
+ * idle task's median CPU time is often 0) doesn't hide a run that burns real
+ * CPU or memory, nor flag 3ms against 1ms. CPU time in ms, memory in bytes.
+ */
+const USAGE_FLOOR: RunUsageAmounts = { cpu: 1000, ram: 16 * 1024 * 1024 };
+
+/**
+ * How unusual a run's amount is for its task: 0 about as usual, 1 at 1.5×
+ * the usual run, 2 at twice it or more. A task that always uses the same
+ * amount stays at 0, however large that amount is. The usual run counts as
+ * at least USAGE_FLOOR for its kind.
+ */
+export function usageLevel(value: number, usual: number, kind: keyof RunUsageAmounts): 0 | 1 | 2 {
+    const baseline = Math.max(usual, USAGE_FLOOR[kind]);
+    if (baseline <= 0) return 0;
+    const ratio = value / baseline;
+    if (ratio >= 2) return 2;
+    if (ratio >= 1.5) return 1;
+    return 0;
+}
+
 /**
  * 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
@@ -118,3 +197,40 @@ export function runPhaseOrder(status: string): number {
     if (status === "running") return 1;
     return 2;
 }
+
+/** Right-hand mono readout of a run row: live / queued / exit N / duration. */
+export function runRowReadout(
+    run: Pick<Run, "status" | "exitCode" | "startedAt" | "endedAt">,
+    displayed: RunStatus,
+): string {
+    if (run.status === "running") return "live";
+    if (run.status === "pending") return "queued";
+    if (displayed === "failed" || displayed === "crashed") return "exit " + String(run.exitCode);
+    return runDuration(run) ?? "—";
+}
+
+export interface HighlightParts {
+    before: string;
+    match: string;
+    after: string;
+}
+
+/**
+ * Split an output line into [before, match, after] around the first
+ * occurrence of the query, windowed to keep the match in view. Plain strings,
+ * so rendering them as text never lets untrusted HTML reach the DOM.
+ */
+export function highlightParts(text: string, query: string): HighlightParts {
+    const q = query.trim();
+    const idx = q ? text.toLowerCase().indexOf(q.toLowerCase()) : -1;
+    if (idx === -1) return { before: text, match: "", after: "" };
+    const start = Math.max(0, idx - 14);
+    const lead = start > 0 ? "…" : "";
+    const windowed = text.slice(start);
+    const fi = windowed.toLowerCase().indexOf(q.toLowerCase());
+    return {
+        before: lead + windowed.slice(0, fi),
+        match: windowed.slice(fi, fi + q.length),
+        after: windowed.slice(fi + q.length),
+    };
+}