auramaxx 1.0.0-alpha.4

package/src/app/page.tsx

@@ -0,0 +1,986 @@
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import Link from 'next/link';
+import { Bot, ChevronDown, KeyRound } from 'lucide-react';
+import { useAuth } from '@/context/AuthContext';
+import { api, Api, unlockWallet, setupWallet, rekeySession, changePrimaryVaultPassword } from '@/lib/api';
+import { generateVaultKeypair, getVaultPrivateKey } from '@/lib/vault-crypto';
+import { CredentialVault } from '@/components/vault/CredentialVault';
+import DocsThemeToggle from '@/components/docs/DocsThemeToggle';
+import { Drawer } from '@/components/design-system/Drawer';
+import { Modal } from '@/components/design-system/Modal';
+
+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' | 'unlocked';
+type LocalAgentMode = 'strict' | 'dev' | 'admin';
+type SetupOnboardingStep = 'seed' | 'trust';
+type LocalPolicySettings = {
+  profile: LocalAgentMode;
+  profileVersion: 'v1';
+  autoApprove: boolean;
+};
+
+const LOCAL_POLICY_PROFILES: LocalAgentMode[] = ['strict', 'dev', 'admin'];
+
+type OnboardingSeedDraft = {
+  mnemonic: string;
+  createdAt: number;
+};
+
+const ONBOARDING_SEED_STORAGE_KEY = 'aura:onboarding-seed-draft';
+const ONBOARDING_SEED_TTL_MS = 15 * 60 * 1000;
+
+export default function UnlockPage() {
+  const { token, setToken, clearToken } = useAuth();
+
+  const [pageState, setPageState] = useState<PageState>('loading');
+  const [password, setPassword] = useState('');
+  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 [localAgentMode, setLocalAgentMode] = useState<LocalAgentMode>('dev');
+  const [setupOnboardingStep, setSetupOnboardingStep] = useState<SetupOnboardingStep>('seed');
+  const [onboardingToken, setOnboardingToken] = useState<string | null>(null);
+  const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
+  const [policySettings, setPolicySettings] = useState<LocalPolicySettings | null>(null);
+  const [policyForm, setPolicyForm] = useState<LocalPolicySettings>({ profile: 'dev', profileVersion: 'v1', autoApprove: true });
+  const [policyLoadError, setPolicyLoadError] = useState<string | null>(null);
+  const [policySaveError, setPolicySaveError] = useState<string | null>(null);
+  const [policySaveSuccess, setPolicySaveSuccess] = useState<string | null>(null);
+  const [policyLoading, setPolicyLoading] = useState(false);
+  const [policySaving, setPolicySaving] = useState(false);
+  const [dangerConfirmOpen, setDangerConfirmOpen] = useState(false);
+  const [agentSettingsOpen, setAgentSettingsOpen] = useState(false);
+  const [securitySettingsOpen, setSecuritySettingsOpen] = useState(false);
+  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 hasPendingSeedConfirmation = useMemo(() => Boolean(mnemonic), [mnemonic]);
+
+  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');
+      return;
+    }
+    const draft: OnboardingSeedDraft = {
+      mnemonic,
+      createdAt: Date.now(),
+    };
+    sessionStorage.setItem(ONBOARDING_SEED_STORAGE_KEY, JSON.stringify(draft));
+  }, [mnemonic]);
+
+  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 {
+      const data = await api.get<{ wallets: WalletData[]; unlocked: boolean; vaults: VaultInfo[] }>(
+        Api.Wallet,
+        '/wallets',
+        { includeHidden: true }
+      );
+
+      const configured = data.wallets.some(w => w.tier === 'cold') || (data.vaults && data.vaults.some(v => v.isPrimary));
+
+      if (!configured) {
+        setPageState('setup');
+      } else if (hasPendingSeedConfirmation) {
+        setPageState('setup');
+      } else if (!data.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 loaded: LocalPolicySettings = {
+        profile: loadedProfile,
+        profileVersion: 'v1',
+        autoApprove: Boolean(findDefault('trust.localAutoApprove')),
+      };
+
+      if (String(findDefault('trust.localProfileVersion') ?? 'v1').trim() !== 'v1') {
+        throw new Error('Unknown local profile version; refusing to edit settings.');
+      }
+
+      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.');
+    }
+    const baseUrl = api.getBaseUrl(Api.Wallet);
+    const headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    };
+
+    const profileRes = await fetch(`${baseUrl}/defaults/trust.localProfile`, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify({ value: policyForm.profile }),
+    });
+    const profileVersionRes = await fetch(`${baseUrl}/defaults/trust.localProfileVersion`, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify({ value: 'v1' }),
+    });
+    const autoApproveRes = await fetch(`${baseUrl}/defaults/trust.localAutoApprove`, {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify({ value: policyForm.autoApprove }),
+    });
+    if (!profileRes.ok || !profileVersionRes.ok || !autoApproveRes.ok) {
+      throw new Error('Failed to save canonical trust policy defaults.');
+    }
+  }, [policyForm, token]);
+
+  const handleSaveLocalPolicy = useCallback(async () => {
+    if (!policySettings || policyLoading || policySaving) return;
+    const enablingDangerous = policySettings.profile !== 'admin' && policyForm.profile === 'admin';
+    if (enablingDangerous && !dangerConfirmOpen) {
+      setDangerConfirmOpen(true);
+      return;
+    }
+
+    setPolicySaving(true);
+    setPolicySaveError(null);
+    setPolicySaveSuccess(null);
+    try {
+      await persistLocalPolicySettings();
+      const saved = { ...policyForm, profileVersion: 'v1' as const };
+      setPolicySettings(saved);
+      setPolicyForm(saved);
+      setDangerConfirmOpen(false);
+      setPolicySaveSuccess('Local trust policy saved.');
+    } catch (err) {
+      setPolicySaveError((err as Error).message || 'Failed to save policy settings');
+      if (policySettings) {
+        setPolicyForm(policySettings);
+      }
+      setDangerConfirmOpen(false);
+    } finally {
+      setPolicySaving(false);
+    }
+  }, [dangerConfirmOpen, 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 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);
+      }
+      setPassword('');
+      fetchState();
+    } 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);
+        setOnboardingToken(result.token);
+      }
+      if (result.mnemonic) {
+        setMnemonic(result.mnemonic);
+        setSeedAcknowledged(false);
+        setSetupOnboardingStep('seed');
+        setSeedRecoveryNotice(null);
+      }
+      setPassword('');
+      if (!result.mnemonic) fetchState();
+    } catch (err) {
+      setError((err as Error).message || 'Setup failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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 handleFinalizeOnboarding = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await persistLocalAgentMode();
+      setMnemonic(null);
+      setSeedAcknowledged(false);
+      setSeedRecoveryNotice(null);
+      setOnboardingToken(null);
+      setSetupOnboardingStep('seed');
+      fetchState();
+    } catch (err) {
+      setError((err as Error).message || 'Failed to save local agent mode');
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchState, persistLocalAgentMode]);
+
+  const handleLock = useCallback(() => {
+    setPageState('locked');
+  }, []);
+
+  // Unlocked: render full-screen vault + root settings drawer controls
+  if (pageState === 'unlocked') {
+    return (
+      <div className="relative h-screen">
+        <CredentialVault onLock={handleLock} onSettings={() => setShowSettingsDrawer(true)} />
+
+        <Drawer
+          isOpen={showSettingsDrawer}
+          onClose={() => {
+            setShowSettingsDrawer(false);
+            setDangerConfirmOpen(false);
+            setPolicySaveError(null);
+            setPasswordChangeError(null);
+            setAgentSettingsOpen(false);
+            setSecuritySettingsOpen(false);
+            setShowPasswordModal(false);
+            if (policySettings) setPolicyForm(policySettings);
+          }}
+          title="ROOT SETTINGS"
+          subtitle="Local socket policy"
+        >
+          <div className="space-y-4">
+            {passwordChangeSuccess && (
+              <div className="text-[10px] text-[var(--color-info,#0047ff)] border border-[var(--color-info,#0047ff)]/30 bg-[var(--color-info,#0047ff)]/10 px-3 py-2">
+                {passwordChangeSuccess}
+              </div>
+            )}
+
+            <div className="bg-[var(--color-surface,#fff)] border border-[var(--color-border,#d4d4d8)]">
+              <button
+                type="button"
+                onClick={() => setAgentSettingsOpen((open) => !open)}
+                className="w-full p-4 flex items-center justify-between hover:bg-[var(--color-surface-alt,#fafafa)] transition-colors"
+              >
+                <div className="flex items-center gap-2">
+                  <Bot size={12} className="text-[var(--color-text-muted,#6b7280)]" />
+                  <span className="font-mono text-[10px] tracking-widest text-[var(--color-text-muted,#6b7280)]">DEFAULT_AGENT_PROFILE</span>
+                </div>
+                <ChevronDown size={12} className={`text-[var(--color-text-muted,#6b7280)] transition-transform ${agentSettingsOpen ? 'rotate-180' : ''}`} />
+              </button>
+              {agentSettingsOpen && (
+                <div className="px-4 pb-4 space-y-3 border-t border-[var(--color-border,#d4d4d8)]">
+                  {policyLoadError && (
+                    <div className="space-y-2 pt-3">
+                      <div className="text-[10px] text-[var(--color-danger,#ef4444)] border border-[var(--color-danger,#ef4444)]/30 bg-[var(--color-danger,#ef4444)]/10 px-3 py-2">
+                        {policyLoadError}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => void loadLocalPolicySettings()}
+                        disabled={policyLoading}
+                        className="h-9 px-3 border border-[var(--color-border,#d4d4d8)] font-mono text-[10px] tracking-widest"
+                      >
+                        {policyLoading ? 'RETRYING...' : 'RETRY LOAD'}
+                      </button>
+                    </div>
+                  )}
+
+                  {!policyLoadError && (
+                    <>
+                      <label className="pt-3 flex items-center justify-between text-[10px] font-mono text-[var(--color-text,#0a0a0a)]">
+                        <span>AUTO-APPROVE LOCAL REQUESTS</span>
+                        <input
+                          type="checkbox"
+                          checked={policyForm.autoApprove}
+                          onChange={(e) => setPolicyForm((prev) => ({ ...prev, autoApprove: e.target.checked }))}
+                          disabled={policyLoading || policySaving}
+                        />
+                      </label>
+
+                      <div>
+                        <label className="block text-[9px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-2">LOCAL PROFILE</label>
+                        <select
+                          aria-label="LOCAL PROFILE"
+                          value={policyForm.profile}
+                          onChange={(e) => setPolicyForm((prev) => ({ ...prev, profile: e.target.value as LocalAgentMode }))}
+                          disabled={policyLoading || policySaving}
+                          className="w-full h-10 px-2 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#fff)] text-[11px] font-mono"
+                        >
+                          <option value="strict">strict</option>
+                          <option value="dev">dev</option>
+                          <option value="admin">admin (dangerous)</option>
+                        </select>
+                      </div>
+
+                      {dangerConfirmOpen && (
+                        <div className="text-[10px] text-[var(--color-danger,#ef4444)] border border-[var(--color-danger,#ef4444)]/30 bg-[var(--color-danger,#ef4444)]/10 px-3 py-2 space-y-2">
+                          <div>Enabling admin mode is dangerous and broadens token scope.</div>
+                          <div className="flex gap-2">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setDangerConfirmOpen(false);
+                                if (policySettings) setPolicyForm(policySettings);
+                              }}
+                              className="h-8 px-3 border border-[var(--color-border,#d4d4d8)] text-[10px] font-mono"
+                            >
+                              CANCEL
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => { void handleSaveLocalPolicy(); }}
+                              disabled={policySaving}
+                              className="h-8 px-3 bg-[var(--color-danger,#ef4444)] text-white text-[10px] font-mono"
+                            >
+                              CONFIRM ADMIN MODE
+                            </button>
+                          </div>
+                        </div>
+                      )}
+
+                      {policySaveError && <div className="text-[10px] text-[var(--color-danger,#ef4444)]">{policySaveError}</div>}
+                      {policySaveSuccess && <div className="text-[10px] text-[var(--color-info,#0047ff)]">{policySaveSuccess}</div>}
+
+                      <button
+                        type="button"
+                        onClick={() => { void handleSaveLocalPolicy(); }}
+                        disabled={Boolean(policyLoadError) || policyLoading || policySaving || !policySettings}
+                        className="w-full h-10 bg-[var(--color-text,#0a0a0a)] text-white text-[10px] font-mono tracking-widest disabled:opacity-40"
+                      >
+                        {policySaving ? 'SAVING...' : 'SAVE LOCAL POLICY'}
+                      </button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="bg-[var(--color-surface,#fff)] border border-[var(--color-border,#d4d4d8)]">
+              <button
+                type="button"
+                onClick={() => setSecuritySettingsOpen((open) => !open)}
+                className="w-full p-4 flex items-center justify-between hover:bg-[var(--color-surface-alt,#fafafa)] transition-colors"
+              >
+                <div className="flex items-center gap-2">
+                  <KeyRound size={12} className="text-[var(--color-text-muted,#6b7280)]" />
+                  <span className="font-mono text-[10px] tracking-widest text-[var(--color-text-muted,#6b7280)]">PRIMARY_PASSWORD</span>
+                </div>
+                <ChevronDown size={12} className={`text-[var(--color-text-muted,#6b7280)] transition-transform ${securitySettingsOpen ? 'rotate-180' : ''}`} />
+              </button>
+              {securitySettingsOpen && (
+                <div className="px-4 pb-4 pt-3 space-y-3 border-t border-[var(--color-border,#d4d4d8)]">
+                  <div className="text-[9px] text-[var(--color-text-muted,#6b7280)] 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,#ef4444)] border border-[var(--color-danger,#ef4444)]/30 bg-[var(--color-danger,#ef4444)]/10 px-3 py-2">
+                      {passwordChangeError}
+                    </div>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setPasswordChangeError(null);
+                      setShowPasswordModal(true);
+                    }}
+                    className="w-full h-10 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#fff)] text-[10px] font-mono tracking-widest hover:border-[var(--color-text,#0a0a0a)]"
+                  >
+                    CHANGE PRIMARY PASSWORD
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </Drawer>
+
+        <Modal
+          isOpen={showPasswordModal}
+          onClose={closePasswordModal}
+          title="Change Primary Password"
+          subtitle="Security"
+          size="sm"
+        >
+          <form onSubmit={handleChangePrimaryPassword} className="space-y-3">
+            <div>
+              <label className="block text-[9px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-2">CURRENT PASSWORD</label>
+              <input
+                type="password"
+                aria-label="CURRENT PASSWORD"
+                value={currentPasswordValue}
+                onChange={(e) => setCurrentPasswordValue(e.target.value)}
+                autoFocus
+                className="w-full h-10 px-3 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#fff)] text-[11px] font-mono"
+              />
+            </div>
+            <div>
+              <label className="block text-[9px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-2">NEW PASSWORD</label>
+              <input
+                type="password"
+                aria-label="NEW PASSWORD"
+                value={newPasswordValue}
+                onChange={(e) => setNewPasswordValue(e.target.value)}
+                className="w-full h-10 px-3 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#fff)] text-[11px] font-mono"
+              />
+            </div>
+            <div>
+              <label className="block text-[9px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-2">CONFIRM NEW PASSWORD</label>
+              <input
+                type="password"
+                aria-label="CONFIRM NEW PASSWORD"
+                value={confirmPasswordValue}
+                onChange={(e) => setConfirmPasswordValue(e.target.value)}
+                className="w-full h-10 px-3 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#fff)] text-[11px] font-mono"
+              />
+            </div>
+            {passwordChangeError && <div className="text-[10px] text-[var(--color-danger,#ef4444)]">{passwordChangeError}</div>}
+            <div className="flex gap-2 pt-2">
+              <button
+                type="button"
+                onClick={closePasswordModal}
+                disabled={passwordChanging}
+                className="flex-1 h-10 border border-[var(--color-border,#d4d4d8)] text-[10px] font-mono tracking-widest"
+              >
+                CANCEL
+              </button>
+              <button
+                type="submit"
+                disabled={passwordChanging || !currentPasswordValue || !newPasswordValue || !confirmPasswordValue}
+                className="flex-1 h-10 bg-[var(--color-text,#0a0a0a)] text-white text-[10px] font-mono tracking-widest disabled:opacity-40"
+              >
+                {passwordChanging ? 'UPDATING...' : 'UPDATE PASSWORD'}
+              </button>
+            </div>
+          </form>
+        </Modal>
+      </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 top-[5%] left-[5%] opacity-5 select-none">
+          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter">
+            AURA
+          </h1>
+        </div>
+        <div className="absolute bottom-[5%] right-[5%] opacity-5 select-none">
+          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter text-right">
+            WALLET
+          </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="AuraWallet" className="w-full h-full object-contain" />
+        </div>
+        <div className="font-black text-xl tracking-tighter text-[var(--color-text,#0a0a0a)]">AURAWALLET</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>
+        <Link href="/app" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">APP</Link>
+        <DocsThemeToggle />
+      </div>
+
+      {/* Unlock card */}
+      <div className="relative z-10 w-full max-w-[380px]">
+        <div className="bg-[var(--color-surface,#f4f4f2)] border border-[var(--color-border,#d4d4d8)] shadow-lg overflow-hidden font-mono">
+          {/* 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 text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest">CONNECTING</div>
+              </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="AuraWallet" 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>
+                <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="AuraWallet" 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>
+                    <div className="space-y-2">
+                      <label className="flex items-start gap-2 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="local-agent-mode"
+                          checked={localAgentMode === 'dev'}
+                          onChange={() => setLocalAgentMode('dev')}
+                          className="mt-0.5"
+                        />
+                        <span className="text-[9px] text-[var(--color-text-muted,#6b7280)] leading-relaxed">
+                          Dev (recommended): auto-approve enabled with scoped non-financial profile.
+                        </span>
+                      </label>
+                      <label className="flex items-start gap-2 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="local-agent-mode"
+                          checked={localAgentMode === 'strict'}
+                          onChange={() => setLocalAgentMode('strict')}
+                          className="mt-0.5"
+                        />
+                        <span className="text-[9px] text-[var(--color-text-muted,#6b7280)] leading-relaxed">
+                          Strict: disable local auto-approve. Every local agent token request needs manual approval.
+                        </span>
+                      </label>
+                      <label className="flex items-start gap-2 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="local-agent-mode"
+                          checked={localAgentMode === 'admin'}
+                          onChange={() => setLocalAgentMode('admin')}
+                          className="mt-0.5"
+                        />
+                        <span className="text-[9px] text-[var(--color-danger,#ef4444)] leading-relaxed">
+                          Admin (dangerous): broad local agent access. Not recommended for primary vault workflows.
+                        </span>
+                      </label>
+                    </div>
+                  </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="AuraWallet" 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>
+
+                  {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="AuraWallet" className="w-full h-full object-contain" />
+                  </div>
+                  <div className="text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest text-center">
+                    ENTER PASSWORD TO UNLOCK
+                  </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>
+
+                  {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}
+                    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>
+
+          {/* 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">AURAWALLET</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>
+  );
+}