githubnext/chopinPublic

Let's compose rich plans together

Redesign research request card and composer #216

MergedMaggieAppletonmerged 6 commits intomainfromrefs/pull/216/head
  1. 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) | | --- | --- | | ![Research states before](https://github.com/githubnext/chopin/blob/design-pr-assets/pr-216/before-research.png?raw=true) | ![Research states after](https://github.com/githubnext/chopin/blob/design-pr-assets/pr-216/after-research.png?raw=true) |

    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)

  2. MaggieAppletonmerged af66b895814flast month on GitHub

  3. MaggieAppletonclosedlast month on GitHub

  4. MaggieAppletonhead-ref-deletedlast month on GitHub

  5. MaggieAppletonreferenced this in Keep the research composer visible as one surface #355last month on GitHub