apps/ui: redesign prompt composer

[youknowriad]

Related issues

• Related to design polish of the AI session view

How AI was used in this PR

Claude (Opus 4.7) drove the redesign end-to-end from a screenshot reference: the composer shell structure, the left icon-button group (attach / slash / mention), the toolbar pills (Local + model), and the primary-accent send/queue circle with its secondary dark stop circle. I reviewed and iterated on the visual result — border radius, padding, shadow depth, button sizing and vertical alignment — and had Claude merge the design on top of the queued-prompts behavior from #3146 during a rebase.

Proposed Changes

Reworks apps/ui/src/components/session-view/composer/index.tsx and style.module.css:

• Single rounded shell (16px radius, layered soft shadow, focus-within accent border) wrapping a borderless textarea and a flex toolbar — replaces the previous bordered textarea + separate button row.
• Left toolbar: small 22×22 square icon buttons for attach (inline paperclip SVG since @wordpress/icons doesn't export one), /, and @. Rendered disabled for now — these are visual placeholders; wiring them up is out of scope for a visual redesign.
• Right toolbar: Local pill (green dot + chevron), Claude Sonnet 4.5 pill (chevron), a dark stop circle (visible only while busy), and a primary accent-blue circular send button that flips its aria-label between "Send" and "Queue" depending on busy. Preserves the queued-prompts behavior introduced in apps/ui, apps/cli: queue follow-up prompts during an active agent turn #3146 where the send button stays enabled during a run so users can stage follow-ups.
• Meta line below the shell: platform-aware keyboard hint (⌘↩ on macOS, Ctrl↩ otherwise) and a "Uses 1 message" indicator.
• Toolbar uses align-items: flex-end so the smaller icon buttons sit at the same baseline as the pills/send circle, balancing the padding visually against the shell edges.

Testing Instructions

• Open a session and confirm the composer renders as a single rounded card with the toolbar laid out as described.
• Type — the send circle lights up (accent blue) and is clickable. Focus the textarea — shell border goes accent and the shadow deepens slightly.
• Start a run. While the agent is working, confirm the stop circle appears to the left of the send circle, the placeholder reads "Queue a follow-up instruction…", and the textarea still accepts input (follow-up prompts queue).
• Resize the window — the shell/meta row stays centered in the 760px column and aligns with the conversation content above.
• Verify on Windows/Linux that the keyboard hint reads "Ctrl↩" instead of "⌘↩".

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?
• Have you verified the change works on macOS, Windows, and Linux?

[wpmobilebot]

📊 Performance Test Results

Comparing 6d6fad5 vs trunk

app-size

Metric	trunk	6d6fad5	Diff	Change
App Size (Mac)	1439.63 MB	1439.63 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	6d6fad5	Diff	Change
load	1864 ms	1944 ms	+80 ms	🔴 4.3%

site-startup

Metric	trunk	6d6fad5	Diff	Change
siteCreation	9126 ms	9137 ms	+11 ms	⚪ 0.0%
siteStartup	4952 ms	4952 ms	0 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)