@runwisp/ui 1.3.0 → 1.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
-    "@runwisp/eslint-config": "1.3.0",
-    "@runwisp/typescript-config": "1.3.0",
+    "@runwisp/eslint-config": "1.4.0",
+    "@runwisp/typescript-config": "1.4.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -92,8 +92,8 @@
     "@floating-ui/dom": "^1.8.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
-    "@lucide/svelte": "^1.28.0",
-    "@runwisp/common": "1.3.0",
+    "@lucide/svelte": "^1.52.0",
+    "@runwisp/common": "1.4.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/lib/components/LogConsole.svelte

@@ -37,6 +37,10 @@
         // run that simply produced no output. Null/undefined renders nothing;
         // the caller clears it once a subsequent fetch succeeds.
         error?: string | null;
+        // The caller is still fetching this console's first output (e.g. the
+        // run panel seeding its tail). Shows the loading state rather than
+        // "No output yet" until that output arrives.
+        loading?: boolean;
         // Wrap long lines instead of horizontally scrolling them. When on, each
         // rendered row's height becomes a multiple of `lineHeight` (one per
         // wrapped visual row), so the virtualizer switches from the fixed-height
@@ -55,6 +59,7 @@
         endLabel = "end of output",
         endTone = "muted",
         error = null,
+        loading = false,
         wrap = $bindable(false),
     }: Props = $props();
 
@@ -798,7 +803,7 @@
                 {/each}
             {/if}
 
