@runwisp/ui 0.10.0 → 0.12.0

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

@@ -2,37 +2,48 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts" module>
-    export type RunsListSortDirection = "asc" | "desc" | "";
-
-    export interface RunsListFilters {
-        search: string;
-        status: string;
-        sort_direction: RunsListSortDirection;
+    /** A single output-search hit surfaced under its run in the history rail. */
+    export interface RunOutputMatch {
+        line: number;
+        text: string;
     }
 </script>
 
 <script lang="ts">
-    import {
-        Clock,
-        Timer,
-        ArrowUpDown,
-        Search,
-        Funnel,
-        Square,
-        Trash2,
-        RotateCw,
-    } from "@lucide/svelte";
+    import { Clock, ArrowUpDown, X, Square, Trash2, RotateCw } from "@lucide/svelte";
     import { untrack } from "svelte";
     import { SvelteSet } from "svelte/reactivity";
     import { createVirtualizer } from "@tanstack/svelte-virtual";
     import Button from "../Button.svelte";
-    import Badge from "../Badge.svelte";
     import EmptyState from "../EmptyState.svelte";
+    import RunFilterPopover from "./RunFilterPopover.svelte";
     import type { Run } from "./types.js";
-    import type { RunSelector } from "@runwisp/common";
+    import type { RunSelector, RunStatus } from "@runwisp/common";
     import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
-    import { runDuration, formatTriggeredByLabel, runRetryLabel } from "./run-helpers.js";
-    import { formatRelativeTime, formatDateTime, formatFullDateTime } from "../../utils/format.js";
+    import {
+        activeDimensions,
+        clearDimension,
+        statusChipLabel,
+        triggerDescription,
+        exitCodeRange,
+        exitCodeChipLabel,
+        isWholeDay,
+        type RunsListFilters,
+        type FilterDimension,
+    } from "./run-filters.js";
+    import {
+        runDuration,
+        formatTriggeredByLabel,
+        runRetryLabel,
+        instanceSuffix,
+    } from "./run-helpers.js";
+    import {
+        formatDateTime,
+        formatFullDateTime,
+        formatTimeHM,
+        formatDayMonth,
+        formatCalendarDate,
+    } from "../../utils/format.js";
 
     type BulkHandler = (selector: RunSelector, affected: Run[]) => void;
 
@@ -45,6 +56,8 @@
         selectedRunId = $bindable(null),
         onselect,
         showFilters = false,
+        showTask = false,
+        tasks = [],
         showTaskName = false,
         taskNameFilter,
         headerLabel = "Run History",
@@ -54,6 +67,12 @@
         onBulkCancel,
         onBulkDelete,
         onBulkRerun,
+        getInstanceCount = () => 1,
+        flush = false,
+        outputSearch = false,
+        outputQuery = "",
+        outputMatches = null,
+        outputSearchPending = false,
     }: {
         items: Run[];
         total: number;
@@ -63,6 +82,11 @@
         selectedRunId?: string | null;
         onselect?: (runId: string) => void;
         showFilters?: boolean;
+        // Cross-task /runs view: lets the filter popover offer a Task select.
+        // On a single task's page this stays false (the task is the page scope).
+        showTask?: boolean;
+        // Task list backing the popover's Task select (cross-task view only).
+        tasks?: { name: string }[];
         showTaskName?: boolean;
         taskNameFilter?: string;
         headerLabel?: string;
@@ -72,12 +96,34 @@
         onBulkCancel?: BulkHandler;
         onBulkDelete?: BulkHandler;
         onBulkRerun?: BulkHandler;
+        // Resolves a task's currently configured instance count so multi-instance
+        // services render a 1-based #N suffix. Defaults to single-instance.
+        getInstanceCount?: (taskName: string) => number;
+        // 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
+        // matched rows. `outputSearch` enables the mode; `outputQuery` is the
+        // live query (drives the active state and snippet highlighting).
+        outputSearch?: boolean;
+        outputQuery?: string;
+        // run id → first matching line, supplied by the parent after a search.
+        // null = no active search; the full list shows.
+        outputMatches?: Map<string, RunOutputMatch> | null;
+        // True while a query is typed but its results aren't in yet (debounce
+        // window or request in flight) — the rail shows its searching shimmer.
+        outputSearchPending?: boolean;
     } = $props();
 
