KQ-948 · TIMESTAMP/RAIL
Timestamp Rail
A gutter of clocks beside a log that a switch condenses to elapsed offsets, both readings sharing one grid cell so the column never changes width and the rows never move. Where two lines sit further apart than gapMs the rail grows a dashed stem sized to that gap's share of the largest; hovering or focusing one lifts it on snap, swaps its compact reading for a spoken one, and tints the lines it spans. Pressing a gap scrolls the box to the line after it and washes that row on a three-keyframe tween, and the gaps carry a roving tabindex.
KQ-948 · TIMESTAMP/RAIL
settle-runner · 3 gaps
- 09:41:02infosettle-runner woke, batch 118
- 09:41:02infoledger-api reachable
- 09:41:02info12 holds queued
- 09:41:02infohold 4471 claimed
- 09:41:03infohold 4472 claimed
- 09:41:03warngate-relay queue depth 40
- 09:41:10infogate-relay answered
- 09:41:10infohold 4471 settled
- 09:41:10infohold 4472 settled
- 09:41:11infohold 4473 settled
- 09:41:11errorhold 4474 rejected, ledger closed
- 09:41:12infohold 4475 settled
- 09:41:12infobatch 118 drained
- 09:41:24infosweep timer fired
- 09:41:25infosweep opened, 3 stragglers
- 09:41:25warnhold 4474 still open
- 09:41:29infohold 4474 retried
- 09:41:29infosettle-runner idle
clock · over 1.0 s · no jump yet
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/timestamp-rail
Props
- lines
- RailLine[]
- default —
- The log in order: id, a printed clock, ms from the first line, level and message.
- mode / defaultMode
- "clock" | "elapsed"
- default "clock"
- Controlled or initial reading in the gutter.
- onModeChange
- (mode: RailMode) => void
- default —
- Fires from the press that flipped the reading.
- gapMs
- number
- default 1000
- Distance between two lines before the rail draws a gap marker.
- onJump
- (id: string, gapMs: number) => void
- default —
- Fires when a gap is activated, with the line it landed on.
- onGapFocus
- (gapMs: number | null) => void
- default —
- Fires as a gap is hovered or focused, and with null when it is released.
- maxHeight
- number
- default 208
- The scroller's height in pixels; the log scrolls inside it, never the page.
- label
- string
- default "Log"
- Names the scrollable log for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | RailLine[] | — | The log in order: id, a printed clock, ms from the first line, level and message. |
| mode / defaultMode | "clock" | "elapsed" | "clock" | Controlled or initial reading in the gutter. |
| onModeChange | (mode: RailMode) => void | — | Fires from the press that flipped the reading. |
| gapMs | number | 1000 | Distance between two lines before the rail draws a gap marker. |
| onJump | (id: string, gapMs: number) => void | — | Fires when a gap is activated, with the line it landed on. |
| onGapFocus | (gapMs: number | null) => void | — | Fires as a gap is hovered or focused, and with null when it is released. |
| maxHeight | number | 208 | The scroller's height in pixels; the log scrolls inside it, never the page. |
| label | string | "Log" | Names the scrollable log for assistive technology. |