-            {#if cache.totalLines === 0 && overlayRows.length === 0 && !fetcher?.isFetching}
+            {#if cache.totalLines === 0 && overlayRows.length === 0 && !loading && !fetcher?.isFetching}
                 <div
                     class="absolute inset-0 flex items-center justify-center text-[var(--rw-con-dim)]"
                 >
@@ -809,7 +814,7 @@
                 </div>
             {/if}
 
-            {#if cache.totalLines === 0 && fetcher?.isFetching}
+            {#if cache.totalLines === 0 && (loading || fetcher?.isFetching)}
                 <div
                     class="absolute inset-0 flex items-center justify-center text-[var(--rw-con-dim)]"
                 >

package/src/lib/components/Skeleton.svelte

@@ -30,7 +30,7 @@
 
 {#if shape === "circle"}
     <div
-        class="animate-pulse rounded-full bg-surface-sunken {className}"
+        class="animate-pulse rounded-full bg-outline-hover {className}"
         style="width: {width ?? '2.5rem'}; height: {height ?? width ?? '2.5rem'}"
         role="status"
         aria-label="Loading"
@@ -39,7 +39,7 @@
     </div>
 {:else if shape === "rect"}
     <div
-        class="animate-pulse rounded-[4px] bg-surface-sunken {className}"
+        class="animate-pulse rounded-[4px] bg-outline-hover {className}"
         style="width: {width ?? '100%'}; height: {height ?? '2rem'}"
         role="status"
         aria-label="Loading"
@@ -50,8 +50,8 @@
     <div class="animate-pulse space-y-6 p-6 {className}" role="status" aria-label="Loading content">
         {#if header}
             <div class="space-y-3">
-                <div class="h-7 w-48 rounded-[4px] bg-surface-sunken"></div>
-                <div class="h-4 w-72 rounded-[3px] bg-surface-sunken"></div>
+                <div class="h-7 w-48 rounded-[4px] bg-outline-hover"></div>
+                <div class="h-4 w-72 rounded-[3px] bg-outline-hover"></div>
             </div>
         {/if}
 
@@ -59,11 +59,11 @@
             {#each Array.from({ length: rows }, (_, i) => i) as i (i)}
                 <div class="space-y-2">
                     <div
-                        class="h-4 rounded-[3px] bg-surface-sunken"
+                        class="h-4 rounded-[3px] bg-outline-hover"
                         style="width: {70 + ((i * 17) % 30)}%"
                     ></div>
                     <div
-                        class="h-4 rounded-[3px] bg-surface-sunken"
+                        class="h-4 rounded-[3px] bg-outline-hover"
                         style="width: {40 + ((i * 23) % 40)}%"
                     ></div>
                 </div>

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

@@ -8,7 +8,7 @@
         Check,
         Terminal as TerminalIcon,
         Download,
-        Trash2,
+        Trash,
         Play,
         Square,
         MousePointerClick,
@@ -67,6 +67,7 @@
         getInstanceCount = () => 1,
         motion,
         notFound = false,
+        loading = false,
     }: {
         run: Run | undefined;
         fetchLogs: (
@@ -121,6 +122,9 @@
         // or never existed). The empty state then says so plainly instead of the
         // generic "Select a run" — the caller must not silently substitute another.
         notFound?: boolean;
+        // True while there is no run to show *yet* (the run list or a deep-linked
+        // run is still loading), so the empty state doesn't claim "No runs yet".
+        loading?: boolean;
     } = $props();
 
     function easeInFresh(node: HTMLElement, runId: string) {
@@ -170,6 +174,10 @@
     // changes, not on every run object reference swap from SSE array updates.
     let runId = $derived(run?.id);
 
+    // The run whose seed fetch has settled. Until it matches the shown run the
+    // console says it's loading, not "No output yet".
+    let seededRunId = $state<string | null>(null);
+
     // Fetches the batched tail page a run's console opens on (see the effect
     // below) and paints it into the console. Resolves the line the live
     // stream should resume from, or null when there's nothing left to stream
@@ -201,7 +209,10 @@
         if (!id) return;
 
         const stream = streamLogs;
-        if (!stream) return;
+        if (!stream) {
+            seededRunId = id;
+            return;
+        }
 
         logFetchError = null;
 
@@ -217,7 +228,9 @@
                 // (its disk backfill from that anchor closes the fetch↔stream
                 // race, and the daemon dedupes anything already shown).
                 const seeded = await seedConsoleTail(id, () => cancelled);
-                if (cancelled || !seeded) return;
+                if (cancelled) return;
+                seededRunId = id;
+                if (!seeded) return;
                 cleanup = stream(
                     id,
                     (event: LogEvent) => {
@@ -691,7 +704,7 @@
                                         title="Delete this run"
                                         aria-label="Delete run"
                                     >
-                                        <Trash2 size={15} />
+                                        <Trash size={15} />
                                     </span>
                                 {/snippet}
                                 <div class="w-60">
@@ -817,10 +830,43 @@
                     {endLabel}
                     {endTone}
                     error={logFetchError}
+                    loading={seededRunId !== run.id}
                 />
             {/key}
         </div>
     </div>
+{:else if loading && !notFound}
+    <!-- Loading: the panel's own frame (verdict header over the console) with
+         placeholders where the run's facts go, so nothing jumps when it lands. -->
+    <div
+        class="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+        role="status"
+        aria-label="Loading run"
+    >
+        <div class="shrink-0 border-b border-outline-faint bg-surface-raised">
+            <div class="pt-[18px] pr-[22px] pb-[16px] pl-[26px]">
+                <div class="flex h-[33px] items-center gap-2.5">
+                    <span class="size-[18px] animate-pulse rounded-full bg-outline-hover"></span>
+                    <span class="h-[18px] w-40 animate-pulse rounded-[3px] bg-outline-hover"></span>
+                </div>
+                <div class="mt-2.5 flex h-[17px] items-center">
+                    <span class="h-3 w-64 max-w-full animate-pulse rounded-[3px] bg-outline-hover"
+                    ></span>
+                </div>
+            </div>
+        </div>
+        <div
+            class="ml-1 flex min-h-[300px] flex-1 flex-col overflow-hidden border-t border-[var(--rw-con-gutter)] bg-[var(--rw-con-bg)]"
+        >
+            <div
+                class="flex shrink-0 items-center gap-2 border-b border-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)] px-3.5 py-[9px] font-mono text-[11.5px] font-semibold text-[var(--rw-con-text)]"
+            >
+                <TerminalIcon size={14} class="opacity-70" />
+                Console output
+            </div>
+            <LogConsole fetchLogs={() => undefined} loading class="min-h-0 flex-1" />
+        </div>
+    </div>
 {:else}
     <div
         class="flex min-w-0 flex-1 flex-col items-center justify-center gap-4 bg-surface-sunken/30"

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

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-    import { Clock, ArrowUpDown, X, Square, Trash2, RotateCw } from "@lucide/svelte";
+    import { Clock, ArrowUpDown, X, Square, Trash, RotateCw } from "@lucide/svelte";
     import { untrack } from "svelte";
     import { SvelteSet } from "svelte/reactivity";
     import { createVirtualizer } from "@tanstack/svelte-virtual";
@@ -459,7 +459,7 @@
                             )}
                         title="Delete run{selectionCount === 1 ? '' : 's'}"
                     >
-                        {#snippet icon()}<Trash2 size={14} />{/snippet}
+                        {#snippet icon()}<Trash size={14} />{/snippet}
                     </Button>
                 {/if}
             </div>
@@ -474,6 +474,8 @@
             >
                 {#if outputSearchActive}
                     {matchedRuns.length} of {items.length}
+                {:else if loading && items.length === 0}
+                    <!-- Count unknown until the first page lands. -->
                 {:else}
                     {total}
                     {total === 1 ? "run" : "runs"}
@@ -533,22 +535,7 @@
             <!-- Output-search results: the rail filters to runs that printed the
                  query, each annotated with the matching line. -->
             {#if outputSearchPending}
-                <!-- Searching: shimmer placeholders shaped like result rows. -->
-                <div class="flex flex-col gap-0.5" aria-busy="true" aria-label="Searching output">
-                    {#each [0, 1, 2, 3, 4] as i (i)}
-                        <div class="flex items-center gap-2.5 rounded-[3px] px-3 py-2.5">
-                            <span
-                                class="size-[9px] shrink-0 animate-pulse rounded-full bg-surface-sunken"
-                            ></span>
-                            <span
-                                class="h-3 animate-pulse rounded bg-surface-sunken"
-                                style:width="{70 - i * 8}%"
-                            ></span>
-                            <span class="ml-auto h-3 w-9 animate-pulse rounded bg-surface-sunken"
-                            ></span>
-                        </div>
-                    {/each}
-                </div>
+                {@render skeletonRows("Searching output")}
             {:else if matchedRuns.length === 0}
                 <div class="px-4 py-8 text-center text-xs leading-relaxed text-on-surface-muted">
                     No output matches
@@ -571,7 +558,9 @@
                     {/each}
                 </div>
             {/if}
-        {:else if items.length === 0 && !loading}
+        {:else if items.length === 0 && loading}
+            {@render skeletonRows("Loading runs")}
+        {:else if items.length === 0}
             <EmptyState
                 title={emptyText}
                 description={emptyDescription}
@@ -622,6 +611,46 @@
 
 <!-- Status dot. With bulk actions on it fades out — on row hover, or whenever a
      selection exists — so the row checkbox can take its place over it. -->
+<!-- Placeholders shaped like this list's run rows (same padding, dot, text
+     and right readout), while a search or the first page is in flight. -->
+{#snippet skeletonRows(label: string)}
+    <div class="flex flex-col gap-0.5" role="status" aria-busy="true" aria-label={label}>
+        {#each [0, 1, 2, 3, 4, 5] as i (i)}
+            <div
+                class="rounded-[3px] border border-transparent {showTaskName
+                    ? 'p-3'
+                    : 'px-3 py-[11px]'}"
+            >
+                <div class="flex items-center {showTaskName ? 'gap-2.5' : 'gap-[11px]'}">
+                    <span class="size-[9px] shrink-0 animate-pulse rounded-full bg-outline-hover"
+                    ></span>
+                    {#if showTaskName}
+                        <span class="flex min-w-0 flex-1 flex-col gap-1.5 py-0.5">
+                            <span
+                                class="h-3 animate-pulse rounded-[3px] bg-outline-hover"
+                                style:width="{62 - (i % 3) * 12}%"
+                            ></span>
+                            <span class="h-2 w-2/5 animate-pulse rounded-[3px] bg-outline-hover"
+                            ></span>
+                        </span>
+                        <span
+                            class="h-2.5 w-9 shrink-0 animate-pulse self-start rounded-[3px] bg-outline-hover"
+                        ></span>
+                    {:else}
+                        <span
+                            class="h-3 animate-pulse rounded-[3px] bg-outline-hover"
+                            style:width="{58 - (i % 3) * 8}%"
+                        ></span>
+                        <span
+                            class="ml-auto h-2.5 w-9 shrink-0 animate-pulse rounded-[3px] bg-outline-hover"
+                        ></span>
+                    {/if}
+                </div>
+            </div>
+        {/each}
+    </div>
+{/snippet}
+
 {#snippet statusDot(colorClass: string, running: boolean)}
     <span
         class="{colorClass} size-[9px] shrink-0 rounded-full bg-current ring-[3px] ring-current/20 {running

package/src/stories/Button.stories.svelte

@@ -4,7 +4,7 @@
 <script module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
     import Button from "$lib/components/Button.svelte";
-    import { Play, Plus, ArrowRight, Download, Trash2 } from "@lucide/svelte";
+    import { Play, Plus, ArrowRight, Download, Trash } from "@lucide/svelte";
 
     const { Story } = defineMeta({
         title: "Core/Button",
@@ -71,7 +71,7 @@
             Export
         </Button>
         <Button variant="danger">
-            {#snippet icon()}<Trash2 size={16} />{/snippet}
+            {#snippet icon()}<Trash size={16} />{/snippet}
             Delete
         </Button>
     </div>

package/src/stories/DataGrid.stories.svelte

@@ -9,7 +9,7 @@
     import FilterBar from "$lib/components/FilterBar.svelte";
     import { seedValues } from "$lib/components/filter-spec.js";
     import { applyFilters } from "$lib/utils/filter.js";
-    import { Play, Pause, Trash2, SquarePen } from "@lucide/svelte";
+    import { Play, Pause, Trash, SquarePen } from "@lucide/svelte";
 
     const { Story } = defineMeta({
         title: "Data/DataGrid",
@@ -75,7 +75,7 @@
         { label: "Run Now", icon: Play },
         { label: "Pause", icon: Pause },
         { divider: true },
-        { label: "Delete", icon: Trash2, danger: true },
+        { label: "Delete", icon: Trash, danger: true },
     ];
 
     /** @type {import("$lib/components/filter-spec.js").FilterField[]} */

package/src/stories/Dropdown.stories.svelte

@@ -4,7 +4,7 @@
 <script module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
     import Dropdown from "$lib/components/Dropdown.svelte";
-    import { Play, Pause, SquarePen, Copy, Trash2, Settings, ChevronDown } from "@lucide/svelte";
+    import { Play, Pause, SquarePen, Copy, Trash, Settings, ChevronDown } from "@lucide/svelte";
 
     const { Story } = defineMeta({
         title: "Core/Dropdown",
@@ -24,7 +24,7 @@
         { label: "Duplicate", icon: Copy, onClick: () => console.log("Duplicate") },
         { label: "Pause", icon: Pause, onClick: () => console.log("Pause") },
         { divider: true },
-        { label: "Delete", icon: Trash2, danger: true, onClick: () => console.log("Delete") },
+        { label: "Delete", icon: Trash, danger: true, onClick: () => console.log("Delete") },
     ];
 
     const settingsMenu = [
@@ -63,7 +63,7 @@
             { label: "Edit", icon: SquarePen },
             { label: "Duplicate", icon: Copy, disabled: true },
             { divider: true },
-            { label: "Delete", icon: Trash2, danger: true, disabled: true },
+            { label: "Delete", icon: Trash, danger: true, disabled: true },
         ],
     }}
 />