@runwisp/ui 1.4.0 → 1.5.1

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

@@ -15,8 +15,9 @@
         RotateCw,
         RefreshCcw,
         ChevronDown,
-        RotateCcwClock,
+        ArrowLeft,
         PanelLeftClose,
+        PanelLeftOpen,
         SlidersHorizontal,
         Maximize2,
         Minimize2,
@@ -25,24 +26,28 @@
     } from "@lucide/svelte";
     import Button from "../Button.svelte";
     import EmptyState from "../EmptyState.svelte";
+    import Kbd from "../Kbd.svelte";
     import LogConsole from "../LogConsole.svelte";
     import Popover from "../Popover.svelte";
     import Tooltip from "../Tooltip.svelte";
     import { portal } from "../../actions/portal.js";
     import { prefersReducedMotion } from "../../actions/row-motion.js";
     import type { RunMotion } from "../../utils/run-motion.js";
-    import type { Run } from "./types.js";
     import { isLogEvent, type LogEvent, type LogSlice } from "../../log-console/types.js";
-    import { formatClockTime, formatCalendarDate } from "../../utils/format.js";
+    import { formatBytes, 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 { CopyFeedback } from "../../utils/clipboard.svelte.js";
+    import { displayStatus, type ResourceUsage, type Run } from "@runwisp/common";
+    import { RUN_STATUS_CONFIG } from "./status-config.js";
     import {
         runDuration,
         runStartDelay,
         runVerdict,
         formatTriggeredByLabel,
         runRetryLabel,
+        runUsageLabel,
+        runLogDownloadUrl,
         instanceSuffix,
     } from "./run-helpers.js";
 
@@ -61,10 +66,12 @@
         onRestartService,
         serviceStopped = false,
         serviceBusy = false,
-        onToggleHistory,
-        historyVisible = false,
+        onBack,
+        onToggleList,
+        listVisible = true,
         highlightLine = null,
         getInstanceCount = () => 1,
+        getLiveUsage = () => undefined,
         motion,
         notFound = false,
         loading = false,
@@ -96,23 +103,29 @@
         // Stop the selected run while it is live. When provided and the run is
         // running, the action cluster shows Stop alongside Run.
         onStop?: ((runId: string) => void) | undefined;
-        // Trigger the task from the empty state (no run selected yet) — the
+        // Trigger the task from the empty state (no run selected yet), the
         // cold-start path so a never-run task is still launchable from here.
         onRunTask?: (() => void) | undefined;
         // Service lifecycle controls. When either is set the cluster swaps the
-        // Run control for Stop Service / Restart Service (chosen by serviceStopped).
+        // Run control for Stop / Restart (chosen by serviceStopped).
         onStopService?: (() => void) | undefined;
         onRestartService?: (() => void) | undefined;
         serviceStopped?: boolean;
         serviceBusy?: boolean;
-        // Toggle the (single-instance service) history rail from the panel header,
-        // since these tasks hide the rail by default and there is no top bar.
-        onToggleHistory?: (() => void) | undefined;
-        historyVisible?: boolean;
+        // Return to the run list when the panel replaces it (a phone), shown as
+        // a back arrow in the header's top-left corner.
+        onBack?: (() => void) | undefined;
+        // Fold the run list away (or back) when it sits beside the panel on a
+        // screen too narrow to keep both comfortably, in the same corner.
+        onToggleList?: (() => void) | undefined;
+        listVisible?: boolean;
         highlightLine?: number | null;
         // 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;
+        // Live CPU and memory of a running run, by run ID; undefined when it
+        // isn't measured. Shown in the header while the run is running.
+        getLiveUsage?: (runId: string) => ResourceUsage | undefined;
         // Which runs arrived or were removed live moments ago. The panel eases in
         // when a new run takes it (triggered, or a scheduled run auto-selected)
         // or when its run was deleted and another takes its place; picking a
@@ -120,7 +133,7 @@
         motion?: RunMotion;
         // 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.
+        // generic "Select a run", the caller must not silently substitute another.
         notFound?: boolean;
         // True while there is no run to show *yet* (the run list or a deep-linked
         // run is still loading), so the empty state doesn't claim "No runs yet".
@@ -148,7 +161,7 @@
 
     let canDelete = $derived.by(() => {
         if (!run || !onDelete) return false;
-        const status = runDisplayStatus(run);
+        const status = displayStatus(run.status, run.endReason);
         return status !== "running" && status !== "pending";
     });
 
@@ -182,8 +195,8 @@
     // below) and paints it into the console. Resolves the line the live
     // stream should resume from, or null when there's nothing left to stream
     // (the run already ended, or the caller cancelled while we were waiting).
-    // A failed fetch still falls back to an SSE tail backfill from scratch —
-    // it does not stop the console from live-tailing — but records the
+    // A failed fetch still falls back to an SSE tail backfill from scratch,
+    // it does not stop the console from live-tailing, but records the
     // failure so LogConsole can show it instead of looking like a quiet run.
     async function seedConsoleTail(
         id: string,
@@ -248,7 +261,7 @@
     });
 
     // Maximize the console to a full-bleed overlay. The console wrapper is
