@runwisp/ui 0.12.0 → 0.14.0

package/src/lib/components/Textarea.svelte

@@ -34,21 +34,21 @@
     };
 
     const textareaClasses = `
-		w-full px-3.5 py-2.5 rounded-lg border
+		w-full px-3.5 py-2.5 rounded-[3px] border font-mono
 		text-sm bg-surface-raised text-on-surface placeholder:text-on-surface-faint
-		focus:outline-none focus:ring-2 focus:ring-offset-0
+		focus:outline-none focus:ring-2 focus:ring-offset-2
 		disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
-		transition-colors duration-fast
-	`;
+			`;
 
     const normalBorder =
-        "border-outline hover:border-outline-hover focus:border-ring focus:ring-ring/20";
-    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+        "border-outline hover:border-outline-hover shadow-sm focus:border-ring focus:ring-ring";
+    const errorBorder =
+        "border-danger-surface focus:border-danger-surface focus:ring-danger-surface";
 </script>
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label class="block text-sm font-medium text-on-surface-muted" for={id}>
+        <label class="block font-mono text-xs font-medium text-on-surface-muted" for={id}>
             {label}
         </label>
     {/if}
@@ -63,8 +63,7 @@
             {disabled}
             {id}
             bind:value
-            {...restProps}
-        ></textarea>
+            {...restProps}></textarea>
 
         {#if error}
             <div class="pointer-events-none absolute top-3 right-3 text-danger-soft-text">
@@ -74,8 +73,8 @@
     </div>
 
     {#if error}
-        <p class="text-sm text-danger-soft-text">{error}</p>
+        <p class="font-sans text-xs text-danger-soft-text">{error}</p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/ThemeToggle.svelte

@@ -37,7 +37,7 @@
     aria-pressed={isDark}
     aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
     title={isDark ? "Switch to light theme" : "Switch to dark theme"}
-    class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-outline bg-surface-raised text-on-surface-muted transition-colors hover:border-outline-hover hover:text-on-surface {className}"
+    class="inline-flex h-9 w-9 items-center justify-center rounded-[3px] border border-outline bg-surface-raised text-on-surface-muted hover:border-outline-hover hover:text-on-surface {className}"
 >
     {#if mounted && isDark}
         <Sun size={16} />

package/src/lib/components/ToastContainer.svelte

@@ -62,7 +62,7 @@
         <div
             in:fly={{ y: 20, duration: 300 }}
             out:fade={{ duration: 200 }}
-            class="pointer-events-auto isolate flex max-w-md min-w-[320px] items-start gap-3 rounded-xl border bg-surface-overlay/95 px-4 py-3 shadow-lg ring-1 ring-on-surface/5 backdrop-blur-md {getColorClasses(
+            class="pointer-events-auto isolate flex max-w-md min-w-[320px] items-start gap-3 rounded-[4px] border bg-surface-overlay px-4 py-3 shadow-lg {getColorClasses(
                 toastItem.type,
             )}"
             role="alert"
@@ -79,14 +79,14 @@
                         action.onClick();
                         toast.remove(toastItem.id);
                     }}
-                    class="flex-shrink-0 rounded-md px-2 py-1 text-xs font-semibold text-on-surface underline-offset-2 transition-colors hover:bg-surface-sunken hover:underline"
+                    class="flex-shrink-0 rounded-[3px] px-2 py-1 font-mono text-xs font-semibold text-on-surface underline-offset-2 hover:bg-surface-sunken hover:underline"
                 >
                     {action.label}
                 </button>
             {/if}
             <button
                 onclick={() => toast.remove(toastItem.id)}
-                class="flex-shrink-0 rounded-lg p-1 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface"
+                class="flex-shrink-0 rounded-[3px] p-1 text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface"
                 aria-label="Close notification"
             >
                 <X class="h-4 w-4" aria-hidden="true" />

package/src/lib/components/Toggle.svelte

@@ -55,7 +55,6 @@
         class="
 			relative inline-flex shrink-0 items-center rounded-full
 			{sizeConfig.track}
-			transition-colors duration-200
 			focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
 			{checked ? 'bg-primary' : 'bg-outline-hover'}
 			{disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
@@ -65,7 +64,7 @@
             class="
 				inline-block rounded-full bg-surface-raised shadow-sm
 				{sizeConfig.thumb}
-				transform transition-transform duration-200
+				transform transition-transform duration-[120ms]
 				{checked ? sizeConfig.translate : 'translate-x-0.5'}
 			"
         ></span>
@@ -74,7 +73,7 @@
     {#if label || description}
         <div class="flex flex-col gap-0.5">
             {#if label}
-                <span class="{sizeConfig.text} font-medium text-on-surface">{label}</span>
+                <span class="{sizeConfig.text} font-mono font-medium text-on-surface">{label}</span>
             {/if}
             {#if description}
                 <span class="text-sm text-on-surface-muted">{description}</span>

package/src/lib/components/Tooltip.svelte

@@ -31,10 +31,10 @@
     };
 
     const arrowClasses: Record<TooltipPosition, string> = {
-        top: "top-full left-1/2 -translate-x-1/2 border-t-mist-800 border-x-transparent border-b-transparent",
-        bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-mist-800 border-x-transparent border-t-transparent",
-        left: "left-full top-1/2 -translate-y-1/2 border-l-mist-800 border-y-transparent border-r-transparent",
-        right: "right-full top-1/2 -translate-y-1/2 border-r-mist-800 border-y-transparent border-l-transparent",
+        top: "top-full left-1/2 -translate-x-1/2 border-t-outline border-x-transparent border-b-transparent",
+        bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-outline border-x-transparent border-t-transparent",
+        left: "left-full top-1/2 -translate-y-1/2 border-l-outline border-y-transparent border-r-transparent",
+        right: "right-full top-1/2 -translate-y-1/2 border-r-outline border-y-transparent border-l-transparent",
     };
 </script>
 
@@ -44,12 +44,11 @@
     <div
         class="
 			absolute z-50 {positionClasses[position]}
-			pointer-events-none invisible rounded-lg
-			bg-mist-800 px-2.5 py-1.5 text-xs
-			font-medium
+			pointer-events-none invisible rounded-[3px]
+			border border-outline bg-surface-overlay px-2.5 py-1.5 font-sans
+			text-xs
 			{wide ? 'w-max max-w-xs whitespace-normal' : 'whitespace-nowrap'}
-			text-white opacity-0 transition-opacity
-			duration-150 group-hover:visible
+			text-on-surface opacity-0 group-hover:visible
 			group-hover:opacity-100
 		"
         role="tooltip"

package/src/lib/components/button-styles.ts

@@ -7,45 +7,44 @@ export type ButtonSize = "xs" | "sm" | "md" | "lg";
 export const BUTTON_BASE = `
     group
     inline-flex items-center justify-center gap-2
