@runwisp/ui 0.4.0 → 0.7.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.4.0",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -18,20 +18,11 @@
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "build": "echo '@runwisp/ui: no build step (raw source)'",
-    "check": "svelte-check --tsconfig ./tsconfig.json && prettier --check . && eslint .",
+    "check": "bun run check:types && bun run check:lint",
+    "check:types": "svelte-check --tsconfig ./tsconfig.json",
+    "check:lint": "prettier --check . && eslint .",
     "format": "prettier --write ."
   },
-  "nx": {
-    "targets": {
-      "build": {
-        "cache": true,
-        "inputs": [
-          "production"
-        ],
-        "outputs": []
-      }
-    }
-  },
   "files": [
     "src"
   ],
@@ -67,8 +58,8 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.39.1",
-    "@runwisp/eslint-config": "0.4.0",
-    "@runwisp/typescript-config": "0.4.0",
+    "@runwisp/eslint-config": "0.7.0",
+    "@runwisp/typescript-config": "0.7.0",
     "@storybook/addon-a11y": "^10.1.9",
     "@storybook/addon-docs": "^10.1.9",
     "@storybook/addon-svelte-csf": "^5.0.10",
@@ -116,7 +107,8 @@
     "@floating-ui/dom": "^1.7.4",
     "@fontsource/tasa-orbiter": "^5.2.2",
     "@lucide/svelte": "^0.561.0",
-    "@runwisp/common": "0.4.0",
+    "@runwisp/common": "0.7.0",
+    "@tanstack/svelte-virtual": "^3.13.25",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.4.0",
     "cronstrue": "^3.9.0",

package/src/app.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>RunWisp</title>
         %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">

package/src/lib/actions/portal.ts

@@ -8,9 +8,7 @@ export function portal(node: HTMLElement) {
     document.body.appendChild(node);
     return {
         destroy() {
-            if (node.parentNode) {
-                node.parentNode.removeChild(node);
-            }
+            node.remove();
         },
     };
 }

package/src/lib/components/AccordionItem.svelte

@@ -26,8 +26,6 @@
             open = !open;
         }
     }
-
-    const isSnippet = $derived(typeof title === "function");
 </script>
 
 <div class="group {className}">
@@ -44,8 +42,8 @@
         aria-expanded={open}
     >
         <span class="flex-1">
-            {#if isSnippet && title}
-                {@render (title as Snippet)()}
+            {#if typeof title === "function"}
+                {@render title()}
             {:else if title}
                 {title}
             {/if}

package/src/lib/components/Badge.svelte

@@ -89,21 +89,17 @@
         md: "h-3.5 w-3.5",
         lg: "h-4 w-4",
     };
-
-    let safeVariant = $derived(
-        (Object.hasOwn(variantClasses, variant) ? variant : "default") as BadgeVariant,
-    );
 </script>
 
 <span
     class="{baseClasses} {outline
-        ? variantClasses[safeVariant].outline
-        : variantClasses[safeVariant].solid} {sizeClasses[size]} {className}"
+        ? variantClasses[variant].outline
+        : variantClasses[variant].solid} {sizeClasses[size]} {className}"
 >
     {#if dot}
         {#if loading}
             <svg
-                class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[safeVariant]}"
+                class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[variant]}"
                 viewBox="0 0 24 24"
                 fill="none"
             >
@@ -122,7 +118,7 @@
                 ></path>
             </svg>
         {:else}
-            <span class="h-1.5 w-1.5 rounded-full {dotColors[safeVariant]}"></span>
+            <span class="h-1.5 w-1.5 rounded-full {dotColors[variant]}"></span>
         {/if}
     {/if}
     {#if children}

package/src/lib/components/Card.svelte

@@ -8,11 +8,12 @@
         padding?: "none" | "sm" | "md" | "lg";
         hover?: boolean;
         border?: boolean;
-        shadow?: "none" | "sm" | "md" | "lg";
+        shadow?: "none" | "sm" | "md" | "lg" | "xl";
         header?: Snippet;
         footer?: Snippet;
         children?: Snippet;
         class?: string;
+        bodyClass?: string;
     }
 
     let {
@@ -24,6 +25,7 @@
         footer,
         children,
         class: className = "",
+        bodyClass = "",
     }: Props = $props();
 
     const paddingClasses: Record<string, string> = {
@@ -38,6 +40,7 @@
         sm: "shadow-sm",
         md: "shadow-md",
         lg: "shadow-lg",
+        xl: "shadow-xl shadow-mist-900/10",
     };
 </script>
 