-    // never remounted — `maximizePortal` relocates the *live* node to <body>
+    // never remounted, `maximizePortal` relocates the *live* node to <body>
     // (escaping any transformed/blurred ancestor that would otherwise trap a
     // position:fixed child) and moves it back on restore, so the SSE stream,
     // scroll position, and the {#key run.id} mount all survive the toggle.
@@ -266,23 +279,11 @@
     let confirmDeleteOpen = $state(false);
     // Dropdown half of the Run split button (the "reuse parameters" variant).
     let runMenuOpen = $state(false);
-    let copiedId = $state(false);
-    let copyTimer: ReturnType<typeof setTimeout> | null = null;
-
-    async function copyRunId(id: string) {
-        try {
-            await navigator.clipboard.writeText(id);
-            copiedId = true;
-            if (copyTimer) clearTimeout(copyTimer);
-            copyTimer = setTimeout(() => (copiedId = false), 1200);
-        } catch {
-            // Clipboard blocked (insecure context / denied) — leave the chip as-is.
-        }
-    }
+    const runIdCopy = new CopyFeedback(1200);
 
     // 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
+    // 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 {
@@ -306,7 +307,7 @@
             consoleMaximized = false;
             return;
         }
-        // `F` toggles focus mode, the way a media player does — but never while
+        // `F` toggles focus mode, the way a media player does, but never while
         // the operator is typing into a field (search box, etc.).
         if (
             (event.key === "f" || event.key === "F") &&
@@ -362,8 +363,8 @@
 <svelte:window onkeydown={handleConsoleKeydown} />
 
 {#if run}
-    {@const status = runDisplayStatus(run)}
-    {@const config = getRunStatusConfig(status)}
+    {@const status = displayStatus(run.status, run.endReason)}
+    {@const config = RUN_STATUS_CONFIG[status]}
     {@const DetailIcon = config.icon}
     {@const duration = runDuration(
         run,
@@ -372,6 +373,8 @@
     {@const startDelay = runStartDelay(run)}
     {@const startedAt = run.startedAt ?? run.createdAt}
     {@const retry = runRetryLabel(run)}
+    {@const usage = runUsageLabel(run)}
+    {@const live = run.status === "running" ? getLiveUsage(run.id) : undefined}
     {@const paramEntries = run.params ? Object.entries(run.params) : []}
     {@const suffix = instanceSuffix(run.instanceIndex, getInstanceCount(run.taskName))}
     {@const spine = config.dot.replace(" animate-pulse", "")}
@@ -409,15 +412,43 @@
         <!-- 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
+             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: {alarm ?? 'var(--color-surface-raised)'}"
         >
             <div class="pt-[18px] pr-[22px] pb-[16px] pl-[26px]">
-                <div class="flex items-start gap-4">
-                    <div class="min-w-0 flex-1">
+                <!-- The actions wrap onto their own row rather than squeeze the
+                     readout below a legible width on a narrow panel. -->
+                <div class="flex flex-wrap items-start gap-x-3 gap-y-3">
+                    {#if onBack}
+                        <button
+                            type="button"
+                            onclick={() => onBack()}
+                            class="-mt-1 -ml-2 shrink-0 rounded-[3px] p-1.5 text-on-surface-muted hover:bg-surface-sunken hover:text-primary"
+                            title="Back to runs"
+                            aria-label="Back to runs"
+                        >
+                            <ArrowLeft size={20} />
+                        </button>
+                    {:else if onToggleList}
+                        <button
+                            type="button"
+                            onclick={() => onToggleList()}
+                            class="-mt-1 -ml-2 shrink-0 rounded-[3px] p-1.5 text-on-surface-muted hover:bg-surface-sunken hover:text-primary"
+                            title={listVisible ? "Hide run list" : "Show run list"}
+                            aria-label={listVisible ? "Hide run list" : "Show run list"}
+                            aria-expanded={listVisible}
+                        >
+                            {#if listVisible}
+                                <PanelLeftClose size={20} />
+                            {:else}
+                                <PanelLeftOpen size={20} />
+                            {/if}
+                        </button>
+                    {/if}
+                    <div class="min-w-60 flex-1">
                         <!-- 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. -->
@@ -431,9 +462,9 @@
 
                         <!-- 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 —
+                         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,
+                         (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>
@@ -544,16 +575,35 @@
                                     </div>
                                 </Popover>
                             {/if}
+                            {#if live}
+                                <span class="text-outline-hover" aria-hidden="true">·</span>
+                                <span
+                                    data-testid="run-live-usage"
+                                    class="text-on-surface-muted"
+                                    title="Live CPU (100% = one core) and memory of the run's processes"
+                                    >CPU {Math.round(live.cpuPercent)}% · {formatBytes(
+                                        live.memoryBytes,
+                                    )}</span
+                                >
+                            {/if}
+                            {#if usage}
+                                <span class="text-outline-hover" aria-hidden="true">·</span>
+                                <span
+                                    data-testid="run-usage"
+                                    title="Peak memory and CPU time of the run's processes"
+                                    >{usage}</span
+                                >
+                            {/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)}
+                                onclick={() => void runIdCopy.copy(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}
+                                {#if runIdCopy.copied}
                                     <Check size={11} class="text-success-surface" />Copied
                                 {:else}
                                     <Hash size={11} />{run.id}
@@ -562,27 +612,9 @@
                         </div>
                     </div>
 
-                    <!-- Actions: history toggle · run (split) / service lifecycle ·
+                    <!-- Actions: run (split) / service lifecycle ·
                      stop · download · delete (delete behind an inline confirm) -->
-                    <div class="flex shrink-0 items-center gap-2">
-                        {#if onToggleHistory}
-                            <button
-                                type="button"
-                                onclick={() => onToggleHistory()}
-                                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"
-                                    : "Show run history"}
-                            >
-                                {#if historyVisible}
-                                    <PanelLeftClose size={15} />
-                                {:else}
-                                    <RotateCcwClock size={15} />
-                                {/if}
-                            </button>
-                        {/if}
-
+                    <div class="flex flex-wrap items-center gap-2">
                         {#if onStopService || onRestartService}
                             <!-- Service lifecycle replaces the run control.
                              Restart is always available (it cancels + respawns
@@ -604,7 +636,7 @@
                                     {:else}
                                         <RefreshCcw size={15} />
                                     {/if}
-                                    <span class="@max-md:hidden"
+                                    <span class="@max-xs:hidden"
                                         >{serviceStopped ? "Start" : "Restart"}</span
                                     >
                                 </button>
@@ -618,7 +650,7 @@
                                     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>
+                                    <span class="@max-xs:hidden">Stop</span>
                                 </button>
                             {/if}
                         {:else}
@@ -635,7 +667,7 @@
                                         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>
+                                        <span class="@max-xs:hidden">Run</span>
                                     </button>
                                     {#if onRunAgain}
                                         <Popover bind:open={runMenuOpen} placement="bottom-end">
@@ -681,14 +713,12 @@
                                     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>
+                                    <span class="@max-xs:hidden">Stop</span>
                                 </button>
                             {/if}
                         {/if}
                         <a
-                            href="/api/tasks/{encodeURIComponent(
-                                run.taskName,
-                            )}/runs/{encodeURIComponent(run.id)}/log/raw"
+                            href={runLogDownloadUrl(run.id)}
                             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)"
@@ -742,7 +772,7 @@
             </div>
         </div>
 
-        <!-- Console hero — maximizes to a full-bleed overlay via portal -->
+        <!-- Console hero, maximizes to a full-bleed overlay via portal -->
         {#if consoleMaximized}
             <div
                 use:portal
@@ -758,7 +788,7 @@
                 : "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-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)] px-3.5 py-[9px] font-mono text-[11.5px] text-[var(--rw-con-dim)]"
+                class="@container 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}
@@ -773,12 +803,12 @@
                         </span>
                     {:else}
                         <span
-                            class="flex items-center gap-2 font-semibold text-[var(--rw-con-text)]"
+                            class="flex items-center gap-2 font-semibold whitespace-nowrap text-[var(--rw-con-text)]"
                         >
                             <TerminalIcon size={14} class="opacity-70" />
                             Console output
                         </span>
-                        <span class="hidden text-[var(--rw-con-gutter)] sm:inline"
+                        <span class="hidden text-[var(--rw-con-gutter)] @lg:inline"
                             >stdout + stderr</span
                         >
                     {/if}
@@ -795,7 +825,7 @@
                         aria-label="Toggle line wrapping"
                     >
                         <TextWrap size={13} />
-                        <span class="hidden sm:inline">Wrap</span>
+                        <span class="hidden @sm:inline">Wrap</span>
                     </button>
                     <button
                         type="button"
@@ -806,10 +836,7 @@
                     >
                         {#if consoleMaximized}
                             <Minimize2 size={13} />
-                            <span
-                                class="rounded-[3px] border border-[var(--rw-con-gutter)] px-1.5 text-[10px] tracking-wide"
-                                >Esc</span
-                            >
+                            <Kbd keys="Esc" size="xs" tone="console" />
                         {:else}
                             <Maximize2 size={13} />
                             Expand
@@ -874,7 +901,7 @@
         <EmptyState
             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."
+                ? "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."}
@@ -895,7 +922,7 @@
 
 <style>
     /* Only a run worth triaging is washed in its outcome colour (--rw-oc, set
-       inline). Everything else — success included — passes the surface itself so
+       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 {

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

@@ -9,12 +9,12 @@
   renders removable chips for each.
 
   Status is a five-bucket pick (Running / Succeeded / Failed / Skipped /
-  Stopped) with an "Advanced" expander for the individual statuses — buckets are
+  Stopped) with an "Advanced" expander for the individual statuses, buckets are
   pure UI groupings over the same `statuses` array. Time is an independent
   From/To date pair; exit code is a free-form expression (137, >100, >100 <150)
   normalized to an inclusive range at the wire.
 
-  All controls are NATIVE (<select>, <input>, checkbox, button) — a portalled
+  All controls are NATIVE (<select>, <input>, checkbox, button), a portalled
   Select component must not nest inside the portalled Popover, since clicking an
   option lands outside the popover's DOM subtree and triggers its outside-click
   close. Every mutation reassigns the whole `filters` object (never an in-place
@@ -40,7 +40,6 @@
         dayStartIso,
         dayEndIso,
         isExitCodeExprValid,
-        exitCodePropChanged,
         type RunsListFilters,
     } from "./run-filters.js";
 
@@ -48,13 +47,10 @@
         filters = $bindable(),
         showTask = false,
         tasks = [],
-        compact = false,
     }: {
         filters: RunsListFilters;
         showTask?: boolean;
         tasks?: { name: string }[];
-        // Icon-only trigger for narrow rails where a "Filter" label wouldn't fit.
-        compact?: boolean;
     } = $props();
 
     // The individual statuses behind the "Advanced" expander, grouped the way
@@ -79,7 +75,7 @@
     }
 
     // Reflect a tri-state bucket onto the native checkbox (no `indeterminate`
-    // HTML attribute exists — it must be set on the DOM node).
+    // HTML attribute exists, it must be set on the DOM node).
     function indeterminate(node: HTMLInputElement, value: boolean) {
         node.indeterminate = value;
         return {
@@ -99,7 +95,7 @@
     // --- Time -------------------------------------------------------------
     //
     // Independent From/To date bounds. A bare date is that day's 00:00 (From) or
-    // its end (To), so either edge applies on its own — From alone means
+    // its end (To), so either edge applies on its own, From alone means
     // "everything since", To alone "everything before", and the same date in
     // both captures the whole day.
 
@@ -121,18 +117,14 @@
         filters = { ...filters, triggeredBy: value || undefined };
     }
 
-    // Exit code: a free-form expression (`137`, `>100`, `>100 <150`) normalized
-    // to an inclusive range at the wire. Edited in a local buffer for smooth
-    // typing and committed on change. `RunFilterPopover` itself is long-lived
-    // (its trigger button stays mounted while the popover is closed), so the
-    // buffer does NOT re-seed on its own — it must explicitly resync whenever
-    // `filters.exitCode` changes from outside (a chip removal, "clear
-    // filters"), without clobbering in-progress typing when some unrelated
-    // filter dimension changes instead.
+    // Exit-code text is edited in a local buffer and committed on change. The
+    // component outlives the popover, so the buffer resyncs only when the
+    // committed `exitCode` itself moves (chip removed, filters cleared); an
+    // update to another dimension must not clobber in-progress typing.
     let exitCodeInput = $state(filters.exitCode ?? "");
     let lastExitCode = filters.exitCode;
     $effect(() => {
-        if (exitCodePropChanged(lastExitCode, filters.exitCode)) {
+        if (lastExitCode !== filters.exitCode) {
             exitCodeInput = filters.exitCode ?? "";
         }
         lastExitCode = filters.exitCode;
@@ -152,8 +144,8 @@
 <Popover placement="right-start" mobileSheet>
     {#snippet trigger()}
         <span
-            class="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[3px] border font-mono text-xs font-medium {compact &&
-            count === 0
+            class="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[3px] border font-mono text-xs font-medium {count ===
+            0
                 ? 'w-7 justify-center px-0'
                 : 'px-2'} {count > 0
                 ? 'border-primary-soft-border bg-primary-soft text-primary-soft-text'
@@ -161,7 +153,6 @@
             title="Filter runs"
         >
             <Funnel size={13} />
-            {#if !compact}Filter{/if}
             {#if count > 0}
                 <Badge variant="primary" size="sm" class="px-1.5 py-0">{count}</Badge>
             {/if}
@@ -195,7 +186,7 @@
                     class="flex cursor-pointer items-center gap-1 font-mono text-2xs font-medium text-on-surface-muted select-none marker:content-none hover:text-on-surface [&::-webkit-details-marker]:hidden"
                 >
                     <ChevronRight size={12} class={advancedOpen ? "rotate-90" : ""} />
-                    Advanced — pick exact statuses
+                    Advanced: pick exact statuses
                 </summary>
                 <div class="mt-2 flex flex-col gap-1.5">
                     {#each STATUS_GROUPS as group (group.label)}