@runwisp/ui 0.9.0 → 0.11.0

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

@@ -2,7 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { runDuration, runStartDelay } from "./run-helpers.js";
+import {
+    runDuration,
+    runStartDelay,
+    formatTriggeredByLabel,
+    runRetryLabel,
+    instanceSuffix,
+} from "./run-helpers.js";
 
 describe("runDuration", () => {
     it("returns undefined when start_at is not set", () => {
@@ -59,3 +65,46 @@ describe("runStartDelay", () => {
         ).toBe("7m 12s");
     });
 });
+
+describe("formatTriggeredByLabel", () => {
+    it("humanizes each trigger source", () => {
+        expect(formatTriggeredByLabel("api")).toBe("API");
+        expect(formatTriggeredByLabel("cron")).toBe("Cron");
+        expect(formatTriggeredByLabel("service")).toBe("Service");
+        expect(formatTriggeredByLabel("startup")).toBe("Startup");
+        expect(formatTriggeredByLabel("cloud")).toBe("Cloud");
+    });
+});
+
+describe("runRetryLabel", () => {
+    it("returns undefined for a first attempt that is not a retry", () => {
+        expect(runRetryLabel({ retry_attempt: 0 })).toBeUndefined();
+    });
+
+    it("labels a run with a positive attempt number", () => {
+        expect(runRetryLabel({ retry_attempt: 2 })).toBe("retry #2");
+    });
+
+    it("labels a run that points back at the run it re-attempts", () => {
+        expect(runRetryLabel({ retry_attempt: 1, retry_of_run_id: "01JABC" })).toBe("retry #1");
+    });
+});
+
+describe("instanceSuffix", () => {
+    it("returns no suffix for a single-instance task", () => {
+        expect(instanceSuffix(0, 1)).toBe("");
+    });
+
+    it("returns no suffix for a non-service (count 0)", () => {
+        expect(instanceSuffix(0, 0)).toBe("");
+    });
+
+    it("suffixes slot 0 of a multi-instance service as #1 (1-based)", () => {
+        expect(instanceSuffix(0, 3)).toBe("#1");
+    });
+
+    it("maps the stored 0-based slot to a 1-based suffix", () => {
+        expect(instanceSuffix(1, 3)).toBe("#2");
+        expect(instanceSuffix(2, 3)).toBe("#3");
+    });
+});

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

@@ -26,6 +26,44 @@ export function runStartDelay(run: Pick<Run, "created_at" | "start_at">): string
     return formatDuration(delay);
 }
 
