Composer

The OpenCode prompt with the agent line and the status row under it.

import { OpencodeComposer } from "../components/opencode-composer";
import { OpencodeWindow } from "../components/opencode-window";
import { OPENCODE_DEMO_SESSION } from "../constants/opencode-demo";

export default function OpencodeComposerExample() {
  const session = OPENCODE_DEMO_SESSION;

  return (
    <div className="w-full p-6">
      <OpencodeWindow className="gap-[1lh] px-[2ch] pt-[1lh] pb-[0.5lh]">
        <OpencodeComposer
          busy
          context={session.context}
          effort={session.effort}
          model={session.model}
          provider={session.provider}
        />
        <OpencodeComposer
          cwd={session.cwd}
          effort={session.effort}
          model={session.model}
          provider={session.provider}
        />
      </OpencodeWindow>
    </div>
  );
}

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

OpencodeComposer is a shadcn InputGroup on a raised panel with a blue rule. Under the input sits the agent line: the agent in blue, the model, the provider muted and the reasoning effort in bold orange. It passes every other prop to the InputGroupInput, so use value and onChange for a controlled prompt or defaultValue for an uncontrolled one.

The status row below shows the working directory while idle. With busy it shows the blue scanner and esc interrupt instead. On the right it shows the context usage once there is some, otherwise the tab agents hint, then ctrl+p commands. The scanner holds still when the user prefers reduced motion.

Prop	Default	Description
`agent`	`Build`	Shown in blue.
`model`	`Writer 0.1`	The model name.
`provider`	`Notra`	Shown muted after the model.
`effort`	`high`	Shown in bold orange.
`busy`	`false`	Swaps the cwd for the scanner and `esc interrupt`. Enter does not send and Escape calls `onStop`.
`onSend`		Called with the trimmed text on Enter. An uncontrolled composer clears afterwards. With `value`, clear it yourself in `onSend`.
`onStop`		Called on Escape while `busy`.
`cwd`		The working directory on the idle status row.
`context`		Context usage, like `63.4K (6%)`.
`placeholder`	`Ask anything... "Draft this week's changelog"`	The input placeholder.
`className`, `inputClassName`		Style the wrapper and the input.

Used in

OpenCode

A recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.