cmux-next agent pane: Codex Markdown, code blocks and prompt bubbles

Merged
TE
1mo ago
+2070-216

Part of the cmux-next parity work listed in #16174 (comment). Stacked on #16598 (compare harness). Builds on the four transcript fixes (#16591, #16592, #16593, #16594), now on feat-cmux-next.

Problem

The pane drew assistant replies with a hand-rolled Markdown renderer: flat headings, raw pipe tables, [ ] for task items, lists inside quotes as source, plain <pre> code, a tinted bubble for prompts, and a 760px column. Lawrence's verdict was that it looks off next to Codex.

Change

  • Ports codex-atlas-clone's transcript Markdown (src/conversation/Markdown.tsx, Math.tsx, mathDelimiters.ts, icons.tsx, the Markdown part of conversation.css) into webviews/src/agent-session/acpmux/conversation/. Same DOM and metrics as the clone, which is checked pixel by pixel against native Codex captures: headings, nested ordered and bullet lists with Codex's bullets, task checkboxes, quotes, rules, aligned tables, inline code, link marks, inline and display math.
  • Fenced code is the Codex card (language label, wrap and copy marks) over a Pierre File with the pane's existing syntax theme. Languages the bundle doesn't ship draw as plain text.
  • A prompt draws as typed in a right-aligned bubble, not as Markdown, as Codex does.
  • No literal colors. Each Codex color is the theme foreground at a fixed strength over transparent, or a theme text token (--agent-text, --agent-muted, --agent-soft). The strengths are measured from Codex's #f8f8f3 on #272823, so the default dark theme lands near Codex and other themes keep their cast. Links are the muted foreground, not an accent.
  • Type: Codex's stack and sizes exactly, per Leo: system-ui at 14px on 22.75px lines with 0.045px tracking for the answer, the prompt bubble and the transcript's rows; headings 21, 17.5, 15.75 and 14px in weight 600; inline code 13px in ui-monospace, "SF Mono", Menlo, monospace; tables 12.25px on 23px; the code card header 14px. This replaces the old 13px -apple-system, "Helvetica Neue" text. The column is 720px with a 26.5px minimum gutter (was 760px and 18px), at the taste bar's upper bound where Codex uses 736px.
  • Code cards keep one Pierre File while a fence streams, follow a theme switch, and their copy and wrap buttons work.
  • Links keep the pane's safeHref rule: anything but http(s) draws as text.

Fixes three gaps of the old renderer that cc-next-codex-parity found: a list inside a blockquote drew as raw Markdown, loose list items joined inline, and task items showed [ ].

Tool rows, the "Worked for" line and the turn footer come in the next PR.

Numbers (a guide, not a target)

bun run compare:agent-pane specimen-complete: 2.771% before, 2.324% at head with Codex's type. The background and header are cc-pane-chrome's.

Verification

  • bun test src/agent-session/acpmux: 117 pass. New conversation/markdown.test.ts (atlas cases, the three gaps, safe links, the specimen's block types, and the inputs that used to stall the parser); the transcript tests now assert the ported DOM for nested and numbered lists and the prompt bubble.
  • bun run typecheck, bun run lint:ci, build-agent-pane-web.sh --check clean.
  • A fleet capture of the real app follows on this PR.

🤖 Generated with Claude Code