shadcn.io is not affiliated with official shadcn/ui
Agent Terminal Output AI Block for React Aria
A dark terminal band of 24 typed lines with commands, output, warnings and errors, filtered by level with counted toggles and a text field, plus a command line that answers help, clear, tests and build.
Installation
Overview
Let people read what an agent did in its shell, with this terminal viewer for React with React Aria. Shellbrook, an agent shell viewer, draws a toolbar over a terminal band that stays dark in either theme, as a terminal does. The band is a log of 24 typed lines: commands after a dollar sign, plain output, warnings and errors, each marked by a glyph and a weight rather than a color. A Toggle Group filters by level with a count on each (none pressed shows every level), an Input narrows the lines to the ones that contain your words, Copy Button copies the whole log and Clear empties it, then offers Restore. A command line at the foot answers four typed commands, and the summary ("4 warnings, 1 error") is counted from the lines on screen. For build monitors, agent run viewers and any tool that shows a shell.
FAQ
What stays in the page, and how do I make it real?
All of it. The 24 lines and the output of help, tests and build are typed in the file; typing a command adds your command and its typed output to the log in the browser, and nothing is executed. Anything else prints "command not found". To wire it for real, replace START with lines from your agent run (a kind and a text) and send the typed command to your runner where run handles the form.
How do the level filters and the text field combine?
A line shows when its level is pressed (or no level is pressed) and its text contains what you typed, ignoring case. Commands count as Info. The counts on the toggles are always for the whole log, so they do not change while you type; the line numbers keep the position in the whole log, so a gap shows what is hidden.
Why is the terminal dark in the light theme?
A terminal is dark by nature, so only that band takes the dark theme scope; everything around it follows the page's theme. The levels are not told apart by hue: a command starts with a dollar sign in bold, a warning with an exclamation mark, and an error with an x, bold and underlined. A screen reader hears the level as a hidden word before the line.
How does it work from the keyboard?
The toggles are a group the arrow keys move through, the filter and the command line are labelled fields, and the log is a focusable region you can scroll with the arrow keys. Enter in the command line runs the command. The status line says what changed after every filter and command.