@runwisp/ui 1.5.0 → 1.7.0

package/src/lib/components/Modal.svelte

@@ -22,6 +22,7 @@
     }
 
     import { trapFocus } from "../actions/focusTrap.js";
+    import { modalDialogHandlers, showModal } from "../actions/modal-dialog.js";
 
     let {
         open = $bindable(false),
@@ -51,41 +52,17 @@
         onClose?.();
     }
 
-    // showModal() puts the dialog in the top layer and makes the page behind it
-    // inert. The dialog stays open while mounted; `open` drives (un)mounting.
-    function showModal(node: HTMLDialogElement) {
-        node.showModal();
-    }
-
-    function handleCancel(e: Event) {
-        e.preventDefault();
-        if (closable) handleClose();
-    }
-
-    // Chrome ignores preventDefault() on a repeated Escape and closes anyway;
-    // reopen so a non-closable modal stays up while mounted.
-    function handleNativeClose(e: Event & { currentTarget: HTMLDialogElement }) {
-        if (open) e.currentTarget.showModal();
-    }
-
-    // Only a press that starts and ends on the backdrop closes the modal, so a
-    // text selection dragged out of the panel doesn't.
-    let pressedBackdrop = false;
-    function handlePointerDown(e: PointerEvent) {
-        pressedBackdrop = e.target === e.currentTarget;
-    }
-    function handleBackdropClick(e: MouseEvent) {
-        if (closable && pressedBackdrop && e.target === e.currentTarget) handleClose();
-    }
+    const dialogHandlers = modalDialogHandlers({
+        closable: () => closable,
+        isOpen: () => open,
+        close: handleClose,
+    });
 </script>
 
 {#if open}
     <dialog
         use:showModal
-        oncancel={handleCancel}
-        onclose={handleNativeClose}
-        onpointerdown={handlePointerDown}
-        onclick={handleBackdropClick}
+        {...dialogHandlers}
         aria-labelledby={title ? titleId : undefined}
         class="
 			fixed inset-0 m-0 flex h-full max-h-none w-full max-w-none

package/src/lib/components/SearchInput.svelte

@@ -41,7 +41,7 @@
     // External writes to `value` (Reset / clear-all) win immediately: adopt them
     // and drop any pending debounce. Depends only on `value` (raw is read
     // untracked), so typing never re-enters here. Tiny race: a reset that leaves
-    // `value` unchanged ("" -> "") can't cancel a first-keystroke debounce —
+    // `value` unchanged ("" -> "") can't cancel a first-keystroke debounce,
     // negligible at 250ms. ponytail: guarded two-way sync, fine for one field.
     $effect(() => {
         const v = value;

package/src/lib/components/Select.svelte

@@ -21,7 +21,6 @@
     import { floating, isOutsideClick } from "../actions/floating.js";
     import { portal } from "../actions/portal.js";
     import { trapFocus } from "../actions/focusTrap.js";
-    import { generateUlid } from "@runwisp/common";
 
     type SelectSize = "sm" | "md" | "lg";
 
@@ -41,6 +40,8 @@
         onchange?: (value: unknown) => void;
     }
 
+    const uid = $props.id();
+
     let {
         value = $bindable(),
         options = [],
@@ -52,7 +53,7 @@
         error,
         hint,
         class: className = "",
-        id = `select-${generateUlid()}`,
+        id = `select-${uid}`,
         name,
         onchange,
         onsearch,

package/src/lib/components/Sparkline.svelte

@@ -12,7 +12,7 @@
     }
 
     // `currentColor` by default so the caller can theme us with a Tailwind
-    // text-* class — that's the only way to flip on .dark without burning a
+    // text-* class, that's the only way to flip on .dark without burning a
     // hardcoded hex in here.
     let {
         data,
@@ -47,7 +47,7 @@
         return `${pathD} L${lastX.toFixed(1)},${height} L0,${height} Z`;
     });
 
-    // Use `fill-opacity` rather than appending "18" to a hex — that trick
+    // Use `fill-opacity` rather than appending "18" to a hex, that trick
     // breaks for `currentColor` / `oklch()` / `var(...)` values.
     let resolvedFill = $derived(fillColor ?? color);
     let resolvedFillOpacity = $derived(fillColor === undefined ? fillOpacity : 1);

package/src/lib/components/Spinner.svelte

@@ -5,8 +5,10 @@
     type SpinnerSize = "xs" | "sm" | "md" | "lg";
 
     interface Props {
-        size?: SpinnerSize;
+        /** A preset, or an exact pixel size. */
+        size?: SpinnerSize | number;
         color?: string;
+        /** Screen-reader text. An empty label drops the status role, for spinners inside a labelled control. */
         label?: string;
         class?: string;
     }
@@ -26,12 +28,15 @@
     };
 </script>
 
