spine-framework 0.3.124 → 0.3.126

package/.framework/src/pages/auth/RegisterPage.tsx

@@ -1,44 +1,38 @@
-/**
- * @module src/pages/auth/RegisterPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Registration page. Handles multiple paths:
- *
- *   1. First user (no people in system) — simplified form, becomes system_admin.
- *      No personal/company toggle shown.
- *
- *   2. Invite link (?t=TOKEN) — email + account pre-filled and locked.
- *      On submit: Supabase signUp → auth trigger resolves stub → active.
- *
- *   3. Walk-up personal — new account named after the person.
- *      On submit: Supabase signUp → complete-registration(new_account).
- *
- *   4. Walk-up company, no domain match — new account with company name.
- *      On submit: Supabase signUp → complete-registration(new_account).
- *
- *   5. Walk-up company, domain match — user chooses join or create new.
- *      Join: Supabase signUp → complete-registration(join_request) → pending.
- *      Create new: same as path 3.
- *
- * URL params:
- *   ?app=portal|cortex — override default registration app
- *   ?role=member|support — override default role
- *
- * @seeAlso functions/invites.ts   (check-domain, validate-token, complete-registration)
- * @seeAlso migrations/005_auth_user_trigger.sql  (invite stub resolution)
- * @seeAlso src/pages/auth/PendingApprovalPage.tsx
- */
-
+// CIL[BEGIN chunk_id="RegisterPage_module_header_1783662155" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import React hooks, routing, auth, and Supabase for registration functionality"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide necessary imports for complex registration component with multiple flows"]
+// CIL[DOC-CONTEXT module="src/pages/auth/RegisterPage" layer="frontend-page" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/functions/_shared/principal.ts\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="React hooks, routing, auth, Supabase client" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports for registration page with invite handling and domain checking" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-AUDIENCE audience="developer"]
+// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, .framework/functions/_shared/principal.ts, .framework/functions/_shared/schema-utils.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 import React, { useState, useEffect, useCallback } from 'react'
 import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
 import { useAuth } from '../../contexts/AuthContext'
 import { supabase } from '../../lib/supabase'
-
-// ─── TYPES ────────────────────────────────────────────────────────────────────
-
+// CIL[END chunk_id="RegisterPage_module_header_1783662155"]
+// CIL[BEGIN chunk_id="RegisterPage_types_1783662155" type="type" identity="types" parent="none"]
+// CIL[DOC-MACRO purpose="Define TypeScript types for registration flows and configuration"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide type definitions for account types, invite data, and registration config"]
+// CIL[DOC-CONTEXT module="src/pages/auth/RegisterPage" layer="frontend-page" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="UseType, DomainMatchChoice, InvitePreview, RegistrationConfig" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Type definitions for personal/company account types and invite handling" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, .framework/functions/_shared/principal.ts, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, .framework/src/pages/admin/TypeDetailPage.tsx, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 type UseType = 'personal' | 'company'
 type DomainMatchChoice = 'join' | 'create_new' | null
 
@@ -54,6 +48,7 @@ interface RegistrationConfig {
   default_app: string
   default_role: string
   allow_url_override: boolean
+  default_app_by_role?: Record<string, string>
   apps: Record<string, {
     roles: string[]
     default_role: string
@@ -63,9 +58,21 @@ interface RegistrationConfig {
     target_account?: string
   }>
 }
-
-// ─── HELPERS ──────────────────────────────────────────────────────────────────
-
+// CIL[END chunk_id="RegisterPage_types_1783662155"]
+// CIL[BEGIN chunk_id="RegisterPage_callinvitesapi_1783662155" type="function" identity="callInvitesApi" parent="none"]
+// CIL[DOC-MACRO purpose="Call invites API endpoint for registration and domain validation"]
+// CIL[DOC-RESPONSIBILITY responsibility="Handle HTTP requests to invites API with GET/POST methods"]
+// CIL[DOC-CONTEXT module="src/pages/auth/RegisterPage" layer="frontend-page" related_files="[\".framework/functions/_shared/schema-utils.ts\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/principal.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="API response JSON" errors="network errors, API errors" side_effects="HTTP requests to backend"]
+// CIL[DOC-MICRO logic_summary="Generic API wrapper for invites functionality with method handling" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 2. Direct calls: 0. Related files: .framework/functions/_shared/schema-utils.ts, custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/principal.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 2. Total affected: 2."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 async function callInvitesApi(action: string, params: Record<string, any> = {}, method: 'GET' | 'POST' = 'GET') {
   const base = '/.netlify/functions/invites'
   if (method === 'GET') {
@@ -80,7 +87,21 @@ async function callInvitesApi(action: string, params: Record<string, any> = {},
   })
   return res.json()
 }
