# brainless
> Claude Code, Codex, and Grok interfaces as shadcn components.

Terminal-agent UIs (Claude Code, Codex, Grok) rebuilt as accessible React components, installable via the shadcn registry.

Homepage: https://brainless.swerdlow.dev
Registry: https://brainless.swerdlow.dev/r/registry.json
Namespace: @brainless → https://brainless.swerdlow.dev/r/{name}.json
Components: https://brainless.swerdlow.dev/components
Blocks: https://brainless.swerdlow.dev/blocks

## Install

```bash
bunx shadcn@latest registry add @brainless=https://brainless.swerdlow.dev/r/{name}.json
bunx shadcn@latest add @brainless/claude-session
```

## Components

- [Claude Header](https://brainless.swerdlow.dev/llms/claude-header.txt): Claude Code's welcome box — logo, tips, and model/cwd lines — with the title as a semantic fieldset legend.
- [Claude Message](https://brainless.swerdlow.dev/llms/claude-message.txt): A conversation turn — Claude Code's ❯ chip for the user, plain text for the assistant.
- [Claude Thinking](https://brainless.swerdlow.dev/llms/claude-thinking.txt): The working line — pulsing sparkle, rotating verb, elapsed/interrupt hint — as an aria-live status region.
- [Claude Tool Call](https://brainless.swerdlow.dev/llms/claude-tool-call.txt): The ⏺ / ⎿ tool line as a real, keyboard-operable <details> disclosure.
- [Claude Todo List](https://brainless.swerdlow.dev/llms/claude-todo-list.txt): The Update Todos block as a real list, with state labels and a struck-through done style.
- [Claude Diff](https://brainless.swerdlow.dev/llms/claude-diff.txt): An inline edit hunk with tinted +/- rows, line numbers, and off-screen added/removed labels.
- [Claude Permission](https://brainless.swerdlow.dev/llms/claude-permission.txt): The 'Do you want to proceed?' approval prompt as an arrow-key radiogroup.
- [Claude Slash Menu](https://brainless.swerdlow.dev/llms/claude-slash-menu.txt): Slash-command palette above the real ClaudePrompt composer — type after / to filter, arrow keys to move.
- [Claude Prompt](https://brainless.swerdlow.dev/llms/claude-prompt.txt): The input composer — dual CSS rules around a real text input, effort chips (low ○ / medium ◐ / high ● / xhigh ◉ / max ◈ / ultracode ✦), and shift+tab modes (auto / manual / accept-edits / plan).
- [Codex Header](https://brainless.swerdlow.dev/llms/codex-header.txt): Codex CLI's monochrome launch card with its model / directory rows.
- [Codex Message](https://brainless.swerdlow.dev/llms/codex-message.txt): A Codex conversation turn — bold › user marker or plain assistant text.
- [Codex Exec](https://brainless.swerdlow.dev/llms/codex-exec.txt): A Codex action/exec line with a status dot and expandable output, as a real <details> disclosure.
- [Codex Working](https://brainless.swerdlow.dev/llms/codex-working.txt): Codex's Working line — a • bullet, grayscale shimmer on Working, and live elapsed/interrupt hint, as an aria-live status region.
- [Codex Diff](https://brainless.swerdlow.dev/llms/codex-diff.txt): Codex's full-screen /diff pager — spaced DIFF title bar, unified git hunks, ~ fillers, and quit footer.
- [Codex Permissions](https://brainless.swerdlow.dev/llms/codex-permissions.txt): The /permissions chooser — numbered Default / Auto-review / Full Access options as a real radiogroup.
- [Codex Slash Menu](https://brainless.swerdlow.dev/llms/codex-slash-menu.txt): Slash-command palette under the real CodexPrompt composer — type after / to filter, arrow keys to move.
- [Codex Prompt](https://brainless.swerdlow.dev/llms/codex-prompt.txt): Codex's › text input with warm model / green cwd status line and Plan mode tag (#bb9af7).
- [Grok Header](https://brainless.swerdlow.dev/llms/grok-header.txt): Grok CLI's launch card — the braille mark drawn as a crisp dot-matrix SVG with its resting grayscale-shimmer sweep (reduced-motion aware), build banner, and a start menu of real buttons.
- [Grok Status](https://brainless.swerdlow.dev/llms/grok-status.txt): Top status bar — branch glyph, cwd, context usage (16K / 500K), and optional turn progress (2/3 ✓).
- [Grok Message](https://brainless.swerdlow.dev/llms/grok-message.txt): A Grok conversation turn — the ❯ user marker or plain assistant text, with optional wall-clock timestamp.
- [Grok Event](https://brainless.swerdlow.dev/llms/grok-event.txt): A ◆ diamond event line — Thought, user_prompt_submit, stop — with optional [hooks: N/M] badge.
- [Grok Thought](https://brainless.swerdlow.dev/llms/grok-thought.txt): Completed or streaming thought — ◆ Thought for 0.2s, or a bordered Thinking… body.
- [Grok Thinking](https://brainless.swerdlow.dev/llms/grok-thinking.txt): Grok's idle working line — a braille spinner and rotating verb in amber, as an aria-live status region.
- [Grok Working](https://brainless.swerdlow.dev/llms/grok-working.txt): In-turn status line — Waiting for response… with elapsed, ⇣token count, and [stop].
- [Grok Tool](https://brainless.swerdlow.dev/llms/grok-tool.txt): A Grok action — compact verb+path, or a ┃ ◆ card with [hooks: N].
- [Grok Write](https://brainless.swerdlow.dev/llms/grok-write.txt): Grok's inline write/edit chrome — line-numbered before/after inside a ┃ gutter, with optional hook ✓/✗ lines.
- [Grok Permission](https://brainless.swerdlow.dev/llms/grok-permission.txt): Grok's left-border approval card with (●)/(○) radios and a 1/3:select hint bar.
- [Grok Plan](https://brainless.swerdlow.dev/llms/grok-plan.txt): Grok's plan.md approval card — framed viewer, a/s/c/q actions, Waiting on plan approval, and plan-approval composer.
- [Grok Project Picker](https://brainless.swerdlow.dev/llms/grok-project-picker.txt): Run Grok Build in a project directory? — left-border chooser with recent dirs and a free-text option.
- [Grok Shortcuts](https://brainless.swerdlow.dev/llms/grok-shortcuts.txt): Keyboard Shortcuts modal (Ctrl+x) — nested ◆/› categories with key bindings.
- [Grok Settings](https://brainless.swerdlow.dev/llms/grok-settings.txt): Settings modal (F2) — Appearance / Mouse sections with ▸ rows, on/off values, and nested › pickers.
- [Grok Turn End](https://brainless.swerdlow.dev/llms/grok-turn-end.txt): Post-turn footer — Turn completed in 8.0s.
- [Grok Slash Menu](https://brainless.swerdlow.dev/llms/grok-slash-menu.txt): Slash-command overlay above the real GrokPrompt composer — ❯ active row, type after / to filter.
- [Grok Prompt](https://brainless.swerdlow.dev/llms/grok-prompt.txt): Grok's rounded CSS-border composer with a real text input and model · mode legend (normal / plan / auto / always-approve / plan approval).

## Blocks

- [Claude Session](https://brainless.swerdlow.dev/llms/claude-session.txt): A complete Claude Code screen: header, a full turn (plan, tool calls, diff, approval, working line) and the input composer.
- [Codex Session](https://brainless.swerdlow.dev/llms/codex-session.txt): A complete Codex CLI screen: header, a full turn (messages, exec lines, working) and the › composer.
- [Grok Session](https://brainless.swerdlow.dev/llms/grok-session.txt): A complete Grok CLI screen: status bar, header, and a full turn (events, thought, tools, write, approval, turn end) with the rounded composer.
- [Grok Session Active](https://brainless.swerdlow.dev/llms/grok-session-active.txt): A mid-turn Grok CLI screen: status bar, streaming thought, tool card, write preview, and the working footer with ⇣tokens / [stop].
- [Pied Piper Onboarding](https://brainless.swerdlow.dev/llms/pied-piper-onboarding.txt): An interactive sign-up flow — Pied Piper header, typed assistant lines, thinking between turns, and the Claude composer for name + intent.