@@ -56,7 +59,7 @@
         </div>
     {/if}
 
-    <div class={paddingClasses[padding]}>
+    <div class="{paddingClasses[padding]} {bodyClass}">
         {#if children}
             {@render children()}
         {/if}

package/src/lib/components/DataGrid.svelte

@@ -176,7 +176,7 @@
             <Input
                 value={filterQuery}
                 oninput={(e) => {
-                    filterQuery = (e.currentTarget as HTMLInputElement).value;
+                    filterQuery = e.currentTarget.value;
                     if (paginate && !total) page = 1;
                 }}
                 type="search"
@@ -308,8 +308,7 @@
                                 <td
                                     class="px-4 {compact ? 'py-2' : 'py-3'} cursor-pointer"
                                     onclick={(e) => {
-                                        if ((e.target as HTMLElement).tagName !== "INPUT")
-                                            toggleRow(row);
+                                        if (!(e.target instanceof HTMLInputElement)) toggleRow(row);
                                     }}
                                 >
                                     <Checkbox

package/src/lib/components/Dropdown.svelte

@@ -90,9 +90,9 @@
     }
 
     function handleOutsideClick(e: MouseEvent) {
-        const target = e.target as HTMLElement;
-        if (triggerEl?.contains(target)) return;
-        if (menuEl?.contains(target)) return;
+        const path = e.composedPath();
+        if (triggerEl && path.includes(triggerEl)) return;
+        if (menuEl && path.includes(menuEl)) return;
         if (open) toggle(false);
     }
 

package/src/lib/components/DurationInput.svelte

@@ -85,8 +85,8 @@
         updateFromValue();
     });
 
-    function handleInput(e: Event) {
-        const val = (e.target as HTMLInputElement).value;
+    function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+        const val = e.currentTarget.value;
         textValue = val;
 
         const msValue = parseToMs(val);

package/src/lib/components/Heading.svelte

@@ -22,13 +22,12 @@
         3: "2xl",
         4: "xl",
         5: "lg",
-        6: "base" as HeadingSize,
+        6: "md",
     };
 
     const sizeClasses: Record<string, string> = {
         xs: "text-xs font-semibold",
         sm: "text-sm font-semibold",
-        base: "text-base font-semibold",
         md: "text-base font-semibold",
         lg: "text-lg font-semibold",
         xl: "text-xl font-bold",

package/src/lib/components/LogConsole.svelte

@@ -21,9 +21,23 @@
         chunkSize?: number;
         lineHeight?: number;
         class?: string;
+        // highlightLine, when set, scrolls the console so the given absolute
+        // line number is visible and pulses a short-lived flash on that row.
+        // The pulse is one-shot: changing the prop to a new line restarts the
+        // animation; setting it to null clears immediately.
+        highlightLine?: number | null;
     }
 
-    let { fetchLogs, chunkSize = 4096, lineHeight = 20, class: className = "" }: Props = $props();
+    let {
+        fetchLogs,
+        chunkSize = 4096,
+        lineHeight = 20,
+        class: className = "",
+        highlightLine = null,
+    }: Props = $props();
+
+    let flashLine = $state<number | null>(null);
+    let flashTimer: ReturnType<typeof setTimeout> | null = null;
 
     const cache = new LogCache();
     let fetcher: LogFetcher | null = $state(null);
@@ -111,10 +125,11 @@
 
     // Request missing data for the visible range (read-only w.r.t. cache).
     $effect(() => {
-        if (fetcher && cache.totalLines > 0) {
-            fetcher.pruneQueue(visibleStart, visibleEnd);
+        const f = fetcher;
+        if (f && cache.totalLines > 0) {
+            f.pruneQueue(visibleStart, visibleEnd);
             untrack(() => {
-                fetcher!.maybeRequestMissing(visibleStart, visibleEnd);
+                f.maybeRequestMissing(visibleStart, visibleEnd);
             });
         }
     });
@@ -136,8 +151,8 @@
         prevTotalLines = currentTotal;
     });
 
