@runwisp/ui 1.5.1 → 1.7.1

package/src/lib/components/dashboard/status-config.ts

@@ -23,7 +23,14 @@ interface RunStatusConfig {
     color: string;
     bg: string;
     dot: string;
+    /** `dot` without the running pulse, for static markers (spines, filter swatches). */
+    solidDot: string;
     badge: string;
+    /**
+     * Accent colour for statuses that mean "something to triage", or undefined.
+     * A deliberate stop or a skip is not an alarm, and success least of all.
+     */
+    alarm: string | undefined;
     /** One-sentence explanation of what this status means, for tooltips. */
     description: string;
 }
@@ -34,19 +41,25 @@ const DANGER = {
     color: "text-danger-surface",
     bg: "bg-danger-soft",
     dot: "bg-danger-surface",
+    solidDot: "bg-danger-surface",
     badge: "bg-danger-soft text-danger-soft-text",
+    alarm: "var(--color-danger-surface)",
 };
 const WARNING = {
     color: "text-warning-surface",
     bg: "bg-warning-soft",
     dot: "bg-warning-surface",
+    solidDot: "bg-warning-surface",
     badge: "bg-warning-soft text-warning-soft-text",
+    alarm: "var(--color-warning-surface)",
 };
 const NEUTRAL = {
     color: "text-on-surface-muted",
     bg: "bg-surface-sunken",
     dot: "bg-on-surface-faint",
+    solidDot: "bg-on-surface-faint",
     badge: "bg-surface-sunken text-on-surface",
+    alarm: undefined,
 };
 
 export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
@@ -55,7 +68,9 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         color: "text-info-surface",
         bg: "bg-info-soft",
         dot: "bg-info-surface animate-pulse",
+        solidDot: "bg-info-surface",
         badge: "bg-info-soft text-info-soft-text",
+        alarm: undefined,
         description: "This run is executing right now.",
     },
     succeeded: {
@@ -63,7 +78,9 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         color: "text-success-surface",
         bg: "bg-success-soft",
         dot: "bg-success-surface",
+        solidDot: "bg-success-surface",
         badge: "bg-success-soft text-success-soft-text",
+        alarm: undefined,
         description: "The run finished with exit code 0 - everything OK.",
     },
     failed: {
@@ -79,6 +96,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
     },
     stopped: {
         ...WARNING,
+        alarm: undefined,
         icon: CircleStop,
         description: "A human or an external script manually stopped this run before it finished.",
     },

package/src/lib/components/dashboard/types.ts

@@ -7,3 +7,9 @@ export interface DaemonStats {
     activeTasks: number;
     successRate: number;
 }
+
+/** A single output-search hit surfaced under its run in the history rail. */
+export interface RunOutputMatch {
+    line: number;
+    text: string;
+}

package/src/lib/index.ts

@@ -24,7 +24,7 @@ export { default as FormField } from "./components/FormField.svelte";
 export { default as Input } from "./components/Input.svelte";
 export { default as Radio } from "./components/Radio.svelte";
 export { default as RadioGroup } from "./components/RadioGroup.svelte";
-export { default as Select } from "./components/Select.svelte";
+export { default as Select, type SelectOption } from "./components/Select.svelte";
 export { default as Textarea } from "./components/Textarea.svelte";
 export { default as TimezoneSelect } from "./components/TimezoneSelect.svelte";
 export { default as Toggle } from "./components/Toggle.svelte";
@@ -86,14 +86,16 @@ export type { FetchLogsFn, LogEvent, LogSlice } from "./log-console/types.js";
 export { default as RunDetailPanel } from "./components/dashboard/RunDetailPanel.svelte";
 export { default as RunsList } from "./components/dashboard/RunsList.svelte";
 export { default as RunFilterPopover } from "./components/dashboard/RunFilterPopover.svelte";
-export type { RunOutputMatch } from "./components/dashboard/RunsList.svelte";
+export type { RunOutputMatch } from "./components/dashboard/types.js";
 export {
     activeFilterCount,
     emptyRunFilters,
     FAILURE_STATUS_TOKEN,
     humanizeStatus,
     exitCodeRange,
+    runFilterParams,
     type ExitCodeRange,
+    type RunFilterParams,
     type RunsListFilters,
 } from "./components/dashboard/run-filters.js";
 export { RUN_STATUS_CONFIG } from "./components/dashboard/status-config.js";
