@runwisp/ui 0.15.0 → 0.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
-    "@runwisp/eslint-config": "0.15.0",
-    "@runwisp/typescript-config": "0.15.0",
+    "@runwisp/eslint-config": "0.16.0",
+    "@runwisp/typescript-config": "0.16.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -93,7 +93,7 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.28.0",
-    "@runwisp/common": "0.15.0",
+    "@runwisp/common": "0.16.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/lib/actions/focusTrap.test.ts

@@ -0,0 +1,56 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { resolveTrapFocusTarget } from "./focusTrap.js";
+
+// resolveTrapFocusTarget is generic and identity-based on purpose: it never
+// touches the DOM, so it's exercised here with plain sentinel objects
+// instead of real elements (this repo's vitest env has no jsdom).
+describe("resolveTrapFocusTarget", () => {
+    const first = { id: "first" };
+    const middle = { id: "middle" };
+    const last = { id: "last" };
+    const focusable = [first, middle, last];
+
+    it("wraps Tab from the last focusable element back to the first", () => {
+        const target = resolveTrapFocusTarget({ key: "Tab", shiftKey: false }, focusable, last);
+        expect(target).toBe(first);
+    });
+
+    it("wraps Shift+Tab from the first focusable element back to the last", () => {
+        const target = resolveTrapFocusTarget({ key: "Tab", shiftKey: true }, focusable, first);
+        expect(target).toBe(last);
+    });
+
+    it("does nothing when Tab is pressed from a middle element", () => {
+        const target = resolveTrapFocusTarget({ key: "Tab", shiftKey: false }, focusable, middle);
+        expect(target).toBeNull();
+    });
+
+    it("does nothing when Shift+Tab is pressed from a middle element", () => {
+        const target = resolveTrapFocusTarget({ key: "Tab", shiftKey: true }, focusable, middle);
+        expect(target).toBeNull();
+    });
+
+    it("ignores non-Tab keys", () => {
+        const target = resolveTrapFocusTarget({ key: "Escape", shiftKey: false }, focusable, last);
+        expect(target).toBeNull();
+    });
+
+    it("does nothing when there are no focusable elements", () => {
+        const target = resolveTrapFocusTarget({ key: "Tab", shiftKey: false }, [], null);
+        expect(target).toBeNull();
+    });
+
+    it("wraps a single focusable element to itself in both directions", () => {
+        const solo = [first];
+        expect(resolveTrapFocusTarget({ key: "Tab", shiftKey: false }, solo, first)).toBe(first);
+        expect(resolveTrapFocusTarget({ key: "Tab", shiftKey: true }, solo, first)).toBe(first);
+    });
+
+    it("does nothing when active is null and doesn't match first or last", () => {
+        const target = resolveTrapFocusTarget({ key: "Tab", shiftKey: false }, focusable, null);
+        expect(target).toBeNull();
+    });
+});

package/src/lib/actions/focusTrap.ts

