brand-ui — TerminalPermission

import { TerminalPermission } from "@elabs-ai/components-terminal";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-terminal

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui TerminalPermission component (from @elabs-ai/components-terminal) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look TerminalPermission up before writing code: `npx -y @elabs-ai/components-cli docs TerminalPermission` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-terminal is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-terminal` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-terminal`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Avoid

Importing ApprovalCardOptions/Confirmation or anything from `@elabs-ai/components-ai` — `terminal` and `ai` are layer-2 DAG siblings; the shared model (`ApprovalScope`/`ApprovalOption`/`APPROVAL_SCOPE_DESCRIPTION_KEYS`) lives in `@elabs-ai/components-ui` instead.
Walking `parentElement.children[i]` for roving focus — a real Radix `RadioGroup` owns keyboard navigation, matching the family's fidelity axis.
Naming a vendor product in the deny option's label — the third option declines and redirects the agent using the vendor-free `ApprovalScope` vocabulary, never the upstream product name (#117 acceptance criterion).
Always rendering the reason field — it only reveals, through a real Radix `Collapsible`, once the deny-scoped option is the one selected.

Works with

Contains

TerminalRow
TerminalSurface

Pairs with

TerminalSurface
TerminalRow

Avoid next to

ApprovalCardOptions (that is the chat skin of the same shared approval model, not a row sibling)

Examples

9 live examples

Custom Copy

A caller-supplied title, question and preview — every part is arbitrary content.

No Preview

No preview slot at all — the row simply does not render.

Deny Reveals Reason

Selecting the deny-scoped option reveals a reason field — the person can say what the agent should do instead. Interaction test drives it with the keyboard only, matching the load-bearing accessibility requirement.

Deny Preselected

Pre-selected on mount, via the uncontrolled `defaultValue`.

Keyboard Only

Arrow keys move focus; `Space` commits the focused option — the whole component is operable with no mouse. Committing explicitly with `Space` (rather than relying on Radix's own auto-select-on-arrow-move, whose timing depends on a real focus/click ordering) is the same proven pattern used in `@elabs-ai/components-ai`'s `confirmation.test.tsx`.

Custom Options

A caller can replace the options with entirely different, still vendor-free scopes.

Rail

`rail` passes through to every underlying `TerminalRow`, like any other row.

Boxed

`boxed` merges the title/preview/question rows into ONE frame — they are conceptually a single sentence, not three independent frame-drawing blocks — while the options list keeps its own existing frame below. See the component's module doc, "`boxed` frames the PROMPT as one block, not three" (cross-theme sweep fix).

API

`TerminalPermission`

Prop	Type	Description
`title`	`ReactNode`	@default the localized "Bash command"
`preview`	`ReactNode`	What will actually run — a command string today, a diff hunk tomorrow. Arbitrary content: never typed as a string. Omitted, no preview row renders.
`question`	`ReactNode`	@default the localized "Do you want to proceed?"
`options`	`ApprovalOption[]`	The scoped choices. Defaults to the three verbatim upstream options — "Yes" (`once`), "Yes, and don't ask again this session" (`session`), and the vendor-free decline-and-redirect option (`deny`).
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(id: string) => void`
`onConfirm`	`(option: ApprovalOption, reason?: string) => void`	Fires when an option is chosen — by click or by ANY keyboard move within the radio group (arrow keys/Home/End select immediately, per the native/ARIA radiogroup pattern Radix implements, matching `ApprovalCardOptions` — there is no separate highlight-vs-commit step) — and again on every edit of the reason field while a `deny`-scoped option is selected, so the caller always has the latest pair.
`reason`	`string`	Controlled text for the deny scope's optional "what to do instead" explanation.
`defaultReason`	`string`
`onReasonChange`	`(reason: string) => void`
`reasonPlaceholder`	`string`
`variant`	`TerminalVariant`	Gutter grammar for every row this prompt renders. Omitted, it inherits the surrounding `TerminalSurface`; passed, it overrides it — the same override contract `TerminalRow` itself exposes.

Also accepts: Omit< HTMLAttributes<HTMLDivElement>, "children" | "title" >

`TerminalRow`

variant: marker (default)railboxed

Prop	Type	Description
`variant`	`TerminalVariant`	Gutter grammar. Omitted, the row inherits the surrounding `TerminalSurface`; passed, it overrides it, so a row still renders correctly outside any surface.
`gutter`	`ReactNode`	What sits in the gutter cell — usually one glyph. Decorative by default.
`gutterLabel`	`string`	The meaning the gutter glyph carries, as words. Set it whenever the glyph is not purely ornamental; it is announced and it survives greyscale.
`children`	`ReactNode`

Also accepts: Omit<HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof terminalRowVariants>, "variant">

`TerminalSurface`

Prop	Type	Description
`variant`	`TerminalVariant`	Gutter grammar for every row inside. A row may override it per-row.
`gutter`	`string`	Width of the gutter track, as any CSS length. Written to the local `--terminal-gutter` custom property — deliberately NOT a theme token: it does not vary by theme and no other package needs it. A caller's own `style` still wins over this.
`loading`	`boolean`	`true` while the transcript has no renderable content yet (restoring a past session). Renders layout-shaped skeleton rows through the REAL `TerminalRow`, so the placeholder cannot drift from the grid it stands in for. Never a spinner.
`loadingRows`	`number`	How many skeleton rows to reserve while `loading`.
`loadingLabel`	`string`	Overrides the announced loading label. Defaults to the shared "Loading…".

Also accepts: HTMLAttributes<HTMLDivElement>