@runwisp/ui 0.7.0 → 0.8.0

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

@@ -15,6 +15,7 @@
     import Button from "../Button.svelte";
     import EmptyState from "../EmptyState.svelte";
     import LogConsole from "../LogConsole.svelte";
+    import Tooltip from "../Tooltip.svelte";
     import type { Run } from "./types.js";
     import type { LogEvent, LogSlice } from "../../log-console/types.js";
     import { formatDateTime } from "../../utils/format.js";
@@ -94,8 +95,8 @@
     {@const DetailIcon = config.icon}
     {@const duration = runDuration(run)}
     <!-- Detailed Header -->
-    <div class="shrink-0 border-b border-outline-faint bg-surface-raised p-6">
-        <div class="flex flex-col justify-between gap-6 lg:flex-row lg:items-start">
+    <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">
             <div class="flex items-start gap-4">
                 <!-- Large Status Icon -->
                 <div
@@ -119,15 +120,17 @@
                                 {/if}
                             {/if}
                         </h2>
-                        <Badge
-                            variant={runDisplayStatus(run) === "success"
-                                ? "success"
-                                : run.status === "running"
-                                  ? "info"
-                                  : "danger"}
-                        >
-                            {runDisplayStatus(run).toUpperCase()}
-                        </Badge>
+                        <Tooltip content={config.description} position="bottom" wide>
+                            <Badge
+                                variant={runDisplayStatus(run) === "success"
+                                    ? "success"
+                                    : run.status === "running"
+                                      ? "info"
+                                      : "danger"}
+                            >
+                                {runDisplayStatus(run).toUpperCase()}
+                            </Badge>
+                        </Tooltip>
                         {#if canDelete}
                             <Button
                                 variant="ghost"
@@ -187,7 +190,7 @@
 
             <!-- Stats Grid -->
             <div
-                class="grid grid-cols-3 gap-6 rounded-xl border border-outline-faint bg-surface-sunken px-6 py-3"
+                class="grid grid-cols-1 gap-3 rounded-xl border border-outline-faint bg-surface-sunken px-6 py-3 @lg:grid-cols-3 @lg:gap-6 @4xl:shrink-0"
             >
                 <div class="flex flex-col gap-1">
                     <span
@@ -199,7 +202,9 @@
                     </span>
                 </div>
 
-                <div class="flex flex-col gap-1 border-l border-outline pl-6">
+                <div
+                    class="flex flex-col gap-1 border-t border-outline pt-3 @lg:border-t-0 @lg:border-l @lg:pt-0 @lg:pl-6"
+                >
                     <span
                         class="text-xs font-semibold tracking-wide text-on-surface-faint uppercase"
                         >Duration</span
@@ -209,7 +214,9 @@
                     </span>
                 </div>
 
-                <div class="flex flex-col gap-1 border-l border-outline pl-6">
+                <div
+                    class="flex flex-col gap-1 border-t border-outline pt-3 @lg:border-t-0 @lg:border-l @lg:pt-0 @lg:pl-6"
+                >
                     <span
                         class="text-xs font-semibold tracking-wide text-on-surface-faint uppercase"
                         >Exited</span
@@ -227,9 +234,9 @@
     </div>
 
     <!-- Console View -->
-    <div class="flex min-h-0 flex-1 flex-col bg-slate-950">
+    <div class="flex min-h-0 flex-1 flex-col bg-mist-950">
         <div
-            class="flex shrink-0 items-center justify-between border-b border-slate-800 bg-slate-900/50 px-4 py-2 font-mono text-xs text-slate-400"
+            class="flex shrink-0 items-center justify-between border-b border-mist-800 bg-mist-900/50 px-4 py-2 font-mono text-xs text-mist-400"
         >
             <div class="flex items-center gap-2">
                 <TerminalIcon size={14} />
@@ -254,7 +261,7 @@
                         run.id,
                     )}/log/raw"
                     download="{run.task_name}-{run.id}.log"
