@runwisp/ui 0.7.0 → 0.9.0

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

@@ -15,12 +15,13 @@
     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";
     import { formatShortId } from "../../utils/id.js";
     import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
-    import { runDuration } from "./run-helpers.js";
+    import { runDuration, runStartDelay } from "./run-helpers.js";
 
     let {
         run,
@@ -93,9 +94,10 @@
     {@const config = getRunStatusConfig(runDisplayStatus(run))}
     {@const DetailIcon = config.icon}
     {@const duration = runDuration(run)}
+    {@const startDelay = runStartDelay(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 +121,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 +191,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
@@ -197,9 +201,19 @@
                     <span class="font-mono text-sm font-medium whitespace-nowrap text-on-surface">
                         {run.start_at ? formatDateTime(run.start_at) : "--:--"}
                     </span>
+                    {#if startDelay}
+                        <span
+                            class="font-mono text-xs whitespace-nowrap text-on-surface-faint"
+                            title="Scheduled at {formatDateTime(run.created_at)}"
+                        >
+                            +{startDelay} after scheduled
+                        </span>
+                    {/if}
                 </div>
 
-                <div 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 +223,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 +243,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 +270,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/run-helpers.test.ts

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

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

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

package/src/lib/components/dashboard/status-config.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

@@ -11,6 +11,8 @@ import {
     CircleDashed,
     SkipForward,
     FileExclamationPoint,
+    CalendarX,
+    OctagonX,
 } from "@lucide/svelte";
 import type { Component } from "svelte";
 import { displayStatus, type RunStatus, type Run } from "@runwisp/common";
@@ -22,6 +24,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 +36,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 +45,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 +54,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 +63,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 +73,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 +82,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 +91,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 +101,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 +110,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 +119,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 +129,28 @@ 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.",
+    },
+    missed: {
+        icon: CalendarX,
+        color: "text-danger-surface",
+        bg: "bg-danger-soft",
+        border: "border-danger-soft",
+        dot: "bg-danger-surface",
+        badge: "bg-danger-soft text-danger-soft-text",
+        description:
+            "A scheduled run never happened because the daemon was down. Detected and recorded on restart.",
+    },
+    start_failed: {
+        icon: OctagonX,
+        color: "text-danger-surface",
+        bg: "bg-danger-soft",
+        border: "border-danger-soft",
+        dot: "bg-danger-surface",
+        badge: "bg-danger-soft text-danger-soft-text",
+        description:
+            "The service kept failing to stay up for healthy_after; after start_retries the supervisor gave up (FATAL) and stopped restarting it.",
     },
     pending: {
         icon: Clock,
@@ -120,6 +159,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 +168,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";
 
@@ -94,7 +90,8 @@ export {
     RUN_STATUS_CONFIG,
     type RunStatusConfig,
 } from "./components/dashboard/status-config.js";
-export { runDuration, runPhaseOrder } from "./components/dashboard/run-helpers.js";
+export { runDuration, runStartDelay, runPhaseOrder } from "./components/dashboard/run-helpers.js";
+export { humanizeCron, type HumanizedCron } from "./components/dashboard/cron-format.js";
 export type { DaemonState, DaemonStats } from "./components/dashboard/types.js";
 
 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);
+}