@@ -0,0 +1,115 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+].join(",");
+
+function isHTMLElement(value: unknown): value is HTMLElement {
+    return value instanceof HTMLElement;
+}
+
+/** All focusable, visible descendants of `container`, in DOM (tab) order. */
+export function getFocusableElements(container: HTMLElement): HTMLElement[] {
+    return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement,
+    );
+}
+
+/**
+ * Pure decision function: given a keydown event, the currently focusable
+ * elements (in order), and whatever currently has focus, returns the element
+ * that Tab/Shift+Tab should wrap focus to in order to keep it trapped inside
+ * the set — or `null` if the key doesn't need handling.
+ *
+ * Framework- and DOM-free on purpose (elements are compared by identity only)
+ * so this can be unit tested without a browser or jsdom.
+ */
+export function resolveTrapFocusTarget<T>(
+    event: Pick<KeyboardEvent, "key" | "shiftKey">,
+    focusable: readonly T[],
+    active: T | null,
+): T | null {
+    if (event.key !== "Tab" || focusable.length === 0) return null;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (first === undefined || last === undefined) return null;
+
+    if (event.shiftKey && active === first) return last;
+    if (!event.shiftKey && active === last) return first;
+    return null;
+}
+
+export interface TrapFocusOptions {
+    /**
+     * Move focus to the first focusable descendant (or the container itself)
+     * as soon as the trap is created. Defaults to `true`; set to `false` when
+     * the caller already manages initial focus (e.g. a searchable combobox
+     * that focuses its own search input).
+     */
+    autoFocus?: boolean;
+}
+
+/**
+ * Svelte action that keeps keyboard focus inside `node` while it's mounted:
+ * Tab from the last focusable descendant wraps to the first (and Shift+Tab
+ * from the first wraps to the last), and focus is restored to whatever was
+ * focused beforehand once the trap is torn down — unless a click on some
+ * other real element already moved focus there, in which case that's left
+ * alone.
+ */
+export function trapFocus(node: HTMLElement, options: TrapFocusOptions = {}) {
+    const autoFocus = options.autoFocus ?? true;
+    const previouslyFocused = isHTMLElement(document.activeElement) ? document.activeElement : null;
+
+    if (autoFocus) {
+        // Deferred a tick: `node` may still be moved by a sibling `use:portal`
+        // action (appendChild-ing it to <body>) after this action runs, and
+        // relocating a focused element resets focus to <body>. Waiting a
+        // microtask lets any such move finish first, so the focus target
+        // ends up wherever the element actually settles.
+        queueMicrotask(() => {
+            const target = getFocusableElements(node)[0] ?? node;
+            if (target === node && !node.hasAttribute("tabindex")) {
+                node.tabIndex = -1;
+            }
+            target.focus();
+        });
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        const active = isHTMLElement(document.activeElement) ? document.activeElement : null;
+        const target = resolveTrapFocusTarget(e, getFocusableElements(node), active);
+        if (target) {
+            e.preventDefault();
+            target.focus();
+        }
+    }
+
+    node.addEventListener("keydown", handleKeydown);
+
+    return {
+        destroy() {
+            node.removeEventListener("keydown", handleKeydown);
+            // By the time an action's destroy() runs, `node` (and whatever
+            // inside it held focus) has already been detached — removing a
+            // focused element resets focus to <body> as a browser default, so
+            // that can't be told apart from an explicit close (Escape, item
+            // activation) by checking `node.contains(activeElement)` here.
+            // What *can* still be told apart: a deliberate outside click
+            // already moved focus to its own (still-attached) target before
+            // this runs, so activeElement is a real element other than
+            // <body>. Only restore focus when that's not the case.
+            const active = document.activeElement;
+            const focusWasReset = !isHTMLElement(active) || active === document.body;
+            if (focusWasReset && previouslyFocused && document.contains(previouslyFocused)) {
+                previouslyFocused.focus();
+            }
+        },
+    };
+}

package/src/lib/components/DataGrid.svelte

@@ -54,6 +54,7 @@
     import Input from "./Input.svelte";
     import Pagination from "./Pagination.svelte";
     import Fuse from "fuse.js";
+    import { selectionState } from "./data-grid-selection.js";
 
     let {
         columns,
@@ -162,8 +163,9 @@
         return filteredData.slice(start, start + pageSize);
     });
 
-    let allSelected = $derived(pagedData.length > 0 && selectedRows.length === pagedData.length);
-    let someSelected = $derived(selectedRows.length > 0 && selectedRows.length < pagedData.length);
+    const selection = $derived(selectionState(pagedData, selectedRows, rowKey));
+    let allSelected = $derived(selection.allSelected);
+    let someSelected = $derived(selection.someSelected);
 </script>
 
 <div

package/src/lib/components/Drawer.svelte

@@ -5,6 +5,7 @@
     import type { Snippet } from "svelte";
     import { X } from "@lucide/svelte";
     import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
     import { fly } from "svelte/transition";
 
     type Side = "left" | "right" | "top" | "bottom";
@@ -98,6 +99,7 @@
         {/if}
 
         <div
+            use:trapFocus
             class="
                 absolute z-10 flex flex-col
                 border border-outline bg-surface-overlay shadow-lg

package/src/lib/components/Dropdown.svelte

@@ -45,6 +45,7 @@
     let transformOrigin = $state("top right");
 
     import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
 
     async function setupFloating() {
         if (!triggerEl || !menuEl) return;
@@ -133,6 +134,7 @@
     {#if open}
         <div
             use:portal
+            use:trapFocus
             bind:this={menuEl}
             role="menu"
             class="

package/src/lib/components/DurationInput.svelte

@@ -32,7 +32,7 @@
         ...restProps
     }: Props = $props();
 
-    const generatedId = `duration-input-${Math.random().toString(36).slice(2, 10)}`;
+    const generatedId = $props.id();
     const inputId = $derived(id ?? generatedId);
 
     let textValue = $state("");

package/src/lib/components/FormField.svelte

@@ -30,7 +30,7 @@
         id,
     }: Props = $props();
 
