@runwisp/ui 1.4.0 → 1.5.0

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

@@ -3,8 +3,6 @@
 
 import { TRIGGERS, type Trigger } from "@runwisp/common";
 
-export type RunsListSortDirection = "asc" | "desc" | "";
-
 /**
  * The single filter shape shared by the runs list, the filter popover, the
  * SSE-merge source, and the bulk selector. Every field beyond `search` and
@@ -19,7 +17,7 @@ export type RunsListSortDirection = "asc" | "desc" | "";
 export interface RunsListFilters {
     search: string;
     statuses: string[];
-    sortDirection: RunsListSortDirection;
+    sortDirection: "asc" | "desc" | "";
     // Optional dimensions explicitly admit `undefined` so a dimension can be
     // cleared by reassignment (`{ ...f, x: undefined }`) under the project's
     // exactOptionalPropertyTypes — a fresh object reference is what re-triggers
@@ -52,21 +50,6 @@ export function emptyRunFilters(): RunsListFilters {
  */
 export const FAILURE_STATUS_TOKEN = "failure";
 
-/**
- * The status set backing the "Failed" browse filter and the one-click preset
- * that serves Prime Directive #1 — nothing silently fails. Just the failure
- * sentinel: the server resolves it to the per-task `isFailure` classification
- * rather than a fixed end-reason list.
- */
-export const NEEDS_ATTENTION_STATUSES: readonly string[] = [FAILURE_STATUS_TOKEN];
-
-/** True when `statuses` is exactly the needs-attention set (order-insensitive). */
-export function isNeedsAttention(statuses: string[]): boolean {
-    if (statuses.length !== NEEDS_ATTENTION_STATUSES.length) return false;
-    const set = new Set(statuses);
-    return NEEDS_ATTENTION_STATUSES.every((s) => set.has(s));
-}
-
 /**
  * Outcome buckets: the 14 individual run statuses collapsed into five
  * plain-language groups, so the common case is a five-item pick instead of a
@@ -74,8 +57,9 @@ export function isNeedsAttention(statuses: string[]): boolean {
  * one adds/removes its members, and the popover's "Advanced" section still
  * exposes the individual statuses for surgical filters (e.g. only `timeout`).
  *
- * Every status appears in exactly one bucket; `Failed` is the needs-attention
- * set (Prime Directive #1). `dot` mirrors that group's color in
+ * Every status appears in exactly one bucket; `Failed` is the failure sentinel,
+ * which the server resolves to each run's `isFailure` bit. `dot` mirrors that
+ * group's color in
  * RUN_STATUS_CONFIG so the bucket reads at a glance.
  */
 export interface StatusBucket {
@@ -93,7 +77,7 @@ export const STATUS_BUCKETS: readonly StatusBucket[] = [
         key: "failed",
         label: "Failed",
         dot: "bg-danger-surface",
-        statuses: NEEDS_ATTENTION_STATUSES,
+        statuses: [FAILURE_STATUS_TOKEN],
     },
     {
         key: "skipped",
@@ -199,23 +183,6 @@ export function clearDimension(f: RunsListFilters, dim: FilterDimension): RunsLi
     }
 }
 
