@runwisp/ui 1.1.0 → 1.3.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.1.0",
+  "version": "1.3.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.1.0",
-    "@runwisp/typescript-config": "1.1.0",
+    "@runwisp/eslint-config": "1.3.0",
+    "@runwisp/typescript-config": "1.3.0",
     "@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": "1.1.0",
+    "@runwisp/common": "1.3.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/lib/actions/row-motion.test.ts

@@ -0,0 +1,115 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { arrival, leave, prefersReducedMotion } from "./row-motion.js";
+
+const LEAVE_MS = 160;
+const CLOSE_GAP_DELAY_MS = 110;
+const SHIFT_MS = 200;
+const SHIFT_DELAY = "--rw-shift-delay";
+
+// The helpers read the reduced-motion preference off `matchMedia` and write to
+// the narrow element slices they declare, so a stubbed global and plain objects
+// stand in for the browser (this repo's vitest env has no jsdom).
+function setReducedMotion(reduce: boolean): void {
+    vi.stubGlobal("matchMedia", (media: string) => ({ media, matches: reduce }));
+}
+
+/** A list element recording the custom properties a leaving row sets on it. */
+function listNode() {
+    const props = new Map<string, string>();
+    return {
+        props,
+        style: {
+            setProperty: (name: string, value: string | null) => {
+                props.set(name, value ?? "");
+            },
+            removeProperty: (name: string) => {
+                const previous = props.get(name) ?? "";
+                props.delete(name);
+                return previous;
+            },
+        },
+    };
+}
+
+describe("prefersReducedMotion", () => {
+    afterEach(() => vi.unstubAllGlobals());
+
+    it("reports what the reduced-motion media query matches", () => {
+        setReducedMotion(true);
+        expect(prefersReducedMotion()).toBe(true);
+        setReducedMotion(false);
+        expect(prefersReducedMotion()).toBe(false);
+    });
+});
+
+describe("arrival", () => {
+    it("plays the arrival cue on a row mounting for a fresh run", () => {
+        const added: string[] = [];
+        arrival({ classList: { add: (token: string) => added.push(token) } }, true);
+        expect(added).toEqual(["run-arrive"]);
+    });
+
+    it("leaves a row that mounted for an already-known run alone", () => {
+        const added: string[] = [];
+        arrival({ classList: { add: (token: string) => added.push(token) } }, false);
+        expect(added).toEqual([]);
+    });
+});
+
+describe("leave", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        setReducedMotion(false);
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+
+    it("fades out a run removed live and delays the rows closing its gap", () => {
+        const list = listNode();
+        const config = leave({ dataset: { runId: "run-1" }, parentElement: list }, () => true);
+
+        expect(config.duration).toBe(LEAVE_MS);
+        expect(list.props.get(SHIFT_DELAY)).toBe("110ms");
+
+        // Halfway through: half faded, halfway back to its resting offset.
+        expect(config.css?.(0.5, 0.5)).toBe("opacity: 0.5; translate: -6px 0");
+
+        // The delay is a one-shot for this removal, not a lasting list style.
+        vi.advanceTimersByTime(CLOSE_GAP_DELAY_MS + SHIFT_MS);
+        expect(list.props.has(SHIFT_DELAY)).toBe(false);
+    });
+
+    it("still animates a row with no list element around it", () => {
+        const config = leave({ dataset: { runId: "run-1" }, parentElement: null }, () => true);
+        expect(config.duration).toBe(LEAVE_MS);
+    });
+
+    it("goes instantly when the run left for any reason other than a live removal", () => {
+        const list = listNode();
+        const scrolledOut = leave(
+            { dataset: { runId: "run-1" }, parentElement: list },
+            () => false,
+        );
+        const noTracker = leave({ dataset: { runId: "run-1" }, parentElement: list }, undefined);
+        const noRunId = leave({ dataset: {}, parentElement: list }, () => true);
+
+        expect(scrolledOut.duration).toBe(0);
+        expect(noTracker.duration).toBe(0);
+        expect(noRunId.duration).toBe(0);
+        expect(list.props.has(SHIFT_DELAY)).toBe(false);
+    });
+
+    it("goes instantly when the operator prefers reduced motion", () => {
+        setReducedMotion(true);
+        const list = listNode();
+        const config = leave({ dataset: { runId: "run-1" }, parentElement: list }, () => true);
+
+        expect(config.duration).toBe(0);
+        expect(list.props.has(SHIFT_DELAY)).toBe(false);
+    });
+});

