@runwisp/ui 0.6.0 → 0.8.0

package/src/lib/components/Textarea.svelte

@@ -67,14 +67,14 @@
         ></textarea>
 
         {#if error}
-            <div class="pointer-events-none absolute top-3 right-3 text-danger-500">
+            <div class="pointer-events-none absolute top-3 right-3 text-danger-soft-text">
                 <CircleAlert size={18} />
             </div>
         {/if}
     </div>
 
     {#if error}
-        <p class="text-sm text-danger-600">{error}</p>
+        <p class="text-sm text-danger-soft-text">{error}</p>
     {:else if hint}
         <p class="text-sm text-on-surface-muted">{hint}</p>
     {/if}

package/src/lib/components/ToastContainer.svelte

@@ -26,13 +26,13 @@
     function getColorClasses(type: Toast["type"]) {
         switch (type) {
             case "success":
-                return "border-success-200 text-success-700";
+                return "border-success-soft-border text-success-soft-text";
             case "error":
-                return "border-danger-200 text-danger-700";
+                return "border-danger-soft-border text-danger-soft-text";
             case "warning":
-                return "border-warning-200 text-warning-700";
+                return "border-warning-soft-border text-warning-soft-text";
             case "info":
-                return "border-wisp-200 text-wisp-700";
+                return "border-primary-soft-border text-primary-soft-text";
         }
     }
 

package/src/lib/components/Tooltip.svelte

@@ -11,9 +11,17 @@
         position?: TooltipPosition;
         children: Snippet;
         class?: string;
+        /** Wrap long content across lines instead of one nowrap line. */
+        wide?: boolean;
     }
 
-    let { content, position = "top", children, class: className = "" }: Props = $props();
+    let {
+        content,
+        position = "top",
+        children,
+        class: className = "",
+        wide = false,
+    }: Props = $props();
 
     const positionClasses: Record<TooltipPosition, string> = {
         top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -39,7 +47,8 @@
 			pointer-events-none invisible rounded-lg
 			bg-mist-800 px-2.5 py-1.5 text-xs
 			font-medium
-			whitespace-nowrap text-white opacity-0 transition-opacity
+			{wide ? 'w-max max-w-xs whitespace-normal' : 'whitespace-nowrap'}
+			text-white opacity-0 transition-opacity
 			duration-150 group-hover:visible
 			group-hover:opacity-100
 		"

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";
@@ -28,6 +29,7 @@
         streamLogs,
         showTaskName = false,
         onDelete,
+        highlightLine = null,
     }: {
         run: Run | undefined;
         fetchLogs: (
@@ -42,6 +44,7 @@
         ) => () => void;
         showTaskName?: boolean;
         onDelete?: (runId: string) => void;
+        highlightLine?: number | null;
     } = $props();
 
     let canDelete = $derived.by(() => {
@@ -92,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
@@ -117,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"
@@ -185,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
@@ -197,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
@@ -207,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
@@ -225,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} />
@@ -252,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} />
@@ -265,6 +274,7 @@
                 bind:this={logConsole}
                 fetchLogs={(f: number, t: number) => fetchLogs(run.id, f, t)}
                 class="min-h-0 flex-1"
+                {highlightLine}
             />
         {/key}
     </div>

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);
+}