@runwisp/ui 0.11.0 → 0.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -50,8 +50,8 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.39.1",
-    "@runwisp/eslint-config": "0.11.0",
-    "@runwisp/typescript-config": "0.11.0",
+    "@runwisp/eslint-config": "0.13.0",
+    "@runwisp/typescript-config": "0.13.0",
     "@storybook/addon-a11y": "^10.1.9",
     "@storybook/addon-docs": "^10.1.9",
     "@storybook/addon-svelte-csf": "^5.0.10",
@@ -99,7 +99,7 @@
     "@floating-ui/dom": "^1.7.4",
     "@fontsource/tasa-orbiter": "^5.2.2",
     "@lucide/svelte": "^0.561.0",
-    "@runwisp/common": "0.11.0",
+    "@runwisp/common": "0.13.0",
     "@tanstack/svelte-virtual": "^3.13.25",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.4.0",

package/src/lib/components/FormField.svelte

@@ -12,6 +12,11 @@
         required?: boolean;
         children: Snippet;
         class?: string;
+        // The id of the control this field labels. Pass the SAME id to the wrapped
+        // input/select so the <label for> actually points at it — otherwise the
+        // label is dead (clicking it does nothing; screen readers can't associate
+        // it). Falls back to a generated id when the field has no focusable target.
+        id?: string;
     }
 
     let {
@@ -22,14 +27,16 @@
         required = false,
         children,
         class: className = "",
+        id,
     }: Props = $props();
 
     const generatedId = `field-${Math.random().toString(36).slice(2, 10)}`;
+    const fieldId = $derived(id ?? generatedId);
 </script>
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={generatedId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={fieldId} class="block text-sm font-medium text-on-surface-muted">
             {label}
             {#if required}
                 <span class="text-danger-soft-text">*</span>

package/src/lib/components/dashboard/RunDetailPanel.svelte

@@ -21,6 +21,7 @@
         Maximize2,
         Minimize2,
         TextWrap,
+        SearchX,
     } from "@lucide/svelte";
     import Button from "../Button.svelte";
     import EmptyState from "../EmptyState.svelte";
@@ -38,6 +39,7 @@
         formatTimeHM,
     } from "../../utils/format.js";
     import { formatShortId } from "../../utils/id.js";
