feat: one composer for New Plan and the agent message box
Dean: "maybe we should just be consistent with styling for the main New Plan composer and the agent message composer." Base is coding-agents.
What changes
One component. AI Elements' PromptInput (ai-elements/prompt-input.tsx) is Luke's composer, restyled to the card the New Plan page established, on the vocabulary the rest of the window already draws: the 12px corner and the shadow the menus and the document's cards share (the repository menu opens from this card's own chip, so the two now share a corner), the hairline border brightening to the selected edge on focus, the sidebar ground, the same padding and placeholder colour, and one round submit at the window's control height (30px, 15px glyph), level with the 30px repository chip beside it, with #1930's states (filled with text, dimmed on the raised ground when empty, Stop while the agent runs and the box is empty). The textarea has no fixed line count: it starts at one line and grows to about eight.
Dean asked mid-review for a smaller corner and for anything else the app already draws to be matched; the 22px radius and the 34px button were the New Plan card's own and matched nothing else, so they went.
One variable. The only thing that differs between the two screens is the type, --composer-type, set on the card (COMPOSER_TYPE.DEFAULT 13px, COMPOSER_TYPE.HERO 17px). The field's line and so its least and greatest heights follow from it in em; nothing else is per-screen.
Both screens draw it.
- New Plan keeps its title above, Enter starts (Shift+Enter too, since the name has no second line), the repository chip in the foot's left slot, the picker, and the refusal note under the card.
- The agent box keeps steer-only send,
clientKey, Retry under the same key, and Stop, and puts nothing in the left slot.
Deleted: .plan-compose-card, :focus-within, .plan-compose-name, ::placeholder, .plan-compose-foot, .plan-compose-start, :disabled, and .plan-compose-start svg (67 lines of desktop.css), and the panel's own ArrowUpIcon glyph, which New Plan was the last to draw. The .agent-composer wrapper rule stays, since it is the room around the card on the transcript's inset, not the card. Two theme aliases are added (--color-card, --color-selected-edge) so the utilities read the same tokens the hand-written rules did.
Tests
ai-elements/prompt-input.test.ts(new): the one shared composer test. The field grows from one line with norows, in the type the card's one variable sets, which the hero class raises; the footer holds the owner's slot at its left and the submit at its right; and the stylesheet contract from #1930 (every reset-shaped rule in a layer under the utilities, the glyph a colour apart from its disc in the dim, active, and Stop states, 34px round, one class list, no hover).agent-composer.test.ts: the two stylesheet tests and their helpers are gone (ā183); what stays proves behavior: the send under a fresh key, the one button's states and Stop, Retry under the same key, and the read-back reconciliation.new-plan-form.test.ts: the name field is atextarea, and the start test now presses Enter and Shift+Enter rather than callingrequestSubmit, and a composing Shift+Enter (an input method confirming a candidate) starts nothing: Devin's one finding, fixed with a test that fails without the guard.
Counts
| + | ā | |
|---|---|---|
| Whole PR | 312 | 313 |
| Tests | 222 | 184 |
Where coverage overlaps (the stylesheet contract), the shared test is about 110 lines against the 183 removed; the net on tests is +38 because the shared test adds the auto-grow, size variable, corner, and left slot, and New Plan gains the Enter and composition tests.
Screenshots
Headless Chrome over the real components and the renderer stylesheet (Linux fonts), on pr-assets.
| New Plan, empty | New Plan, with text |
|---|---|
 |  |
| Agent box, empty idle | Agent box, with text | Agent box, running empty |
|---|---|---|
 |  |  |
Verification
./scripts/check.sh exits 0 locally. CI could not verify the Mac: no macOS job runs on a pull request, and Dean waived ./scripts/verify.sh for this work, so the Mac rendering is unverified beyond the headless captures above.
š¤ Generated with Claude Code