Log tailPro

A live log stream with level filters, search, pause on scroll and jump to live.

Markdown

On this page

ProA worker's log arriving live. Scroll up to hold the view; Jump to live comes back.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/log-tail

Usage

tsx

import { LogTail } from "@/components/ui/chatcn/pro/log-tail"

<LogTail lines={lines} status={stream.status} onReconnect={stream.reconnect} />

The view follows the newest line until you scroll up; then it holds still, counts what arrives and offers Jump to live. Pause freezes the view entirely while lines keep arriving underneath. Level filters show counts, search filters and highlights messages, sources and fields.

Past maxLines the oldest lines drop with a note, and rows use content-visibility so a long tail stays fast. Warnings and errors carry a glyph and a word as well as a tint.

Examples

States

ProFiltered with a search, disconnected, connecting, waiting for the first line and no matches.

Props

Prop	Type	Notes
`lines`	`LogLine[]`	`{ id, ts, level, source?, message, fields? }`
`status`	`"connecting" \| "live" \| "disconnected" \| "ended"`	Default `live`
`onReconnect`	`() => void`	Adds Reconnect when disconnected
`levels`, `defaultLevels`, `onLevelsChange`	`LogLevel[]`	Default every level
`defaultQuery`	`string`
`maxLines`	`number`	Default 5000
`height`	`number \| string`	Default 360
`loading`, `labels`

Keyboard

Key	Action
`Tab`	Level filters, search, the log, then Jump to live when shown
Arrows, `Page Up`, `Page Down` in the log	Scroll; scrolling up stops following
`Esc` in search	Clear the search

Accessibility

The log is a focusable log region with live announcements off: a stream that speaks every line is noise. The stream state is the polite region.
Each line's level is read as a word.

Motion

Jump to live fades and rises 4 px in 150 ms. New lines append with no effect. Reduced motion keeps the fade only.