@runwisp/ui 1.7.1 → 1.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
-    "@runwisp/eslint-config": "1.7.1",
-    "@runwisp/typescript-config": "1.7.1",
+    "@runwisp/eslint-config": "1.8.0",
+    "@runwisp/typescript-config": "1.8.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -92,7 +92,7 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.52.0",
-    "@runwisp/common": "1.7.1",
+    "@runwisp/common": "1.8.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/lib/actions/focusTrap.ts

@@ -53,6 +53,11 @@ export interface TrapFocusOptions {
      * that focuses its own search input).
      */
     autoFocus?: boolean;
+    /**
+     * When true, focusing elements inside the trap (and restoring focus upon
+     * teardown) will not cause the browser to scroll the viewport. Defaults to `false`.
+     */
+    preventScroll?: boolean;
 }
 
 /**
@@ -64,10 +69,10 @@ export interface TrapFocusOptions {
  * alone.
  */
 export function trapFocus(node: HTMLElement, options: TrapFocusOptions = {}) {
-    const autoFocus = options.autoFocus ?? true;
+    let currentOptions = options;
     const previouslyFocused = isHTMLElement(document.activeElement) ? document.activeElement : null;
 
-    if (autoFocus) {
+    if (currentOptions.autoFocus ?? true) {
         // Deferred a tick: `node` may still be moved by a sibling `use:portal`
         // action (appendChild-ing it to <body>) after this action runs, and
         // relocating a focused element resets focus to <body>. Waiting a
@@ -78,7 +83,7 @@ export function trapFocus(node: HTMLElement, options: TrapFocusOptions = {}) {
             if (target === node && !node.hasAttribute("tabindex")) {
                 node.tabIndex = -1;
             }
-            target.focus();
+            target.focus({ preventScroll: currentOptions.preventScroll ?? false });
         });
     }
 
@@ -87,13 +92,16 @@ export function trapFocus(node: HTMLElement, options: TrapFocusOptions = {}) {
         const target = resolveTrapFocusTarget(e, getFocusableElements(node), active);
         if (target) {
             e.preventDefault();
-            target.focus();
+            target.focus({ preventScroll: currentOptions.preventScroll ?? false });
         }
     }
 
     node.addEventListener("keydown", handleKeydown);
 
     return {
+        update(newOptions: TrapFocusOptions = {}) {
+            currentOptions = newOptions;
+        },
         destroy() {
             node.removeEventListener("keydown", handleKeydown);
             // By the time an action's destroy() runs, `node` (and whatever
@@ -108,7 +116,7 @@ export function trapFocus(node: HTMLElement, options: TrapFocusOptions = {}) {
             const active = document.activeElement;
             const focusWasReset = !isHTMLElement(active) || active === document.body;
             if (focusWasReset && previouslyFocused && document.contains(previouslyFocused)) {
-                previouslyFocused.focus();
+                previouslyFocused.focus({ preventScroll: currentOptions.preventScroll ?? false });
             }
         },
     };

package/src/lib/components/DataGrid.svelte

@@ -229,7 +229,10 @@
                         : ""}
                 >
                     {#if selectable}
-                        <TableCell header {density} class="w-12">
+                        <!-- w-px: in an auto-layout table a width is only a minimum, so a
+                             fixed width still soaks up spare space. 1px shrinks the
+                             column to the checkbox; the next cell's padding is the gap. -->
+                        <TableCell header {density} class="w-px pr-0">
                             <Checkbox
                                 checked={allSelected}
                                 indeterminate={someSelected}
@@ -285,7 +288,9 @@
                 </TableHead>
             {/if}
             <TableBody>
-                {#if pagedData.length === 0 && !loading}
+                {#if pagedData.length === 0}
+                    <!-- Kept while loading (blank) so the loading overlay has a body to
+                         cover instead of squeezing into the header row. -->
                     <TableRow border="none">
                         <TableCell
                             colspan={columns.length + (selectable ? 1 : 0) + (rowAction ? 1 : 0)}
@@ -293,7 +298,9 @@
                             align="center"
                             class="px-4 py-12 text-on-surface-muted"
                         >
-                            {#if emptyState}
+                            {#if loading}
+                                &nbsp;
+                            {:else if emptyState}
                                 {@render emptyState()}
                             {:else}
                                 {emptyMessage}
@@ -319,7 +326,7 @@
                                      fire onRowClick (which usually navigates away). -->
                                 <TableCell
                                     {density}
-                                    class="cursor-pointer {hoverable ? railHover : ''}"
+                                    class="cursor-pointer pr-0 {hoverable ? railHover : ''}"
                                     onclick={(e) => {
                                         e.stopPropagation();
                                         if (!(e.target instanceof HTMLInputElement)) toggleRow(row);

package/src/lib/components/Dropdown.svelte

@@ -89,7 +89,7 @@
     {#if open}
         <div
             use:portal
-            use:trapFocus
+            use:trapFocus={{ preventScroll: true }}
             use:floating={{
                 reference: triggerEl,
                 placement: align === "right" ? "bottom-end" : "bottom-start",

package/src/lib/components/LogConsole.svelte

@@ -495,18 +495,25 @@
             {/if}
 
             {#if cache.finished && cache.totalLines > 0}
+                <!-- Pinned to the visible width, not the scroll surface: one very
+                     long line would otherwise centre the marker far off-screen. -->
                 <div
-                    class="sentinel absolute right-4 left-4 flex justify-center select-none"
+                    class="sentinel absolute right-0 left-0 select-none"
                     style="top: {lineTop(cache.totalLines)}px; height: {lineHeight * 2}px;"
                 >
-                    <span
-                        class="mt-[14px] border-t border-dashed pt-3 text-center text-[11px] tracking-wide {endTone ===
-                        'warn'
-                            ? 'sentinel--warn'
-                            : 'sentinel--muted'}"
+                    <div
+                        class="sticky left-0 flex justify-center px-4"
+                        style:width={containerWidth ? `${String(containerWidth)}px` : "100%"}
                     >
-                        ── {endLabel} ──
-                    </span>
+                        <span
+                            class="mt-[14px] border-t border-dashed pt-3 text-center text-[11px] tracking-wide {endTone ===
+                            'warn'
+                                ? 'sentinel--warn'
+                                : 'sentinel--muted'}"
+                        >
+                            ── {endLabel} ──
+                        </span>
+                    </div>
                 </div>
             {/if}
 
@@ -538,8 +545,17 @@
                     class="absolute inset-0 flex items-center justify-center text-[var(--rw-con-dim)]"
                 >
                     <div class="text-center">
-                        <div class="mb-1 text-lg">No output yet</div>
-                        <div class="text-sm text-[var(--rw-con-gutter)]">Waiting for logs...</div>
+                        {#if cache.finished}
+                            <div class="mb-1 text-lg">No output</div>
+                            <div class="text-sm text-[var(--rw-con-gutter)]">
+                                The run ended without printing anything.
+                            </div>
+                        {:else}
+                            <div class="mb-1 text-lg">No output yet</div>
+                            <div class="text-sm text-[var(--rw-con-gutter)]">
+                                Waiting for logs...
+                            </div>
+                        {/if}
                     </div>
                 </div>
             {/if}

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

@@ -12,6 +12,7 @@
     import { isTypingTarget } from "../../utils/typing-target.js";
     import { displayStatus, type Run } from "@runwisp/common";
     import { RUN_STATUS_CONFIG } from "./status-config.js";
+    import { humanizeStatus } from "./run-filters.js";
     import { runEndMarker } from "./run-helpers.js";
 
     let {
@@ -220,7 +221,7 @@
                         {run.taskName}{suffix}
                     </span>
                     <span class="text-[var(--rw-con-gutter)]">·</span>
-                    <span class="font-semibold capitalize {config.color}">{status}</span>
+                    <span class="font-semibold {config.color}">{humanizeStatus(status)}</span>
                 </span>
             {:else}
                 <span

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

@@ -4,15 +4,21 @@
 <script lang="ts">
     import { displayStatus, type Run } from "@runwisp/common";
     import { RUN_STATUS_CONFIG } from "./status-config.js";
+    import { humanizeStatus } from "./run-filters.js";
     import {
         formatTriggeredByLabel,
         runRetryLabel,
         runRowReadout,
         runUsageAmounts,
         runUsageLabel,
+        runDurationMs,
         usageLevel,
         highlightParts,
-        type RunUsageAmounts,
+        formatLines,
+        outputUnusual,
+        runOutputLabel,
+        runOutputLines,
+        type OutputScale,
         type RunUsageScale,
     } from "./run-helpers.js";
     import type { RunOutputMatch } from "./types.js";
@@ -35,6 +41,8 @@
         bulkActions,
         selectionActive,
         usage,
+        output,
+        durationUsual,
         onselect,
     }: {
         run: Run;
@@ -52,6 +60,10 @@
          * no run has usage yet (rows keep the bars' room), undefined for none.
          */
         usage: RunUsageScale | null | undefined;
+        /** The task's output scale for the rail's third bar, undefined for none. */
+        output: OutputScale | undefined;
+        /** The task's usual run duration in ms, undefined for none. */
+        durationUsual: number | undefined;
         onselect: (runId: string) => void;
     } = $props();
 
@@ -61,6 +73,49 @@
     const startedAt = $derived(run.startedAt ?? run.createdAt);
     const retry = $derived(runRetryLabel(run));
     const amounts = $derived(usage ? runUsageAmounts(run) : undefined);
+    const lines = $derived(output ? runOutputLines(run) : undefined);
+    const barsTitle = $derived(
+        [
+            [runUsageLabel(run), runOutputLabel(run)].filter(Boolean).join(" · "),
+            [
+                usage &&
+                    `CPU ${formatDuration(usage.usual.cpu)} · RAM ${formatBytes(usage.usual.ram)}`,
+                output?.band &&
+                    `${formatLines(output.band.p10)} to ${formatLines(output.band.p90)}`,
+            ]
+                .filter(Boolean)
+                .join(" · "),
+        ]
+            .filter(Boolean)
+            .join(". Usual for this task: "),
+    );
+    // The readout shows the duration only for runs that didn't fail; a failed
+    // one shows its exit code, which stays plain.
+    const durationMs = $derived(
+        durationUsual === undefined || dstatus === "failed" || dstatus === "crashed"
+            ? undefined
+            : runDurationMs(run),
+    );
+    const durationLevel = $derived(
+        durationMs === undefined || durationUsual === undefined
+            ? 0
+            : usageLevel(durationMs, durationUsual, "duration"),
+    );
+    const readoutTitle = $derived(
+        [
+            retry,
+            durationLevel > 0 &&
+                durationUsual !== undefined &&
+                `Usual for this task: ${formatDuration(durationUsual)}`,
+        ]
+            .filter(Boolean)
+            .join(". ") || undefined,
+    );
+    const READOUT_COLOR = [
+        "text-on-surface-faint",
+        "text-warning-soft-text",
+        "text-danger-soft-text",
+    ];
     const tight = $derived(usage === undefined ? "" : "@max-[19rem]:hidden");
     const LEVEL_COLOR = ["bg-success-surface", "bg-warning-surface", "bg-danger-surface"];
     // With bulk actions on, the status dot fades out on row hover, or whenever a
@@ -91,9 +146,8 @@
                             >{/if}
                     </span>
                     <span class="shrink-0 text-on-surface-faint">·</span>
-                    <span
-                        class="shrink-0 font-mono text-[12px] font-semibold capitalize {config.color}"
-                        >{dstatus}</span
+                    <span class="shrink-0 font-mono text-[12px] font-semibold {config.color}"
+                        >{humanizeStatus(dstatus)}</span
                     >
                 </span>
                 <span
@@ -134,31 +188,51 @@
                 <!-- With usage bars a tight rail drops the status word; the dot
                      keeps its colour. -->
                 <span class="text-on-surface-faint {tight}">·</span>
-                <span
-                    class="font-mono text-[12.5px] font-semibold capitalize {config.color} {tight}"
-                    >{dstatus}</span
+                <span class="font-mono text-[12.5px] font-semibold {config.color} {tight}"
+                    >{humanizeStatus(dstatus)}</span
                 >
                 {#if suffix}
                     <span class="font-mono text-2xs text-on-surface-faint">{suffix}</span>
                 {/if}
             </span>
-            {#if usage && amounts}
+            {#if usage !== undefined && (amounts || lines !== undefined)}
+                <!-- Fixed slots, CPU over RAM over lines printed, so a run
+                     missing one (a non-shell backend has no CPU/RAM) keeps the
+                     others aligned with its neighbours. -->
                 <span
                     class="flex w-6 shrink-0 cursor-help flex-col gap-0.5"
-                    title="{runUsageLabel(run)}. Usual for this task: CPU {formatDuration(
-                        usage.usual.cpu,
-                    )} · RAM {formatBytes(usage.usual.ram)}"
+                    title={barsTitle}
                     data-testid="run-usage-bars"
                 >
-                    {@render bar(amounts.cpu, usage.max.cpu, usage.usual.cpu, "cpu")}
-                    {@render bar(amounts.ram, usage.max.ram, usage.usual.ram, "ram")}
+                    {#if usage && amounts}
+                        {@render bar(
+                            amounts.cpu,
+                            usage.max.cpu,
+                            usageLevel(amounts.cpu, usage.usual.cpu, "cpu"),
+                        )}
+                        {@render bar(
+                            amounts.ram,
+                            usage.max.ram,
+                            usageLevel(amounts.ram, usage.usual.ram, "ram"),
+                        )}
+                    {:else}
+                        <span class="block h-[3px]"></span>
+                        <span class="block h-[3px]"></span>
+                    {/if}
+                    {#if output && lines !== undefined}
+                        {@render bar(
+                            lines,
+                            output.max,
+                            output.band && outputUnusual(lines, output.band) ? 1 : 0,
+                        )}
+                    {/if}
                 </span>
             {:else if usage !== undefined}
                 <span class="w-6 shrink-0" aria-hidden="true"></span>
             {/if}
             <span
-                class="shrink-0 font-mono text-[11.5px] text-on-surface-faint tabular-nums"
-                title={retry ?? undefined}
+                class="shrink-0 font-mono text-[11.5px] {READOUT_COLOR[durationLevel]} tabular-nums"
+                title={readoutTitle}
             >
                 {runRowReadout(run, dstatus)}
             </span>
@@ -183,10 +257,10 @@
     ></div>
 </button>
 
-{#snippet bar(value: number, max: number, usual: number, kind: keyof RunUsageAmounts)}
+{#snippet bar(value: number, max: number, level: 0 | 1 | 2)}
     <span class="block h-[3px] overflow-hidden rounded-[1px] bg-outline-faint">
         <span
-            class="block h-full {LEVEL_COLOR[usageLevel(value, usual, kind)]}"
+            class="block h-full {LEVEL_COLOR[level]}"
             style="width: {String(max > 0 ? Math.max(4, Math.round((100 * value) / max)) : 4)}%"
         ></span>
     </span>

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

@@ -24,8 +24,13 @@
     import RunRow from "./RunRow.svelte";
     import type { RunOutputMatch } from "./types.js";
     import type { Run, RunSelector } from "@runwisp/common";
-    import { runFilterParams, type RunsListFilters } from "./run-filters.js";
-    import { instanceSuffix, runUsageScale } from "./run-helpers.js";
+    import {
+        activeFilterCount,
+        emptyRunFilters,
+        runFilterParams,
+        type RunsListFilters,
+    } from "./run-filters.js";
+    import { instanceSuffix, runOutputScale, runUsageScale, usualDuration } from "./run-helpers.js";
     import { formatDateTime } from "../../utils/format.js";
 
     type BulkHandler = (selector: RunSelector, affected: Run[]) => void;
@@ -75,7 +80,7 @@
         showTaskName?: boolean;
         taskNameFilter?: string;
         emptyText?: string;
-        emptyDescription?: string;
+        emptyDescription?: string | undefined;
         bulkActions?: boolean;
         onBulkCancel?: BulkHandler;
         onBulkDelete?: BulkHandler;
@@ -99,8 +104,9 @@
         // True while a query is typed but its results aren't in yet (debounce
         // window or request in flight), the rail shows its searching shimmer.
         outputSearchPending?: boolean;
-        // Task rail only: two small bars per finished run, CPU time over RAM,
-        // scaled to the largest loaded run and colored against the usual one.
+        // Task rail only: three small bars per finished run, CPU time, RAM and
+        // lines printed, scaled to the largest loaded run and colored against
+        // the usual one. The duration readout is colored against the usual run too.
         usageBars?: boolean;
         // Folds the list to a thin strip that still counts the runs, giving the
         // run detail the width. Omitted where the screen keeps the list open.
@@ -109,6 +115,8 @@
     } = $props();
 
     const usageScale = $derived(usageBars ? runUsageScale(items) : undefined);
+    const outputScale = $derived(usageBars ? runOutputScale(items) : undefined);
+    const durationUsual = $derived(usageBars ? usualDuration(items) : undefined);
 
     // Task-rail rows are one dense line (44px); the cross-task /runs view adds
     // the task name on a second line (64px).
@@ -246,6 +254,12 @@
         };
     }
 
+    // An empty list under filters says so, rather than claiming no runs exist.
+    const filtered = $derived(activeFilterCount(filters) > 0 || filters.search !== "");
+    function clearFilters() {
+        filters = { ...emptyRunFilters(), sortDirection: filters.sortDirection };
+    }
+
     // The count stands in for a title: "12 runs", or matches while searching.
     // Empty until the first page lands, when the count isn't known yet.
     const countLabel = $derived.by(() => {
@@ -420,7 +434,21 @@
                 {/if}
             {:else if items.length === 0 && loading}
                 <RunListSkeleton label="Loading runs" {showTaskName} />
-            {:else if items.length === 0}
+            {:else if items.length === 0 && filtered}
+                <EmptyState
+                    title="No matching runs"
+                    description="No run matches the current filters."
+                    icon={Clock}
+                    iconSize={32}
+                    class="py-8"
+                >
+                    {#snippet actions()}
+                        <Button variant="secondary" size="sm" onclick={clearFilters}>
+                            Clear filters
+                        </Button>
+                    {/snippet}
+                </EmptyState>
+            {:else if items.length === 0 && emptyText}
                 <EmptyState
                     title={emptyText}
                     description={emptyDescription}
@@ -504,6 +532,8 @@
         {bulkActions}
         {selectionActive}
         usage={usageBars ? (usageScale ?? null) : undefined}
+        output={outputScale}
+        {durationUsual}
         onselect={selectRun}
     />
 {/snippet}

package/src/lib/components/dashboard/cron-format.test.ts

@@ -13,16 +13,16 @@ describe("humanizeCron", () => {
 
     it("humanizes a daily expression", () => {
         const result = humanizeCron("0 3 * * *");
-        expect(result.humanized).toBe("At 03:00 AM");
+        expect(result.humanized).toBe("At 03:00");
         expect(result.isHumanized).toBe(true);
     });
 
     it("describes the nth and last weekday of the month", () => {
         expect(humanizeCron("0 3 * * FRI#3").humanized).toBe(
-            "At 03:00 AM, on the third Friday of the month",
+            "At 03:00, on the third Friday of the month",
         );
         const last = humanizeCron("0 3 * * FRI#L");
-        expect(last.humanized).toBe("At 03:00 AM, on the last Friday of the month");
+        expect(last.humanized).toBe("At 03:00, on the last Friday of the month");
         expect(last.raw).toBe("0 3 * * FRI#L");
     });
 

package/src/lib/components/dashboard/cron-format.ts

@@ -67,9 +67,10 @@ export function humanizeCron(cron: string): HumanizedCron {
 
     try {
         // cronstrue reads a last weekday as Quartz's "5L"; "5#L" would come out as
-        // "on the null Friday of the month".
+        // "on the null Friday of the month". 24-hour, like every other clock in the UI.
         const humanized = cronstrue.toString(raw.replace(/#L/gi, "L"), {
             throwExceptionOnParseError: true,
+            use24HourTimeFormat: true,
         });
         return { humanized, raw, isHumanized: true };
     } catch {

package/src/lib/components/dashboard/run-helpers.test.ts

@@ -15,6 +15,12 @@ import {
     runUsageLabel,
     runUsageScale,
     usageLevel,
+    usualDuration,
+    outputBand,
+    runOutputScale,
+    outputUnusual,
+    formatLines,
+    runOutputLabel,
     instanceSuffix,
     runLogDownloadUrl,
 } from "./run-helpers.js";
@@ -277,3 +283,66 @@ describe("usageLevel", () => {
         expect(usageLevel(8 * 1024 * 1024, 1024 * 1024, "ram")).toBe(0);
     });
 });
+
+describe("usualDuration", () => {
+    const ran = (seconds: number, status: Run["status"] = "ended") => ({
+        status,
+        startedAt: "2026-01-01T00:00:00Z",
+        endedAt: new Date(Date.parse("2026-01-01T00:00:00Z") + seconds * 1000).toISOString(),
+    });
+
+    it("takes the median over finished runs only", () => {
+        expect(usualDuration([ran(20), ran(240), ran(3600, "running"), ran(18)])).toBe(20_000);
+        expect(usualDuration([{ status: "ended" }, ran(5, "running")])).toBeUndefined();
+    });
+
+    it("flags a run far slower than usual, with a 5s floor", () => {
+        expect(usageLevel(240_000, 20_000, "duration")).toBe(2);
+        expect(usageLevel(31_000, 20_000, "duration")).toBe(1);
+        expect(usageLevel(22_000, 20_000, "duration")).toBe(0);
+        // 3s against a usual 50ms is jitter, not an outlier.
+        expect(usageLevel(3_000, 50, "duration")).toBe(0);
+    });
+});
+
+describe("output band", () => {
+    const printed = (
+        stdoutLines: number,
+        stderrLines = 0,
+    ): Pick<Run, "status" | "stdoutLines" | "stderrLines"> => ({
+        status: "ended",
+        stdoutLines,
+        stderrLines,
+    });
+
+    it("takes the nearest-rank p10 and p90 once ten runs have counts", () => {
+        const runs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => printed(n));
+        expect(outputBand(runs)).toEqual({ p10: 1, p90: 9 });
+        expect(outputBand(runs.slice(1))).toBeUndefined();
+    });
+
+    it("scales the output bars to the chattiest run", () => {
+        expect(runOutputScale([printed(2), printed(40, 2)])).toEqual({ max: 42, band: undefined });
+        expect(runOutputScale([{ status: "ended" }])).toBeUndefined();
+    });
+
+    it("flags clear outliers only", () => {
+        expect(outputUnusual(3, { p10: 0, p90: 0 })).toBe(true);
+        expect(outputUnusual(0, { p10: 0, p90: 0 })).toBe(false);
+        expect(outputUnusual(3, { p10: 480, p90: 520 })).toBe(true);
+        expect(outputUnusual(5000, { p10: 480, p90: 520 })).toBe(true);
+        expect(outputUnusual(300, { p10: 480, p90: 520 })).toBe(false);
+        expect(outputUnusual(3, { p10: 0, p90: 1 })).toBe(false);
+    });
+
+    it("labels what a run printed", () => {
+        expect(formatLines(1)).toBe("1 line");
+        expect(formatLines(1234)).toBe("1.2K lines");
+        expect(runOutputLabel(printed(0))).toBe("no output");
+        expect(runOutputLabel(printed(9, 3))).toBe("12 lines · 3 on stderr");
+        expect(runOutputLabel(printed(0, 2))).toBe("2 lines · all on stderr");
+        expect(
+            runOutputLabel({ status: "running", stdoutLines: 1, stderrLines: 0 }),
+        ).toBeUndefined();
+    });
+});

package/src/lib/components/dashboard/run-helpers.ts

@@ -165,12 +165,30 @@ export function runUsageScale(
     };
 }
 
+/** A finished run's wall time in ms, or undefined while it is still going. */
+export function runDurationMs(
+    run: Pick<Run, "status" | "startedAt" | "endedAt">,
+): number | undefined {
+    if (run.status !== "ended" || !run.startedAt || !run.endedAt) return undefined;
+    return new Date(run.endedAt).getTime() - new Date(run.startedAt).getTime();
+}
+
+/** The median wall time in ms over the finished runs given, the baseline a slow run is judged against. */
+export function usualDuration(
+    runs: readonly Pick<Run, "status" | "startedAt" | "endedAt">[],
+): number | undefined {
+    const durations = runs.flatMap((run) => runDurationMs(run) ?? []);
+    return durations.length > 0 ? median(durations) : undefined;
+}
+
 /**
  * The least a usual run counts as using, so a tiny or zero baseline (a mostly
  * idle task's median CPU time is often 0) doesn't hide a run that burns real
- * CPU or memory, nor flag 3ms against 1ms. CPU time in ms, memory in bytes.
+ * CPU or memory, nor flag 3ms against 1ms. CPU time and duration in ms, memory
+ * in bytes. Duration's floor is higher since wall time also carries network
+ * and scheduling jitter. Mirrors the TUI's uikit.UsageFloor*.
  */
-const USAGE_FLOOR: RunUsageAmounts = { cpu: 1000, ram: 16 * 1024 * 1024 };
+const USAGE_FLOOR = { cpu: 1000, ram: 16 * 1024 * 1024, duration: 5000 };
 
 /**
  * How unusual a run's amount is for its task: 0 about as usual, 1 at 1.5×
@@ -178,7 +196,11 @@ const USAGE_FLOOR: RunUsageAmounts = { cpu: 1000, ram: 16 * 1024 * 1024 };
  * amount stays at 0, however large that amount is. The usual run counts as
  * at least USAGE_FLOOR for its kind.
  */
-export function usageLevel(value: number, usual: number, kind: keyof RunUsageAmounts): 0 | 1 | 2 {
+export function usageLevel(
+    value: number,
+    usual: number,
+    kind: keyof typeof USAGE_FLOOR,
+): 0 | 1 | 2 {
     const baseline = Math.max(usual, USAGE_FLOOR[kind]);
     if (baseline <= 0) return 0;
     const ratio = value / baseline;
@@ -187,6 +209,102 @@ export function usageLevel(value: number, usual: number, kind: keyof RunUsageAmo
     return 0;
 }
 
+/** Lines a finished run printed on stdout and stderr together, or undefined without counts. */
+export function runOutputLines(
+    run: Pick<Run, "status" | "stdoutLines" | "stderrLines">,
+): number | undefined {
+    if (run.status !== "ended") return undefined;
+    if (run.stdoutLines === undefined || run.stderrLines === undefined) return undefined;
+    return run.stdoutLines + run.stderrLines;
+}
+
+/** The range of output a task's runs usually print, in lines: its 10th and 90th percentile. */
+export interface OutputBand {
+    p10: number;
+    p90: number;
+}
+
+/** How many finished runs a task needs before a run is judged against its band. */
+const OUTPUT_BAND_MIN_RUNS = 10;
+/** The fewest lines a run must be past the band's edge, so 3 against a usual 1 isn't flagged. */
+const OUTPUT_BAND_SLACK = 5;
+
+/** The p-th percentile of sorted values, by the nearest-rank method. */
+function nearestRank(sorted: number[], p: number): number {
+    const rank = Math.max(Math.ceil((p * sorted.length) / 100), 1);
+    return sorted[rank - 1] ?? 0;
+}
+
+/**
+ * The output band over the finished runs given, or undefined while fewer than
+ * OUTPUT_BAND_MIN_RUNS have line counts. Mirrors the TUI's uikit.UsualOutput.
+ */
+export function outputBand(
+    runs: readonly Pick<Run, "status" | "stdoutLines" | "stderrLines">[],
+): OutputBand | undefined {
+    const lines = runs.flatMap((run) => runOutputLines(run) ?? []);
+    if (lines.length < OUTPUT_BAND_MIN_RUNS) return undefined;
+    const sorted = lines.toSorted((a, b) => a - b);
+    return { p10: nearestRank(sorted, 10), p90: nearestRank(sorted, 90) };
+}
+
+/**
+ * Whether a line count is clearly outside the band: more than twice its 90th
+ * percentile or under half its 10th, and at least OUTPUT_BAND_SLACK lines past
+ * it. A task that is silent nearly every time is flagged by any output at all.
+ */
+export function outputUnusual(lines: number, band: OutputBand): boolean {
+    if (band.p90 === 0) return lines > 0;
+    const high = lines > 2 * band.p90 && lines - band.p90 >= OUTPUT_BAND_SLACK;
+    const low = 2 * lines < band.p10 && band.p10 - lines >= OUTPUT_BAND_SLACK;
+    return high || low;
+}
+
+/**
+ * How a task's runs compare on output: `max` is its chattiest run (the full
+ * length of an output bar), `band` its usual range, undefined until enough
+ * runs have counts. Undefined when no run has counts yet.
+ */
+export interface OutputScale {
+    max: number;
+    band: OutputBand | undefined;
+}
+
+/** The scale for a task's output bars, over the finished runs given. */
+export function runOutputScale(
+    runs: readonly Pick<Run, "status" | "stdoutLines" | "stderrLines">[],
+): OutputScale | undefined {
+    const lines = runs.flatMap((run) => runOutputLines(run) ?? []);
+    if (lines.length === 0) return undefined;
+    return { max: Math.max(...lines), band: outputBand(runs) };
+}
+
+const compactNumber = new Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+});
+
+/** "1 line", "37 lines", "1.2K lines". */
+export function formatLines(lines: number): string {
+    return lines === 1 ? "1 line" : `${compactNumber.format(lines)} lines`;
+}
+
+/**
+ * How much a run printed: "no output", "12 lines", "12 lines · 3 on stderr",
+ * or undefined for a run without counts.
+ */
+export function runOutputLabel(
+    run: Pick<Run, "status" | "stdoutLines" | "stderrLines">,
+): string | undefined {
+    const lines = runOutputLines(run);
+    if (lines === undefined) return undefined;
+    if (lines === 0) return "no output";
+    const stderr = run.stderrLines ?? 0;
+    if (stderr === 0) return formatLines(lines);
+    if (stderr === lines) return `${formatLines(lines)} · all on stderr`;
+    return `${formatLines(lines)} · ${String(stderr)} on stderr`;
+}
+
 /**
  * Monotonic position of a run's status in its lifecycle. Used to reject stale
  * updates (e.g. a `pending` HTTP response arriving after an SSE already

package/src/lib/log-console/LogConsoleFooter.svelte

@@ -63,7 +63,7 @@
         {/if}
     </div>
     <div class="flex items-center gap-4">
-        <span>{totalLines.toLocaleString()} lines</span>
+        <span>{totalLines.toLocaleString()} {totalLines === 1 ? "line" : "lines"}</span>
         {#if totalBytes > 0}
             <span>{formatBytes(totalBytes)}</span>
         {/if}

package/src/lib/utils/format.test.ts

@@ -103,6 +103,24 @@ describe("formatRelativeTimeWithAbsolute", () => {
         expect(r).toMatch(/\([^)]*\d[^)]*\)$/);
         expect(r).not.toMatch(/\(\d{1,2}:\d{2}\)$/);
     });
+    it("adds the year when the date falls in another year", () => {
+        const now = new Date(2026, 9, 20, 12);
+        expect(formatRelativeTimeWithAbsolute(new Date(2028, 1, 29), now)).toMatch(/2028\)$/);
+        expect(formatRelativeTimeWithAbsolute(new Date(2026, 11, 1), now)).not.toMatch(/2026/);
+    });
+    it("shows the clock time in the given zone, not the browser's", () => {
+        // Kathmandu is UTC+05:45, so no browser zone renders 02:30Z as 08:15.
+        const now = new Date("2026-10-21T00:00:00Z");
+        expect(
+            formatRelativeTimeWithAbsolute("2026-10-21T02:30:00Z", now, "Asia/Kathmandu"),
+        ).toMatch(/\(0?8:15\)$/);
+    });
+    it("falls back to the browser zone for a zone Intl doesn't know", () => {
+        const now = new Date("2026-10-21T00:00:00Z");
+        expect(formatRelativeTimeWithAbsolute("2026-10-21T02:30:00Z", now, "Mars/Olympus")).toBe(
+            formatRelativeTimeWithAbsolute("2026-10-21T02:30:00Z", now),
+        );
+    });
     it("computes the relative part against the supplied now", () => {
         const date = new Date("2024-01-01T12:00:00Z");
         const twoHoursBefore = formatRelativeTimeWithAbsolute(

package/src/lib/utils/format.ts

@@ -63,12 +63,14 @@ function dateFormatter(options: Intl.DateTimeFormatOptions): (date: string | Dat
     return (date) => format.format(new Date(date));
 }
 
+/** Date and time, 24-hour like every other clock in the UI, e.g. "Oct 20, 2026, 21:05". */
 export const formatDateTime = dateFormatter({
     year: "numeric",
     month: "short",
     day: "numeric",
-    hour: "numeric",
+    hour: "2-digit",
     minute: "2-digit",
+    hour12: false,
 });
 
 /** Wall-clock time of day, seconds included, 24-hour, e.g. "17:15:02". */
@@ -102,16 +104,38 @@ export const formatFullDateTime = dateFormatter({
     hour12: false,
 });
 
-const formatShortTime = dateFormatter({ hour: "numeric", minute: "2-digit", hour12: false });
+/** Formats date with options in timeZone; the browser's zone when unset or unknown to Intl. */
+function formatInZone(date: Date, options: Intl.DateTimeFormatOptions, timeZone?: string): string {
+    if (timeZone) {
+        try {
+            return new Intl.DateTimeFormat(undefined, { ...options, timeZone }).format(date);
+        } catch {
+            // A zone the daemon knows but this browser's Intl doesn't.
+        }
+    }
+    return new Intl.DateTimeFormat(undefined, options).format(date);
+}
 
+/**
+ * "in 7 hours (02:30)". Pass timeZone for a scheduled time, so the clock time
+ * agrees with the cron description ("At 02:30") written in the schedule's zone.
+ */
 export function formatRelativeTimeWithAbsolute(
     dateStr: string | Date,
     now: Date = new Date(),
+    timeZone?: string,
 ): string {
     const date = new Date(dateStr);
     const diffDays = Math.abs(now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24);
-    const absolute = diffDays < 1 ? formatShortTime(date) : formatDayMonth(date);
-    return `${formatRelativeTime(date, now)} (${absolute})`;
+    const year = (d: Date): string => formatInZone(d, { year: "numeric" }, timeZone);
+    // The year only when it differs, so "in 1 year (Feb 29)" can't hide which Feb 29.
+    const options: Intl.DateTimeFormatOptions =
+        diffDays < 1
+            ? { hour: "numeric", minute: "2-digit", hour12: false }
+            : year(date) === year(now)
+              ? { month: "short", day: "numeric" }
+              : { year: "numeric", month: "short", day: "numeric" };
+    return `${formatRelativeTime(date, now)} (${formatInZone(date, options, timeZone)})`;
 }
 
 export function formatBytes(bytes: number): string {