Log viewer component

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).

Status: v0.1.0 — Draft. Promoted from the GitHub Primer parity scan (metadocsstack #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 colorstyle (the common CI subset: 816256truecolor

    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).

R4 — Search & navigation

  • 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).