@runwisp/ui 0.4.0

package/src/lib/components/TimezoneSelect.svelte

@@ -0,0 +1,127 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import Select from "./Select.svelte";
+    import { onMount } from "svelte";
+    import { type Component } from "svelte";
+
+    let {
+        value = $bindable(),
+        label = "Timezone",
+        disabled = false,
+        hint,
+    } = $props<{
+        value: string;
+        label?: string;
+        disabled?: boolean;
+        hint?: string;
+    }>();
+
+    type ZoneOption = {
+        value: string;
+        label: string;
+        group?: string | undefined;
+        description?: string | undefined;
+        icon?: Component;
+    };
+    let options = $state<ZoneOption[]>([]);
+
+    function getOffset(zone: string): string {
+        try {
+            const formatter = new Intl.DateTimeFormat("en-US", {
+                timeZone: zone,
+                timeZoneName: "shortOffset",
+            });
+            const parts = formatter.formatToParts(new Date());
+            const offset = parts.find((p) => p.type === "timeZoneName")?.value;
+            return offset?.replace("GMT", "UTC") || "";
+        } catch {
+            return "";
+        }
+    }
+
+    function toRegion(zone: string): string {
+        const separatorIndex = zone.indexOf("/");
+        return separatorIndex === -1 ? "Other" : zone.slice(0, separatorIndex);
+    }
+
+    function toPrettyLabel(zone: string): string {
+        return zone.split("/").slice(1).join(" / ").replace(/_/g, " ");
+    }
+
+    function toZoneOption(zone: string): ZoneOption {
+        const offset = getOffset(zone);
+        return {
+            value: zone,
+            label: toPrettyLabel(zone),
+            group: toRegion(zone),
+            description: offset ? `Timezone offset: ${offset}` : undefined,
+        };
+    }
+
+    function buildFixedOffsetOptions(): ZoneOption[] {
+        const fixedOffsets: ZoneOption[] = [];
+
+        for (let offsetHours = -12; offsetHours <= 14; offsetHours++) {
+            const signDisplay = offsetHours >= 0 ? "+" : "-";
+            const abs = Math.abs(offsetHours).toString().padStart(2, "0");
+            const label = `UTC${signDisplay}${abs}:00`;
+            const value =
+                offsetHours === 0
+                    ? "UTC"
+                    : `Etc/GMT${offsetHours > 0 ? "-" : "+"}${Math.abs(offsetHours)}`;
+
+            fixedOffsets.push({
+                value,
+                label,
+                group: "Fixed Offsets",
+                description: "Fixed constant time offset",
+            });
+        }
+
+        return fixedOffsets;
+    }
+
+    function buildTimezoneOptions(): ZoneOption[] {
+        const regions: Record<string, ZoneOption[]> = {};
+
+        for (const zone of Intl.supportedValuesOf("timeZone")) {
+            if (zone.startsWith("Etc/")) continue;
+
+            const option = toZoneOption(zone);
+            const region = option.group ?? "Other";
+            regions[region] ??= [];
+            regions[region].push(option);
+        }
+
+        const regionalOptions = Object.keys(regions)
+            .sort()
+            .flatMap((region) => regions[region]!.sort((a, b) => a.label.localeCompare(b.label)));
+
+        return [...buildFixedOffsetOptions(), ...regionalOptions];
+    }
+
+    onMount(() => {
+        try {
+            options = buildTimezoneOptions();
+
+            if (!value) {
+                value = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+            }
+        } catch (e) {
+            console.warn("Timezone load failed", e);
+            options = [{ value: "UTC", label: "UTC", description: "Universal Coordinated Time" }];
+        }
+    });
+</script>
+
+<Select
+    {label}
+    bind:value
+    {disabled}
+    {hint}
+    placeholder="Select timezone..."
+    {options}
+    searchable={true}
+></Select>

package/src/lib/components/ToastContainer.svelte

