@runwisp/ui 0.9.0 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -50,8 +50,8 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.39.1",
-    "@runwisp/eslint-config": "0.9.0",
-    "@runwisp/typescript-config": "0.9.0",
+    "@runwisp/eslint-config": "0.10.0",
+    "@runwisp/typescript-config": "0.10.0",
     "@storybook/addon-a11y": "^10.1.9",
     "@storybook/addon-docs": "^10.1.9",
     "@storybook/addon-svelte-csf": "^5.0.10",
@@ -99,7 +99,7 @@
     "@floating-ui/dom": "^1.7.4",
     "@fontsource/tasa-orbiter": "^5.2.2",
     "@lucide/svelte": "^0.561.0",
-    "@runwisp/common": "0.9.0",
+    "@runwisp/common": "0.10.0",
     "@tanstack/svelte-virtual": "^3.13.25",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.4.0",

package/src/lib/components/LogConsole.svelte

@@ -35,14 +35,23 @@
     const cache = new LogCache();
     let fetcher: LogFetcher | null = $state(null);
     let containerEl: HTMLDivElement | null = $state(null);
+    let rulerEl: HTMLSpanElement | null = $state(null);
     let scrollTop = $state(0);
     let containerHeight = $state(0);
+    let containerWidth = $state(0);
+    // Monospace character width in px, measured from a hidden ruler so the
+    // horizontal scroll surface is sized without per-line DOM reflow.
+    let charWidth = $state(8);
     let isAutoScroll = $state(true);
     let userScrolledUp = $state(false);
     let isStreaming = $derived(!cache.finished && cache.totalLines > 0);
 
     const OVERSCAN = 50;
     const BLANK_LINES_AT_END = 3;
+    const RULER_SAMPLE = "0".repeat(50);
+    // Trailing slack past the last column so the widest line never sits flush
+    // against the scroll edge.
+    const SURFACE_PADDING = 16;
 
     let truncationBannerHeight = $derived(cache.firstAvailableLine > 0 ? lineHeight : 0);
 
@@ -85,6 +94,13 @@
 
     let gutterWidth = $derived(Math.max(4, String(cache.totalLines || 1).length) * 10 + 16);
 
