@runwisp/ui 1.0.1 → 1.2.0

package/src/lib/components/FilterPill.svelte

@@ -0,0 +1,180 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<!--
+  One filter, one element. The pill is both the control and its own "chip":
+  inactive it reads `Label ▾` (muted); active it reads `Label: value ✕` (accent)
+  with an inline clear. Active vs inactive is a restyle of the SAME element — it
+  never spawns a second row, so the table below never jumps. Clicking the body
+  opens a type-specific editor popover (select menu / number / date range).
+-->
+
+<script lang="ts">
+    import { untrack } from "svelte";
+    import Popover from "./Popover.svelte";
+    import Input from "./Input.svelte";
+    import { Check, ChevronDown, X } from "@lucide/svelte";
+    import {
+        type FilterField,
+        type FilterValues,
+        fieldKeys,
+        fieldLabel,
+        isFieldActive,
+        isBlank,
+    } from "./filter-spec.js";
+
+    let {
+        field,
+        values = $bindable({}),
+        // Open the editor on mount — set when the pill was just added from the
+        // "+ Add filter" menu, so the user lands straight in the value picker.
+        autoOpen = false,
+        onClose,
+    }: {
+        field: FilterField;
+        values?: FilterValues;
+        autoOpen?: boolean;
+        onClose?: () => void;
+    } = $props();
+
+    // Capture the initial autoOpen once; later prop changes must not reopen it.
+    let open = $state(untrack(() => autoOpen));
+    const active = $derived(isFieldActive(field, values));
+    const label = $derived(fieldLabel(field));
+
+    // The active-state summary shown after the label (`Label: <this>`).
+    const summary = $derived.by(() => {
+        if (field.type === "select") {
+            const v = values[field.key];
+            return field.options.find((o) => String(o.value) === String(v))?.label ?? String(v);
+        }
+        if (field.type === "daterange") {
+            const from = values[`${field.key}From`];
+            const to = values[`${field.key}To`];
+            return `${from || "…"} → ${to || "…"}`;
+        }
+        return values[field.key] ?? "";
+    });
+
+    function clear() {
+        for (const k of fieldKeys(field)) values[k] = "";
+    }
+
+    // Tell the parent when the editor closes so an abandoned "just added" pill
+    // (opened but left blank) can be dropped from the visible set.
+    let wasOpen = false;
+    $effect(() => {
+        if (wasOpen && !open) onClose?.();
+        wasOpen = open;
+    });
+
+    // Date-range quick presets. Browser runtime, so reading the clock is fine.
+    const DAY_MS = 86_400_000;
+    const isoDay = (ms: number) => new Date(ms).toISOString().slice(0, 10);
+    function setRange(days: number) {
+        if (field.type !== "daterange") return;
+        const now = Date.now();
+        values[`${field.key}From`] = isoDay(now - days * DAY_MS);
+        values[`${field.key}To`] = isoDay(now);
+    }
+</script>
+
+<!--
+  Split pill: the body opens the editor (Popover trigger); the trailing ✕ is a
+  separate sibling button that clears the field. Keeping ✕ outside the Popover
+  trigger avoids nesting one interactive control inside another.
+-->
+<div
+    class="inline-flex items-center rounded-[3px] border text-sm {active
+        ? 'border-primary-soft-border bg-primary-soft text-primary-soft-text'
+        : 'border-outline bg-surface-raised text-on-surface-muted hover:border-outline-hover hover:text-on-surface'}"
+>
+    <Popover bind:open placement="bottom-start" mobileSheet>
+        {#snippet trigger()}
+            <span class="inline-flex cursor-pointer items-center gap-1.5 px-3 py-2">
+                <span class="truncate">
+                    {label}{#if active}<span class="font-medium">: {summary}</span>{/if}
+                </span>
+                {#if !active}<ChevronDown size={14} class="opacity-60" />{/if}
+            </span>
+        {/snippet}
+
+        {#if field.type === "select"}
+            <div class="flex w-52 flex-col gap-0.5">
+                {#each field.options as opt (String(opt.value))}
+                    {@const selected = String(values[field.key] ?? "") === String(opt.value)}
+                    <button
+                        type="button"
+                        class="flex items-center justify-between gap-2 rounded-[3px] px-2.5 py-1.5 text-left text-sm hover:bg-surface-sunken {selected
+                            ? 'text-on-surface'
+                            : 'text-on-surface-muted'}"
+                        onclick={() => {
+                            values[field.key] = String(opt.value);
+                            open = false;
+                        }}
+                    >
+                        <span class="truncate">{opt.label}</span>
+                        {#if selected}<Check size={15} class="shrink-0 text-primary" />{/if}
+                    </button>
+                {/each}
+            </div>
+        {:else if field.type === "number"}
+            <div class="w-44">
+                <Input
+                    type="number"
+                    value={values[field.key] ?? ""}
+                    placeholder={field.placeholder ?? field.label}
+                    autofocus
+                    onchange={(e) => (values[field.key] = e.currentTarget.value)}
+                    onkeydown={(e) => {
+                        if (e.key === "Enter") open = false;
+                    }}
+                />
+            </div>
+        {:else if field.type === "daterange"}
+            <div class="flex w-64 flex-col gap-3">
+                <div class="flex items-center gap-2">
+                    <label class="flex-1">
+                        <span class="mb-1 block text-xs text-on-surface-faint">From</span>
+                        <Input type="date" bind:value={values[`${field.key}From`]} size="sm" />
+                    </label>
+                    <label class="flex-1">
+                        <span class="mb-1 block text-xs text-on-surface-faint">To</span>
+                        <Input type="date" bind:value={values[`${field.key}To`]} size="sm" />
+                    </label>
+                </div>
+                <div class="flex flex-wrap gap-1.5">
+                    {#each [{ label: "Today", days: 0 }, { label: "7 days", days: 7 }, { label: "30 days", days: 30 }] as p (p.days)}
+                        <button
+                            type="button"
+                            class="rounded-[3px] border border-outline bg-surface-raised px-2 py-1 text-xs text-on-surface-muted hover:border-outline-hover hover:text-on-surface"
+                            onclick={() => setRange(p.days)}
+                        >
+                            {p.label}
+                        </button>
+                    {/each}
+                    {#if !isBlank(values[`${field.key}From`]) || !isBlank(values[`${field.key}To`])}
+                        <button
+                            type="button"
+                            class="ml-auto rounded-[3px] px-2 py-1 text-xs text-on-surface-muted hover:text-on-surface"
+                            onclick={() => clear()}
+                        >
+                            Clear
+                        </button>
+                    {/if}
+                </div>
+            </div>
+        {/if}
+    </Popover>
+
+    {#if active}
+        <button
+            type="button"
+            class="self-stretch rounded-r-[3px] border-l border-primary-soft-border px-2 hover:bg-primary/15"
+            onclick={clear}
+            aria-label="Clear {label} filter"
+        >
+            <X size={13} />
+        </button>
+    {/if}
+</div>

package/src/lib/components/NotificationBell.svelte

@@ -0,0 +1,70 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<!--
+  Header bell + unread badge + popover shell. The app owns the store and the
+  list items (they're domain-specific); it passes them in as `children`.
+-->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { Bell } from "@lucide/svelte";
+    import Popover from "./Popover.svelte";
+
+    interface Props {
+        unread: number;
+        /** Badge colour: "danger" when an unread item is an error. */
+        tone?: "primary" | "danger";
+        open?: boolean;
+        /** Panel title; the right side of the header takes `actions`. */
+        title?: string;
+        actions?: Snippet;
+        children: Snippet;
+        class?: string;
+    }
+
+    let {
+        unread,
+        tone = "primary",
+        open = $bindable(false),
+        title = "Notifications",
+        actions,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    let badge = $derived(unread > 99 ? "99+" : String(unread));
+</script>
+
+<Popover bind:open placement="bottom-end" mobileSheet class="flex {className}">
+    {#snippet trigger()}
+        <span
+            class="relative flex h-9 w-9 items-center justify-center rounded-[3px] border border-transparent text-on-surface-muted hover:border-outline-hover hover:bg-surface-sunken hover:text-primary"
+            title="Notifications"
+        >
+            <Bell size={18} aria-hidden="true" />
+            <span class="sr-only">{title}</span>
+            {#if unread > 0}
+                <span
+                    class="absolute -top-0.5 -right-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full px-1 font-mono text-2xs font-bold tabular-nums {tone ===
+                    'danger'
+                        ? 'bg-danger-surface text-on-danger'
+                        : 'bg-primary text-on-primary'}"
+                    aria-label={`${badge} unread`}
+                >
+                    {badge}
+                </span>
+            {/if}
+        </span>
+    {/snippet}
+
+    <div role="dialog" aria-label={title} class="w-96 max-w-[90vw]">
+        <div class="mb-2 flex items-center justify-between gap-2">
+            <h2 class="font-mono text-sm font-semibold text-on-surface">{title}</h2>
+            {#if actions}
+                <div class="flex items-center gap-3 text-xs">{@render actions()}</div>
+            {/if}
+        </div>
+        {@render children()}
+    </div>
+</Popover>

package/src/lib/components/SearchInput.svelte

@@ -0,0 +1,91 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<!--
+  Debounced search box for FilterBar. `value` is the committed term the parent
+  filters on; keystrokes are debounced so client re-filtering / server refetch
+  fires once the user pauses, not per character. `Esc` and the trailing ✕ clear
+  immediately. Exposes its raw <input> via `element` so FilterBar's `/` shortcut
+  can focus it.
+-->
+
+<script lang="ts">
+    import Input from "./Input.svelte";
+    import { Search, X } from "@lucide/svelte";
+    import { untrack, onDestroy } from "svelte";
+    import { debounce } from "../utils/debounce.js";
+
+    let {
+        value = $bindable(""),
+        placeholder = "Search...",
+        element = $bindable<HTMLInputElement | null>(null),
+    }: {
+        value?: string | undefined;
+        placeholder?: string;
+        element?: HTMLInputElement | null;
+    } = $props();
+
+    // `raw` is the live text; `value` is the debounced, committed term. Seeded
+    // once from `value` so a URL-restored search survives mount undebounced.
+    let raw = $state(value);
+    let wrapperEl = $state<HTMLDivElement | null>(null);
+
+    const commit = debounce((v: string) => (value = v), 250);
+    onDestroy(() => commit.cancel());
+
+    // Expose the real input for FilterBar's `/`-to-focus shortcut.
+    $effect(() => {
+        element = wrapperEl?.querySelector("input") ?? null;
+    });
+
+    // External writes to `value` (Reset / clear-all) win immediately: adopt them
+    // and drop any pending debounce. Depends only on `value` (raw is read
+    // untracked), so typing never re-enters here. Tiny race: a reset that leaves
+    // `value` unchanged ("" -> "") can't cancel a first-keystroke debounce —
+    // negligible at 250ms. ponytail: guarded two-way sync, fine for one field.
+    $effect(() => {
+        const v = value;
+        untrack(() => {
+            if (v !== raw) {
+                commit.cancel();
+                raw = v;
+            }
+        });
+    });
+
+    function clear() {
+        commit.cancel();
+        raw = "";
+        value = "";
+        wrapperEl?.querySelector("input")?.focus();
+    }
+
+    function onKeydown(e: KeyboardEvent) {
+        if (e.key === "Escape" && raw) {
+            e.preventDefault();
+            clear();
+        }
+    }
+</script>
+
+<div bind:this={wrapperEl} class="relative w-full sm:w-64">
+    <Input
+        bind:value={raw}
+        {placeholder}
+        oninput={() => commit(raw)}
+        onkeydown={onKeydown}
+        style={raw ? "padding-right:2.25rem" : undefined}
+    >
+        {#snippet leadingIcon()}<Search size={16} />{/snippet}
+    </Input>
+    {#if raw}
+        <button
+            type="button"
+            class="absolute top-1/2 right-2 -translate-y-1/2 rounded-[3px] p-1 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface"
+            onclick={clear}
+            aria-label="Clear search"
+        >
+            <X size={14} />
+        </button>
+    {/if}
+</div>

package/src/lib/components/StatusDot.svelte

@@ -0,0 +1,38 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts" module>
+    export type StatusDotTone = "primary" | "success" | "warning" | "danger" | "muted";
+</script>
+
+<script lang="ts">
+    interface Props {
+        tone?: StatusDotTone;
+        /** Radar ping around the dot — use for "live" states only. */
+        pulse?: boolean;
+        size?: "sm" | "md" | "lg";
+        class?: string;
+    }
+
+    let { tone = "primary", pulse = false, size = "sm", class: className = "" }: Props = $props();
+
+    const TONES: Record<StatusDotTone, string> = {
+        primary: "bg-primary",
+        success: "bg-success-surface",
+        warning: "bg-warning-surface",
+        danger: "bg-danger-surface",
+        muted: "bg-on-surface-faint",
+    };
+    const SIZES = { sm: "h-2 w-2", md: "h-2.5 w-2.5", lg: "h-3.5 w-3.5" };
+</script>
+
+<span class="relative flex shrink-0 {SIZES[size]} {className}" aria-hidden="true">
+    {#if pulse}
+        <span
+            class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:animate-none {TONES[
+                tone
+            ]}"
+        ></span>
+    {/if}
+    <span class="relative inline-flex h-full w-full rounded-full {TONES[tone]}"></span>
+</span>

package/src/lib/components/ThemeToggle.svelte

@@ -2,46 +2,41 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    import { Moon, Sun } from "@lucide/svelte";
+    import { ChevronDown, Monitor, Moon, Sun } from "@lucide/svelte";
+    import Dropdown from "./Dropdown.svelte";
+    import { themeStore, type ThemePreference } from "../utils/theme.svelte.js";
 
     interface Props {
-        storageKey?: string;
         class?: string;
     }
 
-    let { storageKey = "runwisp:theme", class: className = "" }: Props = $props();
+    let { class: className = "" }: Props = $props();
 
-    let isDark = $state(false);
-    let mounted = $state(false);
+    const options: { value: ThemePreference; label: string; icon: typeof Monitor }[] = [
+        { value: "auto", label: "Auto", icon: Monitor },
+        { value: "light", label: "Light", icon: Sun },
+        { value: "dark", label: "Dark", icon: Moon },
+    ];
 
-    $effect(() => {
-        isDark = document.documentElement.classList.contains("dark");
-        mounted = true;
-    });
+    let TriggerIcon = $derived(
+        themeStore.preference === "auto" ? Monitor : themeStore.resolved === "dark" ? Moon : Sun,
+    );
 
-    function toggle(): void {
-        const next = !isDark;
-        isDark = next;
-        document.documentElement.classList.toggle("dark", next);
-        try {
-            localStorage.setItem(storageKey, next ? "dark" : "light");
-        } catch {
-            // localStorage may be unavailable (private mode, embedded contexts) — fall through.
-        }
-    }
+    let items = $derived(
+        options.map((o) => ({
+            label: o.label,
+            icon: o.icon,
+            selected: themeStore.preference === o.value,
+            onClick: () => themeStore.set(o.value),
+        })),
+    );
 </script>
 
-<button
-    type="button"
-    onclick={toggle}
-    aria-pressed={isDark}
-    aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
-    title={isDark ? "Switch to light theme" : "Switch to dark theme"}
-    class="inline-flex h-9 w-9 items-center justify-center rounded-[3px] border border-outline bg-surface-raised text-on-surface-muted hover:border-outline-hover hover:text-on-surface {className}"
->
-    {#if mounted && isDark}
-        <Sun size={16} />
-    {:else}
-        <Moon size={16} />
-    {/if}
-</button>
+<Dropdown {items} align="right" triggerLabel="Theme" class={className}>
+    {#snippet trigger()}
+        <span class="flex items-center gap-1">
+            <TriggerIcon size={18} />
+            <ChevronDown size={14} class="opacity-60" />
+        </span>
+    {/snippet}
+</Dropdown>

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);
@@ -355,7 +382,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

@@ -266,6 +266,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 +276,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

@@ -90,6 +90,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";
 }