@runwisp/ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,37 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { runDuration } from "./run-helpers.js";
+
+describe("runDuration", () => {
+    it("returns undefined when start_at is not set", () => {
+        expect(runDuration({})).toBeUndefined();
+    });
+
+    it("returns formatted duration when both start_at and end_at are set", () => {
+        const start = "2024-06-15T12:00:00.000Z";
+        const end = "2024-06-15T12:00:05.000Z";
+        expect(runDuration({ start_at: start, end_at: end })).toBe("5s");
+    });
+
+    it("returns ms duration for sub-second runs", () => {
+        const start = "2024-06-15T12:00:00.000Z";
+        const end = "2024-06-15T12:00:00.500Z";
+        expect(runDuration({ start_at: start, end_at: end })).toBe("500ms");
+    });
+
+    describe("with fake clock", () => {
+        beforeEach(() => {
+            vi.useFakeTimers();
+            vi.setSystemTime(new Date("2024-06-15T12:00:02.000Z"));
+        });
+        afterEach(() => {
+            vi.useRealTimers();
+        });
+
+        it("uses current time when end_at is not set (run still in progress)", () => {
+            expect(runDuration({ start_at: "2024-06-15T12:00:00.000Z" })).toBe("2s");
+        });
+    });
+});

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

@@ -10,3 +10,14 @@ export function runDuration(run: Pick<Run, "start_at" | "end_at">): string | und
     const end = run.end_at ? new Date(run.end_at).getTime() : Date.now();
     return formatDuration(end - start);
 }
+
+/**
+ * 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
+ * advanced the row to `success`). Higher = further along.
+ */
+export function runPhaseOrder(status: string): number {
+    if (status === "pending") return 0;
+    if (status === "running") return 1;
+    return 2;
+}

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

@@ -13,8 +13,7 @@ import {
     FileExclamationPoint,
 } from "@lucide/svelte";
 import type { Component } from "svelte";
