[richshaw]

Part of #570, on top of the questions stack (#572 → #573 → #575 → #576 → #577). It's based on #577's branch.

Merge with #576 and #577, so the questions never ship with the old transition.

The problem

When Magic Compose answered with questions, the screen jumped:

• The waiting screen promised a draft. It showed draft steps ("Drafting a title… Generating slots") and empty title, blurb and slot placeholders. The questions then arrived as an interruption.
• The layout changed. The two-column frame (steps on the left, a live panel on the right) became a narrow single column. "You wrote" moved from the panel's top to a thin line under a new heading.
• It was a hard cut, with no motion.

The owner found it jarring while tophatting #577.

On phones, two more things:

• ← Back sat between the steps and the panel, indented.
• The empty "Draft" step circle was too faint. It used surface-sunk (#eef1f5, 1.13:1 on white), which the design system keeps for borders and dividers, and its label was faded to 60%.

The fix

One frame for the whole AI round. The waiting screen, the questions and drafting from the answers now share the waiting screen's frame.

• "A few details" is a step. It sits between "Reading your description" and "Drafting a title". When the questions arrive, reading gets its tick and "A few details" is current, with a still dot rather than a spinner, since it waits on the organizer.
• The left column changes its words, not its shape. The heading becomes "A few details first", with the existing line "Pick what fits…". Cancel's place holds ← Back.
• The panel stays put. Its header reads "Your answers", and "You wrote" stays where it was. The questions rise in where the placeholders were, then the footer.
• Drafting from the answers stays in the frame. Draft my signup brings back the "Drafting from" card in the same panel. The steps show reading and "A few details" done, with the spinner on "Drafting a title".
• Motion is three Tailwind animations (rise, fade-in, grow-in), each 240–320ms, switched off under prefers-reduced-motion alongside the existing ones. The heading still takes focus.
• Phone.
  • ← Back is first in the page and sits top left, flush with the content, as Show Magic Compose's questions, and say what a draft needs #576's board had it. On wider screens it moves under the steps.
  • The steps shrink to one line ("✓ Read · ◉ A few details · ○ Draft"), so the first question starts on the first screen.
  • Drafting from the answers keeps that line, and opens at the top rather than where the button was.
• Contrast. Steps still to come get an ink-soft outline (3.09:1, enough for a graphic) and an ink-muted label (5.97:1). This is in the shared step list, so the existing drafting screen's faint steps are fixed too: axe flagged them at 1.99:1 on main.
• aria-current="step" marks the current step, and both step lists are named "Progress".

Already fixed in the stack. The #576 tophat findings that touch this screen (the message out of sight on a phone, focus after Back) were fixed in #576 itself while this PR was open. This PR merges them in and keeps the stack's versions: a refused Draft my signup scrolls to and focuses its message, now at the top of the panel, and Back focuses the description.

Code.

• Steps.tsx holds the shared frame, the draft steps, the step list and the sparkle.
• StepLine.tsx holds the phone's one-line progress and the "here" dot. Only the questions and drafting from their answers use them, so they load with the questions. The drafting screen imports StepLine lazily.

Where it departs from the boards

On desktop, the questions now sit in the drafting frame's right-hand panel, not in the canvas's single-column board. The panel is about 690px wide, so the 680px questions card fits as it was. The questions, their order and their copy are unchanged.

Your call

/app/signups/new's budget goes from 115 to 116 kB. It measures 115.3 kB; #577's head measures 114.9 kB.

• Why it grew: Steps.tsx is shared by the page and by the lazily loaded questions, so webpack can't merge it into the page's own module. That costs about 0.2 kB on top of the new behaviour.
• What I tried: moving the phone line and the "here" dot into the lazy chunk saved about 0.1 kB. The rest is the shared step list with aria-current and the scroll to the top.
• The alternative is to drop one of those.

Tests

• Questions.test.tsx: the questions show "A few details" as the current step, and Back comes before the heading in the page. The stack's own tests cover the message scroll and the focus after Back.
• Drafting.test.tsx:
  • after the questions, "A few details" is done and "Drafting a title" is current, and the screen scrolls to the top;
  • a description that drafts at once keeps the steps it always had.
• Checks: after merging Ask a few questions when a Magic Compose description doesn't say what people sign up for #577's latest, pnpm lint && pnpm typecheck && pnpm knip && pnpm test (1990) pass, and so does pnpm build && pnpm budgets.
• In the browser: checked against Gemini Flash and a canned questions reply. Reading → questions → drafting from the answers on desktop (1280×900) and phone (390×844), with focus on the heading and no console errors.

🤖 Generated with Claude Code

---

Generated by Claude Code

[richshaw]

Taking this one on as part of the stack. I ran /code-review on it and pushed the fixes in 64fb51a:

• The title stalled after the questions. The steps showed the title as under way but still spent reading's 700ms first, so the title sat still for 1.4s. The step timer now starts at the title, and a test checks that drafting after the questions finishes 700ms sooner.
• The "A few details" row could clip. Its grow-in animation kept the 52px height cap after it ended, with overflow hidden, so larger text could be cut off. It now fills backwards only.
• Smaller fixes: the "You wrote" box's one-line variant had no callers left, so it's gone. A comment still said the error shows above the card. A test's scrollTo spy could leak into the next test on failure.

Left as is:

• Back comes first for the keyboard but is drawn under the steps on desktop. That's the design, and the order still makes sense: Shift+Tab from the heading reaches Back.
• The phone's step line has no fallback while it loads. It's in the same chunk as the questions, which have already loaded by then.
• The two step lists stay separate. They differ in which step is current, so a shared builder would need a mode switch for a few lines' saving.

Your call on the budget: I'm keeping 115 → 116 kB. With my fixes, /app/signups/new measures 115.3 kB in a clean build, so it needs the raise, and the description gives the reason.

Re-checked on desktop (1280×900) and phone (390×844) against a fake AI:

• The questions arrive as the current step, with focus on the heading.
• Back sits under the steps on desktop and top left on a phone.
• Drafting from the answers starts at the top, with the title as the current step.
• No console errors.

pnpm lint && pnpm typecheck && pnpm knip && pnpm test (1991) and pnpm build && pnpm budgets pass.

---

Generated by Claude Code

[richshaw]

A second, independent tophat of 64fb51a: desktop 1280×900, 768px wide and phone 390×844, against a fake AI, with larger text up to 200%.

Works as described:

• reading, then the questions, then drafting from the answers, all in one frame, and step states marked with aria-current;
• focus on the heading, Back's place, the "Your answers" panel;
• animations off under reduced motion;
• the phone's one-line steps, with the drafting screen opening at the top;
• axe clean on all three screens at both sizes (the steps still to come failed contrast before this PR);
• the error paths (a page check, asked again, a refusal, a 429), Cancel and Back;
• a full description still drafting with the old steps;
• /app/signups/new at 115.3 kB.

Fixed in 6153bd5:

• The When control didn't fit the narrower panel. One day / Several days / Not decided never wrapped. At 768px it ran 14px past the panel's edge, and at large text "Not decided" was cut off (on a phone it already overlapped from 125%, which comes from Show Magic Compose's questions, and say what a draft needs #576). The choices now wrap onto more rows, whole, and never break mid-word. On a phone the columns are sized in rem, so normal text keeps one row and large text stacks them. I measured all seven sizes: none run past the panel or overlap.
• The "One left blank" badge ran past the Drafting from card at 200% text. The header now wraps.
• The "A few details" row was clipped while it grew in at large text, because the height cap was 52px. It's now 3.5rem.

Left as is:

• Back's keyboard order on desktop (as above). This tophat flagged it too. If you'd rather Back sat at the top on desktop as well, it's a one-class change.
• Older than the stack: focus drops to the page after Draft my signup, as on main, and the sparkle's ping, the spinner and the grey placeholder pulse still animate under reduced motion.

pnpm lint && pnpm typecheck && pnpm knip && pnpm test (1991) and pnpm build && pnpm budgets pass.

---

Generated by Claude Code