@runwisp/ui 1.5.0 → 1.7.0

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

@@ -0,0 +1,57 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import AnsiLine from "./AnsiLine.svelte";
+    import { FRAME_BLOCK_PAD, FRAME_GAP, type FrameHistory } from "./frame-history.svelte.js";
+    import { LINE_HEIGHT } from "./wrap-layout.svelte.js";
+
+    let {
+        history,
+        top,
+        gutterWidth,
+    }: {
+        history: FrameHistory;
+        /** Distance from the top of the virtual surface, px. */
+        top: number;
+        gutterWidth: number;
+    } = $props();
+</script>
+
+<div
+    class="frame-history absolute right-0 left-0 overflow-y-auto border-y border-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)]"
+    style="top: {top}px; height: {history.blockHeight}px;"
+>
+    <div style="padding: {FRAME_BLOCK_PAD}px 0;">
+        {#if history.frames}
+            {#each history.frames as frame, fi (fi)}
+                <div style="margin-top: {fi > 0 ? FRAME_GAP : 0}px;">
+                    <div
+                        class="px-3 text-xs text-[var(--rw-con-dim)] select-none"
+                        style="height: {LINE_HEIGHT}px; line-height: {LINE_HEIGHT}px;"
+                    >
+                        Frame {fi + 1} of {history.frames.length}
+                    </div>
+                    {#each frame as row, ri (ri)}
+                        <div class="flex items-center" style="height: {LINE_HEIGHT}px;">
+                            <div
+                                class="flex-shrink-0 pr-3 text-right text-[var(--rw-con-gutter)] select-none"
+                                style="width: {gutterWidth}px;"
+                            ></div>
+                            <div class="flex-1 pr-4 text-[var(--rw-con-text)]">
+                                <AnsiLine text={row} />
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            {/each}
+        {:else}
+            <div
+                class="px-3 text-xs text-[var(--rw-con-dim)] italic"
+                style="line-height: {LINE_HEIGHT}px; padding-left: {gutterWidth}px;"
+            >
+                {history.failed ? "Failed to load frame history" : "Loading frames…"}
+            </div>
+        {/if}
+    </div>
+</div>

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

@@ -14,7 +14,7 @@ import { visibleColumns } from "./ansi.js";
  */
 // Streams pinned to the front of the overlay, in render order. The companion
 // Set backs the membership test in `overlayRows`. Both are module-level,
-// immutable, and non-reactive — a fixed lookup table, not component state.
+// immutable, and non-reactive, a fixed lookup table, not component state.
 const PREFERRED_STREAM_ORDER = ["stdout", "stderr"] as const;
 const PREFERRED_STREAMS: ReadonlySet<string> = new Set(PREFERRED_STREAM_ORDER);
 

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

@@ -0,0 +1,88 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { formatBytes } from "../utils/format.js";
+
+    let {
+        followTail,
+        streaming,
+        finished,
+        fetching,
+        totalLines,
+        totalBytes,
+        onFollow,
+    }: {
+        followTail: boolean;
+        streaming: boolean;
+        finished: boolean;
+        fetching: boolean;
+        totalLines: number;
+        totalBytes: number;
+        onFollow: () => void;
+    } = $props();
+</script>
+
+{#if !followTail && totalLines > 0}
+    <button
+        class="absolute right-4 bottom-12 z-10 flex items-center gap-2 rounded-[3px] border
+               border-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)]
+               px-3 py-1.5 text-xs
+               text-[var(--rw-con-text)]
+                                  hover:border-term-teal hover:text-term-teal active:translate-y-[1px]"
+        onclick={onFollow}
+    >
+        <svg
+            class="h-3.5 w-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
+            <path d="M12 5v14M19 12l-7 7-7-7" />
+        </svg>
+        Scroll to bottom
+    </button>
+{/if}
+
+<div
+    class="flex flex-shrink-0 items-center justify-between border-t border-[var(--rw-con-gutter)]
+           bg-[var(--rw-con-panel)] px-3.5 py-2 text-[11px] tracking-wide text-[var(--rw-con-dim)]"
+>
+    <div class="flex items-center gap-3">
+        {#if streaming}
+            <div class="flex items-center gap-1.5 text-aurora-400">
+                <div class="h-1.5 w-1.5 animate-pulse rounded-full bg-aurora-400"></div>
+                Streaming
+            </div>
+        {:else if finished}
+            <span>Stream ended</span>
+        {/if}
+        {#if fetching}
+            <span>Fetching...</span>
+        {/if}
+    </div>
+    <div class="flex items-center gap-4">
+        <span>{totalLines.toLocaleString()} lines</span>
+        {#if totalBytes > 0}
+            <span>{formatBytes(totalBytes)}</span>
+        {/if}
+        {#if followTail}
+            <span class="inline-flex items-center gap-1.5 text-term-ok">
+                <svg
+                    class="h-3 w-3"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <line x1="12" y1="5" x2="12" y2="19" />
+                    <polyline points="6 13 12 19 18 13" />
+                </svg>
+                Auto-scroll
+            </span>
+        {/if}
+    </div>
+</div>

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

@@ -45,7 +45,7 @@ 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
+// 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;

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

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { FrameHistory } from "./frame-history.svelte.js";
+import { LINE_HEIGHT } from "./wrap-layout.svelte.js";
+
+describe("FrameHistory", () => {
+    it("takes no space while closed", () => {
+        const history = new FrameHistory(() => undefined);
+        expect(history.blockHeight).toBe(0);
+    });
+
+    it("reserves a placeholder while frames load, then sizes to them", async () => {
+        const history = new FrameHistory(() => () => Promise.resolve([["a", "b"], ["c"]]));
+        const done = history.toggle(4);
+        expect(history.line).toBe(4);
+        expect(history.blockHeight).toBe(LINE_HEIGHT * 2);
+        await done;
+        // padding 16 + (label + 2 rows) + (label + 1 row) + one 6px gap.
+        expect(history.blockHeight).toBe(16 + LINE_HEIGHT * 5 + 6);
+    });
+
+    it("collapses when the open line is toggled again", async () => {
+        const history = new FrameHistory(() => () => Promise.resolve([["a"]]));
+        await history.toggle(1);
+        await history.toggle(1);
+        expect(history.line).toBeNull();
+        expect(history.frames).toBeNull();
+    });
+
+    it("flags a failed fetch and ignores a superseded one", async () => {
+        const failing = new FrameHistory(() => () => Promise.reject(new Error("boom")));
+        await failing.toggle(2);
+        expect(failing.failed).toBe(true);
+
+        let release: (frames: string[][]) => void = () => {};
+        const slow = new FrameHistory(
+            () => () => new Promise<string[][]>((resolve) => (release = resolve)),
+        );
+        const first = slow.toggle(1);
+        slow.collapse();
+        release([["late"]]);
+        await first;
+        expect(slow.frames).toBeNull();
+    });
+});

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;
+    }
+}