Skip to content

Tools & Approvals

Terminal Output

Streaming command output with stdout / stderr lines, exit status, duration, copy and stop.

2 variantsMIT

Preview

$ pnpm test

~/repo/packages/cli

Running· 0ms

Waiting for output…

0 lines

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/terminal-output.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { TerminalOutput, type TerminalRun } from "@/components/ui/terminal-output";

export function CommandOutput({ run }: { run: TerminalRun }) {
  // Append lines as the sandbox streams them:
  // { text: chunk, stream: "stdout" | "stderr" }
  return (
    <TerminalOutput
      data={run}
      onStop={() => sandbox.kill(run.command)}
      onCopy={(text) => analytics.track("terminal_copied", { bytes: text.length })}
    />
  );
}

Props

PropTypeDefaultDescription
data*TerminalRun—The command, its output lines and status. While running, the header counts up on its own.
onStop() => void—Shows a Stop button while the command runs. Kill the process here.
onCopy(text: string) => void—Called with the full output after it is copied to the clipboard.
maxHeightnumber280Height in px after which the output scrolls. Scrolling up pauses auto-follow and shows Jump to latest.
classNamestring—Extra classes for the root section.
type TerminalRun = {
  command: string;
  cwd?: string;
  lines: TerminalLine[];
  status: "running" | "success" | "failed";
  exitCode?: number;
  durationMs?: number; // final duration
};

type TerminalLine = {
  text: string;
  stream?: "stdout" | "stderr" | "info"; // stderr is tinted and marked
};