-    const generatedId = `field-${Math.random().toString(36).slice(2, 10)}`;
+    const generatedId = $props.id();
     const fieldId = $derived(id ?? generatedId);
 </script>
 

package/src/lib/components/Input.svelte

@@ -33,7 +33,7 @@
         ...restProps
     }: Props = $props();
 
-    const generatedId = `input-${Math.random().toString(36).slice(2, 10)}`;
+    const generatedId = $props.id();
     const inputId = $derived(id ?? generatedId);
 
     const sizeClasses: Record<InputSize, string> = {

package/src/lib/components/LogConsole.svelte

@@ -31,6 +31,12 @@
         // "muted" (default) renders the terminus in the gutter grey; "warn"
         // tints it amber for runs that ended by intervention rather than naturally.
         endTone?: "muted" | "warn";
+        // Message from the most recent fetchLogs failure (session expiry,
+        // daemon restart mid-request, network blip, ...). Rendered as a small
+        // banner above the log surface so a fetch failure never looks like a
+        // run that simply produced no output. Null/undefined renders nothing;
+        // the caller clears it once a subsequent fetch succeeds.
+        error?: string | null;
         // Wrap long lines instead of horizontally scrolling them. When on, each
         // rendered row's height becomes a multiple of `lineHeight` (one per
         // wrapped visual row), so the virtualizer switches from the fixed-height
@@ -48,6 +54,7 @@
         fetchLineHistory,
         endLabel = "end of output",
         endTone = "muted",
+        error = null,
         wrap = $bindable(false),
     }: Props = $props();
 
@@ -557,6 +564,15 @@
         >{RULER_SAMPLE}</span
     >
 
