Agent pane: reply footer at Claude's 24 pitch; Copy and Read aloud in Claude's shapes

Merged
TE
2d ago
+17-11

Leo-ask: ask-10566194a7

Leo, comparing our reply footer with Claude Code desktop's: "compare ours to claude code's even on this bit 😞 spaing bad symbol shape bad"

Before this, a reply's Copy, Read aloud and More sat 28 apart; Claude Code desktop's buttons sit 24 apart. Our Copy glyph was two small, very round squares with the front one bottom right; our Read aloud was a small cone with two waves.

  • Spacing: the reply footer's buttons are now Claude's 24 squares, still touching, so the pitch is 24 (--cv-footer-button). The footer keeps its 32 line, so row heights and the virtual list's estimates don't change, and the first glyph still lands on the prose edge (its overhang is derived from the button).
  • Copy: Claude's shape. The front square sits top left and is whole; the square behind it sits lower right with its hidden corner left out. A 1.5 radius and 12 of ink in the 16 box.
  • Read aloud: Claude's shape. A short box, a cone the full 12 of ink tall, and one shallow wave.
  • FOOTER in transcriptSpacing.ts (the transcript-spacing table test's expectation) moves to 24/24.

The 28 came in with #32902. Spec: design/transcript-spacing.md "Reply footer" (its Claude column already gives 24 and pitch 24); the spec row is updated in a leo-workspace PR.

Risk: CSS and SVG paths only. Copy's glyph changes everywhere it's used (code blocks, tables, prompts), which is the same shape fix.

Agent session: agent session

🤖 Generated with Claude Code

Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.

Summary by cubic

Aligns the agent pane's reply footer with Claude Code desktop's spacing and icon shapes.

  • Buttons now sit at Claude's 24px pitch instead of 28px; the footer row height stays 32 so layout estimates are unchanged.
  • Copy and Read aloud glyphs are redrawn in Claude's shapes: the Copy icon's front square moves top left, and Read aloud gains a shallow single wave.
  • Updates the FOOTER spacing constant to 24/24.

Side effects

  • Copy's glyph changes everywhere it's used (code blocks, tables, prompts); the same shape correction applies there.
  • CSS and SVG paths only — no behavioral changes.