Account is the signed-in page — guest becomes a member from here.
← Design HQ · HTML on GitHub · PRD — Account & Security
The Account surface end-to-end — member page, guest mode, the AuthModal gate, the
WaitlistModal funnel, and the credential-recovery banner (real content from
AccountPage.tsx, AuthModal.tsx, WaitlistModal.tsx,
CredentialRecoveryBanner.tsx, restyled to the canon shell).
The widths drawn here are samples of a fluid
continuum, not the only states that exist — content (spacing, type, gaps, card/column widths)
scales continuously between them, each clamp reading a named container. Structure (rail,
row↔stack, grid columns) steps only at sm 640 · md 768 ·
lg 1024; radius, hairlines, and pills never scale. Kit: design-canon.md U8.
Reading order in this document: § Desktop
journey first — every desktop frame, full flow, journey order — then § Mobile
journey — 375 below it — every mobile frame, same order, laid out side by side as a
wrapping grid (never a tall single-file column of phone screens). Two sections, never
interleaved — a review-document convention only (this repo's design-canon.md §
Mockup review reading order). Mobile 375px is still designed and scored FIRST in the /design
ritual (kit canon U5/U8) — the two rules never conflate.
AccountPage.tsx)
USR-2381 id chip); everything below is flat hairline rows.!isGuest) — not degraded, absent.sm:flex-row breakpoint) — never a side-by-side squeeze under 375px.MobileActionBar).defaultMode="signup", but preview sign-up is closed (isPublicSignupOpen()) → modal forces the Sign In tab regardless of intent.CredentialRecoveryBanner.tsx — retroactive doc of shipped code, not a pre-build proposal)
hasPassword === false AND no linked google identity — the state every fresh private-beta invitee starts in (magic-link arrival via Callback.tsx). Trigger is account state, not the invite flag.<main>'s first child in PlatformLayout.tsx — it spans the content column on EVERY page, under the header, right of the rail (inheriting the sidebar offset). Drawn here on Account, where its actions resolve.localStorage — it returns in a new browser; fixing the state is the real exit.ChangePasswordModal (hasPassword=false) — on success: toast "Password set / You're all set — you can sign in with it any time." and the banner dismisses. Not re-drawn (existing component).loginWithGoogle()) — NOT manual identity linking, which is disabled server-side; Supabase same-email auto-linking attaches Google to this account (#3860).bg-white/[0.03] — off the surface ladder (.04/.06/.08), kit U1.h-7 w-7) — under the 44px mobile touch minimum.flex-wrap: message wraps first, the action cluster (ml-auto) drops to its own right-aligned row.w-full sm:w-auto); the banner's own buttons do NOT — they stay auto-width in the wrapped cluster.Let MystFlo help setup — the switch lives here (#4858 PR-2, Peyton 2026-09-15). Account is the canonical home of the grant: one new section between Sign-in & security and Data & privacy — the consent sentence, ONE hairline row with the only switch on the page, and the non-delegable line. The header link and the mobile drawer row (shell.html H1 / H1-m) navigate here; there is no sheet and no modal anywhere in this flow. Four states, each a complete page: OFF · ON, nothing yet · ON with activity · revoked · 768 · 375. Header drawn here keeps this file's existing stand-in (Preview badge — ledger row 4 already flags it stale); the shipped header with the new link is the shell file's contract.
AccountPage.tsx, new section between Sign-in & security and Data & privacy)
/account#help lands scrolled to this eyebrow with the switch focused (visible focus ring, no motion, no highlight wash).!isGuest, like Data & privacy) — never rendered disabled.Switch checked state, no custom colour). Status line: 6px emerald dot (C12 connected/healthy) + "On since 15 Sep · nothing added yet". The date is granted_at.support for this account; "See them on Brain" is the page's standard text-link action (never a button) and lands on /brain, where the rows carry the "Added by MystFlo · 15 Sep" chip and Activity lists "MystFlo added 12 FAQs and your policies".revoked_at; the count stays so the sentence is honest about history — nothing is deleted by switching off (#4858: "history stays").sm (.a-col); at 768 the rail collapses to icons and the same row renders unchanged — title + status left, switch right. The four states (H-acct-1 → H-acct-4) differ only in the status sub-line and the switch position, which are tier-invariant. Drawn once here, OFF, in page context; the row above and below it are the real neighbours.?earlyAccess=1 → same WaitlistModal.We're building in public — assistants aren't live yet.
Join early access and we'll let you in as we open the doors.
How should we reach you? (fill at least one)
You're in.
We'll message you on WhatsApp.