Contract-freeze · UX approval

Account security — Sessions & devices · Approval Frames

These frames demonstrate the Sessions & devices experience before any feature UI is implemented: see everywhere you're signed in (browser, OS, location, last-seen, with this device flagged), sign out a single session, or sign out everywhere else. Revocation is enforced server-side. Approving them freezes the visual + interaction contract the implementation and frontend-test-engineer's Playwright checks are verified against. Built in the fuse-seam design system (tokens only). No provider name appears anywhere in the UI.

Reached from the Account security hub (sibling feature) → Sessions & devices. Route /account/security/sessions.

Walk the flow

Frame 01 · /account/security/sessions

Active sessions

Every signed-in device with this-device flagged, metadata, and revoke controls. Includes empty, loading, and error states.

populatedonly this deviceloadingerror

Frame 02 · /account/security/sessions

Sign out one device

Confirm revoking a single session. Special case: revoking this device signs you out here — the UI warns and redirects to sign-in.

confirm (other)this device → logoutrevoked

Frame 03 · /account/security/sessions

Sign out everywhere else

Revoke every other session and keep this one. Confirm, then a success summary of how many were signed out.

confirmdone (N signed out)failed

Build inventory — what approving these frames approves

Flows: SessionsListFlow · /account/security/sessions RevokeSessionFlow · /account/security/sessions RevokeOthersFlow · /account/security/sessions
Components: SessionsPanelSessionDeviceListSessionDeviceRow CurrentDeviceBadgeDeviceMetaRelativeTime RevokeSessionDialogSelfRevokeNoticeRevokeOthersDialog EmptyState
Packages: @fuzefront/account-security-ui @fuzefront/security-client (existing)
Missing DS primitive: None — composes from existing @fuzefront/design-system primitives (list rows, badges, dialog, buttons). RelativeTime is a formatting util, not a styled primitive.

● Awaiting approval

Design system: @fuzefront/design-system (fuse-seam) · Contract: packages/security/openapi.yaml → @fuzefront/security-client · Package: @fuzefront/account-security-ui · Flag: fuzefront.security.devices-sessions (default OFF).
Endpoints: GET /v1/security/sessions, DELETE /v1/security/sessions/{id}, DELETE /v1/security/sessions (all others). Per-flow approval lives in manifest.json; approve by setting a flow's approved: true (+ approver + date) or reply @claude approve / @claude reject: <reason>.