auramaxx 0.0.1

package/src/app/page.tsx

@@ -0,0 +1,1964 @@
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import * as bip39 from 'bip39';
+import Link from 'next/link';
+import { Bot, KeyRound, Fingerprint, Database, Plus, RotateCcw, Loader2, Settings } from 'lucide-react';
+import { useAuth } from '@/context/AuthContext';
+import { api, Api, unlockWallet, setupWallet, rekeySession, changePrimaryVaultPassword, recoverWalletAccess } from '@/lib/api';
+import { generateVaultKeypair, getVaultPrivateKey } from '@/lib/vault-crypto';
+import { CredentialVault } from '@/components/vault/CredentialVault';
+import { NotificationDrawer } from '@/components/NotificationDrawer';
+import { useAgentActions } from '@/hooks/useAgentActions';
+import DocsThemeToggle from '@/components/docs/DocsThemeToggle';
+import { Drawer, Modal, Button, ItemPicker, Toggle, TextInput, TyvekCollapsibleSection, ConfirmationModal } from '@/components/design-system';
+import { PasskeyEnrollmentPrompt } from '@/components/PasskeyEnrollmentPrompt';
+import { useTheme, type ColorMode, type UiScale } from '@/hooks/useTheme';
+
+interface VaultInfo {
+  id: string;
+  name?: string;
+  address: string;
+  solanaAddress?: string;
+  isUnlocked: boolean;
+  isPrimary: boolean;
+  createdAt: string;
+}
+
+interface WalletData {
+  address: string;
+  tier: 'cold' | 'hot' | 'temp';
+  chain: string;
+  balance?: string;
+}
+
+type PageState = 'loading' | 'setup' | 'locked' | 'transition' | 'unlocked';
+type LocalAgentMode = 'strict' | 'dev' | 'admin';
+type ProjectScopeMode = 'auto' | 'strict' | 'off';
+type SetupOnboardingStep = 'seed' | 'trust';
+type SeedPhraseActionStatus = 'copied' | 'copy-failed' | 'downloaded' | 'download-failed';
+type LocalPolicySettings = {
+  profile: LocalAgentMode;
+  profileVersion: 'v1';
+  autoApprove: boolean;
+  projectScopeMode: ProjectScopeMode;
+};
+
+const LOCAL_POLICY_PROFILES: LocalAgentMode[] = ['strict', 'dev', 'admin'];
+const LOCAL_PROJECT_SCOPE_MODES: ProjectScopeMode[] = ['auto', 'strict', 'off'];
+const LOCAL_PROFILE_ITEM_OPTIONS = [
+  {
+    value: 'strict',
+    label: 'strict',
+    description: 'Minimal local token scope with explicit allowlists.',
+  },
+  {
+    value: 'dev',
+    label: 'dev',
+    description: 'Balanced local automation with scoped defaults.',
+  },
+  {
+    value: 'admin',
+    label: 'admin (dangerous)',
+    description: 'Broad token scope. Use only in tightly controlled local environments.',
+  },
+] as const;
+const LOCAL_PROJECT_SCOPE_ITEM_OPTIONS = [
+  {
+    value: 'auto',
+    label: 'auto (recommended)',
+    description: 'Uses `.aura` when present and safely falls back to token scope when missing.',
+  },
+  {
+    value: 'strict',
+    label: 'strict (require .aura)',
+    description: 'Requires explicit `.aura` mappings for secret access.',
+  },
+  {
+    value: 'off',
+    label: 'off (disable project allowlist)',
+    description: 'Disables project allowlist checks for local token access.',
+  },
+] as const;
+const ONBOARDING_LOCAL_AGENT_MODE_OPTIONS = [
+  {
+    value: 'dev',
+    label: 'dev',
+    description: 'Recommended: auto-approve enabled with scoped non-financial profile.',
+  },
+  {
+    value: 'strict',
+    label: 'local',
+    description: 'Disable local auto-approve. Every local agent token request needs manual approval.',
+  },
+  {
+    value: 'admin',
+    label: 'work',
+    description: 'Dangerous: broad local agent access. Not recommended for primary vault workflows.',
+  },
+] as const;
+const VAULT_COLOR_MODE_OPTIONS = [
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+] as const;
+const VAULT_UI_SCALE_OPTIONS = [
+  { value: 'normal', label: 'Normal' },
+  { value: 'big', label: 'Big' },
+] as const;
+
+type OnboardingSeedDraft = {
+  mnemonic: string;
+  createdAt: number;
+};
+
+const ONBOARDING_SEED_STORAGE_KEY = 'aura:onboarding-seed-draft';
+const ONBOARDING_SEED_TTL_MS = 15 * 60 * 1000;
+const DASHBOARD_TRANSITION_TIMEOUT_MS = 1500;
+const BIP39_WORD_SET = new Set((bip39.wordlists.english as string[]).map((word) => word.toLowerCase()));
+
+const normalizeRecoveryWords = (raw: string): string[] => raw
+  .trim()
+  .toLowerCase()
+  .split(/\s+/)
+  .filter(Boolean);
+
+export default function UnlockPage() {
+  const { token, setToken, clearToken } = useAuth();
+  const { colorMode, uiScale, setColorMode, setUiScale } = useTheme();
+
+  const [pageState, setPageState] = useState<PageState>('loading');
+  const [password, setPassword] = useState('');
+  const [trustDevice, setTrustDevice] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [mnemonic, setMnemonic] = useState<string | null>(null);
+  const [seedAcknowledged, setSeedAcknowledged] = useState(false);
+  const [seedRecoveryNotice, setSeedRecoveryNotice] = useState<string | null>(null);
+  const [seedPhraseActionStatus, setSeedPhraseActionStatus] = useState<SeedPhraseActionStatus | null>(null);
+  const [localAgentMode, setLocalAgentMode] = useState<LocalAgentMode>('dev');
+  const [setupOnboardingStep, setSetupOnboardingStep] = useState<SetupOnboardingStep>('seed');
+  const [onboardingToken, setOnboardingToken] = useState<string | null>(null);
+  const [dashboardTransitionTimedOut, setDashboardTransitionTimedOut] = useState(false);
+  const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
+  const { notifications: pageNotifications, dismissNotification: pageDismissNotification } = useAgentActions({ autoFetch: !!token });
+  const [confirmNuke, setConfirmNuke] = useState(false);
+  const [nuking, setNuking] = useState(false);
+  const [nukeError, setNukeError] = useState<string | null>(null);
+  const [policySettings, setPolicySettings] = useState<LocalPolicySettings | null>(null);
+  const [policyForm, setPolicyForm] = useState<LocalPolicySettings>({
+    profile: 'dev',
+    profileVersion: 'v1',
+    autoApprove: true,
+    projectScopeMode: 'auto',
+  });
+  const [policyLoadError, setPolicyLoadError] = useState<string | null>(null);
+  const [policySaveError, setPolicySaveError] = useState<string | null>(null);
+  const [policyFormErrors, setPolicyFormErrors] = useState<Record<string, string>>({});
+  const [policySaveSuccess, setPolicySaveSuccess] = useState<string | null>(null);
+  const [policyLoading, setPolicyLoading] = useState(false);
+  const [policySaving, setPolicySaving] = useState(false);
+  const [dangerConfirmOpen, setDangerConfirmOpen] = useState(false);
+  const [discardConfirmOpen, setDiscardConfirmOpen] = useState(false);
+  const [vaultThemeOpen, setVaultThemeOpen] = useState(true);
+  const [agentSettingsOpen, setAgentSettingsOpen] = useState(false);
+  const [securitySettingsOpen, setSecuritySettingsOpen] = useState(false);
+  const [dangerZoneOpen, setDangerZoneOpen] = useState(false);
+  const [backupSectionOpen, setBackupSectionOpen] = useState(false);
+  const [backups, setBackups] = useState<Array<{ filename: string; timestamp: string; size: number; date: string }>>([]);
+  const [backupsLoading, setBackupsLoading] = useState(false);
+  const [creatingBackup, setCreatingBackup] = useState(false);
+  const [restoringBackup, setRestoringBackup] = useState<string | null>(null);
+  const [exportingDb, setExportingDb] = useState(false);
+  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState<string | null>(null);
+  const [restoreAnchorEl, setRestoreAnchorEl] = useState<HTMLElement | null>(null);
+  const [showPasswordModal, setShowPasswordModal] = useState(false);
+  const [currentPasswordValue, setCurrentPasswordValue] = useState('');
+  const [newPasswordValue, setNewPasswordValue] = useState('');
+  const [confirmPasswordValue, setConfirmPasswordValue] = useState('');
+  const [passwordChangeError, setPasswordChangeError] = useState<string | null>(null);
+  const [passwordChangeSuccess, setPasswordChangeSuccess] = useState<string | null>(null);
+  const [passwordChanging, setPasswordChanging] = useState(false);
+  const [showSeedRecovery, setShowSeedRecovery] = useState(false);
+  const [recoveryWordCount, setRecoveryWordCount] = useState<12 | 24>(12);
+  const [recoveryWords, setRecoveryWords] = useState<string[]>(Array(12).fill(''));
+
+  // Passkey biometric unlock state
+  const [passkeyAvailable, setPasskeyAvailable] = useState(false);
+  const [passkeyLoading, setPasskeyLoading] = useState(false);
+  const [recoveryNewPassword, setRecoveryNewPassword] = useState('');
+  const [recoveryError, setRecoveryError] = useState<string | null>(null);
+  const [recoveryLoading, setRecoveryLoading] = useState(false);
+
+  const hasPendingSeedConfirmation = useMemo(() => Boolean(mnemonic), [mnemonic]);
+  const recoveryWordsFilled = useMemo(() => recoveryWords.filter((word) => word.length > 0).length, [recoveryWords]);
+  const normalizedRecoveryPhrase = useMemo(() => recoveryWords.map((word) => word.trim().toLowerCase()).join(' ').trim(), [recoveryWords]);
+  const invalidRecoveryIndexes = useMemo(() => {
+    const invalid = new Set<number>();
+    recoveryWords.forEach((word, index) => {
+      if (!word) return;
+      if (!BIP39_WORD_SET.has(word.trim().toLowerCase())) {
+        invalid.add(index);
+      }
+    });
+    return invalid;
+  }, [recoveryWords]);
+  const isRecoveryPhraseStructurallyValid = useMemo(() => {
+    if (recoveryWordsFilled !== recoveryWordCount) return false;
+    if (invalidRecoveryIndexes.size > 0) return false;
+    return bip39.validateMnemonic(normalizedRecoveryPhrase);
+  }, [invalidRecoveryIndexes.size, normalizedRecoveryPhrase, recoveryWordCount, recoveryWordsFilled]);
+
+  const isDangerousPolicySelection = useCallback((settings: LocalPolicySettings) => {
+    return settings.profile === 'admin';
+  }, []);
+
+  const policyFormDirty = useMemo(() => {
+    if (!policySettings) return false;
+    return JSON.stringify(policySettings) !== JSON.stringify(policyForm);
+  }, [policyForm, policySettings]);
+
+  useEffect(() => {
+    try {
+      const rawDraft = sessionStorage.getItem(ONBOARDING_SEED_STORAGE_KEY);
+      if (!rawDraft) return;
+      const parsed = JSON.parse(rawDraft) as OnboardingSeedDraft;
+      if (!parsed?.mnemonic || typeof parsed.createdAt !== 'number') {
+        sessionStorage.removeItem(ONBOARDING_SEED_STORAGE_KEY);
+        return;
+      }
+      if (Date.now() - parsed.createdAt > ONBOARDING_SEED_TTL_MS) {
+        sessionStorage.removeItem(ONBOARDING_SEED_STORAGE_KEY);
+        setSeedRecoveryNotice('Recovery phrase draft expired. Restart setup to generate a new phrase.');
+        return;
+      }
+
+      setMnemonic(parsed.mnemonic);
+      setSetupOnboardingStep('seed');
+      setPageState('setup');
+      setSeedRecoveryNotice('Recovered your in-progress recovery phrase for this tab. Confirm after you store it safely.');
+    } catch {
+      sessionStorage.removeItem(ONBOARDING_SEED_STORAGE_KEY);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mnemonic) {
+      sessionStorage.removeItem(ONBOARDING_SEED_STORAGE_KEY);
+      setSetupOnboardingStep('seed');
+      setSeedPhraseActionStatus(null);
+      return;
+    }
+    const draft: OnboardingSeedDraft = {
+      mnemonic,
+      createdAt: Date.now(),
+    };
+    sessionStorage.setItem(ONBOARDING_SEED_STORAGE_KEY, JSON.stringify(draft));
+  }, [mnemonic]);
+
+  useEffect(() => {
+    if (pageState !== 'locked') {
+      setShowSeedRecovery(false);
+    }
+  }, [pageState]);
+
+  // Check if passkey biometric unlock is usable (registered + vault unlocked server-side)
+  useEffect(() => {
+    if (pageState !== 'locked') {
+      setPasskeyAvailable(false);
+      return;
+    }
+    if (typeof window === 'undefined' || !window.PublicKeyCredential) return;
+    // Electron's Chromium reports WebAuthn as available but the sandbox
+    // can't complete the ceremony — skip passkey in desktop app.
+    if (typeof window !== 'undefined' && (window as unknown as Record<string, unknown>).auraDesktop) return;
+
+    let cancelled = false;
+    (async () => {
+      try {
+        const status = await api.get<{ registered: boolean }>(Api.Wallet, '/auth/passkey/status');
+        if (cancelled || !status.registered) return;
+        // Probe authenticate/options to confirm vault is unlocked server-side.
+        // If the server returns vault_locked, biometric auth won't work.
+        await api.post(Api.Wallet, '/auth/passkey/authenticate/options', {});
+        if (!cancelled) setPasskeyAvailable(true);
+      } catch { /* vault_locked or no passkeys — hide button */ }
+    })();
+    return () => { cancelled = true; };
+  }, [pageState]);
+
+  const fetchState = useCallback(async () => {
+    // Page reload recovery: keypair is memory-only and lost on reload.
+    // If token exists but keypair is gone, regenerate keypair and re-key the session.
+    if (token && !getVaultPrivateKey()) {
+      try {
+        const { publicKeyBase64 } = await generateVaultKeypair();
+        const result = await rekeySession(publicKeyBase64);
+        if (result.token) {
+          setToken(result.token);
+        }
+        // Keypair restored, continue to fetch state normally
+      } catch {
+        // Re-key failed (token expired, server restarted, vault locked) — fall back to locked
+        clearToken();
+        setPageState('locked');
+        return;
+      }
+    }
+
+    try {
+      // Use /setup (lightweight status check) instead of /wallets (which fetches RPC balances
+      // and can hang on cold start). /setup only checks in-memory vault state — no RPC calls.
+      const [status, vaultData] = await Promise.all([
+        api.get<{ hasWallet: boolean; unlocked: boolean }>(Api.Wallet, '/setup'),
+        api.get<{ vaults: VaultInfo[] }>(Api.Wallet, '/setup/vaults'),
+      ]);
+
+      const configured = status.hasWallet || (vaultData.vaults && vaultData.vaults.some(v => v.isPrimary));
+
+      if (!configured) {
+        setPageState('setup');
+      } else if (hasPendingSeedConfirmation) {
+        setPageState('setup');
+      } else if (!status.unlocked || !token) {
+        setPageState('locked');
+      } else {
+        setPageState('unlocked');
+      }
+    } catch {
+      setPageState('setup');
+    }
+  }, [token, clearToken, hasPendingSeedConfirmation]);
+
+  useEffect(() => {
+    fetchState();
+  }, [fetchState]);
+
+  const loadLocalPolicySettings = useCallback(async () => {
+    if (!token) {
+      setPolicyLoadError('Unlock vault first to manage local socket policy.');
+      return;
+    }
+
+    setPolicyLoading(true);
+    setPolicyLoadError(null);
+    setPolicySaveError(null);
+    setPolicySaveSuccess(null);
+    try {
+      const headers = { Authorization: `Bearer ${token}` };
+      const baseUrl = api.getBaseUrl(Api.Wallet);
+      const defaultsRes = await fetch(`${baseUrl}/defaults`, { headers });
+      if (!defaultsRes.ok) {
+        throw new Error('Failed to load canonical trust policy defaults.');
+      }
+
+      const defaultsJson = await defaultsRes.json() as {
+        success?: boolean;
+        defaults?: Record<string, Array<{ key: string; value: unknown }>>;
+      };
+      if (defaultsJson.success === false) {
+        throw new Error('Failed to load canonical trust policy defaults.');
+      }
+      const flatDefaults = Object.values(defaultsJson.defaults || {}).flat();
+      const findDefault = (key: string): unknown => flatDefaults.find((item) => item.key === key)?.value;
+
+      const loadedProfile = String(findDefault('trust.localProfile') ?? '').trim() as LocalAgentMode;
+      if (!LOCAL_POLICY_PROFILES.includes(loadedProfile)) {
+        throw new Error(`Unknown persisted local profile: ${loadedProfile || '(empty)'}`);
+      }
+
+      const profileVersion = String(findDefault('trust.localProfileVersion') ?? 'v1').trim();
+      if (profileVersion !== 'v1') {
+        throw new Error('Unknown local profile version; refusing to edit settings.');
+      }
+
+      const loadedProjectScopeMode = String(findDefault('trust.projectScopeMode') ?? 'auto').trim() as ProjectScopeMode;
+      if (!LOCAL_PROJECT_SCOPE_MODES.includes(loadedProjectScopeMode)) {
+        throw new Error(`Unknown persisted project scope mode: ${loadedProjectScopeMode || '(empty)'}`);
+      }
+
+      const loaded: LocalPolicySettings = {
+        profile: loadedProfile,
+        profileVersion: 'v1',
+        autoApprove: Boolean(findDefault('trust.localAutoApprove')),
+        projectScopeMode: loadedProjectScopeMode,
+      };
+
+      setPolicySettings(loaded);
+      setPolicyForm(loaded);
+    } catch (err) {
+      setPolicyLoadError((err as Error).message || 'Failed to load policy settings');
+      setPolicySettings(null);
+    } finally {
+      setPolicyLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (showSettingsDrawer) {
+      void loadLocalPolicySettings();
+    }
+  }, [showSettingsDrawer, loadLocalPolicySettings]);
+
+  const persistLocalPolicySettings = useCallback(async () => {
+    if (!token) throw new Error('Missing auth token for save.');
+    if (!LOCAL_POLICY_PROFILES.includes(policyForm.profile)) {
+      throw new Error('Unknown profile selected; refusing to persist.');
+    }
+    if (!LOCAL_PROJECT_SCOPE_MODES.includes(policyForm.projectScopeMode)) {
+      throw new Error('Unknown project scope mode selected; refusing to persist.');
+    }
+
+    const baseUrl = api.getBaseUrl(Api.Wallet);
+    const headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    };
+
+    const updates: Array<[string, unknown]> = [
+      ['trust.localProfile', policyForm.profile],
+      ['trust.localProfileVersion', 'v1'],
+      ['trust.localAutoApprove', policyForm.autoApprove],
+      ['trust.projectScopeMode', policyForm.projectScopeMode],
+    ];
+
+    const results = await Promise.all(
+      updates.map(async ([key, value]) => {
+        const response = await fetch(`${baseUrl}/defaults/${key}`, {
+          method: 'PATCH',
+          headers,
+          body: JSON.stringify({ value }),
+        });
+        return response.ok;
+      })
+    );
+
+    if (!results.every(Boolean)) {
+      throw new Error('Failed to save canonical trust policy defaults.');
+    }
+
+    return { ...policyForm, profileVersion: 'v1' } as LocalPolicySettings;
+  }, [policyForm, token]);
+
+  const handleSaveLocalPolicy = useCallback(async () => {
+    if (!policySettings || policyLoading || policySaving) return;
+    const enablingDangerous = !isDangerousPolicySelection(policySettings) && isDangerousPolicySelection(policyForm);
+    if (enablingDangerous && !dangerConfirmOpen) {
+      setDangerConfirmOpen(true);
+      return;
+    }
+
+    setPolicySaving(true);
+    setPolicySaveError(null);
+    setPolicySaveSuccess(null);
+    try {
+      const saved = await persistLocalPolicySettings();
+      setPolicySettings(saved);
+      setPolicyForm(saved);
+      setDangerConfirmOpen(false);
+      setPolicySaveSuccess('Local trust policy saved. Changes apply to newly issued local tokens only.');
+    } catch (err) {
+      const message = (err as Error).message || 'Failed to save policy settings';
+      setDangerConfirmOpen(false);
+      if (
+        message.includes('Unknown profile selected')
+        || message.includes('Unknown project scope mode selected')
+      ) {
+        setPolicySaveError(message);
+      } else {
+        await loadLocalPolicySettings();
+        setPolicySaveError(`${message} Server values were reloaded.`);
+      }
+    } finally {
+      setPolicySaving(false);
+    }
+  }, [dangerConfirmOpen, isDangerousPolicySelection, loadLocalPolicySettings, persistLocalPolicySettings, policyForm, policyLoading, policySaving, policySettings]);
+
+  const closePasswordModal = useCallback(() => {
+    setShowPasswordModal(false);
+    setCurrentPasswordValue('');
+    setNewPasswordValue('');
+    setConfirmPasswordValue('');
+    setPasswordChangeError(null);
+    setPasswordChanging(false);
+  }, []);
+
+  const handleChangePrimaryPassword = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordChangeError(null);
+    setPasswordChangeSuccess(null);
+
+    if (newPasswordValue.length < 8) {
+      setPasswordChangeError('New password must be at least 8 characters.');
+      return;
+    }
+    if (newPasswordValue !== confirmPasswordValue) {
+      setPasswordChangeError('New password and confirmation do not match.');
+      return;
+    }
+
+    setPasswordChanging(true);
+    try {
+      await changePrimaryVaultPassword(currentPasswordValue, newPasswordValue);
+      setPasswordChangeSuccess('Primary vault password updated.');
+      closePasswordModal();
+    } catch (err) {
+      setPasswordChangeError((err as Error).message || 'Failed to change primary password.');
+    } finally {
+      setPasswordChanging(false);
+    }
+  }, [closePasswordModal, confirmPasswordValue, currentPasswordValue, newPasswordValue]);
+
+  const handleRecoveryWordChange = useCallback((index: number, value: string) => {
+    const normalized = value.trim().toLowerCase();
+
+    if (normalized.includes(' ')) {
+      const parsed = normalizeRecoveryWords(normalized);
+      if (parsed.length > 1) {
+        const nextWords = [...recoveryWords];
+        parsed.forEach((word, offset) => {
+          const targetIndex = index + offset;
+          if (targetIndex < nextWords.length) nextWords[targetIndex] = word;
+        });
+        setRecoveryWords(nextWords);
+        setRecoveryError(null);
+        return;
+      }
+    }
+
+    const nextWords = [...recoveryWords];
+    nextWords[index] = normalized;
+    setRecoveryWords(nextWords);
+    setRecoveryError(null);
+  }, [recoveryWords]);
+
+  const handleRecoveryPaste = useCallback((index: number, text: string) => {
+    const parsed = normalizeRecoveryWords(text);
+    if (parsed.length <= 1) return false;
+
+    const nextWordCount: 12 | 24 = parsed.length > 12 ? 24 : recoveryWordCount;
+    if (nextWordCount !== recoveryWordCount) {
+      setRecoveryWordCount(nextWordCount);
+      const nextWords = Array(nextWordCount).fill('');
+      parsed.slice(0, nextWordCount).forEach((word, wordIndex) => {
+        nextWords[wordIndex] = word;
+      });
+      setRecoveryWords(nextWords);
+      setRecoveryError(null);
+      return true;
+    }
+
+    const nextWords = [...recoveryWords];
+    parsed.forEach((word, offset) => {
+      const targetIndex = index + offset;
+      if (targetIndex < nextWords.length) nextWords[targetIndex] = word;
+    });
+    setRecoveryWords(nextWords);
+    setRecoveryError(null);
+    return true;
+  }, [recoveryWordCount, recoveryWords]);
+
+  const handleRecoverAccess = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setRecoveryError(null);
+
+    if (recoveryNewPassword.length < 8) {
+      setRecoveryError('New password must be at least 8 characters.');
+      return;
+    }
+    if (!isRecoveryPhraseStructurallyValid) {
+      setRecoveryError('Enter a valid 12 or 24-word BIP-39 seed phrase.');
+      return;
+    }
+
+    setRecoveryLoading(true);
+    try {
+      const { publicKeyBase64 } = await generateVaultKeypair();
+      const result = await recoverWalletAccess(normalizedRecoveryPhrase, recoveryNewPassword, publicKeyBase64);
+      if (result.token) {
+        setToken(result.token, { persist: trustDevice ? 'local' : 'session' });
+      }
+      setPassword('');
+      setRecoveryNewPassword('');
+      setRecoveryWords(Array(recoveryWordCount).fill(''));
+      // Route through transition state to avoid jarring layout shift
+      setPageState('transition');
+      void bootstrapDashboardTransition();
+    } catch (err) {
+      setRecoveryError((err as Error).message || 'Recovery failed.');
+    } finally {
+      setRecoveryLoading(false);
+    }
+  }, [fetchState, isRecoveryPhraseStructurallyValid, normalizedRecoveryPhrase, recoveryNewPassword, recoveryWordCount, setToken, trustDevice]);
+
+  const handleUnlock = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      // Generate keypair before unlock so the token is minted with our pubkey
+      const { publicKeyBase64 } = await generateVaultKeypair();
+      const data = await unlockWallet(password, undefined, publicKeyBase64);
+      if (data.token) {
+        setToken(data.token, { persist: trustDevice ? 'local' : 'session' });
+      }
+      setPassword('');
+      // Route through transition state to avoid jarring layout shift
+      setPageState('transition');
+      void bootstrapDashboardTransition();
+    } catch (err) {
+      setError((err as Error).message || 'Unlock failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSetup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password.length < 8) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      // Generate keypair before setup so the initial token has our pubkey
+      const { publicKeyBase64 } = await generateVaultKeypair();
+      const result = await setupWallet(password, publicKeyBase64);
+      if (result.token) {
+        setToken(result.token, { persist: trustDevice ? 'local' : 'session' });
+        setOnboardingToken(result.token);
+      }
+      if (result.mnemonic) {
+        setMnemonic(result.mnemonic);
+        setSeedAcknowledged(false);
+        setSetupOnboardingStep('seed');
+        setSeedRecoveryNotice(null);
+        setSeedPhraseActionStatus(null);
+      }
+      setPassword('');
+      if (!result.mnemonic) fetchState();
+    } catch (err) {
+      setError((err as Error).message || 'Setup failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopySeedPhrase = useCallback(async () => {
+    if (!mnemonic) return;
+
+    let copied = false;
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(mnemonic);
+        copied = true;
+      } catch {
+        copied = false;
+      }
+    }
+
+    if (copied) {
+      setSeedPhraseActionStatus('copied');
+      return;
+    }
+
+    const fallbackTextarea = document.createElement('textarea');
+    fallbackTextarea.value = mnemonic;
+    fallbackTextarea.setAttribute('readonly', 'true');
+    fallbackTextarea.style.position = 'fixed';
+    fallbackTextarea.style.left = '-9999px';
+    document.body.appendChild(fallbackTextarea);
+    fallbackTextarea.focus();
+    fallbackTextarea.select();
+
+    let fallbackCopied = false;
+    try {
+      fallbackCopied = document.execCommand('copy');
+    } catch {
+      fallbackCopied = false;
+    } finally {
+      fallbackTextarea.remove();
+    }
+
+    setSeedPhraseActionStatus(fallbackCopied ? 'copied' : 'copy-failed');
+  }, [mnemonic]);
+
+  const handleDownloadSeedBackup = useCallback(() => {
+    if (!mnemonic) return;
+
+    const dateStamp = new Date().toISOString().slice(0, 10);
+    const numberedWords = mnemonic
+      .split(' ')
+      .map((word, index) => `${index + 1}. ${word}`)
+      .join('\n');
+    const markdown = `# Aura Vault Seed Phrase Backup\n\n**Date:** ${dateStamp}\n**WARNING:** Keep this file safe and private. Anyone with this phrase can access your vault.\n\n${numberedWords}\n`;
+    const filename = `aura-seed-backup-${dateStamp}.md`;
+
+    let objectUrl = '';
+    const downloadLink = document.createElement('a');
+    try {
+      const blob = new Blob([markdown], { type: 'text/markdown;charset=utf-8' });
+      objectUrl = URL.createObjectURL(blob);
+      downloadLink.href = objectUrl;
+      downloadLink.download = filename;
+      downloadLink.style.display = 'none';
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      setSeedPhraseActionStatus('downloaded');
+    } catch {
+      setSeedPhraseActionStatus('download-failed');
+    } finally {
+      downloadLink.remove();
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    }
+  }, [mnemonic]);
+
+  const persistLocalAgentMode = useCallback(async () => {
+    const authToken = onboardingToken || token;
+    if (!authToken) {
+      throw new Error('Session token unavailable. Unlock again and retry setup.');
+    }
+
+    const profile = localAgentMode;
+    const profileVersion = 'v1';
+    const autoApprove = profile !== 'strict';
+    const baseUrl = api.getBaseUrl(Api.Wallet);
+    const headers = {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${authToken}`,
+    };
+
+    await fetch(`${baseUrl}/defaults/trust.localProfile`, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify({ value: profile }),
+    });
+    await fetch(`${baseUrl}/defaults/trust.localProfileVersion`, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify({ value: profileVersion }),
+    });
+    await fetch(`${baseUrl}/defaults/trust.localAutoApprove`, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify({ value: autoApprove }),
+    });
+  }, [localAgentMode, onboardingToken, token]);
+
+  const bootstrapDashboardTransition = useCallback(async () => {
+    setDashboardTransitionTimedOut(false);
+    let finished = false;
+    const timeout = window.setTimeout(() => {
+      if (!finished) setDashboardTransitionTimedOut(true);
+    }, DASHBOARD_TRANSITION_TIMEOUT_MS);
+
+    try {
+      await fetchState();
+      finished = true;
+    } finally {
+      window.clearTimeout(timeout);
+    }
+  }, [fetchState]);
+
+  const handlePasskeyUnlock = useCallback(async () => {
+    setPasskeyLoading(true);
+    setError(null);
+    try {
+      const { publicKeyBase64 } = await generateVaultKeypair();
+
+      const options = await api.post<{
+        challenge: string;
+        rpId: string;
+        allowCredentials: Array<{ id: string; transports?: string[] }>;
+        timeout: number;
+        userVerification: string;
+      }>(Api.Wallet, '/auth/passkey/authenticate/options', {});
+
+      const toBuffer = (b: string): ArrayBuffer => {
+        let s = b.replace(/-/g, '+').replace(/_/g, '/');
+        while (s.length % 4) s += '=';
+        const bin = atob(s);
+        const a = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++) a[i] = bin.charCodeAt(i);
+        return a.buffer;
+      };
+      const toBase64url = (b: ArrayBuffer): string => {
+        const bytes = new Uint8Array(b);
+        let bin = '';
+        for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+        return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+      };
+
+      const publicKey: PublicKeyCredentialRequestOptions = {
+        challenge: toBuffer(options.challenge),
+        rpId: options.rpId,
+        allowCredentials: (options.allowCredentials || []).map((c) => ({
+          type: 'public-key' as const,
+          id: toBuffer(c.id),
+          transports: c.transports as AuthenticatorTransport[] | undefined,
+        })),
+        timeout: options.timeout,
+        userVerification: (options.userVerification || 'required') as UserVerificationRequirement,
+      };
+
+      const credential = await navigator.credentials.get({ publicKey }) as PublicKeyCredential | null;
+      if (!credential) {
+        setPasskeyLoading(false);
+        return;
+      }
+
+      const response = credential.response as AuthenticatorAssertionResponse;
+
+      const result = await api.post<{ success: boolean; token?: string; error?: string }>(
+        Api.Wallet,
+        '/auth/passkey/authenticate/verify',
+        {
+          credential: {
+            id: toBase64url(credential.rawId),
+            rawId: toBase64url(credential.rawId),
+            type: credential.type,
+            response: {
+              clientDataJSON: toBase64url(response.clientDataJSON),
+              authenticatorData: toBase64url(response.authenticatorData),
+              signature: toBase64url(response.signature),
+              userHandle: response.userHandle ? toBase64url(response.userHandle) : undefined,
+            },
+          },
+          pubkey: publicKeyBase64,
+        },
+      );
+
+      if (result.success && result.token) {
+        setToken(result.token, { persist: trustDevice ? 'local' : 'session' });
+        setPageState('transition');
+        void bootstrapDashboardTransition();
+      } else {
+        setError(result.error || 'Biometric authentication failed');
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === 'NotAllowedError') {
+        setPasskeyLoading(false);
+        return;
+      }
+      const msg = err instanceof Error ? err.message : 'Biometric authentication failed';
+      if (msg.includes('vault_locked')) {
+        // Vault was locked between probe and attempt — just hide the button
+        setPasskeyAvailable(false);
+      } else {
+        setError(msg);
+      }
+    } finally {
+      setPasskeyLoading(false);
+    }
+  }, [trustDevice, setToken, bootstrapDashboardTransition]);
+
+  const handleFinalizeOnboarding = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await persistLocalAgentMode();
+      setMnemonic(null);
+      setSeedAcknowledged(false);
+      setSeedRecoveryNotice(null);
+      setOnboardingToken(null);
+      setSetupOnboardingStep('seed');
+      setPageState('transition');
+      void bootstrapDashboardTransition();
+    } catch (err) {
+      setError((err as Error).message || 'Failed to save local agent mode');
+    } finally {
+      setLoading(false);
+    }
+  }, [bootstrapDashboardTransition, persistLocalAgentMode]);
+
+  // CredentialVault already calls POST /lock and clearToken() before invoking onLock.
+  // This handler only needs to transition the page state.
+  const handleLock = useCallback(() => {
+    setError(null);
+    setPageState('locked');
+  }, []);
+
+  const handleNuke = useCallback(async () => {
+    if (!confirmNuke) {
+      setConfirmNuke(true);
+      setNukeError(null);
+      return;
+    }
+
+    setNuking(true);
+    setNukeError(null);
+    try {
+      await api.post(Api.Wallet, '/nuke', {});
+      setShowSettingsDrawer(false);
+      setDangerConfirmOpen(false);
+      setPolicySaveError(null);
+      setPolicyFormErrors({});
+      setPasswordChangeError(null);
+      setVaultThemeOpen(true);
+      setAgentSettingsOpen(false);
+      setSecuritySettingsOpen(false);
+      setDangerZoneOpen(false);
+      setShowPasswordModal(false);
+      setConfirmNuke(false);
+      setNuking(false);
+      setNukeError(null);
+      if (policySettings) setPolicyForm(policySettings);
+      window.location.reload();
+    } catch (err) {
+      setNukeError((err as Error).message || 'Failed to nuke wallet');
+      console.error('[UnlockPage] Nuke failed:', err);
+    } finally {
+      setNuking(false);
+    }
+  }, [confirmNuke, policySettings]);
+
+  // --- Backup / Export handlers ---
+
+  const fetchBackups = useCallback(async () => {
+    if (!token) { setBackups([]); return; }
+    setBackupsLoading(true);
+    try {
+      const data = await api.get<{ success: boolean; backups: Array<{ filename: string; timestamp: string; size: number; date: string }> }>(Api.Wallet, '/backup');
+      if (data.success) setBackups(data.backups);
+    } catch { setBackups([]); }
+    finally { setBackupsLoading(false); }
+  }, [token]);
+
+  const handleCreateBackup = useCallback(async () => {
+    setCreatingBackup(true);
+    try {
+      const data = await api.post<{ success: boolean; error?: string }>(Api.Wallet, '/backup');
+      if (data.success) await fetchBackups();
+    } catch (err) { console.error('Backup create failed', err); }
+    finally { setCreatingBackup(false); }
+  }, [fetchBackups]);
+
+  const handleExportDb = useCallback(async () => {
+    setExportingDb(true);
+    try {
+      const baseUrl = api.getBaseUrl(Api.Wallet);
+      const res = await fetch(`${baseUrl}/backup/export`, {
+        headers: { Authorization: `Bearer ${token || ''}` },
+      });
+      if (!res.ok) return;
+      const blob = await res.blob();
+      const disposition = res.headers.get('Content-Disposition') || '';
+      const match = disposition.match(/filename="?([^"]+)"?/);
+      const filename = match ? match[1] : 'auramaxx-export.db';
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) { console.error('Export failed', err); }
+    finally { setExportingDb(false); }
+  }, [token]);
+
+  const handleRestoreBackup = useCallback(async (filename: string) => {
+    setRestoringBackup(filename);
+    try {
+      const data = await api.put<{ success: boolean; error?: string }>(Api.Wallet, '/backup', { filename });
+      if (data.success) window.location.reload();
+    } catch (err) { console.error('Restore failed', err); }
+    finally { setRestoringBackup(null); }
+  }, []);
+
+  const formatBackupDate = (ts: string) => {
+    const y = ts.slice(0, 4), m = ts.slice(4, 6), d = ts.slice(6, 8), h = ts.slice(9, 11), min = ts.slice(11, 13);
+    return `${y}-${m}-${d} ${h}:${min}`;
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const closeSettingsDrawer = useCallback(() => {
+    if (policyFormDirty) {
+      setDiscardConfirmOpen(true);
+      return;
+    }
+    setShowSettingsDrawer(false);
+    setDangerConfirmOpen(false);
+    setPolicySaveError(null);
+    setPolicyFormErrors({});
+    setPasswordChangeError(null);
+    setVaultThemeOpen(true);
+    setAgentSettingsOpen(false);
+    setSecuritySettingsOpen(false);
+    setDangerZoneOpen(false);
+    setBackupSectionOpen(false);
+    setRestoreConfirmOpen(null);
+    setRestoreAnchorEl(null);
+    setShowPasswordModal(false);
+    setConfirmNuke(false);
+    setNuking(false);
+    setNukeError(null);
+    if (policySettings) setPolicyForm(policySettings);
+  }, [policyFormDirty, policySettings]);
+
+  // Transition: full-screen loader between locked and unlocked
+  if (pageState === 'transition') {
+    return (
+      <div className="h-screen bg-[var(--color-background,#f4f4f5)] flex flex-col items-center justify-center animate-fade-in-up">
+        <div className="w-6 h-6 border-2 border-[var(--color-border,#d4d4d8)] border-t-[var(--color-text,#0a0a0a)] animate-spin" />
+        <div className="mt-4 label-specimen text-[var(--color-text-muted,#6b7280)] animate-pulse">
+          DECRYPTING VAULT
+        </div>
+        <div className="mt-3 w-32 h-[2px] skeleton-mech" />
+        {dashboardTransitionTimedOut && (
+          <div className="mt-6 w-full max-w-[280px] space-y-3 text-center">
+            <div className="text-[9px] text-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/10 px-3 py-2 border border-[var(--color-danger,#ef4444)]/20">
+              Dashboard took too long. You can retry without re-running onboarding.
+            </div>
+            <button
+              onClick={() => { void bootstrapDashboardTransition(); }}
+              className="w-full py-2.5 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-xs tracking-widest font-bold hover:opacity-90 transition-opacity clip-specimen-sm"
+            >
+              RETRY
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Unlocked: render full-screen vault + root settings drawer controls
+  if (pageState === 'unlocked') {
+    return (
+      <div className="relative h-screen vault-surface">
+        {/* Top-right icon bar: Settings, Notifications, Dark mode */}
+        <div className="fixed top-3 right-6 z-50 flex items-center gap-1.5">
+          <button
+            onClick={() => setShowSettingsDrawer(true)}
+            className="p-1.5 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-surface,#ffffff)]/50 transition-colors rounded"
+            title="Settings"
+            aria-label="Settings"
+          >
+            <Settings size={14} />
+          </button>
+          <NotificationDrawer
+            notifications={pageNotifications}
+            onDismiss={pageDismissNotification}
+          />
+          <DocsThemeToggle />
+        </div>
+
+        {/* Bottom-right links: Docs, API, GitHub, X, Help */}
+        <div className="fixed bottom-16 right-6 z-50 flex items-center gap-3 font-mono text-[10px] tracking-widest">
+          <Link href="/docs" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">DOCS</Link>
+          <Link href="/api" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">API</Link>
+          <a href="https://github.com/Aura-Industry/auramaxx" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">GITHUB</a>
+          <a href="https://x.com/npxauramaxx" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">X</a>
+          <a href="https://x.com/hi_im_nico" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">HELP</a>
+        </div>
+
+        <CredentialVault
+          onLock={handleLock}
+          onSettings={() => setShowSettingsDrawer(true)}
+        />
+
+        <Drawer
+          isOpen={showSettingsDrawer}
+          onClose={closeSettingsDrawer}
+          title="ROOT SETTINGS"
+          subtitle="Local socket policy"
+          footerLabel=""
+        >
+          <div className="space-y-4">
+            {passwordChangeSuccess && (
+              <div className="text-[10px] text-[var(--color-info)] border border-[var(--color-info)]/30 bg-[var(--color-info)]/10 px-3 py-2">
+                {passwordChangeSuccess}
+              </div>
+            )}
+
+            <TyvekCollapsibleSection
+              title="VAULT_THEME"
+              isOpen={vaultThemeOpen}
+              onToggle={() => setVaultThemeOpen((open) => !open)}
+              className="overflow-hidden"
+              contentClassName="p-[var(--space-md)] border-t border-[var(--color-border)]"
+            >
+              <label className="block text-[9px] text-[var(--color-text-faint)] tracking-widest mb-2">COLOR MODE</label>
+              <ItemPicker
+                options={[...VAULT_COLOR_MODE_OPTIONS]}
+                value={colorMode}
+                onChange={(value) => setColorMode(value as ColorMode)}
+              />
+              <label className="block mt-3 text-[9px] text-[var(--color-text-faint)] tracking-widest mb-2">UI SCALE</label>
+              <ItemPicker
+                options={[...VAULT_UI_SCALE_OPTIONS]}
+                value={uiScale}
+                onChange={(value) => setUiScale(value as UiScale)}
+              />
+              <div className="mt-2 text-[9px] text-[var(--color-text-muted)]">
+                Dark adjusts vault color contrast. Big increases typography, spacing, radius, and shadows.
+              </div>
+            </TyvekCollapsibleSection>
+
+            <TyvekCollapsibleSection
+              title="DEFAULT_AGENT_PROFILE"
+              icon={<Bot size={12} />}
+              isOpen={agentSettingsOpen}
+              onToggle={() => setAgentSettingsOpen((open) => !open)}
+              className="overflow-hidden"
+              contentClassName="px-4 pb-4 space-y-3 border-t border-[var(--color-border)]"
+            >
+              {policyLoadError && (
+                <div className="space-y-2 pt-3">
+                  <div className="text-[10px] text-[var(--color-danger)] border border-[var(--color-danger)]/30 bg-[var(--color-danger)]/10 px-3 py-2">
+                    {policyLoadError}
+                  </div>
+                  <Button
+                    type="button"
+                    onClick={() => void loadLocalPolicySettings()}
+                    disabled={policyLoading}
+                    variant="secondary"
+                    size="md"
+                  >
+                    {policyLoading ? 'RETRYING...' : 'RETRY LOAD'}
+                  </Button>
+                </div>
+              )}
+
+              {!policyLoadError && (
+                <>
+                  <div className="pt-3 flex items-center justify-between text-[10px] font-mono text-[var(--color-text)]">
+                    <span>AUTO-APPROVE LOCAL REQUESTS</span>
+                    <Toggle
+                      size="sm"
+                      checked={policyForm.autoApprove}
+                      onChange={(checked) => setPolicyForm((prev) => ({ ...prev, autoApprove: checked }))}
+                      disabled={policyLoading || policySaving}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-[9px] text-[var(--color-text-faint)] tracking-widest mb-2">LOCAL PROFILE</label>
+                    <ItemPicker
+                      ariaLabel="LOCAL PROFILE"
+                      options={[...LOCAL_PROFILE_ITEM_OPTIONS]}
+                      value={policyForm.profile}
+                      onChange={(value) => setPolicyForm((prev) => ({ ...prev, profile: value as LocalAgentMode }))}
+                      disabled={policyLoading || policySaving}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-[9px] text-[var(--color-text-faint)] tracking-widest mb-2">PROJECT SCOPE MODE</label>
+                    <ItemPicker
+                      ariaLabel="PROJECT SCOPE MODE"
+                      options={[...LOCAL_PROJECT_SCOPE_ITEM_OPTIONS]}
+                      value={policyForm.projectScopeMode}
+                      onChange={(value) => setPolicyForm((prev) => ({ ...prev, projectScopeMode: value as ProjectScopeMode }))}
+                      disabled={policyLoading || policySaving}
+                    />
+                    <div className="mt-1 text-[9px] text-[var(--color-text-muted)]">
+                      Strict requires `.aura` mappings for `get_secret`. Auto allows token-scope fallback when `.aura` is missing.
+                    </div>
+                  </div>
+
+                  {dangerConfirmOpen && (
+                    <div className="text-[10px] text-[var(--color-danger)] border border-[var(--color-danger)]/30 bg-[var(--color-danger)]/10 px-3 py-2 space-y-2">
+                      <div>Dangerous mode broadens local token scope (admin profile or super-scopes).</div>
+                      <div className="flex gap-2">
+                        <Button
+                          type="button"
+                          onClick={() => {
+                            setDangerConfirmOpen(false);
+                            if (policySettings) setPolicyForm(policySettings);
+                          }}
+                          variant="secondary"
+                          size="sm"
+                          className="!h-8"
+                        >
+                          CANCEL
+                        </Button>
+                        <Button
+                          type="button"
+                          onClick={() => { void handleSaveLocalPolicy(); }}
+                          disabled={policySaving}
+                          variant="danger"
+                          size="sm"
+                          className="!h-8"
+                        >
+                          CONFIRM DANGEROUS MODE
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="text-[9px] text-[var(--color-text-muted)] px-3 py-2">
+                    Policy changes apply to newly issued local tokens only.
+                  </div>
+
+                  {policySaveError && <div className="text-[10px] text-[var(--color-danger)]">{policySaveError}</div>}
+                  {policySaveSuccess && <div className="text-[10px] text-[var(--color-info)]">{policySaveSuccess}</div>}
+
+                  <Button
+                    type="button"
+                    onClick={() => { void handleSaveLocalPolicy(); }}
+                    disabled={Boolean(policyLoadError) || policyLoading || policySaving || !policySettings}
+                    variant="primary"
+                    size="lg"
+                    className="w-full"
+                  >
+                    {policySaving ? 'SAVING...' : 'SAVE LOCAL POLICY'}
+                  </Button>
+                </>
+              )}
+            </TyvekCollapsibleSection>
+
+            <TyvekCollapsibleSection
+              title="PRIMARY_PASSWORD"
+              icon={<KeyRound size={12} />}
+              isOpen={securitySettingsOpen}
+              onToggle={() => setSecuritySettingsOpen((open) => !open)}
+              className="overflow-hidden"
+              contentClassName="px-4 pb-4 pt-3 space-y-3 border-t border-[var(--color-border)]"
+            >
+              <div className="text-[9px] text-[var(--color-text-muted)] leading-relaxed">
+                Rotate your primary vault password. This updates the vault wrapper encryption and keeps existing credentials intact.
+              </div>
+              {passwordChangeError && (
+                <div className="text-[10px] text-[var(--color-danger)] border border-[var(--color-danger)]/30 bg-[var(--color-danger)]/10 px-3 py-2">
+                  {passwordChangeError}
+                </div>
+              )}
+              <Button
+                type="button"
+                onClick={() => {
+                  setPasswordChangeError(null);
+                  setShowPasswordModal(true);
+                }}
+                variant="secondary"
+                size="lg"
+                className="w-full"
+              >
+                CHANGE PRIMARY PASSWORD
+              </Button>
+            </TyvekCollapsibleSection>
+
+            <TyvekCollapsibleSection
+              title="DATABASE_BACKUP"
+              icon={<Database size={12} />}
+              isOpen={backupSectionOpen}
+              onToggle={() => {
+                const next = !backupSectionOpen;
+                setBackupSectionOpen(next);
+                if (next) void fetchBackups();
+              }}
+              className="overflow-hidden"
+              contentClassName="px-4 pb-4 pt-3 space-y-3 border-t border-[var(--color-border)]"
+            >
+              <div className="flex gap-2">
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  onClick={() => void handleCreateBackup()}
+                  disabled={creatingBackup}
+                  loading={creatingBackup}
+                  icon={!creatingBackup ? <Plus size={12} /> : undefined}
+                  className="flex-1"
+                >
+                  {creatingBackup ? 'CREATING...' : 'CREATE BACKUP'}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  onClick={() => void handleExportDb()}
+                  disabled={exportingDb}
+                  loading={exportingDb}
+                  icon={!exportingDb ? <Database size={12} /> : undefined}
+                  className="flex-1"
+                >
+                  {exportingDb ? 'EXPORTING...' : 'EXPORT DB'}
+                </Button>
+              </div>
+
+              {backupsLoading ? (
+                <div className="py-4 flex items-center justify-center">
+                  <Loader2 size={16} className="animate-spin text-[var(--color-text-muted)]" />
+                </div>
+              ) : backups.length === 0 ? (
+                <div className="py-3 text-center">
+                  <div className="font-mono text-[9px] text-[var(--color-text-muted)]">No backups found</div>
+                </div>
+              ) : (
+                <div className="space-y-1 max-h-48 overflow-y-auto">
+                  {backups.map((backup) => (
+                    <div key={backup.filename} className="relative">
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        size="md"
+                        onClick={(e) => {
+                          setRestoreAnchorEl(e.currentTarget as unknown as HTMLElement);
+                          setRestoreConfirmOpen(backup.filename);
+                        }}
+                        className="w-full !h-auto !px-2 !py-2 !justify-between group"
+                      >
+                        <div className="flex items-center gap-2">
+                          <RotateCcw size={10} className="text-[var(--color-text-muted)] group-hover:text-[var(--color-text)]" />
+                          <span className="font-mono text-[10px] text-[var(--color-text)]">
+                            {formatBackupDate(backup.timestamp)}
+                          </span>
+                        </div>
+                        <span className="font-mono text-[9px] text-[var(--color-text-muted)]">
+                          {formatSize(backup.size)}
+                        </span>
+                      </Button>
+                      <ConfirmationModal
+                        isOpen={restoreConfirmOpen === backup.filename}
+                        onClose={() => { setRestoreConfirmOpen(null); setRestoreAnchorEl(null); }}
+                        onConfirm={() => {
+                          setRestoreConfirmOpen(null);
+                          setRestoreAnchorEl(null);
+                          void handleRestoreBackup(backup.filename);
+                        }}
+                        title="Restore Backup"
+                        message="Restore to this backup? You will lose all data since this backup was created."
+                        confirmText="RESTORE"
+                        variant="warning"
+                        loading={restoringBackup === backup.filename}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <div className="pt-2 border-t border-dashed border-[var(--color-border)]">
+                <div className="font-mono text-[8px] text-[var(--color-text-faint)] leading-relaxed">
+                  Backups are tied to the current database schema. Restoring after migrations may cause issues.
+                </div>
+              </div>
+            </TyvekCollapsibleSection>
+
+            <TyvekCollapsibleSection
+              title="DANGER_ZONE"
+              isOpen={dangerZoneOpen}
+              onToggle={() => setDangerZoneOpen((open) => !open)}
+              tone="warning"
+              className="overflow-hidden"
+              contentClassName="space-y-3 p-[var(--space-md)] border-t border-[var(--color-border)]"
+            >
+              <div className="text-[9px] text-[var(--color-warning)] leading-relaxed">
+                Permanently delete your vault, wallets, credentials, and local configuration. This action cannot be undone.
+              </div>
+              {nukeError && (
+                <div
+                  className="text-[10px] border px-3 py-2"
+                  style={{
+                    color: 'var(--color-warning)',
+                    borderColor: 'color-mix(in srgb, var(--color-warning) 30%, transparent)',
+                    background: 'color-mix(in srgb, var(--color-warning) 10%, transparent)',
+                  }}
+                >
+                  {nukeError}
+                </div>
+              )}
+              <Button
+                type="button"
+                onClick={() => { void handleNuke(); }}
+                disabled={nuking}
+                variant="danger"
+                size="lg"
+                className={`w-full ${
+                  confirmNuke
+                    ? '!bg-[var(--color-warning)] !text-[var(--color-surface)] !border-[var(--color-warning)]'
+                    : ''
+                }`}
+              >
+                {nuking ? 'NUKING...' : confirmNuke ? 'CONFIRM' : 'NUKE'}
+              </Button>
+            </TyvekCollapsibleSection>
+          </div>
+        </Drawer>
+
+        <ConfirmationModal
+          isOpen={discardConfirmOpen}
+          onClose={() => setDiscardConfirmOpen(false)}
+          onConfirm={() => {
+            setDiscardConfirmOpen(false);
+            setShowSettingsDrawer(false);
+            setDangerConfirmOpen(false);
+            setPolicySaveError(null);
+            setPolicyFormErrors({});
+            setPasswordChangeError(null);
+            setVaultThemeOpen(true);
+            setAgentSettingsOpen(false);
+            setSecuritySettingsOpen(false);
+            setDangerZoneOpen(false);
+            setBackupSectionOpen(false);
+            setRestoreConfirmOpen(null);
+            setRestoreAnchorEl(null);
+            setShowPasswordModal(false);
+            setConfirmNuke(false);
+            setNuking(false);
+            setNukeError(null);
+            if (policySettings) setPolicyForm(policySettings);
+          }}
+          variant="warning"
+          title="Discard Changes"
+          message="You have unsaved local policy changes. Discard them?"
+          confirmText="DISCARD"
+          cancelText="KEEP EDITING"
+        />
+
+        <Modal
+          isOpen={showPasswordModal}
+          onClose={closePasswordModal}
+          title="Change Primary Password"
+          subtitle="Security"
+          size="sm"
+        >
+          <form onSubmit={handleChangePrimaryPassword} className="space-y-3">
+            <TextInput
+              type="password"
+              label="CURRENT PASSWORD"
+              aria-label="CURRENT PASSWORD"
+              value={currentPasswordValue}
+              onChange={(e) => setCurrentPasswordValue(e.target.value)}
+              autoFocus
+              compact
+            />
+            <TextInput
+              type="password"
+              label="NEW PASSWORD"
+              aria-label="NEW PASSWORD"
+              value={newPasswordValue}
+              onChange={(e) => setNewPasswordValue(e.target.value)}
+              compact
+            />
+            <TextInput
+              type="password"
+              label="CONFIRM NEW PASSWORD"
+              aria-label="CONFIRM NEW PASSWORD"
+              value={confirmPasswordValue}
+              onChange={(e) => setConfirmPasswordValue(e.target.value)}
+              compact
+            />
+            {passwordChangeError && <div className="text-[10px] text-[var(--color-danger)]">{passwordChangeError}</div>}
+            <div className="flex gap-2 pt-2">
+              <Button
+                type="button"
+                onClick={closePasswordModal}
+                disabled={passwordChanging}
+                variant="secondary"
+                size="lg"
+                className="flex-1"
+              >
+                CANCEL
+              </Button>
+              <Button
+                type="submit"
+                disabled={passwordChanging || !currentPasswordValue || !newPasswordValue || !confirmPasswordValue}
+                variant="primary"
+                size="lg"
+                className="flex-1"
+              >
+                {passwordChanging ? 'UPDATING...' : 'UPDATE PASSWORD'}
+              </Button>
+            </div>
+          </form>
+        </Modal>
+
+        <PasskeyEnrollmentPrompt isUnlocked={pageState === 'unlocked'} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--color-background,#f4f4f5)] relative flex items-center justify-center p-4">
+      {/* Background — sterile field (same as docs/api) */}
+      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+        <div className="absolute inset-0 bg-grid-adaptive bg-[size:4rem_4rem] opacity-30" />
+        <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
+
+        {/* Giant background typography */}
+        <div className="absolute bottom-[5%] right-[5%] opacity-5 select-none" data-testid="home-background-branding">
+          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter text-right">
+            AURAMAXX
+          </h1>
+        </div>
+
+        {/* Corner finder patterns */}
+        <div className="absolute top-10 left-10 w-32 h-32 border-l-4 border-t-4 border-[var(--color-text,#0a0a0a)] opacity-10">
+          <div className="absolute top-2 left-2 w-4 h-4 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+        <div className="absolute bottom-10 right-10 w-32 h-32 border-r-4 border-b-4 border-[var(--color-text,#0a0a0a)] opacity-10 flex items-end justify-end">
+          <div className="absolute bottom-2 right-2 w-4 h-4 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+      </div>
+
+      {/* Logo header */}
+      <div className="fixed top-6 left-6 z-50 flex items-center gap-3">
+        <div className="w-10 h-10">
+          <img src="/logo.webp" alt="AuraMaxx" className="w-full h-full object-contain" />
+        </div>
+      </div>
+
+      {/* Nav */}
+      <div className="fixed top-7 right-6 z-50 flex items-center gap-3 font-mono text-[10px] tracking-widest">
+        <Link href="/docs" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">DOCS</Link>
+        <Link href="/api" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">API</Link>
+        <a href="https://github.com/Aura-Industry/auramaxx" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">GITHUB</a>
+        <a href="https://x.com/npxauramaxx" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">X</a>
+        <a href="https://x.com/hi_im_nico" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">HELP</a>
+        <DocsThemeToggle />
+      </div>
+
+      {/* Unlock card */}
+      <div className="relative z-10 w-full max-w-[380px]">
+        {/* Vertical specimen label */}
+        <div className="absolute -left-8 top-1/2 -translate-y-1/2 text-vertical label-specimen-sm text-[var(--color-text-faint,#9ca3af)] select-none hidden sm:block">
+          VAULT&nbsp;ACCESS
+        </div>
+        <div className="bg-[var(--color-surface,#f4f4f2)] clip-specimen border-mech shadow-mech overflow-hidden font-mono corner-marks">
+          {/* Card header bar */}
+          <div className="px-5 py-3 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] flex items-center justify-between">
+            <span className="font-sans font-bold text-sm text-[var(--color-text,#0a0a0a)] uppercase tracking-tight">
+              {pageState === 'setup' ? 'Initialize' : 'Unlock'}
+            </span>
+            <span className="text-[9px] text-[var(--color-text-faint,#9ca3af)] font-bold tracking-widest">
+              {pageState === 'loading'
+                ? 'CONNECTING...'
+                : pageState === 'setup'
+                  ? 'NO_VAULT'
+                  : 'LOCKED'}
+            </span>
+          </div>
+
+          <div className="p-6">
+            {pageState === 'loading' && (
+              <div className="flex flex-col items-center py-12">
+                <div className="w-6 h-6 border-2 border-[var(--color-border,#d4d4d8)] border-t-[var(--color-text,#0a0a0a)] animate-spin" />
+                <div className="mt-4 label-specimen text-[var(--color-text-muted,#6b7280)] animate-pulse">CONNECTING</div>
+                <div className="mt-2 w-20 h-[2px] skeleton-mech" />
+              </div>
+            )}
+
+            {pageState === 'setup' && mnemonic && setupOnboardingStep === 'seed' && (
+              <div className="flex flex-col items-center">
+                <div className="w-16 h-16 mb-4">
+                  <img src="/logo.webp" alt="AuraMaxx" className="w-full h-full object-contain" />
+                </div>
+                <div className="text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest text-center mb-4">
+                  SAVE YOUR RECOVERY PHRASE
+                </div>
+                <div className="text-[9px] text-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/10 px-3 py-2 border border-[var(--color-danger,#ef4444)]/20 mb-3">
+                  Write this down and store it securely. You will stay on this screen until you explicitly confirm.
+                </div>
+                {seedRecoveryNotice && (
+                  <div className="text-[9px] text-[var(--color-info,#0047ff)] bg-[var(--color-info,#0047ff)]/10 px-3 py-2 border border-[var(--color-info,#0047ff)]/20 mb-3">
+                    {seedRecoveryNotice}
+                  </div>
+                )}
+                <div className="grid grid-cols-3 gap-2 w-full mb-4">
+                  {mnemonic.split(' ').map((word, i) => (
+                    <div key={i} className="text-[10px] font-mono text-[var(--color-text,#0a0a0a)] bg-[var(--color-background,#f4f4f5)] px-2 py-1 border border-[var(--color-border,#d4d4d8)]">
+                      <span className="text-[var(--color-text-faint,#9ca3af)] mr-1">{i + 1}.</span>{word}
+                    </div>
+                  ))}
+                </div>
+                <div className="grid grid-cols-2 gap-2 w-full mb-3">
+                  <button
+                    type="button"
+                    onClick={() => { void handleCopySeedPhrase(); }}
+                    className="h-9 px-2 border border-[var(--color-border,#d4d4d8)] font-mono text-[9px] tracking-widest text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-surface-alt,#fafafa)] transition-colors"
+                  >
+                    COPY SEED PHRASE
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleDownloadSeedBackup}
+                    className="h-9 px-2 border border-[var(--color-border,#d4d4d8)] font-mono text-[9px] tracking-widest text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-surface-alt,#fafafa)] transition-colors"
+                  >
+                    DOWNLOAD BACKUP (.MD)
+                  </button>
+                </div>
+                {seedPhraseActionStatus && (
+                  <div
+                    className="w-full mb-3 text-[9px] text-[var(--color-text-muted,#6b7280)]"
+                    aria-live="polite"
+                    data-testid="seed-phrase-action-status"
+                  >
+                    {seedPhraseActionStatus}
+                  </div>
+                )}
+                <label className="flex items-start gap-2 w-full mb-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={seedAcknowledged}
+                    onChange={(e) => setSeedAcknowledged(e.target.checked)}
+                    className="mt-0.5"
+                  />
+                  <span className="text-[9px] text-[var(--color-text-muted,#6b7280)]">
+                    I have written and verified this recovery phrase in a secure location.
+                  </span>
+                </label>
+                <button
+                  onClick={() => {
+                    if (!seedAcknowledged) return;
+                    setSetupOnboardingStep('trust');
+                  }}
+                  disabled={!seedAcknowledged}
+                  className="w-full py-2.5 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-xs tracking-widest font-bold hover:opacity-90 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed"
+                >
+                  CONTINUE TO AGENT MODE
+                </button>
+                <div className="w-full mt-3 text-[8px] text-[var(--color-text-faint,#9ca3af)] text-center">
+                  If you leave before confirming, this phrase is recoverable only temporarily in this tab session. If recovery expires, restart onboarding to regenerate.
+                </div>
+              </div>
+            )}
+
+            {pageState === 'setup' && mnemonic && setupOnboardingStep === 'trust' && (
+              <>
+                <div className="flex flex-col items-center mb-6">
+                  <div className="w-16 h-16 mb-4">
+                    <img src="/logo.webp" alt="AuraMaxx" className="w-full h-full object-contain" />
+                  </div>
+                  <div className="text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest text-center">
+                    LOCAL AGENT MODE
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <div className="text-[9px] text-[var(--color-text-muted,#6b7280)] bg-[var(--color-background,#f4f4f5)] px-3 py-2 border border-[var(--color-border,#d4d4d8)]">
+                    Choose how local Unix-socket agents are issued default permissions. You can change this later in settings.
+                  </div>
+
+                  <fieldset className="border border-[var(--color-border,#d4d4d8)] p-2.5 bg-[var(--color-background,#f4f4f5)]">
+                    <legend className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase px-1">
+                      Local Agent Mode
+                    </legend>
+                    <ItemPicker
+                      options={[...ONBOARDING_LOCAL_AGENT_MODE_OPTIONS]}
+                      value={localAgentMode}
+                      onChange={(value) => setLocalAgentMode(value as LocalAgentMode)}
+                      ariaLabel="Onboarding local agent mode"
+                    />
+                  </fieldset>
+
+                  {error && (
+                    <div className="text-[9px] text-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/10 px-3 py-2 border border-[var(--color-danger,#ef4444)]/20">
+                      {error}
+                    </div>
+                  )}
+
+                  <button
+                    onClick={() => { void handleFinalizeOnboarding(); }}
+                    disabled={loading}
+                    className="w-full py-2.5 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-xs tracking-widest font-bold hover:opacity-90 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                  >
+                    {loading ? (
+                      <>
+                        <div className="w-3 h-3 border border-[var(--color-surface,#ffffff)] border-t-transparent animate-spin" />
+                        SAVING...
+                      </>
+                    ) : (
+                      'SAVE MODE AND CONTINUE'
+                    )}
+                  </button>
+                </div>
+              </>
+            )}
+
+            {pageState === 'setup' && !mnemonic && (
+              <>
+                {/* Logo centered */}
+                <div className="flex flex-col items-center mb-6">
+                  <div className="w-16 h-16 mb-4">
+                    <img src="/logo.webp" alt="AuraMaxx" className="w-full h-full object-contain" />
+                  </div>
+                  <div className="text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest text-center">
+                    CREATE YOUR ENCRYPTED VAULT
+                  </div>
+                </div>
+
+                <form onSubmit={handleSetup} className="space-y-4">
+                  <div>
+                    <label className="block text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-1.5 uppercase">
+                      Encryption Password
+                    </label>
+                    <input
+                      type="password"
+                      value={password}
+                      onChange={(e) => { setPassword(e.target.value); setError(null); }}
+                      placeholder="Minimum 8 characters"
+                      className="w-full px-3 py-2.5 border border-[var(--color-border,#d4d4d8)] font-mono text-sm text-[var(--color-text,#0a0a0a)] focus:outline-none focus:border-[var(--color-text,#0a0a0a)] bg-[var(--color-surface,#ffffff)] placeholder-[var(--color-text-faint,#9ca3af)] transition-colors"
+                      autoFocus
+                    />
+                  </div>
+                  <label className="flex items-center justify-between gap-3 text-[8px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+                    <span className="inline-flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        checked={trustDevice}
+                        onChange={(e) => setTrustDevice(e.target.checked)}
+                        className="h-3.5 w-3.5 border border-[var(--color-border,#d4d4d8)] accent-[var(--color-text,#0a0a0a)]"
+                      />
+                      Trusted device
+                    </span>
+                    <span>{trustDevice ? 'PERSISTENT' : 'TAB ONLY'}</span>
+                  </label>
+
+                  {error && (
+                    <div className="text-[9px] text-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/10 px-3 py-2 border border-[var(--color-danger,#ef4444)]/20">
+                      {error}
+                    </div>
+                  )}
+
+                  <button
+                    type="submit"
+                    disabled={loading || password.length < 8}
+                    className="w-full py-2.5 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-xs tracking-widest font-bold hover:opacity-90 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                  >
+                    {loading ? (
+                      <>
+                        <div className="w-3 h-3 border border-[var(--color-surface,#ffffff)] border-t-transparent animate-spin" />
+                        INITIALIZING...
+                      </>
+                    ) : (
+                      'INITIALIZE VAULT'
+                    )}
+                  </button>
+                </form>
+
+                <div className="mt-4 pt-4 border-t border-[var(--color-border,#d4d4d8)]">
+                  <div className="flex items-start gap-2">
+                    <div className="w-1 h-1 bg-[var(--color-text-muted,#6b7280)] mt-1.5 flex-shrink-0" />
+                    <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] leading-relaxed">
+                      This password encrypts your seed phrase locally. It never leaves your machine.
+                    </span>
+                  </div>
+                </div>
+              </>
+            )}
+
+            {pageState === 'locked' && (
+              <>
+                {/* Logo centered */}
+                <div className="flex flex-col items-center mb-6">
+                  <div className="w-16 h-16 mb-4">
+                    <img src="/logo.webp" alt="AuraMaxx" className="w-full h-full object-contain" />
+                  </div>
+                  <div className="text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest text-center">
+                    {showSeedRecovery ? 'RECOVER WITH SEED PHRASE' : passkeyAvailable ? 'UNLOCK VAULT' : 'ENTER PASSWORD TO UNLOCK'}
+                  </div>
+                </div>
+
+                {!showSeedRecovery && (
+                  <>
+                    {passkeyAvailable && (
+                      <div className="mb-4">
+                        <button
+                          type="button"
+                          onClick={() => { void handlePasskeyUnlock(); }}
+                          disabled={passkeyLoading}
+                          className="w-full py-3 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-xs tracking-widest font-bold hover:opacity-90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
+                        >
+                          {passkeyLoading ? (
+                            <>
+                              <div className="w-3 h-3 border border-[var(--color-surface,#ffffff)] border-t-transparent animate-spin" />
+                              AUTHENTICATING...
+                            </>
+                          ) : (
+                            <>
+                              <Fingerprint size={14} />
+                              UNLOCK WITH PASSKEY
+                            </>
+                          )}
+                        </button>
+                        <div className="mt-3 flex items-center gap-3">
+                          <div className="flex-1 h-px bg-[var(--color-border,#d4d4d8)]" />
+                          <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest">OR USE PASSWORD</span>
+                          <div className="flex-1 h-px bg-[var(--color-border,#d4d4d8)]" />
+                        </div>
+                      </div>
+                    )}
+                    <form onSubmit={handleUnlock} className="space-y-4">
+                      <div>
+                        <label className="block text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-1.5 uppercase">
+                          Password
+                        </label>
+                        <input
+                          type="password"
+                          value={password}
+                          onChange={(e) => { setPassword(e.target.value); setError(null); }}
+                          placeholder="Enter vault password"
+                          className="w-full px-3 py-2.5 border border-[var(--color-border,#d4d4d8)] font-mono text-sm text-[var(--color-text,#0a0a0a)] focus:outline-none focus:border-[var(--color-text,#0a0a0a)] bg-[var(--color-surface,#ffffff)] placeholder-[var(--color-text-faint,#9ca3af)] transition-colors"
+                          autoFocus
+                        />
+                      </div>
+                      <label className="flex items-center justify-between gap-3 text-[8px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+                        <span className="inline-flex items-center gap-2">
+                          <input
+                            type="checkbox"
+                            checked={trustDevice}
+                            onChange={(e) => setTrustDevice(e.target.checked)}
+                            className="h-3.5 w-3.5 border border-[var(--color-border,#d4d4d8)] accent-[var(--color-text,#0a0a0a)]"
+                          />
+                          Trusted device
+                        </span>
+                        <span>{trustDevice ? 'PERSISTENT' : 'TAB ONLY'}</span>
+                      </label>
+
+                      {error && (
+                        <div
+                          data-testid="unlock-error-banner"
+                          className="text-[9px] text-[var(--color-danger,#ef4444)] px-3 py-2 border"
+                          style={{
+                            borderColor: 'color-mix(in srgb, var(--color-danger,#ef4444) 35%, transparent)',
+                            background: 'color-mix(in srgb, var(--color-danger,#ef4444) 12%, transparent)',
+                          }}
+                        >
+                          {error}
+                        </div>
+                      )}
+
+                      <button
+                        type="submit"
+                        disabled={loading || !password}
+                        className="w-full py-2.5 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-xs tracking-widest font-bold hover:opacity-90 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                      >
+                        {loading ? (
+                          <>
+                            <div className="w-3 h-3 border border-[var(--color-surface,#ffffff)] border-t-transparent animate-spin" />
+                            UNLOCKING...
+                          </>
+                        ) : (
+                          'UNLOCK'
+                        )}
+                      </button>
+                    </form>
+
+                    <div className="mt-4 border-t border-[var(--color-border,#d4d4d8)] pt-3 text-center">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setShowSeedRecovery(true);
+                          setRecoveryError(null);
+                        }}
+                        className="text-[10px] underline underline-offset-2 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+                      >
+                        Forgot password?
+                      </button>
+                    </div>
+                  </>
+                )}
+
+                {showSeedRecovery && (
+                  <div className="mt-4 border-t border-[var(--color-border,#d4d4d8)] pt-3 text-center">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setShowSeedRecovery(false);
+                        setRecoveryError(null);
+                      }}
+                      className="text-[10px] underline underline-offset-2 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+                    >
+                      Back to unlock
+                    </button>
+                  </div>
+                )}
+
+                {showSeedRecovery && (
+                  <form onSubmit={handleRecoverAccess} className="mt-4 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <div className="text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">Seed Recovery</div>
+                      <div className="flex items-center gap-1">
+                        <button
+                          type="button"
+                          onClick={() => { setRecoveryWordCount(12); setRecoveryWords(Array(12).fill('')); }}
+                          className={`px-2 py-1 text-[8px] border ${recoveryWordCount === 12 ? 'bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#fff)] border-[var(--color-text,#0a0a0a)]' : 'border-[var(--color-border,#d4d4d8)] text-[var(--color-text-muted,#6b7280)]'}`}
+                        >12</button>
+                        <button
+                          type="button"
+                          onClick={() => { setRecoveryWordCount(24); setRecoveryWords(Array(24).fill('')); }}
+                          className={`px-2 py-1 text-[8px] border ${recoveryWordCount === 24 ? 'bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#fff)] border-[var(--color-text,#0a0a0a)]' : 'border-[var(--color-border,#d4d4d8)] text-[var(--color-text-muted,#6b7280)]'}`}
+                        >24</button>
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-1.5">
+                      {recoveryWords.map((word, index) => {
+                        const invalid = invalidRecoveryIndexes.has(index);
+                        return (
+                          <TextInput
+                            key={`recovery-word-${index}`}
+                            compact
+                            error={invalid}
+                            aria-label={`Recovery word ${index + 1}`}
+                            value={word}
+                            onChange={(e) => handleRecoveryWordChange(index, e.target.value)}
+                            onPaste={(e) => {
+                              const didSplit = handleRecoveryPaste(index, e.clipboardData.getData('text'));
+                              if (didSplit) e.preventDefault();
+                            }}
+                            placeholder={`${index + 1}`}
+                            className="min-w-0"
+                          />
+                        );
+                      })}
+                    </div>
+
+                    <div className="text-[9px] text-[var(--color-text-faint,#9ca3af)]">
+                      {recoveryWordsFilled}/{recoveryWordCount} words · {invalidRecoveryIndexes.size > 0 ? `${invalidRecoveryIndexes.size} invalid word(s)` : (isRecoveryPhraseStructurallyValid ? 'BIP-39 phrase valid' : 'Waiting for valid BIP-39 phrase')}
+                    </div>
+
+                    <TextInput
+                      type="password"
+                      compact
+                      value={recoveryNewPassword}
+                      onChange={(e) => { setRecoveryNewPassword(e.target.value); setRecoveryError(null); }}
+                      placeholder="New password"
+                      aria-label="New password"
+                    />
+                    {recoveryError && (
+                      <div className="text-[9px] text-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/10 px-3 py-2 border border-[var(--color-danger,#ef4444)]/20">
+                        {recoveryError}
+                      </div>
+                    )}
+
+                    <button
+                      type="submit"
+                      disabled={recoveryLoading}
+                      className="w-full py-2.5 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-xs tracking-widest font-bold hover:opacity-90 transition-opacity disabled:opacity-30"
+                    >
+                      {recoveryLoading ? 'RECOVERING...' : 'RECOVER & UNLOCK'}
+                    </button>
+                  </form>
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Barcode + stripe */}
+          <div className="flex items-center gap-3 px-5 py-2 border-t border-[var(--color-border,#d4d4d8)]">
+            <div className="h-4 flex-1 bg-[repeating-linear-gradient(90deg,var(--color-text,#000),var(--color-text,#000)_1px,transparent_1px,transparent_3px)] opacity-30" />
+            <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-wider">AURAMAXX</span>
+          </div>
+          <div className="h-2 w-full" style={{
+            backgroundImage: 'repeating-linear-gradient(45deg, var(--color-text, #000), var(--color-text, #000) 5px, transparent 5px, transparent 10px)',
+            opacity: 0.1,
+          }} />
+        </div>
+
+        {/* Specimen label below card */}
+        <div className="mt-4 text-center">
+          <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-[0.2em] font-mono">
+            SECURE LOCAL WALLETS FOR AI AGENTS
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}