-    font-medium cursor-pointer select-none
-    border border-transparent
-    focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/10 focus-visible:border-ring
+    font-mono font-medium tracking-normal
+    cursor-pointer select-none border
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
     disabled:opacity-50 disabled:cursor-not-allowed
-    transition-all duration-normal ease-out
-    active:scale-[0.98]
+        active:translate-y-px
 `;
 
 export const BUTTON_VARIANTS: Record<ButtonVariant, string> = {
     primary: `
-        bg-primary text-on-primary shadow-sm shadow-primary/20
-        hover:bg-primary-hover hover:shadow-md hover:shadow-primary/30
+        bg-primary text-on-primary border-transparent
+        hover:bg-primary-hover
         active:bg-primary-active
     `,
     secondary: `
-        bg-surface-raised text-on-surface-muted border-outline shadow-sm
-        hover:bg-surface-sunken hover:text-on-surface hover:border-outline-hover
+        bg-surface-raised text-on-surface border-outline
+        hover:border-outline-hover hover:text-primary
         active:bg-surface-sunken
     `,
     ghost: `
-        bg-transparent text-on-surface-muted
+        bg-transparent text-on-surface-muted border-transparent
         hover:bg-surface-sunken hover:text-on-surface
         active:bg-surface-sunken
     `,
     danger: `
-        bg-danger-surface text-on-danger shadow-sm shadow-danger-surface/20
-        hover:bg-danger-hover hover:shadow-md hover:shadow-danger-surface/30
+        bg-danger-surface text-on-danger border-transparent
+        hover:bg-danger-hover
         active:bg-danger-active
     `,
     success: `
