Log viewer component

components specs/components/log-viewer.kmd

The streaming build/run log surface for Koder Pipe (CI), Hub, and any product that shows machine output: monospace append-only stream with ANSI color, collapsible step groups, search, follow-tail autoscroll, virtualization for huge logs, plus a companion job/workflow DAG graph for multi-step builds. Modeled after the GitHub Actions log + workflow graph (Primer).

When this spec applies

Primary triggers

Build the log viewer for a CI / build / run surface

All triggers

Render streaming build/CI/run logs
Show a multi-step pipeline's job graph and per-step output
Display ANSI-colored machine output with search and autoscroll

Component — Log viewer

Status: v0.1.0 — Draft. Promoted from the GitHub Primer parity scan (meta/docs/stack #092). Live URL once rendered: kds.koder.dev/<locale>/components/components-log-viewer.html.

R1 — Log stream

Monospace, append-only; new lines stream in at the tail.
Renders ANSI SGR color/style (the common CI subset: 8/16/256/truecolor foreground+background, bold, underline) mapped onto Verge terminal tokens (specs/themes/verge.kmd) — never raw ANSI palette hex, so light/dark stay legible.
Per-line: a line number gutter and an optional timestamp column (toggle).
Lines wrap or scroll-horizontally per a user toggle; default no-wrap.

R2 — Step groups

Output is grouped into collapsible steps (a CI step / phase). A group header shows its name, duration, and a specs/components/state-label.kmd- style status (queued / running / success / failed / skipped).
Failed groups auto-expand; successful ones default collapsed.
Deep-linking to a line expands its group and scrolls to it.

R3 — Follow tail (autoscroll)

While running, the viewer follows the tail (autoscrolls to newest).
Scrolling up pauses follow and shows a "Jump to bottom / Resume" control; reaching the bottom resumes follow.
Follow never fights the user (no scroll yank while they read history).

In-log search highlights matches with next/prev navigation and a match count; search spans collapsed groups (expanding on match).
Raw view + download (the unstyled text) is always available.

R5 — Scale

Virtualize rendering for large logs (only on-screen lines in the DOM); the line count and any server-side truncation/rotation are disclosed (no silent cap).
Streaming backpressure: coalesce bursts so the UI stays responsive.

R6 — Workflow / job graph (multi-step builds)

A companion graph visualizes the pipeline DAG: nodes = jobs, edges = dependencies (needs), each node colored by the same status set as R2.
Selecting a node focuses that job's log stream.
The graph augments — it is never the only way to read status; the grouped log + status labels carry it textually (R7).

R7 — Accessibility & i18n

Status conveyed by label text + icon, not color alone (WCAG 1.4.1) — reusing specs/components/state-label.kmd semantics.
New-line streaming is NOT a raw live region (would flood AT); instead step-completion + failures announce via a polite, throttled live region.
Skeletons (specs/components/skeleton.kmd) cover initial load.
Chrome strings (step states, "Jump to bottom", "Download", durations) localize per specs/i18n/contract.kmd; log content itself is never translated.

Não-escopo

ANSI cursor-control / TUI repainting (logs are append-only; full PTY emulation is the terminal's domain, kterm).
Log storage / retention / search backend (Koder Pipe / observe).
Metrics charts (separate dashboards spec).

References

specs/components/code-block.kmd
specs/components/state-label.kmd
specs/components/skeleton.kmd
specs/themes/verge.kmd
specs/i18n/contract.kmd