Design review: MFA step-up & contact verification (mobile, provider-neutral)

[izzywdev]

Design review requested — MFA step-up + email/phone verification UI

Net-new auth screens for the provider-agnostic Security API (contract #243, de-vendor PR #250). Provider-neutral: no vendor named anywhere on screen.

Frames (375px — Android TWA width)

Static mockup (fuse-seam tokens, dark theme):
https://claude.ai/code/artifact/cb633501-e3c0-444b-9c57-bae524217187

1. MFA required — choose factor — authenticator / email / SMS, factor rows compose the card + radio pattern.
2. Enter code — 6-cell OTP entry, expiry countdown, resend cooldown, inline error (no navigation on wrong code).
3. Confirm your contact — post-signup email verification; the phone screen reuses the identical OTP primitive.
4. Security status (profile) — 2FA on/off, factor + contact verification chips (Active / Verified / Unverified).

Design-system impact

• New primitive: OtpInput (6-cell, paste-aware, arrow-key nav) → design-system/components/forms/, reused by MFA entry + both verification screens.
• Reuses existing Alert (tones), Button, Input, StatusPill, SeamDivider. Tokens only — no raw hex except none (Google mark lives only on the sign-in page).

Interaction notes

• OTP auto-advances per cell; full paste distributes across cells; backspace steps back.
• mfa_required SessionResult drives factor list; selecting a factor calls the step-up send/verify endpoints.
• Verification screens are skippable ("Skip for now") but re-prompt from profile.

Approval

Comment @claude approve to proceed with implementation, or @claude reject: <reason>. Implementation proceeds on a draft PR labeled wip in the meantime and will not merge until approved + CI green.

Claude-Session-Id: cf830721-b1ef-4fe0-a024-035ad280dcf7