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

Quando esta spec se aplica

Triggers primários

Todos os triggers

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

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

Referências