@runwisp/ui 1.3.0 → 1.5.0

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

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

@@ -0,0 +1,41 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { untrack } from "svelte";
+
+export interface HighlightScrollOptions {
+    /** Reactive getter for the line to reveal; null/undefined means none. */
+    line: () => number | null | undefined;
+    /** Reactive getter: true once the layout can place `line` (container measured, line exists). */
+    ready: (line: number) => boolean;
+    /** Scrolls to `line`. Runs untracked, so layout reads here never re-trigger the sync. */
+    reveal: (line: number) => void;
+    /** Called when the highlight is cleared. */
+    clear: () => void;
+}
+
+/**
+ * Returns a function to call from inside an `$effect`. It reveals each
+ * highlighted line exactly once: after the first reveal, layout changes (new
+ * log lines, resizes) no longer re-run the scroll, so the operator can scroll
+ * away from a deep-linked search hit and stay there. It waits until `ready`,
+ * and a changed or re-set `line` reveals again.
+ */
+export function createHighlightScroll(options: HighlightScrollOptions): () => void {
+    let revealed: number | null = null;
+    return () => {
+        const target = options.line();
+        // Not `!target`: line 0 is a valid highlight.
+        if (typeof target !== "number") {
+            revealed = null;
+            options.clear();
+            return;
+        }
+        // Checked before `ready` so a revealed line leaves no layout dependency behind.
+        if (revealed === target || !options.ready(target)) return;
+        revealed = target;
+        untrack(() => {
+            options.reveal(target);
+        });
+    };
+}

package/src/lib/theme.css

@@ -19,6 +19,10 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
+    /* Wide enough for the sidebar, run list and run detail to stay side by
+     * side for good; below it the operator can fold the first two away. */
+    --breakpoint-3xl: 100rem;
+
     /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
      * resolve through to --rw-color-* declared in theme-tokens.css. */
     --color-wisp-50: var(--rw-color-wisp-50);
@@ -251,10 +255,12 @@ body {
     color: var(--rw-on-surface);
 }
 
-/* Headings are mono chrome — the runbook voice. Components should not fight this. */
-h1,
-h2,
-h3 {
+/* Headings are mono chrome — the runbook voice. Unlayered, so it beats the
+   weight/leading/tracking utilities on a raw <h1>-<h3>: every heading reads the
+   same. The Heading component opts out (data-rw-heading) and carries this look
+   in its own classes, so its props are the source of truth. :is()/:where()
+   keep the selector at element specificity, so app stylesheets still win. */
+:is(h1, h2, h3):where(:not([data-rw-heading])) {
     font-family: var(--font-mono);
     font-weight: 800;
     line-height: 1.1;

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

@@ -0,0 +1,92 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CopyFeedback, copyText } from "./clipboard.svelte.js";
+
+describe("copyText", () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it("writes through navigator.clipboard", async () => {
+        const writeText = vi.fn(() => Promise.resolve());
+        vi.stubGlobal("navigator", { clipboard: { writeText } });
+        expect(await copyText("runwisp")).toBe(true);
+        expect(writeText).toHaveBeenCalledWith("runwisp");
+    });
+
+    it("falls back to execCommand when the clipboard API is missing", async () => {
+        vi.stubGlobal("navigator", {});
+        const textarea = {
+            value: "",
+            readOnly: false,
+            style: {},
+            select: vi.fn(),
+            remove: vi.fn(),
+        };
+        const execCommand = vi.fn(() => true);
+        class FakeElement {
+            focus = vi.fn();
+        }
+        const focused = new FakeElement();
+        vi.stubGlobal("HTMLElement", FakeElement);
+        vi.stubGlobal("document", {
+            activeElement: focused,
+            createElement: () => textarea,
+            body: { appendChild: vi.fn() },
+            execCommand,
+        });
+        expect(await copyText("runwisp")).toBe(true);
+        expect(textarea.value).toBe("runwisp");
+        expect(execCommand).toHaveBeenCalledWith("copy");
+        expect(textarea.remove).toHaveBeenCalled();
+        expect(focused.focus).toHaveBeenCalled();
+    });
+
+    it("reports failure when no copy path exists", async () => {
+        vi.stubGlobal("navigator", {});
+        vi.stubGlobal("document", undefined);
+        expect(await copyText("runwisp")).toBe(false);
+    });
+});
+
+describe("CopyFeedback", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.stubGlobal("navigator", { clipboard: { writeText: () => Promise.resolve() } });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+
+    it("flags the copied key until the reset delay passes", async () => {
+        const feedback = new CopyFeedback(1000);
+        await feedback.copy("docker run", "docker");
+        expect(feedback.copied).toBe(true);
+        expect(feedback.isCopied("docker")).toBe(true);
+        expect(feedback.isCopied("binary")).toBe(false);
+        vi.advanceTimersByTime(1000);
+        expect(feedback.copied).toBe(false);
+    });
+
+    it("restarts the reset delay on a second copy", async () => {
+        const feedback = new CopyFeedback(1000);
+        await feedback.copy("a");
+        vi.advanceTimersByTime(800);
+        await feedback.copy("b");
+        vi.advanceTimersByTime(800);
+        expect(feedback.copied).toBe(true);
+    });
+
+    it("stays idle when the copy fails", async () => {
+        vi.stubGlobal("navigator", {
+            clipboard: { writeText: () => Promise.reject(new Error("denied")) },
+        });
+        vi.stubGlobal("document", undefined);
+        const feedback = new CopyFeedback();
+        expect(await feedback.copy("a")).toBe(false);
+        expect(feedback.copied).toBe(false);
+    });
+});

package/src/lib/utils/clipboard.svelte.ts

@@ -0,0 +1,73 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+const DEFAULT_RESET_MS = 2000;
+
+// Copies text to the clipboard and reports whether it worked. navigator.clipboard
+// only exists in secure contexts, so a daemon served over plain http on a LAN IP
+// falls back to the legacy textarea + execCommand path.
+export async function copyText(text: string): Promise<boolean> {
+    if (typeof navigator !== "undefined" && "clipboard" in navigator) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        } catch {
+            // Denied or blocked: try the legacy path below.
+        }
+    }
+    return legacyCopy(text);
+}
+
+function legacyCopy(text: string): boolean {
+    if (typeof document === "undefined") return false;
+    const previousFocus = document.activeElement;
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.readOnly = true;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+        // Deprecated, but still the only copy path outside a secure context.
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        ok = document.execCommand("copy"); // NOSONAR
+    } catch {
+        ok = false;
+    }
+    ta.remove();
+    if (previousFocus instanceof HTMLElement) previousFocus.focus();
+    return ok;
+}
+
+// CopyFeedback drives a copy button's transient "copied" state. `key` tells
+// several buttons sharing one instance apart (one per tab or snippet).
+export class CopyFeedback {
+    #key = $state<string | null>(null);
+    #timer: ReturnType<typeof setTimeout> | undefined;
+    readonly #resetMs: number;
+
+    constructor(resetMs: number = DEFAULT_RESET_MS) {
+        this.#resetMs = resetMs;
+    }
+
+    get copied(): boolean {
+        return this.#key !== null;
+    }
+
+    isCopied(key: string): boolean {
+        return this.#key === key;
+    }
+
+    async copy(text: string, key: string = ""): Promise<boolean> {
+        const ok = await copyText(text);
+        if (!ok) return false;
+        clearTimeout(this.#timer);
+        this.#key = key;
+        this.#timer = setTimeout(() => {
+            this.#key = null;
+        }, this.#resetMs);
+        return true;
+    }
+}