@runwisp/ui 1.5.1 → 1.7.1

package/src/lib/log-console/frame-history.svelte.ts

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { LINE_HEIGHT } from "./wrap-layout.svelte.js";
+
+type FetchLineHistory = (lineNum: number) => Promise<string[][]>;
+
+/** Padding above and below the block content, px. */
+export const FRAME_BLOCK_PAD = 8;
+/** Gap between consecutive frames, px. */
+export const FRAME_GAP = 6;
+// The block scrolls internally beyond this height, px.
+const FRAME_BLOCK_MAX = 400;
+
+/**
+ * Inline expansion of a settled progress bar / multi-line redraw: the prior
+ * whole-region frames it passed through, shown under its committed line. One
+ * expansion at a time.
+ */
+export class FrameHistory {
+    /** Absolute line number whose history block is open. */
+    line = $state<number | null>(null);
+    /** The fetched frames; null while loading. */
+    frames = $state<string[][] | null>(null);
+    failed = $state(false);
+    readonly #fetch: () => FetchLineHistory | undefined;
+
+    constructor(fetch: () => FetchLineHistory | undefined) {
+        this.#fetch = fetch;
+    }
+
+    /**
+     * Height the open block occupies in the virtual surface. Later lines are
+     * shifted down by exactly this, so the layout math stays a single offset.
+     */
+    readonly blockHeight = $derived.by(() => {
+        if (this.line === null) return 0;
+        if (!this.frames) return LINE_HEIGHT * 2; // loading / error placeholder
+        let h = FRAME_BLOCK_PAD * 2;
+        for (const frame of this.frames) {
+            h += LINE_HEIGHT; // per-frame label
+            h += frame.length * LINE_HEIGHT; // the frame's rows
+        }
+        if (this.frames.length > 1) h += FRAME_GAP * (this.frames.length - 1);
+        return Math.min(h, FRAME_BLOCK_MAX);
+    });
+
+    collapse(): void {
+        this.line = null;
+        this.frames = null;
+        this.failed = false;
+    }
+
+    async toggle(lineNum: number): Promise<void> {
+        if (this.line === lineNum) {
+            this.collapse();
+            return;
+        }
+        this.line = lineNum;
+        this.frames = null;
+        this.failed = false;
+        const fetchHistory = this.#fetch();
+        if (!fetchHistory) return;
+        try {
+            const frames = await fetchHistory(lineNum);
+            if (this.line === lineNum) this.frames = frames;
+        } catch {
+            if (this.line === lineNum) this.failed = true;
+        }
+    }
+}

package/src/lib/log-console/wrap-layout.svelte.test.ts