-                    class="flex items-center gap-1.5 rounded border border-slate-700 px-2 py-1 text-slate-300 transition-colors hover:border-slate-500 hover:bg-slate-800 hover:text-slate-100"
+                    class="flex items-center gap-1.5 rounded border border-mist-700 px-2 py-1 text-mist-200 transition-colors hover:border-mist-500 hover:bg-mist-800 hover:text-mist-100"
                     title="Download the full log (rotated and current parts as one file)"
                 >
                     <Download size={12} />

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

@@ -28,6 +28,7 @@
     import Button from "../Button.svelte";
     import Badge from "../Badge.svelte";
     import EmptyState from "../EmptyState.svelte";
+    import Tooltip from "../Tooltip.svelte";
     import type { Run } from "./types.js";
     import type { RunSelector } from "@runwisp/common";
     import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
@@ -50,6 +51,7 @@
         taskNameFilter,
         headerLabel = "Run History",
         emptyText = "No runs yet",
+        emptyDescription,
         bulkActions = false,
         onBulkCancel,
         onBulkDelete,
@@ -67,6 +69,7 @@
         taskNameFilter?: string;
         headerLabel?: string;
         emptyText?: string;
+        emptyDescription?: string;
         bulkActions?: boolean;
         onBulkCancel?: BulkHandler;
         onBulkDelete?: BulkHandler;
