ShellOutput

Terminal output as a log: ANSI colors and styles, clickable links, pretty-printed JSON (when the whole output is a JSON object or array and has no ANSI codes), a copy button that strips ANSI codes, and a meta line with exit code (green for 0, red otherwise), duration, timeout and size. Collapsed, it shows the last maxLines lines (12 by default) with a +N more lines hint and a Show all toggle; expanded, the log scrolls up to maxHeight. With live it shows Running, ticks the duration from startedAt, follows new lines, and offers Scroll to latest when the user scrolls up. Empty output shows No output. variant="compact" drops the tinted panel for use inside another card. BashTool renders it for Bash tool parts; use it directly for any other command output. Related helpers: parseAnsiLines, stripAnsi, hasAnsi, splitLinks, formatJsonOutput, tailLines, byteLength, formatBytes, and getBashRunInfo, which reads output and metadata from a Bash tool part.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Finished commands
Live, narrow
API reference
Prop
Type
Required
output
string
Yes
Raw command output, ANSI escapes included
maxLines
number
No
Lines shown from the end while collapsed, `12` by default; `0` shows everything
live
boolean
No
The command is still running: shows a loader instead of the exit code
exitCode
number | null
No
Exit code, green for `0` and red otherwise
durationMs
number
No
How long the command ran, in ms
startedAt
number | Date
No
Moment the command started, shows a ticking duration while `live` and `durationMs` is not set
timeoutMs
number
No
Timeout of the command, in ms
sizeBytes
number
No
Output size in bytes, measured from `output` by default
formatJson
boolean
No
Pretty-prints output that is a JSON object or array, `true` by default
withCopy
boolean
No
Shows the copy button, `true` by default
withMeta
boolean
No
Shows exit code, duration, timeout and size above the log, `true` by default
defaultExpanded
boolean
No
Starts expanded, showing every line in a scrollable log
maxHeight
number | string
No
Maximum height of the expanded log before it scrolls, `400` by default; while `live` it follows new lines until scrolled up
variant
'default' | 'compact'
No
`default` draws the log on a tinted panel, `compact` blends into a parent card
labels
Partial<ShellOutputLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element