Replay bar

A React component in Beamline's Data & tables category.

Rewind for anything live: pause a stream, scrub back to the moment you missed (markers for the ones that matter), step one update at a time, replay at a speed and return to live in one press, counting what you have not seen; the track is the arrivals themselves and the live part is unchanged.

Use it for

Any live part whose recent past matters: a deploy or agent log, a run trace, a queue or board, a live chart.
One screen of live parts that should rewind together to the same moment (one recorder for the whole screen's value).

Not for

Seeking in audio or video (scrub-bar).
Choosing a value on a scale (scrubber).

Anatomy

row: play/pause, the mode in words (a still dot for Live; Paused, Held, Replaying 2×), speed, and Back to live with the count of unseen updates and its L key
track, on its own row: a Scrubber over the recording whose ticks are the arrivals (each arrival weighs on its neighbours, so a burst stands taller than a lone line), its readout the moment shown ("11s before live"; live, how many updates), markers as labelled ticks on the update they name

States

waiting (nothing recorded yet)
live (the knob rides the newest arrival; the readout counts updates)
ended (with `ended`, at the newest value the bar says Ended, without the live dot; rewound, the readout says how far before the end and the button offers To the end)
held (the pointer or focus on the live part pauses it; it runs on when they leave)
paused (the part holds still; Back to live counts updates never shown)
scrubbing (the part shows the recorded moment; Escape puts back what was showing, live included)
replaying at 1×, 2× or 4× (the knob glides from update to update; it returns to live when it catches up)

Keyboard

Tab moves through the bar: play/pause, speed, back to live, the moment slider
On the slider: ←/→ step one update, Page Up/Down jump between markers (past the last, to the end), Home/End go to the first and the last update on the track (paused, the track holds still; L or Back to live reaches the newest), Space plays or pauses
L anywhere in the bar goes back to live

Motion

Nothing moves at rest beyond what arrives. While replaying the bar renders once per shown update and the knob glides between updates over the fast duration; the Scrubber's lens and hand physics apply to the track. Reduced motion jumps the knob instead of gliding it.

Props

Prop	Type	Default	Description
`recorder` (required)	`Recorder (from useReplay)`	—	The recorder from `const { shown, state, recorder } = useReplay(value)`; `import { ReplayBar, useReplay, holdWhileReading } from "@beamline/ui/replay-bar"`. Each new value (a new array or object, or a new number) is one update; give the live part `shown`, and its own live badge `state.mode === "live" && !state.held` (modes: "live", "paused", "replay"; `held` while someone reads it, which also stops a replay under the reader). A list can keep its later lines in view, dim until the replay reaches them: `const { shown, frozen, recorder } = useReplay(lines)` then `<LogViewer lines={lines} playhead={frozen ? shown.length : null} />` (`frozen`: a recorded value is showing). `useReplay(value, { capacity = 2000, enabled = true })`; a number works as well as a list. Spread `holdWhileReading(recorder)` ({ onPointerEnter, onPointerLeave, onFocus, onBlur }) on the part to pause while it is read. Required.
`markers`	`{ t: number; label: string; priority?: number }[]`	—	Notable moments (`ReplayMarker` { t, label, priority }, exported beside the bar: `import { ReplayBar, type ReplayMarker } from "@beamline/ui/replay-bar"`; a new array each render is fine) on the track (a higher priority keeps its words when they crowd): `t` in ms from `Date.now()`, the recorder's own clock: stamp it when the value it names arrives; each sits on the first update at or after `t`, so a jump shows the event it names. Page Up/Down jump between them.
`format`	`(at: number, live: number) => string`	—	Text for a moment: `at` is the shown time, `live` the newest arrival (ms on the recorder's clock). Defaults to "12s before live" ("12s before the end" once `ended`).
`describe`	`(value: T, index: number, count: number) => string`	—	What a recorded value means, for screen readers stepping through it: it receives the value as you passed it to `useReplay` at that update (for a list, the whole list then), its index and the count ("error: i-0c2e failed").
`speeds`	`number[]`	`[1, 2, 4]`	Replay speeds the speed control steps through. Default [1, 2, 4].
`label`	`string`	`"Replay"`	Accessible name of the bar. Defaults to "Replay".
`className`	`string`	—	Classes on the documented visual root.
`classNames`	`Partial<Record<"root" \| "track" \| "live" \| "speed" \| "mode" \| "play", string>>`	—	Classes for the named visual parts.
`style`	`CSSProperties`	—	Inline styles on the documented visual root.
`ref`	`Ref<HTMLDivElement>`	—	Receives the root element.
`ended`	`boolean`	—	The source has finished (a deploy that completed, a stream that closed): at the newest value the bar says Ended instead of Live.
`recorded`	`((count: number) => string)`	—	The readout while live, in your word for what a recorded value is ("18 lines recorded"). `count` is the number of recorded updates (one per new value), the number of lines only when lines arrive one at a time. Defaults to "N updates recorded".

Built from

Import

import { ReplayBar } from "@beamline/replay-bar";

Get it

Replay bar is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Replay barComplete system · $49

Rewind for anything live.

Rewind a live log

The deploy streams and the bar says Live; the track's ticks are the lines as they arrived. Point at the log and it holds while you read. Pause, and “Back to live” counts the lines you have not seen. Jump to the “Health check failed” marker (Page Up/Down), step line by line with the arrows, play at 2× or 4×, and it catches up and goes live again. Rewound, the lines after the playhead stay in the log, dim under an accent line, and light up as the replay reaches them.

0 × 0full

One bar, every part on the screen

One recorder holds the whole screen's value, so the figures and the log rewind together to the same moment.

0 × 0full

Rewind an agent's run

An agent answers a refund request and the trace grows as it works, opening each step as it changes: the refund call times out once and is retried. Drag back to “Refund call timed out” and the trace stands exactly as it was then, on the same axis, the failed try and its error open and the retry not yet started; play at 4× and watch the agent recover. Point at the trace and it holds while you read.

0 × 0full

Before anything arrives

With nothing recorded yet the bar says so and its controls wait; the first value brings it to life.

0 × 0full

About Replay bar

← Tension timeline Event calendar →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Replay bar

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Import

Get it

More in Data & tables