Contract-freeze · UX approval · design-first

Personal identity & context switcher · Approval Frames

These frames demonstrate the identity + org-context model before any feature UI is implemented. The user identity is the base principal; signup makes you a member of the root FuzeFront platform org (Slack/GitHub shape), and orgs are opt-in tenants you own or join. Operating as yourself is a first-class Personal (non-org) context; the root org now shows a MEMBER badge — never GUEST. This set reconciles the two switchers that exist today: the local <select> in OrganizationPage.tsx and the canonical persisted setActiveOrganization in UserMenu.tsx into one ContextSwitcher. Approving freezes the visual + interaction contract and the build inventory below. Built in the fuse-seam design system (tokens only).

Frame (a) · flow: context-switch

👤 Personal context

Operating "as yourself": the non-org Personal home. Context pill reads Personal; personal-scope app installs and a shortcut into your orgs. No tenant nav.

Frame (b) · flow: context-switch

🏢 Org context — root MEMBER

Inside the root FuzeFront org. The header badge is MEMBER (never GUEST) because signup writes a real root membership row.

Frame (c) · flow: context-switch

🔀 Context switcher

The unified switcher menu: Personal + your orgs & nested sub-orgs, active check, persisted via setActiveOrganization. Reconciles the two switchers.

Frame (d) · flow: my-orgs

🗂️ My orgs & sub-orgs

Manage the orgs you own or belong to, each with your role pill and its sub-org tree; create a new org. Direct memberships only.

Frame (e) · states are contract

◔ States

Loading skeleton (aria-busy), empty (Personal + root only), provisioning gate, switch error+retry, and the fail-closed 403-in-place when you switch into an org you no longer belong to — never a sign-in redirect.

Build inventory — approving these frames approves this plan

Flows
  • context-switch → ContextSwitcherFlow @ / · approved:false
  • my-orgs → MyOrganizationsFlow @ /organizations · approved:false
Components
  • ContextSwitcher
  • ContextPill
  • PersonalContextHome
  • OrgContextBadge
  • MembershipRoleBadge
  • MyOrganizationsList
  • OrgCard
  • SubOrgTree
  • CreateOrganizationDialog
  • ProvisioningGate
  • ContextSwitchErrorNotice
  • AccessLostNotice
Packages
  • @fuzefront/identity-ui
Feature flags
  • fuzefront.identity.root-membership
  • fuzefront.identity.personal-context

Contract mapping — what approval commissions

Design system: @fuzefront/design-system (fuse-seam) · Plan: docs/planning/design-first-ui-pipeline.md · Reconciles: frontend/src/pages/OrganizationPage.tsx, frontend/src/components/UserMenu.tsx, frontend/src/lib/shared.tsx.
Approve per flow by setting build.flows[].approved: true (+ approver + date), or reply @claude approve / @claude reject: <reason>.

Review · identity-context-switcher approve or reject each flow ↓
context-switchapproved · izzywdev
my-orgsapproved · izzywdev