@runwisp/ui 1.5.0 → 1.7.0

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

@@ -0,0 +1,119 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { Check, Hash, RotateCw, SlidersHorizontal } from "@lucide/svelte";
+    import Popover from "../Popover.svelte";
+    import { CopyFeedback } from "../../utils/clipboard.svelte.js";
+    import { formatBytes, formatCalendarDate, formatClockTime } from "../../utils/format.js";
+    import { formatShortId } from "../../utils/id.js";
+    import type { ResourceUsage, Run } from "@runwisp/common";
+    import {
+        formatTriggeredByLabel,
+        runRetryLabel,
+        runStartDelay,
+        runUsageLabel,
+    } from "./run-helpers.js";
+
+    let { run, live }: { run: Run; live: ResourceUsage | undefined } = $props();
+
+    const runIdCopy = new CopyFeedback(1200);
+
+    let startDelay = $derived(runStartDelay(run));
+    let retry = $derived(runRetryLabel(run));
+    let usage = $derived(runUsageLabel(run));
+    let paramEntries = $derived(run.params ? Object.entries(run.params) : []);
+</script>
+
+<!-- Facts: when it happened and what shaped it. Queue wait, retries and
+     parameters are absent on an ordinary run and appear inline the moment they
+     exist. -->
+<div
+    class="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-[11.5px] text-on-surface-faint tabular-nums"
+>
+    <!-- No hover-for-the-full-timestamp here: the date sits right beside the
+         clock time, so a tooltip could only repeat it. The line wraps at narrow
+         widths instead of dropping the date and hiding it behind a hover. -->
+    <span data-testid="run-started" class="text-on-surface-muted"
+        >{run.startedAt ? formatClockTime(run.startedAt) : "—"}</span
+    >
+    <span class="text-outline-hover" aria-hidden="true">·</span>
+    <span>{formatCalendarDate(run.startedAt ?? run.createdAt)}</span>
+    <span class="text-outline-hover" aria-hidden="true">·</span>
+    <span>via {formatTriggeredByLabel(run.triggeredBy).toLowerCase()}</span>
+    {#if startDelay}
+        <span class="text-outline-hover" aria-hidden="true">·</span>
+        <span
+            class="text-warning-soft-text"
+            title="Waited between its scheduled tick and actually starting"
+            >{startDelay} queued</span
+        >
+    {/if}
+    {#if retry}
+        <span class="text-outline-hover" aria-hidden="true">·</span>
+        <span class="inline-flex items-center gap-1">
+            <RotateCw size={11} />
+            retry #{run.retryAttempt}{#if run.retryOfRunId}&nbsp;of
+                {formatShortId(run.retryOfRunId)}{/if}
+        </span>
+    {/if}
+    {#if paramEntries.length > 0}
+        <span class="text-outline-hover" aria-hidden="true">·</span>
+        <Popover placement="bottom-start">
+            {#snippet trigger()}
+                <span
+                    class="inline-flex cursor-pointer items-center gap-1 border-b border-dotted border-outline-hover text-on-surface-muted hover:text-primary"
+                >
+                    <SlidersHorizontal size={11} />
+                    {paramEntries.length}
+                    {paramEntries.length === 1 ? "parameter" : "parameters"}
+                </span>
+            {/snippet}
+            <div class="max-w-md min-w-48">
+                <span
+                    class="font-mono text-xs font-semibold tracking-[0.14em] text-on-surface-faint uppercase"
+                    >Parameters</span
+                >
+                <dl
+                    class="mt-2 grid max-h-72 grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 overflow-y-auto"
+                >
+                    {#each paramEntries as [key, value] (key)}
+                        <dt class="font-mono text-xs text-on-surface-muted">{key}</dt>
+                        <dd class="font-mono text-xs font-medium break-all text-on-surface">
+                            {value}
+                        </dd>
+                    {/each}
+                </dl>
+            </div>
+        </Popover>
+    {/if}
+    {#if live}
+        <span class="text-outline-hover" aria-hidden="true">·</span>
+        <span
+            data-testid="run-live-usage"
+            class="text-on-surface-muted"
+            title="Live CPU (100% = one core) and memory of the run's processes"
+            >CPU {Math.round(live.cpuPercent)}% · {formatBytes(live.memoryBytes)}</span
+        >
+    {/if}
+    {#if usage}
+        <span class="text-outline-hover" aria-hidden="true">·</span>
+        <span data-testid="run-usage" title="CPU time and most memory the run's processes used"
+            >{usage}</span
+        >
+    {/if}
+    <!-- Run-id chip: click to copy the full ULID. Last, because it is the fact
+         you reach for least and the only one you interact with. -->
+    <button
+        type="button"
+        onclick={() => void runIdCopy.copy(run.id)}
+        title="Copy run ID"
+        class="inline-flex items-center gap-1 rounded-[3px] border border-outline-faint bg-surface-sunken px-1.5 text-on-surface-faint hover:border-outline-hover hover:text-primary"
+    >
+        {#if runIdCopy.copied}
+            <Check size={11} class="text-success-surface" />Copied
+        {:else}
+            <Hash size={11} />{run.id}
+        {/if}
+    </button>
+</div>

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

@@ -0,0 +1,52 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { X } from "@lucide/svelte";
+    import {
+        activeDimensions,
+        clearDimension,
+        filterChipLabel,
+        type RunsListFilters,
+    } from "./run-filters.js";
+
+    let {
+        filters = $bindable(),
+        showTask,
+    }: {
+        filters: RunsListFilters;
+        /** `task` only chips on the cross-task view; elsewhere it is the page scope. */
+        showTask: boolean;
+    } = $props();
+
+    const chips = $derived(
+        activeDimensions(filters)
+            .filter((dim) => dim !== "task" || showTask)
+            .map((dim) => ({ dimension: dim, label: filterChipLabel(filters, dim) })),
+    );
+</script>
+
+<!-- Rendered only when filters are set, so the header stays clean when empty;
+     each chip's X clears its dimension. The filter controls themselves live in
+     the popover. -->
+{#if chips.length > 0}
+    <div
+        class="flex shrink-0 flex-wrap gap-1 border-b border-outline-faint bg-surface-sunken px-3 py-2"
+    >
+        {#each chips as chip (chip.dimension)}
+            <span
+                class="inline-flex items-center gap-1 rounded-[3px] border border-primary-soft-border bg-primary-soft py-0.5 pr-1 pl-2 font-mono text-2xs font-medium text-primary-soft-text"
+            >
+                {chip.label}
+                <button
+                    type="button"
+                    onclick={() => (filters = clearDimension(filters, chip.dimension))}
+                    class="flex size-3.5 items-center justify-center rounded-[3px] text-primary-soft-text/70 hover:bg-primary/15 hover:text-primary-soft-text"
+                    aria-label="Remove {chip.label} filter"
+                >
+                    <X size={11} />
+                </button>
+            </span>
+        {/each}
+    </div>
+{/if}

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

@@ -9,12 +9,12 @@
   renders removable chips for each.
 
   Status is a five-bucket pick (Running / Succeeded / Failed / Skipped /
-  Stopped) with an "Advanced" expander for the individual statuses — buckets are
+  Stopped) with an "Advanced" expander for the individual statuses, buckets are
   pure UI groupings over the same `statuses` array. Time is an independent
   From/To date pair; exit code is a free-form expression (137, >100, >100 <150)
   normalized to an inclusive range at the wire.
 
-  All controls are NATIVE (<select>, <input>, checkbox, button) — a portalled
+  All controls are NATIVE (<select>, <input>, checkbox, button), a portalled
   Select component must not nest inside the portalled Popover, since clicking an
   option lands outside the popover's DOM subtree and triggers its outside-click
   close. Every mutation reassigns the whole `filters` object (never an in-place
@@ -70,12 +70,8 @@
     const selectClass =
         "h-9 w-full appearance-none rounded-[3px] border border-outline bg-surface-raised px-2.5 font-mono text-sm text-on-surface focus:border-ring focus:outline-none";
 
-    function statusDot(status: RunStatus): string {
-        return RUN_STATUS_CONFIG[status].dot.replace(" animate-pulse", "");
-    }
-
     // Reflect a tri-state bucket onto the native checkbox (no `indeterminate`
-    // HTML attribute exists — it must be set on the DOM node).
+    // HTML attribute exists, it must be set on the DOM node).
     function indeterminate(node: HTMLInputElement, value: boolean) {
         node.indeterminate = value;
         return {
@@ -95,7 +91,7 @@
     // --- Time -------------------------------------------------------------
     //
     // Independent From/To date bounds. A bare date is that day's 00:00 (From) or
-    // its end (To), so either edge applies on its own — From alone means
+    // its end (To), so either edge applies on its own, From alone means
     // "everything since", To alone "everything before", and the same date in
     // both captures the whole day.
 
@@ -186,7 +182,7 @@
                     class="flex cursor-pointer items-center gap-1 font-mono text-2xs font-medium text-on-surface-muted select-none marker:content-none hover:text-on-surface [&::-webkit-details-marker]:hidden"
                 >
                     <ChevronRight size={12} class={advancedOpen ? "rotate-90" : ""} />
-                    Advanced — pick exact statuses
+                    Advanced: pick exact statuses
                 </summary>
                 <div class="mt-2 flex flex-col gap-1.5">
                     {#each STATUS_GROUPS as group (group.label)}
@@ -202,7 +198,10 @@
                                         onchange={() => toggleStatus(status)}
                                         class="size-3.5 shrink-0 cursor-pointer rounded border-outline accent-primary"
                                     />
-                                    <span class="size-2 shrink-0 rounded-full {statusDot(status)}"
+                                    <span
+                                        class="size-2 shrink-0 rounded-full {RUN_STATUS_CONFIG[
+                                            status
+                                        ].solidDot}"
                                     ></span>
                                     <span class="truncate text-on-surface">
                                         {humanizeStatus(status)}

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

@@ -0,0 +1,295 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { ArrowLeft, Check, Copy, Ellipsis, SlidersHorizontal } from "@lucide/svelte";
+    import Popover from "../Popover.svelte";
+    import { foldToFit } from "../../actions/fold-to-fit.js";
+    import { CopyFeedback } from "../../utils/clipboard.svelte.js";
+    import {
+        formatBytes,
+        formatClockTime,
+        formatDayMonth,
+        formatFullDateTime,
+    } from "../../utils/format.js";
+    import { formatShortId } from "../../utils/id.js";
+    import type { ResourceUsage, Run, RunStatus } from "@runwisp/common";
+    import { RUN_STATUS_CONFIG } from "./status-config.js";
+    import {
+        formatTriggeredByLabel,
+        runRetryLabel,
+        runStartDelay,
+        runUsageLabel,
+        RUN_VERDICTS,
+    } from "./run-helpers.js";
+
+    let {
+        run,
+        status,
+        duration,
+        suffix,
+        live,
+        onBack,
+        actions,
+    }: {
+        run: Run;
+        status: RunStatus;
+        duration: string | undefined;
+        suffix: string;
+        live: ResourceUsage | undefined;
+        onBack: (() => void) | undefined;
+        actions: Snippet;
+    } = $props();
+
+    // The facts after the verdict, in reading order. `fold` is the order they
+    // give way when the line runs out of room: the ID you reach for least goes
+    // first, what the run used goes last.
+    type FactKey = "start" | "queued" | "via" | "retry" | "params" | "instance" | "usage" | "id";
+    const FOLD_ORDER: FactKey[] = [
+        "id",
+        "via",
+        "queued",
+        "start",
+        "params",
+        "retry",
+        "instance",
+        "usage",
+    ];
+    interface Fact {
+        key: FactKey;
+        label: string;
+        value: string;
+    }
+
+    const runIdCopy = new CopyFeedback(1200);
+
+    let config = $derived(RUN_STATUS_CONFIG[status]);
+    let verdict = $derived(RUN_VERDICTS[status]);
+    let paramEntries = $derived(run.params ? Object.entries(run.params) : []);
+    let usage = $derived(
+        live
+            ? `CPU ${String(Math.round(live.cpuPercent))}% · RAM ${formatBytes(live.memoryBytes)}`
+            : runUsageLabel(run),
+    );
+    let facts = $derived.by(() => {
+        const list: Fact[] = [];
+        const started = run.startedAt;
+        if (started) {
+            list.push({
+                key: "start",
+                label: "Started",
+                value: `${formatDayMonth(started)} ${formatClockTime(started)}`,
+            });
+        }
+        const delay = runStartDelay(run);
+        if (delay) list.push({ key: "queued", label: "Queued", value: `${delay} queued` });
+        list.push({
+            key: "via",
+            label: "Triggered",
+            value: `via ${formatTriggeredByLabel(run.triggeredBy).toLowerCase()}`,
+        });
+        if (runRetryLabel(run)) {
+            const of = run.retryOfRunId ? ` of ${formatShortId(run.retryOfRunId)}` : "";
+            list.push({
+                key: "retry",
+                label: "Retry",
+                value: `retry #${String(run.retryAttempt)}${of}`,
+            });
+        }
+        if (paramEntries.length > 0) {
+            const n = paramEntries.length;
+            list.push({
+                key: "params",
+                label: "Parameters",
+                value: `${String(n)} ${n === 1 ? "parameter" : "parameters"}`,
+            });
+        }
+        if (suffix) list.push({ key: "instance", label: "Instance", value: `instance ${suffix}` });
+        if (usage) list.push({ key: "usage", label: live ? "Now" : "Used", value: usage });
+        list.push({ key: "id", label: "Run ID", value: `#${formatShortId(run.id)}` });
+        return list;
+    });
+    let order = $derived(FOLD_ORDER.filter((key) => facts.some((f) => f.key === key)));
+
+    let folded = $state<string[]>([]);
+    let foldedFacts = $derived(facts.filter((f) => folded.includes(f.key)));
+
+    const FACT = "before:mx-1.5 before:text-outline-hover before:content-['·']";
+</script>
+
+{#snippet paramList()}
+    <dl class="grid max-h-72 grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 overflow-y-auto">
+        {#each paramEntries as [key, value] (key)}
+            <dt class="font-mono text-xs text-on-surface-muted">{key}</dt>
+            <dd class="font-mono text-xs font-medium break-all text-on-surface">{value}</dd>
+        {/each}
+    </dl>
+{/snippet}
+
+{#snippet copyId()}
+    <button
+        type="button"
+        onclick={() => void runIdCopy.copy(run.id)}
+        class="inline-flex items-center gap-1 text-on-surface-muted hover:text-primary"
+        title="Copy run ID"
+    >
+        {#if runIdCopy.copied}
+            <Check size={11} class="text-success-surface" />Copied
+        {:else}
+            <Copy size={11} />copy
+        {/if}
+    </button>
+{/snippet}
+
+<!-- One line: verdict, then the facts that fit, then the actions. Facts that
+     don't fit fold into ⋯, the ID first. -->
+<div
+    class="head-line @container relative flex shrink-0 items-center gap-2.5 border-b border-outline-faint py-[7px] pr-3.5 pl-[18px]"
+    style="--rw-oc: {config.alarm ?? 'var(--color-surface-raised)'}"
+>
+    {#if onBack}
+        <button
+            type="button"
+            onclick={() => onBack()}
+            class="-ml-1.5 shrink-0 rounded-[3px] p-1.5 text-on-surface-muted hover:bg-surface-sunken hover:text-primary"
+            title="Back to runs"
+            aria-label="Back to runs"
+        >
+            <ArrowLeft size={18} />
+        </button>
+    {/if}
+
+    <div
+        use:foldToFit={{ order, onfold: (keys) => (folded = keys) }}
+        class="flex min-w-0 flex-1 items-baseline gap-2.5 overflow-hidden whitespace-nowrap"
+    >
+        <!-- A plain title, not Tooltip: the line clips anything that overflows it. -->
+        <h2
+            class="flex shrink-0 items-baseline gap-x-1.5 text-[15px]"
+            data-testid="run-verdict"
+            data-status={status}
+            data-run={run.id}
+            title={config.description}
+        >
+            <config.icon
+                size={14}
+                strokeWidth={2.5}
+                class="shrink-0 self-center {config.color} {status === 'running'
+                    ? 'animate-spin'
+                    : ''}"
+            />
+            <span class="font-sans font-semibold {config.alarm ? config.color : 'text-on-surface'}"
+                >{verdict.verb}</span
+            >
+            {#if verdict.timed && duration}
+                <span
+                    class="font-mono text-[13px] font-medium text-on-surface tabular-nums"
+                    data-testid="run-duration">{duration}</span
+                >
+            {/if}
+            {#if status === "failed"}
+                <span class="font-mono text-[13px] font-medium tabular-nums">
+                    <span class="text-on-surface-faint" aria-hidden="true">·</span>
+                    <span class="text-danger-surface" data-testid="run-exit"
+                        >exit {run.exitCode}</span
+                    >
+                </span>
+            {/if}
+        </h2>
+
+        <span
+            data-fold-shrink
+            class="min-w-0 truncate font-mono text-[11.5px] text-on-surface-faint tabular-nums"
+        >
+            {#each facts as fact (fact.key)}
+                {#if fact.key === "start" && run.startedAt}
+                    <span
+                        data-fold="start"
+                        data-testid="run-started"
+                        class={FACT}
+                        title={formatFullDateTime(run.startedAt)}>{fact.value}</span
+                    >
+                {:else if fact.key === "params"}
+                    <span data-fold="params" class={FACT}>
+                        <Popover placement="bottom-start">
+                            {#snippet trigger()}
+                                <span
+                                    class="inline-flex cursor-pointer items-center gap-1 border-b border-dotted border-outline-hover text-on-surface-muted hover:text-primary"
+                                >
+                                    <SlidersHorizontal size={11} />{fact.value}
+                                </span>
+                            {/snippet}
+                            <div class="max-w-md min-w-48">{@render paramList()}</div>
+                        </Popover>
+                    </span>
+                {:else if fact.key === "usage"}
+                    <span
+                        data-fold="usage"
+                        data-testid={live ? "run-live-usage" : "run-usage"}
+                        class="{FACT} text-on-surface-muted"
+                        title={live
+                            ? "Live CPU (100% = one core) and memory of the run's processes"
+                            : "CPU time and most memory the run's processes used"}
+                        >{fact.value}</span
+                    >
+                {:else if fact.key === "id"}
+                    <button
+                        type="button"
+                        data-fold="id"
+                        onclick={() => void runIdCopy.copy(run.id)}
+                        class="{FACT} hover:text-primary"
+                        title="Copy run ID {run.id}"
+                        >{runIdCopy.copied ? "Copied" : fact.value}</button
+                    >
+                {:else}
+                    <span
+                        data-fold={fact.key}
+                        class="{FACT} {fact.key === 'queued' ? 'text-warning-soft-text' : ''}"
+                        >{fact.value}</span
+                    >
+                {/if}
+            {/each}
+        </span>
+    </div>
+
+    <div class="flex shrink-0 items-center gap-2">
+        {@render actions()}
+        {#if foldedFacts.length > 0}
+            <Popover placement="bottom-end">
+                {#snippet trigger()}
+                    <span
+                        class="flex cursor-pointer items-center justify-center rounded-[3px] border border-outline-faint bg-surface-raised p-2 text-on-surface-muted hover:border-outline-hover hover:bg-surface-sunken hover:text-primary"
+                        title="More about this run"
+                        aria-label="More about this run"
+                    >
+                        <Ellipsis size={15} />
+                    </span>
+                {/snippet}
+                <dl class="grid min-w-56 grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-xs">
+                    {#each foldedFacts as fact (fact.key)}
+                        <dt class="text-on-surface-muted">{fact.label}</dt>
+                        <dd class="font-mono text-on-surface">
+                            {#if fact.key === "id"}
+                                <span class="mr-2 break-all">{run.id}</span>{@render copyId()}
+                            {:else if fact.key === "params"}
+                                {@render paramList()}
+                            {:else if fact.key === "start" && run.startedAt}
+                                {formatFullDateTime(run.startedAt)}
+                            {:else}
+                                {fact.value}
+                            {/if}
+                        </dd>
+                    {/each}
+                </dl>
+            </Popover>
+        {/if}
+    </div>
+</div>
+
+<style>
+    /* Same wash as the stacked header: only a run worth triaging tints it. */
+    .head-line {
+        background: color-mix(in srgb, var(--rw-oc) 7%, var(--color-surface-raised));
+    }
+</style>

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

@@ -0,0 +1,43 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    let { label, showTaskName }: { label: string; showTaskName: boolean } = $props();
+</script>
+
+<!-- Placeholders shaped like the list's run rows (same padding, dot, text and
+     right readout), while a search or the first page is in flight. -->
+<div class="flex flex-col gap-0.5" role="status" aria-busy="true" aria-label={label}>
+    {#each [0, 1, 2, 3, 4, 5] as i (i)}
+        <div
+            class="rounded-[3px] border border-transparent {showTaskName
+                ? 'p-3'
+                : 'px-3 py-[11px]'}"
+        >
+            <div class="flex items-center {showTaskName ? 'gap-2.5' : 'gap-[11px]'}">
+                <span class="size-[9px] shrink-0 animate-pulse rounded-full bg-outline-hover"
+                ></span>
+                {#if showTaskName}
+                    <span class="flex min-w-0 flex-1 flex-col gap-1.5 py-0.5">
+                        <span
+                            class="h-3 animate-pulse rounded-[3px] bg-outline-hover"
+                            style:width="{62 - (i % 3) * 12}%"
+                        ></span>
+                        <span class="h-2 w-2/5 animate-pulse rounded-[3px] bg-outline-hover"></span>
+                    </span>
+                    <span
+                        class="h-2.5 w-9 shrink-0 animate-pulse self-start rounded-[3px] bg-outline-hover"
+                    ></span>
+                {:else}
+                    <span
+                        class="h-3 animate-pulse rounded-[3px] bg-outline-hover"
+                        style:width="{58 - (i % 3) * 8}%"
+                    ></span>
+                    <span
+                        class="ml-auto h-2.5 w-9 shrink-0 animate-pulse rounded-[3px] bg-outline-hover"
+                    ></span>
+                {/if}
+            </div>
+        </div>
+    {/each}
+</div>