Terminal Block

The code-block sibling for command output: the command and its live status in the header, the output carved into a well below. A thread and review element — output arrives as props, not from a live PTY.

bun run test --filter billingDone
$ bun run test --filter billing
✓ webhooks/stripe.test.ts (12 tests) 84ms
✓ webhooks/backfill.test.ts (7 tests) 41ms

Test Files  2 passed (2)
     Tests  19 passed (19)
tsx
import { TerminalBlock } from "@/registry/seam/ui/terminal-block"

const OUTPUT = `$ bun run test --filter billing
✓ webhooks/stripe.test.ts (12 tests) 84ms
✓ webhooks/backfill.test.ts (7 tests) 41ms

Test Files  2 passed (2)
     Tests  19 passed (19)`

export default function TerminalBlockDemo() {
  return (
    <TerminalBlock
      command="bun run test --filter billing"
      status="done"
      className="w-full max-w-md"
    >
      {OUTPUT}
    </TerminalBlock>
  )
}
bunx --bun @seamui/cli@latest add terminal-block

Notes

  • Status is the shared agent-status vocabulary — working shows a pulsing cursor at the output tail (CSS animate-pulse, opacity-only, identical under reduced motion); waiting means the process needs input.
  • The copy key copies copyText (defaulting to string children) with the standard icon crossfade; the output region is keyboard-scrollable like code-block.
  • ANSI handling is deliberately out of scope — pre-process escape codes upstream and pass plain text or your own nodes.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.