Redesign research request card and composer #216
- MA
Redesigns the inline research request card and its composer so every stage shares one calm anatomy and progress feels live rather than static.
## Card - One layout for every stage: a status row (pulsing petrol dot while running, a red warning disc on failure, a petrol sparkle disc when ready) above a title that is always the question until the report exists. - Plain stage words: "Waiting to start", "Searching sources", "Reading sources", "Writing report", "Publishing". - A five-step petrol track sits under the card with a white sheen on the current step, plus an "N sources found" count. - Failures show in a contained pale-red callout. Cancel and Retry are outline buttons at the bottom right; the corner × only removes a failed or cancelled request. - Stage changes are pure fades: labels and icons crossfade, and the summary, error, and footer fold open and closed without jumps. Reduced motion is respected.
## Composer - No visible heading. The placeholder is "What should Chopin research?", discard is a standard icon button in the top-right corner, and send sits inside the field at the bottom right. - The card and composer are capped at 450px and shrink on narrow viewports.
## Design system - New `btn-outline` button tier (white, control edge, resting shadow), added to the design audit and `DESIGN.md`.
## Notes - The in-progress source link list is replaced by the "N sources found" count. - The e2e geometry test now asserts the 450px cap and alignment with the prose column instead of full editor width.
## Verification - `bun test`, `bun run types`, and `bun run ci` pass. - `e2e/research-workspace.e2e.ts` and `e2e/research-child-documents.e2e.ts` pass: 5 of 5 on Chromium. - A separate code review found eight issues (a stale swap layer, focus loss, errors being hidden, screen-reader announcements, and others). All are fixed in `b5526196`.
## Screenshots
Captured from the dev-only design audit page at 2x, on `main` and on this branch.
| Before (`main`) | After (this PR) | | --- | --- | |  |  |
Left to right, top to bottom: the composer, then queued, searching, writing, failed, cancelled and ready. In progress, the track sits under the card with a white sheen on the current step.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
MaggieAppletonmerged af66b895814flast month on GitHub
MaggieAppletonhead-ref-deletedlast month on GitHub
MaggieAppletonreferenced this in Keep the research composer visible as one surface #355last month on GitHub