Terminal
A shell command the agent ran, as one line in its reply: the last few lines tail underneath while it runs, then the result, with the full output when opened.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/terminal-default.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/terminal-default.json
Usage & API
Example
import { Terminal } from "@/components/ai/terminal-default"
<Terminal
command="…"
lines={[]}
exitCode={null}
/>Props Terminal
| Prop | Type & description | Required |
|---|---|---|
command | string | Required |
lines | TerminalLine[] | Required |
exitCode | number | nullnull while the command is still running. | Required |
duration | numberMilliseconds, shown once the command finishes. | Optional |
summary | stringOne line that sums up the output, e.g. "35 passed, 4 skipped". Falls back to the last line. | Optional |
tail | numberHow many trailing lines to show while it runs. | Optional |
defaultOpen | boolean | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The header button shows a dot, the word Running or Ran, the command, and a chevron. The dot pulses while exitCode is null, turns red when the code is non-zero, and is green on success. A hover control copies command, and its label flips to Copied after a successful write. Collapsed, a live log region tails the last tail non-empty lines while the command runs, then replaces them with summary or the last non-empty line, in the error color if the command failed. Open, the panel shows a dollar prompt and the command, then every line in its tone, including blank lines, and a blinking caret while exitCode is still null. duration is milliseconds, shown in the header only after success, as milliseconds under one second and as seconds otherwise. defaultOpen starts the panel open.
Example
import { TerminalSession } from "@/components/ai/terminal-session"
<TerminalSession
runs={[]}
/>Props TerminalSession
| Prop | Type & description | Required |
|---|---|---|
runs | CommandRun[] | Required |
Dependencies
- React
- Tailwind CSS
- lucide-react
Implementation notes
Terminal session takes runs. The header reads Commands and the number of runs. Each run is a button: a spinner while status is running, a cross when status is error, a check when status is success, then the command, then the word running or the duration string. Opening a run shows output in a pre. Opening another run closes the first. There is no tail, no tone per line, no copy button and no exit code. A running run can still have partial output. You update that string as the process prints.
Choosing a layout
Use it when the thing the agent did was a command, and the reader may want the output without wanting a tool-call JSON card. Tests, installs, builds and git commands are the usual case. The inline command belongs in the reply next to the sentence that says why it ran. Keep it collapsed for a passing suite, where summary can be a line such as how many tests passed, and open it when a failure needs the log. Copy copies the command only, not the output, which is what someone pastes into their own shell.
Use the history when the agent ran several commands in a row and each one is short enough that a separate streaming tail would be noise. A tool call line can say Ran and the command, but it will not show output, a prompt or an exit code. File edit is the wrong shape when the result is a test log rather than a diff. Do not use a terminal view as the approval step before a dangerous command. Tool approval is the pause, with the command in a prompt and the decision still ahead.
What should exitCode be while the command is still printing?
null. That is the running state: the header says Running, the dot pulses, duration is hidden, and the collapsed body tails output. Pass a number when the process exits. Zero shows duration if you provided it. Any other number shows exit and that code, and paints the collapsed summary as a failure.
Which text is used when summary is omitted?
The last line whose text is not blank, trimmed. Lines that are only whitespace are skipped for that fallback and also for the live tail. They are still rendered in the opened transcript, so a blank line in the log stays a blank line once the row is open.