-    const ROW_HEIGHT = 76;
+    // Task-rail rows are one dense line (44px); the cross-task /runs view adds
+    // the task name on a second line (64px).
+    const rowHeight = $derived(showTaskName ? 64 : 44);
     const OVERSCAN = 8;
     const LOAD_AHEAD = 10;
-    const SEARCH_DEBOUNCE_MS = 250;
 
     // Selection model: two modes —
     //   1. explicit:  user picked specific rows. explicitIds holds them.
@@ -87,22 +133,57 @@
     const exceptIds = new SvelteSet<string>();
 
     let scrollElement: HTMLDivElement | undefined = $state();
-    let searchInput = $state(filters.search);
 
-    // Debounce typing in the search box before pushing into shared filters,
-    // so we don't fire a network request on every keystroke.
-    $effect(() => {
-        const next = searchInput;
-        const id = setTimeout(() => {
-            if (filters.search !== next) filters.search = next;
-        }, SEARCH_DEBOUNCE_MS);
-        return () => clearTimeout(id);
-    });
+    // Output search filters the rail by what each run printed. The query lives
+    // in the app header now; this component only renders against it.
+    const outputSearchActive = $derived(outputSearch && outputQuery.trim().length > 0);
+
+    // Loaded runs that matched the output search, in list order. A match in a
+    // not-yet-loaded run can't be shown until the rail scrolls far enough to
+    // load it — the count reflects what's loaded, not the whole history.
+    const matchedRuns = $derived(
+        outputMatches ? items.filter((r: Run) => outputMatches.has(r.id)) : [],
+    );
+
+    // Split the matching line into [before, match, after] around the first
+    // occurrence of the query, windowed to keep the match in view — mirrors the
+    // artifact's snippet. Rendered as plain text spans (Svelte auto-escapes), so
+    // no untrusted HTML ever reaches the DOM.
+    interface HighlightParts {
+        before: string;
+        match: string;
+        after: string;
+    }
+
+    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),
+        };
+    }
+
+    // Right-hand mono readout on a task-rail row: live / queued / exit N / dur.
+    function rowRightLabel(run: Run, displayed: RunStatus): string {
+        if (run.status === "running") return "live";
+        if (run.status === "pending") return "queued";
+        if (displayed === "failed" || displayed === "crashed") {
+            return "exit " + String(run.exit_code);
+        }
+        return runDuration(run) ?? "—";
+    }
 
     const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
         count: 0,
         getScrollElement: () => scrollElement ?? null,
-        estimateSize: () => ROW_HEIGHT,
+        estimateSize: () => rowHeight,
         overscan: OVERSCAN,
     });
 
@@ -122,6 +203,29 @@
         if (last.index >= items.length - LOAD_AHEAD) onLoadMore?.();
     });
 
+    // Scroll a programmatically-selected run (deep link, detail-panel click) into
+    // view, since its row may be outside the virtual window. Tracked on
+    // selectedRunId/items only; the virtualizer access is untracked to avoid the
+    // setOptions-style notify loop (effect_update_depth_exceeded, see above).
+    let lastScrolled: string | null = null;
+    $effect(() => {
+        const id = selectedRunId;
+        const index = items.findIndex((r: Run) => r.id === id);
+        if (!id) {
+            lastScrolled = null;
+            return;
+        }
+        // -1: not loaded yet. The effect re-runs as items grows, so a deep link
+        // resolves once its page arrives; we don't chase it with onLoadMore.
+        if (index === -1) return;
+        if (id === lastScrolled) return; // already handled; don't re-yank on re-render
+        if (!scrollElement) return;
+        lastScrolled = id;
+        // "auto" only scrolls when the row is off-screen, so visible selections
+        // (and manual clicks) don't jump.
+        untrack(() => $virtualizer.scrollToIndex(index, { align: "auto" }));
+    });
+
     function isRowSelected(id: string): boolean {
         return selectAllMode ? !exceptIds.has(id) : explicitIds.has(id);
     }
