Composer

The Codex prompt band with its status line and shortcut hints.

import { CodexComposer } from "../components/codex-composer";
import { CodexHeader } from "../components/codex-header";
import { CodexTerminal } from "../components/codex-terminal";
import { CODEX_DEMO_SESSION } from "../constants/codex-demo";

export default function CodexComposerExample() {
  const { composer, header, title } = CODEX_DEMO_SESSION;

  return (
    <div className="w-full p-6">
      <CodexTerminal
        footer={
          <CodexComposer
            cwd={header.cwd}
            effort={composer.effort}
            model={composer.model}
            placeholder={composer.placeholder}
            task={composer.task}
            warnings={composer.warnings}
          />
        }
        title={title}
      >
        <CodexHeader {...header} />
      </CodexTerminal>
    </div>
  );
}

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

CodexComposer is a shadcn InputGroup on a full-width band with a bold ›. While it is empty, a pink block cursor sits on the first letter of the placeholder. Under it, the status line shows the model and effort in yellow, the directory in green and the current task, then ← for agents · ? for shortcuts with the keys in shadcn Kbd.

Every other prop goes to the input, so use value and onChange for a controlled prompt or defaultValue for an uncontrolled one.

Prop	Default	Description
`placeholder`	`Ask Codex to do anything`	The input placeholder.
`model`	`gpt-6.1-codex`	Model name in the status line.
`effort`		Reasoning effort after the model, like `low`.
`cwd`	`~/acme/web`	Working directory in the status line.
`task`		Current task after the directory.
`warnings`		Shows `⚠ N warnings · f2 to view` on the right.
`context`		Right-hand text, like `88% context left`, when there are no warnings.
`onSend`		Called with the trimmed text on Enter. An uncontrolled composer clears afterwards. With `value`, clear it yourself in `onSend`.
`busy`	`false`	A turn is running. Enter does not send and Escape calls `onStop`.
`onStop`		Called on Escape while `busy`.

Used in

Codex

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