Agent chat: the prompt bubble as ChatGPT and Claude draw it (44 one line, 16 sides, 12 radius)
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):
| Before | After | chatgpt.com | claude.ai / Claude Code desktop | |
|---|---|---|---|---|
| One line, edge to edge | 38.75 | 44 | 44 | 45 |
| Side padding | 12 | 16 | 16 | 16 |
| Radius | 10 | 12 | 22 (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.tsestimates 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.jsonturn-gap). Measured,prompt-to-stepis 42.5 (43 ± 1), so the table enforces that row now. - Table test (from #31614):
BUBBLEandprompt-to-stepare 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,rowEstimatesandagent-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-footeranduser-prompt-markdownpass on this branch. - Failing the same way on base (classifier to follow):
- 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](https://pr-comments-assets.blacksmith.sh/codesmith/view-with-codesmith-dark-v3-3x.png)
![Autofix with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/autofix-with-codesmith-dark-3x.png)
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-stepspacing 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
BUBBLEfromtranscriptSpacing.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.