@runwisp/ui 0.15.0 → 0.15.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "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": "0.15.0",
-    "@runwisp/typescript-config": "0.15.0",
+    "@runwisp/eslint-config": "0.15.1",
+    "@runwisp/typescript-config": "0.15.1",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -93,7 +93,7 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.28.0",
-    "@runwisp/common": "0.15.0",
+    "@runwisp/common": "0.15.1",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/lib/components/DurationInput.svelte

@@ -32,7 +32,7 @@
         ...restProps
     }: Props = $props();
 
-    const generatedId = `duration-input-${Math.random().toString(36).slice(2, 10)}`;
+    const generatedId = $props.id();
     const inputId = $derived(id ?? generatedId);
 
     let textValue = $state("");

package/src/lib/components/FormField.svelte

@@ -30,7 +30,7 @@
         id,
     }: Props = $props();
 
-    const generatedId = `field-${Math.random().toString(36).slice(2, 10)}`;
+    const generatedId = $props.id();
     const fieldId = $derived(id ?? generatedId);
 </script>
 

package/src/lib/components/Input.svelte

@@ -33,7 +33,7 @@
         ...restProps
     }: Props = $props();
 
-    const generatedId = `input-${Math.random().toString(36).slice(2, 10)}`;
+    const generatedId = $props.id();
     const inputId = $derived(id ?? generatedId);
 
     const sizeClasses: Record<InputSize, string> = {

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

@@ -30,7 +30,7 @@
     import Tooltip from "../Tooltip.svelte";
     import { portal } from "../../actions/portal.js";
     import type { Run } from "./types.js";
-    import type { LogEvent, LogSlice } from "../../log-console/types.js";
+    import { isLogEvent, type LogEvent, type LogSlice } from "../../log-console/types.js";
     import { formatClockTime, formatCalendarDate } from "../../utils/format.js";
     import { formatShortId } from "../../utils/id.js";
     import { TickingNow } from "../../utils/ticking-now.svelte.js";
@@ -146,22 +146,41 @@
         if (!stream) return;
 
         let cleanup: (() => void) | undefined;
+        let cancelled = false;
 
         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 },
-            );
+            void (async () => {
+                // Paint the tail in one batched page so the console opens
+                // already at the newest output, instead of replaying 1000
+                // backfill lines over SSE and visibly scrolling down to reach
+                // the end. The live stream then picks up after the seeded tail
+                // (its disk backfill from that anchor closes the fetch↔stream
+                // race, and the daemon dedupes anything already shown).
+                let fromLine = -TAIL_LINES;
+                try {
+                    const seed = await fetchLogs(id, -TAIL_LINES, -1);
+                    if (cancelled) return;
+                    if (isLogEvent(seed)) {
+                        if (logConsole) logConsole.onStream(seed);
+                        if (seed.finished) return; // ended run: nothing live to follow
+                        if (seed.sizeLines > 0) fromLine = seed.sizeLines;
+                    }
+                } catch {
+                    // Seed failed — fall back to the SSE tail backfill.
+                }
+                if (cancelled) return;
+                cleanup = stream(
+                    id,
+                    (event: LogEvent) => {
+                        if (logConsole) logConsole.onStream(event);
+                    },
+                    { fromLine },
+                );
+            })();
         });
 
         return () => {
+            cancelled = true;
             if (cleanup) cleanup();
         };
     });

package/src/lib/theme-tokens.css

@@ -35,9 +35,7 @@
     --rw-font-sans: "TASA Orbiter", system-ui, -apple-system, sans-serif;
     --rw-font-mono:
         "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-}
 
-:root {
     /* Primary — Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
      * and less cyan than Aurora (running/info) so the two stay distinct. */
     --rw-color-wisp-50: oklch(0.97 0.02 205);

package/src/lib/components/FeatureCard.svelte

@@ -1,35 +0,0 @@
-<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-
-<script lang="ts">
-    import type { Component, Snippet } from "svelte";
-
-    interface Props {
-        title: string;
-        icon?: Component;
-        children?: Snippet;
-        class?: string;
-    }
-
-    let { title, icon: Icon, children, class: className = "" }: Props = $props();
-</script>
-
-<article
-    class="overflow-hidden rounded-[4px] border border-outline bg-surface-raised p-6 hover:border-outline-hover {className}"
->
-    <div class="flex flex-col gap-3">
-        {#if Icon}
-            <span
-                class="inline-flex h-10 w-10 items-center justify-center rounded-[3px] border border-primary-soft-border bg-primary-soft text-primary-soft-text"
-            >
-                <Icon size={20} />
-            </span>
-        {/if}
-        <h3 class="font-mono text-base text-primary">{title}</h3>
-        {#if children}
-            <div class="font-sans text-sm leading-relaxed text-on-surface-muted">
-                {@render children()}
-            </div>
-        {/if}
-    </div>
-</article>

package/src/lib/components/FeatureGrid.svelte

@@ -1,37 +0,0 @@
-<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-
-<script lang="ts">
-    import type { Snippet } from "svelte";
-
-    interface Props {
-        columns?: 1 | 2 | 3 | 4;
-        gap?: "sm" | "md" | "lg";
-        children?: Snippet;
-        class?: string;
-    }
-
-    let { columns = 3, gap = "md", children, class: className = "" }: Props = $props();
-
-    const colClasses: Record<1 | 2 | 3 | 4, string> = {
-        1: "grid-cols-1",
-        2: "grid-cols-1 sm:grid-cols-2",
-        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-    };
-
-    const gapClasses: Record<"sm" | "md" | "lg", string> = {
-        sm: "gap-3",
-        md: "gap-4",
-        lg: "gap-6",
-    };
-
-    const colClass = $derived(colClasses[columns]);
-    const gapClass = $derived(gapClasses[gap]);
-</script>
-
-<div class="grid {colClass} {gapClass} {className}">
-    {#if children}
-        {@render children()}
-    {/if}
-</div>