@runwisp/ui 1.4.0 → 1.5.0

package/src/lib/log-console/highlight-scroll.ts

@@ -0,0 +1,41 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { untrack } from "svelte";
+
+export interface HighlightScrollOptions {
+    /** Reactive getter for the line to reveal; null/undefined means none. */
+    line: () => number | null | undefined;
+    /** Reactive getter: true once the layout can place `line` (container measured, line exists). */
+    ready: (line: number) => boolean;
+    /** Scrolls to `line`. Runs untracked, so layout reads here never re-trigger the sync. */
+    reveal: (line: number) => void;
+    /** Called when the highlight is cleared. */
+    clear: () => void;
+}
+
+/**
+ * Returns a function to call from inside an `$effect`. It reveals each
+ * highlighted line exactly once: after the first reveal, layout changes (new
+ * log lines, resizes) no longer re-run the scroll, so the operator can scroll
+ * away from a deep-linked search hit and stay there. It waits until `ready`,
+ * and a changed or re-set `line` reveals again.
+ */
+export function createHighlightScroll(options: HighlightScrollOptions): () => void {
+    let revealed: number | null = null;
+    return () => {
+        const target = options.line();
+        // Not `!target`: line 0 is a valid highlight.
+        if (typeof target !== "number") {
+            revealed = null;
+            options.clear();
+            return;
+        }
+        // Checked before `ready` so a revealed line leaves no layout dependency behind.
+        if (revealed === target || !options.ready(target)) return;
+        revealed = target;
+        untrack(() => {
+            options.reveal(target);
+        });
+    };
+}

package/src/lib/theme.css

@@ -19,6 +19,10 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
+    /* Wide enough for the sidebar, run list and run detail to stay side by
+     * side for good; below it the operator can fold the first two away. */
+    --breakpoint-3xl: 100rem;
+
     /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
      * resolve through to --rw-color-* declared in theme-tokens.css. */
     --color-wisp-50: var(--rw-color-wisp-50);
@@ -251,10 +255,12 @@ body {
     color: var(--rw-on-surface);
 }
 
-/* Headings are mono chrome — the runbook voice. Components should not fight this. */
-h1,
-h2,
-h3 {
+/* Headings are mono chrome — the runbook voice. Unlayered, so it beats the
+   weight/leading/tracking utilities on a raw <h1>-<h3>: every heading reads the
+   same. The Heading component opts out (data-rw-heading) and carries this look
+   in its own classes, so its props are the source of truth. :is()/:where()
+   keep the selector at element specificity, so app stylesheets still win. */
+:is(h1, h2, h3):where(:not([data-rw-heading])) {
     font-family: var(--font-mono);
     font-weight: 800;
     line-height: 1.1;

package/src/lib/utils/clipboard.svelte.test.ts

@@ -0,0 +1,92 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CopyFeedback, copyText } from "./clipboard.svelte.js";
+
+describe("copyText", () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it("writes through navigator.clipboard", async () => {
+        const writeText = vi.fn(() => Promise.resolve());
+        vi.stubGlobal("navigator", { clipboard: { writeText } });
+        expect(await copyText("runwisp")).toBe(true);
+        expect(writeText).toHaveBeenCalledWith("runwisp");
+    });
+
+    it("falls back to execCommand when the clipboard API is missing", async () => {
+        vi.stubGlobal("navigator", {});
+        const textarea = {
+            value: "",
+            readOnly: false,
+            style: {},
+            select: vi.fn(),
+            remove: vi.fn(),
+        };
+        const execCommand = vi.fn(() => true);
+        class FakeElement {
+            focus = vi.fn();
+        }
+        const focused = new FakeElement();
+        vi.stubGlobal("HTMLElement", FakeElement);
+        vi.stubGlobal("document", {
+            activeElement: focused,
+            createElement: () => textarea,
+            body: { appendChild: vi.fn() },
+            execCommand,
+        });
+        expect(await copyText("runwisp")).toBe(true);
+        expect(textarea.value).toBe("runwisp");
+        expect(execCommand).toHaveBeenCalledWith("copy");
+        expect(textarea.remove).toHaveBeenCalled();
+        expect(focused.focus).toHaveBeenCalled();
+    });
+
+    it("reports failure when no copy path exists", async () => {
+        vi.stubGlobal("navigator", {});
+        vi.stubGlobal("document", undefined);
+        expect(await copyText("runwisp")).toBe(false);
+    });
+});
+
+describe("CopyFeedback", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.stubGlobal("navigator", { clipboard: { writeText: () => Promise.resolve() } });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+
+    it("flags the copied key until the reset delay passes", async () => {
+        const feedback = new CopyFeedback(1000);
+        await feedback.copy("docker run", "docker");
+        expect(feedback.copied).toBe(true);
+        expect(feedback.isCopied("docker")).toBe(true);
+        expect(feedback.isCopied("binary")).toBe(false);
+        vi.advanceTimersByTime(1000);
+        expect(feedback.copied).toBe(false);
+    });
+
+    it("restarts the reset delay on a second copy", async () => {
+        const feedback = new CopyFeedback(1000);
+        await feedback.copy("a");
+        vi.advanceTimersByTime(800);
+        await feedback.copy("b");
+        vi.advanceTimersByTime(800);
+        expect(feedback.copied).toBe(true);
+    });
+
+    it("stays idle when the copy fails", async () => {
+        vi.stubGlobal("navigator", {
+            clipboard: { writeText: () => Promise.reject(new Error("denied")) },
+        });
+        vi.stubGlobal("document", undefined);
+        const feedback = new CopyFeedback();
+        expect(await feedback.copy("a")).toBe(false);
+        expect(feedback.copied).toBe(false);
+    });
+});