-import { displayStatus, type RunStatus } from "@runwisp/common";
-import type { Run } from "@runwisp/common";
+import { displayStatus, type RunStatus, type Run } from "@runwisp/common";
 
 export interface RunStatusConfig {
     icon: Component;

package/src/lib/index.ts

@@ -1,27 +1,22 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-// Theme
 export { default as theme } from "./theme.css?inline";
 
-// Brand
 export { default as Logo } from "./components/Logo.svelte";
 
-// Layout
 export { default as PageContainer } from "./components/PageContainer.svelte";
+export { default as PageHeader } from "./components/PageHeader.svelte";
 
-// Typography
 export { default as Heading } from "./components/Heading.svelte";
 export { default as Prose } from "./components/Prose.svelte";
 export { default as Text } from "./components/Text.svelte";
 
-// Inline
 export { default as Kbd } from "./components/Kbd.svelte";
 export { default as Link } from "./components/Link.svelte";
 export { default as Separator } from "./components/Separator.svelte";
 export { default as Spinner } from "./components/Spinner.svelte";
 
-// Form
 export { default as Button } from "./components/Button.svelte";
 export { default as LinkButton } from "./components/LinkButton.svelte";
 export {
@@ -43,7 +38,6 @@ export { default as Textarea } from "./components/Textarea.svelte";
 export { default as TimezoneSelect } from "./components/TimezoneSelect.svelte";
 export { default as Toggle } from "./components/Toggle.svelte";
 
-// Navigation
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as AccordionItem } from "./components/AccordionItem.svelte";
 export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
@@ -51,7 +45,6 @@ export { default as Pagination } from "./components/Pagination.svelte";
 export { default as Tabs } from "./components/Tabs.svelte";
 export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
 
-// Data display
 export { default as Avatar } from "./components/Avatar.svelte";
 export { default as Badge } from "./components/Badge.svelte";
 export { default as Card } from "./components/Card.svelte";
@@ -66,7 +59,6 @@ export { default as TableCell } from "./components/TableCell.svelte";
 export { default as TableHead } from "./components/TableHead.svelte";
 export { default as TableRow } from "./components/TableRow.svelte";
 
-// Feedback / overlay
 export { default as Alert } from "./components/Alert.svelte";
 export { default as AlertDialog } from "./components/AlertDialog.svelte";
 export { default as Drawer } from "./components/Drawer.svelte";
@@ -78,37 +70,33 @@ export { default as Popover } from "./components/Popover.svelte";
 export { default as ToastContainer } from "./components/ToastContainer.svelte";
 export { default as Tooltip } from "./components/Tooltip.svelte";
 
-// Generic
 export { default as CodeBlock } from "./components/CodeBlock.svelte";
 export { default as FeatureCard } from "./components/FeatureCard.svelte";
 export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
+export { default as TaskCard } from "./components/TaskCard.svelte";
+export type { TaskCardAccent } from "./components/TaskCard.svelte";
 
-// Log console
 export { default as LogConsole } from "./components/LogConsole.svelte";
-export type {
-    FetchLogsFn,
-    LineNumber,
-    LogEvent,
-    LogMessage,
-    LogSlice,
-} from "./log-console/types.js";
+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";
 
-// Dashboard
 export { default as RunDetailPanel } from "./components/dashboard/RunDetailPanel.svelte";
 export { default as RunsList } from "./components/dashboard/RunsList.svelte";
+export type {
+    RunsListFilters,
+    RunsListSortDirection,
+} from "./components/dashboard/RunsList.svelte";
 export {
     getRunStatusConfig,
     runDisplayStatus,
     RUN_STATUS_CONFIG,
     type RunStatusConfig,
 } from "./components/dashboard/status-config.js";
-export { runDuration } from "./components/dashboard/run-helpers.js";
+export { runDuration, runPhaseOrder } from "./components/dashboard/run-helpers.js";
 export type { DaemonState, DaemonStats } from "./components/dashboard/types.js";
 
-// Utilities
 export { toast, type Toast, type ToastType } from "./utils/toast.svelte.js";
 export { extractErrorMessage } from "./utils/error.js";
 export {

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

@@ -19,7 +19,7 @@ const logger = createLogger("LogFetcher");
  * - Throttles and prioritizes requests to prevent viewport jitter.
  */
 export class LogFetcher {
-    private cache: LogCache;
+    private readonly cache: LogCache;
     private fetchLogsFn: FetchLogsFn | undefined;
     private chunkSize: number;
 
@@ -28,12 +28,12 @@ export class LogFetcher {
 
     isFetching = $state(false);
 
-    private pendingChunks = new SvelteSet<number>();
-    private inFlightChunks = new SvelteSet<number>();
+    private readonly pendingChunks = new SvelteSet<number>();
+    private readonly inFlightChunks = new SvelteSet<number>();
     private fetchTimer: ReturnType<typeof setTimeout> | null = null;
     private lastRequestAt = 0;
 
-    private onDataLoaded?: ((min: number, max: number) => void) | undefined;
+    private readonly onDataLoaded: ((min: number, max: number) => void) | undefined;
 
     constructor(
         cache: LogCache,

package/src/lib/log-console/types.ts

@@ -1,10 +1,7 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-export type LineNumber = number;
-export type LogMessage = string;
-
-export type LogSlice = Record<LineNumber, LogMessage>;
+export type LogSlice = Record<number, string>;
 
 export type LogEvent = {
     lines: LogSlice;

package/src/lib/theme-tokens.css

@@ -87,10 +87,8 @@
     --rw-color-warning-500: oklch(0.75 0.16 65);
     --rw-color-warning-600: oklch(0.65 0.14 60);
     --rw-color-warning-700: oklch(0.55 0.12 55);
-}
 
-/* Light-mode semantic tokens (default) */
-:root {
+    /* Light-mode semantic tokens (default) */
     /* Surfaces */
     --rw-surface: var(--rw-color-mist-50);
     --rw-surface-raised: white;

package/src/lib/utils/format.test.ts

@@ -0,0 +1,88 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { formatBytes, formatDuration, formatRelativeTimeWithAbsolute } from "./format.js";
+
+describe("formatBytes", () => {
+    it("formats 0 bytes", () => {
+        expect(formatBytes(0)).toBe("0 B");
+    });
+    it("formats bytes under 1 KB", () => {
+        expect(formatBytes(500)).toBe("500 B");
+    });
+    it("formats exactly 1 KB", () => {
+        expect(formatBytes(1024)).toBe("1 KB");
+    });
+    it("formats fractional KB when value < 10 (one decimal)", () => {
+        expect(formatBytes(1024 * 1.5)).toBe("1.5 KB");
+    });
+    it("formats KB >= 10 without decimal", () => {
+        expect(formatBytes(1024 * 10)).toBe("10 KB");
+    });
+    it("formats MB", () => {
+        expect(formatBytes(1024 ** 2)).toBe("1 MB");
+    });
+    it("formats GB", () => {
+        expect(formatBytes(1024 ** 3)).toBe("1 GB");
+    });
+    it("formats TB", () => {
+        expect(formatBytes(1024 ** 4)).toBe("1 TB");
+    });
+    it("formats PB (largest unit)", () => {
+        expect(formatBytes(1024 ** 5)).toBe("1 PB");
+    });
+});
+
+describe("formatDuration", () => {
+    it("returns ms for 0", () => {
+        expect(formatDuration(0)).toBe("0ms");
+    });
+    it("returns ms for < 1 second", () => {
+        expect(formatDuration(999)).toBe("999ms");
+    });
+    it("returns seconds for exactly 1s", () => {
+        expect(formatDuration(1000)).toBe("1s");
+    });
+    it("returns seconds for 59s", () => {
+        expect(formatDuration(59_000)).toBe("59s");
+    });
+    it("returns minutes for exactly 1m (no remaining seconds)", () => {
+        expect(formatDuration(60_000)).toBe("1m");
+    });
+    it("returns minutes + seconds when remainder > 0", () => {
+        expect(formatDuration(90_000)).toBe("1m 30s");
+    });
+    it("returns exactly 59m", () => {
+        expect(formatDuration(59 * 60_000)).toBe("59m");
+    });
+    it("returns hours for exactly 1h (no remaining minutes)", () => {
+        expect(formatDuration(3_600_000)).toBe("1h");
+    });
+    it("returns hours + minutes when remainder > 0", () => {
+        expect(formatDuration(5_400_000)).toBe("1h 30m");
+    });
+    it("returns hours only when remM = 0", () => {
+        expect(formatDuration(2 * 3_600_000)).toBe("2h");
+    });
+});
+
+describe("formatRelativeTimeWithAbsolute", () => {
+    it("uses time-only format (HH:MM) for dates within the same day", () => {
+        const recent = new Date(Date.now() - 30 * 60_000).toISOString();
+        const r = formatRelativeTimeWithAbsolute(recent);
+        // Same-day branch produces `relative (HH:MM)` — assert on the colon
+        // that only appears inside the time format.
+        expect(r).toMatch(/\(\d{1,2}:\d{2}\)$/);
+    });
+    it("uses month-day format for dates more than 1 day ago", () => {
+        const old = new Date(Date.now() - 2 * 24 * 60 * 60_000).toISOString();
+        const r = formatRelativeTimeWithAbsolute(old);
+        // Older-than-day branch produces a parenthesised calendar-date suffix.
+        // Locales render { month: "short", day: "numeric" } very differently
+        // ("May 15" / "15 May" / "16. 5." / "5月15日"), so the locale-invariant
+        // contract we assert is: parens contain a day digit and no time colon.
+        expect(r).toMatch(/\([^)]*\d[^)]*\)$/);
+        expect(r).not.toMatch(/\(\d{1,2}:\d{2}\)$/);
+    });
+});

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

@@ -5,20 +5,32 @@ import { generateUlid } from "@runwisp/common";
 
 export type ToastType = "success" | "error" | "warning" | "info";
 
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+
 export interface Toast {
     id: string;
     type: ToastType;
     message: string;
     duration?: number;
+    action?: ToastAction;
+}
+
+export interface ToastOptions {
+    duration?: number;
+    action?: ToastAction;
 }
 
 const DEFAULT_DURATION = 5000;
 
 class ToastStore {
     items = $state<Toast[]>([]);
-    private timers = new Map<string, ReturnType<typeof setTimeout>>();
+    private readonly timers = new Map<string, ReturnType<typeof setTimeout>>();
 
-    add(type: ToastType, message: string, duration = DEFAULT_DURATION): string {
+    add(type: ToastType, message: string, opts: ToastOptions = {}): string {
+        const duration = opts.duration ?? DEFAULT_DURATION;
         const existing = this.items.find((t) => t.type === type && t.message === message);
         if (existing) {
             this.refreshTimer(existing.id, duration);
@@ -26,7 +38,9 @@ class ToastStore {
         }
 
         const id = generateUlid();
-        this.items = [...this.items, { id, type, message, duration }];
+        const next: Toast = { id, type, message, duration };
+        if (opts.action) next.action = opts.action;
+        this.items = [...this.items, next];
         if (duration > 0) {
             this.scheduleRemoval(id, duration);
         }
@@ -59,20 +73,20 @@ class ToastStore {
         this.items = this.items.filter((t) => t.id !== id);
     }
 
-    success(message: string, duration?: number): string {
-        return this.add("success", message, duration);
+    success(message: string, opts?: ToastOptions): string {
+        return this.add("success", message, opts);
     }
 
-    error(message: string, duration?: number): string {
-        return this.add("error", message, duration);
+    error(message: string, opts?: ToastOptions): string {
+        return this.add("error", message, opts);
     }
 
-    warning(message: string, duration?: number): string {
-        return this.add("warning", message, duration);
+    warning(message: string, opts?: ToastOptions): string {
+        return this.add("warning", message, opts);
     }
 
-    info(message: string, duration?: number): string {
-        return this.add("info", message, duration);
+    info(message: string, opts?: ToastOptions): string {
+        return this.add("info", message, opts);
     }
 
     clear() {