Agent chat: the prompt bubble as ChatGPT and Claude draw it (44 one line, 16 sides, 12 radius)

Merged
TE
4d ago
+58-39

Leo, 2026-11-02, on our transcript: "ugh we'll really want to study how chatgpt desktop and claude desktop do their spacing i just feel gross looking at these". Earlier: "didn't i always say we can do it like chatgpt".

What changed

The person's prompt bubble now matches what ChatGPT and Claude both draw (spec: leo-workspace design/transcript-spacing.md, "Prompt bubble"; values in transcriptSpacing.ts BUBBLE):

BeforeAfterchatgpt.comclaude.ai / Claude Code desktop
One line, edge to edge38.75444445
Side padding12161616
Radius101222 (a pill; capsule pills are out)12
  • The block padding is whatever a 44 one-line bubble leaves around our line, (44 - line height) / 2, and never less than the 4 base. It follows the chat display's font settings, so the text stays centred at any size.
  • model.ts estimates the bubble with the same formula, so a row doesn't jump once it draws.
  • The prompt keeps Leo's settled centring: 32 above and below (settled-spacing.json turn-gap). Measured, prompt-to-step is 42.5 (43 ± 1), so the table enforces that row now.
  • Table test (from #31614): BUBBLE and prompt-to-step are no longer pending. Per the review follow-ups on #31614, it now scopes the live line and the waiting group to their own row kinds.
  • Tests that asserted the old padding now read BUBBLE: user-prompt-markdown, rowEstimates and agent-pane-chat-column.

Observed / Not run

  • Table, before: at base f1975e72 the bubble measured oneLine 38.75, sides 12, radius 10.
  • Table, after: on this branch, before the rebase, it measured 44, 16 and 12 (fleet, light and dark).
  • Other tests: agent-pane-long-prompt, queued-user-footer and user-prompt-markdown pass on this branch.
  • Failing the same way on base (classifier to follow):
    • rowEstimates: "a steer the agent has not read is as tall as a read one", which comes from #31683 and is fixed by open #31682;
    • agent-pane-chat-column: "share one column";
    • TurnFooter, suggested-tasks, transcript-spacing-reference and transcript-row-alignment, the #27580 reds that #31477 covers.
  • Not run: the full webviews suite. CI runs it.

Changelog

Changed: The prompt bubble in agent chat matches ChatGPT and Claude: 44px for one line, 16px at the sides, a 12px radius.

Agent session: agent session

🤖 Generated with Claude Code


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


Summary by cubic

Makes the agent chat prompt bubble match how ChatGPT and Claude draw it: one line is 44px tall, sides are 16px, and the radius is 12px (was 38.75, 12, and 10). Vertical padding is now derived from the line height, (44 - line) / 2, so the text stays centred at any chat font size; the estimator in model.ts uses the same formula so a row doesn't jump once drawn.

  • prompt-to-step spacing is now enforced at 43 (was pending at 51); the prompt keeps its settled 32px above and below.
  • Tests that asserted the old padding now read BUBBLE from transcriptSpacing.ts, and the spacing table test scopes the live line and waiting group to their own row kinds; declarations the change left unused are dropped.
  • The scrollbar test now takes the first row whose bottom reaches the viewport's middle, since the middle can fall in a gap between rows with the taller bubble.