@@ -0,0 +1,92 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { LogCache } from "./LogCache.svelte.js";
+import { WrapLayout, wrapColumns } from "./wrap-layout.svelte.js";
+
+// 10 columns: (width 96 - gutter 0 - padding 16) / charWidth 8.
+const WIDTH = 96;
+const CHAR_WIDTH = 8;
+
+// Effects do not run under the node test environment, so lines are measured the
+// way the console does for streamed text: through measureRange.
+function setup(lines: string[], wrap: boolean) {
+    const cache = new LogCache();
+    cache.applyEvent({
+        lines: Object.fromEntries(lines.map((text, i) => [i, text])),
+        sizeLines: lines.length,
+        finished: true,
+    });
+    const layout = new WrapLayout(cache, {
+        wrap: () => wrap,
+        width: () => WIDTH,
+        gutterWidth: () => 0,
+        charWidth: () => CHAR_WIDTH,
+    });
+    layout.measureRange(0, lines.length - 1);
+    return { cache, layout };
+}
+
+describe("wrapColumns", () => {
+    it("is the columns left after the gutter and padding", () => {
+        expect(wrapColumns(true, WIDTH, 0, CHAR_WIDTH)).toBe(10);
+        expect(wrapColumns(true, 200, 40, 8)).toBe(18);
+    });
+
+    it("keeps one count across the pixels of a resize, so it alone can drive a remeasure", () => {
+        const counts = new Set([96, 97, 100, 103].map((w) => wrapColumns(true, w, 0, CHAR_WIDTH)));
+        expect([...counts]).toEqual([10]);
+        expect(wrapColumns(true, 104, 0, CHAR_WIDTH)).toBe(11);
+    });
+
+    it("is 1 with wrapping off or before the font is measured", () => {
+        expect(wrapColumns(false, WIDTH, 0, CHAR_WIDTH)).toBe(1);
+        expect(wrapColumns(true, WIDTH, 0, 0)).toBe(1);
+        expect(wrapColumns(true, 10, 0, CHAR_WIDTH)).toBe(1);
+    });
+});
+
+describe("WrapLayout", () => {
+    it("treats every line as one row when wrapping is off", () => {
+        const { layout } = setup(["a".repeat(100), "b"], false);
+        expect(layout.rowCount(0)).toBe(1);
+        expect(layout.rowsAbove(1)).toBe(1);
+        expect(layout.totalRows).toBe(2);
+        expect(layout.offsetAt(1.5)).toBe(1);
+        expect(layout.offsetEnd(0, 1.2)).toBe(2);
+    });
+
+    it("counts wrapped rows per line and accumulates positions", () => {
+        // 25 columns wrap into 3 rows of 10; 5 columns stay on 1.
+        const { layout } = setup(["a".repeat(25), "b".repeat(5), "c".repeat(10)], true);
+        expect(layout.rowCount(0)).toBe(3);
+        expect(layout.rowCount(1)).toBe(1);
+        expect(layout.rowCount(2)).toBe(1);
+        expect(layout.rowsAbove(0)).toBe(0);
+        expect(layout.rowsAbove(1)).toBe(3);
+        expect(layout.rowsAbove(2)).toBe(4);
+        expect(layout.totalRows).toBe(5);
+    });
+
+    it("maps a scroll offset back to the line covering it", () => {
+        const { layout } = setup(["a".repeat(25), "b".repeat(5), "c".repeat(10)], true);
+        expect(layout.offsetAt(0)).toBe(0);
+        expect(layout.offsetAt(2.9)).toBe(0);
+        expect(layout.offsetAt(3)).toBe(1);
+        expect(layout.offsetAt(4.5)).toBe(2);
+        expect(layout.offsetEnd(0, 3.5)).toBe(2);
+    });
+
+    it("measures a range of lines that arrive later", () => {
+        const { cache, layout } = setup([], true);
+        const merged = cache.applyEvent({
+            lines: { 0: "a".repeat(25) },
+            sizeLines: 1,
+            finished: false,
+        });
+        layout.measureRange(merged.min, merged.max);
+        expect(layout.rowCount(0)).toBe(3);
+        expect(layout.totalRows).toBe(3);
+    });
+});

package/src/lib/log-console/wrap-layout.svelte.ts