-
+// CIL[END chunk_id="RegisterPage_callinvitesapi_1783662155"]
+// CIL[BEGIN chunk_id="RegisterPage_loadregistrationconfig_1783662155" type="function" identity="loadRegistrationConfig" parent="none"]
+// CIL[DOC-MACRO purpose="Load registration configuration from spine.config.json file"]
+// CIL[DOC-RESPONSIBILITY responsibility="Fetch and parse registration config with error handling"]
+// CIL[DOC-CONTEXT module="src/pages/auth/RegisterPage" layer="frontend-page" related_files="[\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="RegistrationConfig or null" errors="fetch errors, parse errors" side_effects="HTTP request to config file"]
+// CIL[DOC-MICRO logic_summary="Fetch config file and extract registration section with fallback" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 1. Direct calls: 0. Related files: custom/apps/cortex/functions/custom_cil-embeddings.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 1. Total affected: 1."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 async function loadRegistrationConfig(): Promise<RegistrationConfig | null> {
   try {
     const res = await fetch('/spine.config.json')
@@ -91,7 +112,21 @@ async function loadRegistrationConfig(): Promise<RegistrationConfig | null> {
     return null
   }
 }
-
+// CIL[END chunk_id="RegisterPage_loadregistrationconfig_1783662155"]
+// CIL[BEGIN chunk_id="RegisterPage_checkfirstuser_1783662155" type="function" identity="checkFirstUser" parent="none"]
+// CIL[DOC-MACRO purpose="Check if current user is the first user in the system"]
+// CIL[DOC-RESPONSIBILITY responsibility="Determine if registration should use simplified first-user flow"]
+// CIL[DOC-CONTEXT module="src/pages/auth/RegisterPage" layer="frontend-page" related_files="[\".framework/functions/_shared/principal.ts\",\".framework/migrations/025_retype_threads_messages.sql\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/RolesPage.tsx\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="boolean indicating if first user" errors="API errors" side_effects="API call to check-first-user"]
+// CIL[DOC-MICRO logic_summary="Call invites API to check first user status with fallback" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 1. Direct calls: 0. Related files: .framework/functions/_shared/principal.ts, .framework/migrations/025_retype_threads_messages.sql, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/pages/admin/RolesPage.tsx."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 1. Total affected: 1."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 async function checkFirstUser(): Promise<boolean> {
   try {
     const result = await callInvitesApi('check-first-user')
@@ -100,19 +135,32 @@ async function checkFirstUser(): Promise<boolean> {
     return false
   }
 }
-
+// CIL[END chunk_id="RegisterPage_checkfirstuser_1783662155"]
+// CIL[BEGIN chunk_id="RegisterPage_getpostregistrationredirect_1783662155" type="function" identity="getPostRegistrationRedirect" parent="none"]
+// CIL[DOC-MACRO purpose="Determine redirect path after successful registration"]
+// CIL[DOC-RESPONSIBILITY responsibility="Calculate post-registration redirect based on config, URL params, and invite status"]
+// CIL[DOC-CONTEXT module="src/pages/auth/RegisterPage" layer="frontend-page" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="redirect path string" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Redirect logic with URL override support and config fallbacks" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 function getPostRegistrationRedirect(
   config: RegistrationConfig | null,
   searchParams: URLSearchParams,
   isInvite: boolean,