+/**
+ * Display suffix for a run's instance slot. A service configured with more than
+ * one instance gets a 1-based suffix (`#1`, `#2`, …) on every one of its runs;
+ * a single-instance task (or any non-service, where `instanceCount` is 1)
+ * returns an empty string so the bare task name is shown. `instanceIndex` is
+ * the stored 0-based slot; `instanceCount` is the task's currently configured
+ * instance count.
+ */
+export function instanceSuffix(instanceIndex: number, instanceCount: number): string {
+    if (instanceCount > 1) {
+        return `#${String(instanceIndex + 1)}`;
+    }
+    return "";
+}
+
+/** Human label for why a run fired (the `triggered_by` source). */
+export function formatTriggeredByLabel(triggeredBy: Run["triggered_by"]): string {
+    if (triggeredBy === "api") return "API";
+    if (triggeredBy === "cron") return "Cron";
+    if (triggeredBy === "service") return "Service";
+    if (triggeredBy === "startup") return "Startup";
+    return "Cloud";
+}
+
+/**
+ * "retry #N" label when a run is a retry of an earlier one, else undefined.
+ * A run is a retry if it carries a positive attempt number or points back at
+ * the run it re-attempts.
+ */
+export function runRetryLabel(
+    run: Pick<Run, "retry_attempt" | "retry_of_run_id">,
+): string | undefined {
+    if (run.retry_attempt > 0 || run.retry_of_run_id) {
+        return `retry #${String(run.retry_attempt)}`;
+    }
+    return undefined;
+}
+
 /**
  * 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/index.ts

@@ -80,17 +80,39 @@ export { LogFetcher } from "./log-console/LogFetcher.svelte.js";
 
 export { default as RunDetailPanel } from "./components/dashboard/RunDetailPanel.svelte";
 export { default as RunsList } from "./components/dashboard/RunsList.svelte";
-export type {
-    RunsListFilters,
-    RunsListSortDirection,
-} from "./components/dashboard/RunsList.svelte";
+export { default as RunFilterPopover } from "./components/dashboard/RunFilterPopover.svelte";
+export type { RunOutputMatch } from "./components/dashboard/RunsList.svelte";
+export {
+    emptyRunFilters,
+    NEEDS_ATTENTION_STATUSES,
+    isNeedsAttention,
+    activeFilterCount,
+    activeDimensions,
+    dimensionActive,
+    clearDimension,
+    clearPopoverFilters,
+    humanizeStatus,
+    statusChipLabel,
+    exitCodeRange,
+    type ExitCodeRange,
+    type RunsListFilters,
+    type RunsListSortDirection,
+    type FilterDimension,
+} from "./components/dashboard/run-filters.js";
 export {
     getRunStatusConfig,
     runDisplayStatus,
     RUN_STATUS_CONFIG,
     type RunStatusConfig,
 } from "./components/dashboard/status-config.js";
-export { runDuration, runStartDelay, runPhaseOrder } from "./components/dashboard/run-helpers.js";
+export {
+    runDuration,
+    runStartDelay,
+    runPhaseOrder,
+    formatTriggeredByLabel,
+    runRetryLabel,
+    instanceSuffix,
+} from "./components/dashboard/run-helpers.js";
 export { humanizeCron, type HumanizedCron } from "./components/dashboard/cron-format.js";
 export type { DaemonState, DaemonStats } from "./components/dashboard/types.js";
 

package/src/lib/log-console/LogCache.svelte.ts

@@ -1,8 +1,9 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { LogSlice, LogEvent } from "./types.js";
+import type { LogSlice, LogEvent, RegionUpdate } from "./types.js";
 import { SvelteMap } from "svelte/reactivity";
+import { visibleColumns } from "./ansi.js";
 
 /**
  * LogCache provides high-performance storage and pruning for log data.
@@ -13,10 +14,20 @@ import { SvelteMap } from "svelte/reactivity";
  */
 export class LogCache {
     lines = $state(new SvelteMap<number, string>());
+    // Live-region overlay, keyed by stream (stdout/stderr). Each stream has at
+    // most one active region; the frame is replaced wholesale on each update and
+    // never persisted. Rendered below the committed lines as an in-place tail.
+    regions = $state(new SvelteMap<string, { epoch: number; rows: string[] }>());
+    // Per-line frame-history counts. A non-zero entry marks a settled progress
+    // bar / multi-line redraw whose prior frames can be fetched on click.
+    frameCounts = $state(new SvelteMap<number, number>());
     totalLines = $state(0);
     totalBytes = $state(0);
     finished = $state(false);
     firstAvailableLine = $state(0);
+    // Widest visible line seen so far, in monospace columns. Monotonic so the
+    // horizontal scroll surface never shrinks as windowed lines are pruned.
+    maxLineColumns = $state(0);
 
     get size() {
         return this.lines.size;
@@ -38,6 +49,7 @@ export class LogCache {
             const prev = this.lines.get(line);
             if (prev !== v) {
                 this.lines.set(line, v);
+                this.maxLineColumns = Math.max(this.maxLineColumns, visibleColumns(v));
                 touched = true;
             }
         }
@@ -45,13 +57,53 @@ export class LogCache {
         return { touched, min, max };
     }
 
+    // Flattened overlay rows for rendering, stdout before stderr (then any
+    // other streams, sorted) for stable ordering. Reactive: reads the regions
+    // map so it recomputes on update.
+    get overlayRows(): string[] {
+        const preferred = ["stdout", "stderr"];
+        const rest = [...this.regions.keys()]
+            .filter((s) => !preferred.includes(s))
+            .sort((a, b) => a.localeCompare(b));
+        const out: string[] = [];
+        for (const stream of [...preferred, ...rest]) {
+            const region = this.regions.get(stream);
+            if (region) out.push(...region.rows);
+        }
+        return out;
+    }
+
+    applyRegion(update: RegionUpdate) {
+        if (update.rows.length === 0) {
+            this.regions.delete(update.stream);
+            return;
+        }
+        this.regions.set(update.stream, { epoch: update.epoch, rows: update.rows });
+        for (const row of update.rows) {
+            this.maxLineColumns = Math.max(this.maxLineColumns, visibleColumns(row));
+        }
+    }
+
     applyEvent(event: LogEvent) {
+        if (event.region) {
+            this.applyRegion(event.region);
+            return { touched: false, min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY };
+        }
         this.totalLines = Math.max(this.totalLines, Math.floor(event.sizeLines));
         this.totalBytes = Math.max(this.totalBytes, Math.floor(event.sizeBytes ?? 0));
         this.finished = event.finished;
+        // A finished run has no live region; drop any lingering overlay so a
+        // dropped clear-frame can't leave a stale tail painted forever.
+        if (event.finished && this.regions.size > 0) this.regions.clear();
         if (event.firstAvailableLine !== undefined && event.firstAvailableLine > 0) {
             this.firstAvailableLine = Math.max(this.firstAvailableLine, event.firstAvailableLine);
         }
+        if (event.frameCounts) {
+            for (const [k, v] of Object.entries(event.frameCounts)) {
+                const line = Number(k);
+                if (Number.isFinite(line) && line >= 0 && v > 0) this.frameCounts.set(line, v);
+            }
+        }
 
         return this.mergeSlice(event.lines);
     }
@@ -73,10 +125,13 @@ export class LogCache {
 
     reset() {
         this.lines.clear();
+        this.regions.clear();
+        this.frameCounts.clear();
         this.totalLines = 0;
         this.totalBytes = 0;
         this.finished = false;
         this.firstAvailableLine = 0;
+        this.maxLineColumns = 0;
     }
 
     isRangeComplete(start: number, end: number) {

package/src/lib/log-console/ansi.test.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { describe, expect, it } from "vitest";
-import { ansiLineToHtml } from "./ansi.js";
+import { ansiLineToHtml, visibleColumns } from "./ansi.js";
 
 describe("ansiLineToHtml", () => {
     it("passes plain text through unchanged", () => {
@@ -48,3 +48,20 @@ describe("ansiLineToHtml", () => {
         expect(ansiLineToHtml("plain")).toBe("plain");
     });
 });
+
+describe("visibleColumns", () => {
+    it("counts plain characters", () => {
+        expect(visibleColumns("hello")).toBe(5);
+        expect(visibleColumns("")).toBe(0);
+    });
+
+    it("ignores ANSI escape sequences", () => {
+        expect(visibleColumns("\x1b[31merror\x1b[0m")).toBe(5);
+        expect(visibleColumns("\x1b[1;36minfo\x1b[0m done")).toBe(9);
+    });
+
+    it("charges tabs the full tab width", () => {
+        expect(visibleColumns("\t")).toBe(8);
+        expect(visibleColumns("ab\tcd")).toBe(12);
+    });
+});

package/src/lib/log-console/ansi.ts

@@ -37,3 +37,20 @@ export function ansiLineToHtml(text: string): string {
         colors: ANSI_PALETTE,
     }).toHtml(text);
 }
+
+// Matches CSI escape sequences (colour codes, cursor moves, etc.), which
+// render to zero visible width. The ESC control char is intentional here.
+// eslint-disable-next-line no-control-regex
+const ANSI_ESCAPE = /\x1b\[[0-9;?]*[A-Za-z]/g;
+const TAB_WIDTH = 8;
+
+// Count the visible columns a log line occupies once ANSI escape sequences
+// are stripped. Tabs are charged the full tab width — an over-estimate that
+// only adds trailing slack to the horizontal scroll surface, never clips.
+export function visibleColumns(text: string): number {
+    let columns = 0;
+    for (const ch of text.replace(ANSI_ESCAPE, "")) {
+        columns += ch === "\t" ? TAB_WIDTH : 1;
+    }
+    return columns;
+}

package/src/lib/log-console/types.ts

@@ -3,12 +3,29 @@
 
 export type LogSlice = Record<number, string>;
 
+/**
+ * RegionUpdate is a live snapshot of a still-animating output region (a `\r`
+ * progress bar or a multi-line ANSI redraw). It is never persisted: the cache
+ * holds it in a transient overlay keyed by stream, replacing the whole frame on
+ * each update. Empty `rows` clears the overlay for that stream.
+ */
+export type RegionUpdate = {
+    stream: string;
+    epoch: number;
+    rows: string[];
+};
+
 export type LogEvent = {
     lines: LogSlice;
     sizeLines: number;
     sizeBytes?: number;
     finished: boolean;
     firstAvailableLine?: number;
+    region?: RegionUpdate;
+    // Per-line count of recorded prior frames, keyed by line number. Present only
+    // for settled progress-bar / multi-line-redraw anchor lines, marking them as
+    // clickable to rewind through earlier states. Plain lines are absent.
+    frameCounts?: Record<number, number>;
 };
 
 export function isLogEvent(value: unknown): value is LogEvent {

package/src/lib/theme-tokens.css

@@ -20,73 +20,76 @@
  */
 
 :root {
-    /* Primary — Wisp Violet */
-    --rw-color-wisp-50: oklch(0.97 0.02 280);
-    --rw-color-wisp-100: oklch(0.94 0.04 280);
-    --rw-color-wisp-200: oklch(0.88 0.08 280);
-    --rw-color-wisp-300: oklch(0.78 0.12 280);
-    --rw-color-wisp-400: oklch(0.68 0.16 275);
-    --rw-color-wisp-500: oklch(0.58 0.18 270);
-    --rw-color-wisp-600: oklch(0.5 0.18 268);
-    --rw-color-wisp-700: oklch(0.42 0.16 268);
-    --rw-color-wisp-800: oklch(0.35 0.12 268);
-    --rw-color-wisp-900: oklch(0.28 0.08 268);
-    --rw-color-wisp-950: oklch(0.18 0.06 268);
+    /* Primary — Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
+     * and less cyan than Aurora (running/info) so the two stay distinct. */
+    --rw-color-wisp-50: oklch(0.97 0.02 205);
+    --rw-color-wisp-100: oklch(0.95 0.035 205);
+    --rw-color-wisp-200: oklch(0.89 0.055 204);
+    --rw-color-wisp-300: oklch(0.8 0.075 204);
+    --rw-color-wisp-400: oklch(0.68 0.088 203);
+    --rw-color-wisp-500: oklch(0.6 0.09 204);
+    --rw-color-wisp-600: oklch(0.536 0.089 205); /* ≈ #0E7C86 */
+    --rw-color-wisp-700: oklch(0.46 0.08 206);
+    --rw-color-wisp-800: oklch(0.38 0.066 207);
+    --rw-color-wisp-900: oklch(0.3 0.048 208);
+    --rw-color-wisp-950: oklch(0.2 0.034 210);
 
-    /* Accent — Aurora Teal */
-    --rw-color-aurora-50: oklch(0.97 0.02 180);
-    --rw-color-aurora-100: oklch(0.94 0.05 180);
-    --rw-color-aurora-200: oklch(0.88 0.1 178);
-    --rw-color-aurora-300: oklch(0.78 0.14 176);
-    --rw-color-aurora-400: oklch(0.68 0.16 174);
-    --rw-color-aurora-500: oklch(0.58 0.14 172);
-    --rw-color-aurora-600: oklch(0.5 0.12 172);
-    --rw-color-aurora-700: oklch(0.42 0.1 172);
-    --rw-color-aurora-800: oklch(0.35 0.08 172);
-    --rw-color-aurora-900: oklch(0.28 0.06 172);
+    /* Accent — Aurora Teal (running status = #13A0A8, a cyan-leaning teal) */
+    --rw-color-aurora-50: oklch(0.97 0.02 192);
+    --rw-color-aurora-100: oklch(0.94 0.045 192);
+    --rw-color-aurora-200: oklch(0.88 0.075 190);
+    --rw-color-aurora-300: oklch(0.78 0.105 189);
+    --rw-color-aurora-400: oklch(0.68 0.115 190);
+    --rw-color-aurora-500: oklch(0.58 0.115 191);
+    --rw-color-aurora-600: oklch(0.5 0.105 192);
+    --rw-color-aurora-700: oklch(0.42 0.09 192);
+    --rw-color-aurora-800: oklch(0.35 0.07 192);
+    --rw-color-aurora-900: oklch(0.28 0.055 192);
 
-    /* Mist — neutral grays with a purple tint */
-    --rw-color-mist-50: oklch(0.98 0.005 280);
-    --rw-color-mist-100: oklch(0.96 0.008 280);
-    --rw-color-mist-200: oklch(0.92 0.01 280);
-    --rw-color-mist-300: oklch(0.86 0.012 280);
-    --rw-color-mist-400: oklch(0.7 0.012 280);
-    --rw-color-mist-500: oklch(0.55 0.012 280);
-    --rw-color-mist-600: oklch(0.45 0.012 280);
-    --rw-color-mist-700: oklch(0.35 0.012 280);
-    --rw-color-mist-800: oklch(0.25 0.012 280);
-    --rw-color-mist-900: oklch(0.18 0.012 280);
-    --rw-color-mist-950: oklch(0.12 0.012 280);
+    /* Mist — cool slate-blue neutrals (the artifact's #EDF1F4 / #E0E6EC /
+     * #18212E family). No purple tint; hue ~248, low chroma rising into the
+     * mids the way the design's slate does. */
+    --rw-color-mist-50: oklch(0.985 0.004 240);
+    --rw-color-mist-100: oklch(0.956 0.006 240); /* ≈ ground #EDF1F4 */
+    --rw-color-mist-200: oklch(0.922 0.01 248); /* ≈ line #E0E6EC */
+    --rw-color-mist-300: oklch(0.83 0.016 248);
+    --rw-color-mist-400: oklch(0.676 0.026 248); /* ≈ faint #8B99A7 */
+    --rw-color-mist-500: oklch(0.6 0.03 248);
+    --rw-color-mist-600: oklch(0.531 0.032 248); /* ≈ muted #5E6E7E */
+    --rw-color-mist-700: oklch(0.4 0.031 252);
+    --rw-color-mist-800: oklch(0.31 0.029 255);
+    --rw-color-mist-900: oklch(0.245 0.028 258); /* ≈ ink #18212E */
+    --rw-color-mist-950: oklch(0.17 0.022 258);
 
-    /* Success — Aurora Mint */
-    --rw-color-success-50: oklch(0.97 0.018 165);
-    --rw-color-success-100: oklch(0.94 0.035 165);
-    --rw-color-success-200: oklch(0.88 0.06 165);
-    --rw-color-success-300: oklch(0.78 0.09 165);
-    --rw-color-success-400: oklch(0.68 0.11 165);
-    --rw-color-success-500: oklch(0.58 0.115 165);
-    --rw-color-success-600: oklch(0.5 0.105 165);
-    --rw-color-success-700: oklch(0.42 0.095 165);
+    /* Success — Field Green (success status = #1F9D57, a true grass green) */
+    --rw-color-success-50: oklch(0.97 0.02 150);
+    --rw-color-success-100: oklch(0.94 0.04 150);
+    --rw-color-success-200: oklch(0.88 0.07 150);
+    --rw-color-success-300: oklch(0.78 0.11 150);
+    --rw-color-success-400: oklch(0.68 0.14 150);
+    --rw-color-success-500: oklch(0.58 0.145 150);
+    --rw-color-success-600: oklch(0.5 0.13 150);
+    --rw-color-success-700: oklch(0.42 0.11 150);
 
-    /* Danger — Rose Crimson */
-    --rw-color-danger-50: oklch(0.97 0.014 355);
-    --rw-color-danger-100: oklch(0.94 0.028 355);
-    --rw-color-danger-200: oklch(0.88 0.052 355);
-    --rw-color-danger-300: oklch(0.78 0.085 355);
-    --rw-color-danger-400: oklch(0.68 0.115 355);
-    --rw-color-danger-500: oklch(0.58 0.145 355);
-    --rw-color-danger-600: oklch(0.5 0.135 355);
-    --rw-color-danger-700: oklch(0.42 0.12 355);
+    /* Danger — Signal Red (failed status = #D6453D, a warm tomato red) */
+    --rw-color-danger-50: oklch(0.97 0.016 27);
+    --rw-color-danger-100: oklch(0.94 0.03 27);
+    --rw-color-danger-200: oklch(0.88 0.06 27);
+    --rw-color-danger-300: oklch(0.78 0.1 27);
+    --rw-color-danger-400: oklch(0.68 0.14 27);
+    --rw-color-danger-500: oklch(0.58 0.175 27);
+    --rw-color-danger-600: oklch(0.5 0.17 27);
+    --rw-color-danger-700: oklch(0.42 0.145 27);
 
-    /* Warning */
-    --rw-color-warning-50: oklch(0.98 0.03 85);
-    --rw-color-warning-100: oklch(0.95 0.08 85);
-    --rw-color-warning-200: oklch(0.9 0.12 80);
-    --rw-color-warning-300: oklch(0.85 0.16 75);
-    --rw-color-warning-400: oklch(0.8 0.18 70);
-    --rw-color-warning-500: oklch(0.75 0.16 65);
-    --rw-color-warning-600: oklch(0.65 0.14 60);
-    --rw-color-warning-700: oklch(0.55 0.12 55);
+    /* Warning — Ember Amber (stopped status = #D98324, a warm orange-amber) */
+    --rw-color-warning-50: oklch(0.97 0.03 78);
+    --rw-color-warning-100: oklch(0.94 0.07 74);
+    --rw-color-warning-200: oklch(0.9 0.11 72);
+    --rw-color-warning-300: oklch(0.84 0.14 70);
+    --rw-color-warning-400: oklch(0.77 0.155 67);
+    --rw-color-warning-500: oklch(0.69 0.155 64);
+    --rw-color-warning-600: oklch(0.6 0.14 62);
+    --rw-color-warning-700: oklch(0.52 0.12 60);
 
     /* ANSI console palette — 16-color map for the log console, tuned for
      * its always-dark surface (no .dark override needed). Hues follow the
@@ -109,6 +112,15 @@
     --rw-ansi-bright-cyan: var(--rw-color-aurora-300);
     --rw-ansi-bright-white: var(--rw-color-mist-50);
 
+    /* Console device surface — the log console is a "black box" instrument
+     * with its own fixed palette that never follows the light/dark UI theme.
+     * Exact values from the approved execution-detail design. */
+    --rw-con-bg: #0e141b; /* body / gutter backing */
+    --rw-con-panel: #11181f; /* toolbar + footer chrome */
+    --rw-con-text: #c3cfda; /* default log text */
+    --rw-con-dim: #6c7d8c; /* footer + muted readouts */
+    --rw-con-gutter: #3c4a58; /* line numbers + sentinel rule */
+
     /* Light-mode semantic tokens (default) */
     /* Surfaces */
     --rw-surface: var(--rw-color-mist-50);

package/src/lib/theme.css

@@ -197,6 +197,7 @@
     --color-warning-soft-text: var(--rw-warning-soft-text);
     /* Info */
     --color-info: var(--rw-info);
+    --color-info-surface: var(--rw-info);
     --color-info-hover: var(--rw-info-hover);
     --color-on-info: var(--rw-on-info);
     --color-info-soft: var(--rw-info-soft);

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

@@ -4,11 +4,21 @@
 import { describe, expect, it } from "vitest";
 import {
     formatBytes,
+    formatCalendarDate,
+    formatClockTime,
+    formatDayMonth,
     formatDuration,
     formatRelativeTime,
     formatRelativeTimeWithAbsolute,
+    formatTimeHM,
 } from "./format.js";
 
+// The clock/date helpers below delegate to toLocaleTimeString / toLocaleDateString,
+// whose exact rendering is locale- and timezone-dependent. We assert the
+// locale-invariant *shape* of each format (how many numeric groups, year present
+// or not) rather than a literal string, mirroring formatRelativeTimeWithAbsolute.
+const numericGroups = (s: string): number => (s.match(/\d+/g) ?? []).length;
+
 describe("formatBytes", () => {
     it("formats 0 bytes", () => {
         expect(formatBytes(0)).toBe("0 B");
@@ -122,3 +132,31 @@ describe("formatRelativeTime", () => {
         );
     });
 });
+
+describe("formatClockTime", () => {
+    it("renders three numeric groups (hours, minutes, seconds)", () => {
+        // 24-hour h:m:s — the seconds component is what sets it apart from formatTimeHM.
+        expect(numericGroups(formatClockTime("2026-06-22T17:15:02Z"))).toBe(3);
+    });
+});
+
+describe("formatTimeHM", () => {
+    it("renders two numeric groups (hours, minutes) — no seconds", () => {
+        expect(numericGroups(formatTimeHM("2026-06-22T17:15:02Z"))).toBe(2);
+    });
+});
+
+describe("formatCalendarDate", () => {
+    it("includes the four-digit year", () => {
+        // Midday UTC keeps the calendar year stable across every timezone.
+        expect(formatCalendarDate("2026-06-22T12:00:00Z")).toContain("2026");
+    });
+});
+
+describe("formatDayMonth", () => {
+    it("includes a day digit but omits the year", () => {
+        const r = formatDayMonth("2026-06-22T12:00:00Z");
+        expect(r).toMatch(/\d/);
+        expect(r).not.toContain("2026");
+    });
+});

package/src/lib/utils/format.ts

@@ -53,6 +53,42 @@ export function formatDateTime(dateStr: string): string {
     });
 }
 
+/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
+export function formatClockTime(dateStr: string): string {
+    return new Date(dateStr).toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });
+}
+
+/** Calendar date without the time — e.g. "22 Jun 2026". */
+export function formatCalendarDate(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+}
+
+/** Time of day, no seconds, 24-hour — e.g. "17:15". */
+export function formatTimeHM(dateStr: string): string {
+    return new Date(dateStr).toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+    });
+}
+
+/** Day and month, no year — e.g. "22 Jun". */
+export function formatDayMonth(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+    });
+}
+
 export function formatDuration(ms: number): string {
     if (ms < 1000) return String(ms) + "ms";
     const s = Math.floor(ms / 1000);

package/src/stories/LogConsole.stories.svelte

@@ -50,6 +50,15 @@
         `${ESC}4;36munderlined cyan link${ESC}0m and ${ESC}4;33munderlined yellow${ESC}0m`,
     ];
 