-    function onScroll(e: Event) {
-        const target = e.target as HTMLDivElement;
+    function onScroll(e: Event & { currentTarget: EventTarget & HTMLDivElement }) {
+        const target = e.currentTarget;
         scrollTop = target.scrollTop;
 
         const scrollHeight = target.scrollHeight;
@@ -201,6 +216,30 @@
         scrollTop = 0;
     }
 
+    // Search-hit deep-link: when highlightLine flips to a non-null number,
+    // scroll the viewport so that line is centred, and pulse a one-shot
+    // flash class for ~1.5s. Cleaning up the timer on prop change keeps a
+    // rapid sequence of jumps from leaking timers.
+    $effect(() => {
+        const target = highlightLine;
+        if (target === null || target === undefined) {
+            flashLine = null;
+            return;
+        }
+        if (!containerEl) return;
+        const targetY = lineTop(target) - containerHeight / 2 + lineHeight / 2;
+        const clamped = Math.max(0, Math.min(targetY, totalHeight - containerHeight));
+        containerEl.scrollTo({ top: clamped, behavior: "smooth" });
+        isAutoScroll = false;
+        userScrolledUp = true;
+        flashLine = target;
+        if (flashTimer !== null) clearTimeout(flashTimer);
+        flashTimer = setTimeout(() => {
+            flashLine = null;
+            flashTimer = null;
+        }, 1500);
+    });
+
     $effect(() => {
         if (!containerEl) return;
         containerHeight = containerEl.clientHeight;
@@ -241,7 +280,10 @@
 
             {#each renderedLines as line (line.num)}
                 <div
-                    class="log-line absolute right-0 left-0 flex items-center hover:bg-slate-900/50"
+                    class="log-line absolute right-0 left-0 flex items-center hover:bg-slate-900/50 {flashLine ===
+                    line.num
+                        ? 'log-line--flash'
+                        : ''}"
                     style="top: {lineTop(line.num)}px; height: {lineHeight}px;"
                 >
                     <div
@@ -375,6 +417,19 @@
         --log-line-height: 20px;
     }
 
+    .log-line--flash {
+        animation: log-line-flash 1.5s ease-out;
+    }
+
+    @keyframes log-line-flash {
+        0% {
+            background-color: rgba(251, 191, 36, 0.45);
+        }
+        100% {
+            background-color: transparent;
+        }
+    }
+
     .dot {
         display: inline-block;
         width: 4px;

package/src/lib/components/PageHeader.svelte

@@ -0,0 +1,29 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        title: string;
+        subtitle?: string;
+        actions?: Snippet;
+        class?: string;
+    }
+
+    let { title, subtitle, actions, class: className = "" }: Props = $props();
+</script>
+
+<div class="flex shrink-0 flex-wrap items-start justify-between gap-3 px-1 {className}">
+    <div class="min-w-0">
+        <h1 class="text-2xl font-bold tracking-tight text-on-surface">{title}</h1>
+        {#if subtitle}
+            <p class="mt-0.5 text-sm text-on-surface-muted">{subtitle}</p>
+        {/if}
+    </div>
+    {#if actions}
+        <div class="flex shrink-0 items-center gap-2">
+            {@render actions()}
+        </div>
+    {/if}
+</div>

package/src/lib/components/Pagination.svelte

@@ -36,8 +36,8 @@
         onPageChange?.(clamped);
     }
 
-    function handlePageSizeChange(e: Event) {
-        const newSize = Number((e.target as HTMLSelectElement).value);
+    function handlePageSizeChange(e: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+        const newSize = Number(e.currentTarget.value);
         onPageSizeChange?.(newSize);
     }
 </script>

package/src/lib/components/Popover.svelte

@@ -64,9 +64,9 @@
     }
 
     function handleOutsideClick(e: MouseEvent) {
-        const target = e.target as HTMLElement;
-        if (triggerEl?.contains(target)) return;
-        if (contentEl?.contains(target)) return;
+        const path = e.composedPath();
+        if (triggerEl && path.includes(triggerEl)) return;
+        if (contentEl && path.includes(contentEl)) return;
         if (open) {
             open = false;
             cleanupFloating?.();

package/src/lib/components/Select.svelte

@@ -212,16 +212,12 @@
     }
 
     function handleOutsideClick(e: MouseEvent) {
-        if (
-            isOpen &&
-            triggerEl &&
-            !triggerEl.contains(e.target as Node) &&
-            menuEl &&
-            !menuEl.contains(e.target as Node)
-        ) {
-            isOpen = false;
-            cleanupFloating?.();
-        }
+        if (!isOpen) return;
+        const path = e.composedPath();
+        if (triggerEl && path.includes(triggerEl)) return;
+        if (menuEl && path.includes(menuEl)) return;
+        isOpen = false;
+        cleanupFloating?.();
     }
 
     onDestroy(() => {

package/src/lib/components/TaskCard.svelte

@@ -0,0 +1,33 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    export type TaskCardAccent = "danger" | "wisp" | "aurora";
+
+    interface Props {
+        accent?: TaskCardAccent;
+        onclick?: () => void;
+        children: Snippet;
+        class?: string;
+    }
+
+    let { accent = "wisp", onclick, children, class: className = "" }: Props = $props();
+
+    const accentClasses: Record<TaskCardAccent, string> = {
+        danger: "hover:border-danger-200",
+        wisp: "hover:border-wisp-200",
+        aurora: "hover:border-aurora-200",
+    };
+</script>
+
+<button
+    type="button"
+    class="group w-full rounded-lg border border-mist-100 bg-surface-raised p-3 text-left transition-all hover:shadow-sm {accentClasses[
+        accent
+    ]} {className}"
+    {onclick}
+>
+    {@render children()}
+</button>

package/src/lib/components/ToastContainer.svelte

@@ -72,6 +72,18 @@
                 aria-hidden="true"
             />
             <p class="flex-1 text-sm font-medium">{toastItem.message}</p>
+            {#if toastItem.action}
+                {@const action = toastItem.action}
+                <button
+                    onclick={() => {
+                        action.onClick();
+                        toast.remove(toastItem.id);
+                    }}
+                    class="flex-shrink-0 rounded-md px-2 py-1 text-xs font-semibold text-on-surface underline-offset-2 transition-colors hover:bg-surface-sunken hover:underline"
+                >
+                    {action.label}
+                </button>
+            {/if}
             <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"

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

@@ -3,8 +3,17 @@
 
 <script lang="ts">
     import { untrack } from "svelte";
-    import { Server, Hash, Terminal as TerminalIcon, Download } from "@lucide/svelte";
+    import {
+        Server,
+        Hash,
+        Terminal as TerminalIcon,
+        Download,
+        Trash2,
+        MousePointerClick,
+    } from "@lucide/svelte";
     import Badge from "../Badge.svelte";
+    import Button from "../Button.svelte";
+    import EmptyState from "../EmptyState.svelte";
     import LogConsole from "../LogConsole.svelte";
     import type { Run } from "./types.js";
     import type { LogEvent, LogSlice } from "../../log-console/types.js";
@@ -18,6 +27,8 @@
         fetchLogs,
         streamLogs,
         showTaskName = false,
+        onDelete,
+        highlightLine = null,
     }: {
         run: Run | undefined;
         fetchLogs: (
@@ -31,8 +42,16 @@
             initialState?: { fromLine: number },
         ) => () => void;
         showTaskName?: boolean;
+        onDelete?: (runId: string) => void;
+        highlightLine?: number | null;
     } = $props();
 
+    let canDelete = $derived.by(() => {
+        if (!run || !onDelete) return false;
+        const status = runDisplayStatus(run);
+        return status !== "running" && status !== "pending";
+    });
+
     const TAIL_LINES = 1000;
 
     let logConsole = $state<{ onStream: (event: LogEvent) => void } | null>(null);
@@ -109,6 +128,18 @@
                         >
                             {runDisplayStatus(run).toUpperCase()}
                         </Badge>
+                        {#if canDelete}
+                            <Button
+                                variant="ghost"
+                                size="xs"
+                                class="ml-1 text-danger-surface hover:bg-danger-soft"
+                                onclick={() => onDelete?.(run.id)}
+                                title="Delete this run"
+                                aria-label="Delete run"
+                            >
+                                {#snippet icon()}<Trash2 size={14} />{/snippet}
+                            </Button>
+                        {/if}
                     </div>
                     <div
                         class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-on-surface-muted"
@@ -236,17 +267,16 @@
                 bind:this={logConsole}
                 fetchLogs={(f: number, t: number) => fetchLogs(run.id, f, t)}
                 class="min-h-0 flex-1"
+                {highlightLine}
             />
         {/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 class="flex flex-1 items-center justify-center bg-surface-sunken/30">
+        <EmptyState
+            title="Select a run"
+            description="Pick a run from the list to view details and logs."
+            icon={MousePointerClick}
+        />
     </div>
 {/if}