package/src/lib/utils/clipboard.svelte.ts

@@ -0,0 +1,73 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+const DEFAULT_RESET_MS = 2000;
+
+// Copies text to the clipboard and reports whether it worked. navigator.clipboard
+// only exists in secure contexts, so a daemon served over plain http on a LAN IP
+// falls back to the legacy textarea + execCommand path.
+export async function copyText(text: string): Promise<boolean> {
+    if (typeof navigator !== "undefined" && "clipboard" in navigator) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        } catch {
+            // Denied or blocked: try the legacy path below.
+        }
+    }
+    return legacyCopy(text);
+}
+
+function legacyCopy(text: string): boolean {
+    if (typeof document === "undefined") return false;
+    const previousFocus = document.activeElement;
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.readOnly = true;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+        // Deprecated, but still the only copy path outside a secure context.
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        ok = document.execCommand("copy"); // NOSONAR
+    } catch {
+        ok = false;
+    }
+    ta.remove();
+    if (previousFocus instanceof HTMLElement) previousFocus.focus();
+    return ok;
+}
+
+// CopyFeedback drives a copy button's transient "copied" state. `key` tells
+// several buttons sharing one instance apart (one per tab or snippet).
+export class CopyFeedback {
+    #key = $state<string | null>(null);
+    #timer: ReturnType<typeof setTimeout> | undefined;
+    readonly #resetMs: number;
+
+    constructor(resetMs: number = DEFAULT_RESET_MS) {
+        this.#resetMs = resetMs;
+    }
+
+    get copied(): boolean {
+        return this.#key !== null;
+    }
+
+    isCopied(key: string): boolean {
+        return this.#key === key;
+    }
+
+    async copy(text: string, key: string = ""): Promise<boolean> {
+        const ok = await copyText(text);
+        if (!ok) return false;
+        clearTimeout(this.#timer);
+        this.#key = key;
+        this.#timer = setTimeout(() => {
+            this.#key = null;
+        }, this.#resetMs);
+        return true;
+    }
+}

package/src/lib/utils/format.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // Signed magnitude thresholds for Intl.RelativeTimeFormat, largest-first
-// division. Mirrors the buckets date-fns' formatDistance used to pick.
+// division. The buckets match date-fns' formatDistance.
 const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][] = [
     [60, "seconds"],
     [60, "minutes"],
@@ -13,105 +13,88 @@ const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][]
     [Number.POSITIVE_INFINITY, "years"],
 ];
 