@@ -0,0 +1,84 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    /**
+     * Toast notification component
+     * Displays toast notifications for user feedback
+     */
+    import { fly, fade } from "svelte/transition";
+    import { CircleCheck, CircleX, Info, TriangleAlert, X } from "@lucide/svelte";
+    import { toast, type Toast } from "../utils/toast.svelte.js";
+
+    function getIcon(type: Toast["type"]) {
+        switch (type) {
+            case "success":
+                return CircleCheck;
+            case "error":
+                return CircleX;
+            case "warning":
+                return TriangleAlert;
+            case "info":
+                return Info;
+        }
+    }
+
+    function getColorClasses(type: Toast["type"]) {
+        switch (type) {
+            case "success":
+                return "border-success-200 text-success-700";
+            case "error":
+                return "border-danger-200 text-danger-700";
+            case "warning":
+                return "border-warning-200 text-warning-700";
+            case "info":
+                return "border-wisp-200 text-wisp-700";
+        }
+    }
+
+    function getIconColor(type: Toast["type"]) {
+        switch (type) {
+            case "success":
+                return "text-success-surface";
+            case "error":
+                return "text-danger-surface";
+            case "warning":
+                return "text-warning-surface";
+            case "info":
+                return "text-info";
+        }
+    }
+</script>
+
+<!-- Toast Container -->
+<div
+    class="pointer-events-none fixed bottom-4 left-1/2 z-[100] flex -translate-x-1/2 flex-col gap-2"
+    role="region"
+    aria-label="Notifications"
+    aria-live="polite"
+>
+    {#each toast.items as toastItem (toastItem.id)}
+        {@const Icon = getIcon(toastItem.type)}
+        <div
+            in:fly={{ y: 20, duration: 300 }}
+            out:fade={{ duration: 200 }}
+            class="pointer-events-auto isolate flex max-w-md min-w-[320px] items-start gap-3 rounded-xl border bg-surface-overlay/95 px-4 py-3 shadow-lg ring-1 ring-on-surface/5 backdrop-blur-md {getColorClasses(
+                toastItem.type,
+            )}"
+            role="alert"
+        >
+            <Icon
+                class="mt-0.5 h-5 w-5 flex-shrink-0 {getIconColor(toastItem.type)}"
+                aria-hidden="true"
+            />
+            <p class="flex-1 text-sm font-medium">{toastItem.message}</p>
+            <button
+                onclick={() => toast.remove(toastItem.id)}
+                class="flex-shrink-0 rounded-lg p-1 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface"
+                aria-label="Close notification"
+            >
+                <X class="h-4 w-4" aria-hidden="true" />
+            </button>
+        </div>
+    {/each}
+</div>

package/src/lib/components/Toggle.svelte

