Contract-freeze · UX approval

Account Security — Approval Frames

The security hub: one place where a person sees their sign-in posture and reaches every security surface — password, two-factor, devices & sessions, API tokens, and connected accounts. These frames freeze the hub's visual + interaction model before any UI is built. Rendered in the fuse-seam design system (tokens only). No identity-vendor name ever appears — the browser only ever sees app.fuzefront.com and, for a linked account, accounts.google.com.

Walk the flow

Frame (a) · route /account/security

Security hub

Posture summary + cards linking to password, two-factor, devices & sessions, API tokens, connected accounts. Reads GET /identity/connections + /methods.

Frame (b) · states

States & fail-closed

Loading skeleton, load error + retry, social-only account (hasPassword:false → "Set a password first"), and the last-sign-in-method 409 guard on unlink.

Build inventory — approving these frames approves this plan

Flows

account-security: AccountSecurityHub route /account/security · approved: false (awaiting review)

React components

SecurityHubSecurityPostureSummary SecurityCardSignInMethodsList SetPasswordBannerConnectedAccountRow SecurityCardGridSkeletonLoadErrorRetry

npm packages

@fuzefront/account-security-ui

Design-system note

Composed entirely from @fuzefront/design-system (fuse-seam) tokens. One primitive is not yet in the base and is named for frontend-engineer to add as a foundation PR before implementation: a StatusCallout (soft-tinted inline banner with icon + action) used by the "Set a password first" and error states. It is drawn here from tokens only — not one-offed into feature code.

● Awaiting approval

Design system: @fuzefront/design-system (fuse-seam) · Contract: packages/security/openapi.yaml → @fuzefront/security-client · Reads: GET /v1/security/identity/connections, GET /v1/security/methods · Sibling surfaces (designed in parallel): two-factor, devices & sessions, API tokens.
Approve per flow by setting approved: true (+ approver + date) in manifest.json, or reply @claude approve / @claude reject: <reason>.