+  effectiveRole?: string,
   inviteAccountId?: string
 ): string {
-  // Invites: redirect to the account's primary app or default
   if (isInvite) {
     return '/'
   }
 
-  // Check for URL override if allowed
   if (config?.allow_url_override) {
     const appOverride = searchParams.get('app')
     if (appOverride && config.apps[appOverride]?.enabled) {
@@ -120,51 +168,63 @@ function getPostRegistrationRedirect(
     }
   }
 
-  // Default app from config
+  const roleForRedirect = effectiveRole || searchParams.get('role') || config?.default_role
+  if (roleForRedirect && config?.default_app_by_role?.[roleForRedirect]) {
+    const roleBasedApp = config.default_app_by_role[roleForRedirect]
+    if (config.apps[roleBasedApp]?.enabled) {
+      return config.apps[roleBasedApp].path
+    }
+  }
+
   if (config?.default_app && config.apps[config.default_app]?.enabled) {
     return config.apps[config.default_app].path
   }
 
-  // Fallback
   return '/'
 }
-
-// ─── COMPONENT ────────────────────────────────────────────────────────────────
-
+// CIL[END chunk_id="RegisterPage_getpostregistrationredirect_1783662155"]
+// CIL[BEGIN chunk_id="RegisterPage_registerpage_1783662155" type="function" identity="RegisterPage" parent="none"]
+// CIL[DOC-MACRO purpose="Handle complex registration flow with invite support, domain checking, and multiple account strategies"]
+// CIL[DOC-RESPONSIBILITY responsibility="Manage registration state, form validation, invite processing, and user creation flows"]
+// CIL[DOC-CONTEXT module="src/pages/auth/RegisterPage" layer="frontend-page" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="registered user session or error states" errors="validation errors, API errors, network errors" side_effects="creates user account, updates auth state"]
+// CIL[DOC-MICRO logic_summary="Complex registration component with multiple flows and validation" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 export function RegisterPage() {
   const [searchParams] = useSearchParams()
   const navigate = useNavigate()
   const { refreshUser } = useAuth()
   const inviteToken = searchParams.get('t')
 
-  // Registration config
   const [regConfig, setRegConfig] = useState<RegistrationConfig | null>(null)
   const [isFirstUser, setIsFirstUser] = useState<boolean | null>(null)
 
-  // Invite preview (when token present)
   const [invitePreview, setInvitePreview] = useState<InvitePreview | null>(null)
   const [tokenError, setTokenError] = useState('')
   const [tokenLoading, setTokenLoading] = useState(!!inviteToken)
 
-  // Form fields
   const [fullName, setFullName] = useState('')
   const [email, setEmail] = useState('')
   const [companyName, setCompanyName] = useState('')
   const [password, setPassword] = useState('')
 
-  // UX state
   const [useType, setUseType] = useState<UseType>('personal')
   const [domainMatchAccountId, setDomainMatchAccountId] = useState<string | null>(null)
   const [domainMatchChoice, setDomainMatchChoice] = useState<DomainMatchChoice>(null)
   const [domainCheckLoading, setDomainCheckLoading] = useState(false)
 
-  // Account strategy state
   const [accountStrategy, setAccountStrategy] = useState<'existing' | 'new'>('new')
 
   const [error, setError] = useState('')
   const [isLoading, setIsLoading] = useState(false)
 
-  // ── Load config and check first user on mount ──────────────────────────────
   useEffect(() => {
     ;(async () => {
       const [config, firstUserCheck] = await Promise.all([
@@ -176,7 +236,6 @@ export function RegisterPage() {
     })()
   }, [])
 
-  // ── Resolve invite token ───────────────────────────────────────────────────
   useEffect(() => {
     if (!inviteToken) return
     ;(async () => {
@@ -188,13 +247,11 @@ export function RegisterPage() {
       } else {
         setInvitePreview(result.data)
         setEmail(result.data.email)
-        // Pre-fill name from invite stub (editable — user can correct it)
         if (result.data.full_name) setFullName(result.data.full_name)
       }
     })()
   }, [inviteToken])
 
-  // ── Domain check on email blur ─────────────────────────────────────────────
   const handleEmailBlur = useCallback(async () => {
     if (!email || !email.includes('@') || inviteToken || useType === 'personal' || isFirstUser) return
 
@@ -210,13 +267,10 @@ export function RegisterPage() {
     }
   }, [email, inviteToken, useType, isFirstUser])
 
-  // ── Submit ─────────────────────────────────────────────────────────────────
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
 
-    // Guard: if registration config hasn't loaded yet, block submission
-    // This prevents silently falling through to new_account when config is needed
     if (!isFirstUser && !inviteToken && !regConfig) {
       setError('Registration configuration not loaded. Please refresh and try again.')
       return
@@ -225,7 +279,6 @@ export function RegisterPage() {
     setIsLoading(true)
 
     try {
-      // 1. Supabase auth signup
       const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
         email: invitePreview?.email ?? email,
         password,
@@ -240,123 +293,70 @@ export function RegisterPage() {
         return
       }
 
-      // 2. First user path — trigger handles everything, navigate to root
       if (isFirstUser) {
-        // First user becomes system_admin immediately, go to admin
         navigate('/spine-framework/admin', { replace: true })
         return
       }
 
-      // 3. Invite path — trigger handles everything, navigate to account
       if (inviteToken) {
         navigate('/', { replace: true })
         return
       }
 
-      // 4. Walk-up paths — call complete-registration
       const resolvedEmail = email
 
-      // Determine role and account strategy from URL params or config
       const urlRole = searchParams.get('role')
       const urlApp = searchParams.get('app')
 
-      // Resolve which app config to use: URL param → default_app → none
-      const effectiveApp = urlApp || regConfig?.default_app
-      
-      let effectiveRole = regConfig?.default_role || 'member'
+      let effectiveRole = urlRole || regConfig?.default_role || 'member'
+      const effectiveApp = urlApp || regConfig?.default_app_by_role?.[effectiveRole] || regConfig?.default_app
       let effectiveAccountStrategy: 'existing' | 'new' | 'choice' = 'new'
       let targetAccount: string | undefined
       
-      // If an app config is found (via URL param or default_app), apply it
       if (effectiveApp && regConfig?.apps[effectiveApp]) {
         const appConfig = regConfig.apps[effectiveApp]
         
-        console.log('App config found:', { app: effectiveApp, appConfig })
-        
-        // Determine role: URL param (if valid for this app) → app default → config default
-        if (urlRole && appConfig.roles.includes(urlRole)) {
-          effectiveRole = urlRole
-        } else {
-          effectiveRole = appConfig.default_role
-        }
-        
-        // Determine account strategy
+        effectiveRole = urlRole || appConfig.default_role
         effectiveAccountStrategy = appConfig.account_strategy
         targetAccount = appConfig.target_account
-        
-        console.log('Account strategy resolved:', { effectiveAccountStrategy, targetAccount })
-      }
-      // If only URL role is specified (no app), use it directly with default strategy
-      else if (urlRole) {
-        effectiveRole = urlRole
-        effectiveAccountStrategy = 'new'
       }
-      
-      // For 'existing' strategy, always use the target account
-      if (effectiveAccountStrategy === 'existing') {
-        setAccountStrategy('existing')
-      } else {
-        setAccountStrategy('new')
+
+      const completeRegistrationParams: any = {
+        email: resolvedEmail,
+        full_name: fullName,
+        app: effectiveApp,
+        role: effectiveRole,
+        redirect: getPostRegistrationRedirect(regConfig, searchParams, false, effectiveRole),
       }
 
-      if (domainMatchChoice === 'join') {
-        // Join existing account as access_request
-        const joinResult = await callInvitesApi('complete-registration', {
-          path: 'join_request',
-          email: resolvedEmail,
-          role_slug: effectiveRole,
-        }, 'POST')
-
-        if (joinResult.error) {
-          setError(joinResult.error)
-          return
-        }
-        navigate('/pending-approval', { replace: true })
-        return
+      if (useType === 'company') {
+        completeRegistrationParams.account_name = companyName
       }
 
-      // Handle account creation vs existing account assignment
-      // IMPORTANT: use effectiveAccountStrategy (local var), NOT accountStrategy (React state)
-      // React state updates are async — accountStrategy may still hold the previous value here
-      let registrationResult
-      console.log('Registration decision:', { effectiveAccountStrategy, targetAccount, effectiveRole })
-      
       if (effectiveAccountStrategy === 'existing' && targetAccount) {
-        // Assign to existing account
-        console.log('Using existing_account path')
-        registrationResult = await callInvitesApi('complete-registration', {
-          path: 'existing_account',
-          email: resolvedEmail,
-          target_account: targetAccount,
-          role_slug: effectiveRole,
-        }, 'POST')
-      } else if (effectiveAccountStrategy === 'existing' && !targetAccount) {
-        // Misconfigured: existing strategy but no target account in spine.config.json
-        throw new Error('Registration misconfigured: account_strategy is "existing" but no target_account is set.')
+        completeRegistrationParams.account_id = targetAccount
+        completeRegistrationParams.strategy = 'join_request'
+      } else if (domainMatchAccountId === '__matched__' && domainMatchChoice === 'join') {
+        completeRegistrationParams.strategy = 'join_request'
       } else {
-        // Create new account (personal or company)
-        console.log('Using new_account path')
-        const accountName = useType === 'personal' ? fullName : companyName
-        registrationResult = await callInvitesApi('complete-registration', {
-          path: 'new_account',
-          email: resolvedEmail,
-          account_name: accountName,
-          role_slug: effectiveRole,
-        }, 'POST')
+        completeRegistrationParams.strategy = 'new_account'
       }
 
-      if (registrationResult.error) {
-        setError(registrationResult.error)
+      const result = await callInvitesApi('complete-registration', completeRegistrationParams, 'POST')
+
+      if (result.error) {
+        setError(result.error)
         return
       }
 
-      // Re-fetch user context so roles are populated (complete-registration
-      // sets role_id, but the initial auth fetch may have raced ahead of it)
-      await refreshUser()
+      if (result.data?.next === 'pending_approval') {
+        navigate('/auth/pending-approval', { replace: true })
+        return
+      }
 
-      // Navigate to configured post-registration destination
-      const redirectPath = getPostRegistrationRedirect(regConfig, searchParams, false)
+      const redirectPath = getPostRegistrationRedirect(regConfig, searchParams, false, effectiveRole)
       navigate(redirectPath, { replace: true })
+
     } catch (err: any) {
       setError(err.message || 'Registration failed')
     } finally {
@@ -364,264 +364,228 @@ export function RegisterPage() {
     }
   }
 
-  // ── Loading states ───────────────────────────────────────────────────────────
-  if (tokenLoading || isFirstUser === null) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <LoadingSpinner className="w-8 h-8" />
-      </div>
-    )
-  }
+  const isInvite = !!inviteToken && !tokenError
+  const showPersonalCompanyToggle = !isInvite && !isFirstUser
+  const showCompanyName = showPersonalCompanyToggle && useType === 'company'
+  const showDomainMatchChoice = domainMatchAccountId === '__matched__' && !isInvite && !isFirstUser
 
-  if (tokenError) {
+  if (tokenLoading || isFirstUser === null || (!isFirstUser && !isInvite && !regConfig)) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-        <div className="max-w-md w-full text-center space-y-4">
-          <div className="rounded-md bg-red-50 p-6">
-            <p className="text-red-800 font-medium">Invite link invalid</p>
-            <p className="text-red-700 text-sm mt-1">{tokenError}</p>
-          </div>
-          <Link to="/login" className="text-sm text-slate-600 hover:text-slate-900">
-            Back to login
-          </Link>
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <div className="text-center">
+          <LoadingSpinner size="lg" />
+          <p className="mt-4 text-slate-600">Loading registration...</p>
         </div>
       </div>
     )
   }
 
-  const isInvite = !!inviteToken && !!invitePreview
-  const showDomainMatchPrompt = domainMatchAccountId && domainMatchChoice === null && useType === 'company' && !isFirstUser
-  const effectiveEmail = isInvite ? invitePreview.email : email
-  const showUseTypeToggle = !isInvite && !isFirstUser && accountStrategy === 'new'
-
-  // Header text based on scenario
-  let headerTitle = 'Create your account'
-  let headerSubtitle: React.ReactNode = null
-
-  if (isFirstUser) {
-    headerTitle = 'Create system administrator account'
-    headerSubtitle = (
-      <p className="mt-2 text-center text-sm text-slate-500">
-        You're the first user. This account will have full system access.
-      </p>
-    )
-  } else if (isInvite) {
-    headerTitle = `Join ${invitePreview.account_name ?? 'the team'}`
-    if (invitePreview.role_name) {
-      headerSubtitle = (
-        <p className="mt-2 text-center text-sm text-slate-500">
-          You've been invited as <span className="font-medium">{invitePreview.role_name}</span>
-        </p>
-      )
-    }
-  }
-
   return (
     <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
-
-        {/* Header */}
         <div>
           <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-slate-900">
             <span className="text-white font-bold text-xl">S</span>
           </div>
           <h2 className="mt-6 text-center text-3xl font-extrabold text-slate-900">
-            {headerTitle}
+            {isInvite ? 'Complete your registration' : 'Create your account'}
           </h2>
-          {headerSubtitle}
-          {!isFirstUser && (
+          {isInvite && (
             <p className="mt-2 text-center text-sm text-slate-600">
-              Already have an account?{' '}
-              <Link to="/login" className="font-medium text-blue-600 hover:text-blue-500">
-                Sign in
-              </Link>
+              You've been invited to join{' '}
+              {invitePreview?.account_name && (
+                <span className="font-medium">{invitePreview.account_name}</span>
+              )}
             </p>
           )}
         </div>
 
+        {tokenError && (
+          <div className="rounded-md bg-red-50 p-4">
+            <div className="text-sm text-red-800">
+              Invalid or expired invitation link.{' '}
+              <Link to="/register" className="font-medium text-accent-blue hover:text-accent-blue-light">
+                Start a new registration
+              </Link>
+            </div>
+          </div>
+        )}
+
         <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
           {error && (
             <div className="rounded-md bg-red-50 p-4">
-              <p className="text-sm text-red-800">{error}</p>
+              <div className="text-sm text-red-800">{error}</div>
             </div>
           )}
 
           <div className="space-y-4">
-            {/* Personal / Company toggle — only for walk-up, not first user */}
-            {showUseTypeToggle && (
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-2">
-                  Account type
-                </label>
-                <div className="flex gap-3">
-                  {(['personal', 'company'] as UseType[]).map(type => (
-                    <button
-                      key={type}
-                      type="button"
-                      onClick={() => {
-                        setUseType(type)
-                        setDomainMatchAccountId(null)
-                        setDomainMatchChoice(null)
-                      }}
-                      className={`flex-1 py-2 px-4 rounded-[5px] border text-sm font-medium transition-colors ${
-                        useType === type
-                          ? 'bg-slate-900 text-white border-slate-900'
-                          : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400'
-                      }`}
-                    >
-                      {type === 'personal' ? 'Personal' : 'Company'}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Full name */}
             <div>
-              <label htmlFor="fullName" className="block text-sm font-medium text-slate-700">
+              <label htmlFor="full-name" className="block text-sm font-medium text-slate-700">
                 Full name
               </label>
               <input
-                id="fullName"
+                id="full-name"
+                name="full-name"
                 type="text"
                 required
                 value={fullName}
-                onChange={e => setFullName(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                onChange={(e) => setFullName(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
                 placeholder="Enter your full name"
+                disabled={isInvite}
               />
             </div>
 
-            {/* Email — locked when invite */}
             <div>
               <label htmlFor="email" className="block text-sm font-medium text-slate-700">
                 Email address
               </label>
               <input
                 id="email"
+                name="email"
                 type="email"
+                autoComplete="email"
                 required
-                value={effectiveEmail}
-                onChange={e => !isInvite && setEmail(e.target.value)}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
                 onBlur={handleEmailBlur}
-                readOnly={isInvite}
-                className={`mt-1 block w-full px-3 py-2 border rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none sm:text-sm ${
-                  isInvite
-                    ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed'
-                    : 'border-slate-300 focus:ring-blue-500 focus:border-blue-500'
-                }`}
+                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
                 placeholder="Enter your email"
+                disabled={isInvite}
               />
               {domainCheckLoading && (
-                <p className="mt-1 text-xs text-slate-500">Checking domain...</p>
+                <p className="mt-1 text-sm text-slate-500">Checking domain...</p>
               )}
             </div>
 
-            {/* Domain match prompt */}
-            {showDomainMatchPrompt && (
-              <div className="rounded-md bg-blue-50 border border-blue-200 p-4 space-y-3">
-                <p className="text-sm text-blue-800 font-medium">
-                  An account for this domain already exists.
-                </p>
-                <p className="text-sm text-blue-700">
-                  Would you like to request to join the existing account, or create a new one?
-                </p>
-                <div className="flex gap-2">
-                  <button
-                    type="button"
-                    onClick={() => setDomainMatchChoice('join')}
-                    className="flex-1 py-2 px-3 rounded-[5px] bg-blue-600 text-white text-sm font-medium hover:bg-blue-700"
-                  >
-                    Request to join
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setDomainMatchChoice('create_new')}
-                    className="flex-1 py-2 px-3 rounded-[5px] border border-blue-300 text-blue-700 text-sm font-medium hover:bg-blue-100"
-                  >
-                    Create new account
-                  </button>
-                </div>
-              </div>
-            )}
-
-            {/* Company name — shown for company type when not joining existing and using new account strategy */}
-            {!isInvite && useType === 'company' && domainMatchChoice !== 'join' && !isFirstUser && accountStrategy === 'new' && (
+            {showCompanyName && (
               <div>
-                <label htmlFor="companyName" className="block text-sm font-medium text-slate-700">
+                <label htmlFor="company-name" className="block text-sm font-medium text-slate-700">
                   Company name
                 </label>
                 <input
-                  id="companyName"
+                  id="company-name"
+                  name="company-name"
                   type="text"
-                  required={useType === 'company'}
+                  required
                   value={companyName}
-                  onChange={e => setCompanyName(e.target.value)}
-                  className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  onChange={(e) => setCompanyName(e.target.value)}
+                  className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
                   placeholder="Enter your company name"
                 />
               </div>
             )}
 
-            {/* Invite account name — locked */}
-            {isInvite && invitePreview.account_name && (
-              <div>
-                <label className="block text-sm font-medium text-slate-700">Account</label>
-                <input
-                  type="text"
-                  readOnly
-                  value={invitePreview.account_name}
-                  className="mt-1 block w-full px-3 py-2 border border-slate-200 rounded-[5px] bg-slate-50 text-slate-500 cursor-not-allowed sm:text-sm"
-                />
-              </div>
-            )}
-
-            {/* Password */}
             <div>
               <label htmlFor="password" className="block text-sm font-medium text-slate-700">
                 Password
               </label>
               <input
                 id="password"
+                name="password"
                 type="password"
+                autoComplete="new-password"
                 required
-                minLength={6}
                 value={password}
-                onChange={e => setPassword(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                placeholder="Choose a password (min 6 characters)"
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                placeholder="Create a password"
               />
             </div>
           </div>
 
-          {/* Join request info banner */}
-          {domainMatchChoice === 'join' && (
-            <div className="rounded-md bg-amber-50 border border-amber-200 p-3">
-              <p className="text-sm text-amber-800">
-                Your registration will be submitted for approval. You'll gain access once an administrator approves your request.
-              </p>
+          {showPersonalCompanyToggle && (
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-2">
+                Account type
+              </label>
+              <div className="flex space-x-4">
+                <label className="flex items-center">
+                  <input
+                    type="radio"
+                    name="use-type"
+                    value="personal"
+                    checked={useType === 'personal'}
+                    onChange={(e) => setUseType(e.target.value as UseType)}
+                    className="h-4 w-4 text-accent-blue focus:ring-accent-blue border-slate-300"
+                  />
+                  <span className="ml-2 text-sm text-slate-700">Personal</span>
+                </label>
+                <label className="flex items-center">
+                  <input
+                    type="radio"
+                    name="use-type"
+                    value="company"
+                    checked={useType === 'company'}
+                    onChange={(e) => setUseType(e.target.value as UseType)}
+                    className="h-4 w-4 text-accent-blue focus:ring-accent-blue border-slate-300"
+                  />
+                  <span className="ml-2 text-sm text-slate-700">Company</span>
+                </label>
+              </div>
             </div>
           )}
 
-          <button
-            type="submit"
-            disabled={isLoading}
-            className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isLoading ? (
-              <LoadingSpinner className="w-5 h-5" />
-            ) : isFirstUser ? (
-              'Create System Admin Account'
-            ) : isInvite ? (
-              'Accept Invite'
-            ) : domainMatchChoice === 'join' ? (
-              'Request to Join'
-            ) : (
-              'Create Account'
-            )}
-          </button>
+          {showDomainMatchChoice && (
+            <div className="rounded-md bg-amber-50 p-4">
+              <div className="text-sm text-amber-800">
+                <p className="font-medium mb-2">We found an existing account for your domain.</p>
+                <div className="space-y-2">
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="domain-choice"
+                      value="join"
+                      checked={domainMatchChoice === 'join'}
+                      onChange={(e) => setDomainMatchChoice(e.target.value as DomainMatchChoice)}
+                      className="h-4 w-4 text-accent-blue focus:ring-accent-blue border-slate-300"
+                    />
+                    <span className="ml-2 text-sm text-amber-800">Join existing account</span>
+                  </label>
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="domain-choice"
+                      value="create_new"
+                      checked={domainMatchChoice === 'create_new'}
+                      onChange={(e) => setDomainMatchChoice(e.target.value as DomainMatchChoice)}
+                      className="h-4 w-4 text-accent-blue focus:ring-accent-blue border-slate-300"
+                    />
+                    <span className="ml-2 text-sm text-amber-800">Create new account</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading || (showDomainMatchChoice && !domainMatchChoice)}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <>
+                  <LoadingSpinner size="sm" />
+                  <span className="ml-2">Creating account...</span>
+                </>
+              ) : (
+                'Create account'
+              )}
+            </button>
+          </div>
+
+          <div className="text-center">
+            <p className="text-sm text-slate-600">
+              Already have an account?{' '}
+              <Link to="/login" className="font-medium text-accent-blue hover:text-accent-blue-light">
+                Sign in
+              </Link>
+            </p>
+          </div>
         </form>
       </div>
     </div>
   )
 }
+// CIL[END chunk_id="RegisterPage_registerpage_1783662155"]