-/**
- * Clear every popover dimension at once, preserving the header search and the
- * sort direction (those are separate toolbar controls, not popover state).
- */
-export function clearPopoverFilters(f: RunsListFilters): RunsListFilters {
-    return {
-        ...f,
-        statuses: [],
-        createdAfter: undefined,
-        createdBefore: undefined,
-        taskName: undefined,
-        triggeredBy: undefined,
-        exitCode: undefined,
-        retriesOnly: undefined,
-    };
-}
-
 /** Human label for a status value, e.g. `log_overflow` → "Log overflow". */
 export function humanizeStatus(status: string): string {
     if (!status) return status;
@@ -401,18 +368,3 @@ export function isExitCodeExprValid(expr: string): boolean {
 export function exitCodeChipLabel(expr: string | undefined): string {
     return `Exit ${(expr ?? "").trim()}`;
 }
-
-/**
- * Whether the popover's exit-code text buffer must resync to the `filters`
- * prop. True only when the committed `exitCode` value actually moved since
- * the buffer last matched it — e.g. the "Exit code" chip was removed, or
- * "clear filters" ran elsewhere. An unrelated filters update (any other
- * dimension) leaves `exitCode` untouched and must not clobber in-progress
- * typing in the still-open popover.
- */
-export function exitCodePropChanged(
-    previous: string | undefined,
-    next: string | undefined,
-): boolean {
-    return previous !== next;
-}

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

@@ -2,23 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { RUN_STATUSES } from "@runwisp/common";
 import {
     runDuration,
     runStartDelay,
     runVerdict,
     formatTriggeredByLabel,
     runRetryLabel,
+    runUsageLabel,
     instanceSuffix,
 } from "./run-helpers.js";
 
 describe("runVerdict", () => {
-    it("covers every run status", () => {
-        for (const status of RUN_STATUSES) {
-            expect(runVerdict(status).verb, status).toBeTruthy();
-        }
-    });
-
     it("phrases a timed outcome so a duration reads after it", () => {
         expect(runVerdict("succeeded")).toEqual({ verb: "succeeded in", timed: true });
         expect(runVerdict("failed")).toEqual({ verb: "failed after", timed: true });
@@ -116,6 +110,22 @@ describe("formatTriggeredByLabel", () => {
     });
 });
 
+describe("runUsageLabel", () => {
+    it("is undefined for an unmeasured run", () => {
+        expect(runUsageLabel({})).toBeUndefined();
+    });
+
+    it("joins peak memory and CPU time", () => {
+        expect(runUsageLabel({ peakMemoryBytes: 48 * 1024 * 1024, cpuTimeMs: 1500 })).toBe(
+            "peak 48 MB · CPU 1s",
+        );
+    });
+
+    it("shows whichever was measured", () => {
+        expect(runUsageLabel({ cpuTimeMs: 0 })).toBe("CPU 0ms");
+    });
+});
+
 describe("runRetryLabel", () => {
     it("returns undefined for a first attempt that is not a retry", () => {
         expect(runRetryLabel({ retryAttempt: 0 })).toBeUndefined();

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Run, RunStatus } from "@runwisp/common";
-import { formatDuration } from "../../utils/format.js";
+import { formatBytes, formatDuration } from "../../utils/format.js";
 
 export interface RunVerdict {
     /** Verb phrase for the outcome, ending in its preposition when `timed`. */
@@ -107,6 +107,17 @@ export function runRetryLabel(run: Pick<Run, "retryAttempt" | "retryOfRunId">):
     return undefined;
 }
 
+/**
+ * "peak 48 MB · CPU 1s" for a run whose resources were measured (shell runs
+ * only), else undefined.
+ */
+export function runUsageLabel(run: Pick<Run, "peakMemoryBytes" | "cpuTimeMs">): string | undefined {
+    const parts: string[] = [];
+    if (run.peakMemoryBytes !== undefined) parts.push("peak " + formatBytes(run.peakMemoryBytes));
+    if (run.cpuTimeMs !== undefined) parts.push("CPU " + formatDuration(run.cpuTimeMs));
+    return parts.length > 0 ? parts.join(" · ") : 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/components/dashboard/status-config.ts

@@ -16,25 +16,44 @@ import {
     HeartCrack,
 } from "@lucide/svelte";
 import type { Component } from "svelte";
-import { displayStatus, type RunStatus, type Run } from "@runwisp/common";
+import type { RunStatus } from "@runwisp/common";
 
-export interface RunStatusConfig {
+interface RunStatusConfig {
     icon: Component;
     color: string;
     bg: string;
-    border: string;
     dot: string;
     badge: string;
     /** One-sentence explanation of what this status means, for tooltips. */
     description: string;
 }
 
+// Full literal class strings (not built from a tone name) so Tailwind's
+// scanner picks them up.
+const DANGER = {
+    color: "text-danger-surface",
+    bg: "bg-danger-soft",
+    dot: "bg-danger-surface",
+    badge: "bg-danger-soft text-danger-soft-text",
+};
+const WARNING = {
+    color: "text-warning-surface",
+    bg: "bg-warning-soft",
+    dot: "bg-warning-surface",
+    badge: "bg-warning-soft text-warning-soft-text",
+};
+const NEUTRAL = {
+    color: "text-on-surface-muted",
+    bg: "bg-surface-sunken",
+    dot: "bg-on-surface-faint",
+    badge: "bg-surface-sunken text-on-surface",
+};
+
 export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
     running: {
         icon: LoaderCircle,
         color: "text-info-surface",
         bg: "bg-info-soft",
-        border: "border-info-soft",
         dot: "bg-info-surface animate-pulse",
         badge: "bg-info-soft text-info-soft-text",
         description: "This run is executing right now.",
@@ -43,151 +62,87 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         icon: CircleCheck,
         color: "text-success-surface",
         bg: "bg-success-soft",
-        border: "border-success-soft",
         dot: "bg-success-surface",
         badge: "bg-success-soft text-success-soft-text",
         description: "The run finished with exit code 0 - everything OK.",
     },
     failed: {
+        ...DANGER,
         icon: CircleX,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description: "The run exited with a non-zero code.",
     },
     crashed: {
+        ...DANGER,
         icon: CircleAlert,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "The process was killed, or the daemon found it still 'running' after a hard crash and marked it crashed. It was not resumed.",
     },
     stopped: {
+        ...WARNING,
         icon: CircleStop,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description: "A human or an external script manually stopped this run before it finished.",
     },
     timeout: {
+        ...WARNING,
         icon: TimerOff,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description:
             "The run exceeded its configured timeout and was terminated. Timeout duration can be changed.",
     },
     skipped: {
+        ...NEUTRAL,
         icon: SkipForward,
-        color: "text-on-surface-muted",
-        bg: "bg-surface-sunken",
-        border: "border-outline-faint",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
         description:
             'Skipped by the concurrency policy (on_overlap = "skip") because a previous run was still going.',
     },
     log_overflow: {
+        ...DANGER,
         icon: FileExclamationPoint,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description: "The run hit log_max_size and was handled because of log_on_full.",
     },
     queue_full: {
+        ...WARNING,
         icon: SkipForward,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description: "Skipped because the task's queue was already at max_queued.",
     },
     dst_skipped: {
+        ...NEUTRAL,
         icon: SkipForward,
-        color: "text-on-surface-muted",
-        bg: "bg-surface-sunken",
-        border: "border-outline-faint",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
         description:
             "Skipped: this cron tick was the duplicate half of a DST fall-back, so it was recorded but not run.",
     },
     daemon_stopped: {
+        ...WARNING,
         icon: CircleStop,
-        color: "text-warning-surface",
-        bg: "bg-warning-soft",
-        border: "border-warning-soft",
-        dot: "bg-warning-surface",
-        badge: "bg-warning-soft text-warning-soft-text",
         description:
             "The daemon shut down while this run was in flight and it exceeded shutdown_timeout; it was not resumed.",
     },
     missed: {
+        ...DANGER,
         icon: CalendarX,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "A scheduled run never happened because the daemon was down. Detected and recorded on restart.",
     },
     start_failed: {
+        ...DANGER,
         icon: OctagonX,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "The run (or service instance) kept failing; after restart_attempts consecutive failures, RunWisp gave up restarting it automatically.",
     },
     unhealthy: {
+        ...DANGER,
         icon: HeartCrack,
-        color: "text-danger-surface",
-        bg: "bg-danger-soft",
-        border: "border-danger-soft",
-        dot: "bg-danger-surface",
-        badge: "bg-danger-soft text-danger-soft-text",
         description:
             "The service instance kept failing its health_check, so RunWisp stopped it. Its restart policy decides what happens next.",
     },
     pending: {
+        ...NEUTRAL,
         icon: Clock,
-        color: "text-on-surface-muted",
-        bg: "bg-surface-sunken",
-        border: "border-outline",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
         description: "Queued and waiting to start.",
     },
     ended: {
-        icon: CircleDashed,
+        ...NEUTRAL,
         color: "text-on-surface-faint",
-        bg: "bg-surface-sunken",
-        border: "border-outline-faint",
-        dot: "bg-on-surface-faint",
-        badge: "bg-surface-sunken text-on-surface",
+        icon: CircleDashed,
         description: "The run finished. No specific end reason was recorded.",
     },
 };
-
-export function getRunStatusConfig(status: RunStatus): RunStatusConfig {
-    return RUN_STATUS_CONFIG[status];
-}
-
-export function runDisplayStatus(run: Pick<Run, "status" | "endReason">): RunStatus {
-    return displayStatus(run.status, run.endReason);
-}

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

@@ -1,32 +1,6 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Task as CommonTask, Run as CommonRun } from "@runwisp/common";
-
-/**
- * Web UI component types.
- * Source of truth for status values: {@link RunStatus} from `@runwisp/common`.
- */
-
-export type Task = CommonTask;
-
-export type Run = CommonRun;
-
-export interface DaemonState {
-    name: string;
-    version: string;
-    uptime: string;
-    status: "connected" | "disconnected";
-    host: string;
-    backendUrl: string;
-    cpus: number;
-    memory: string;
-    os: string;
-    arch: string;
-    workDir: string;
-    fingerprint: string;
-}
-
 export interface DaemonStats {
     cpuUsage: number;
     memUsage: number;

package/src/lib/components/radio-group.ts

@@ -0,0 +1,11 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+export const RADIO_GROUP_KEY = Symbol("radio-group");
+
+// What a RadioGroup hands its Radio children: the shared input name and the
+// selected value, read and written through the group's bindable `value`.
+export interface RadioGroupContext {
+    readonly name: string;
+    value: string;
+}

package/src/lib/index.ts

@@ -1,8 +1,6 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as theme } from "./theme.css?inline";
-
 export { default as Logo } from "./components/Logo.svelte";
 
 export { default as PageContainer } from "./components/PageContainer.svelte";
@@ -19,13 +17,6 @@ export { default as Spinner } from "./components/Spinner.svelte";
 
 export { default as Button } from "./components/Button.svelte";
 export { default as LinkButton } from "./components/LinkButton.svelte";
-export {
-    BUTTON_BASE,
-    BUTTON_SIZES,
-    BUTTON_VARIANTS,
-    type ButtonSize,
-    type ButtonVariant,
-} from "./components/button-styles.js";
 export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as CronInput } from "./components/CronInput.svelte";
 export { default as DurationInput } from "./components/DurationInput.svelte";
@@ -33,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, type SelectOption } from "./components/Select.svelte";
+export { default as Select } 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";
@@ -88,71 +79,45 @@ export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
 
 export { default as CodeBlock } from "./components/CodeBlock.svelte";
 export { default as TaskCard } from "./components/TaskCard.svelte";
-export type { TaskCardAccent } from "./components/TaskCard.svelte";
 
 export { default as LogConsole } from "./components/LogConsole.svelte";
 export type { FetchLogsFn, LogEvent, LogSlice } from "./log-console/types.js";
-export { isLogEvent } from "./log-console/types.js";
-export { LogCache } from "./log-console/LogCache.svelte.js";
-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 { default as RunFilterPopover } from "./components/dashboard/RunFilterPopover.svelte";
 export type { RunOutputMatch } from "./components/dashboard/RunsList.svelte";
 export {
+    activeFilterCount,
     emptyRunFilters,
     FAILURE_STATUS_TOKEN,
-    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 { RUN_STATUS_CONFIG } from "./components/dashboard/status-config.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";
+export { humanizeCron } from "./components/dashboard/cron-format.js";
+export type { DaemonStats } from "./components/dashboard/types.js";
 
-export { toast, type Toast, type ToastType } from "./utils/toast.svelte.js";
-export {
-    themeStore,
-    THEME_STORAGE_KEY,
-    type ThemePreference,
-    type ResolvedTheme,
-} from "./utils/theme.svelte.js";
+export { toast } from "./utils/toast.svelte.js";
 export { extractErrorMessage } from "./utils/error.js";
 export {
     formatBytes,
     formatRelativeTime,
     formatRelativeTimeWithAbsolute,
-    formatDateTime,
     formatDuration,
     formatFullDateTime,
 } from "./utils/format.js";
 export { formatShortId } from "./utils/id.js";
 export { debounce } from "./utils/debounce.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, prefersReducedMotion } from "./actions/row-motion.js";
+export { arrival, leave, shift } from "./actions/row-motion.js";

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

@@ -1,13 +1,12 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-import { createLoggerFactory } from "@runwisp/common";
+import { createLogger } from "@runwisp/common";
 import { SvelteSet } from "svelte/reactivity";
 import type { LogCache } from "./LogCache.svelte.js";
 import type { FetchLogsFn } from "./types.js";
 import { isLogEvent } from "./types.js";
 
-const createLogger = createLoggerFactory();
 const logger = createLogger("LogFetcher");
 
 /**
@@ -20,8 +19,8 @@ const logger = createLogger("LogFetcher");
  */
 export class LogFetcher {
     private readonly cache: LogCache;
-    private fetchLogsFn: FetchLogsFn | undefined;
-    private chunkSize: number;
+    private readonly fetchLogsFn: FetchLogsFn | undefined;
+    private readonly chunkSize = 4096;
 
     readonly MAX_INFLIGHT = 2;
     readonly MIN_REQUEST_INTERVAL_MS = 140;
@@ -38,23 +37,13 @@ export class LogFetcher {
     constructor(
         cache: LogCache,
         fetchLogsFn: FetchLogsFn | undefined,
-        chunkSize: number = 4096,
         onDataLoaded?: (min: number, max: number) => void,
     ) {
         this.cache = cache;
         this.fetchLogsFn = fetchLogsFn;
-        this.chunkSize = Math.max(1, Math.floor(chunkSize));
         this.onDataLoaded = onDataLoaded;
     }
 
-    setFetchLogsFn(fn: FetchLogsFn | undefined) {
-        this.fetchLogsFn = fn;
-    }
-
-    setChunkSize(size: number) {
-        this.chunkSize = Math.max(1, Math.floor(size));
-    }
-
     enqueue(from: number, to: number) {
         if (!this.fetchLogsFn) return;
 

package/src/lib/log-console/highlight-scroll.test.ts

@@ -0,0 +1,59 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it, vi } from "vitest";
+import { createHighlightScroll } from "./highlight-scroll.js";
+
+// `sync` is what LogConsole calls inside its $effect. The effect re-runs it
+// whenever something it READ changes, so "no layout reads after the reveal"
+// (ready not consulted again) is exactly "layout changes can't re-scroll".
+function setup(initial: { line: number | null; ready: boolean }) {
+    const state = { ...initial };
+    const ready = vi.fn(() => state.ready);
+    const reveal = vi.fn();
+    const clear = vi.fn();
+    const sync = createHighlightScroll({ line: () => state.line, ready, reveal, clear });
+    return { state, ready, reveal, clear, sync };
+}
+
+describe("createHighlightScroll", () => {
+    it("reveals once and stops reading layout afterwards", () => {
+        const { ready, reveal, sync } = setup({ line: 5, ready: true });
+        sync();
+        expect(reveal).toHaveBeenCalledExactlyOnceWith(5);
+        expect(ready).toHaveBeenCalledTimes(1);
+
+        // A running run appends lines or the pane resizes: the effect re-runs,
+        // but must neither scroll again nor re-read the layout.
+        sync();
+        sync();
+        expect(reveal).toHaveBeenCalledTimes(1);
+        expect(ready).toHaveBeenCalledTimes(1);
+    });
+
+    it("waits until the line can be placed, then reveals once", () => {
+        const { state, reveal, sync } = setup({ line: 5, ready: false });
+        sync();
+        expect(reveal).not.toHaveBeenCalled();
+        state.ready = true;
+        sync();
+        sync();
+        expect(reveal).toHaveBeenCalledExactlyOnceWith(5);
+    });
+
+    it("reveals again for a new line and after the highlight is cleared", () => {
+        const { state, reveal, clear, sync } = setup({ line: 5, ready: true });
+        sync();
+        state.line = 9;
+        sync();
+        expect(reveal).toHaveBeenLastCalledWith(9);
+
+        state.line = null;
+        sync();
+        expect(clear).toHaveBeenCalledOnce();
+
+        state.line = 9;
+        sync();
+        expect(reveal).toHaveBeenCalledTimes(3);
+    });
+});