-// formatDistance renders a signed date delta as "N units ago" / "in N units"
-// using the platform Intl formatter. Negative delta (date before base) reads as
-// past, positive as future.
-function formatDistance(date: Date, base: Date): string {
-    const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
-    let delta = (date.getTime() - base.getTime()) / 1000;
+const relativeTime = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
+
+/** "N units ago" / "in N units" for `date` relative to `now`. */
+export function formatRelativeTime(date: string | Date, now: Date = new Date()): string {
+    let delta = (new Date(date).getTime() - now.getTime()) / 1000;
     for (const [amount, unit] of RELATIVE_DIVISIONS) {
         if (Math.abs(delta) < amount) {
-            return rtf.format(Math.round(delta), unit);
+            return relativeTime.format(Math.round(delta), unit);
         }
         delta /= amount;
     }
-    return rtf.format(Math.round(delta), "years");
+    return relativeTime.format(Math.round(delta), "years");
 }
 
-export function formatBytes(bytes: number): string {
-    const units: [string, ...string[]] = ["B", "KB", "MB", "GB", "TB", "PB"];
-    let value = bytes;
-    let unitIndex = 0;
-    while (value >= 1024 && unitIndex < units.length - 1) {
-        value /= 1024;
-        unitIndex++;
-    }
-    const unit = units[unitIndex] ?? "B";
-    const digits = value < 10 && unitIndex > 0 ? 1 : 0;
-    return `${new Intl.NumberFormat("en", { maximumFractionDigits: digits }).format(value)} ${unit}`;
+/** A locale date/time formatter for one fixed option set, built once. */
+function dateFormatter(options: Intl.DateTimeFormatOptions): (date: string | Date) => string {
+    const format = new Intl.DateTimeFormat(undefined, options);
+    return (date) => format.format(new Date(date));
 }
 
-export function formatRelativeTime(dateStr: string | Date, now: Date = new Date()): string {
-    return formatDistance(new Date(dateStr), now);
-}
+export const formatDateTime = dateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+});
 
-export function formatRelativeTimeWithAbsolute(
-    dateStr: string | Date,
-    now: Date = new Date(),
-): string {
-    const date = new Date(dateStr);
-    const relative = formatDistance(date, now);
-    const diffMs = Math.abs(now.getTime() - date.getTime());
-    const diffDays = diffMs / (1000 * 60 * 60 * 24);
+/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
+export const formatClockTime = dateFormatter({
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+});
 
-    let absolute: string;
-    if (diffDays < 1) {
-        absolute = date.toLocaleTimeString(undefined, {
-            hour: "numeric",
-            minute: "2-digit",
-            hour12: false,
-        });
-    } else {
-        absolute = date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-    }
+/** Calendar date without the time — e.g. "22 Jun 2026". */
+export const formatCalendarDate = dateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+});
 
-    return `${relative} (${absolute})`;
-}
+/** Time of day, no seconds, 24-hour — e.g. "17:15". */
+export const formatTimeHM = dateFormatter({ hour: "2-digit", minute: "2-digit", hour12: false });
 
-export function formatDateTime(dateStr: string): string {
-    return new Date(dateStr).toLocaleString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-    });
-}
+/** Day and month, no year — e.g. "22 Jun". */
+export const formatDayMonth = dateFormatter({ month: "short", day: "numeric" });
 
-/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
-export function formatClockTime(dateStr: string): string {
-    return new Date(dateStr).toLocaleTimeString(undefined, {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false,
-    });
-}
+export const formatFullDateTime = dateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+});
 
-/** Calendar date without the time — e.g. "22 Jun 2026". */
-export function formatCalendarDate(dateStr: string): string {
-    return new Date(dateStr).toLocaleDateString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-    });
-}
+const formatShortTime = dateFormatter({ hour: "numeric", minute: "2-digit", hour12: false });
 
-/** Time of day, no seconds, 24-hour — e.g. "17:15". */
-export function formatTimeHM(dateStr: string): string {
-    return new Date(dateStr).toLocaleTimeString(undefined, {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-    });
+export function formatRelativeTimeWithAbsolute(
+    dateStr: string | Date,
+    now: Date = new Date(),
+): string {
+    const date = new Date(dateStr);
+    const diffDays = Math.abs(now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24);
+    const absolute = diffDays < 1 ? formatShortTime(date) : formatDayMonth(date);
+    return `${formatRelativeTime(date, now)} (${absolute})`;
 }
 
-/** Day and month, no year — e.g. "22 Jun". */
-export function formatDayMonth(dateStr: string): string {
-    return new Date(dateStr).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-    });
+export function formatBytes(bytes: number): string {
+    const units: [string, ...string[]] = ["B", "KB", "MB", "GB", "TB", "PB"];
+    let value = bytes;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex++;
+    }
+    const unit = units[unitIndex] ?? "B";
+    const digits = value < 10 && unitIndex > 0 ? 1 : 0;
+    return `${new Intl.NumberFormat("en", { maximumFractionDigits: digits }).format(value)} ${unit}`;
 }
 
 export function formatDuration(ms: number): string {
@@ -125,15 +108,3 @@ export function formatDuration(ms: number): string {
     const remM = m % 60;
     return remM > 0 ? String(h) + "h " + String(remM) + "m" : String(h) + "h";
 }
-
-export function formatFullDateTime(date: Date | string): string {
-    return new Intl.DateTimeFormat(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false,
-    }).format(new Date(date));
-}

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

