[Yasuui]

What

Fixes the four verified issues from the design review of the minimal redesign (#7):

1. Contrast. Text that people need to read (attach hint, footer, composer placeholder, worked examples, "Step:" references, evidence filter counts) moves from --faint to --muted. Measured in the browser: footer and attach hint go from 2.34:1 to 4.71:1 in light (dark was 3.70:1), and the placeholder from 2.51:1 to 5.05:1. --faint is now documented as decoration-only.
2. Mobile brief overlay focus. Below 1024px the brief is a dialog (role="dialog", aria-modal). The header and conversation behind it are inert, / no longer focuses the hidden composer, and focus goes back to the composer after Close or Escape. That last step runs in an effect so it fires once inert is lifted, because focusing an inert element silently fails.
3. Touch targets. Under (pointer:coarse), (max-width:640px), the header buttons, sample chips, brief tools, evidence filter, feedback buttons and file-remove button are all 40px or taller. Footer links grow their hit area with a pseudo-element, so the footer stays the same size. Desktop with a mouse keeps the compact sizes.
4. Wait while the brief is written. A "Drafting the brief" status card shows while the report block streams after the reply text, which used to be an 8–10 s gap with no feedback. The demo copy no longer says "the brief on the right", which is wrong on mobile.

Why

Each item was reproduced in the rendered app during the design review: computed contrast ratios, Shift+Tab escaping the overlay to the hidden send button, measured 17–36px targets, and screenshots of the silent wait.

Risk

Low. The changes are CSS plus small UI-state changes in WorkflowChat and BriefCanvas. useSyncExternalStore returns false on the server, so the first render is never modal, which matches the old behaviour. inert needs Safari 15.5+ or Chrome 102+. Copy changes are demo-mode only; the live model prompt already says "canvas".

How it was tested

• npm run lint exits 0.
• npm test (tsc, next build, node tests) passes 53/53. That includes a new test pinning inert, aria-modal, the 40px touch block and the move off --faint, plus updated copy assertions.
• Browser at 390px light: the overlay opens with focus on Close and nothing outside it can take focus (the only exception is Next's dev-tools portal, which is dev-only). Close and Escape return focus to the textarea. Every brief control measures 40px. The drafting card shows during streaming.
• Browser at 1440px dark: side pane, nothing inert, no dialog role, compact controls.

Not verified

• Screen reader announcements of the drafting card and the dialog
• Reduced-motion emulation; the existing global override covers the new card's fade
• Real touch devices

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
workflow-friction-mapper	Ready	Preview	Oct 27, 2026 6:57pm UTC

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-27T18:58:04.600968Z	d0d1556	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.