@runwisp/ui 0.12.0 → 0.13.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.12.0",
+  "version": "0.13.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -50,8 +50,8 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.39.1",
-    "@runwisp/eslint-config": "0.12.0",
-    "@runwisp/typescript-config": "0.12.0",
+    "@runwisp/eslint-config": "0.13.0",
+    "@runwisp/typescript-config": "0.13.0",
     "@storybook/addon-a11y": "^10.1.9",
     "@storybook/addon-docs": "^10.1.9",
     "@storybook/addon-svelte-csf": "^5.0.10",
@@ -99,7 +99,7 @@
     "@floating-ui/dom": "^1.7.4",
     "@fontsource/tasa-orbiter": "^5.2.2",
     "@lucide/svelte": "^0.561.0",
-    "@runwisp/common": "0.12.0",
+    "@runwisp/common": "0.13.0",
     "@tanstack/svelte-virtual": "^3.13.25",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.4.0",

package/src/lib/components/FormField.svelte

@@ -12,6 +12,11 @@
         required?: boolean;
         children: Snippet;
         class?: string;
+        // The id of the control this field labels. Pass the SAME id to the wrapped
+        // input/select so the <label for> actually points at it — otherwise the
+        // label is dead (clicking it does nothing; screen readers can't associate
+        // it). Falls back to a generated id when the field has no focusable target.
+        id?: string;
     }
 
     let {
@@ -22,14 +27,16 @@
         required = false,
         children,
         class: className = "",
+        id,
     }: Props = $props();
 
     const generatedId = `field-${Math.random().toString(36).slice(2, 10)}`;
+    const fieldId = $derived(id ?? generatedId);
 </script>
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={generatedId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={fieldId} class="block text-sm font-medium text-on-surface-muted">
             {label}
             {#if required}
                 <span class="text-danger-soft-text">*</span>

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

@@ -21,6 +21,7 @@
         Maximize2,
         Minimize2,
         TextWrap,
+        SearchX,
     } from "@lucide/svelte";
     import Button from "../Button.svelte";
     import EmptyState from "../EmptyState.svelte";
@@ -67,6 +68,7 @@
         historyVisible = false,
         highlightLine = null,
         getInstanceCount = () => 1,
+        notFound = false,
     }: {
         run: Run | undefined;
         fetchLogs: (
@@ -112,6 +114,10 @@
         // Resolves a task's currently configured instance count so multi-instance
         // services render a 1-based #N suffix. Defaults to single-instance.
         getInstanceCount?: (taskName: string) => number;
+        // True when a deep-linked run id resolved to no run (deleted by retention,
+        // 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;
     } = $props();
 
     let canDelete = $derived.by(() => {
@@ -837,13 +843,15 @@
         class="flex min-w-0 flex-1 flex-col items-center justify-center gap-4 bg-surface-sunken/30"
     >
         <EmptyState
-            title={onRunTask ? "No runs yet" : "Select a run"}
-            description={onRunTask
-                ? "This task hasn't run yet. Trigger it to see its output here."
-                : "Pick a run from the list to view details and logs."}
-            icon={MousePointerClick}
+            title={notFound ? "Run not found" : onRunTask ? "No runs yet" : "Select a run"}
+            description={notFound
+                ? "This run doesn't exist — it may have been deleted by retention, or the link is wrong. Pick a run from the list to continue."
+                : onRunTask
+                  ? "This task hasn't run yet. Trigger it to see its output here."
+                  : "Pick a run from the list to view details and logs."}
+            icon={notFound ? SearchX : MousePointerClick}
         />
-        {#if onRunTask}
+        {#if onRunTask && !notFound}
             <button
                 type="button"
                 onclick={() => onRunTask()}