@@ -5,16 +5,12 @@ import { describe, expect, it } from "vitest";
 import { formatShortId } from "./id.js";
 
 describe("formatShortId", () => {
-    it("returns the last 8 characters by default", () => {
+    it("returns the last 8 characters", () => {
         expect(formatShortId("01HVZ4XYZ123456ABCDEF")).toBe("56ABCDEF");
     });
 
-    it("honours a custom length", () => {
-        expect(formatShortId("01HVZ4XYZ123456ABCDEF", 4)).toBe("CDEF");
-    });
-
-    it("returns the whole string when shorter than the requested length", () => {
-        expect(formatShortId("abc", 8)).toBe("abc");
+    it("returns the whole string when shorter than 8", () => {
+        expect(formatShortId("abc")).toBe("abc");
     });
 
     it("returns an empty string for an empty input", () => {

package/src/lib/utils/id.ts

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-export function formatShortId(id: string, length = 8): string {
-    return id.slice(-length);
+/** The last 8 characters of a ULID, the part that differs between runs. */
+export function formatShortId(id: string): string {
+    return id.slice(-8);
 }

package/src/lib/utils/theme.svelte.test.ts

@@ -89,12 +89,6 @@ describe("themeStore", () => {
         expect(themeStore.resolved).toBe("dark");
     });
 
-    it("falls back to the legacy storage key", async () => {
-        stubBrowser({ storage: { "runwisp-theme": "light" } });
-        const { themeStore } = await import("./theme.svelte.js");
-        expect(themeStore.preference).toBe("light");
-    });
-
     it("ignores an invalid stored value", async () => {
         stubBrowser({ storage: { "runwisp:theme": "purple" } });
         const { themeStore } = await import("./theme.svelte.js");

package/src/lib/utils/theme.svelte.ts

@@ -2,13 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export type ThemePreference = "auto" | "light" | "dark";
-export type ResolvedTheme = "light" | "dark";
+type ResolvedTheme = "light" | "dark";
 
 // Shared by every RunWisp surface. Keep byte-for-byte in sync with the
 // no-flash <head> scripts in each app's app.html / layout.
-export const THEME_STORAGE_KEY = "runwisp:theme";
-// The daemon dashboard used this key before the store moved here.
-const LEGACY_STORAGE_KEY = "runwisp-theme";
+const THEME_STORAGE_KEY = "runwisp:theme";
 
 function isPreference(value: string | null): value is ThemePreference {
     return value === "auto" || value === "light" || value === "dark";
@@ -16,7 +14,7 @@ function isPreference(value: string | null): value is ThemePreference {
 
 function readStored(): string | null {
     try {
-        return localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem(LEGACY_STORAGE_KEY);
+        return localStorage.getItem(THEME_STORAGE_KEY);
     } catch {
         return null; // private mode / embedded contexts
     }

package/src/lib/utils/toast.svelte.ts

@@ -3,9 +3,9 @@
 
 import { generateUlid } from "@runwisp/common";
 
-export type ToastType = "success" | "error" | "warning" | "info";
+type ToastType = "success" | "error" | "warning" | "info";
 
-export interface ToastAction {
+interface ToastAction {
     label: string;
     onClick: () => void;
 }
@@ -18,7 +18,7 @@ export interface Toast {
     action?: ToastAction;
 }
 
-export interface ToastOptions {
+interface ToastOptions {
     duration?: number;
     action?: ToastAction;
 }
@@ -88,14 +88,6 @@ class ToastStore {
     info(message: string, opts?: ToastOptions): string {
         return this.add("info", message, opts);
     }
-
-    clear() {
-        for (const timer of this.timers.values()) {
-            clearTimeout(timer);
-        }
-        this.timers.clear();
-        this.items = [];
-    }
 }
 
 export const toast = new ToastStore();

package/src/stories/Accordion.stories.svelte

@@ -0,0 +1,61 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { LifeBuoy, Trash } from "@lucide/svelte";
+    import Accordion from "$lib/components/Accordion.svelte";
+    import AccordionItem from "$lib/components/AccordionItem.svelte";
+    import Toggle from "$lib/components/Toggle.svelte";
+
+    const { Story } = defineMeta({
+        title: "Navigation/Accordion",
+        component: Accordion,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story name="Multiple" asChild>
+    <Accordion class="max-w-lg">
+        <AccordionItem title="Retries" open>Retry a failed run up to three times.</AccordionItem>
+        <AccordionItem title="Timeouts">Kill the run after 10 minutes.</AccordionItem>
+        <AccordionItem title="Notifications">Send failures to Slack.</AccordionItem>
+    </Accordion>
+</Story>
+
+<Story name="Single" asChild>
+    <Accordion type="single" class="max-w-lg">
+        <AccordionItem title="Retries" open>Opening another section closes this one.</AccordionItem>
+        <AccordionItem title="Timeouts">Kill the run after 10 minutes.</AccordionItem>
+        <AccordionItem title="Notifications">Send failures to Slack.</AccordionItem>
+    </Accordion>
+</Story>
+
+<Story name="Framed, default open" asChild>
+    <AccordionItem variant="framed" open class="max-w-lg">
+        {#snippet title()}
+            <span class="flex items-center gap-2.5">
+                <LifeBuoy size={16} class="text-on-surface-faint" />
+                Schedule recovery
+                <span class="font-sans text-xs text-on-surface-faint">Missed ticks & jitter</span>
+            </span>
+        {/snippet}
+        What to do with cron ticks missed while the scheduler was offline.
+    </AccordionItem>
+</Story>
+
+<Story name="Framed with actions" asChild>
+    <AccordionItem variant="framed" title="Node.js 22" class="max-w-lg">
+        {#snippet actions()}
+            <Toggle checked size="sm" />
+            <button
+                type="button"
+                aria-label="Remove"
+                class="text-on-surface-faint hover:text-danger-surface"
+            >
+                <Trash size={14} />
+            </button>
+        {/snippet}
+        <pre class="font-mono text-xs">RUN apk add --no-cache nodejs npm</pre>
+    </AccordionItem>
+</Story>

package/src/stories/CodeBlock.stories.svelte

@@ -0,0 +1,55 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import CodeBlock from "$lib/components/CodeBlock.svelte";
+
+    const helloTask = '[tasks.hello]\ncron = "*/5 * * * *"\nrun  = "echo hello"';
+    const backupTask = '[tasks.backup]\ncron = "0 3 * * *"\nkeep_runs = 60';
+
+    const { Story } = defineMeta({
+        title: "Data Display/CodeBlock",
+        component: CodeBlock,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: { control: "select", options: ["terminal", "surface"] },
+            size: { control: "select", options: ["sm", "md"] },
+        },
+    });
+</script>
+
+<Story
+    name="Default"
+    args={{
+        code: "export RUNWISP_STATION_TOKEN=rw_xxx\nexport RUNWISP_STATION_URL=https://app.runwisp.com\nrunwisp station",
+    }}
+/>
+
+<Story
+    name="Filename"
+    args={{ code: "FROM alpine:3.20\nRUN apk add --no-cache curl", filename: "Dockerfile" }}
+/>
+
+<Story
+    name="Shell prompt"
+    args={{ code: "curl -fsSL https://get.runwisp.com/install.sh | bash", prompt: "$" }}
+/>
+
+<Story name="Surface variant" asChild>
+    <CodeBlock variant="surface" size="sm" copyable={false} code={helloTask} />
+</Story>
+
+<!-- Rich children render the markup; `code` keeps the copied text plain. -->
+<Story name="Highlighted children" asChild>
+    <!-- No whitespace between the line spans: inside <pre> it would render as blank lines. -->
+    <CodeBlock filename="runwisp.toml" code={backupTask}
+        ><span class="block text-[var(--rw-syn-fn)]">[tasks.backup]</span><span class="block"
+            ><span class="text-[var(--rw-syn-kw)]">cron</span> =
+            <span class="text-[var(--rw-syn-str)]">"0 3 * * *"</span></span
+        ><span class="block"
+            ><span class="text-[var(--rw-syn-kw)]">keep_runs</span> =
+            <span class="text-[var(--rw-syn-num)]">60</span></span
+        ></CodeBlock
+    >
+</Story>