+    // Width of the virtual scroll surface: wide enough for the longest line
+    // seen so far, never narrower than the viewport (so short logs show no
+    // horizontal scrollbar).
+    let surfaceWidth = $derived(
+        Math.max(containerWidth, gutterWidth + cache.maxLineColumns * charWidth + SURFACE_PADDING),
+    );
+
     let renderedLines = $derived.by(() => {
         const lines: Array<{ num: number; text: string | undefined }> = [];
         const start = Math.max(cache.firstAvailableLine, visibleStart);
@@ -186,6 +202,17 @@
     function onResize() {
         if (containerEl) {
             containerHeight = containerEl.clientHeight;
+            containerWidth = containerEl.clientWidth;
+        }
+        measureCharWidth();
+    }
+
+    // Measure one monospace column from the hidden ruler. Font, zoom, and
+    // DPI changes all surface through the ResizeObserver, so this stays
+    // accurate without polling.
+    function measureCharWidth() {
+        if (rulerEl && rulerEl.offsetWidth > 0) {
+            charWidth = rulerEl.offsetWidth / RULER_SAMPLE.length;
         }
     }
 
@@ -236,6 +263,8 @@
     $effect(() => {
         if (!containerEl) return;
         containerHeight = containerEl.clientHeight;
+        containerWidth = containerEl.clientWidth;
+        measureCharWidth();
 
         const resizeObserver = new ResizeObserver(() => {
             onResize();
@@ -251,18 +280,30 @@
 <div
     class="log-console relative flex h-full w-full flex-col overflow-hidden bg-mist-950 font-mono text-sm {className}"
 >
+    <!-- Hidden ruler: one monospace column is measured from this off-screen
+         sample to size the horizontal scroll surface without per-line reflow. -->
+    <span
+        bind:this={rulerEl}
+        aria-hidden="true"
+        class="pointer-events-none absolute -top-[9999px] left-0 whitespace-pre select-none"
+        >{RULER_SAMPLE}</span
+    >
+
     <div bind:this={containerEl} class="flex-1 overflow-auto" onscroll={onScroll}>
-        <div class="relative" style="height: {totalHeight}px; min-height: 100%;">
+        <div
+            class="relative"
+            style="height: {totalHeight}px; min-height: 100%; width: {surfaceWidth}px; min-width: 100%;"
+        >
             {#if cache.firstAvailableLine > 0}
                 <div
                     class="absolute right-0 left-0 flex items-center bg-warning-700/20 text-warning-400"
                     style="top: 0px; height: {lineHeight}px;"
                 >
                     <div
-                        class="flex-shrink-0 pr-3 text-right select-none"
+                        class="sticky left-0 z-10 flex-shrink-0 pr-3 text-right select-none"
                         style="width: {gutterWidth}px;"
                     ></div>
-                    <div class="flex-1 truncate pr-4 text-xs">
+                    <div class="sticky flex-shrink-0 pr-4 text-xs" style="left: {gutterWidth}px;">
                         Log truncated: {cache.firstAvailableLine.toLocaleString()} earlier line{cache.firstAvailableLine ===
                         1
                             ? ""
@@ -280,12 +321,12 @@
                     style="top: {lineTop(line.num)}px; height: {lineHeight}px;"
                 >
                     <div
-                        class="flex-shrink-0 pr-3 text-right text-mist-500 select-none"
+                        class="sticky left-0 z-10 flex-shrink-0 bg-mist-950 pr-3 text-right text-mist-500 select-none"
                         style="width: {gutterWidth}px;"
                     >
                         {line.num + 1}
                     </div>
-                    <div class="flex-1 truncate pr-4 text-mist-200">
+                    <div class="flex-1 pr-4 text-mist-200">
                         {#if line.text !== undefined}
                             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                             <span class="whitespace-pre">{@html ansiLineToHtml(line.text)}</span>
@@ -302,10 +343,13 @@
                     style="top: {lineTop(cache.totalLines)}px; height: {lineHeight}px;"
                 >
                     <div
-                        class="flex-shrink-0 pr-3 text-right select-none"
+                        class="sticky left-0 z-10 flex-shrink-0 bg-mist-950 pr-3 text-right select-none"
                         style="width: {gutterWidth}px;"
                     ></div>
-                    <div class="flex items-center gap-1 text-mist-400">
+                    <div
+                        class="sticky flex items-center gap-1 text-mist-400"
+                        style="left: {gutterWidth}px;"
+                    >
                         <span class="dot" style="animation-delay: 0ms;"></span>
                         <span class="dot" style="animation-delay: 150ms;"></span>
                         <span class="dot" style="animation-delay: 300ms;"></span>
@@ -322,7 +366,7 @@
                         )}px; height: {lineHeight}px;"
                     >
                         <div
-                            class="flex-shrink-0 pr-3 text-right text-mist-700 opacity-0 select-none"
+                            class="sticky left-0 z-10 flex-shrink-0 bg-mist-950 pr-3 text-right text-mist-700 opacity-0 select-none"
                             style="width: {gutterWidth}px;"
                         >
                             ~
@@ -408,6 +452,7 @@
 <style>
     .log-console {
         --log-line-height: 20px;
+        tab-size: 8;
     }
 
     .log-line--flash {

package/src/lib/components/Modal.svelte

@@ -14,7 +14,9 @@
         onClose?: () => void;
         header?: Snippet;
         footer?: Snippet;
-        children?: Snippet;
+        // Explicitly nullable so callers can pass `children={cond ? snip : undefined}`
+        // to suppress the padded body band entirely when there's nothing to show.
+        children?: Snippet | undefined;
         class?: string;
     }
 

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

@@ -10,18 +10,26 @@
         Download,
         Trash2,
         MousePointerClick,
+        RotateCw,
+        SlidersHorizontal,
     } from "@lucide/svelte";
     import Badge from "../Badge.svelte";
     import Button from "../Button.svelte";
     import EmptyState from "../EmptyState.svelte";
     import LogConsole from "../LogConsole.svelte";
+    import Popover from "../Popover.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 { formatDateTime, formatFullDateTime } from "../../utils/format.js";
     import { formatShortId } from "../../utils/id.js";
     import { getRunStatusConfig, runDisplayStatus } from "./status-config.js";
-    import { runDuration, runStartDelay } from "./run-helpers.js";
+    import {
+        runDuration,
+        runStartDelay,
+        formatTriggeredByLabel,
+        runRetryLabel,
+    } from "./run-helpers.js";
 
     let {
         run,
@@ -95,6 +103,9 @@
     {@const DetailIcon = config.icon}
     {@const duration = runDuration(run)}
     {@const startDelay = runStartDelay(run)}
+    {@const startedAt = run.start_at ?? run.created_at}
+    {@const retry = runRetryLabel(run)}
+    {@const paramEntries = run.params ? Object.entries(run.params) : []}
     <!-- Detailed Header -->
     <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">
@@ -114,7 +125,9 @@
                                         class="text-on-surface-muted">#{run.instance_index}</span
                                     >{/if}
                             {:else}
-                                Run #{formatShortId(run.id)}{#if run.instance_index > 0}
+                                <span title={formatFullDateTime(startedAt)}
+                                    >Run · {formatDateTime(startedAt)}</span
+                                >{#if run.instance_index > 0}
                                     <span class="text-on-surface-muted"
                                         >· instance #{run.instance_index}</span
                                     >
@@ -162,7 +175,7 @@
                                 <Server size={14} />
                                 <span
                                     >Triggered by <span class="font-medium text-on-surface"
-                                        >{run.triggered_by}</span
+                                        >{formatTriggeredByLabel(run.triggered_by)}</span
                                     ></span
                                 >
                             </div>
@@ -171,7 +184,7 @@
                                 <Server size={14} />
                                 <span
                                     >Triggered by <span class="font-medium text-on-surface"
-                                        >{run.triggered_by}</span
+                                        >{formatTriggeredByLabel(run.triggered_by)}</span
                                     ></span
                                 >
                             </div>
@@ -185,6 +198,57 @@
                                 {run.id}
                             </div>
                         {/if}
+                        {#if retry}
+                            <div
+                                class="hidden h-1 w-1 rounded-full bg-outline-faint sm:block"
+                            ></div>
+                            <div class="flex items-center gap-1.5">
+                                <RotateCw size={14} />
+                                <span
+                                    >Retry #{run.retry_attempt}{#if run.retry_of_run_id}
+                                        <span class="text-on-surface-faint"
+                                            >of run {formatShortId(run.retry_of_run_id)}</span
+                                        >{/if}</span
+                                >
+                            </div>
+                        {/if}
+                        {#if paramEntries.length > 0}
+                            <div
+                                class="hidden h-1 w-1 rounded-full bg-outline-faint sm:block"
+                            ></div>
+                            <Popover placement="bottom-start">
+                                {#snippet trigger()}
+                                    <span
+                                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-outline-faint bg-surface-sunken px-2.5 py-0.5 text-xs font-medium text-on-surface-muted transition-colors hover:border-outline hover:text-on-surface"
+                                        title="View run parameters"
+                                    >
+                                        <SlidersHorizontal size={12} />
+                                        {paramEntries.length}
+                                        {paramEntries.length === 1 ? "parameter" : "parameters"}
+                                    </span>
+                                {/snippet}
+                                <div class="max-w-md min-w-48">
+                                    <span
+                                        class="text-xs font-semibold tracking-wide text-on-surface-faint uppercase"
+                                        >Parameters</span
+                                    >
+                                    <dl
+                                        class="mt-2 grid max-h-72 grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 overflow-y-auto"
+                                    >
+                                        {#each paramEntries as [key, value] (key)}
+                                            <dt class="font-mono text-xs text-on-surface-muted">
+                                                {key}
+                                            </dt>
+                                            <dd
+                                                class="font-mono text-xs font-medium break-all text-on-surface"
+                                            >
+                                                {value}
+                                            </dd>
+                                        {/each}
+                                    </dl>
+                                </div>
+                            </Popover>
+                        {/if}
                     </div>
                 </div>
             </div>

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

@@ -28,13 +28,11 @@
     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";
-    import { runDuration } from "./run-helpers.js";
-    import { formatRelativeTime } from "../../utils/format.js";
-    import { formatShortId } from "../../utils/id.js";
+    import { runDuration, formatTriggeredByLabel, runRetryLabel } from "./run-helpers.js";
+    import { formatRelativeTime, formatDateTime, formatFullDateTime } from "../../utils/format.js";
 
     type BulkHandler = (selector: RunSelector, affected: Run[]) => void;
 
@@ -365,6 +363,8 @@
                         {@const config = getRunStatusConfig(runDisplayStatus(run))}
                         {@const Icon = config.icon}
                         {@const duration = runDuration(run)}
+                        {@const retry = runRetryLabel(run)}
+                        {@const startedAt = run.start_at ?? run.created_at}
                         <div
                             class="flex items-stretch gap-1"
                             style:position="absolute"
@@ -377,7 +377,7 @@
                             {#if bulkActions}
                                 <label
                                     class="flex shrink-0 cursor-pointer items-center px-1.5"
-                                    aria-label={`Select run ${formatShortId(run.id)}`}
+                                    aria-label={`Select run from ${formatDateTime(run.start_at ?? run.created_at)}`}
                                 >
                                     <input
                                         type="checkbox"
@@ -421,16 +421,27 @@
                                             class="shrink-0 text-2xs {isActive
                                                 ? 'font-medium text-primary'
                                                 : 'text-on-surface-faint'}"
+                                            title={formatFullDateTime(startedAt)}
                                         >
-                                            {formatRelativeTime(run.start_at || run.created_at)}
+                                            {formatRelativeTime(startedAt)}
                                         </span>
                                     </div>
 
                                     <div class="flex items-center justify-between pl-6 text-xs">
                                         <div
-                                            class="flex items-center gap-1 font-mono text-2xs text-on-surface-muted"
+                                            class="flex min-w-0 items-center gap-1.5 text-2xs text-on-surface-muted"
                                         >
-                                            #{formatShortId(run.id)}
+                                            <span class="truncate">{formatDateTime(startedAt)}</span
+                                            >
+                                            <span class="text-on-surface-faint"
+                                                >· {formatTriggeredByLabel(run.triggered_by)}</span
+                                            >
+                                            {#if retry}
+                                                <span
+                                                    class="shrink-0 rounded bg-surface-sunken px-1 font-mono text-2xs text-on-surface-faint"
+                                                    >{retry}</span
+                                                >
+                                            {/if}
                                         </div>
                                         {#if duration}
                                             <div
@@ -444,10 +455,10 @@
                                         {/if}
                                     </div>
                                 {:else}
-                                    <!-- Task variant: shortId as primary, status secondary -->
+                                    <!-- Task variant: when it ran as primary, outcome secondary -->
                                     <div class="mb-1.5 flex items-center justify-between">
-                                        <div class="flex items-center gap-2">
-                                            <div class={config.color}>
+                                        <div class="flex min-w-0 items-center gap-2">
+                                            <div class="{config.color} shrink-0">
                                                 <Icon
                                                     size={16}
                                                     class={run.status === "running"
@@ -456,31 +467,35 @@
                                                 />
                                             </div>
                                             <span
-                                                class="font-mono text-xs font-medium text-on-surface"
+                                                class="truncate text-sm font-semibold text-on-surface"
                                             >
-                                                #{formatShortId(run.id)}
+                                                {formatDateTime(startedAt)}
                                             </span>
                                         </div>
                                         <span
-                                            class="text-2xs {isActive
+                                            class="shrink-0 text-2xs {isActive
                                                 ? 'font-medium text-primary'
                                                 : 'text-on-surface-faint'}"
+                                            title={formatFullDateTime(startedAt)}
                                         >
-                                            {formatRelativeTime(run.start_at || run.created_at)}
+                                            {formatRelativeTime(startedAt)}
                                         </span>
                                     </div>
 
-                                    <div class="flex items-center justify-between text-xs">
-                                        <div class="flex items-center gap-2 text-on-surface-muted">
-                                            <Tooltip
-                                                content={config.description}
-                                                position="right"
-                                                wide
+                                    <div class="flex items-center justify-between pl-6 text-xs">
+                                        <div
+                                            class="flex min-w-0 items-center gap-2 text-on-surface-muted"
+                                        >
+                                            <span class="capitalize">{runDisplayStatus(run)}</span>
+                                            <span class="text-on-surface-faint"
+                                                >· {formatTriggeredByLabel(run.triggered_by)}</span
                                             >
-                                                <span class="capitalize"
-                                                    >{runDisplayStatus(run)}</span
+                                            {#if retry}
+                                                <span
+                                                    class="shrink-0 rounded bg-surface-sunken px-1 font-mono text-2xs text-on-surface-faint"
+                                                    >{retry}</span
                                                 >
-                                            </Tooltip>
+                                            {/if}
                                             {#if run.instance_index > 0}
                                                 <span
                                                     class="font-mono text-2xs text-on-surface-faint"

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

@@ -2,7 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { runDuration, runStartDelay } from "./run-helpers.js";
+import {
+    runDuration,
+    runStartDelay,
+    formatTriggeredByLabel,
+    runRetryLabel,
+} from "./run-helpers.js";
 
 describe("runDuration", () => {
     it("returns undefined when start_at is not set", () => {
@@ -59,3 +64,27 @@ describe("runStartDelay", () => {
         ).toBe("7m 12s");
     });
 });
+
+describe("formatTriggeredByLabel", () => {
+    it("humanizes each trigger source", () => {
+        expect(formatTriggeredByLabel("api")).toBe("API");
+        expect(formatTriggeredByLabel("cron")).toBe("Cron");
+        expect(formatTriggeredByLabel("service")).toBe("Service");
+        expect(formatTriggeredByLabel("startup")).toBe("Startup");
+        expect(formatTriggeredByLabel("cloud")).toBe("Cloud");
+    });
+});
+
+describe("runRetryLabel", () => {
+    it("returns undefined for a first attempt that is not a retry", () => {
+        expect(runRetryLabel({ retry_attempt: 0 })).toBeUndefined();
+    });
+
+    it("labels a run with a positive attempt number", () => {
+        expect(runRetryLabel({ retry_attempt: 2 })).toBe("retry #2");
+    });
+
+    it("labels a run that points back at the run it re-attempts", () => {
+        expect(runRetryLabel({ retry_attempt: 1, retry_of_run_id: "01JABC" })).toBe("retry #1");
+    });
+});

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

@@ -26,6 +26,29 @@ export function runStartDelay(run: Pick<Run, "created_at" | "start_at">): string
     return formatDuration(delay);
 }
 
+/** Human label for why a run fired (the `triggered_by` source). */
+export function formatTriggeredByLabel(triggeredBy: Run["triggered_by"]): string {
+    if (triggeredBy === "api") return "API";
+    if (triggeredBy === "cron") return "Cron";
+    if (triggeredBy === "service") return "Service";
+    if (triggeredBy === "startup") return "Startup";
+    return "Cloud";
+}
+
+/**
+ * "retry #N" label when a run is a retry of an earlier one, else undefined.
+ * A run is a retry if it carries a positive attempt number or points back at
+ * the run it re-attempts.
+ */
+export function runRetryLabel(
+    run: Pick<Run, "retry_attempt" | "retry_of_run_id">,
+): string | undefined {
+    if (run.retry_attempt > 0 || run.retry_of_run_id) {
+        return `retry #${String(run.retry_attempt)}`;
+    }
+    return undefined;
+}
+
 /**
  * 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/index.ts

@@ -90,7 +90,13 @@ export {
     RUN_STATUS_CONFIG,
     type RunStatusConfig,
 } from "./components/dashboard/status-config.js";
-export { runDuration, runStartDelay, runPhaseOrder } from "./components/dashboard/run-helpers.js";
+export {
+    runDuration,
+    runStartDelay,
+    runPhaseOrder,
+    formatTriggeredByLabel,
+    runRetryLabel,
+} 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";
 

package/src/lib/log-console/LogCache.svelte.ts

@@ -3,6 +3,7 @@
 
 import type { LogSlice, LogEvent } from "./types.js";
 import { SvelteMap } from "svelte/reactivity";
+import { visibleColumns } from "./ansi.js";
 
 /**
  * LogCache provides high-performance storage and pruning for log data.
@@ -17,6 +18,9 @@ export class LogCache {
     totalBytes = $state(0);
     finished = $state(false);
     firstAvailableLine = $state(0);
+    // Widest visible line seen so far, in monospace columns. Monotonic so the
+    // horizontal scroll surface never shrinks as windowed lines are pruned.
+    maxLineColumns = $state(0);
 
     get size() {
         return this.lines.size;
@@ -38,6 +42,7 @@ export class LogCache {
             const prev = this.lines.get(line);
             if (prev !== v) {
                 this.lines.set(line, v);
+                this.maxLineColumns = Math.max(this.maxLineColumns, visibleColumns(v));
                 touched = true;
             }
         }
@@ -77,6 +82,7 @@ export class LogCache {
         this.totalBytes = 0;
         this.finished = false;
         this.firstAvailableLine = 0;
+        this.maxLineColumns = 0;
     }
 
     isRangeComplete(start: number, end: number) {

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { describe, expect, it } from "vitest";
-import { ansiLineToHtml } from "./ansi.js";
+import { ansiLineToHtml, visibleColumns } from "./ansi.js";
 
 describe("ansiLineToHtml", () => {
     it("passes plain text through unchanged", () => {
@@ -48,3 +48,20 @@ describe("ansiLineToHtml", () => {
         expect(ansiLineToHtml("plain")).toBe("plain");
     });
 });
+
+describe("visibleColumns", () => {
+    it("counts plain characters", () => {
+        expect(visibleColumns("hello")).toBe(5);
+        expect(visibleColumns("")).toBe(0);
+    });
+
+    it("ignores ANSI escape sequences", () => {
+        expect(visibleColumns("\x1b[31merror\x1b[0m")).toBe(5);
+        expect(visibleColumns("\x1b[1;36minfo\x1b[0m done")).toBe(9);
+    });
+
+    it("charges tabs the full tab width", () => {
+        expect(visibleColumns("\t")).toBe(8);
+        expect(visibleColumns("ab\tcd")).toBe(12);
+    });
+});

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

@@ -37,3 +37,20 @@ export function ansiLineToHtml(text: string): string {
         colors: ANSI_PALETTE,
     }).toHtml(text);
 }
+
+// Matches CSI escape sequences (colour codes, cursor moves, etc.), which
+// render to zero visible width. The ESC control char is intentional here.
+// eslint-disable-next-line no-control-regex
+const ANSI_ESCAPE = /\x1b\[[0-9;?]*[A-Za-z]/g;
+const TAB_WIDTH = 8;
+
+// Count the visible columns a log line occupies once ANSI escape sequences
+// are stripped. Tabs are charged the full tab width — an over-estimate that
+// only adds trailing slack to the horizontal scroll surface, never clips.
+export function visibleColumns(text: string): number {
+    let columns = 0;
+    for (const ch of text.replace(ANSI_ESCAPE, "")) {
+        columns += ch === "\t" ? TAB_WIDTH : 1;
+    }
+    return columns;
+}

package/src/stories/LogConsole.stories.svelte

@@ -50,6 +50,15 @@
         `${ESC}4;36munderlined cyan link${ESC}0m and ${ESC}4;33munderlined yellow${ESC}0m`,
     ];
 
+    const LONG_LINES = [
+        `${ESC}36m[info]${ESC}0m starting request trace`,
+        `${ESC}90m2026-06-05T03:00:00Z${ESC}0m GET /api/v1/tasks?include=runs,logs,schedule&limit=100&offset=0 → ${ESC}32m200${ESC}0m ${ESC}90m{"trace":"a1b2c3d4-e5f6-7890-abcd-ef1234567890","upstream":"https://internal.example.com/very/long/path/segment/that/keeps/going/and/going","latency_ms":1287,"bytes":204812}${ESC}0m`,
+        `${ESC}31m[error]${ESC}0m panic: runtime error: index out of range [12] with length 8 — goroutine 42 [running]: main.process(0xc0000b4000, 0x1f4) /home/runner/work/app/app/internal/pipeline/process.go:317 +0x4a5`,
+        "  short line in between",
+        `tab-separated\tcolumns\there\tshould\tstay\taligned\tand\textend\tfar\tpast\tthe\tviewport\tedge\tto\tprove\thorizontal\tscroll`,
+        `${ESC}32m[done]${ESC}0m ${"=".repeat(400)}|END`,
+    ];
+
     const STREAM_TICKS = [
         `${ESC}36m[info]${ESC}0m processed batch ${ESC}1m#42${ESC}0m ${ESC}90m(1,024 records)${ESC}0m`,
         `${ESC}32m✓${ESC}0m health check passed`,
@@ -73,3 +82,7 @@
 <Story name="Truncated" asChild>
     <LogConsoleDemo lines={SAMPLE_LOG.slice(6)} firstAvailableLine={1500} />
 </Story>
+
+<Story name="Long Lines" asChild>
+    <LogConsoleDemo lines={LONG_LINES} />
+</Story>