@@ -0,0 +1,188 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { untrack } from "svelte";
+import { visibleColumns } from "./ansi.js";
+import type { LogCache } from "./LogCache.svelte.js";
+
+/** Pixels per rendered row. */
+export const LINE_HEIGHT = 20;
+
+// Right padding on the text cell (pr-4); reserved when computing how many
+// columns a wrapped line can use.
+const TEXT_PADDING = 16;
+
+/**
+ * How many columns a wrapped line can use: 1 with wrapping off or before the
+ * font is measured. Many widths map to the same count, so a resize only costs
+ * a remeasure when this number changes.
+ */
+export function wrapColumns(
+    wrap: boolean,
+    width: number,
+    gutter: number,
+    charWidth: number,
+): number {
+    if (!wrap || charWidth <= 0) return 1;
+    return Math.max(1, Math.floor((width - gutter - TEXT_PADDING) / charWidth));
+}
+
+interface WrapLayoutInputs {
+    wrap: () => boolean;
+    /** Width of the scroll container in px. */
+    width: () => number;
+    gutterWidth: () => number;
+    /** Width of one monospace column in px. */
+    charWidth: () => number;
+}
+
+/**
+ * Row geometry for the virtualized log. With wrapping off every line is one
+ * row. With wrapping on, each line occupies as many rows as its text wraps
+ * into at the current column width, so positions come from a prefix sum of the
+ * per-line row counts instead of a multiplication. Construct during component
+ * init: it registers effects.
+ */
+export class WrapLayout {
+    // rowCounts remembers the wrapped row count for every line whose text has
+    // been observed; lines never loaded (pruned or out-of-window) count as 1.
+    // A plain Map is deliberate: reactivity is driven by the `#version` counter
+    // (bumped on any change), not by per-key subscriptions, iterating a
+    // SvelteMap of tens of thousands of lines on every streamed line would be
+    // wasteful.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    readonly #rowCounts = new Map<number, number>();
+    #version = $state(0);
+    readonly #cache: LogCache;
+    readonly #inputs: WrapLayoutInputs;
+
+    // How many columns a wrapped line can use at the current width. Derived,
+    // so the full remeasure below depends on the column count alone: a resize
+    // that keeps the count (most pixels of a drag) doesn't re-walk every line.
+    readonly #availableColumns = $derived.by(() => {
+        const { wrap, width, gutterWidth, charWidth } = this.#inputs;
+        return wrapColumns(wrap(), width(), gutterWidth(), charWidth());
+    });
+
+    // prefixSums[i] is the total rows consumed by lines
+    // [firstAvailableLine, firstAvailableLine + i). Empty when wrapping is off
+    // (the fixed-height path ignores it).
+    readonly #prefixSums = $derived.by(() => {
+        const first = this.#cache.firstAvailableLine;
+        const total = this.#cache.totalLines;
+        // Subscribe to the counter that signals rowCounts changed.
+        // eslint-disable-next-line @typescript-eslint/no-meaningless-void-operator
+        void this.#version;
+        if (!this.#inputs.wrap()) return [];
+        const count = Math.max(0, total - first);
+        const sums = new Array<number>(count + 1);
+        sums[0] = 0;
+        let acc = 0;
+        for (let i = 0; i < count; i++) {
+            acc += this.#rowCounts.get(first + i) ?? 1;
+            sums[i + 1] = acc;
+        }
+        return sums;
+    });
+
+    constructor(cache: LogCache, inputs: WrapLayoutInputs) {
+        this.#cache = cache;
+        this.#inputs = inputs;
+
+        // Full remeasure of every loaded line, needed only when wrapping turns
+        // on or the available column width changes (wrap width affects every
+        // line's row count). Line appends/backfills are measured incrementally
+        // via measureRange; reading `cache.lines` in this effect's tracked scope
+        // would resubscribe it to the SvelteMap's shared version signal and
+        // re-run this O(n) walk on every appended line, hence `untrack`. Pruned
+        // lines keep their last-computed count so scroll geometry stays stable.
+        $effect(() => {
+            if (!this.#inputs.wrap()) return;
+            const cols = this.#availableColumns;
+            untrack(() => {
+                let changed = false;
+                for (const [num, text] of this.#cache.lines) {
+                    changed = this.#measure(num, text, cols) || changed;
+                }
+                if (changed) this.#version++;
+            });
+        });
+
+        // Drop wrap geometry when wrapping turns off so memory doesn't linger.
+        $effect(() => {
+            if (!this.#inputs.wrap()) this.#rowCounts.clear();
+        });
+    }
+
+    /**
+     * Measure the wrapped row counts of the lines in [min, max]. Called where
+     * new line text lands in the cache (streamed append, on-demand backfill),
+     * each of which knows the touched range, so one appended line costs O(1).
+     */
+    measureRange(min: number, max: number): void {
+        if (!this.#inputs.wrap() || min > max) return;
+        const cols = this.#availableColumns;
+        let changed = false;
+        for (let num = min; num <= max; num++) {
+            changed = this.#measure(num, this.#cache.lines.get(num), cols) || changed;
+        }
+        if (changed) this.#version++;
+    }
+
+    /** Rows a line occupies. */
+    rowCount(lineNum: number): number {
+        return this.#inputs.wrap() ? (this.#rowCounts.get(lineNum) ?? 1) : 1;
+    }
+
+    /** Rows consumed by the lines before `lineNum`. */
+    rowsAbove(lineNum: number): number {
+        const i = lineNum - this.#cache.firstAvailableLine;
+        if (!this.#inputs.wrap()) return i;
+        const sums = this.#prefixSums;
+        if (i <= 0) return 0;
+        if (i >= sums.length) return sums.at(-1) ?? 0;
+        return sums[i] ?? 0;
+    }
+
+    /** Rows consumed by every loaded line. */
+    get totalRows(): number {
+        const { firstAvailableLine, totalLines } = this.#cache;
+        if (!this.#inputs.wrap()) return totalLines - firstAvailableLine;
+        return this.#prefixSums.at(-1) ?? Math.max(0, totalLines - firstAvailableLine);
+    }
+
+    /** Offset from firstAvailableLine of the line whose rows cover `yRows`. */
+    offsetAt(yRows: number): number {
+        if (!this.#inputs.wrap()) return Math.floor(yRows);
+        const sums = this.#prefixSums;
+        if (sums.length === 0) return 0;
+        if (yRows <= (sums[0] ?? 0)) return 0;
+        const last = sums.length - 1;
+        if (yRows >= (sums[last] ?? Number.POSITIVE_INFINITY)) return last;
+        let lo = 0;
+        let hi = last;
+        while (lo < hi) {
+            const mid = (lo + hi + 1) >> 1;
+            if ((sums[mid] ?? Number.POSITIVE_INFINITY) <= yRows) lo = mid;
+            else hi = mid - 1;
+        }
+        return lo;
+    }
+
+    /** Offset of the first line starting at or past `limitRows`, scanning on from `yRows`. */
+    offsetEnd(yRows: number, limitRows: number): number {
+        if (!this.#inputs.wrap()) return Math.ceil(limitRows);
+        const sums = this.#prefixSums;
+        const count = sums.length - 1;
+        let end = this.offsetAt(yRows);
+        while (end < count && (sums[end] ?? Number.POSITIVE_INFINITY) < limitRows) end++;
+        return Math.max(0, end);
+    }
+
+    #measure(num: number, text: string | undefined, cols: number): boolean {
+        const rows = text && cols > 1 ? Math.max(1, Math.ceil(visibleColumns(text) / cols)) : 1;
+        if (this.#rowCounts.get(num) === rows) return false;
+        this.#rowCounts.set(num, rows);
+        return true;
+    }
+}

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

@@ -8,6 +8,9 @@ import {
     formatClockTime,
     formatDayMonth,
     formatDuration,
+    formatDurationExact,
+    parseDuration,
+    formatRelativeCompact,
     formatRelativeTime,
     formatRelativeTimeWithAbsolute,
     formatTimeHM,
@@ -122,11 +125,84 @@ describe("formatRelativeTimeWithAbsolute", () => {
 });
 
 describe("formatRelativeTime", () => {
+    const now = new Date("2024-01-10T12:00:00Z");
+    const at = (seconds: number): Date => new Date(now.getTime() + seconds * 1000);
+
     it("advances as the supplied now advances", () => {
         const date = new Date("2024-01-01T12:00:00Z");
         expect(formatRelativeTime(date, new Date("2024-01-01T14:00:00Z"))).toBe("2 hours ago");
         expect(formatRelativeTime(date, new Date("2024-01-01T15:00:00Z"))).toBe("3 hours ago");
     });
+
+    it("always shows a number by default", () => {
+        expect(formatRelativeTime(at(0), now)).toBe("in 0 seconds");
+        expect(formatRelativeTime(at(-86_400), now)).toBe("1 day ago");
+        expect(formatRelativeTime(at(86_400), now)).toBe("in 1 day");
+    });
+
+    it.each([
+        [0, "now"],
+        [-16, "16 seconds ago"],
+        [16, "in 16 seconds"],
+        [-60, "1 minute ago"],
+        [-5 * 60, "5 minutes ago"],
+        [-3600, "1 hour ago"],
+        [2 * 3600, "in 2 hours"],
+        [-86_400, "yesterday"],
+        [86_400, "tomorrow"],
+        [-3 * 86_400, "3 days ago"],
+    ])("numeric auto: %is from now reads %s", (seconds, expected) => {
+        expect(formatRelativeTime(at(seconds), now, { numeric: "auto" })).toBe(expected);
+    });
+
+    it("accepts a timestamp, an ISO string or a Date", () => {
+        const date = at(-120);
+        expect(formatRelativeTime(date.getTime(), now)).toBe("2 minutes ago");
+        expect(formatRelativeTime(date.toISOString(), now)).toBe("2 minutes ago");
+        expect(formatRelativeTime(date, now)).toBe("2 minutes ago");
+    });
+
+    it("throws on an invalid date", () => {
+        expect(() => formatRelativeTime("not a date", now)).toThrow(RangeError);
+        expect(() => formatRelativeTime("not a date", now, { numeric: "auto" })).toThrow(
+            RangeError,
+        );
+    });
+});
+
+describe("formatRelativeCompact", () => {
+    const now = new Date("2024-01-10T12:00:00Z");
+    const ago = (seconds: number): number => now.getTime() - seconds * 1000;
+
+    it.each([
+        [0, "0s"],
+        [16.9, "16s"],
+        [59, "59s"],
+        [60, "1m"],
+        [3 * 60 + 59, "3m"],
+        [59 * 60, "59m"],
+        [3600, "1h"],
+        [23 * 3600 + 3599, "23h"],
+        [86_400, "1d"],
+        [45 * 86_400, "45d"],
+        [400 * 86_400, "400d"],
+    ])("%is ago reads %s", (seconds, expected) => {
+        expect(formatRelativeCompact(ago(seconds), now)).toBe(expected);
+    });
+
+    it("clamps a future date to 0s", () => {
+        expect(formatRelativeCompact(ago(-90), now)).toBe("0s");
+    });
+
+    it("accepts an ISO string or a Date", () => {
+        expect(formatRelativeCompact(new Date(ago(180)).toISOString(), now)).toBe("3m");
+        expect(formatRelativeCompact(new Date(ago(180)), now)).toBe("3m");
+    });
+
+    it("does not guard an invalid date", () => {
+        // Same as the station helper it replaces; callers pass server timestamps.
+        expect(formatRelativeCompact("not a date", now)).toBe("NaNd");
+    });
 });
 
 describe("formatClockTime", () => {
@@ -156,3 +232,49 @@ describe("formatDayMonth", () => {
         expect(r).not.toContain("2026");
     });
 });
+
+describe("parseDuration", () => {
+    it("reads the placeholder's own format", () => {
+        expect(parseDuration("5m 30s")).toBe(330_000);
+    });
+
+    it("reads compact, fractional and sub-second forms", () => {
+        expect(parseDuration("1h30m")).toBe(5_400_000);
+        expect(parseDuration("1.5h")).toBe(5_400_000);
+        expect(parseDuration("250ms")).toBe(250);
+        expect(parseDuration("2d")).toBe(172_800_000);
+    });
+
+    it("reads what the ms package did", () => {
+        expect(parseDuration("500")).toBe(500);
+        expect(parseDuration("1w")).toBe(604_800_000);
+        expect(parseDuration("1y")).toBe(31_557_600_000);
+        expect(parseDuration("2 hours")).toBe(7_200_000);
+        expect(parseDuration("30 sec")).toBe(30_000);
+        expect(parseDuration("5 minutes")).toBe(300_000);
+        expect(parseDuration("5M")).toBe(300_000);
+        expect(parseDuration(".5h")).toBe(1_800_000);
+        expect(parseDuration(" 1 Hour 30 mins ")).toBe(5_400_000);
+    });
+
+    it("rejects text that isn't number+unit throughout", () => {
+        expect(parseDuration("")).toBeNull();
+        expect(parseDuration("5x")).toBeNull();
+        expect(parseDuration("5m abc")).toBeNull();
+        expect(parseDuration("5 30s")).toBeNull();
+        expect(parseDuration("1.5.5")).toBeNull();
+        expect(parseDuration("9".repeat(101))).toBeNull();
+    });
+});
+
+describe("formatDurationExact", () => {
+    it("keeps every non-zero unit instead of rounding", () => {
+        expect(formatDurationExact(330_000)).toBe("5m 30s");
+        expect(formatDurationExact(3_930_000)).toBe("1h 5m 30s");
+        expect(formatDurationExact(0)).toBe("0ms");
+    });
+
+    it("round-trips through parseDuration", () => {
+        expect(parseDuration(formatDurationExact(90_061_001))).toBe(90_061_001);
+    });
+});

package/src/lib/utils/format.ts

@@ -13,18 +13,48 @@ const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][]
     [Number.POSITIVE_INFINITY, "years"],
 ];
 
-const relativeTime = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
+const relativeTime = {
+    always: new Intl.RelativeTimeFormat(undefined, { numeric: "always" }),
+    auto: new Intl.RelativeTimeFormat(undefined, { numeric: "auto" }),
+};
+
+export interface RelativeTimeOptions {
+    /** `"auto"` words the near units: "now", "yesterday", "tomorrow", "last week". Default `"always"`. */
+    numeric?: Intl.RelativeTimeFormatNumeric;
+}
 
 /** "N units ago" / "in N units" for `date` relative to `now`. */
-export function formatRelativeTime(date: string | Date, now: Date = new Date()): string {
+export function formatRelativeTime(
+    date: string | number | Date,
+    now: Date = new Date(),
+    { numeric = "always" }: RelativeTimeOptions = {},
+): string {
+    const format = relativeTime[numeric];
     let delta = (new Date(date).getTime() - now.getTime()) / 1000;
     for (const [amount, unit] of RELATIVE_DIVISIONS) {
         if (Math.abs(delta) < amount) {
-            return relativeTime.format(Math.round(delta), unit);
+            return format.format(Math.round(delta), unit);
         }
         delta /= amount;
     }
-    return relativeTime.format(Math.round(delta), "years");
+    return format.format(Math.round(delta), "years");
+}
+
+/**
+ * Compact age of a past `date` for dense rows and live labels: "45s", "5m",
+ * "3h", "2d". Each unit floors; a future date reads "0s".
+ */
+export function formatRelativeCompact(
+    date: string | number | Date,
+    now: Date = new Date(),
+): string {
+    const seconds = Math.max(0, Math.floor((now.getTime() - new Date(date).getTime()) / 1000));
+    if (seconds < 60) return `${String(seconds)}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${String(minutes)}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${String(hours)}h`;
+    return `${String(Math.floor(hours / 24))}d`;
 }
 
 /** A locale date/time formatter for one fixed option set, built once. */
@@ -108,3 +138,66 @@ export function formatDuration(ms: number): string {
     const remM = m % 60;
     return remM > 0 ? String(h) + "h " + String(remM) + "m" : String(h) + "h";
 }
+
+// Largest first, so formatDurationExact can peel units off greedily.
+const DURATION_UNITS: [unit: string, ms: number][] = [
+    ["d", 86_400_000],
+    ["h", 3_600_000],
+    ["m", 60_000],
+    ["s", 1000],
+    ["ms", 1],
+];
+
+// Every unit name parseDuration takes, in ms. The `ms` package's set.
+const UNIT_ALIASES: [ms: number, names: string[]][] = [
+    [1, ["ms", "msec", "msecs", "millisecond", "milliseconds"]],
+    [1000, ["s", "sec", "secs", "second", "seconds"]],
+    [60_000, ["m", "min", "mins", "minute", "minutes"]],
+    [3_600_000, ["h", "hr", "hrs", "hour", "hours"]],
+    [86_400_000, ["d", "day", "days"]],
+    [604_800_000, ["w", "week", "weeks"]],
+    [31_557_600_000, ["y", "yr", "yrs", "year", "years"]],
+];
+const UNIT_MS = new Map(UNIT_ALIASES.flatMap(([size, names]) => names.map((n) => [n, size])));
+
+/**
+ * parseDuration reads a duration into milliseconds. It takes what the `ms`
+ * package does ("500" as milliseconds, ".5h", "2 hours", "30 sec", "1w", "1y",
+ * any case) plus compound forms: "5m 30s", "1h30m". Returns null when any part
+ * isn't a number with a unit (only a lone number may go without one).
+ */
+export function parseDuration(text: string): number | null {
+    const s = text.trim().toLowerCase();
+    // Bounded like `ms`, which also keeps the number pattern's backtracking cheap.
+    if (!s || s.length > 100) return null;
+    const segment = /(-?\d*\.?\d+)\s*([a-z]*)\s*/y;
+    let total = 0;
+    let segments = 0;
+    let bare = false;
+    while (segment.lastIndex < s.length) {
+        const match = segment.exec(s);
+        if (!match) return null;
+        const [, amount = "", unit = ""] = match;
+        const size = unit ? UNIT_MS.get(unit) : 1;
+        if (size === undefined) return null;
+        bare ||= !unit;
+        total += Number(amount) * size;
+        segments++;
+    }
+    if (bare && segments > 1) return null;
+    return Math.round(total);
+}
+
+/** formatDurationExact renders milliseconds as "1h 5m 30s", keeping every non-zero unit. */
+export function formatDurationExact(ms: number): string {
+    const parts: string[] = [];
+    let rest = Math.round(ms);
+    for (const [unit, size] of DURATION_UNITS) {
+        const amount = Math.floor(rest / size);
+        if (amount > 0) {
+            parts.push(String(amount) + unit);
+            rest -= amount * size;
+        }
+    }
+    return parts.length > 0 ? parts.join(" ") : "0ms";
+}

package/src/lib/utils/toast.svelte.test.ts

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "./toast.svelte";
+
+beforeEach(() => {
+    vi.useFakeTimers();
+});
+
+afterEach(() => {
+    for (const t of toast.items) toast.remove(t.id);
+    vi.useRealTimers();
+});
+
+describe("toast", () => {
+    it("expires after its duration", () => {
+        toast.success("Saved", { duration: 1000 });
+        expect(toast.items.map((t) => [t.type, t.message])).toEqual([["success", "Saved"]]);
+        vi.advanceTimersByTime(999);
+        expect(toast.items).toHaveLength(1);
+        vi.advanceTimersByTime(1);
+        expect(toast.items).toHaveLength(0);
+    });
+
+    it("folds a repeat into the shown toast and restarts its clock", () => {
+        const first = toast.error("Run failed", { duration: 1000 });
+        vi.advanceTimersByTime(800);
+        expect(toast.error("Run failed", { duration: 1000 })).toBe(first);
+        vi.advanceTimersByTime(800);
+        expect(toast.items).toHaveLength(1);
+        vi.advanceTimersByTime(200);
+        expect(toast.items).toHaveLength(0);
+    });
+
+    it("keeps a zero-duration toast until it is removed", () => {
+        const onClick = vi.fn();
+        const id = toast.info("Deleted run", { duration: 0, action: { label: "Undo", onClick } });
+        toast.warning("Disk almost full");
+        vi.advanceTimersByTime(60_000);
+        expect(toast.items.map((t) => t.id)).toEqual([id]);
+        expect(toast.items[0]?.action?.label).toBe("Undo");
+        toast.remove(id);
+        expect(toast.items).toHaveLength(0);
+    });
+});

package/src/lib/utils/typing-target.ts

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+/** True when a keyboard event came from a field the user is typing into. */
+export function isTypingTarget(target: EventTarget | null): boolean {
+    return (
+        target instanceof HTMLElement &&
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
+    );
+}