+    {#if error}
+        <div
+            class="flex shrink-0 items-center gap-2 border-b border-[var(--rw-con-gutter)] px-3.5 py-2 text-[11.5px]"
+            style="color: var(--rw-term-bad); background-color: color-mix(in srgb, var(--rw-term-bad) 12%, transparent);"
+        >
+            Failed to load log: {error}
+        </div>
+    {/if}
+
     <div bind:this={containerEl} class="flex-1 overflow-auto" onscroll={onScroll}>
         <div
             class="relative"

package/src/lib/components/Modal.svelte

@@ -21,6 +21,7 @@
     }
 
     import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
 
     let {
         open = $bindable(false),
@@ -79,6 +80,7 @@
         {/if}
 
         <div
+            use:trapFocus
             class="
 				relative z-10 w-full {sizeClasses[size]}
 				flex max-h-[90vh] flex-col

package/src/lib/components/Popover.svelte

@@ -8,6 +8,7 @@
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
     import { fade } from "svelte/transition";
     import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
 
     interface Props {
         open?: boolean;
@@ -144,6 +145,7 @@
         {/if}
         <div
             use:portal
+            use:trapFocus
             bind:this={contentEl}
             class="
                 z-[9999] max-h-[80vh] overflow-y-auto

package/src/lib/components/Select.svelte

@@ -108,6 +108,7 @@
     });
 
     import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
 
     async function setupFloating() {
         if (!triggerEl || !menuEl) return;
@@ -299,7 +300,12 @@
     {/if}
 
     {#if isOpen}
-        <div use:portal bind:this={menuEl} class="z-[9999] min-w-[200px]">
+        <div
+            use:portal
+            use:trapFocus={{ autoFocus: false }}
+            bind:this={menuEl}
+            class="z-[9999] min-w-[200px]"
+        >
             <div
                 class="
                 overflow-hidden rounded-[4px] border border-outline bg-surface-overlay shadow-md

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

@@ -30,7 +30,7 @@
     import Tooltip from "../Tooltip.svelte";
     import { portal } from "../../actions/portal.js";
     import type { Run } from "./types.js";
-    import type { LogEvent, LogSlice } from "../../log-console/types.js";
+    import { isLogEvent, type LogEvent, type LogSlice } from "../../log-console/types.js";
     import { formatClockTime, formatCalendarDate } from "../../utils/format.js";
     import { formatShortId } from "../../utils/id.js";
     import { TickingNow } from "../../utils/ticking-now.svelte.js";
@@ -134,10 +134,41 @@
 
     let logConsole = $state<{ onStream: (event: LogEvent) => void } | null>(null);
 
+    // Message from the most recent seed-fetch failure (session expiry, daemon
+    // restart mid-request, ...), surfaced to LogConsole instead of letting a
+    // failed fetch render as an indistinguishable blank "no output" pane.
+    let logFetchError = $state<string | null>(null);
+
     // Derive a stable scalar so the effect only re-runs when the id actually
     // changes, not on every run object reference swap from SSE array updates.
     let runId = $derived(run?.id);
 
+    // Fetches the batched tail page a run's console opens on (see the effect
+    // below) and paints it into the console. Resolves the line the live
+    // stream should resume from, or null when there's nothing left to stream
+    // (the run already ended, or the caller cancelled while we were waiting).
+    // A failed fetch still falls back to an SSE tail backfill from scratch —
+    // it does not stop the console from live-tailing — but records the
+    // failure so LogConsole can show it instead of looking like a quiet run.
+    async function seedConsoleTail(
+        id: string,
+        isCancelled: () => boolean,
+    ): Promise<{ fromLine: number } | null> {
+        try {
+            const seed = await fetchLogs(id, -TAIL_LINES, -1);
+            if (isCancelled()) return null;
+            if (!isLogEvent(seed)) return { fromLine: -TAIL_LINES };
+            if (logConsole) logConsole.onStream(seed);
+            return seed.finished // ended run: nothing live to follow
+                ? null
+                : { fromLine: seed.sizeLines > 0 ? seed.sizeLines : -TAIL_LINES };
+        } catch (err) {
+            if (isCancelled()) return null;
+            logFetchError = err instanceof Error ? err.message : "Failed to load logs";
+            return { fromLine: -TAIL_LINES };
+        }
+    }
+
     $effect(() => {
         const id = runId;
         if (!id) return;
@@ -145,23 +176,33 @@
         const stream = streamLogs;
         if (!stream) return;
 
+        logFetchError = null;
+
         let cleanup: (() => void) | undefined;
+        let cancelled = false;
 
         untrack(() => {
-            // Single SSE call seeds the viewport via backfill (negative
-            // fromLine = tail-from-end) and continues with live events on
-            // the same connection. No tail+stream handoff, no duplicate
-            // replay, native Last-Event-ID resume on reconnect.
-            cleanup = stream(
-                id,
-                (event: LogEvent) => {
-                    if (logConsole) logConsole.onStream(event);
-                },
-                { fromLine: -TAIL_LINES },
-            );
+            void (async () => {
+                // Paint the tail in one batched page so the console opens
+                // already at the newest output, instead of replaying 1000
+                // backfill lines over SSE and visibly scrolling down to reach
+                // the end. The live stream then picks up after the seeded tail
+                // (its disk backfill from that anchor closes the fetch↔stream
+                // race, and the daemon dedupes anything already shown).
+                const seeded = await seedConsoleTail(id, () => cancelled);
+                if (cancelled || !seeded) return;
+                cleanup = stream(
+                    id,
+                    (event: LogEvent) => {
+                        if (logConsole) logConsole.onStream(event);
+                    },
+                    { fromLine: seeded.fromLine },
+                );
+            })();
         });
 
         return () => {
+            cancelled = true;
             if (cleanup) cleanup();
         };
     });
@@ -288,7 +329,7 @@
         run.status === "running" ? durationTicker.now.getTime() : undefined,
     )}
     {@const startDelay = runStartDelay(run)}
-    {@const startedAt = run.startAt ?? run.createdAt}
+    {@const startedAt = run.startedAt ?? run.createdAt}
     {@const retry = runRetryLabel(run)}
     {@const paramEntries = run.params ? Object.entries(run.params) : []}
     {@const suffix = instanceSuffix(run.instanceIndex, getInstanceCount(run.taskName))}
@@ -403,7 +444,7 @@
                              repeat it. The line wraps at narrow widths instead of
                              dropping the date and hiding it behind a hover. -->
                             <span data-testid="run-started" class="text-on-surface-muted"
-                                >{run.startAt ? formatClockTime(run.startAt) : "—"}</span
+                                >{run.startedAt ? formatClockTime(run.startedAt) : "—"}</span
                             >
                             <span class="text-outline-hover" aria-hidden="true">·</span>
                             <span>{formatCalendarDate(startedAt)}</span>
@@ -744,6 +785,7 @@
                     {highlightLine}
                     {endLabel}
                     {endTone}