-<div role="status" class="inline-flex {className}">
+<span role={label ? "status" : undefined} class="inline-flex {className}">
     <svg
-        class="animate-spin {sizeClasses[size]}"
+        class="animate-spin {typeof size === 'number' ? '' : sizeClasses[size]}"
+        width={typeof size === "number" ? size : undefined}
+        height={typeof size === "number" ? size : undefined}
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
     >
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke={color} stroke-width="4"></circle>
         <path
@@ -40,5 +45,5 @@
             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
         ></path>
     </svg>
-    <span class="sr-only">{label}</span>
-</div>
+    {#if label}<span class="sr-only">{label}</span>{/if}
+</span>

package/src/lib/components/StatusDot.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
     interface Props {
         tone?: StatusDotTone;
-        /** Radar ping around the dot — use for "live" states only. */
+        /** Radar ping around the dot, use for "live" states only. */
         pulse?: boolean;
         size?: "sm" | "md" | "lg";
         class?: string;

package/src/lib/components/StatusIndicator.svelte

@@ -2,7 +2,10 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    import { Calendar, Ban, Check, Clock, Pause, X } from "@lucide/svelte";
+    import type { Component } from "svelte";
     import { fade } from "svelte/transition";
+    import Spinner from "./Spinner.svelte";
 
     type Status =
         "running" | "success" | "failed" | "pending" | "paused" | "scheduled" | "cancelled";
@@ -26,41 +29,65 @@
         class: className = "",
     }: Props = $props();
 
-    const STATUS_CONFIG: Record<Status, { label: string; classes: string; iconColor: string }> = {
+    // `icon` is undefined for "running", which shows the spinner.
+    const STATUS_CONFIG: Record<
+        Status,
+        {
+            label: string;
+            classes: string;
+            iconColor: string;
+            icon: Component | undefined;
+            strokeWidth: number;
+        }
+    > = {
         running: {
             label: "Running",
             classes: "bg-info-soft text-info-soft-text border-info-soft-border",
             iconColor: "text-info-surface",
+            icon: undefined,
+            strokeWidth: 3,
         },
         success: {
             label: "Success",
             classes: "bg-success-soft text-success-soft-text border-success-soft-border",
             iconColor: "text-success-surface",
+            icon: Check,
+            strokeWidth: 3,
         },
         failed: {
             label: "Failed",
             classes: "bg-danger-soft text-danger-soft-text border-danger-soft-border",
             iconColor: "text-danger-surface",
+            icon: X,
+            strokeWidth: 3,
         },
         pending: {
             label: "Pending",
             classes: "bg-warning-soft text-warning-soft-text border-warning-soft-border",
             iconColor: "text-warning-surface",
+            icon: Clock,
+            strokeWidth: 3,
         },
         paused: {
             label: "Paused",
             classes: "bg-surface-sunken text-on-surface-muted border-outline",
             iconColor: "text-on-surface-faint",
+            icon: Pause,
+            strokeWidth: 0,
         },
         scheduled: {
             label: "Scheduled",
             classes: "bg-primary-soft text-primary-soft-text border-primary-soft-border",
             iconColor: "text-primary",
+            icon: Calendar,
+            strokeWidth: 2.5,
         },
         cancelled: {
             label: "Cancelled",
             classes: "bg-surface-sunken text-on-surface-faint border-outline opacity-75",
             iconColor: "text-on-surface-faint",
+            icon: Ban,
+            strokeWidth: 2.5,
         },
     };
 
@@ -80,109 +107,15 @@
     in:fade={{ duration: 150 }}
 >
     <span class="flex shrink-0 items-center justify-center {config.iconColor}">
-        {#if status === "running" || pulse}
-            <svg
-                width={sizeConfig.iconSize}
-                height={sizeConfig.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                class="animate-spin"
-            >
-                <circle
-                    class="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    stroke-width="4"
-                ></circle>
-                <path
-                    class="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-            </svg>
-        {:else if status === "success"}
-            <svg
-                width={sizeConfig.iconSize}
-                height={sizeConfig.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <polyline points="20 6 9 17 4 12"></polyline>
-            </svg>
-        {:else if status === "failed"}
-            <svg
-                width={sizeConfig.iconSize}
-                height={sizeConfig.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-        {:else if status === "pending"}
-            <svg
-                width={sizeConfig.iconSize}
-                height={sizeConfig.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <circle cx="12" cy="12" r="10"></circle>
-                <polyline points="12 6 12 12 16 14"></polyline>
-            </svg>
-        {:else if status === "scheduled"}
-            <svg
-                width={sizeConfig.iconSize}
-                height={sizeConfig.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-                <line x1="16" y1="2" x2="16" y2="6"></line>
-                <line x1="8" y1="2" x2="8" y2="6"></line>
-                <line x1="3" y1="10" x2="21" y2="10"></line>
-            </svg>
-        {:else if status === "paused"}
-            <svg
-                width={sizeConfig.iconSize}
-                height={sizeConfig.iconSize}
-                viewBox="0 0 24 24"
-                fill="currentColor"
-            >
-                <rect x="6" y="4" width="4" height="16" rx="1" />
-                <rect x="14" y="4" width="4" height="16" rx="1" />
-            </svg>
-        {:else if status === "cancelled"}
-            <svg
-                width={sizeConfig.iconSize}
-                height={sizeConfig.iconSize}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
-            </svg>
+        {#if !config.icon || pulse}
+            <Spinner size={sizeConfig.iconSize} label="" />
+        {:else}
+            {@const Icon = config.icon}
+            <Icon
+                size={sizeConfig.iconSize}
+                strokeWidth={config.strokeWidth}
+                fill={status === "paused" ? "currentColor" : "none"}
+            />
         {/if}
     </span>
 

package/src/lib/components/Tabs.svelte

@@ -20,6 +20,8 @@
         onChange?: (tabId: string) => void;
         variant?: "underline" | "pills" | "enclosed";
         fullWidth?: boolean;
+        /** Scroll the tab bar sideways instead of wrapping when the labels outgrow it. */
+        scrollable?: boolean;
         children?: Snippet<[string]>;
         class?: string;
     }
@@ -30,6 +32,7 @@
         onChange,
         variant = "underline",
         fullWidth = false,
+        scrollable = false,
         children,
         class: className = "",
     }: Props = $props();
@@ -79,12 +82,13 @@
     }
 </script>
 
-<div class={className}>
+{#snippet tablist()}
     <div
         class="
 			{variant === 'underline' ? 'border-b border-outline' : ''}
 			{variant === 'pills' ? 'rounded-[4px] bg-surface-sunken p-1' : ''}
 			{variant === 'enclosed' ? 'rounded-[4px] border border-outline bg-surface-sunken p-1' : ''}
+			{scrollable ? 'w-max min-w-full whitespace-nowrap' : ''}
 		"
         role="tablist"
     >
@@ -131,6 +135,16 @@
             {/each}
         </nav>
     </div>
+{/snippet}
+
+<div class={className}>
+    {#if scrollable}
+        <div class="overflow-x-auto">
+            {@render tablist()}
+        </div>
+    {:else}
+        {@render tablist()}
+    {/if}
 
     {#if children && renderedActiveTab}
         <div

package/src/lib/components/Tooltip.svelte

@@ -45,7 +45,7 @@
     {@render children()}
 
     <!-- Hover intent: 100ms before it appears, so sweeping the pointer across a
-         dense row doesn't flash a trail of bubbles. Still no fade — `duration-0`
+         dense row doesn't flash a trail of bubbles. Still no fade, `duration-0`
          keeps the appearance instant once the delay is served, per DESIGN.md. -->
     <div
         class="

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

@@ -0,0 +1,156 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { ChevronDown, Download, Play, RotateCw, Square, Trash } from "@lucide/svelte";
+    import Button from "../Button.svelte";
+    import Popover from "../Popover.svelte";
+    import { runLogDownloadUrl } from "./run-helpers.js";
+
+    let {
+        runId,
+        taskName,
+        isRunning,
+        canDelete,
+        onRun,
+        onRunAgain,
+        onStop,
+        onDelete,
+        stopLabel = "Stop",
+    }: {
+        runId: string;
+        taskName: string;
+        isRunning: boolean;
+        canDelete: boolean;
+        onRun: (() => void) | undefined;
+        onRunAgain: (() => void) | undefined;
+        onStop: ((runId: string) => void) | undefined;
+        onDelete: ((runId: string) => void) | undefined;
+        stopLabel?: string | undefined;
+    } = $props();
+
+    // Inline-confirm popover for delete.
+    let confirmDeleteOpen = $state(false);
+    // Dropdown half of the Run split button (the "reuse parameters" variant).
+    let runMenuOpen = $state(false);
+</script>
+
+<!-- Run-level actions: run (split) · stop · download · delete (delete behind an
+     inline confirm). Task-level ones (pause, service start/stop/restart) live
+     on the task header. -->
+<div class="flex flex-wrap items-center gap-2">
+    {#if onRun}
+        <!-- Split button: Run (defaults) + an arrow for the reuse-parameters
+                 variant, shown only when there is one. -->
+        <div class="inline-flex overflow-hidden rounded-[3px] border border-primary-soft-border">
+            <button
+                type="button"
+                onclick={() => onRun()}
+                title="Run this task now with default options"
+                class="inline-flex h-9 cursor-pointer items-center gap-1.5 bg-surface-raised px-3 font-mono text-sm font-medium text-primary hover:bg-primary-soft active:translate-y-px"
+            >
+                <Play size={15} fill="currentColor" stroke="none" />
+                <span class="@max-xs:hidden">Run</span>
+            </button>
+            {#if onRunAgain}
+                <Popover bind:open={runMenuOpen} placement="bottom-end">
+                    {#snippet trigger()}
+                        <span
+                            class="flex h-9 cursor-pointer items-center border-l border-primary-soft-border bg-surface-raised px-2 text-primary hover:bg-primary-soft"
+                            title="More run options"
+                            aria-label="More run options"
+                        >
+                            <ChevronDown size={15} />
+                        </span>
+                    {/snippet}
+                    <button
+                        type="button"
+                        onclick={() => {
+                            runMenuOpen = false;
+                            onRunAgain();
+                        }}
+                        class="flex w-56 items-start gap-2.5 text-left"
+                    >
+                        <RotateCw size={15} class="mt-0.5 shrink-0 text-on-surface-muted" />
+                        <span class="flex flex-col">
+                            <span class="font-mono text-sm font-medium text-on-surface"
+                                >Run again</span
+                            >
+                            <span class="text-xs text-on-surface-muted"
+                                >Reuse this run's parameters</span
+                            >
+                        </span>
+                    </button>
+                </Popover>
+            {/if}
+        </div>
+    {/if}
+    {#if onRunAgain && !onRun && !isRunning}
+        <!-- No Run button here (the page has its own), so re-running with this
+             run's parameters stands alone. -->
+        <button
+            type="button"
+            onclick={() => onRunAgain()}
+            title="Run again, reusing this run's parameters"
+            aria-label="Run again"
+            class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-[3px] border border-primary-soft-border bg-surface-raised px-3 font-mono text-sm font-medium text-primary hover:bg-primary-soft active:translate-y-px @max-md:px-2.5"
+        >
+            <RotateCw size={15} />
+            <span class="@max-md:hidden">Run again</span>
+        </button>
+    {/if}
+    {#if isRunning && onStop}
+        <button
+            type="button"
+            onclick={() => onStop(runId)}
+            aria-label={stopLabel}
+            class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-[3px] border border-danger-soft-border bg-surface-raised px-3 font-mono text-sm font-medium text-danger-surface hover:bg-danger-soft active:translate-y-px"
+        >
+            <Square size={15} fill="currentColor" stroke="none" />
+            <span class="@max-xs:hidden">{stopLabel}</span>
+        </button>
+    {/if}
+    <a
+        href={runLogDownloadUrl(runId)}
+        download="{taskName}-{runId}.log"
+        class="inline-flex items-center justify-center rounded-[3px] border border-outline-faint bg-surface-raised p-2 text-on-surface-muted hover:border-outline-hover hover:bg-surface-sunken hover:text-primary"
+        title="Download the full log (rotated and current parts as one file)"
+        aria-label="Download log"
+    >
+        <Download size={15} />
+    </a>
+    {#if canDelete && onDelete}
+        <Popover bind:open={confirmDeleteOpen} placement="bottom-end">
+            {#snippet trigger()}
+                <span
+                    class="flex cursor-pointer items-center justify-center rounded-[3px] border border-outline-faint bg-surface-raised p-2 text-on-surface-muted hover:border-danger-soft-border hover:bg-danger-soft hover:text-danger-surface"
+                    title="Delete this run"
+                    aria-label="Delete run"
+                >
+                    <Trash size={15} />
+                </span>
+            {/snippet}
+            <div class="w-60">
+                <div class="font-mono text-sm font-semibold text-on-surface">Delete this run?</div>
+                <div class="mt-1 text-xs leading-relaxed text-on-surface-muted">
+                    Its captured output is removed from disk. This can't be undone.
+                </div>
+                <div class="mt-3 flex justify-end gap-2">
+                    <Button variant="ghost" size="sm" onclick={() => (confirmDeleteOpen = false)}>
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="danger"
+                        size="sm"
+                        onclick={() => {
+                            confirmDeleteOpen = false;
+                            onDelete(runId);
+                        }}
+                    >
+                        Delete run
+                    </Button>
+                </div>
+            </div>
+        </Popover>
+    {/if}
+</div>