@@ -156,6 +260,10 @@
     let selectedRuns = $derived(items.filter((r: Run) => isRowSelected(r.id)));
     let selectionCount = $derived(selectedRuns.length);
     let hasSelection = $derived(selectionCount > 0);
+    // Task-rail rows overlay the checkbox on the status dot (it appears on hover
+    // or once a selection exists). selectionActive forces all checkboxes visible
+    // so the operator can extend the selection without hunting per-row hovers.
+    let selectionActive = $derived(bulkActions && hasSelection);
     let allSelected = $derived(selectAllMode && exceptIds.size === 0);
 
     let anyRunning = $derived(selectedRuns.some((r: Run) => r.status === "running"));
@@ -163,24 +271,78 @@
         selectedRuns.some((r: Run) => r.status !== "running" && r.status !== "pending"),
     );
 
+    // The selector's filter is the same RunFilter the list query uses, so a
+    // "select all matching" bulk op targets exactly the rows on screen. The
+    // popover dimensions only apply where the popover is shown; the task scope
+    // (page-injected or popover-set) always applies.
+    function buildSelectorFilter(): NonNullable<RunSelector["filter"]> {
+        const filter: NonNullable<RunSelector["filter"]> = {};
+        if (taskNameFilter) filter.task_name = taskNameFilter;
+        else if (filters.task_name) filter.task_name = filters.task_name;
+        if (!showFilters) return filter;
+        if (filters.statuses.length > 0) filter.status = filters.statuses.join(",");
+        const query = filters.search.trim();
+        if (query) filter.search = query;
+        if (filters.created_after) filter.created_after = filters.created_after;
+        if (filters.created_before) filter.created_before = filters.created_before;
+        if (filters.triggered_by) filter.triggered_by = filters.triggered_by;
+        const exit = exitCodeRange(filters.exit_code);
+        if (exit.min !== undefined) filter.exit_code_min = exit.min;
+        if (exit.max !== undefined) filter.exit_code_max = exit.max;
+        if (filters.retries_only) filter.retries_only = true;
+        return filter;
+    }
+
     function buildSelector(): RunSelector {
         if (!selectAllMode) {
             return { match_all: false, ids: [...explicitIds] };
         }
-        const filter: { status?: string; task_name?: string; search?: string } = {};
-        if (taskNameFilter) filter.task_name = taskNameFilter;
-        if (showFilters) {
-            if (filters.status && filters.status !== "all") filter.status = filters.status;
-            const query = filters.search.trim();
-            if (query) filter.search = query;
-        }
         return {
             match_all: true,
-            filter,
+            filter: buildSelectorFilter(),
             except_ids: [...exceptIds],
         };
     }
 