+    import { TickingNow } from "../../utils/ticking-now.svelte.js";
     import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
     import {
         runDuration,
@@ -66,6 +68,7 @@
         historyVisible = false,
         highlightLine = null,
         getInstanceCount = () => 1,
+        notFound = false,
     }: {
         run: Run | undefined;
         fetchLogs: (
@@ -111,6 +114,10 @@
         // Resolves a task's currently configured instance count so multi-instance
         // services render a 1-based #N suffix. Defaults to single-instance.
         getInstanceCount?: (taskName: string) => number;
+        // True when a deep-linked run id resolved to no run (deleted by retention,
+        // or never existed). The empty state then says so plainly instead of the
+        // generic "Select a run" — the caller must not silently substitute another.
+        notFound?: boolean;
     } = $props();
 
     let canDelete = $derived.by(() => {
@@ -119,6 +126,15 @@
         return status !== "running" && status !== "pending";
     });
 
+    // Optimistic per-second clock so a live run's "Ran for" duration counts up
+    // between SSE events. The interval only runs while the run is in-flight; it
+    // is torn down as soon as the run ends (or the panel is destroyed).
+    const durationTicker = new TickingNow(1000);
+    $effect(() => {
+        if (run?.status !== "running") return;
+        return durationTicker.start();
+    });
+
     const TAIL_LINES = 1000;
 
     let logConsole = $state<{ onStream: (event: LogEvent) => void } | null>(null);
@@ -299,7 +315,10 @@
     {@const status = runDisplayStatus(run)}
     {@const config = getRunStatusConfig(status)}
     {@const DetailIcon = config.icon}
-    {@const duration = runDuration(run)}
+    {@const duration = runDuration(
+        run,
+        run.status === "running" ? durationTicker.now.getTime() : undefined,
+    )}
     {@const startDelay = runStartDelay(run)}
     {@const startedAt = run.start_at ?? run.created_at}
     {@const retry = runRetryLabel(run)}
@@ -473,20 +492,32 @@
                         {/if}
 
                         {#if onStopService || onRestartService}
-                            <!-- Service lifecycle replaces the run control. -->
-                            {#if serviceStopped}
-                                {#if onRestartService}
-                                    <button
-                                        type="button"
-                                        onclick={() => onRestartService()}
-                                        disabled={serviceBusy}
-                                        class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border border-primary-soft bg-surface-raised px-3 text-sm font-medium text-primary transition-colors hover:bg-primary-soft disabled:cursor-not-allowed disabled:opacity-60"
-                                    >
+                            <!-- Service lifecycle replaces the run control.
+                             Restart is always available (it cancels + respawns
+                             all instances in one call); Stop appears only while
+                             the service is running. Each still confirms, so
+                             neither fires accidentally. -->
+                            {#if onRestartService}
+                                <button
+                                    type="button"
+                                    onclick={() => onRestartService()}
+                                    disabled={serviceBusy}
+                                    title={serviceStopped
+                                        ? "Starts the service"
+                                        : "Cancels and respawns every instance"}
+                                    class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border border-primary-soft bg-surface-raised px-3 text-sm font-medium text-primary transition-colors hover:bg-primary-soft disabled:cursor-not-allowed disabled:opacity-60"
+                                >
+                                    {#if serviceStopped}
+                                        <Play size={15} fill="currentColor" stroke="none" />
+                                    {:else}
                                         <RefreshCcw size={15} />
-                                        <span class="@max-md:hidden">Restart Service</span>
-                                    </button>
-                                {/if}
-                            {:else if onStopService}
+                                    {/if}
+                                    <span class="@max-md:hidden"
+                                        >{serviceStopped ? "Start" : "Restart"}</span
+                                    >
+                                </button>
+                            {/if}
+                            {#if !serviceStopped && onStopService}
                                 <button
                                     type="button"
                                     onclick={() => onStopService()}
@@ -812,13 +843,15 @@
         class="flex min-w-0 flex-1 flex-col items-center justify-center gap-4 bg-surface-sunken/30"
     >
         <EmptyState
-            title={onRunTask ? "No runs yet" : "Select a run"}
-            description={onRunTask
-                ? "This task hasn't run yet. Trigger it to see its output here."
-                : "Pick a run from the list to view details and logs."}
-            icon={MousePointerClick}
+            title={notFound ? "Run not found" : onRunTask ? "No runs yet" : "Select a run"}
+            description={notFound
+                ? "This run doesn't exist — it may have been deleted by retention, or the link is wrong. Pick a run from the list to continue."
+                : onRunTask
+                  ? "This task hasn't run yet. Trigger it to see its output here."
+                  : "Pick a run from the list to view details and logs."}
+            icon={notFound ? SearchX : MousePointerClick}
         />
-        {#if onRunTask}
+        {#if onRunTask && !notFound}
             <button
                 type="button"
                 onclick={() => onRunTask()}

package/src/lib/components/dashboard/RunsList.svelte

@@ -119,8 +119,8 @@
         outputSearchPending?: boolean;
     } = $props();
 
-    // Task-rail rows are a single dense line (artifact ".run", 46px); the
-    // cross-task /runs view adds the task name on a second line (64px).
+    // Task-rail rows are one dense line (44px); the cross-task /runs view adds
+    // the task name on a second line (64px).
     const rowHeight = $derived(showTaskName ? 64 : 44);
     const OVERSCAN = 8;
     const LOAD_AHEAD = 10;
@@ -203,6 +203,29 @@
         if (last.index >= items.length - LOAD_AHEAD) onLoadMore?.();
     });
 
+    // Scroll a programmatically-selected run (deep link, detail-panel click) into
+    // view, since its row may be outside the virtual window. Tracked on
+    // selectedRunId/items only; the virtualizer access is untracked to avoid the
+    // setOptions-style notify loop (effect_update_depth_exceeded, see above).
+    let lastScrolled: string | null = null;
+    $effect(() => {
+        const id = selectedRunId;
+        const index = items.findIndex((r: Run) => r.id === id);
+        if (!id) {
+            lastScrolled = null;
+            return;
+        }
+        // -1: not loaded yet. The effect re-runs as items grows, so a deep link
+        // resolves once its page arrives; we don't chase it with onLoadMore.
+        if (index === -1) return;
+        if (id === lastScrolled) return; // already handled; don't re-yank on re-render
+        if (!scrollElement) return;
+        lastScrolled = id;
+        // "auto" only scrolls when the row is off-screen, so visible selections
+        // (and manual clicks) don't jump.
+        untrack(() => $virtualizer.scrollToIndex(index, { align: "auto" }));
+    });
+
     function isRowSelected(id: string): boolean {
         return selectAllMode ? !exceptIds.has(id) : explicitIds.has(id);
     }
@@ -361,7 +384,6 @@
         ? "flex h-full w-full flex-col overflow-hidden border-b border-outline bg-surface md:w-[300px] md:shrink-0 md:border-r md:border-b-0"
         : "flex flex-col overflow-hidden rounded-xl border border-outline bg-surface-raised shadow-sm md:col-span-4 lg:col-span-3"}
 >
-    <!-- Inline heading: master checkbox, label, selection count or controls -->
     <div
         class="flex shrink-0 items-center gap-2 border-b px-3 py-2 {hasSelection
             ? 'border-outline-faint bg-primary-soft/40'

package/src/lib/components/dashboard/cron-format.ts

@@ -22,7 +22,10 @@ const UNIT_NAMES: Record<string, [string, string]> = {
 // humanizeEvery turns robfig's `@every 1h30m` (Go duration syntax) into
 // "Every 1 hour 30 minutes". Returns null when the duration doesn't parse.
 function humanizeEvery(duration: string): string | null {
-    const parts = [...duration.matchAll(/(\d+(?:\.\d+)?)(h|m|s|ms|us|µs|ns)/g)];
+    // The number is matched atomically (lookahead-capture + backreference) so a
+    // long digit run with no trailing unit fails fast instead of backtracking
+    // through every length (super-linear). `\1` is the number; group 2 the unit.
+    const parts = [...duration.matchAll(/(?=(\d+(?:\.\d+)?))\1(h|m|s|ms|us|µs|ns)/g)];
     if (parts.length === 0 || parts.map((p) => p[0]).join("") !== duration) {
         return null;
     }

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

@@ -208,7 +208,7 @@ export function clearPopoverFilters(f: RunsListFilters): RunsListFilters {
 /** Human label for a status value, e.g. `log_overflow` → "Log overflow". */
 export function humanizeStatus(status: string): string {
     if (!status) return status;
-    const spaced = status.replace(/_/g, " ");
+    const spaced = status.replaceAll("_", " ");
     return spaced.charAt(0).toUpperCase() + spaced.slice(1);
 }
 
@@ -266,7 +266,7 @@ export function statusChipLabel(statuses: string[]): string {
 function localDay(dateStr: string): Date | null {
     const parts = dateStr.split("-");
     if (parts.length !== 3) return null;
-    const [y, m, d] = parts.map((p) => Number(p));
+    const [y, m, d] = parts.map(Number);
     if (y === undefined || m === undefined || d === undefined) return null;
     if (!Number.isInteger(y) || !Number.isInteger(m) || !Number.isInteger(d)) return null;
     const date = new Date(y, m - 1, d);

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

@@ -40,6 +40,19 @@ describe("runDuration", () => {
             expect(runDuration({ start_at: "2024-06-15T12:00:00.000Z" })).toBe("2s");
         });
     });
+
+    it("counts against an injected now for an in-progress run", () => {
+        const start = "2024-06-15T12:00:00.000Z";
+        const now = new Date("2024-06-15T12:00:07.000Z").getTime();
+        expect(runDuration({ start_at: start }, now)).toBe("7s");
+    });
+
+    it("ignores the injected now once the run has ended", () => {
+        const start = "2024-06-15T12:00:00.000Z";
+        const end = "2024-06-15T12:00:05.000Z";
+        const now = new Date("2024-06-15T12:01:00.000Z").getTime();
+        expect(runDuration({ start_at: start, end_at: end }, now)).toBe("5s");
+    });
 });
 
 describe("runStartDelay", () => {

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

@@ -4,10 +4,13 @@
 import type { Run } from "@runwisp/common";
 import { formatDuration } from "../../utils/format.js";
 
-export function runDuration(run: Pick<Run, "start_at" | "end_at">): string | undefined {
+export function runDuration(
+    run: Pick<Run, "start_at" | "end_at">,
+    now: number = Date.now(),
+): string | undefined {
     if (!run.start_at) return undefined;
     const start = new Date(run.start_at).getTime();
-    const end = run.end_at ? new Date(run.end_at).getTime() : Date.now();
+    const end = run.end_at ? new Date(run.end_at).getTime() : now;
     return formatDuration(end - start);
 }
 

package/src/lib/index.ts

@@ -127,3 +127,4 @@ export {
     formatFullDateTime,
 } from "./utils/format.js";
 export { formatShortId } from "./utils/id.js";
+export { TickingNow } from "./utils/ticking-now.svelte.js";

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

@@ -12,6 +12,12 @@ import { visibleColumns } from "./ansi.js";
  * the cache must aggressively prune data that is far from the current viewport.
  * It uses a SvelteMap for reactive, efficient line lookups and updates.
  */
+// 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.
+const PREFERRED_STREAM_ORDER = ["stdout", "stderr"] as const;
+const PREFERRED_STREAMS: ReadonlySet<string> = new Set(PREFERRED_STREAM_ORDER);
+
 export class LogCache {
     lines = $state(new SvelteMap<number, string>());
     // Live-region overlay, keyed by stream (stdout/stderr). Each stream has at
@@ -61,12 +67,11 @@ export class LogCache {
     // other streams, sorted) for stable ordering. Reactive: reads the regions
     // map so it recomputes on update.
     get overlayRows(): string[] {
-        const preferred = ["stdout", "stderr"];
         const rest = [...this.regions.keys()]
-            .filter((s) => !preferred.includes(s))
+            .filter((s) => !PREFERRED_STREAMS.has(s))
             .sort((a, b) => a.localeCompare(b));
         const out: string[] = [];
-        for (const stream of [...preferred, ...rest]) {
+        for (const stream of [...PREFERRED_STREAM_ORDER, ...rest]) {
             const region = this.regions.get(stream);
             if (region) out.push(...region.rows);
         }

package/src/lib/theme.css

@@ -1,24 +1,27 @@
 /* Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0 */
 
-@import "tailwindcss";
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
-
 /* RunWisp Design System — Tailwind v4 entrypoint.
  *
  * Raw OKLch palette + semantic tokens live in ./theme-tokens.css (plain CSS),
  * so apps/docs (Starlight, no Tailwind pipeline) can consume the same source.
  * This file republishes those tokens under Tailwind's --color-* namespace so
  * utilities like `bg-wisp-500`, `text-surface`, etc. generate.
+ *
+ * All @import rules precede the @plugin directives so the stylesheet stays
+ * valid CSS (an @import must come before any other at-rule besides @charset
+ * / @layer); Tailwind's @plugin registrations are order-independent here.
  */
 
+@import "tailwindcss";
 @import "./theme-tokens.css";
-
 @import "@fontsource/tasa-orbiter/400.css";
 @import "@fontsource/tasa-orbiter/500.css";
 @import "@fontsource/tasa-orbiter/600.css";
 @import "@fontsource/tasa-orbiter/700.css";
 
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
 @theme {
     /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
      * resolve through to --rw-color-* declared in theme-tokens.css. */

package/src/lib/utils/ticking-now.svelte.test.ts

@@ -0,0 +1,45 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TickingNow } from "./ticking-now.svelte.js";
+
+describe("TickingNow", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.setSystemTime(new Date("2024-06-15T12:00:00.000Z"));
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it("reports the current time before it starts ticking", () => {
+        const clock = new TickingNow();
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:00.000Z").getTime());
+    });
+
+    it("advances on its default 30s interval", () => {
+        const clock = new TickingNow();
+        const stop = clock.start();
+        vi.advanceTimersByTime(30_000);
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:30.000Z").getTime());
+        stop();
+    });
+
+    it("advances on a custom interval", () => {
+        const clock = new TickingNow(1000);
+        const stop = clock.start();
+        vi.advanceTimersByTime(3000);
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:03.000Z").getTime());
+        stop();
+    });
+
+    it("stops advancing once the cleanup is called", () => {
+        const clock = new TickingNow(1000);
+        const stop = clock.start();
+        vi.advanceTimersByTime(1000);
+        stop();
+        vi.advanceTimersByTime(9000);
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:01.000Z").getTime());
+    });
+});

package/src/lib/utils/ticking-now.svelte.ts

@@ -0,0 +1,32 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { SvelteDate } from "svelte/reactivity";
+
+const DEFAULT_TICK_INTERVAL_MS = 30_000;
+
+// TickingNow is a reactive clock that advances on a fixed interval, so
+// relative-time labels re-render without waiting for a data event.
+// Call start() inside an $effect and return its cleanup.
+export class TickingNow {
+    #ms = $state(Date.now());
+    readonly #intervalMs: number;
+
+    constructor(intervalMs: number = DEFAULT_TICK_INTERVAL_MS) {
+        this.#intervalMs = intervalMs;
+    }
+
+    start(): () => void {
+        this.#ms = Date.now();
+        const timer = setInterval(() => {
+            this.#ms = Date.now();
+        }, this.#intervalMs);
+        return () => {
+            clearInterval(timer);
+        };
+    }
+
+    get now(): Date {
+        return new SvelteDate(this.#ms);
+    }
+}