@@ -0,0 +1,84 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    interface Props {
+        checked?: boolean;
+        disabled?: boolean;
+        size?: "sm" | "md" | "lg";
+        label?: string;
+        description?: string;
+        onchange?: (checked: boolean) => void;
+        class?: string;
+    }
+
+    let {
+        checked = $bindable(),
+        disabled = false,
+        size = "md",
+        label,
+        description,
+        onchange,
+        class: className = "",
+    }: Props = $props();
+
+    function toggle() {
+        if (disabled) return;
+        checked = !checked;
+        onchange?.(checked);
+    }
+
+    const sizeClasses: Record<
+        "sm" | "md" | "lg",
+        { track: string; thumb: string; translate: string; text: string }
+    > = {
+        sm: { track: "h-5 w-9", thumb: "h-4 w-4", translate: "translate-x-4", text: "text-sm" },
+        md: { track: "h-6 w-11", thumb: "h-5 w-5", translate: "translate-x-5", text: "text-sm" },
+        lg: { track: "h-7 w-14", thumb: "h-6 w-6", translate: "translate-x-7", text: "text-base" },
+    };
+
+    const sizeConfig = $derived(sizeClasses[size]);
+</script>
+
+<label
+    class="inline-flex items-start gap-3 {disabled
+        ? 'cursor-not-allowed opacity-50'
+        : 'cursor-pointer'} {className}"
+>
+    <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label ?? description ?? "Toggle"}
+        {disabled}
+        onclick={toggle}
+        class="
+			relative inline-flex shrink-0 items-center rounded-full
+			{sizeConfig.track}
+			transition-colors duration-200
+			focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+			{checked ? 'bg-primary' : 'bg-outline-hover'}
+			{disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+		"
+    >
+        <span
+            class="
+				inline-block rounded-full bg-surface-raised shadow-sm
+				{sizeConfig.thumb}
+				transform transition-transform duration-200
+				{checked ? sizeConfig.translate : 'translate-x-0.5'}
+			"
+        ></span>
+    </button>
+
+    {#if label || description}
+        <div class="flex flex-col gap-0.5">
+            {#if label}
+                <span class="{sizeConfig.text} font-medium text-on-surface">{label}</span>
+            {/if}
+            {#if description}
+                <span class="text-sm text-on-surface-muted">{description}</span>
+            {/if}
+        </div>
+    {/if}
+</label>

package/src/lib/components/Tooltip.svelte

@@ -0,0 +1,56 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type TooltipPosition = "top" | "bottom" | "left" | "right";
+
+    interface Props {
+        content: string;
+        position?: TooltipPosition;
+        children: Snippet;
+        class?: string;
+    }
+
+    let { content, position = "top", children, class: className = "" }: Props = $props();
+
+    const positionClasses: Record<TooltipPosition, string> = {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+        left: "right-full top-1/2 -translate-y-1/2 mr-2",
+        right: "left-full top-1/2 -translate-y-1/2 ml-2",
+    };
+
+    const arrowClasses: Record<TooltipPosition, string> = {
+        top: "top-full left-1/2 -translate-x-1/2 border-t-mist-800 border-x-transparent border-b-transparent",
+        bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-mist-800 border-x-transparent border-t-transparent",
+        left: "left-full top-1/2 -translate-y-1/2 border-l-mist-800 border-y-transparent border-r-transparent",
+        right: "right-full top-1/2 -translate-y-1/2 border-r-mist-800 border-y-transparent border-l-transparent",
+    };
+</script>
+
+<div class="group relative inline-block {className}">
+    {@render children()}
+
+    <div
+        class="
+			absolute z-50 {positionClasses[position]}
+			pointer-events-none invisible rounded-lg
+			bg-mist-800 px-2.5 py-1.5 text-xs
+			font-medium
+			whitespace-nowrap text-white opacity-0 transition-opacity
+			duration-150 group-hover:visible
+			group-hover:opacity-100
+		"
+        role="tooltip"
+    >
+        {content}
+        <span
+            class="
+				absolute h-0 w-0
+				border-4 {arrowClasses[position]}
+			"
+        ></span>
+    </div>
+</div>

package/src/lib/components/button-styles.ts

@@ -0,0 +1,51 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+
+export const BUTTON_BASE = `
+    group
+    inline-flex items-center justify-center gap-2
+    font-medium cursor-pointer select-none
+    border border-transparent
+    focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/10 focus-visible:border-ring
+    disabled:opacity-50 disabled:cursor-not-allowed
+    transition-all duration-normal ease-out
+    active:scale-[0.98]
+`;
+
+export const BUTTON_VARIANTS: Record<ButtonVariant, string> = {
+    primary: `
+        bg-primary text-on-primary shadow-sm shadow-primary/20
+        hover:bg-primary-hover hover:shadow-md hover:shadow-primary/30
+        active:bg-primary-active
+    `,
+    secondary: `
+        bg-surface-raised text-on-surface-muted border-outline shadow-sm
+        hover:bg-surface-sunken hover:text-on-surface hover:border-outline-hover
+        active:bg-surface-sunken
+    `,
+    ghost: `
+        bg-transparent text-on-surface-muted
+        hover:bg-surface-sunken hover:text-on-surface
+        active:bg-surface-sunken
+    `,
+    danger: `
+        bg-danger-surface text-on-danger shadow-sm shadow-danger-surface/20
+        hover:bg-danger-hover hover:shadow-md hover:shadow-danger-surface/30
+        active:bg-danger-active
+    `,
+    success: `
+        bg-success-surface text-on-success shadow-sm shadow-success-surface/20
+        hover:bg-success-hover hover:shadow-md hover:shadow-success-surface/30
+        active:bg-success-surface
+    `,
+};
+
+export const BUTTON_SIZES: Record<ButtonSize, string> = {
+    xs: "text-xs px-2 py-1 rounded-md",
+    sm: "text-sm px-3 py-1.5 rounded-lg",
+    md: "text-sm px-4 py-2 rounded-lg",
+    lg: "text-base px-6 py-3 rounded-xl",
+};

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

@@ -0,0 +1,252 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { untrack } from "svelte";
+    import { Server, Hash, Terminal as TerminalIcon, Download } from "@lucide/svelte";
+    import Badge from "../Badge.svelte";
+    import LogConsole from "../LogConsole.svelte";
+    import type { Run } from "./types.js";
+    import type { LogEvent, LogSlice } from "../../log-console/types.js";
+    import { formatDateTime } from "../../utils/format.js";
+    import { formatShortId } from "../../utils/id.js";
+    import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
+    import { runDuration } from "./run-helpers.js";
+
+    let {
+        run,
+        fetchLogs,
+        streamLogs,
+        showTaskName = false,
+    }: {
+        run: Run | undefined;
+        fetchLogs: (
+            runId: string,
+            from: number,
+            to: number,
+        ) => Promise<LogSlice | LogEvent | undefined> | LogSlice | LogEvent | undefined;
+        streamLogs?: (
+            runId: string,
+            onEvent: (event: LogEvent) => void,
+            initialState?: { fromLine: number },
+        ) => () => void;
+        showTaskName?: boolean;
+    } = $props();
+
+    const TAIL_LINES = 1000;
+
+    let logConsole = $state<{ onStream: (event: LogEvent) => void } | null>(null);
+
+    // Derive a stable scalar so the effect only re-runs when the id actually
+    // changes, not on every run object reference swap from SSE array updates.
+    let runId = $derived(run?.id);
+
+    $effect(() => {
+        const id = runId;
+        if (!id) return;
+
+        const stream = streamLogs;
+        if (!stream) return;
+
+        let cleanup: (() => void) | undefined;
+
+        untrack(() => {
+            // Single SSE call seeds the viewport via backfill (negative
+            // fromLine = tail-from-end) and continues with live events on
+            // the same connection. No tail+stream handoff, no duplicate
+            // replay, native Last-Event-ID resume on reconnect.
+            cleanup = stream(
+                id,
+                (event: LogEvent) => {
+                    if (logConsole) logConsole.onStream(event);
+                },
+                { fromLine: -TAIL_LINES },
+            );
+        });
+
+        return () => {
+            if (cleanup) cleanup();
+        };
+    });
+</script>
+
+{#if run}
+    {@const config = getRunStatusConfig(runDisplayStatus(run))}
+    {@const DetailIcon = config.icon}
+    {@const duration = runDuration(run)}
+    <!-- Detailed Header -->
+    <div class="shrink-0 border-b border-outline-faint bg-surface-raised p-6">
+        <div class="flex flex-col justify-between gap-6 lg:flex-row lg:items-start">
+            <div class="flex items-start gap-4">
+                <!-- Large Status Icon -->
+                <div
+                    class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl {config.bg} {config.color}"
+                >
+                    <DetailIcon size={32} class={run.status === "running" ? "animate-spin" : ""} />
+                </div>
+
+                <div>
+                    <div class="mb-1 flex items-center gap-3">
+                        <h2 class="text-xl font-bold text-on-surface">
+                            {#if showTaskName}
+                                {run.task_name}{#if run.instance_index > 0}<span
+                                        class="text-on-surface-muted">#{run.instance_index}</span
+                                    >{/if}
+                            {:else}
+                                Run #{formatShortId(run.id)}{#if run.instance_index > 0}
+                                    <span class="text-on-surface-muted"
+                                        >· instance #{run.instance_index}</span
+                                    >
+                                {/if}
+                            {/if}
+                        </h2>
+                        <Badge
+                            variant={runDisplayStatus(run) === "success"
+                                ? "success"
+                                : run.status === "running"
+                                  ? "info"
+                                  : "danger"}
+                        >
+                            {runDisplayStatus(run).toUpperCase()}
+                        </Badge>
+                    </div>
+                    <div
+                        class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-on-surface-muted"
+                    >
+                        {#if showTaskName}
+                            <div
+                                class="flex items-center gap-1.5 font-mono text-xs text-on-surface-faint"
+                            >
+                                <Hash size={12} />
+                                Run ID: <span class="text-on-surface-muted">{run.id}</span>
+                            </div>
+                            <div
+                                class="hidden h-1 w-1 rounded-full bg-outline-faint sm:block"
+                            ></div>
+                            <div class="flex items-center gap-1.5">
+                                <Server size={14} />
+                                <span
+                                    >Triggered by <span class="font-medium text-on-surface"
+                                        >{run.triggered_by}</span
+                                    ></span
+                                >
+                            </div>
+                        {:else}
+                            <div class="flex items-center gap-1.5">
+                                <Server size={14} />
+                                <span
+                                    >Triggered by <span class="font-medium text-on-surface"
+                                        >{run.triggered_by}</span
+                                    ></span
+                                >
+                            </div>
+                            <div
+                                class="hidden h-1 w-1 rounded-full bg-outline-faint sm:block"
+                            ></div>
+                            <div
+                                class="flex items-center gap-1.5 font-mono text-xs text-on-surface-faint"
+                            >
+                                <Hash size={12} />
+                                {run.id}
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+
+            <!-- Stats Grid -->
+            <div
+                class="grid grid-cols-3 gap-6 rounded-xl border border-outline-faint bg-surface-sunken px-6 py-3"
+            >
+                <div class="flex flex-col gap-1">
+                    <span
+                        class="text-xs font-semibold tracking-wide text-on-surface-faint uppercase"
+                        >Started</span
+                    >
+                    <span class="font-mono text-sm font-medium whitespace-nowrap text-on-surface">
+                        {run.start_at ? formatDateTime(run.start_at) : "--:--"}
+                    </span>
+                </div>
+
+                <div class="flex flex-col gap-1 border-l border-outline pl-6">
+                    <span
+                        class="text-xs font-semibold tracking-wide text-on-surface-faint uppercase"
+                        >Duration</span
+                    >
+                    <span class="font-mono text-sm font-medium text-on-surface">
+                        {duration ?? "--"}
+                    </span>
+                </div>
+
+                <div class="flex flex-col gap-1 border-l border-outline pl-6">
+                    <span
+                        class="text-xs font-semibold tracking-wide text-on-surface-faint uppercase"
+                        >Exited</span
+                    >
+                    <span
+                        class="text-sm font-medium {run.exit_code === 0
+                            ? 'text-success-surface'
+                            : 'text-on-surface'} font-mono"
+                    >
+                        {typeof run.exit_code === "number" ? `Code ${run.exit_code}` : "-"}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Console View -->
+    <div class="flex min-h-0 flex-1 flex-col bg-slate-950">
+        <div
+            class="flex shrink-0 items-center justify-between border-b border-slate-800 bg-slate-900/50 px-4 py-2 font-mono text-xs text-slate-400"
+        >
+            <div class="flex items-center gap-2">
+                <TerminalIcon size={14} />
+                <span>Console Output</span>
+            </div>
+            <div class="flex items-center gap-3">
+                {#if run.status === "running"}
+                    <div class="text-info-surface flex items-center gap-1.5">
+                        <div class="bg-info-surface h-1.5 w-1.5 animate-pulse rounded-full"></div>
+                        Live
+                    </div>
+                {:else if run.status === "pending"}
+                    <div class="flex items-center gap-1.5 text-warning-surface">
+                        <div
+                            class="h-1.5 w-1.5 animate-pulse rounded-full bg-warning-surface"
+                        ></div>
+                        Pending
+                    </div>
+                {/if}
+                <a
+                    href="/api/tasks/{encodeURIComponent(run.task_name)}/runs/{encodeURIComponent(
+                        run.id,
+                    )}/log/raw"
+                    download="{run.task_name}-{run.id}.log"
+                    class="flex items-center gap-1.5 rounded border border-slate-700 px-2 py-1 text-slate-300 transition-colors hover:border-slate-500 hover:bg-slate-800 hover:text-slate-100"
+                    title="Download the full log (rotated and current parts as one file)"
+                >
+                    <Download size={12} />
+                    Download
+                </a>
+            </div>
+        </div>
+        {#key run.id}
+            <LogConsole
+                bind:this={logConsole}
+                fetchLogs={(f: number, t: number) => fetchLogs(run.id, f, t)}
+                class="min-h-0 flex-1"
+            />
+        {/key}
+    </div>
+{:else}
+    <div
+        class="flex flex-1 flex-col items-center justify-center bg-surface-sunken/30 text-on-surface-faint"
+    >
+        <div class="mb-4 rounded-full border border-outline bg-surface-raised p-4 shadow-sm">
+            <Server size={32} class="text-outline-faint" />
+        </div>
+        <h3 class="mb-1 font-medium text-on-surface">No Run Selected</h3>
+        <p class="text-sm">Select a run from the history on the left to view details.</p>
+    </div>
+{/if}