Live Run Console React component
Watch an AI agent's log as it happens: lines stream in, level pills and a filter cut the noise, and scrolling up to read stops it jumping away.
About the Live Run Console component
Live Run Console shows what an agent is doing as it happens, in a form people can actually read. Tool calls, warnings and errors each have their own colour.
Hide a level or type to filter when things get busy. If you scroll up to read something, the log stops jumping away, and it follows again when you return to the bottom.
When to use it
Use it for debugging agents, build logs and anything long-running.
Pair it with a summary for non-technical readers. Raw logs aren't for everyone.
Installation
Add the Live Run Console component to your project with the shadcn CLI. It lands in components/live-run-console.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/live-run-consoleProps
<LiveRunConsole /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Run 482" |
| subtitle | string | "Sift, sorting refund tickets" |
| lines Written out one at a time, then repeated. | { level: LogLevel; text: string }[] | DEFAULT_LINES |
| lineMs Milliseconds between lines. | number | 900 |
| startAt Seconds past midnight for the first line. | number | 50531 |
| maxLines How many lines to keep. | number | 200 |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Run 482"
- subtitlestringDefault: "Sift, sorting refund tickets"
- lines
Written out one at a time, then repeated.
{ level: LogLevel; text: string }[]Default: DEFAULT_LINES - lineMs
Milliseconds between lines.
numberDefault: 900 - startAt
Seconds past midnight for the first line.
numberDefault: 50531 - maxLines
How many lines to keep.
numberDefault: 200
Live Run Console FAQ
- How do I stream real lines?
- Pass your lines as they arrive. The demo repeats the list on a timer.
- Why did it stop scrolling?
- You scrolled up to read. Press Follow or scroll to the bottom to carry on.
- Does it keep every line?
- It keeps the last maxLines, which is 200 by default.
- What about reduced motion?
- Lines don't stream by themselves, and everything else still works.
