Skip to content
Components

Log stream

Raw machine output as it arrives — fixed-width, tone per line, and it follows the tail until you scroll away.

The log

06:14:02 riverton_city ok 41,220 features

06:14:29 eastvale_city ok 18,904 features

06:15:03 northbank_shire crs mismatch — reprojected

06:15:44 millbrook ok 22,617 features

06:16:10 jarrah_valley read failed — endpoint 503

06:16:31 jarrah_valley retry 1 of 3

06:16:58 jarrah_valley ok 9,801 features

06:17:12 run complete 8 councils · 1 warning

A run in progress
Code
<GdLogStream :lines="[
  { text: '06:14:02  riverton_city  ok  41,220 features' },
  { text: '06:15:03  northbank_shire  crs mismatch', tone: 'warn' }
]" :rows="8" />

Not an activity feed

GdActivityFeed is the translated side: the sentence in it is prose — "Priya approved the Riverton ruleset", not RULESET_APPROVED riverton priya — and the timestamp is the only mono in it, because a feed is where machine events get made readable for a person.

A log is the untranslated side. 06:15:03 northbank_shire crs mismatch is not a sentence and should not be dressed as one: it is a fixed-width record whose columns a reader scans down, and the value of it is precisely that nothing rewrote it. Two components, because they are two different promises about the text.

Two behaviours worth knowing

  • It follows the tail, and stops the moment you scroll up. Auto-scroll that fights a reader is the most irritating thing a log widget does: you scroll back to read the error, the next line arrives, and you are yanked to the bottom. Scrolling away turns following off; returning to the bottom turns it back on — the bargain every terminal makes.
  • aria-live is opt-in. A log that announces every line is a screen reader reading a build aloud for ten minutes with no way to stop it. The accessible default is silence plus a findable role="log" region; turn live on for a short, decisive log a person is waiting on.

Lines never wrap. A record is one line, and reflowing it breaks the columns a reader is scanning down — so it scrolls sideways instead. Tone is limited to three: a log where every line is coloured is a log where colour has stopped meaning anything.

Props

PropTypeDefault
linesrequiredGdLogLine[]—

`{ text, tone? }`. `text` is the whole record, preformatted — nothing here reflows or re-orders it.

rowsnumber8

Visible rows before it scrolls. Multiplied by the log's own row rhythm, so it means what it says whatever the type scale does later.

livebooleanfalse

Announce new lines to a screen reader. Off by default — see below.

Navigate

Esc