Terminal agent sessionPro
A terminal coding agent session drawn in HTML for docs and launch videos: the prompt, tool lines with results under an elbow, inline diffs, the plan as a checklist, approval prompts and the turning star status line.
On this page
ProA flaky retry test in a payouts service, found and fixed in one turn: search, read, plan, two diffs and a test run, played back in real time.
Installation
Usage
import { CliAgentReplica } from "@/components/ui/chatcn/pro/cli-agent-replica"
<CliAgentReplica title="skiff" cwd="~/code/harbor-ledger" script={steps} />Render a session from lines, or play a script of timed steps. A step adds a line or, when its id matches an earlier one, replaces it, so a tool can go from running to done. Text stays sharp at any zoom and copies as plain text, which a recording never does.
Examples
States
ProWaiting on approval, a failed run with folded output, working, a new session, and the plain variant with long lines.
Props
| Prop | Type | Notes |
|---|---|---|
lines | CliLine[] | prompt, text, tool, diff, todo, approval, notice |
activity | { label, elapsedMs, tokens } | The status line |
script, autoPlay, loop, speed, onEnd | Timed playback | |
title, version, cwd, model, welcome | The welcome box and window | |
placeholder, hint | placeholder={null} hides the input box | |
variant | "window" | "plain" | Default window |
fold | number | Result lines before +N lines. Default 4 |
height | number | string |
Keyboard
Pause, Replay, Copy and +N lines are buttons. With a fixed height, the session scrolls from the keyboard.
Accessibility
- The session is a log with live updates off; it announces once when a played session finishes. Tool status, diff lines and plan items read in words.
- Loops expose Pause. The session stays left to right on right to left pages, like a real terminal.
Motion
- Lines append with no per character effects. The star turns through six glyphs at 120 ms in a fixed cell, and the label shimmers.
- Under reduced motion the finished session shows at once and the star holds still.