@@ -102,6 +104,10 @@ export {
     runPhaseOrder,
     formatTriggeredByLabel,
     instanceSuffix,
+    runUsageLabel,
+    runUsageScale,
+    usageLevel,
+    type RunUsageScale,
 } from "./components/dashboard/run-helpers.js";
 export { humanizeCron } from "./components/dashboard/cron-format.js";
 export type { DaemonStats } from "./components/dashboard/types.js";
@@ -110,14 +116,19 @@ export { toast } from "./utils/toast.svelte.js";
 export { extractErrorMessage } from "./utils/error.js";
 export {
     formatBytes,
+    formatDayMonth,
+    formatRelativeCompact,
     formatRelativeTime,
     formatRelativeTimeWithAbsolute,
+    type RelativeTimeOptions,
     formatDuration,
     formatFullDateTime,
 } from "./utils/format.js";
 export { formatShortId } from "./utils/id.js";
 export { debounce } from "./utils/debounce.js";
+export { isTypingTarget } from "./utils/typing-target.js";
 export { TickingNow } from "./utils/ticking-now.svelte.js";
 export { CopyFeedback, copyText } from "./utils/clipboard.svelte.js";
 export { RunMotion } from "./utils/run-motion.js";
 export { arrival, leave, shift } from "./actions/row-motion.js";
+export { foldToFit, foldUntilFits, type FoldToFitOptions } from "./actions/fold-to-fit.js";

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

@@ -0,0 +1,12 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { ansiLineToHtml } from "./ansi.js";
+
+    let { text }: { text: string } = $props();
+</script>
+
+<!-- ansiLineToHtml sanitises its input, which is what makes @html safe here. -->
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<span class="whitespace-pre">{@html ansiLineToHtml(text)}</span>

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.test.ts

@@ -0,0 +1,135 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { LogCache } from "./LogCache.svelte";
+
+describe("LogCache", () => {
+    it("merges a slice, skipping bad keys and reporting what changed", () => {
+        const cache = new LogCache();
+        expect(cache.mergeSlice({ 2: "two", 5: "five", [-1]: "neg" })).toEqual({
+            touched: true,
+            min: 2,
+            max: 5,
+        });
+        expect(cache.size).toBe(2);
+        expect(cache.mergeSlice({ 2: "two" }).touched).toBe(false);
+    });
+
+    it("keeps the widest line width even after that line is gone", () => {
+        const cache = new LogCache();
+        cache.mergeSlice({ 0: "x".repeat(40) });
+        cache.mergeSlice({ 0: "short" });
+        expect(cache.maxLineColumns).toBe(40);
+    });
+
+    it("only grows totals and the first available line from events", () => {
+        const cache = new LogCache();
+        cache.applyEvent({
+            lines: {},
+            sizeLines: 10,
+            sizeBytes: 300,
+            finished: false,
+            firstAvailableLine: 4,
+        });
+        cache.applyEvent({
+            lines: {},
+            sizeLines: 8,
+            sizeBytes: 100,
+            finished: false,
+            firstAvailableLine: 2,
+        });
+        expect([cache.totalLines, cache.totalBytes, cache.firstAvailableLine]).toEqual([
+            10, 300, 4,
+        ]);
+    });
+
+    it("records frame history only for lines that have some", () => {
+        const cache = new LogCache();
+        cache.applyEvent({
+            lines: { 3: "100%" },
+            sizeLines: 4,
+            finished: false,
+            frameCounts: { 3: 12, 1: 0 },
+        });
+        expect([...cache.frameCounts]).toEqual([[3, 12]]);
+    });
+
+    it("orders the live overlay stdout, stderr, then other streams by name", () => {
+        const cache = new LogCache();
+        cache.applyRegion({ stream: "zeta", epoch: 1, rows: ["z"] });
+        cache.applyRegion({ stream: "stderr", epoch: 1, rows: ["e"] });
+        cache.applyRegion({ stream: "alpha", epoch: 1, rows: ["a"] });
+        cache.applyRegion({ stream: "stdout", epoch: 1, rows: ["o1", "o2"] });
+        expect(cache.overlayRows).toEqual(["o1", "o2", "e", "a", "z"]);
+
+        cache.applyRegion({ stream: "zeta", epoch: 2, rows: [] });
+        expect(cache.overlayRows).toEqual(["o1", "o2", "e", "a"]);
+    });
+
+    it("keeps region frames out of the committed lines and drops them once finished", () => {
+        const cache = new LogCache();
+        const res = cache.applyEvent({
+            lines: {},
+            sizeLines: 0,
+            finished: false,
+            region: { stream: "stdout", epoch: 1, rows: ["[##..] 50%"] },
+        });
+        expect(res.touched).toBe(false);
+        expect(cache.size).toBe(0);
+        expect(cache.overlayRows).toEqual(["[##..] 50%"]);
+
+        cache.applyEvent({ lines: { 0: "done" }, sizeLines: 1, finished: true });
+        expect(cache.overlayRows).toEqual([]);
+        expect(cache.finished).toBe(true);
+    });
+
+    it("prunes lines far from the viewport once the cache is full", () => {
+        const cache = new LogCache();
+        const slice: Record<number, string> = {};
+        for (let n = 0; n < cache.MAX_CACHE_SIZE; n++) slice[n] = "l";
+        cache.mergeSlice(slice);
+
+        cache.prune(40_000, 40_100);
+        expect(cache.lines.has(40_050)).toBe(true);
+        expect(cache.lines.has(0)).toBe(false);
+        expect(cache.size).toBeLessThan(cache.MAX_CACHE_SIZE);
+    });
+
+    it("leaves a cache under the limit alone", () => {
+        const cache = new LogCache();
+        cache.mergeSlice({ 0: "a", 99_999: "b" });
+        cache.prune(50_000, 50_010);
+        expect(cache.size).toBe(2);
+    });
+
+    it("judges a range complete within what the server still holds", () => {
+        const cache = new LogCache();
+        cache.applyEvent({
+            lines: { 5: "a", 6: "b" },
+            sizeLines: 7,
+            finished: false,
+            firstAvailableLine: 5,
+        });
+        expect(cache.isRangeComplete(0, 100)).toBe(true);
+        cache.applyEvent({ lines: {}, sizeLines: 8, finished: false });
+        expect(cache.isRangeComplete(0, 100)).toBe(false);
+    });
+
+    it("resets to empty", () => {
+        const cache = new LogCache();
+        cache.applyEvent({
+            lines: { 0: "a" },
+            sizeLines: 1,
+            finished: true,
+            firstAvailableLine: 1,
+        });
+        cache.reset();
+        expect([cache.size, cache.totalLines, cache.finished, cache.firstAvailableLine]).toEqual([
+            0,
+            0,
+            false,
+            0,
+        ]);
+    });
+});

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/LogFetcher.svelte.test.ts