+                    error={logFetchError}
                 />
             {/key}
         </div>

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

@@ -40,6 +40,7 @@
         dayStartIso,
         dayEndIso,
         isExitCodeExprValid,
+        exitCodePropChanged,
         type RunsListFilters,
     } from "./run-filters.js";
 
@@ -122,9 +123,20 @@
 
     // Exit code: a free-form expression (`137`, `>100`, `>100 <150`) normalized
     // to an inclusive range at the wire. Edited in a local buffer for smooth
-    // typing and committed on change; the popover content remounts on each open,
-    // so the buffer re-seeds from `filters` every time it opens.
+    // typing and committed on change. `RunFilterPopover` itself is long-lived
+    // (its trigger button stays mounted while the popover is closed), so the
+    // buffer does NOT re-seed on its own — it must explicitly resync whenever
+    // `filters.exitCode` changes from outside (a chip removal, "clear
+    // filters"), without clobbering in-progress typing when some unrelated
+    // filter dimension changes instead.
     let exitCodeInput = $state(filters.exitCode ?? "");
+    let lastExitCode = filters.exitCode;
+    $effect(() => {
+        if (exitCodePropChanged(lastExitCode, filters.exitCode)) {
+            exitCodeInput = filters.exitCode ?? "";
+        }
+        lastExitCode = filters.exitCode;
+    });
     const exitCodeValid = $derived(isExitCodeExprValid(exitCodeInput));
 
     function commitExitCode() {

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

@@ -626,7 +626,7 @@
             checked={isRowSelected(run.id)}
             onchange={() => toggleRow(run.id)}
             onclick={(e) => e.stopPropagation()}
-            aria-label={`Select run from ${formatDateTime(run.startAt ?? run.createdAt)}`}
+            aria-label={`Select run from ${formatDateTime(run.startedAt ?? run.createdAt)}`}
             class="size-3.5 cursor-pointer rounded border-outline accent-primary opacity-0 {selectionActive
                 ? 'opacity-100'
                 : 'group-hover/row:opacity-100'}"
@@ -639,7 +639,7 @@
     {@const config = getRunStatusConfig(dstatus)}
     {@const running = run.status === "running"}
     {@const spine = config.dot.replace(" animate-pulse", "")}
-    {@const startedAt = run.startAt ?? run.createdAt}
+    {@const startedAt = run.startedAt ?? run.createdAt}
     {@const retry = runRetryLabel(run)}
     {@const suffix = instanceSuffix(run.instanceIndex, getInstanceCount(run.taskName))}
     <button

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

@@ -28,6 +28,7 @@ import {
     exitCodeRangeActive,
     isExitCodeExprValid,
     exitCodeChipLabel,
+    exitCodePropChanged,
     type StatusBucket,
     type RunsListFilters,
 } from "./run-filters.js";
@@ -67,7 +68,7 @@ describe("isNeedsAttention", () => {
 
     it("is false for a strict subset or a different set", () => {
         expect(isNeedsAttention(["failed"])).toBe(false);
-        expect(isNeedsAttention(["success"])).toBe(false);
+        expect(isNeedsAttention(["succeeded"])).toBe(false);
         expect(isNeedsAttention([])).toBe(false);
     });
 });
@@ -158,7 +159,7 @@ describe("statusChipLabel", () => {
         // The Failed bucket is the needs-attention set.
         expect(statusChipLabel([...NEEDS_ATTENTION_STATUSES])).toBe("Failed");
         expect(statusChipLabel(["pending", "running"])).toBe("Running");
-        expect(statusChipLabel(["success"])).toBe("Succeeded");
+        expect(statusChipLabel(["succeeded"])).toBe("Succeeded");
     });
 
     it("humanizes a single status that is not a whole bucket", () => {
@@ -200,9 +201,9 @@ describe("bucketState / toggleBucket", () => {
     });
 
     it("clears a fully-selected bucket without touching other statuses", () => {
-        const f = base({ statuses: [...failed.statuses, "success"] });
+        const f = base({ statuses: [...failed.statuses, "succeeded"] });
         const cleared = toggleBucket(f, failed);
-        expect(cleared.statuses).toEqual(["success"]);
+        expect(cleared.statuses).toEqual(["succeeded"]);
     });
 });
 
@@ -295,3 +296,19 @@ 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

