Components

Claude Code's welcome box — logo, tips, and model/cwd lines — with the title as a semantic fieldset legend.

A conversation turn — Claude Code's ❯ chip for the user, plain text for the assistant.

The working line — pulsing sparkle, rotating verb, elapsed/interrupt hint — as an aria-live status region.

The ⏺ / ⎿ tool line as a real, keyboard-operable <details> disclosure.

The Update Todos block as a real list, with state labels and a struck-through done style.

An inline edit hunk with tinted +/- rows, line numbers, and off-screen added/removed labels.

8 export function resolveTheme() {
9-removed:   return 'light'
9+added:   const stored = readStored()
10+added:   return stored ?? systemTheme()
11 }

The 'Do you want to proceed?' approval prompt as an arrow-key radiogroup.

Slash-command palette above the real ClaudePrompt composer — type after / to filter, arrow keys to move.

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 CLI's monochrome launch card with its model / directory rows.

A Codex conversation turn — bold › user marker or plain assistant text.

A Codex action/exec line with a status dot and expandable output, as a real <details> disclosure.

pnpm build
✓ compiled successfully

Codex's Working line — a • bullet, grayscale shimmer on Working, and live elapsed/interrupt hint, as an aria-live status region.

Codex's full-screen /diff pager — spaced DIFF title bar, unified git hunks, ~ fillers, and quit footer.

diff --git a/scratch.txt b/scratch.txt
index e382994..401fe17 100644
--- a/scratch.txt
+++ b/scratch.txt
@@ -1 +1 @@
removed: -hello scratch
added: +hello scratch edited
diff --git a/other.txt b/other.txt
new file mode 100644
index 0000000..fa49b07
--- /dev/null
+++ b/other.txt
@@ -0,0 +1 @@
added: +new file
~
~
~
~
~
~
~
~

The /permissions chooser — numbered Default / Auto-review / Full Access options as a real radiogroup.

Slash-command palette under the real CodexPrompt composer — type after / to filter, arrow keys to move.

Codex's › text input with warm model / green cwd status line and Plan mode tag (#bb9af7).

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.

Top status bar — branch glyph, cwd, context usage (16K / 500K), and optional turn progress (2/3 ✓).

A Grok conversation turn — the ❯ user marker or plain assistant text, with optional wall-clock timestamp.

A ◆ diamond event line — Thought, user_prompt_submit, stop — with optional [hooks: N/M] badge.

Completed or streaming thought — ◆ Thought for 0.2s, or a bordered Thinking… body.

Grok's idle working line — a braille spinner and rotating verb in amber, as an aria-live status region.

In-turn status line — Waiting for response… with elapsed, ⇣token count, and [stop].

A Grok action — compact verb+path, or a ┃ ◆ card with [hooks: N].

Grok's inline write/edit chrome — line-numbered before/after inside a ┃ gutter, with optional hook ✓/✗ lines.

Grok's left-border approval card with (●)/(○) radios and a 1/3:select hint bar.

Grok's plan.md approval card — framed viewer, a/s/c/q actions, Waiting on plan approval, and plan-approval composer.

Run Grok Build in a project directory? — left-border chooser with recent dirs and a free-text option.

Keyboard Shortcuts modal (Ctrl+x) — nested ◆/› categories with key bindings.

Settings modal (F2) — Appearance / Mouse sections with ▸ rows, on/off values, and nested › pickers.

Post-turn footer — Turn completed in 8.0s.

Slash-command overlay above the real GrokPrompt composer — ❯ active row, type after / to filter.

Grok's rounded CSS-border composer with a real text input and model · mode legend (normal / plan / auto / always-approve / plan approval).