+    // Active-filter chips for the header row. `task` only chips on the
+    // cross-task view; everywhere else the task name is the page scope.
+    const filterChips = $derived(
+        activeDimensions(filters)
+            .filter((dim) => dim !== "task" || showTask)
+            .map((dim) => ({ dimension: dim, label: chipLabel(dim) })),
+    );
+
+    function chipLabel(dim: FilterDimension): string {
+        switch (dim) {
+            case "status":
+                return statusChipLabel(filters.statuses);
+            case "time":
+                return timeChipLabel();
+            case "task":
+                return filters.task_name ?? "";
+            case "triggered_by":
+                return "Trigger: " + triggerDescription(filters.triggered_by ?? "");
+            case "exit_code":
+                return exitCodeChipLabel(filters.exit_code);
+            case "retries":
+                return "Retries only";
+        }
+    }
+
+    function timeChipLabel(): string {
+        const after = filters.created_after;
+        const before = filters.created_before;
+        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 "";
+    }
+
+    function removeChip(dim: FilterDimension) {
+        filters = clearDimension(filters, dim);
+    }
+
     function emitBulk(handler: BulkHandler | undefined, predicate: (r: Run) => boolean) {
         if (!handler) return;
         const affected = selectedRuns.filter(predicate);
@@ -201,7 +363,13 @@
     }
 
     function toggleSortDirection() {
-        filters.sort_direction = filters.sort_direction === "asc" ? "desc" : "asc";
+        // Reassign the whole object (not just the property): the parent reads
+        // `filters` through a multi-level `bind:`, and a fresh reference is what
+        // reliably re-triggers its fetch effect.
+        filters = {
+            ...filters,
+            sort_direction: filters.sort_direction === "asc" ? "desc" : "asc",
+        };
     }
 
     let masterCheckboxRef: HTMLInputElement | undefined = $state();
@@ -212,13 +380,16 @@
 </script>
 
 <div
-    class="flex flex-col overflow-hidden rounded-xl border border-outline bg-surface-raised shadow-sm md:col-span-4 lg:col-span-3"
+    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-xl border border-outline bg-surface-raised shadow-sm md:col-span-4 lg:col-span-3"}
 >
-    <!-- Inline heading: master checkbox, label, selection count or controls -->
     <div