@@ -77,7 +77,7 @@ 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: ["success"] },
+    { key: "succeeded", label: "Succeeded", dot: "bg-success-surface", statuses: ["succeeded"] },
     {
         key: "failed",
         label: "Failed",
@@ -382,3 +382,18 @@ 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

@@ -20,7 +20,7 @@ describe("runVerdict", () => {
     });
 
     it("phrases a timed outcome so a duration reads after it", () => {
-        expect(runVerdict("success")).toEqual({ verb: "succeeded in", timed: true });
+        expect(runVerdict("succeeded")).toEqual({ verb: "succeeded in", timed: true });
         expect(runVerdict("failed")).toEqual({ verb: "failed after", timed: true });
     });
 
@@ -36,20 +36,20 @@ describe("runVerdict", () => {
 });
 
 describe("runDuration", () => {
-    it("returns undefined when startAt is not set", () => {
+    it("returns undefined when startedAt is not set", () => {
         expect(runDuration({})).toBeUndefined();
     });
 
-    it("returns formatted duration when both startAt and endAt are set", () => {
+    it("returns formatted duration when both startedAt and endedAt are set", () => {
         const start = "2024-06-15T12:00:00.000Z";
         const end = "2024-06-15T12:00:05.000Z";
-        expect(runDuration({ startAt: start, endAt: end })).toBe("5s");
+        expect(runDuration({ startedAt: start, endedAt: end })).toBe("5s");
     });
 
     it("returns ms duration for sub-second runs", () => {
         const start = "2024-06-15T12:00:00.000Z";
         const end = "2024-06-15T12:00:00.500Z";
-        expect(runDuration({ startAt: start, endAt: end })).toBe("500ms");
+        expect(runDuration({ startedAt: start, endedAt: end })).toBe("500ms");
     });
 
     describe("with fake clock", () => {
@@ -61,27 +61,27 @@ describe("runDuration", () => {
             vi.useRealTimers();
         });
 
-        it("uses current time when endAt is not set (run still in progress)", () => {
-            expect(runDuration({ startAt: "2024-06-15T12:00:00.000Z" })).toBe("2s");
+        it("uses current time when endedAt is not set (run still in progress)", () => {
+            expect(runDuration({ startedAt: "2024-06-15T12:00:00.000Z" })).toBe("2s");
         });
     });
 
     it("counts against an injected now for an in-progress run", () => {
         const start = "2024-06-15T12:00:00.000Z";
         const now = new Date("2024-06-15T12:00:07.000Z").getTime();
-        expect(runDuration({ startAt: start }, now)).toBe("7s");
+        expect(runDuration({ startedAt: start }, now)).toBe("7s");
     });
 
     it("ignores the injected now once the run has ended", () => {
         const start = "2024-06-15T12:00:00.000Z";
         const end = "2024-06-15T12:00:05.000Z";
         const now = new Date("2024-06-15T12:01:00.000Z").getTime();
-        expect(runDuration({ startAt: start, endAt: end }, now)).toBe("5s");
+        expect(runDuration({ startedAt: start, endedAt: end }, now)).toBe("5s");
     });
 });
 
 describe("runStartDelay", () => {
-    it("returns undefined when startAt is not set", () => {
+    it("returns undefined when startedAt is not set", () => {
         expect(runStartDelay({ createdAt: "2024-06-15T12:00:00.000Z" })).toBeUndefined();
     });
 
@@ -89,7 +89,7 @@ describe("runStartDelay", () => {
         expect(
             runStartDelay({
                 createdAt: "2024-06-15T12:00:00.000Z",
-                startAt: "2024-06-15T12:00:00.300Z",
+                startedAt: "2024-06-15T12:00:00.300Z",
             }),
         ).toBeUndefined();
     });
@@ -98,7 +98,7 @@ describe("runStartDelay", () => {
         expect(
             runStartDelay({
                 createdAt: "2024-06-15T03:00:00.000Z",
-                startAt: "2024-06-15T03:07:12.000Z",
+                startedAt: "2024-06-15T03:07:12.000Z",
             }),
         ).toBe("7m 12s");
     });

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

@@ -21,7 +21,7 @@ export interface RunVerdict {
  * separate duration readout for the same glance.
  */
 const RUN_VERDICTS: Record<RunStatus, RunVerdict> = {
-    success: { verb: "succeeded in", timed: true },
+    succeeded: { verb: "succeeded in", timed: true },
     failed: { verb: "failed after", timed: true },
     crashed: { verb: "crashed after", timed: true },
     timeout: { verb: "timed out after", timed: true },
@@ -43,26 +43,26 @@ export function runVerdict(status: RunStatus): RunVerdict {
 }
 
 export function runDuration(
-    run: Pick<Run, "startAt" | "endAt">,
+    run: Pick<Run, "startedAt" | "endedAt">,
     now: number = Date.now(),
 ): string | undefined {
-    if (!run.startAt) return undefined;
-    const start = new Date(run.startAt).getTime();
-    const end = run.endAt ? new Date(run.endAt).getTime() : now;
+    if (!run.startedAt) return undefined;
+    const start = new Date(run.startedAt).getTime();
+    const end = run.endedAt ? new Date(run.endedAt).getTime() : now;
     return formatDuration(end - start);
 }
 
 /**
  * Gap between when a run was scheduled (`createdAt`, the cron tick) and when
- * it actually started (`startAt`), formatted — or undefined when the two are
+ * it actually started (`startedAt`), formatted — or undefined when the two are
  * within a second of each other. This is the visible face of `jitter`: a
  * jittered run is created at its tick but starts later inside the window, and
  * this is by how much. It also surfaces queue-wait, since a queued run is
  * created when it joins the line and started when the line clears.
  */
-export function runStartDelay(run: Pick<Run, "createdAt" | "startAt">): string | undefined {
-    if (!run.startAt) return undefined;
-    const delay = new Date(run.startAt).getTime() - new Date(run.createdAt).getTime();
+export function runStartDelay(run: Pick<Run, "createdAt" | "startedAt">): string | undefined {
+    if (!run.startedAt) return undefined;
+    const delay = new Date(run.startedAt).getTime() - new Date(run.createdAt).getTime();
     if (delay < 1000) return undefined;
     return formatDuration(delay);
 }
@@ -106,7 +106,7 @@ export function runRetryLabel(run: Pick<Run, "retryAttempt" | "retryOfRunId">):
 /**
  * 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
- * advanced the row to `success`). Higher = further along.
+ * advanced the row to `succeeded`). Higher = further along.
  */
 export function runPhaseOrder(status: string): number {
     if (status === "pending") return 0;

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

@@ -38,7 +38,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         badge: "bg-info-soft text-info-soft-text",
         description: "This run is executing right now.",
     },
-    success: {
+    succeeded: {
         icon: CircleCheck,
         color: "text-success-surface",
         bg: "bg-success-soft",
@@ -111,7 +111,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         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 queue_max.",
+        description: "Skipped because the task's queue was already at max_queued.",
     },
     dst_skipped: {
         icon: SkipForward,

package/src/lib/components/data-grid-selection.test.ts

@@ -0,0 +1,68 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { selectionState } from "./data-grid-selection.js";
+
+interface Row {
+    id: string;
+}
+
+const rows = (...ids: string[]): Row[] => ids.map((id) => ({ id }));
+
+describe("selectionState", () => {
+    it("is unchecked when nothing is selected", () => {
+        expect(selectionState(rows("a", "b", "c"), [], "id")).toEqual({
+            allSelected: false,
+            someSelected: false,
+        });
+    });
+
+    it("is checked when every paged row is selected", () => {
+        const paged = rows("a", "b", "c");
+        expect(selectionState(paged, paged, "id")).toEqual({
+            allSelected: true,
+            someSelected: false,
+        });
+    });
+
+    it("is indeterminate when some but not all paged rows are selected", () => {
+        const paged = rows("a", "b", "c");
+        expect(selectionState(paged, rows("b"), "id")).toEqual({
+            allSelected: false,
+            someSelected: true,
+        });
+    });
+
+    it("is NOT checked when selectedRows matches the paged count but is a different set of rows", () => {
+        // Regression: page 1 selected [a, b, c]; the grid then paged/filtered
+        // to a different page showing [d, e, f]. A count comparison
+        // (selectedRows.length === pagedRows.length) would wrongly report
+        // "all selected" here even though none of the visible rows are
+        // members of the selection.
+        const paged = rows("d", "e", "f");
+        const selected = rows("a", "b", "c");
+        expect(selectionState(paged, selected, "id")).toEqual({
+            allSelected: false,
+            someSelected: false,
+        });
+    });
+
+    it("is indeterminate, not checked, when the overlap coincidentally matches the paged count minus one", () => {
+        const paged = rows("a", "b", "c");
+        // Carried-over selection from another page plus one row that is
+        // actually on this page.
+        const selected = rows("x", "y", "b");
+        expect(selectionState(paged, selected, "id")).toEqual({
+            allSelected: false,
+            someSelected: true,
+        });
+    });
+
+    it("is unchecked when there are no paged rows, regardless of selection", () => {
+        expect(selectionState([], rows("a"), "id")).toEqual({
+            allSelected: false,
+            someSelected: false,
+        });
+    });
+});

package/src/lib/components/data-grid-selection.ts

@@ -0,0 +1,34 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+// DataGrid's header checkbox (checked / indeterminate / unchecked) must
+// reflect which rows on the current page are ACTUALLY selected, not merely
+// how many rows are selected. A bare count comparison is wrong the moment
+// `selectedRows` holds a different set of rows than `pagedRows` but happens
+// to be the same size — e.g. rows selected on a page the grid has since
+// paged/filtered away from. Extracted so the membership check is unit
+// testable without a component-render harness.
+
+export interface SelectionState {
+    allSelected: boolean;
+    someSelected: boolean;
+}
+
+/**
+ * Header checkbox state for `pagedRows`: fully checked only when every row
+ * currently on the page is selected, indeterminate when some (but not all)
+ * of them are. Matches rows by `rowKey`, not by array position or count.
+ */
+export function selectionState<T>(
+    pagedRows: readonly T[],
+    selectedRows: readonly T[],
+    rowKey: keyof T,
+): SelectionState {
+    if (pagedRows.length === 0) return { allSelected: false, someSelected: false };
+    const selectedKeys = new Set(selectedRows.map((row) => row[rowKey]));
+    const selectedOnPage = pagedRows.filter((row) => selectedKeys.has(row[rowKey])).length;
+    return {
+        allSelected: selectedOnPage === pagedRows.length,
+        someSelected: selectedOnPage > 0 && selectedOnPage < pagedRows.length,
+    };
+}

package/src/lib/theme-tokens.css

@@ -35,9 +35,7 @@
     --rw-font-sans: "TASA Orbiter", system-ui, -apple-system, sans-serif;
     --rw-font-mono:
         "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-}
 
-:root {
     /* Primary — Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
      * and less cyan than Aurora (running/info) so the two stay distinct. */
     --rw-color-wisp-50: oklch(0.97 0.02 205);

package/src/lib/components/FeatureCard.svelte

@@ -1,35 +0,0 @@
-<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-
-<script lang="ts">
-    import type { Component, Snippet } from "svelte";
-
-    interface Props {
-        title: string;
-        icon?: Component;
-        children?: Snippet;
-        class?: string;
-    }
-
-    let { title, icon: Icon, children, class: className = "" }: Props = $props();
-</script>
-
-<article
-    class="overflow-hidden rounded-[4px] border border-outline bg-surface-raised p-6 hover:border-outline-hover {className}"
->
-    <div class="flex flex-col gap-3">
-        {#if Icon}
-            <span
-                class="inline-flex h-10 w-10 items-center justify-center rounded-[3px] border border-primary-soft-border bg-primary-soft text-primary-soft-text"
-            >
-                <Icon size={20} />
-            </span>
-        {/if}
-        <h3 class="font-mono text-base text-primary">{title}</h3>
-        {#if children}
-            <div class="font-sans text-sm leading-relaxed text-on-surface-muted">
-                {@render children()}
-            </div>
-        {/if}
-    </div>
-</article>

package/src/lib/components/FeatureGrid.svelte

@@ -1,37 +0,0 @@
-<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-
-<script lang="ts">
-    import type { Snippet } from "svelte";
-
-    interface Props {
-        columns?: 1 | 2 | 3 | 4;
-        gap?: "sm" | "md" | "lg";
-        children?: Snippet;
-        class?: string;
-    }
-
-    let { columns = 3, gap = "md", children, class: className = "" }: Props = $props();
-
-    const colClasses: Record<1 | 2 | 3 | 4, string> = {
-        1: "grid-cols-1",
-        2: "grid-cols-1 sm:grid-cols-2",
-        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-    };
-
-    const gapClasses: Record<"sm" | "md" | "lg", string> = {
-        sm: "gap-3",
-        md: "gap-4",
-        lg: "gap-6",
-    };
-
-    const colClass = $derived(colClasses[columns]);
-    const gapClass = $derived(gapClasses[gap]);
-</script>
-
-<div class="grid {colClass} {gapClass} {className}">
-    {#if children}
-        {@render children()}
-    {/if}
-</div>