@runwisp/ui 0.13.0 → 0.15.0

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

@@ -15,7 +15,7 @@
         RotateCw,
         RefreshCcw,
         ChevronDown,
-        History,
+        RotateCcwClock,
         PanelLeftClose,
         SlidersHorizontal,
         Maximize2,
@@ -31,19 +31,14 @@
     import { portal } from "../../actions/portal.js";
     import type { Run } from "./types.js";
     import type { LogEvent, LogSlice } from "../../log-console/types.js";
-    import {
-        formatDateTime,
-        formatFullDateTime,
-        formatClockTime,
-        formatCalendarDate,
-        formatTimeHM,
-    } from "../../utils/format.js";
+    import { formatClockTime, formatCalendarDate } from "../../utils/format.js";
     import { formatShortId } from "../../utils/id.js";
     import { TickingNow } from "../../utils/ticking-now.svelte.js";
     import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
     import {
         runDuration,
         runStartDelay,
+        runVerdict,
         formatTriggeredByLabel,
         runRetryLabel,
         instanceSuffix,
@@ -204,41 +199,12 @@
         }
     }
 
-    // One-word context line under the Exit value. Only success/failed carry a
-    // real process exit code; the others end on a synthetic sentinel, so the
-    // cell reads the reason ("stopped before exit") rather than "Code -1".
-    function exitSubLabel(displayed: string): string {
-        if (displayed === "running" || displayed === "pending") return "in progress";
-        if (displayed === "success") return "clean";
-        if (displayed === "failed") return "non-zero";
-        if (displayed === "stopped" || displayed === "daemon_stopped") return "stopped before exit";
-        if (displayed === "timeout") return "timed out";
-        if (displayed === "crashed") return "killed";
-        return "no exit code";
-    }
-
-    // One-word context line under each Trigger value, mirroring the source.
-    function triggerSub(triggeredBy: Run["triggered_by"]): string {
-        if (triggeredBy === "cron") return "schedule";
-        if (triggeredBy === "api") return "manual";
-        if (triggeredBy === "service") return "supervised";
-        if (triggeredBy === "startup") return "on boot";
-        return "remote";
-    }
-
-    // The status's accent color as a runtime CSS variable, used to wash the
-    // header in a faint tint of the outcome (the "black-box readout" look).
-    // Neutral statuses resolve to the surface itself, so the tint vanishes.
-    function accentVar(displayed: string): string {
-        if (displayed === "running" || displayed === "pending") return "var(--color-info)";
-        if (displayed === "success") return "var(--color-success-surface)";
-        if (
-            displayed === "stopped" ||
-            displayed === "timeout" ||
-            displayed === "daemon_stopped" ||
-            displayed === "queue_full"
-        )
-            return "var(--color-warning-surface)";
+    // The accent for a status that means "something to triage", or undefined
+    // when there is nothing wrong. Tint is reserved for alarms (DESIGN.md) so a
+    // failure is the one lit thing on the page — a deliberate stop or a skip is
+    // not a failure, and success least of all. Doubles as the switch for the
+    // verdict phrase's colour, so wash and wording light up together.
+    function alarmAccent(displayed: string): string | undefined {
         if (
             displayed === "failed" ||
             displayed === "crashed" ||
@@ -247,7 +213,9 @@
             displayed === "start_failed"
         )
             return "var(--color-danger-surface)";
-        return "var(--color-surface-raised)";
+        if (displayed === "timeout" || displayed === "daemon_stopped" || displayed === "queue_full")
+            return "var(--color-warning-surface)";
+        return undefined;
     }
 
     function handleConsoleKeydown(event: KeyboardEvent) {
@@ -320,15 +288,16 @@
         run.status === "running" ? durationTicker.now.getTime() : undefined,
     )}
     {@const startDelay = runStartDelay(run)}
-    {@const startedAt = run.start_at ?? run.created_at}
+    {@const startedAt = run.startAt ?? run.createdAt}
     {@const retry = runRetryLabel(run)}
     {@const paramEntries = run.params ? Object.entries(run.params) : []}