+    const LONG_LINES = [
+        `${ESC}36m[info]${ESC}0m starting request trace`,
+        `${ESC}90m2026-06-05T03:00:00Z${ESC}0m GET /api/v1/tasks?include=runs,logs,schedule&limit=100&offset=0 → ${ESC}32m200${ESC}0m ${ESC}90m{"trace":"a1b2c3d4-e5f6-7890-abcd-ef1234567890","upstream":"https://internal.example.com/very/long/path/segment/that/keeps/going/and/going","latency_ms":1287,"bytes":204812}${ESC}0m`,
+        `${ESC}31m[error]${ESC}0m panic: runtime error: index out of range [12] with length 8 — goroutine 42 [running]: main.process(0xc0000b4000, 0x1f4) /home/runner/work/app/app/internal/pipeline/process.go:317 +0x4a5`,
+        "  short line in between",
+        `tab-separated\tcolumns\there\tshould\tstay\taligned\tand\textend\tfar\tpast\tthe\tviewport\tedge\tto\tprove\thorizontal\tscroll`,
+        `${ESC}32m[done]${ESC}0m ${"=".repeat(400)}|END`,
+    ];
+
     const STREAM_TICKS = [
         `${ESC}36m[info]${ESC}0m processed batch ${ESC}1m#42${ESC}0m ${ESC}90m(1,024 records)${ESC}0m`,
         `${ESC}32m✓${ESC}0m health check passed`,
@@ -73,3 +82,7 @@
 <Story name="Truncated" asChild>
     <LogConsoleDemo lines={SAMPLE_LOG.slice(6)} firstAvailableLine={1500} />
 </Story>
+
+<Story name="Long Lines" asChild>
+    <LogConsoleDemo lines={LONG_LINES} />
+</Story>

package/src/stories/assets/runwisp_c.svg

@@ -1,8 +1,8 @@
 <svg width="512" height="512" version="1.1" viewBox="0 0 5120 5120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
   <linearGradient id="b">
-   <stop stop-color="#526ee3" offset="0"/>
-   <stop stop-color="#009371" offset="1"/>
+   <stop stop-color="#15a0a8" offset="0"/>
+   <stop stop-color="#0e7c86" offset="1"/>
   </linearGradient>
   <radialGradient id="a" cx="2375.3" cy="3240.7" r="1333.9" gradientTransform="matrix(1.01 -.012494 .026846 2.1701 -110.74 -3341.2)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
  </defs>