Exec

A shell command cell with syntax colors and folded output.

import { CodexExec } from "../components/codex-exec";
import { CodexTerminal } from "../components/codex-terminal";
import {
  CODEX_DEMO_EXEC_STATES,
  CODEX_DEMO_SESSION,
} from "../constants/codex-demo";

export default function CodexExecExample() {
  return (
    <div className="w-full p-6">
      <CodexTerminal title={CODEX_DEMO_SESSION.title}>
        {CODEX_DEMO_EXEC_STATES.map((exec) => (
          <CodexExec
            command={exec.command}
            key={exec.id}
            output={exec.output}
            status={exec.status}
          />
        ))}
      </CodexTerminal>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/codex-exec

CodexExec renders • Ran <command>. The command is colored like Codex does it: programs in blue, flags in pink, quoted strings in green and operators like && and | in teal. The bullet is green for ran, a dim pulse for running and red for failed.

Output hangs under a └. Only the first lines show, followed by + N lines (click to expand). The cell is a shadcn Collapsible, and that line is its trigger.

Prop	Default	Description
`command`		The shell command.
`output`		Optional output, one line per `\n`.
`previewLines`	`3`	Lines shown before the fold.
`status`	`ran`	`ran`, `running` or `failed`.
`open`, `defaultOpen`, `onOpenChange`	`defaultOpen={false}`	Collapsible state for the folded lines.

Used in

Codex

A full recreation of an OpenAI Codex CLI session, from the banner to the pinned prompt.