-        bg-success-surface text-on-success shadow-sm shadow-success-surface/20
-        hover:bg-success-hover hover:shadow-md hover:shadow-success-surface/30
+        bg-success-surface text-on-success border-transparent
+        hover:bg-success-hover
         active:bg-success-surface
     `,
 };
 
 export const BUTTON_SIZES: Record<ButtonSize, string> = {
-    xs: "text-xs px-2 py-1 rounded-md",
-    sm: "text-sm px-3 py-1.5 rounded-lg",
-    md: "text-sm px-4 py-2 rounded-lg",
-    lg: "text-base px-6 py-3 rounded-xl",
+    xs: "text-xs px-2.5 py-1 rounded-[3px]",
+    sm: "text-sm px-3 py-1.5 rounded-[3px]",
+    md: "text-sm px-4 py-2 rounded-[3px]",
+    lg: "text-base px-6 py-2.5 rounded-[3px]",
 };

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

@@ -15,12 +15,13 @@
         RotateCw,
         RefreshCcw,
         ChevronDown,
-        History,
+        RotateCcwClock,
         PanelLeftClose,
         SlidersHorizontal,
         Maximize2,
         Minimize2,
         TextWrap,
+        SearchX,
     } from "@lucide/svelte";
     import Button from "../Button.svelte";
     import EmptyState from "../EmptyState.svelte";
@@ -67,6 +68,7 @@
         historyVisible = false,
         highlightLine = null,
         getInstanceCount = () => 1,
+        notFound = false,
     }: {
         run: Run | undefined;
         fetchLogs: (
@@ -112,6 +114,10 @@
         // 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;
+        // True when a deep-linked run id resolved to no run (deleted by retention,
+        // or never existed). The empty state then says so plainly instead of the
+        // generic "Select a run" — the caller must not silently substitute another.
+        notFound?: boolean;
     } = $props();
 
     let canDelete = $derived.by(() => {
@@ -356,7 +362,7 @@
                 <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"
+                        class="flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[4px] {config.bg} {config.color} ring-1 ring-current/25 ring-inset"
                     >
                         <DetailIcon size={20} class={isRunning ? "animate-spin" : ""} />
                     </div>
@@ -382,7 +388,7 @@
                              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}"
+                                    class="rounded-[3px] border px-2.5 py-0.5 font-mono text-2xs font-bold tracking-wider uppercase {config.color} {config.bg} {config.border}"
                                 >
                                     {status.toUpperCase()}
                                 </span>
@@ -396,7 +402,7 @@
                                 <!-- 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)}>
+                                <span class="font-mono" title={formatFullDateTime(startedAt)}>
                                     Run · {formatCalendarDate(startedAt)}
                                     {formatTimeHM(startedAt)}
                                 </span>
@@ -406,7 +412,7 @@
                                 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"
+                                class="inline-flex items-center gap-1.5 rounded-[3px] border border-outline-faint bg-surface-sunken px-1.5 py-0.5 font-mono text-2xs text-on-surface-faint hover:border-outline-hover hover:text-primary"
                             >
                                 {#if copiedId}
                                     <Check size={11} class="text-success-surface" />Copied
@@ -417,7 +423,7 @@
                             {#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">
+                                <span class="inline-flex items-center gap-1.5 font-mono">
                                     <RotateCw size={14} />
                                     Retry #{run.retry_attempt}{#if run.retry_of_run_id}
                                         <span class="text-on-surface-faint"
@@ -431,7 +437,7 @@
                                 <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"
+                                            class="inline-flex cursor-pointer items-center gap-1.5 rounded-[3px] border border-outline-faint bg-surface-sunken px-2.5 py-0.5 font-mono text-xs font-medium text-on-surface-muted hover:border-outline-hover hover:text-primary"
                                             title="View run parameters"
                                         >
                                             <SlidersHorizontal size={12} />
@@ -441,7 +447,7 @@
                                     {/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
@@ -471,7 +477,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"
@@ -480,7 +486,7 @@
                                 {#if historyVisible}
                                     <PanelLeftClose size={15} />
                                 {:else}
-                                    <History size={15} />
+                                    <RotateCcwClock size={15} />
                                 {/if}
                             </button>
                         {/if}
@@ -499,7 +505,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" />
@@ -517,7 +523,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>
@@ -528,13 +534,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>
@@ -543,7 +549,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"
                                                 >
@@ -564,7 +570,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"
@@ -580,7 +586,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>
@@ -592,7 +598,7 @@
                                 run.task_name,
                             )}/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"
+                            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"
                         >
@@ -602,7 +608,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"
                                     >
@@ -610,7 +616,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">
@@ -645,13 +651,13 @@
                 <!-- 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"
+                    class="mt-4 flex flex-wrap overflow-hidden rounded-[4px] 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"
+                            class="font-mono text-2xs font-bold tracking-[0.12em] text-on-surface-faint uppercase"
                             >Queued</span
                         >
                         <span
@@ -660,7 +666,7 @@
                         >
                             {formatClockTime(run.created_at)}
                         </span>
-                        <span class="text-2xs text-on-surface-muted"
+                        <span class="font-mono text-2xs text-on-surface-muted"
                             >+{startDelay ?? "0s"} queued</span
                         >
                     </div>
@@ -669,7 +675,7 @@
                         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"
+                            class="font-mono text-2xs font-bold tracking-[0.12em] text-on-surface-faint uppercase"
                             >Started</span
                         >
                         <span
@@ -677,7 +683,7 @@
                         >
                             {run.start_at ? formatClockTime(run.start_at) : "—"}
                         </span>
-                        <span class="text-2xs text-on-surface-muted">
+                        <span class="font-mono text-2xs text-on-surface-muted">
                             {run.start_at ? formatCalendarDate(run.start_at) : "not started"}
                         </span>
                     </div>
@@ -686,7 +692,7 @@
                         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"
+                            class="font-mono text-2xs font-bold tracking-[0.12em] text-on-surface-faint uppercase"
                             >Ran for</span
                         >
                         <span
@@ -694,7 +700,7 @@
                         >
                             {duration ?? "—"}
                         </span>
-                        <span class="text-2xs text-on-surface-muted">
+                        <span class="font-mono text-2xs text-on-surface-muted">
                             {isRunning ? "and counting" : run.end_at ? "wall clock" : "—"}
                         </span>
                     </div>
@@ -703,7 +709,7 @@
                         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"
+                            class="font-mono text-2xs font-bold tracking-[0.12em] text-on-surface-faint uppercase"
                             >Exit</span
                         >
                         <span
@@ -716,26 +722,28 @@
                             <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"
+                                    class="rounded-[3px] bg-danger-soft px-1 py-px font-mono 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>
+                        <span class="font-mono 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"
+                            class="font-mono text-2xs font-bold tracking-[0.12em] 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"
+                        <span class="font-mono text-2xs text-on-surface-muted"
                             >{triggerSub(run.triggered_by)}</span
                         >
                     </div>
@@ -755,25 +763,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]">
+                            <span class="truncate font-medium text-[var(--rw-con-text)]">
                                 {run.task_name}{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>
@@ -786,8 +796,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}
@@ -799,14 +809,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}
@@ -837,17 +847,19 @@
         class="flex min-w-0 flex-1 flex-col items-center justify-center gap-4 bg-surface-sunken/30"
     >
         <EmptyState
-            title={onRunTask ? "No runs yet" : "Select a run"}
-            description={onRunTask
-                ? "This task hasn't run yet. Trigger it to see its output here."
-                : "Pick a run from the list to view details and logs."}
-            icon={MousePointerClick}
+            title={notFound ? "Run not found" : onRunTask ? "No runs yet" : "Select a run"}
+            description={notFound
+                ? "This run doesn't exist — it may have been deleted by retention, or the link is wrong. Pick a run from the list to continue."
+                : onRunTask
+                  ? "This task hasn't run yet. Trigger it to see its output here."
+                  : "Pick a run from the list to view details and logs."}
+            icon={notFound ? SearchX : MousePointerClick}
         />
-        {#if onRunTask}
+        {#if onRunTask && !notFound}
             <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
@@ -866,7 +878,7 @@
 
     /* 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 {