@runwisp/ui 0.8.0 → 0.9.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.8.0",
+  "version": "0.9.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.8.0",
-    "@runwisp/typescript-config": "0.8.0",
+    "@runwisp/eslint-config": "0.9.0",
+    "@runwisp/typescript-config": "0.9.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.8.0",
+    "@runwisp/common": "0.9.0",
     "@tanstack/svelte-virtual": "^3.13.25",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.4.0",

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

@@ -21,7 +21,7 @@
     import { formatDateTime } from "../../utils/format.js";
     import { formatShortId } from "../../utils/id.js";
     import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
-    import { runDuration } from "./run-helpers.js";
+    import { runDuration, runStartDelay } from "./run-helpers.js";
 
     let {
         run,
@@ -94,6 +94,7 @@
     {@const config = getRunStatusConfig(runDisplayStatus(run))}
     {@const DetailIcon = config.icon}
     {@const duration = runDuration(run)}
+    {@const startDelay = runStartDelay(run)}
     <!-- Detailed Header -->
     <div class="@container shrink-0 border-b border-outline-faint bg-surface-raised p-6">
         <div class="flex flex-col justify-between gap-6 @4xl:flex-row @4xl:items-start">
@@ -200,6 +201,14 @@
                     <span class="font-mono text-sm font-medium whitespace-nowrap text-on-surface">
                         {run.start_at ? formatDateTime(run.start_at) : "--:--"}
                     </span>
+                    {#if startDelay}
+                        <span
+                            class="font-mono text-xs whitespace-nowrap text-on-surface-faint"
+                            title="Scheduled at {formatDateTime(run.created_at)}"
+                        >
+                            +{startDelay} after scheduled
+                        </span>
+                    {/if}
                 </div>
 
                 <div

package/src/lib/components/dashboard/run-helpers.test.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { runDuration } from "./run-helpers.js";
+import { runDuration, runStartDelay } from "./run-helpers.js";
 
 describe("runDuration", () => {
     it("returns undefined when start_at is not set", () => {
@@ -35,3 +35,27 @@ describe("runDuration", () => {
         });
     });
 });
+
+describe("runStartDelay", () => {
+    it("returns undefined when start_at is not set", () => {
+        expect(runStartDelay({ created_at: "2024-06-15T12:00:00.000Z" })).toBeUndefined();
+    });
+
+    it("returns undefined when the run started within a second of its tick", () => {
+        expect(
+            runStartDelay({
+                created_at: "2024-06-15T12:00:00.000Z",
+                start_at: "2024-06-15T12:00:00.300Z",
+            }),
+        ).toBeUndefined();
+    });
+
+    it("formats the jitter/queue gap when the run started meaningfully later", () => {
+        expect(
+            runStartDelay({
+                created_at: "2024-06-15T03:00:00.000Z",
+                start_at: "2024-06-15T03:07:12.000Z",
+            }),
+        ).toBe("7m 12s");
+    });
+});

package/src/lib/components/dashboard/run-helpers.ts

@@ -11,6 +11,21 @@ export function runDuration(run: Pick<Run, "start_at" | "end_at">): string | und
     return formatDuration(end - start);
 }
 
+/**
+ * Gap between when a run was scheduled (`created_at`, the cron tick) and when
+ * it actually started (`start_at`), formatted — or undefined when the two are
+ * within a second of each other. This is the visible face of `jitter`: a
+ * jittered run is created at its tick but starts later inside the window, and
+ * this is by how much. It also surfaces queue-wait, since a queued run is
+ * created when it joins the line and started when the line clears.
+ */
+export function runStartDelay(run: Pick<Run, "created_at" | "start_at">): string | undefined {
+    if (!run.start_at) return undefined;
+    const delay = new Date(run.start_at).getTime() - new Date(run.created_at).getTime();
+    if (delay < 1000) return undefined;
+    return formatDuration(delay);
+}
+
 /**
  * Monotonic position of a run's status in its lifecycle. Used to reject stale
  * updates (e.g. a `pending` HTTP response arriving after an SSE already

package/src/lib/components/dashboard/status-config.ts

@@ -11,6 +11,8 @@ import {
     CircleDashed,
     SkipForward,
     FileExclamationPoint,
+    CalendarX,
+    OctagonX,
 } from "@lucide/svelte";
 import type { Component } from "svelte";
 import { displayStatus, type RunStatus, type Run } from "@runwisp/common";
@@ -130,6 +132,26 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         description:
             "The daemon shut down while this run was in flight and it exceeded shutdown_timeout; it was not resumed.",
     },
+    missed: {
+        icon: CalendarX,
+        color: "text-danger-surface",
+        bg: "bg-danger-soft",
+        border: "border-danger-soft",
+        dot: "bg-danger-surface",
+        badge: "bg-danger-soft text-danger-soft-text",
+        description:
+            "A scheduled run never happened because the daemon was down. Detected and recorded on restart.",
+    },
+    start_failed: {
+        icon: OctagonX,
+        color: "text-danger-surface",
+        bg: "bg-danger-soft",
+        border: "border-danger-soft",
+        dot: "bg-danger-surface",
+        badge: "bg-danger-soft text-danger-soft-text",
+        description:
+            "The service kept failing to stay up for healthy_after; after start_retries the supervisor gave up (FATAL) and stopped restarting it.",
+    },
     pending: {
         icon: Clock,
         color: "text-on-surface-muted",

package/src/lib/index.ts

@@ -90,7 +90,7 @@ export {
     RUN_STATUS_CONFIG,
     type RunStatusConfig,
 } from "./components/dashboard/status-config.js";
-export { runDuration, runPhaseOrder } from "./components/dashboard/run-helpers.js";
+export { runDuration, runStartDelay, runPhaseOrder } from "./components/dashboard/run-helpers.js";
 export { humanizeCron, type HumanizedCron } from "./components/dashboard/cron-format.js";
 export type { DaemonState, DaemonStats } from "./components/dashboard/types.js";
 

package/src/lib/utils/error.test.ts

@@ -0,0 +1,34 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { extractErrorMessage } from "./error.js";
+
+describe("extractErrorMessage", () => {
+    it("returns Error.message when given an Error", () => {
+        expect(extractErrorMessage(new Error("boom"))).toBe("boom");
+    });
+
+    it("returns the fallback when an Error has an empty message", () => {
+        expect(extractErrorMessage(new Error(""))).toBe("An unexpected error occurred");
+    });
+
+    it("returns a string error as-is", () => {
+        expect(extractErrorMessage("plain text error")).toBe("plain text error");
+    });
+
+    it("returns the fallback for an empty string", () => {
+        expect(extractErrorMessage("")).toBe("An unexpected error occurred");
+    });
+
+    it("honours a custom fallback", () => {
+        expect(extractErrorMessage(undefined, "custom fallback")).toBe("custom fallback");
+        expect(extractErrorMessage({ unrelated: 1 }, "custom fallback")).toBe("custom fallback");
+        expect(extractErrorMessage(null, "custom fallback")).toBe("custom fallback");
+    });
+
+    it("returns the default fallback for non-Error non-string values", () => {
+        expect(extractErrorMessage(42)).toBe("An unexpected error occurred");
+        expect(extractErrorMessage({ code: 500 })).toBe("An unexpected error occurred");
+    });
+});

package/src/lib/utils/id.test.ts

@@ -0,0 +1,23 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { formatShortId } from "./id.js";
+
+describe("formatShortId", () => {
+    it("returns the last 8 characters by default", () => {
+        expect(formatShortId("01HVZ4XYZ123456ABCDEF")).toBe("56ABCDEF");
+    });
+
+    it("honours a custom length", () => {
+        expect(formatShortId("01HVZ4XYZ123456ABCDEF", 4)).toBe("CDEF");
+    });
+
+    it("returns the whole string when shorter than the requested length", () => {
+        expect(formatShortId("abc", 8)).toBe("abc");
+    });
+
+    it("returns an empty string for an empty input", () => {
+        expect(formatShortId("")).toBe("");
+    });
+});