ns-ui

Progress Telegraph Log

Live telegraph feed for multi-stage operations of unknowable total duration: each real sub-step arrives as its own line with a ticking elapsed timer, then collapses into a dense done-ledger with its true cost frozen — stalls are self-evident because the active timer keeps counting while nothing new arrives.

Use when a running, honest now-feed for an operation whose total length is unknowable (deploys, imports, migrations) — the caller reports each sub-step as it actually starts and actually ends, so the only claim made is what has already happened, and a stalled step is visible because its own timer keeps ticking with nothing new below it. Reach for progress-narrated instead when the operation has a real 0-100 percent and a known phase list to narrate against a determinate track — that component is a bar with a typed narrator riding its fill front and a milestone ledger docked underneath; progress-telegraph-log has no bar and no percent at all, only a scrolling log of lines that were true when they were written.

Install

npx shadcn add https://design.helpmarq.com/r/progress-telegraph-log.json
  • progress
  • log
  • mono
  • ledger
  • deploy
  • async
  • accessibility
  • timer

ns-ui / progress-telegraph-log

hover the feed to pause · focus it and use arrow keys to review the ledger

Props

PropTypeDefaultDescription
stepsWireFeedStep[]append-only run log: add a step as "active" when it starts, then flip that same id to "done"/"error" with endedAt when it finishes. Never shows a step that hasn't actually started.
className?string
aria-label?string"Task progress"