package/src/lib/actions/row-motion.ts

@@ -0,0 +1,75 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { cubicOut } from "svelte/easing";
+import { flip, type AnimationConfig } from "svelte/animate";
+import type { TransitionConfig } from "svelte/transition";
+
+const LEAVE_MS = 160;
+// Rows closing the gap wait for most of the fade, so they don't slide over a
+// row that is still visible.
+const CLOSE_GAP_DELAY_MS = 110;
+const SHIFT_MS = 200;
+
+// The slices of a row (and of the list it sits in) these helpers touch. Every
+// real row element satisfies them; naming just the members used keeps the
+// helpers unit-testable without a browser DOM.
+type ArrivingRow = { readonly classList: Pick<DOMTokenList, "add"> };
+type LeavingRow = {
+    readonly dataset: DOMStringMap;
+    readonly parentElement: { readonly style: ListStyle } | null;
+};
+type ListStyle = Pick<CSSStyleDeclaration, "setProperty" | "removeProperty">;
+
+export function prefersReducedMotion(): boolean {
+    return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+/**
+ * Plays the live-arrival cue (`.run-arrive` in theme.css) on a list row that
+ * mounts for a freshly arrived run. Mount-only, so the run's next re-render
+ * (pending → running) can't cut the animation short.
+ */
+export function arrival(node: ArrivingRow, fresh: boolean) {
+    if (fresh) node.classList.add("run-arrive");
+}
+
+/**
+ * Outro for a run row (`out:leave={motion?.removed}`): fades and sweeps the
+ * row out when `removed` says its run (read from `data-run-id`) left live.
+ * Rows leaving for any other reason (scrolled out of the virtual window, a
+ * filter change) go instantly. Also sets `--rw-shift-delay` on the list so
+ * rows sliding up with a CSS transition start after the fade.
+ */
+export function leave(
+    node: LeavingRow,
+    removed: ((runId: string) => boolean) | undefined,
+): TransitionConfig {
+    const runId = node.dataset.runId;
+    if (!runId || removed?.(runId) !== true || prefersReducedMotion()) return { duration: 0 };
+    const list = node.parentElement;
+    if (list) {
+        list.style.setProperty("--rw-shift-delay", `${String(CLOSE_GAP_DELAY_MS)}ms`);
+        setTimeout(
+            () => list.style.removeProperty("--rw-shift-delay"),
+            CLOSE_GAP_DELAY_MS + SHIFT_MS,
+        );
+    }
+    return {
+        duration: LEAVE_MS,
+        easing: cubicOut,
+        css: (t) => `opacity: ${String(t)}; translate: ${String((1 - t) * -12)}px 0`,
+    };
+}
+
+/**
+ * `animate:` for plain (non-virtual) run lists: flip, except rows moving up to
+ * close a removed row's gap wait for its fade.
+ */
+export function shift(node: Element, rects: { from: DOMRect; to: DOMRect }): AnimationConfig {
+    if (prefersReducedMotion()) return { duration: 0 };
+    return flip(node, rects, {
+        duration: SHIFT_MS,
+        delay: rects.to.top < rects.from.top ? CLOSE_GAP_DELAY_MS : 0,
+    });
+}

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

@@ -29,6 +29,8 @@
     import Popover from "../Popover.svelte";
     import Tooltip from "../Tooltip.svelte";
     import { portal } from "../../actions/portal.js";
+    import { prefersReducedMotion } from "../../actions/row-motion.js";
+    import type { RunMotion } from "../../utils/run-motion.js";
     import type { Run } from "./types.js";
     import { isLogEvent, type LogEvent, type LogSlice } from "../../log-console/types.js";
     import { formatClockTime, formatCalendarDate } from "../../utils/format.js";
@@ -63,6 +65,7 @@
         historyVisible = false,
         highlightLine = null,
         getInstanceCount = () => 1,
+        motion,
         notFound = false,
     }: {
         run: Run | undefined;
@@ -109,12 +112,36 @@
         // 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;
+        // Which runs arrived or were removed live moments ago. The panel eases in
+        // when a new run takes it (triggered, or a scheduled run auto-selected)
+        // or when its run was deleted and another takes its place; picking a
+        // run by hand swaps instantly.
+        motion?: RunMotion;
         // 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();
 
+    function easeInFresh(node: HTMLElement, runId: string) {
+        let shown = runId;
+        const play = (id: string) => {
+            const previous = shown;
+            shown = id;
+            if (!motion?.arrived(id) && !motion?.removed(previous)) return;
+            if (prefersReducedMotion()) return;
+            node.animate(
+                [
+                    { opacity: 0.35, translate: "0 6px" },
+                    { opacity: 1, translate: "0 0" },
+                ],
+                { duration: 200, easing: "cubic-bezier(0.2, 0.8, 0.2, 1)" },
+            );
+        };
+        play(runId);
+        return { update: play };
+    }
+
     let canDelete = $derived.by(() => {
         if (!run || !onDelete) return false;
         const status = runDisplayStatus(run);
@@ -251,7 +278,8 @@
             displayed === "crashed" ||
             displayed === "log_overflow" ||
             displayed === "missed" ||
-            displayed === "start_failed"
+            displayed === "start_failed" ||
+            displayed === "unhealthy"
         )
             return "var(--color-danger-surface)";
         if (displayed === "timeout" || displayed === "daemon_stopped" || displayed === "queue_full")
@@ -355,7 +383,10 @@
     <!-- The panel: a status spine runs the full left edge across both the header
          readout and the console below, hugging the rail divider (artifact
          ".detail .spine"). -->
-    <div class="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+    <div
+        use:easeInFresh={run.id}
+        class="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+    >
         <!-- Status spine: a vivid edge coloring the panel by outcome; it streams
              a light sweep while a run is live. -->
         <div

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

@@ -15,6 +15,8 @@
     import { SvelteSet } from "svelte/reactivity";
     import { createVirtualizer } from "@tanstack/svelte-virtual";
     import Button from "../Button.svelte";
+    import { arrival, leave, prefersReducedMotion } from "../../actions/row-motion.js";
+    import type { RunMotion } from "../../utils/run-motion.js";
     import EmptyState from "../EmptyState.svelte";
     import RunFilterPopover from "./RunFilterPopover.svelte";
     import type { Run } from "./types.js";
@@ -68,6 +70,7 @@
         onBulkDelete,
         onBulkRerun,
         getInstanceCount = () => 1,
+        motion,
         flush = false,
         outputSearch = false,
         outputQuery = "",
@@ -99,6 +102,9 @@
         // 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;
+        // Which runs arrived or were removed live moments ago: their rows animate
+        // in or out. Page loads, scrolling and filtering never do.
+        motion?: RunMotion;
         // Flush rail mode (task detail page): render as a borderless rail that
         // fills its column and is divided from the detail panel by a single right
         // border — no card chrome of its own. Default renders the standalone card
@@ -189,8 +195,13 @@
 
     // `setOptions` always notifies the store (see @tanstack/svelte-virtual src),
     // so reading $virtualizer here would loop. Untrack the store read.
-    $effect(() => {
+    // Pre-effect so the count lands in the same render as `items`: otherwise
+    // the row pushed past the old count unmounts for a frame and remounts
+    // without its slide. A pre-effect first runs before `bind:this`, so it also
+    // re-runs once the scroll element exists or the virtualizer never attaches.
+    $effect.pre(() => {
         const count = items.length;
+        if (!scrollElement) return;
         untrack(() => $virtualizer.setOptions({ count }));
     });
 
@@ -222,8 +233,10 @@
         if (!scrollElement) return;
         lastScrolled = id;
         // "auto" only scrolls when the row is off-screen, so visible selections
-        // (and manual clicks) don't jump.
-        untrack(() => $virtualizer.scrollToIndex(index, { align: "auto" }));
+        // (and manual clicks) don't jump. A live arrival taking focus glides
+        // there so the operator sees where it went; deep links jump.
+        const behavior = motion?.arrived(id) && !prefersReducedMotion() ? "smooth" : "auto";
+        untrack(() => $virtualizer.scrollToIndex(index, { align: "auto", behavior }));
     });
 
     function isRowSelected(id: string): boolean {
@@ -575,8 +588,19 @@
                 {#each $virtualizer.getVirtualItems() as row (items[row.index]?.id ?? row.index)}
                     {@const run = items[row.index]}
                     {#if run}
+                        <!-- The transform transition slides rows aside when a live
+                             run is inserted or removed. Navigation never animates:
+                             filter/sort/task changes remount rows, pagination
+                             appends, and scrolling doesn't move a row. `leave`
+                             is global because this {#if}, not the row's each
+                             item, is the block it would otherwise wait for; it
+                             only plays for runs removed live. -->
                         <div
-                            class="group/row flex items-center gap-1"
+                            data-run-id={run.id}
+                            use:arrival={motion?.arrived(run.id) ?? false}
+                            out:leave|global={motion?.removed}
+                            class="group/row flex items-center gap-1 transition-transform duration-200 ease-out motion-reduce:transition-none"
+                            style:transition-delay="var(--rw-shift-delay, 0ms)"
                             style:position="absolute"
                             style:top="0"
                             style:left="0"

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

@@ -179,6 +179,7 @@ describe("STATUS_BUCKETS", () => {
         "timeout",
         "log_overflow",
         "start_failed",
+        "unhealthy",
         "missed",
     ];
 
@@ -266,6 +267,7 @@ describe("triggerDescription", () => {
         expect(triggerDescription("cli")).toBe("CLI");
         expect(triggerDescription("service")).toBe("Service auto-start");
         expect(triggerDescription("startup")).toBe("On daemon start");
+        expect(triggerDescription("hook")).toBe("Hook");
     });
 
     it("falls back to a humanized token for anything unknown", () => {
@@ -275,7 +277,15 @@ describe("triggerDescription", () => {
 
 describe("FILTERABLE_TRIGGERS", () => {
     it("offers every trigger except station", () => {
-        expect(FILTERABLE_TRIGGERS).toEqual(["cron", "api", "ui", "cli", "service", "startup"]);
+        expect(FILTERABLE_TRIGGERS).toEqual([
+            "cron",
+            "api",
+            "ui",
+            "cli",
+            "service",
+            "startup",
+            "hook",
+        ]);
         expect(FILTERABLE_TRIGGERS).not.toContain("station");
     });
 });

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

@@ -227,8 +227,8 @@ export function humanizeStatus(status: string): string {
  * Descriptive label for a run's trigger source — fuller than the one-word row
  * badge (`formatTriggeredByLabel`) for the "cron"/"station"/"service"/"startup"
  * sources, where the extra words disambiguate (e.g. "REST API" vs a bare
- * "API"). "ui" and "cli" already read fine as their bare badge word, so those
- * two match `formatTriggeredByLabel` exactly.
+ * "API"). "ui", "cli" and "hook" already read fine as their bare badge word,
+ * so those three match `formatTriggeredByLabel` exactly.
  *
  * Note `cron` covers both on-time schedule firings and catch-up for missed
  * runs, and `startup` is specifically `run_on_start` (not catch-up).
@@ -249,6 +249,8 @@ export function triggerDescription(trigger: string): string {
             return "Service auto-start";
         case "startup":
             return "On daemon start";
+        case "hook":
+            return "Hook";
         default:
             return humanizeStatus(trigger);
     }

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

@@ -29,6 +29,7 @@ const RUN_VERDICTS: Record<RunStatus, RunVerdict> = {
     daemon_stopped: { verb: "cut short after", timed: true },
     log_overflow: { verb: "killed after", timed: true },
     start_failed: { verb: "gave up after", timed: true },
+    unhealthy: { verb: "killed as unhealthy after", timed: true },
     ended: { verb: "ended after", timed: true },
     running: { verb: "running for", timed: true },
     pending: { verb: "queued", timed: false },
@@ -90,6 +91,7 @@ export function formatTriggeredByLabel(triggeredBy: Run["triggeredBy"]): string
     if (triggeredBy === "cron") return "Cron";
     if (triggeredBy === "service") return "Service";
     if (triggeredBy === "startup") return "Startup";
+    if (triggeredBy === "hook") return "Hook";
     return "Station";
 }
 

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

@@ -13,6 +13,7 @@ import {
     FileExclamationPoint,
     CalendarX,
     OctagonX,
+    HeartCrack,
 } from "@lucide/svelte";
 import type { Component } from "svelte";
 import { displayStatus, type RunStatus, type Run } from "@runwisp/common";
@@ -153,6 +154,16 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         description:
             "The run (or service instance) kept failing; after restart_attempts consecutive failures, RunWisp gave up restarting it automatically.",
     },
+    unhealthy: {
+        icon: HeartCrack,
+        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 instance kept failing its health_check, so RunWisp stopped it. Its restart policy decides what happens next.",
+    },
     pending: {
         icon: Clock,
         color: "text-on-surface-muted",

package/src/lib/index.ts

@@ -154,3 +154,5 @@ export {
 export { formatShortId } from "./utils/id.js";
 export { debounce } from "./utils/debounce.js";
 export { TickingNow } from "./utils/ticking-now.svelte.js";
+export { RunMotion } from "./utils/run-motion.js";
+export { arrival, leave, shift, prefersReducedMotion } from "./actions/row-motion.js";

package/src/lib/theme.css

@@ -259,7 +259,17 @@ h3 {
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -0.02em;
-    text-wrap: balance;
+}
+
+/* Layered, unlike the rule above: text-wrap sets the same property as
+   white-space, so unlayered it would beat the `truncate` utility and wrap a
+   heading that asked to be cut to one line. */
+@layer base {
+    h1,
+    h2,
+    h3 {
+        text-wrap: balance;
+    }
 }
 
 /* Utility classes for the design system */
@@ -298,3 +308,42 @@ h3 {
 .btn-scale:active {
     transform: scale(0.97);
 }
+
+/* Live arrival: the row drops in, then a primary ring glows and fades so the
+   eye finds the new run. Added by the `arrival` action; `translate` composes
+   with any inline `transform`. */
+.run-arrive {
+    border-radius: 3px;
+    animation: run-arrive 1.2s ease-out;
+}
+@keyframes run-arrive {
+    0% {
+        opacity: 0;
+        translate: 0 -6px;
+        box-shadow: 0 0 0 1px var(--color-primary);
+    }
+    18% {
+        opacity: 1;
+        translate: 0 0;
+        box-shadow:
+            0 0 0 1px var(--color-primary),
+            0 0 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
+    }
+    100% {
+        box-shadow: 0 0 0 1px transparent;
+    }
+}
+@keyframes run-arrive-still {
+    0%,
+    18% {
+        box-shadow: 0 0 0 1px var(--color-primary);
+    }
+    100% {
+        box-shadow: 0 0 0 1px transparent;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .run-arrive {
+        animation-name: run-arrive-still;
+    }
+}

package/src/lib/utils/run-motion.test.ts

@@ -0,0 +1,67 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { RunMotion } from "./run-motion.js";
+
+const WINDOW_MS = 2000;
+
+describe("RunMotion", () => {
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => vi.useRealTimers());
+
+    it("reports nothing for a run it was never told about", () => {
+        const motion = new RunMotion();
+        expect(motion.arrived("run-1")).toBe(false);
+        expect(motion.removed("run-1")).toBe(false);
+    });
+
+    it("keeps arrivals and removals apart", () => {
+        const motion = new RunMotion();
+        motion.markArrived("arrived-run");
+        motion.markRemoved("removed-run");
+        expect(motion.arrived("arrived-run")).toBe(true);
+        expect(motion.removed("arrived-run")).toBe(false);
+        expect(motion.removed("removed-run")).toBe(true);
+        expect(motion.arrived("removed-run")).toBe(false);
+    });
+
+    it("forgets a run once the window passes, so a later click doesn't animate it", () => {
+        const motion = new RunMotion();
+        motion.markArrived("run-1");
+        motion.markRemoved("run-2");
+        vi.advanceTimersByTime(WINDOW_MS - 1);
+        expect(motion.arrived("run-1")).toBe(true);
+        expect(motion.removed("run-2")).toBe(true);
+        vi.advanceTimersByTime(1);
+        expect(motion.arrived("run-1")).toBe(false);
+        expect(motion.removed("run-2")).toBe(false);
+    });
+
+    it("prunes expired runs when a later one is marked", () => {
+        const motion = new RunMotion();
+        motion.markArrived("old-run");
+        vi.advanceTimersByTime(WINDOW_MS);
+        motion.markArrived("new-run");
+        expect(motion.arrived("old-run")).toBe(false);
+        expect(motion.arrived("new-run")).toBe(true);
+    });
+
+    it("re-marking a run restarts its window", () => {
+        const motion = new RunMotion();
+        motion.markArrived("run-1");
+        vi.advanceTimersByTime(WINDOW_MS - 1);
+        motion.markArrived("run-1");
+        vi.advanceTimersByTime(WINDOW_MS - 1);
+        expect(motion.arrived("run-1")).toBe(true);
+    });
+
+    it("clear forgets everything", () => {
+        const motion = new RunMotion();
+        motion.markArrived("arrived-run");
+        motion.markRemoved("removed-run");
+        motion.clear();
+        expect(motion.arrived("arrived-run")).toBe(false);
+        expect(motion.removed("removed-run")).toBe(false);
+    });
+});

package/src/lib/utils/run-motion.ts

@@ -0,0 +1,56 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+// Long enough to span an SSE insert and the trigger's HTTP response that
+// selects the new run; short enough that a later click never re-animates it.
+const WINDOW_MS = 2000;
+
+class RecentIds {
+    readonly #at = new Map<string, number>();
+
+    mark(id: string): void {
+        const now = Date.now();
+        for (const [known, at] of this.#at) {
+            if (now - at >= WINDOW_MS) this.#at.delete(known);
+        }
+        this.#at.set(id, now);
+    }
+
+    has(id: string): boolean {
+        const at = this.#at.get(id);
+        return at !== undefined && Date.now() - at < WINDOW_MS;
+    }
+
+    clear(): void {
+        this.#at.clear();
+    }
+}
+
+/**
+ * Remembers which runs arrived or were removed live moments ago (a trigger, a
+ * scheduled firing, a run finishing, a delete), as opposed to rows that a page
+ * fetch, scroll or filter change loaded or dropped, so only genuine changes
+ * animate. Plain (non-reactive): it is only read at mount, unmount or
+ * selection time.
+ */
+export class RunMotion {
+    readonly #arrived = new RecentIds();
+    readonly #removed = new RecentIds();
+
+    markArrived(runId: string): void {
+        this.#arrived.mark(runId);
+    }
+
+    markRemoved(runId: string): void {
+        this.#removed.mark(runId);
+    }
+
+    // Arrows so they can be handed around unbound.
+    arrived = (runId: string): boolean => this.#arrived.has(runId);
+    removed = (runId: string): boolean => this.#removed.has(runId);
+
+    clear(): void {
+        this.#arrived.clear();
+        this.#removed.clear();
+    }
+}