-    {@const suffix = instanceSuffix(run.instance_index, getInstanceCount(run.task_name))}
+    {@const suffix = instanceSuffix(run.instanceIndex, getInstanceCount(run.taskName))}
     {@const spine = config.dot.replace(" animate-pulse", "")}
     {@const isRunning = run.status === "running"}
-    {@const showCode = status === "success" || status === "failed"}
-    {@const exitClean = status === "success"}
-    {@const exitFail = status === "failed"}
+    <!-- A code is worth the ink only when it is news: `exit 0` restates
+         "succeeded", while a non-zero code is the first thing to triage on. -->
+    {@const showCode = status === "failed"}
+    {@const verdict = runVerdict(status)}
     {@const endLabel =
         status === "stopped"
             ? "run stopped by operator"
@@ -341,7 +310,7 @@
         status === "stopped" || status === "daemon_stopped" || status === "timeout"
             ? "warn"
             : "muted"}
-    {@const accent = accentVar(status)}
+    {@const alarm = alarmAccent(status)}
     <!-- The panel: a status spine runs the full left edge across both the header
          readout and the console below, hugging the rail divider (artifact
          ".detail .spine"). -->
@@ -352,102 +321,125 @@
             class="absolute inset-y-0 left-0 z-[3] w-1 {spine} {isRunning ? 'spine-flow' : ''}"
             aria-hidden="true"
         ></div>
-        <!-- Detailed header: a black-box readout washed in a faint tint of the
-             run's outcome. -->
+        <!-- Detailed header: a readout whose ink scales with how much went wrong.
+             Every run states its outcome in one phrase over one quiet fact line;
+             only a run worth triaging colours the phrase and tints the surface.
+             Nothing here is a fixed slot — every fact renders only when it is
+             true, so the header's height is itself a signal. -->
         <div
             class="head-region @container relative shrink-0 border-b border-outline-faint"
-            style="--rw-oc: {accent}"
+            style="--rw-oc: {alarm ?? 'var(--color-surface-raised)'}"
         >
-            <div class="pt-[18px] pr-[22px] pb-[14px] pl-[26px]">
+            <div class="pt-[18px] pr-[22px] pb-[16px] pl-[26px]">
                 <div class="flex items-start gap-4">
-                    <!-- Verdict tile -->
-                    <div
-                        class="flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[11px] {config.bg} {config.color} ring-1 ring-current/25 ring-inset"
-                    >
-                        <DetailIcon size={20} class={isRunning ? "animate-spin" : ""} />
-                    </div>
-
                     <div class="min-w-0 flex-1">
