Hero terminal agentPro

A coding agent hero: a session plays in a terminal once it scrolls into view. Commands land, the agent works its steps, a diff lands and the tests pass.

Markdown

On this page

ProA coding agent session plays in a terminal: commands, steps, a diff lands and the tests pass. Skip to the end or replay.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/hero-terminal-agent

Usage

tsx

import { HeroTerminalAgent } from "@/components/ui/chatcn/pro/hero-terminal-agent"

<HeroTerminalAgent title="Hand it the flaky test." session={session} install="npm i -g burrow" />

The session is a list of beats, each with an optional delay before it: command (after the prompt), step (spins while it is the latest line), note (the agent's words, in the sans face), diff (a unified patch, drawn by the free diff viewer), output (dimmed program output) and pass or fail. End on a failure when that is the honest story.

It starts when the terminal scrolls into view and only advances on screen in a visible tab. The button under it reads Skip to end while it plays and Replay session once it finishes. install adds a copyable install line under the paragraph.

Every section is full width with a 16 px gutter on phones and 32 px from 768 px, content capped at 1200 px. Layout follows the section's own width through a container query, not the viewport, so a section in a narrow column lays out like a phone.

Examples

Failure and manual start

A run that ends on an honest failure at double speed, and a session that waits for Play.

ProA run that ends on an honest failure at double speed, and a session that waits for Play.

Props

Prop	Type	Notes
`title`	`ReactNode`	Required. One idea; it balances over two or three lines
`description`	`ReactNode`	The paragraph under or beside the headline
`actions`	`ReactNode`	Buttons or links under the paragraph
`session`	`TerminalAgentBeat[]`	Required. The beats, in order
`windowTitle`	`ReactNode`	Title bar, for example `~/code/relay`
`prompt`	`string`	Before commands. Default `$`
`install`	`string`	A copyable install line
`speed`	`number`	Playback rate. Default 1
`autoplay`	`boolean`	Start on view. Default true
`height`	`number \| string`	Terminal content height. Default 460
`playLabel`, `skipLabel`, `replayLabel`	`string`	Default "Play session", "Skip to end", "Replay session"
`doneAnnouncement`, `onDone`		Said and called when the last beat lands

Keyboard

Key	Action
`Tab`	Reaches the copy button and the playback button
`Enter` / `Space`	Plays, skips to the end or replays

Accessibility

The section is labelled by its headline. Heroes use an h1, other sections an h2; render one hero per page.
The session is a role=log named Agent session; a polite live region says Session finished once.
Pass and fail lines carry the words Passed and Failed for screen readers, not only the green and red marks.

Motion

New lines rise 4 px into place over 200 ms. The log follows the newest line unless the visitor scrolled up to read.
Under reduced motion the finished session shows at once.