Agent transcript: derive paragraph spacing from shared grid token

Merged
TE
2d ago
+199-4

Leo ask: shared agent-chat density and spacing should follow the measured ChatGPT/Claude references while preserving our colors, glass and art.

The Markdown stack previously had a separate 14px paragraph fallback even though its flex stack is governed by the scaled gap-inner transcript token. This pass makes paragraph and display-math spacing use one shared token, preserving the existing settled 12px inner gap and interface scaling. It adds a real gallery with before, chosen and comparison arms and a browser invariant across compact/comfortable density, light/dark themes and interface scales 1/1.25.

Reference: chatgpt/live/status-working-thinking-and-tool-calls; measurements: /home/cmux/Projects/scratch/chatgpt-parity/chatgpt-style-measurements.md (private). Existing settled footer and WORKED changes from #34678 and #34607 are retained.

After adoption (review fixes)

  • A page's own token wins. .cv-md no longer sets --cv-para-after; paragraphs fall back to --grid-gap-inner only when no ancestor sets it, so Home Channels keeps its 4px.
  • Where the token applies. Top-level transcript blocks have no margins (the stack's gap spaces them), so the token reaches nested content only, such as a list item's paragraphs. The gallery reply gains a list item with a paragraph, display math and more text, and the play sets the token through a stylesheet rule so a re-render keeps it.
  • Paragraph to math is one grid gap. Stacked margins collapse, so grid-gap āˆ’ token left a 4px token drawing an 8px seam. The paragraph now drops its margin before math (as before a list) and the math carries --grid-gap-inner.

Tests

test/paragraph-spacing-token.test.ts (density Ɨ light/dark Ɨ scale 1/1.25 Ɨ before/shared/roomy): the nested paragraph's margin is the token (14, the grid gap, 16), the paragraph-to-math seam drawn from the boxes is one grid gap, and with 4px set above the transcript the paragraph takes 4px while the seam stays one gap. It waits for the gaps to settle instead of reading the first frame after ready, and sets the 120 s suite timeout.

Observed / Not run

  • Ran locally: the test's assertions through a Playwright probe of the gallery frame, 24/24 pass. Red/green: with the previous head's CSS the inherited-token case fails (seam 8px, paragraph 12px under the c5c4a46 CSS); at the head all pass. bun run check passes.
  • Not run: the test file itself locally (its gallery warm-up does not start on this machine); CI runs it.

Agent session: agent session

šŸ¤– Generated with Claude Code