-                        <div class="flex flex-wrap items-center gap-2.5">
-                            <h2 class="text-lg font-[650] tracking-tight text-on-surface">
-                                {#if showTaskName}
-                                    {run.task_name}{#if suffix}<span class="text-on-surface-muted"
-                                            >{suffix}</span
-                                        >{/if}
-                                {:else}
-                                    <span title={formatFullDateTime(startedAt)}
-                                        >Run · {formatDateTime(startedAt)}</span
-                                    >{#if suffix}
-                                        <span class="text-on-surface-muted"
-                                            >· instance {suffix}</span
+                        <!-- Identity, but only where the page around the panel isn't
+                         already saying it: the cross-task runs list needs the task
+                         name, a task's own page already has it in the breadcrumb. -->
+                        {#if showTaskName || suffix}
+                            <div
+                                class="mb-1.5 font-mono text-[11.5px] font-medium tracking-[0.06em] text-on-surface-muted"
+                            >
+                                {showTaskName ? `${run.taskName}${suffix}` : `instance ${suffix}`}
+                            </div>
+                        {/if}
+
+                        <!-- Verdict: the outcome as one sentence, and the only large
+                         type in the panel. It is prose, so the phrase is sans and
+                         only the tokens inside it — the duration, a failing exit —
+                         are mono (DESIGN.md's mono-vs-sans rule). The glyph is bare
+                         — no plate, no ring — so it reads as part of the sentence,
+                         and it alone carries the outcome colour on a healthy run:
+                         green words are ink spent on nothing being wrong. -->
+                        <Tooltip content={config.description} position="right" wide>
+                            <h2
+                                class="flex flex-wrap items-center gap-x-2.5 text-[22px] @max-2xl:text-[18px] @max-xs:text-[16px]"
+                                data-testid="run-verdict"
+                                data-status={status}
+                            >
+                                <DetailIcon
+                                    size={18}
+                                    strokeWidth={2.25}
+                                    class="shrink-0 {config.color} {isRunning
+                                        ? 'animate-spin'
+                                        : ''}"
+                                />
+                                <span
+                                    class="font-sans font-semibold tracking-[-0.01em] {alarm
+                                        ? config.color
+                                        : 'text-on-surface'}">{verdict.verb}</span
+                                >
+                                {#if verdict.timed && duration}
+                                    <span
+                                        class="font-mono text-[0.86em] font-medium text-on-surface tabular-nums"
+                                        data-testid="run-duration">{duration}</span
+                                    >
+                                {/if}
+                                {#if showCode}
+                                    <!-- Grouped with its own separator so a wrap can
+                                     never leave the dot dangling at a line end. -->
+                                    <span
+                                        class="inline-flex items-center gap-x-2.5 font-mono text-[0.86em] font-medium tabular-nums"
+                                    >
+                                        <span class="text-on-surface-faint" aria-hidden="true"
+                                            >·</span
                                         >
-                                    {/if}
+                                        <span class="text-danger-surface" data-testid="run-exit"
+                                            >exit {run.exitCode}</span
+                                        >
+                                    </span>
                                 {/if}
                             </h2>
-                            <!-- Status word: the pill is colored by the run's own
-                             outcome, so stopped reads amber, not red. -->
-                            <Tooltip content={config.description} position="bottom" wide>
-                                <span
-                                    class="rounded-full border px-2.5 py-0.5 text-2xs font-bold tracking-wider uppercase {config.color} {config.bg} {config.border}"
-                                >
-                                    {status.toUpperCase()}
-                                </span>
-                            </Tooltip>
-                        </div>
+                        </Tooltip>
 
+                        <!-- Facts: when it happened and what shaped it. Queue wait,
+                         retries and parameters are absent on an ordinary run and
+                         appear inline the moment they exist. -->
                         <div
-                            class="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-on-surface-muted"
+                            class="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-[11.5px] text-on-surface-faint tabular-nums"
                         >
-                            {#if showTaskName}
-                                <!-- When the title carries the task name, the run's
-                                 date/time lives here in the sub-line (otherwise it's
-                                 already the title, so don't repeat it). -->
-                                <span title={formatFullDateTime(startedAt)}>
-                                    Run · {formatCalendarDate(startedAt)}
-                                    {formatTimeHM(startedAt)}
-                                </span>
-                            {/if}
-                            <!-- Run-id chip: click to copy the full ULID -->
-                            <button
-                                type="button"
-                                onclick={() => copyRunId(run.id)}
-                                title="Copy run ID"
-                                class="inline-flex items-center gap-1.5 rounded-md border border-outline-faint bg-surface-sunken px-1.5 py-0.5 font-mono text-2xs text-on-surface-faint transition-colors hover:border-outline hover:text-on-surface-muted"
+                            <!-- No hover-for-the-full-timestamp here: the date sits
+                             right beside the clock time, so a tooltip could only
+                             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
                             >
-                                {#if copiedId}
-                                    <Check size={11} class="text-success-surface" />Copied
-                                {:else}
-                                    <Hash size={11} />{run.id}
-                                {/if}
-                            </button>
+                            <span class="text-outline-hover" aria-hidden="true">·</span>
+                            <span>{formatCalendarDate(startedAt)}</span>
+                            <span class="text-outline-hover" aria-hidden="true">·</span>
+                            <span>via {formatTriggeredByLabel(run.triggeredBy).toLowerCase()}</span>
+                            {#if startDelay}
+                                <span class="text-outline-hover" aria-hidden="true">·</span>
+                                <span
+                                    class="text-warning-soft-text"
+                                    title="Waited between its scheduled tick and actually starting"
+                                    >{startDelay} queued</span
+                                >
+                            {/if}
                             {#if retry}
-                                <span class="hidden h-1 w-1 rounded-full bg-outline-faint sm:block"
-                                ></span>
-                                <span class="inline-flex items-center gap-1.5">
-                                    <RotateCw size={14} />
-                                    Retry #{run.retry_attempt}{#if run.retry_of_run_id}
-                                        <span class="text-on-surface-faint"
-                                            >of run {formatShortId(run.retry_of_run_id)}</span
-                                        >{/if}
+                                <span class="text-outline-hover" aria-hidden="true">·</span>
+                                <span class="inline-flex items-center gap-1">
+                                    <RotateCw size={11} />
+                                    retry #{run.retryAttempt}{#if run.retryOfRunId}&nbsp;of
+                                        {formatShortId(run.retryOfRunId)}{/if}
                                 </span>
                             {/if}
                             {#if paramEntries.length > 0}
-                                <span class="hidden h-1 w-1 rounded-full bg-outline-faint sm:block"
-                                ></span>
+                                <span class="text-outline-hover" aria-hidden="true">·</span>
                                 <Popover placement="bottom-start">
                                     {#snippet trigger()}
                                         <span
-                                            class="inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-outline-faint bg-surface-sunken px-2.5 py-0.5 text-xs font-medium text-on-surface-muted transition-colors hover:border-outline hover:text-on-surface"
-                                            title="View run parameters"
+                                            class="inline-flex cursor-pointer items-center gap-1 border-b border-dotted border-outline-hover text-on-surface-muted hover:text-primary"
                                         >
-                                            <SlidersHorizontal size={12} />
+                                            <SlidersHorizontal size={11} />
                                             {paramEntries.length}
                                             {paramEntries.length === 1 ? "parameter" : "parameters"}
                                         </span>
                                     {/snippet}
                                     <div class="max-w-md min-w-48">
                                         <span
-                                            class="text-xs font-semibold tracking-wide text-on-surface-faint uppercase"
+                                            class="font-mono text-xs font-semibold tracking-[0.14em] text-on-surface-faint uppercase"
                                             >Parameters</span
                                         >
                                         <dl
@@ -467,6 +459,21 @@
                                     </div>
                                 </Popover>
                             {/if}
+                            <!-- Run-id chip: click to copy the full ULID. Last, because
+                             it is the fact you reach for least and the only one you
+                             interact with. -->
+                            <button
+                                type="button"
+                                onclick={() => copyRunId(run.id)}
+                                title="Copy run ID"
+                                class="inline-flex items-center gap-1 rounded-[3px] border border-outline-faint bg-surface-sunken px-1.5 text-on-surface-faint hover:border-outline-hover hover:text-primary"
+                            >
+                                {#if copiedId}
+                                    <Check size={11} class="text-success-surface" />Copied
+                                {:else}
+                                    <Hash size={11} />{run.id}
+                                {/if}
+                            </button>
                         </div>
                     </div>
 
@@ -477,7 +484,7 @@
                             <button
                                 type="button"
                                 onclick={() => onToggleHistory()}
-                                class="inline-flex items-center justify-center rounded-lg border border-outline-faint bg-surface-raised p-2 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface"
+                                class="inline-flex items-center justify-center rounded-[3px] border border-outline-faint bg-surface-raised p-2 text-on-surface-muted hover:border-outline-hover hover:bg-surface-sunken hover:text-primary"
                                 title={historyVisible ? "Hide run history" : "Show run history"}
                                 aria-label={historyVisible
                                     ? "Hide run history"
@@ -486,7 +493,7 @@
                                 {#if historyVisible}
                                     <PanelLeftClose size={15} />
                                 {:else}
-                                    <History size={15} />
+                                    <RotateCcwClock size={15} />
                                 {/if}
                             </button>
                         {/if}
@@ -505,7 +512,7 @@
                                     title={serviceStopped
                                         ? "Starts the service"
                                         : "Cancels and respawns every instance"}
-                                    class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border border-primary-soft bg-surface-raised px-3 text-sm font-medium text-primary transition-colors hover:bg-primary-soft disabled:cursor-not-allowed disabled:opacity-60"
+                                    class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-[3px] border border-primary-soft-border bg-surface-raised px-3 font-mono text-sm font-medium text-primary hover:bg-primary-soft active:translate-y-px disabled:cursor-not-allowed disabled:opacity-60"
                                 >
                                     {#if serviceStopped}
                                         <Play size={15} fill="currentColor" stroke="none" />
@@ -523,7 +530,7 @@
                                     onclick={() => onStopService()}
                                     disabled={serviceBusy}
                                     title="Stops the service for the rest of the daemon's lifetime"
-                                    class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border border-danger-soft bg-surface-raised px-3 text-sm font-medium text-danger-surface transition-colors hover:bg-danger-soft disabled:cursor-not-allowed disabled:opacity-60"
+                                    class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-[3px] border border-danger-soft-border bg-surface-raised px-3 font-mono text-sm font-medium text-danger-surface hover:bg-danger-soft active:translate-y-px disabled:cursor-not-allowed disabled:opacity-60"
                                 >
                                     <Square size={15} fill="currentColor" stroke="none" />
                                     <span class="@max-md:hidden">Stop Service</span>
@@ -534,13 +541,13 @@
                                 <!-- Split button: Run (defaults) + an arrow for the
                                  reuse-parameters variant, shown only when there is one. -->
                                 <div
-                                    class="inline-flex overflow-hidden rounded-lg border border-primary-soft"
+                                    class="inline-flex overflow-hidden rounded-[3px] border border-primary-soft-border"
                                 >
                                     <button
                                         type="button"
                                         onclick={() => onRun()}
                                         title="Run this task now with default options"
-                                        class="inline-flex h-9 cursor-pointer items-center gap-1.5 bg-surface-raised px-3 text-sm font-medium text-primary transition-colors hover:bg-primary-soft"
+                                        class="inline-flex h-9 cursor-pointer items-center gap-1.5 bg-surface-raised px-3 font-mono text-sm font-medium text-primary hover:bg-primary-soft active:translate-y-px"
                                     >
                                         <Play size={15} fill="currentColor" stroke="none" />
                                         <span class="@max-md:hidden">Run</span>
@@ -549,7 +556,7 @@
                                         <Popover bind:open={runMenuOpen} placement="bottom-end">
                                             {#snippet trigger()}
                                                 <span
-                                                    class="flex h-9 cursor-pointer items-center border-l border-primary-soft bg-surface-raised px-2 text-primary transition-colors hover:bg-primary-soft"
+                                                    class="flex h-9 cursor-pointer items-center border-l border-primary-soft-border bg-surface-raised px-2 text-primary hover:bg-primary-soft"
                                                     title="More run options"
                                                     aria-label="More run options"
                                                 >
@@ -570,7 +577,7 @@
                                                 />
                                                 <span class="flex flex-col">
                                                     <span
-                                                        class="text-sm font-medium text-on-surface"
+                                                        class="font-mono text-sm font-medium text-on-surface"
                                                         >Run again</span
                                                     >
                                                     <span class="text-xs text-on-surface-muted"
@@ -586,7 +593,7 @@
                                 <button
                                     type="button"
                                     onclick={() => onStop(run.id)}
-                                    class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border border-danger-soft bg-surface-raised px-3 text-sm font-medium text-danger-surface transition-colors hover:bg-danger-soft"
+                                    class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-[3px] border border-danger-soft-border bg-surface-raised px-3 font-mono text-sm font-medium text-danger-surface hover:bg-danger-soft active:translate-y-px"
                                 >
                                     <Square size={15} fill="currentColor" stroke="none" />
                                     <span class="@max-md:hidden">Stop</span>
@@ -595,10 +602,10 @@
                         {/if}
                         <a
                             href="/api/tasks/{encodeURIComponent(
-                                run.task_name,
+                                run.taskName,
                             )}/runs/{encodeURIComponent(run.id)}/log/raw"
-                            download="{run.task_name}-{run.id}.log"
-                            class="inline-flex items-center justify-center rounded-lg border border-outline-faint bg-surface-raised p-2 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface"
+                            download="{run.taskName}-{run.id}.log"
+                            class="inline-flex items-center justify-center rounded-[3px] border border-outline-faint bg-surface-raised p-2 text-on-surface-muted hover:border-outline-hover hover:bg-surface-sunken hover:text-primary"
                             title="Download the full log (rotated and current parts as one file)"
                             aria-label="Download log"
                         >
@@ -608,7 +615,7 @@
                             <Popover bind:open={confirmDeleteOpen} placement="bottom-end">
                                 {#snippet trigger()}
                                     <span
-                                        class="flex cursor-pointer items-center justify-center rounded-lg border border-outline-faint bg-surface-raised p-2 text-on-surface-muted transition-colors hover:border-danger-soft hover:bg-danger-soft hover:text-danger-surface"
+                                        class="flex cursor-pointer items-center justify-center rounded-[3px] border border-outline-faint bg-surface-raised p-2 text-on-surface-muted hover:border-danger-soft-border hover:bg-danger-soft hover:text-danger-surface"
                                         title="Delete this run"
                                         aria-label="Delete run"
                                     >
@@ -616,7 +623,7 @@
                                     </span>
                                 {/snippet}
                                 <div class="w-60">
-                                    <div class="text-sm font-semibold text-on-surface">
+                                    <div class="font-mono text-sm font-semibold text-on-surface">
                                         Delete this run?
                                     </div>
                                     <div class="mt-1 text-xs leading-relaxed text-on-surface-muted">
@@ -647,105 +654,6 @@
                         {/if}
                     </div>
                 </div>
-
-                <!-- Instrument cluster: the run's vital readout — value over a one-word
-                 context line, hairline-divided. -->
-                <div
-                    class="mt-4 flex flex-wrap overflow-hidden rounded-xl border border-outline-faint bg-surface-raised"
-                >
-                    <div
-                        class="flex min-w-30 flex-1 flex-col gap-0.5 border-l border-outline-faint px-4 py-2.5 first:border-l-0"
-                    >
-                        <span
-                            class="text-2xs font-bold tracking-wider text-on-surface-faint uppercase"
-                            >Queued</span
-                        >
-                        <span
-                            class="font-mono text-base font-medium tracking-tight whitespace-nowrap text-on-surface tabular-nums"
-                            title={formatFullDateTime(run.created_at)}
-                        >
-                            {formatClockTime(run.created_at)}
-                        </span>
-                        <span class="text-2xs text-on-surface-muted"
-                            >+{startDelay ?? "0s"} queued</span
-                        >
-                    </div>
-
-                    <div
-                        class="flex min-w-30 flex-1 flex-col gap-0.5 border-l border-outline-faint px-4 py-2.5 first:border-l-0"
-                    >
-                        <span
-                            class="text-2xs font-bold tracking-wider text-on-surface-faint uppercase"
-                            >Started</span
-                        >
-                        <span
-                            class="font-mono text-base font-medium tracking-tight whitespace-nowrap text-on-surface tabular-nums"
-                        >
-                            {run.start_at ? formatClockTime(run.start_at) : "—"}
-                        </span>
-                        <span class="text-2xs text-on-surface-muted">
-                            {run.start_at ? formatCalendarDate(run.start_at) : "not started"}
-                        </span>
-                    </div>
-
-                    <div
-                        class="flex min-w-30 flex-1 flex-col gap-0.5 border-l border-outline-faint px-4 py-2.5 first:border-l-0"
-                    >
-                        <span
-                            class="text-2xs font-bold tracking-wider text-on-surface-faint uppercase"
-                            >Ran for</span
-                        >
-                        <span
-                            class="font-mono text-base font-medium tracking-tight whitespace-nowrap text-on-surface tabular-nums"
-                        >
-                            {duration ?? "—"}
-                        </span>
-                        <span class="text-2xs text-on-surface-muted">
-                            {isRunning ? "and counting" : run.end_at ? "wall clock" : "—"}
-                        </span>
-                    </div>
-
-                    <div
-                        class="flex min-w-30 flex-1 flex-col gap-0.5 border-l border-outline-faint px-4 py-2.5 first:border-l-0"
-                    >
-                        <span
-                            class="text-2xs font-bold tracking-wider text-on-surface-faint uppercase"
-                            >Exit</span
-                        >
-                        <span
-                            class="flex items-baseline gap-1.5 font-mono text-base font-medium tracking-tight tabular-nums {exitClean
-                                ? 'text-success-surface'
-                                : exitFail
-                                  ? 'text-danger-surface'
-                                  : 'text-on-surface'}"
-                        >
-                            <span>{showCode ? run.exit_code : "—"}</span>
-                            {#if exitFail}
-                                <span
-                                    class="rounded bg-danger-soft px-1 py-px text-[9px] font-bold tracking-wide text-danger-surface uppercase"
-                                    >fail</span
-                                >
-                            {/if}
-                        </span>
-                        <span class="text-2xs text-on-surface-muted">{exitSubLabel(status)}</span>
-                    </div>
-
-                    <div
-                        class="flex min-w-30 flex-1 flex-col gap-0.5 border-l border-outline-faint px-4 py-2.5 first:border-l-0"
-                    >
-                        <span
-                            class="text-2xs font-bold tracking-wider text-on-surface-faint uppercase"
-                            >Trigger</span
-                        >
-                        <span
-                            class="font-mono text-base font-medium tracking-tight whitespace-nowrap text-on-surface tabular-nums"
-                            >{formatTriggeredByLabel(run.triggered_by)}</span
-                        >
-                        <span class="text-2xs text-on-surface-muted"
-                            >{triggerSub(run.triggered_by)}</span
-                        >
-                    </div>
-                </div>
             </div>
         </div>
 
@@ -761,25 +669,27 @@
         <div
             use:maximizePortal={consoleMaximized}
             class={consoleMaximized
-                ? "console-zoom fixed inset-3 z-50 flex flex-col overflow-hidden rounded-xl bg-[var(--rw-con-bg)] shadow-2xl ring-1 ring-[rgb(255_255_255_/_0.08)] sm:inset-6"
-                : "ml-1 flex min-h-[300px] flex-1 flex-col overflow-hidden border-t border-[rgb(255_255_255_/_0.06)] bg-[var(--rw-con-bg)]"}
+                ? "console-zoom fixed inset-3 z-50 flex flex-col overflow-hidden rounded-[4px] bg-[var(--rw-con-bg)] shadow-2xl ring-1 ring-[var(--rw-con-gutter)] sm:inset-6"
+                : "ml-1 flex min-h-[300px] flex-1 flex-col overflow-hidden border-t border-[var(--rw-con-gutter)] bg-[var(--rw-con-bg)]"}
         >
             <div
-                class="flex shrink-0 items-center justify-between gap-3 border-b border-[rgb(255_255_255_/_0.06)] bg-[var(--rw-con-panel)] px-3.5 py-[9px] font-mono text-[11.5px] text-[var(--rw-con-dim)]"
+                class="flex shrink-0 items-center justify-between gap-3 border-b border-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)] px-3.5 py-[9px] font-mono text-[11.5px] text-[var(--rw-con-dim)]"
             >
                 <div class="flex min-w-0 items-center gap-3">
                     {#if consoleMaximized}
                         <!-- Focus-mode identity: which run is filling the screen -->
                         <span class="flex min-w-0 items-center gap-2">
                             <span class="h-2 w-2 shrink-0 rounded-full {spine}"></span>
-                            <span class="truncate font-medium text-[#b8c5d1]">
-                                {run.task_name}{suffix}
+                            <span class="truncate font-medium text-[var(--rw-con-text)]">
+                                {run.taskName}{suffix}
                             </span>
                             <span class="text-[var(--rw-con-gutter)]">·</span>
                             <span class="font-semibold capitalize {config.color}">{status}</span>
                         </span>
                     {:else}
-                        <span class="flex items-center gap-2 font-semibold text-[#98a7b5]">
+                        <span
+                            class="flex items-center gap-2 font-semibold text-[var(--rw-con-text)]"
+                        >
                             <TerminalIcon size={14} class="opacity-70" />
                             Console output
                         </span>
@@ -792,8 +702,8 @@
                     <button
                         type="button"
                         onclick={() => (consoleWrap = !consoleWrap)}
-                        class="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 transition-colors hover:bg-[rgb(255_255_255_/_0.05)] hover:text-[#b8c5d1] {consoleWrap
-                            ? 'text-[#b8c5d1]'
+                        class="flex cursor-pointer items-center gap-1.5 rounded-[3px] px-2 py-1 hover:bg-[var(--rw-con-gutter)]/30 hover:text-[var(--rw-con-text)] {consoleWrap
+                            ? 'text-[var(--rw-con-text)]'
                             : 'text-[var(--rw-con-dim)]'}"
                         title={consoleWrap ? "Unwrap lines" : "Wrap long lines"}
                         aria-pressed={consoleWrap}
@@ -805,14 +715,14 @@
                     <button
                         type="button"
                         onclick={() => (consoleMaximized = !consoleMaximized)}
-                        class="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-[var(--rw-con-dim)] transition-colors hover:bg-[rgb(255_255_255_/_0.05)] hover:text-[#b8c5d1]"
+                        class="flex cursor-pointer items-center gap-1.5 rounded-[3px] px-2 py-1 text-[var(--rw-con-dim)] hover:bg-[var(--rw-con-gutter)]/30 hover:text-[var(--rw-con-text)]"
                         title={consoleMaximized ? "Restore console (Esc)" : "Maximize console · F"}
                         aria-label={consoleMaximized ? "Restore console" : "Maximize console"}
                     >
                         {#if consoleMaximized}
                             <Minimize2 size={13} />
                             <span
-                                class="rounded border border-[var(--rw-con-gutter)] px-1.5 text-[10px] tracking-wide"
+                                class="rounded-[3px] border border-[var(--rw-con-gutter)] px-1.5 text-[10px] tracking-wide"
                                 >Esc</span
                             >
                         {:else}
@@ -855,7 +765,7 @@
             <button
                 type="button"
                 onclick={() => onRunTask()}
-                class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-primary-soft bg-surface-raised px-3 py-2 text-sm font-medium text-primary transition-colors hover:bg-primary-soft"
+                class="inline-flex cursor-pointer items-center gap-1.5 rounded-[3px] border border-primary-soft-border bg-surface-raised px-3 py-2 font-mono text-sm font-medium text-primary hover:bg-primary-soft active:translate-y-px"
             >
                 <Play size={15} fill="currentColor" stroke="none" />
                 Run task
@@ -865,16 +775,17 @@
 {/if}
 
 <style>
-    /* The header is washed in a faint tint of the run's outcome colour
-       (--rw-oc, set inline). Neutral statuses pass the surface itself, so the
-       mix collapses to a plain surface with no visible tint. */
+    /* Only a run worth triaging is washed in its outcome colour (--rw-oc, set
+       inline). Everything else — success included — passes the surface itself so
+       the mix collapses to a plain surface, which is what lets a genuine failure
+       be the one lit thing on the page. */
     .head-region {
-        background: color-mix(in srgb, var(--rw-oc) 4.5%, var(--color-surface-raised));
+        background: color-mix(in srgb, var(--rw-oc) 7%, var(--color-surface-raised));
     }
 
     /* Gentle fade for the maximize backdrop; disabled under reduced motion. */
     .console-backdrop {
-        animation: console-backdrop-in 150ms ease-out;
+        animation: console-backdrop-in 150ms;
     }
     @keyframes console-backdrop-in {
         from {