@runwisp/ui 1.3.0 → 1.5.0

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

@@ -8,15 +8,16 @@
         Check,
         Terminal as TerminalIcon,
         Download,
-        Trash2,
+        Trash,
         Play,
         Square,
         MousePointerClick,
         RotateCw,
         RefreshCcw,
         ChevronDown,
-        RotateCcwClock,
+        ArrowLeft,
         PanelLeftClose,
+        PanelLeftOpen,
         SlidersHorizontal,
         Maximize2,
         Minimize2,
@@ -25,24 +26,27 @@
     } 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,
         instanceSuffix,
     } from "./run-helpers.js";
 
@@ -61,12 +65,15 @@
         onRestartService,
         serviceStopped = false,
         serviceBusy = false,
-        onToggleHistory,
-        historyVisible = false,
+        onBack,
+        onToggleList,
+        listVisible = true,
         highlightLine = null,
         getInstanceCount = () => 1,
+        getLiveUsage = () => undefined,
         motion,
         notFound = false,
+        loading = false,
     }: {
         run: Run | undefined;
         fetchLogs: (
@@ -99,19 +106,25 @@
         // 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
@@ -121,6 +134,9 @@
         // 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;
+        // 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".
+        loading?: boolean;
     } = $props();
 
     function easeInFresh(node: HTMLElement, runId: string) {
@@ -144,7 +160,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";
     });
 
@@ -170,6 +186,10 @@
     // changes, not on every run object reference swap from SSE array updates.
     let runId = $derived(run?.id);
 
+    // The run whose seed fetch has settled. Until it matches the shown run the
+    // console says it's loading, not "No output yet".
+    let seededRunId = $state<string | null>(null);
+
     // Fetches the batched tail page a run's console opens on (see the effect
     // below) and paints it into the console. Resolves the line the live
     // stream should resume from, or null when there's nothing left to stream
@@ -201,7 +221,10 @@
         if (!id) return;
 
         const stream = streamLogs;
-        if (!stream) return;
+        if (!stream) {
+            seededRunId = id;
+            return;
+        }
 
         logFetchError = null;
 
@@ -217,7 +240,9 @@
                 // (its disk backfill from that anchor closes the fetch↔stream
                 // race, and the daemon dedupes anything already shown).
                 const seeded = await seedConsoleTail(id, () => cancelled);
-                if (cancelled || !seeded) return;
+                if (cancelled) return;
+                seededRunId = id;
+                if (!seeded) return;
                 cleanup = stream(
                     id,
                     (event: LogEvent) => {
@@ -253,19 +278,7 @@
     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
@@ -349,8 +362,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,
@@ -359,6 +372,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", "")}
@@ -403,8 +418,36 @@
             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. -->
@@ -531,16 +574,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}
@@ -549,27 +611,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
@@ -591,7 +635,7 @@
                                     {:else}
                                         <RefreshCcw size={15} />
                                     {/if}
-                                    <span class="@max-md:hidden"
+                                    <span class="@max-xs:hidden"
                                         >{serviceStopped ? "Start" : "Restart"}</span
                                     >
                                 </button>
@@ -605,7 +649,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}
@@ -622,7 +666,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">
@@ -668,7 +712,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"
                                 >
                                     <Square size={15} fill="currentColor" stroke="none" />
-                                    <span class="@max-md:hidden">Stop</span>
+                                    <span class="@max-xs:hidden">Stop</span>
                                 </button>
                             {/if}
                         {/if}
@@ -691,7 +735,7 @@
                                         title="Delete this run"
                                         aria-label="Delete run"
                                     >
-                                        <Trash2 size={15} />
+                                        <Trash size={15} />
                                     </span>
                                 {/snippet}
                                 <div class="w-60">
@@ -745,7 +789,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}
@@ -760,12 +804,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}
@@ -782,7 +826,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"
@@ -793,10 +837,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
@@ -817,10 +858,43 @@
                     {endLabel}
                     {endTone}
                     error={logFetchError}
+                    loading={seededRunId !== run.id}
                 />
             {/key}
         </div>
     </div>
+{:else if loading && !notFound}
+    <!-- Loading: the panel's own frame (verdict header over the console) with
+         placeholders where the run's facts go, so nothing jumps when it lands. -->
+    <div
+        class="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+        role="status"
+        aria-label="Loading run"
+    >
+        <div class="shrink-0 border-b border-outline-faint bg-surface-raised">
+            <div class="pt-[18px] pr-[22px] pb-[16px] pl-[26px]">
+                <div class="flex h-[33px] items-center gap-2.5">
+                    <span class="size-[18px] animate-pulse rounded-full bg-outline-hover"></span>
+                    <span class="h-[18px] w-40 animate-pulse rounded-[3px] bg-outline-hover"></span>
+                </div>
+                <div class="mt-2.5 flex h-[17px] items-center">
+                    <span class="h-3 w-64 max-w-full animate-pulse rounded-[3px] bg-outline-hover"
+                    ></span>
+                </div>
+            </div>
+        </div>
+        <div
+            class="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 gap-2 border-b border-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)] px-3.5 py-[9px] font-mono text-[11.5px] font-semibold text-[var(--rw-con-text)]"
+            >
+                <TerminalIcon size={14} class="opacity-70" />
+                Console output
+            </div>
+            <LogConsole fetchLogs={() => undefined} loading class="min-h-0 flex-1" />
+        </div>
+    </div>
 {:else}
     <div
         class="flex min-w-0 flex-1 flex-col items-center justify-center gap-4 bg-surface-sunken/30"

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

@@ -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
@@ -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}