@runwisp/ui 0.4.0

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

@@ -0,0 +1,331 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import {
+        Clock,
+        Timer,
+        ChevronLeft,
+        ChevronRight,
+        ArrowUpDown,
+        Search,
+        Funnel,
+    } from "@lucide/svelte";
+    import Button from "../Button.svelte";
+    import Badge from "../Badge.svelte";
+    import type { Run } from "./types.js";
+    import type { RunStatus } from "@runwisp/common";
+    import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
+    import { runDuration } from "./run-helpers.js";
+    import { formatRelativeTime } from "../../utils/format.js";
+    import { formatShortId } from "../../utils/id.js";
+
+    let {
+        runs,
+        selectedRunId = $bindable(null),
+        onselect,
+        showFilters = false,
+        showTaskName = false,
+        headerLabel = "Run History",
+        emptyText = "No runs yet",
+    }: {
+        runs: Run[];
+        selectedRunId?: string | null;
+        onselect?: (runId: string) => void;
+        showFilters?: boolean;
+        showTaskName?: boolean;
+        headerLabel?: string;
+        emptyText?: string;
+    } = $props();
+
+    function selectRun(runId: string) {
+        selectedRunId = runId;
+        onselect?.(runId);
+    }
+
+    let searchQuery = $state("");
+    let statusFilter = $state<RunStatus | "all">("all");
+    let sortDirection = $state<"asc" | "desc">("desc");
+    let currentPage = $state(1);
+    const pageSize = 10;
+
+    let filteredRuns = $derived(
+        showFilters
+            ? runs.filter((r: Run) => {
+                  if (statusFilter !== "all" && runDisplayStatus(r) !== statusFilter) return false;
+                  if (searchQuery.trim()) {
+                      const q = searchQuery.toLowerCase();
+                      return (
+                          r.id.toLowerCase().includes(q) || r.task_name.toLowerCase().includes(q)
+                      );
+                  }
+                  return true;
+              })
+            : runs,
+    );
+
+    let sortedRuns = $derived(
+        [...filteredRuns].sort((a: Run, b: Run) => {
+            const dateA = new Date(a.created_at).getTime();
+            const dateB = new Date(b.created_at).getTime();
+            return sortDirection === "desc" ? dateB - dateA : dateA - dateB;
+        }),
+    );
+
+    let totalPages = $derived(Math.max(1, Math.ceil(filteredRuns.length / pageSize)));
+    let paginatedRuns = $derived(
+        sortedRuns.slice((currentPage - 1) * pageSize, currentPage * pageSize),
+    );
+
+    $effect(() => {
+        if (!selectedRunId) return;
+        const idx = sortedRuns.findIndex((r: Run) => r.id === selectedRunId);
+        if (idx < 0) return;
+        const targetPage = Math.floor(idx / pageSize) + 1;
+        if (targetPage !== currentPage) currentPage = targetPage;
+    });
+</script>
+
+<div
+    class="flex flex-col overflow-hidden rounded-xl border border-outline bg-surface-raised shadow-sm md:col-span-4 lg:col-span-3"
+>
+    {#if showFilters}
+        <!-- Filter Header -->
+        <div class="shrink-0 space-y-3 border-b border-outline-faint bg-surface-sunken p-3">
+            <div class="flex items-center justify-between">
+                <span class="text-xs font-semibold tracking-wider text-on-surface-muted uppercase"
+                    >{headerLabel}</span
+                >
+                <Badge
+                    variant="default"
+                    size="sm"
+                    class="bg-outline text-on-surface hover:bg-outline-faint"
+                    >{filteredRuns.length}</Badge
+                >
+            </div>
+
+            <div class="relative">
+                <Search
+                    class="absolute top-1/2 left-2.5 -translate-y-1/2 text-on-surface-faint"
+                    size={14}
+                />
+                <input
+                    type="text"
+                    bind:value={searchQuery}
+                    placeholder="Search task or ID..."
+                    class="h-8 w-full rounded-md border border-outline bg-surface-raised pr-3 pl-8 text-sm transition-all placeholder:text-on-surface-faint focus:border-ring focus:ring-2 focus:ring-ring/20 focus:outline-none"
+                />
+            </div>
+
+            <div class="flex items-center gap-2">
+                <div class="relative flex-1">
+                    <select
+                        bind:value={statusFilter}
+                        class="h-7 w-full appearance-none rounded-md border border-outline bg-surface-raised pr-6 pl-2 text-xs text-on-surface-muted focus:border-ring focus:outline-none"
+                    >
+                        <option value="all">All Statuses</option>
+                        <option value="running">Running</option>
+                        <option value="success">Success</option>
+                        <option value="failed">Failed</option>
+                        <option value="crashed">Crashed</option>
+                        <option value="skipped">Skipped</option>
+                    </select>
+                    <Funnel
+                        class="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-on-surface-faint"
+                        size={12}
+                    />
+                </div>
+
+                <Button
+                    variant="ghost"
+                    size="xs"
+                    class="h-7 w-7 px-0"
+                    onclick={() => (sortDirection = sortDirection === "desc" ? "asc" : "desc")}
+                    title="Toggle Sort Order"
+                >
+                    {#snippet icon()}
+                        <ArrowUpDown
+                            size={14}
+                            class="text-on-surface-muted {sortDirection === 'asc'
+                                ? 'rotate-180'
+                                : ''}"
+                        />
+                    {/snippet}
+                </Button>
+            </div>
+        </div>
+    {:else}
+        <!-- Simple Header -->
+        <div
+            class="flex shrink-0 items-center justify-between border-b border-outline-faint bg-surface-sunken p-3"
+        >
+            <div class="flex items-center gap-2">
+                <span class="text-xs font-semibold tracking-wider text-on-surface-muted uppercase"
+                    >{headerLabel}</span
+                >
+                <Badge variant="default" size="sm">{runs.length}</Badge>
+            </div>
+            <div class="flex items-center gap-1">
+                <Button
+                    variant="ghost"
+                    size="xs"
+                    onclick={() => (sortDirection = sortDirection === "desc" ? "asc" : "desc")}
+                    title="Sort by Date"
+                >
+                    {#snippet icon()}
+                        <ArrowUpDown
+                            size={14}
+                            class="text-on-surface-muted {sortDirection === 'asc'
+                                ? 'rotate-180'
+                                : ''}"
+                        />
+                    {/snippet}
+                </Button>
+            </div>
+        </div>
+    {/if}
+
+    <div class="min-h-0 flex-1 space-y-1 overflow-y-auto p-2">
+        {#each paginatedRuns as run (run.id)}
+            {@const isActive = selectedRunId === run.id}
+            {@const config = getRunStatusConfig(runDisplayStatus(run))}
+            {@const Icon = config.icon}
+            {@const duration = runDuration(run)}
+            <button
+                class="group duration-normal relative w-full rounded-lg border p-3 text-left transition-all select-none
+                    {isActive
+                    ? 'border-primary-soft bg-primary-soft/50 shadow-sm'
+                    : 'border-transparent bg-surface-raised hover:border-outline hover:bg-surface-sunken'}"
+                onclick={() => selectRun(run.id)}
+                onkeydown={(e) => e.key === "Enter" && selectRun(run.id)}
+            >
+                {#if showTaskName}
+                    <!-- Runs variant: task name as primary, shortId secondary -->
+                    <div class="mb-1 flex items-center justify-between">
+                        <div class="flex min-w-0 items-center gap-2">
+                            <div class="{config.color} shrink-0">
+                                <Icon
+                                    size={16}
+                                    class={run.status === "running" ? "animate-spin" : ""}
+                                />
+                            </div>
+                            <span class="truncate text-sm font-semibold text-on-surface">
+                                {run.task_name}{#if run.instance_index > 0}<span
+                                        class="text-on-surface-muted">#{run.instance_index}</span
+                                    >{/if}
+                            </span>
+                        </div>
+                        <span
+                            class="shrink-0 text-[10px] {isActive
+                                ? 'font-medium text-primary'
+                                : 'text-on-surface-faint'}"
+                        >
+                            {formatRelativeTime(run.start_at || run.created_at)}
+                        </span>
+                    </div>
+
+                    <div class="flex items-center justify-between pl-6 text-xs">
+                        <div
+                            class="flex items-center gap-1 font-mono text-[11px] text-on-surface-muted"
+                        >
+                            #{formatShortId(run.id)}
+                        </div>
+                        {#if duration}
+                            <div
+                                class="flex items-center gap-1 text-on-surface-faint {isActive
+                                    ? 'text-primary'
+                                    : ''}"
+                            >
+                                <Timer size={10} />
+                                <span class="font-mono">{duration}</span>
+                            </div>
+                        {/if}
+                    </div>
+                {:else}
+                    <!-- Task variant: shortId as primary, status secondary -->
+                    <div class="mb-1.5 flex items-center justify-between">
+                        <div class="flex items-center gap-2">
+                            <div class={config.color}>
+                                <Icon
+                                    size={16}
+                                    class={run.status === "running" ? "animate-spin" : ""}
+                                />
+                            </div>
+                            <span class="font-mono text-xs font-medium text-on-surface">
+                                #{formatShortId(run.id)}
+                            </span>
+                        </div>
+                        <span
+                            class="text-[10px] {isActive
+                                ? 'font-medium text-primary'
+                                : 'text-on-surface-faint'}"
+                        >
+                            {formatRelativeTime(run.start_at || run.created_at)}
+                        </span>
+                    </div>
+
+                    <div class="flex items-center justify-between text-xs">
+                        <div class="flex items-center gap-2 text-on-surface-muted">
+                            <span class="capitalize">{runDisplayStatus(run)}</span>
+                            {#if run.instance_index > 0}
+                                <span class="font-mono text-[11px] text-on-surface-faint"
+                                    >instance #{run.instance_index}</span
+                                >
+                            {/if}
+                        </div>
+                        {#if duration}
+                            <div
+                                class="flex items-center gap-1 text-on-surface-faint {isActive
+                                    ? 'text-primary'
+                                    : ''}"
+                            >
+                                <Timer size={10} />
+                                <span class="font-mono">{duration}</span>
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
+
+                {#if isActive}
+                    <div
+                        class="absolute top-1/2 left-0 h-8 w-1 -translate-y-1/2 rounded-r-full bg-primary"
+                    ></div>
+                {/if}
+            </button>
+        {/each}
+
+        {#if paginatedRuns.length === 0}
+            <div class="flex flex-col items-center gap-3 p-8 text-center text-on-surface-faint">
+                <div class="rounded-full bg-surface-sunken p-3">
+                    <Clock size={24} class="opacity-50" />
+                </div>
+                <span class="text-sm">{emptyText}</span>
+            </div>
+        {/if}
+    </div>
+
+    <!-- Pagination Footer -->
+    <div
+        class="flex shrink-0 items-center justify-between border-t border-outline-faint bg-surface-sunken p-2"
+    >
+        <Button
+            variant="ghost"
+            size="xs"
+            disabled={currentPage === 1}
+            onclick={() => currentPage--}
+        >
+            {#snippet icon()}<ChevronLeft size={14} />{/snippet}
+        </Button>
+        <span class="text-[10px] font-medium tracking-wide text-on-surface-muted uppercase">
+            Page {currentPage} of {totalPages}
+        </span>
+        <Button
+            variant="ghost"
+            size="xs"
+            disabled={currentPage === totalPages}
+            onclick={() => currentPage++}
+        >
+            {#snippet icon()}<ChevronRight size={14} />{/snippet}
+        </Button>
+    </div>
+</div>

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

@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Run } from "@runwisp/common";
+import { formatDuration } from "../../utils/format.js";
+
+export function runDuration(run: Pick<Run, "start_at" | "end_at">): 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();
+    return formatDuration(end - start);
+}

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

@@ -0,0 +1,141 @@
+// Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0
+
+import {
+    CircleCheck,
+    CircleX,
+    CircleAlert,
+    LoaderCircle,
+    Clock,
+    CircleStop,
+    TimerOff,
+    CircleDashed,
+    SkipForward,
+    FileExclamationPoint,
+} from "@lucide/svelte";
+import type { Component } from "svelte";
+import { displayStatus, type RunStatus } from "@runwisp/common";
+import type { Run } from "@runwisp/common";
+
+export interface RunStatusConfig {
+    icon: Component;
+    color: string;
+    bg: string;
+    border: string;
+    dot: string;
+    badge: string;
+}
+
+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",
+    },
+    success: {
+        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",
+    },
+    failed: {
+        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",
+    },
+    crashed: {
+        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",
+    },
+    stopped: {
+        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",
+    },
+    timeout: {
+        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",
+    },
+    skipped: {
+        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",
+    },
+    log_overflow: {
+        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",
+    },
+    queue_full: {
+        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",
+    },
+    dst_skipped: {
+        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",
+    },
+    daemon_stopped: {
+        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",
+    },
+    pending: {
+        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",
+    },
+    ended: {
+        icon: CircleDashed,
+        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",
+    },
+};
+
+export function getRunStatusConfig(status: RunStatus): RunStatusConfig {
+    return RUN_STATUS_CONFIG[status];
+}
+
+export function runDisplayStatus(run: Pick<Run, "status" | "end_reason">): RunStatus {
+    return displayStatus(run.status, run.end_reason);
+}

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

@@ -0,0 +1,35 @@
+// 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;
+    activeTasks: number;
+    successRate: number;
+}

package/src/lib/index.ts

@@ -0,0 +1,122 @@
+// 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";
+
+// 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 {
+    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";
+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 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";
+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";
+export { default as DataGrid } from "./components/DataGrid.svelte";
+export { default as Progress } from "./components/Progress.svelte";
+export { default as Skeleton } from "./components/Skeleton.svelte";
+export { default as Sparkline } from "./components/Sparkline.svelte";
+export { default as StatusIndicator } from "./components/StatusIndicator.svelte";
+export { default as Table } from "./components/Table.svelte";
+export { default as TableBody } from "./components/TableBody.svelte";
+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";
+export { default as Dropdown } from "./components/Dropdown.svelte";
+export { default as EmptyState } from "./components/EmptyState.svelte";
+export { default as ErrorState } from "./components/ErrorState.svelte";
+export { default as Modal } from "./components/Modal.svelte";
+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";
+
+// Log console
+export { default as LogConsole } from "./components/LogConsole.svelte";
+export type {
+    FetchLogsFn,
+    LineNumber,
+    LogEvent,
+    LogMessage,
+    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 {
+    getRunStatusConfig,
+    runDisplayStatus,
+    RUN_STATUS_CONFIG,
+    type RunStatusConfig,
+} from "./components/dashboard/status-config.js";
+export { runDuration } 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 {
+    formatBytes,
+    formatRelativeTime,
+    formatRelativeTimeWithAbsolute,
+    formatDateTime,
+    formatDuration,
+    formatFullDateTime,
+} from "./utils/format.js";
+export { formatShortId } from "./utils/id.js";