@@ -0,0 +1,159 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { LogCache } from "./LogCache.svelte";
+import { LogFetcher } from "./LogFetcher.svelte";
+import type { LogEvent, LogSlice } from "./types";
+
+const CHUNK = 4096;
+
+/** A cache that knows the log is `total` lines long but holds none of them. */
+function emptyCache(total: number): LogCache {
+    const cache = new LogCache();
+    cache.applyEvent({ lines: {}, sizeLines: total, finished: false });
+    return cache;
+}
+
+/** A fetch whose calls stay pending until the test settles them. */
+function deferredFetch() {
+    const pending: { from: number; to: number; settle: (v: LogSlice | LogEvent) => void }[] = [];
+    const fn = vi.fn(
+        (from: number, to: number) =>
+            new Promise<LogSlice | LogEvent>((resolve) => {
+                pending.push({ from, to, settle: resolve });
+            }),
+    );
+    return { fn, pending };
+}
+
+const live: LogFetcher[] = [];
+
+function start(...args: ConstructorParameters<typeof LogFetcher>): LogFetcher {
+    const fetcher = new LogFetcher(...args);
+    live.push(fetcher);
+    return fetcher;
+}
+
+beforeEach(() => {
+    vi.useFakeTimers();
+});
+
+afterEach(() => {
+    for (const fetcher of live.splice(0)) fetcher.destroy();
+    vi.useRealTimers();
+});
+
+describe("LogFetcher", () => {
+    it("fetches a missing chunk once, merges it, and reports the loaded range", async () => {
+        const cache = emptyCache(10);
+        const onLoaded = vi.fn();
+        const fetchLogs = vi.fn(() => ({ 0: "a", 9: "j" }));
+        const fetcher = start(cache, fetchLogs, onLoaded);
+
+        fetcher.enqueue(0, 9);
+        fetcher.enqueue(2, 5); // same chunk, already queued
+        await vi.runAllTimersAsync();
+
+        expect(fetchLogs).toHaveBeenCalledExactlyOnceWith(0, 9);
+        expect(cache.lines.get(9)).toBe("j");
+        expect(onLoaded).toHaveBeenCalledWith(0, 9);
+        expect(fetcher.isFetching).toBe(false);
+    });
+
+    it("applies an event response, not just a slice", async () => {
+        const cache = emptyCache(1);
+        const fetcher = start(cache, () => ({ lines: { 0: "x" }, sizeLines: 3, finished: true }));
+        fetcher.enqueue(0, 0);
+        await vi.runAllTimersAsync();
+        expect([cache.totalLines, cache.finished]).toEqual([3, true]);
+    });
+
+    it("skips a range the cache already holds", async () => {
+        const cache = emptyCache(2);
+        cache.mergeSlice({ 0: "a", 1: "b" });
+        const fetchLogs = vi.fn(() => ({}));
+        const fetcher = start(cache, fetchLogs);
+        fetcher.enqueue(0, 1);
+        await vi.runAllTimersAsync();
+        expect(fetchLogs).not.toHaveBeenCalled();
+    });
+
+    it("never asks for lines rotated away", async () => {
+        const cache = emptyCache(CHUNK * 2);
+        cache.applyEvent({
+            lines: {},
+            sizeLines: CHUNK * 2,
+            finished: false,
+            firstAvailableLine: CHUNK + 5,
+        });
+        const fetchLogs = vi.fn(() => ({}));
+        const fetcher = start(cache, fetchLogs);
+        fetcher.enqueue(0, CHUNK * 2 - 1);
+        await vi.runAllTimersAsync();
+        expect(fetchLogs.mock.calls).toEqual([[CHUNK, CHUNK * 2 - 1]]);
+    });
+
+    it("keeps at most two chunks in flight", async () => {
+        const { fn, pending } = deferredFetch();
+        const fetcher = start(emptyCache(CHUNK * 3), fn);
+
+        fetcher.enqueue(0, 0);
+        await vi.advanceTimersByTimeAsync(fetcher.MIN_REQUEST_INTERVAL_MS);
+        fetcher.enqueue(CHUNK, CHUNK * 3 - 1);
+        await vi.advanceTimersByTimeAsync(fetcher.MIN_REQUEST_INTERVAL_MS * 5);
+        expect(fn).toHaveBeenCalledTimes(2);
+        expect(fetcher.isFetching).toBe(true);
+
+        pending[0]?.settle({});
+        await vi.advanceTimersByTimeAsync(fetcher.MIN_REQUEST_INTERVAL_MS * 5);
+        expect(fn).toHaveBeenCalledTimes(3);
+    });
+
+    it("drops queued chunks the viewport has left behind", async () => {
+        const fetchLogs = vi.fn((_from: number, _to: number) => ({}));
+        const fetcher = start(emptyCache(CHUNK * 10), fetchLogs);
+        fetcher.enqueue(0, CHUNK * 10 - 1);
+        fetcher.pruneQueue(CHUNK * 9, CHUNK * 10 - 1);
+        await vi.runAllTimersAsync();
+        expect(fetchLogs.mock.calls.map(([from]) => from / CHUNK)).toEqual([7, 8, 9]);
+    });
+
+    it("recovers from a failed fetch so the chunk can be asked for again", async () => {
+        const fetchLogs = vi
+            .fn()
+            .mockRejectedValueOnce(new Error("503"))
+            .mockResolvedValue({ 0: "a" });
+        const cache = emptyCache(1);
+        const fetcher = start(cache, fetchLogs);
+        fetcher.enqueue(0, 0);
+        await vi.runAllTimersAsync();
+        expect(fetcher.isFetching).toBe(false);
+        fetcher.enqueue(0, 0);
+        await vi.runAllTimersAsync();
+        expect(cache.lines.get(0)).toBe("a");
+    });
+
+    it("requests only the incomplete chunks in view, up to the cap", async () => {
+        const cache = emptyCache(CHUNK * 4);
+        const filled: Record<number, string> = {};
+        for (let n = CHUNK; n < CHUNK * 2; n++) filled[n] = "x";
+        cache.mergeSlice(filled);
+        const fetchLogs = vi.fn((_from: number, _to: number) => ({}));
+        const fetcher = start(cache, fetchLogs);
+
+        fetcher.maybeRequestMissing(0, CHUNK * 4 - 1, 3);
+        await vi.runAllTimersAsync();
+        expect(fetchLogs.mock.calls.map(([from]) => from / CHUNK)).toEqual([0, 2]);
+    });
+
+    it("does nothing without a fetch function or after destroy", async () => {
+        const fetchLogs = vi.fn(() => ({}));
+        new LogFetcher(emptyCache(5), undefined).enqueue(0, 4);
+        const fetcher = start(emptyCache(5), fetchLogs);
+        fetcher.enqueue(0, 4);
+        fetcher.destroy();
+        await vi.runAllTimersAsync();
+        expect(fetchLogs).not.toHaveBeenCalled();
+    });
+});

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