@@ -341,7 +344,13 @@
 
     <div bind:this={scrollElement} class="min-h-0 flex-1 overflow-y-auto p-2">
         {#if items.length === 0 && !loading}
-            <EmptyState title={emptyText} icon={Clock} iconSize={32} class="py-8" />
+            <EmptyState
+                title={emptyText}
+                description={emptyDescription}
+                icon={Clock}
+                iconSize={32}
+                class="py-8"
+            />
         {:else}
             <div
                 style:height="{$virtualizer.getTotalSize()}px"
@@ -463,7 +472,15 @@
 
                                     <div class="flex items-center justify-between text-xs">
                                         <div class="flex items-center gap-2 text-on-surface-muted">
-                                            <span class="capitalize">{runDisplayStatus(run)}</span>
+                                            <Tooltip
+                                                content={config.description}
+                                                position="right"
+                                                wide
+                                            >
+                                                <span class="capitalize"
+                                                    >{runDisplayStatus(run)}</span
+                                                >
+                                            </Tooltip>
                                             {#if run.instance_index > 0}
                                                 <span
                                                     class="font-mono text-2xs text-on-surface-faint"

package/src/lib/components/dashboard/cron-format.test.ts

@@ -0,0 +1,67 @@
+// Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { humanizeCron } from "./cron-format.js";
+
+describe("humanizeCron", () => {
+    it("humanizes a standard 5-field expression", () => {
+        const result = humanizeCron("*/5 * * * *");
+        expect(result.humanized).toBe("Every 5 minutes");
+        expect(result.raw).toBe("*/5 * * * *");
+        expect(result.isHumanized).toBe(true);
+    });
+
+    it("humanizes a daily expression", () => {
+        const result = humanizeCron("0 3 * * *");
+        expect(result.humanized).toBe("At 03:00 AM");
+        expect(result.isHumanized).toBe(true);
+    });
+
+    it("humanizes @hourly via cronstrue", () => {
+        const result = humanizeCron("@hourly");
+        expect(result.humanized).toBe("Every hour");
+        expect(result.isHumanized).toBe(true);
+    });
+
+    it("handles robfig's @every with a compound duration", () => {
+        const result = humanizeCron("@every 1h30m");
+        expect(result.humanized).toBe("Every 1 hour 30 minutes");
+        expect(result.raw).toBe("@every 1h30m");
+        expect(result.isHumanized).toBe(true);
+    });
+
+    it("handles @every with a single unit", () => {
+        expect(humanizeCron("@every 10s").humanized).toBe("Every 10 seconds");
+        expect(humanizeCron("@every 1m").humanized).toBe("Every 1 minute");
+        expect(humanizeCron("@every 2h").humanized).toBe("Every 2 hours");
+    });
+
+    it("skips zero-valued duration segments", () => {
+        expect(humanizeCron("@every 1h0m").humanized).toBe("Every 1 hour");
+    });
+
+    it("falls back to raw for @every with sub-second units", () => {
+        const result = humanizeCron("@every 500ms");
+        expect(result.humanized).toBe("@every 500ms");
+        expect(result.isHumanized).toBe(false);
+    });
+
+    it("falls back to raw for @every with a garbage duration", () => {
+        const result = humanizeCron("@every banana");
+        expect(result.humanized).toBe("@every banana");
+        expect(result.isHumanized).toBe(false);
+    });
+
+    it("falls back to raw for unparseable expressions — never 'Invalid'", () => {
+        const result = humanizeCron("not a cron");
+        expect(result.humanized).toBe("not a cron");
+        expect(result.isHumanized).toBe(false);
+        expect(result.humanized).not.toMatch(/invalid/i);
+    });
+
+    it("trims surrounding whitespace", () => {
+        const result = humanizeCron("  */5 * * * *  ");
+        expect(result.raw).toBe("*/5 * * * *");
+        expect(result.isHumanized).toBe(true);
+    });
+});

package/src/lib/components/dashboard/cron-format.ts

@@ -0,0 +1,71 @@
+// Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0
+
+import cronstrue from "cronstrue";
+
+export interface HumanizedCron {
+    /** Display text — humanized when possible, otherwise the raw expression. */
+    humanized: string;
+    /** The original cron expression, for tooltips. */
+    raw: string;
+    /** False when humanizing failed and `humanized` is just `raw`. */
+    isHumanized: boolean;
+}
+
+const EVERY_RE = /^@every\s+(\S+)$/;
+
+const UNIT_NAMES: Record<string, [string, string]> = {
+    h: ["hour", "hours"],
+    m: ["minute", "minutes"],
+    s: ["second", "seconds"],
+};
+
+// humanizeEvery turns robfig's `@every 1h30m` (Go duration syntax) into
+// "Every 1 hour 30 minutes". Returns null when the duration doesn't parse.
+function humanizeEvery(duration: string): string | null {
+    const parts = [...duration.matchAll(/(\d+(?:\.\d+)?)(h|m|s|ms|us|µs|ns)/g)];
+    if (parts.length === 0 || parts.map((p) => p[0]).join("") !== duration) {
+        return null;
+    }
+
+    const words: string[] = [];
+    for (const [, amount, unit] of parts) {
+        if (!amount || !unit) return null;
+        const value = Number(amount);
+        if (value === 0) continue;
+        const names = UNIT_NAMES[unit];
+        if (!names) {
+            // Sub-second units are valid Go durations but absurd as schedules;
+            // show the raw expression rather than "Every 500 milliseconds".
+            return null;
+        }
+        words.push(`${amount} ${value === 1 ? names[0] : names[1]}`);
+    }
+    if (words.length === 0) return null;
+
+    return `Every ${words.join(" ")}`;
+}
+
+/**
+ * humanizeCron renders a cron expression as plain English ("Every 5 minutes").
+ * Handles robfig's `@every <duration>` extension (cronstrue throws on it) and
+ * falls back to the raw expression on anything unparseable — never "Invalid".
+ */
+export function humanizeCron(cron: string): HumanizedCron {
+    const raw = cron.trim();
+
+    const every = EVERY_RE.exec(raw);
+    if (every?.[1]) {
+        const humanized = humanizeEvery(every[1]);
+        if (humanized) {
+            return { humanized, raw, isHumanized: true };
+        }
+        return { humanized: raw, raw, isHumanized: false };
+    }
+
+    try {
+        const humanized = cronstrue.toString(raw, { throwExceptionOnParseError: true });
+        return { humanized, raw, isHumanized: true };
+    } catch {
+        return { humanized: raw, raw, isHumanized: false };
+    }
+}

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

@@ -0,0 +1,18 @@
+// Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { RUN_STATUSES } from "@runwisp/common";
+import { RUN_STATUS_CONFIG } from "./status-config.js";
+
+describe("RUN_STATUS_CONFIG", () => {
+    it("has a non-empty description for every run status", () => {
+        for (const status of RUN_STATUSES) {
+            const config = RUN_STATUS_CONFIG[status];
+            expect(config, `missing config for status "${status}"`).toBeDefined();
+            expect(
+                config.description.trim().length,
+                `empty description for status "${status}"`,
+            ).toBeGreaterThan(0);
+        }
+    });
+});

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

@@ -22,6 +22,8 @@ export interface RunStatusConfig {
     border: string;
     dot: string;
     badge: string;
+    /** One-sentence explanation of what this status means, for tooltips. */
+    description: string;
 }
 
 export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
@@ -32,6 +34,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-info-soft",
         dot: "bg-info-surface animate-pulse",
         badge: "bg-info-soft text-info-soft-text",
+        description: "This run is executing right now.",
     },
     success: {
         icon: CircleCheck,
@@ -40,6 +43,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-success-soft",
         dot: "bg-success-surface",
         badge: "bg-success-soft text-success-soft-text",
+        description: "The run finished with exit code 0.",
     },
     failed: {
         icon: CircleX,
@@ -48,6 +52,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-danger-soft",
         dot: "bg-danger-surface",
         badge: "bg-danger-soft text-danger-soft-text",
+        description: "The run exited with a non-zero code.",
     },
     crashed: {
         icon: CircleAlert,
@@ -56,6 +61,8 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-danger-soft",
         dot: "bg-danger-surface",
         badge: "bg-danger-soft text-danger-soft-text",
+        description:
+            "The process was killed, or the daemon found it still 'running' after a hard crash and marked it crashed (exit -2). It was not resumed.",
     },
     stopped: {
         icon: CircleStop,
@@ -64,6 +71,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-warning-soft",
         dot: "bg-warning-surface",
         badge: "bg-warning-soft text-warning-soft-text",
+        description: "An operator stopped this run before it finished.",
     },
     timeout: {
         icon: TimerOff,
@@ -72,6 +80,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-warning-soft",
         dot: "bg-warning-surface",
         badge: "bg-warning-soft text-warning-soft-text",
+        description: "The run exceeded its configured timeout and was terminated.",
     },
     skipped: {
         icon: SkipForward,
@@ -80,6 +89,8 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-outline-faint",
         dot: "bg-on-surface-faint",
         badge: "bg-surface-sunken text-on-surface",
+        description:
+            'Skipped by the concurrency policy (on_overlap = "skip") because a previous run was still going.',
     },
     log_overflow: {
         icon: FileExclamationPoint,
@@ -88,6 +99,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-danger-soft",
         dot: "bg-danger-surface",
         badge: "bg-danger-soft text-danger-soft-text",
+        description: "The run hit log_max_size and was handled per log_on_full.",
     },
     queue_full: {
         icon: SkipForward,
@@ -96,6 +108,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-warning-soft",
         dot: "bg-warning-surface",
         badge: "bg-warning-soft text-warning-soft-text",
+        description: "Skipped because the task's queue was already at queue_max.",
     },
     dst_skipped: {
         icon: SkipForward,
@@ -104,6 +117,8 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-outline-faint",
         dot: "bg-on-surface-faint",
         badge: "bg-surface-sunken text-on-surface",
+        description:
+            "Skipped: this cron tick was the duplicate half of a DST fall-back, so it was recorded but not run.",
     },
     daemon_stopped: {
         icon: CircleStop,
@@ -112,6 +127,8 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-warning-soft",
         dot: "bg-warning-surface",
         badge: "bg-warning-soft text-warning-soft-text",
+        description:
+            "The daemon shut down while this run was in flight and it exceeded shutdown_timeout; it was not resumed.",
     },
     pending: {
         icon: Clock,
@@ -120,6 +137,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-outline",
         dot: "bg-on-surface-faint",
         badge: "bg-surface-sunken text-on-surface",
+        description: "Queued and waiting to start.",
     },
     ended: {
         icon: CircleDashed,
@@ -128,6 +146,7 @@ export const RUN_STATUS_CONFIG: Record<RunStatus, RunStatusConfig> = {
         border: "border-outline-faint",
         dot: "bg-on-surface-faint",
         badge: "bg-surface-sunken text-on-surface",
+        description: "The run finished. No specific end reason was recorded.",
     },
 };
 

package/src/lib/index.ts

@@ -43,8 +43,6 @@ export { default as AccordionItem } from "./components/AccordionItem.svelte";
 export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
 export { default as Pagination } from "./components/Pagination.svelte";
 export { default as Tabs } from "./components/Tabs.svelte";
-export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
-
 export { default as Avatar } from "./components/Avatar.svelte";
 export { default as Badge } from "./components/Badge.svelte";
 export { default as Card } from "./components/Card.svelte";
@@ -71,8 +69,6 @@ export { default as ToastContainer } from "./components/ToastContainer.svelte";
 export { default as Tooltip } from "./components/Tooltip.svelte";
 
 export { default as CodeBlock } from "./components/CodeBlock.svelte";
-export { default as FeatureCard } from "./components/FeatureCard.svelte";
-export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
 export { default as TaskCard } from "./components/TaskCard.svelte";
 export type { TaskCardAccent } from "./components/TaskCard.svelte";
 
@@ -95,6 +91,7 @@ export {
     type RunStatusConfig,
 } from "./components/dashboard/status-config.js";
 export { runDuration, 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";
 
 export { toast, type Toast, type ToastType } from "./utils/toast.svelte.js";

package/src/lib/log-console/ansi.test.ts

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { ansiLineToHtml } from "./ansi.js";
+
+describe("ansiLineToHtml", () => {
+    it("passes plain text through unchanged", () => {
+        expect(ansiLineToHtml("hello world")).toBe("hello world");
+    });
+
+    it("maps standard foreground codes to theme tokens", () => {
+        expect(ansiLineToHtml("\x1b[31merror\x1b[0m")).toBe(
+            '<span style="color:var(--rw-ansi-red)">error</span>',
+        );
+        expect(ansiLineToHtml("\x1b[32mok\x1b[0m")).toBe(
+            '<span style="color:var(--rw-ansi-green)">ok</span>',
+        );
+        expect(ansiLineToHtml("\x1b[36minfo\x1b[0m")).toBe(
+            '<span style="color:var(--rw-ansi-cyan)">info</span>',
+        );
+    });
+
+    it("maps bright foreground codes to bright theme tokens", () => {
+        expect(ansiLineToHtml("\x1b[91mwarn\x1b[0m")).toBe(
+            '<span style="color:var(--rw-ansi-bright-red)">warn</span>',
+        );
+        expect(ansiLineToHtml("\x1b[97mtext\x1b[0m")).toBe(
+            '<span style="color:var(--rw-ansi-bright-white)">text</span>',
+        );
+    });
+
+    it("maps background codes to theme tokens", () => {
+        expect(ansiLineToHtml("\x1b[41mfail\x1b[0m")).toBe(
+            '<span style="background-color:var(--rw-ansi-red)">fail</span>',
+        );
+    });
+
+    it("escapes HTML in log content", () => {
+        expect(ansiLineToHtml("<script>alert(1)</script>")).toBe(
+            "&lt;script&gt;alert(1)&lt;/script&gt;",
+        );
+    });
+
+    it("does not leak colour state between calls", () => {
+        // An unterminated colour in one line must not affect the next.
+        ansiLineToHtml("\x1b[31munclosed red");
+        expect(ansiLineToHtml("plain")).toBe("plain");
+    });
+});

package/src/lib/log-console/ansi.ts

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import Convert from "ansi-to-html";
+
+// Theme-derived 16-color ANSI palette. ansi-to-html inlines these values
+// verbatim into style attributes, so CSS var() references resolve against
+// the --rw-ansi-* tokens in theme-tokens.css. Codes 16-255 keep the
+// library's computed RGB defaults.
+const ANSI_PALETTE: Record<number, string> = Object.freeze({
+    0: "var(--rw-ansi-black)",
+    1: "var(--rw-ansi-red)",
+    2: "var(--rw-ansi-green)",
+    3: "var(--rw-ansi-yellow)",
+    4: "var(--rw-ansi-blue)",
+    5: "var(--rw-ansi-magenta)",
+    6: "var(--rw-ansi-cyan)",
+    7: "var(--rw-ansi-white)",
+    8: "var(--rw-ansi-bright-black)",
+    9: "var(--rw-ansi-bright-red)",
+    10: "var(--rw-ansi-bright-green)",
+    11: "var(--rw-ansi-bright-yellow)",
+    12: "var(--rw-ansi-bright-blue)",
+    13: "var(--rw-ansi-bright-magenta)",
+    14: "var(--rw-ansi-bright-cyan)",
+    15: "var(--rw-ansi-bright-white)",
+});
+
+// Convert ANSI escape sequences in a single log line to safe HTML spans.
+// A fresh converter per call ensures no colour state leaks between
+// independently virtualised lines.
+export function ansiLineToHtml(text: string): string {
+    return new Convert({
+        escapeXML: true,
+        fg: "var(--rw-color-mist-200)",
+        bg: "var(--rw-color-mist-950)",
+        colors: ANSI_PALETTE,
+    }).toHtml(text);
+}

package/src/lib/theme-tokens.css

@@ -88,6 +88,27 @@
     --rw-color-warning-600: oklch(0.65 0.14 60);
     --rw-color-warning-700: oklch(0.55 0.12 55);
 
+    /* ANSI console palette — 16-color map for the log console, tuned for
+     * its always-dark surface (no .dark override needed). Hues follow the
+     * semantic scales: red→danger, green→success, yellow→warning,
+     * blue→wisp, cyan→aurora, grays→mist. */
+    --rw-ansi-black: var(--rw-color-mist-700);
+    --rw-ansi-red: var(--rw-color-danger-400);
+    --rw-ansi-green: var(--rw-color-success-400);
+    --rw-ansi-yellow: var(--rw-color-warning-400);
+    --rw-ansi-blue: var(--rw-color-wisp-400);
+    --rw-ansi-magenta: oklch(0.68 0.14 320); /* between wisp and danger hues */
+    --rw-ansi-cyan: var(--rw-color-aurora-400);
+    --rw-ansi-white: var(--rw-color-mist-300);
+    --rw-ansi-bright-black: var(--rw-color-mist-500);
+    --rw-ansi-bright-red: var(--rw-color-danger-300);
+    --rw-ansi-bright-green: var(--rw-color-success-300);
+    --rw-ansi-bright-yellow: var(--rw-color-warning-300);
+    --rw-ansi-bright-blue: var(--rw-color-wisp-300);
+    --rw-ansi-bright-magenta: oklch(0.78 0.1 320);
+    --rw-ansi-bright-cyan: var(--rw-color-aurora-300);
+    --rw-ansi-bright-white: var(--rw-color-mist-50);
+
     /* Light-mode semantic tokens (default) */
     /* Surfaces */
     --rw-surface: var(--rw-color-mist-50);
@@ -136,6 +157,12 @@
     --rw-on-info: white;
     --rw-info-soft: var(--rw-color-aurora-50);
     --rw-info-soft-text: var(--rw-color-aurora-700);
+    /* Soft callout borders — sit on the matching *-soft surface */
+    --rw-primary-soft-border: var(--rw-color-wisp-200);
+    --rw-danger-soft-border: var(--rw-color-danger-200);
+    --rw-success-soft-border: var(--rw-color-success-200);
+    --rw-warning-soft-border: var(--rw-color-warning-200);
+    --rw-info-soft-border: var(--rw-color-aurora-200);
     /* Glass */
     --rw-glass: oklch(1 0 0 / 0.8);
     --rw-glass-blur: blur(12px);
@@ -189,6 +216,12 @@
     --rw-on-info: white;
     --rw-info-soft: oklch(0.2 0.04 180);
     --rw-info-soft-text: var(--rw-color-aurora-300);
+    /* Soft callout borders */
+    --rw-primary-soft-border: oklch(0.32 0.06 270);
+    --rw-danger-soft-border: oklch(0.32 0.06 355);
+    --rw-success-soft-border: oklch(0.32 0.06 165);
+    --rw-warning-soft-border: oklch(0.32 0.06 85);
+    --rw-info-soft-border: oklch(0.32 0.06 180);
     /* Glass */
     --rw-glass: oklch(0.12 0.012 280 / 0.9);
 }

package/src/lib/theme.css

@@ -201,6 +201,12 @@
     --color-on-info: var(--rw-on-info);
     --color-info-soft: var(--rw-info-soft);
     --color-info-soft-text: var(--rw-info-soft-text);
+    /* Soft callout borders */
+    --color-primary-soft-border: var(--rw-primary-soft-border);
+    --color-danger-soft-border: var(--rw-danger-soft-border);
+    --color-success-soft-border: var(--rw-success-soft-border);
+    --color-warning-soft-border: var(--rw-warning-soft-border);
+    --color-info-soft-border: var(--rw-info-soft-border);
 
     /* Transition durations */
     --duration-fast: 100ms;

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

@@ -2,7 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { describe, expect, it } from "vitest";
-import { formatBytes, formatDuration, formatRelativeTimeWithAbsolute } from "./format.js";
+import {
+    formatBytes,
+    formatDuration,
+    formatRelativeTime,
+    formatRelativeTimeWithAbsolute,
+} from "./format.js";
 
 describe("formatBytes", () => {
     it("formats 0 bytes", () => {
@@ -85,4 +90,35 @@ describe("formatRelativeTimeWithAbsolute", () => {
         expect(r).toMatch(/\([^)]*\d[^)]*\)$/);
         expect(r).not.toMatch(/\(\d{1,2}:\d{2}\)$/);
     });
+    it("computes the relative part against the supplied now", () => {
+        const date = new Date("2024-01-01T12:00:00Z");
+        const twoHoursBefore = formatRelativeTimeWithAbsolute(
+            date,
+            new Date("2024-01-01T10:00:00Z"),
+        );
+        const oneHourBefore = formatRelativeTimeWithAbsolute(
+            date,
+            new Date("2024-01-01T11:00:00Z"),
+        );
+        expect(twoHoursBefore).toMatch(/^in 2 hours/);
+        expect(oneHourBefore).toMatch(/^in 1 hour/);
+    });
+    it("picks the day-boundary branch against the supplied now", () => {
+        const date = new Date("2024-01-01T12:00:00Z");
+        // 2 days after the date → calendar-date suffix, not HH:MM.
+        const r = formatRelativeTimeWithAbsolute(date, new Date("2024-01-03T12:00:00Z"));
+        expect(r).not.toMatch(/\(\d{1,2}:\d{2}\)$/);
+    });
+});
+
+describe("formatRelativeTime", () => {
+    it("advances as the supplied now advances", () => {
+        const date = new Date("2024-01-01T12:00:00Z");
+        expect(formatRelativeTime(date, new Date("2024-01-01T14:00:00Z"))).toBe(
+            "about 2 hours ago",
+        );
+        expect(formatRelativeTime(date, new Date("2024-01-01T15:00:00Z"))).toBe(
+            "about 3 hours ago",
+        );
+    });
 });