-        class="flex shrink-0 items-center gap-2 border-b border-outline-faint px-3 py-2 {hasSelection
-            ? 'bg-primary-soft/40'
-            : 'bg-surface-sunken'}"
+        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'}"
     >
         {#if bulkActions}
             <label
@@ -283,8 +454,18 @@
             <span class="text-xs font-semibold tracking-wider text-on-surface-muted uppercase">
                 {headerLabel}
             </span>
-            <Badge variant="default" size="sm">{items.length} of {total}</Badge>
+            <span class="text-xs text-on-surface-faint">
+                {#if outputSearchActive}
+                    {matchedRuns.length} of {items.length}
+                {:else}
+                    {total}
+                    {total === 1 ? "run" : "runs"}
+                {/if}
+            </span>
             <div class="ml-auto flex items-center gap-1">
+                {#if showFilters}
+                    <RunFilterPopover bind:filters {showTask} {tasks} />
+                {/if}
                 <Button
                     variant="ghost"
                     size="xs"
@@ -305,43 +486,75 @@
         {/if}
     </div>
 
-    {#if showFilters}
-        <!-- Filter controls (search + status) -->
-        <div class="shrink-0 space-y-2 border-b border-outline-faint bg-surface-sunken px-3 py-2">
-            <div class="relative">
-                <Search
-                    class="absolute top-1/2 left-2.5 -translate-y-1/2 text-on-surface-faint"
-                    size={14}
-                />
-                <input
-                    type="text"
-                    bind:value={searchInput}
-                    placeholder="Search task or ID..."
-                    class="h-8 w-full rounded-md border border-outline bg-surface-raised pr-3 pl-8 text-sm transition-all placeholder:text-on-surface-faint focus:border-ring focus:ring-2 focus:ring-ring/20 focus:outline-none"
-                />
-            </div>
-            <div class="relative">
-                <select
-                    bind:value={filters.status}
-                    class="h-7 w-full appearance-none rounded-md border border-outline bg-surface-raised pr-6 pl-2 text-xs text-on-surface-muted focus:border-ring focus:outline-none"
+    {#if showFilters && filterChips.length > 0}
+        <!-- Active-filter chips. Rendered only when filters are set, so the
+             header stays clean when empty; each chip's X clears its dimension.
+             The filter controls themselves live in the popover above. -->
+        <div
+            class="flex shrink-0 flex-wrap gap-1 border-b border-outline-faint bg-surface-sunken px-3 py-2"
+        >
+            {#each filterChips as chip (chip.dimension)}
+                <span
+                    class="inline-flex items-center gap-1 rounded-full bg-surface-raised py-0.5 pr-1 pl-2 text-2xs font-medium text-on-surface-muted ring-1 ring-outline-faint ring-inset"
                 >
-                    <option value="all">All Statuses</option>
-                    <option value="running">Running</option>
-                    <option value="success">Success</option>
-                    <option value="failed">Failed</option>
-                    <option value="crashed">Crashed</option>
-                    <option value="skipped">Skipped</option>
-                </select>
-                <Funnel
-                    class="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-on-surface-faint"
-                    size={12}
-                />
-            </div>
+                    {chip.label}
+                    <button
+                        type="button"
+                        onclick={() => removeChip(chip.dimension)}
+                        class="flex size-3.5 items-center justify-center rounded-full text-on-surface-faint transition-colors hover:bg-surface-sunken hover:text-on-surface"
+                        aria-label="Remove {chip.label} filter"
+                    >
+                        <X size={11} />
+                    </button>
+                </span>
+            {/each}
         </div>
     {/if}
 
     <div bind:this={scrollElement} class="min-h-0 flex-1 overflow-y-auto p-2">
-        {#if items.length === 0 && !loading}
+        {#if outputSearchActive}
+            <!-- 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-[10px] 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>
+            {:else if matchedRuns.length === 0}
+                <div class="px-4 py-8 text-center text-xs leading-relaxed text-on-surface-muted">
+                    No output matches
+                    <b class="text-on-surface">“{outputQuery.trim()}”</b>.<br />
+                    Try a different term.
+                </div>
+            {:else}
+                <div class="flex flex-col gap-0.5">
+                    {#each matchedRuns as run (run.id)}
+                        <div class="group/row relative flex items-stretch gap-1">
+                            {#if bulkActions}
+                                {@render rowCheckboxOverlay(run)}
+                            {/if}
+                            {@render runRowButton(
+                                run,
+                                selectedRunId === run.id,
+                                outputMatches?.get(run.id),
+                            )}
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+        {:else if items.length === 0 && !loading}
             <EmptyState
                 title={emptyText}
                 description={emptyDescription}
@@ -358,15 +571,8 @@
                 {#each $virtualizer.getVirtualItems() as row (items[row.index]?.id ?? row.index)}
                     {@const run = items[row.index]}
                     {#if run}
-                        {@const isActive = selectedRunId === run.id}
-                        {@const isChecked = isRowSelected(run.id)}
-                        {@const config = getRunStatusConfig(runDisplayStatus(run))}
-                        {@const Icon = config.icon}
-                        {@const duration = runDuration(run)}
-                        {@const retry = runRetryLabel(run)}
-                        {@const startedAt = run.start_at ?? run.created_at}
                         <div
-                            class="flex items-stretch gap-1"
+                            class="group/row flex items-center gap-1"
                             style:position="absolute"
                             style:top="0"
                             style:left="0"
@@ -375,154 +581,9 @@
                             style:transform="translateY({row.start}px)"
                         >
                             {#if bulkActions}
-                                <label
-                                    class="flex shrink-0 cursor-pointer items-center px-1.5"
-                                    aria-label={`Select run from ${formatDateTime(run.start_at ?? run.created_at)}`}
-                                >
-                                    <input
-                                        type="checkbox"
-                                        checked={isChecked}
-                                        onchange={() => toggleRow(run.id)}
-                                        onclick={(e) => e.stopPropagation()}
-                                        class="h-3.5 w-3.5 cursor-pointer rounded border-outline accent-primary"
-                                    />
-                                </label>
+                                {@render rowCheckboxOverlay(run)}
                             {/if}
-                            <button
-                                class="btn-scale group duration-normal relative w-full rounded-lg border p-3 text-left transition-all select-none
-                                {isActive
-                                    ? 'border-primary-soft bg-primary-soft/50 shadow-sm'
-                                    : 'border-transparent bg-surface-raised hover:border-outline hover:bg-surface-sunken'}"
-                                onclick={() => selectRun(run.id)}
-                                onkeydown={(e) => e.key === "Enter" && selectRun(run.id)}
-                            >
-                                {#if showTaskName}
-                                    <!-- Runs variant: task name as primary, shortId secondary -->
-                                    <div class="mb-1 flex items-center justify-between">
-                                        <div class="flex min-w-0 items-center gap-2">
-                                            <div class="{config.color} shrink-0">
-                                                <Icon
-                                                    size={16}
-                                                    class={run.status === "running"
-                                                        ? "animate-spin"
-                                                        : ""}
-                                                />
-                                            </div>
-                                            <span
-                                                class="truncate text-sm font-semibold text-on-surface"
-                                            >
-                                                {run.task_name}{#if run.instance_index > 0}<span
-                                                        class="text-on-surface-muted"
-                                                        >#{run.instance_index}</span
-                                                    >{/if}
-                                            </span>
-                                        </div>
-                                        <span
-                                            class="shrink-0 text-2xs {isActive
-                                                ? 'font-medium text-primary'
-                                                : 'text-on-surface-faint'}"
-                                            title={formatFullDateTime(startedAt)}
-                                        >
-                                            {formatRelativeTime(startedAt)}
-                                        </span>
-                                    </div>
-
-                                    <div class="flex items-center justify-between pl-6 text-xs">
-                                        <div
-                                            class="flex min-w-0 items-center gap-1.5 text-2xs text-on-surface-muted"
-                                        >
-                                            <span class="truncate">{formatDateTime(startedAt)}</span
-                                            >
-                                            <span class="text-on-surface-faint"
-                                                >· {formatTriggeredByLabel(run.triggered_by)}</span
-                                            >
-                                            {#if retry}
-                                                <span
-                                                    class="shrink-0 rounded bg-surface-sunken px-1 font-mono text-2xs text-on-surface-faint"
-                                                    >{retry}</span
-                                                >
-                                            {/if}
-                                        </div>
-                                        {#if duration}
-                                            <div
-                                                class="flex items-center gap-1 text-on-surface-faint {isActive
-                                                    ? 'text-primary'
-                                                    : ''}"
-                                            >
-                                                <Timer size={10} />
-                                                <span class="font-mono">{duration}</span>
-                                            </div>
-                                        {/if}
-                                    </div>
-                                {:else}
-                                    <!-- Task variant: when it ran as primary, outcome secondary -->
-                                    <div class="mb-1.5 flex items-center justify-between">
-                                        <div class="flex min-w-0 items-center gap-2">
-                                            <div class="{config.color} shrink-0">
-                                                <Icon
-                                                    size={16}
-                                                    class={run.status === "running"
-                                                        ? "animate-spin"
-                                                        : ""}
-                                                />
-                                            </div>
-                                            <span
-                                                class="truncate text-sm font-semibold text-on-surface"
-                                            >
-                                                {formatDateTime(startedAt)}
-                                            </span>
-                                        </div>
-                                        <span
-                                            class="shrink-0 text-2xs {isActive
-                                                ? 'font-medium text-primary'
-                                                : 'text-on-surface-faint'}"
-                                            title={formatFullDateTime(startedAt)}
-                                        >
-                                            {formatRelativeTime(startedAt)}
-                                        </span>
-                                    </div>
-
-                                    <div class="flex items-center justify-between pl-6 text-xs">
-                                        <div
-                                            class="flex min-w-0 items-center gap-2 text-on-surface-muted"
-                                        >
-                                            <span class="capitalize">{runDisplayStatus(run)}</span>
-                                            <span class="text-on-surface-faint"
-                                                >· {formatTriggeredByLabel(run.triggered_by)}</span
-                                            >
-                                            {#if retry}
-                                                <span
-                                                    class="shrink-0 rounded bg-surface-sunken px-1 font-mono text-2xs text-on-surface-faint"
-                                                    >{retry}</span
-                                                >
-                                            {/if}
-                                            {#if run.instance_index > 0}
-                                                <span
-                                                    class="font-mono text-2xs text-on-surface-faint"
-                                                    >instance #{run.instance_index}</span
-                                                >
-                                            {/if}
-                                        </div>
-                                        {#if duration}
-                                            <div
-                                                class="flex items-center gap-1 text-on-surface-faint {isActive
-                                                    ? 'text-primary'
-                                                    : ''}"
-                                            >
-                                                <Timer size={10} />
-                                                <span class="font-mono">{duration}</span>
-                                            </div>
-                                        {/if}
-                                    </div>
-                                {/if}
-
-                                <div
-                                    class="duration-normal absolute top-1/2 left-0 h-8 w-1 -translate-y-1/2 rounded-r-full bg-primary transition-all {isActive
-                                        ? 'opacity-100'
-                                        : 'opacity-0'}"
-                                    aria-hidden="true"
-                                ></div>
-                            </button>
+                            {@render runRowButton(run, selectedRunId === run.id, undefined)}
                         </div>
                     {/if}
                 {/each}
@@ -530,3 +591,148 @@
         {/if}
     </div>
 </div>
+
+<!-- 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. -->
+{#snippet statusDot(colorClass: string, running: boolean)}
+    <span
+        class="{colorClass} size-[9px] shrink-0 rounded-full bg-current ring-[3px] ring-current/20 {running
+            ? 'animate-pulse'
+            : ''} {bulkActions
+            ? selectionActive
+                ? 'opacity-0'
+                : 'transition-opacity group-hover/row:opacity-0'
+            : ''}"
+        aria-hidden="true"
+    ></span>
+{/snippet}
+
+<!-- Row checkbox: sits over the status dot (which fades out beneath it) so the
+     row keeps the artifact's geometry. Lives in the row wrapper (not the button)
+     to keep the markup valid, positioned to land on the dot. The 14px box is
+     wrapped in a 28px label so the hover/click hitbox is comfortable without
+     enlarging the visible checkbox. Used by both the task rail and the
+     cross-task /runs grid so selection behaves identically in each. -->
+{#snippet rowCheckboxOverlay(run: Run)}
+    <label
+        class="absolute top-1/2 left-[2px] z-10 flex size-7 -translate-y-1/2 cursor-pointer items-center justify-center"
+    >
+        <input
+            type="checkbox"
+            checked={isRowSelected(run.id)}
+            onchange={() => toggleRow(run.id)}
+            onclick={(e) => e.stopPropagation()}
+            aria-label={`Select run from ${formatDateTime(run.start_at ?? run.created_at)}`}
+            class="size-3.5 cursor-pointer rounded border-outline accent-primary opacity-0 transition-opacity {selectionActive
+                ? 'opacity-100'
+                : 'group-hover/row:opacity-100'}"
+        />
+    </label>
+{/snippet}
+
+{#snippet runRowButton(run: Run, isActive: boolean, match: RunOutputMatch | undefined)}
+    {@const dstatus = runDisplayStatus(run)}
+    {@const config = getRunStatusConfig(dstatus)}
+    {@const running = run.status === "running"}
+    {@const spine = config.dot.replace(" animate-pulse", "")}
+    {@const startedAt = run.start_at ?? run.created_at}
+    {@const retry = runRetryLabel(run)}
+    {@const suffix = instanceSuffix(run.instance_index, getInstanceCount(run.task_name))}
+    <button
+        class="btn-scale group relative w-full rounded-[10px] border text-left transition-all select-none {showTaskName
+            ? 'p-3'
+            : 'px-3 py-[11px]'} {isActive
+            ? 'border-outline bg-surface-raised shadow-sm'
+            : 'border-transparent hover:bg-surface-sunken'}"
+        onclick={() => selectRun(run.id)}
+        onkeydown={(e) => e.key === "Enter" && selectRun(run.id)}
+    >
+        {#if showTaskName}
+            <!-- Cross-task /runs variant: the same readout language as the task
+                 rail — status dot, status-colored outcome, mono right readout —
+                 with the task name carried as the primary. -->
+            <div class="flex items-center gap-2.5">
+                {@render statusDot(config.color, running)}
+                <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+                    <span class="flex items-center gap-1.5">
+                        <span class="truncate text-[13px] font-semibold text-on-surface">
+                            {run.task_name}{#if suffix}<span class="text-on-surface-muted"
+                                    >{suffix}</span
+                                >{/if}
+                        </span>
+                        <span class="shrink-0 text-on-surface-faint">·</span>
+                        <span class="shrink-0 text-[12px] font-semibold capitalize {config.color}"
+                            >{dstatus}</span
+                        >
+                    </span>
+                    <span
+                        class="flex min-w-0 items-center gap-1.5 text-2xs text-on-surface-faint"
+                        title={formatFullDateTime(startedAt)}
+                    >
+                        <span class="truncate">{formatDateTime(startedAt)}</span>
+                        <span class="shrink-0">· {formatTriggeredByLabel(run.triggered_by)}</span>
+                        {#if retry}
+                            <span class="shrink-0 rounded bg-surface-sunken px-1 font-mono"
+                                >{retry}</span
+                            >
+                        {/if}
+                    </span>
+                </span>
+                <span
+                    class="shrink-0 self-start pt-0.5 font-mono text-[11.5px] text-on-surface-faint tabular-nums"
+                    title={retry ?? undefined}
+                >
+                    {rowRightLabel(run, dstatus)}
+                </span>
+            </div>
+        {:else}
+            <!-- Task-rail variant (artifact ".run"): a single dense line —
+                 time · date · outcome, with a mono exit/duration readout.
+                 leading-tight matches the artifact's ~1.2 line-height so the
+                 (descender-less) text optically centers instead of riding high
+                 inside Tailwind's default 1.5 line box. -->
+            <div class="flex items-center gap-[11px] leading-tight">
+                {@render statusDot(config.color, running)}
+                <span class="flex min-w-0 flex-1 items-center gap-1.5 truncate">
+                    <span
+                        class="text-[12.5px] font-semibold tracking-tight text-on-surface"
+                        title={formatFullDateTime(startedAt)}
+                    >
+                        {formatTimeHM(startedAt)} · {formatDayMonth(startedAt)}
+                    </span>
+                    <span class="text-on-surface-faint">·</span>
+                    <span class="text-[12.5px] font-semibold capitalize {config.color}"
+                        >{dstatus}</span
+                    >
+                    {#if suffix}
+                        <span class="font-mono text-2xs text-on-surface-faint">{suffix}</span>
+                    {/if}
+                </span>
+                <span
+                    class="shrink-0 font-mono text-[11.5px] text-on-surface-faint tabular-nums"
+                    title={retry ?? undefined}
+                >
+                    {rowRightLabel(run, dstatus)}
+                </span>
+            </div>
+            {#if match}
+                {@const hl = highlightParts(match.text, outputQuery)}
+                <div
+                    class="mt-1.5 truncate rounded-md bg-surface-sunken px-2 py-1 font-mono text-2xs text-on-surface-muted"
+                >
+                    {hl.before}<mark
+                        class="rounded-sm bg-primary-soft px-0.5 text-primary-soft-text"
+                        >{hl.match}</mark
+                    >{hl.after}
+                </div>
+            {/if}
+        {/if}
+
+        <div
+            class="duration-normal absolute inset-y-2 left-[-6px] w-[3px] rounded-[3px] transition-all {spine} {isActive
+                ? 'opacity-100'
+                : 'opacity-0'}"
+            aria-hidden="true"
+        ></div>
+    </button>
+{/snippet}