@runwisp/ui 1.5.1 → 1.7.0

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