fluxy-bot 0.7.1 → 0.7.2

package/supervisor/chat/OnboardWizard.tsx

@@ -171,6 +171,8 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
   const [totpDisableCode, setTotpDisableCode] = useState('');
   const [totpDisableError, setTotpDisableError] = useState('');
   const [isMobileDevice, setIsMobileDevice] = useState(false);
+  // Sub-phase within step 3: 'password' | 'totp-setup' | 'recovery'
+  const [step3Phase, setStep3Phase] = useState<'password' | 'totp-setup' | 'recovery'>('password');
 
   // Pre-fill guard
   const prefillDone = useRef(false);
@@ -505,9 +507,10 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
         return registered;
       }
       case 3: {
+        // Block "Continue" while in a TOTP sub-phase
+        if (step3Phase !== 'password') return false;
         if (!portalCanContinue) return false;
         if (totpEnabled && !totpVerified) return false;
-        if (recoveryCodes.length > 0 && !recoveryCodesCopied) return false;
         return true;
       }
       case 4: return !!(provider && model && isConnected);
@@ -971,243 +974,300 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
               </div>
             )}
 
-            {/* ── Step 3: Password ── */}
+            {/* ── Step 3: Password + 2FA (sub-phase flow) ── */}
             {step === 3 && (
               <div>
-                <h1 className="text-xl font-bold text-white tracking-tight">
-                  Set a password
-                </h1>
-                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
-                  You'll need this password to access your agent's chat. Keep it safe — anyone with your URL will need it to log in.
-                </p>
+                <AnimatePresence mode="wait">
+                  {/* ── Phase: Password ── */}
+                  {step3Phase === 'password' && (
+                    <motion.div
+                      key="password"
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: -20 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <h1 className="text-xl font-bold text-white tracking-tight">
+                        Set a password
+                      </h1>
+                      <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                        You'll need this password to access your agent's chat. Keep it safe — anyone with your URL will need it to log in.
+                      </p>
 
-                {/* Already configured hint */}
-                {portalExists && (
-                  <div className="mt-4 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-2.5">
-                    <p className="text-white/40 text-[12px]">Password already set. Leave fields empty to keep your current password, or enter your current password to change it.</p>
-                  </div>
-                )}
+                      {portalExists && (
+                        <div className="mt-4 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-2.5">
+                          <p className="text-white/40 text-[12px]">Password already set. Leave fields empty to keep your current password, or enter your current password to change it.</p>
+                        </div>
+                      )}
 
-                {/* Current password (only when changing existing credentials) */}
-                {portalExists && (
-                  <div className="mt-5">
-                    <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Current password</label>
-                    <div className="flex items-center gap-2">
-                      <input
-                        type="password"
-                        value={portalOldPass}
-                        onChange={(e) => { setPortalOldPass(e.target.value); setPortalOldPassError(''); setPortalOldPassVerified(false); }}
-                        placeholder="Enter current password to change it"
-                        autoComplete="current-password"
-                        autoFocus
-                        className={inputCls + ' flex-1'}
-                      />
-                      {portalOldPass.length > 0 && !portalOldPassVerified && (
+                      {portalExists && (
+                        <div className="mt-5">
+                          <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Current password</label>
+                          <div className="flex items-center gap-2">
+                            <input
+                              type="password"
+                              value={portalOldPass}
+                              onChange={(e) => { setPortalOldPass(e.target.value); setPortalOldPassError(''); setPortalOldPassVerified(false); }}
+                              placeholder="Enter current password to change it"
+                              autoComplete="current-password"
+                              autoFocus
+                              className={inputCls + ' flex-1'}
+                            />
+                            {portalOldPass.length > 0 && !portalOldPassVerified && (
+                              <button
+                                onClick={async () => {
+                                  setPortalVerifying(true);
+                                  setPortalOldPassError('');
+                                  try {
+                                    const res = await fetch('/api/portal/verify-password', {
+                                      method: 'POST',
+                                      headers: { 'Content-Type': 'application/json' },
+                                      body: JSON.stringify({ password: portalOldPass }),
+                                    });
+                                    const data = await res.json();
+                                    if (data.valid) {
+                                      setPortalOldPassVerified(true);
+                                    } else {
+                                      setPortalOldPassError('Incorrect password');
+                                    }
+                                  } catch {
+                                    setPortalOldPassError('Could not verify');
+                                  } finally {
+                                    setPortalVerifying(false);
+                                  }
+                                }}
+                                disabled={portalVerifying}
+                                className="shrink-0 px-4 py-3 bg-white/[0.06] hover:bg-white/[0.1] text-white/60 text-[13px] font-medium rounded-xl transition-colors disabled:opacity-40"
+                              >
+                                {portalVerifying ? <LoaderCircle className="h-4 w-4 animate-spin" /> : 'Verify'}
+                              </button>
+                            )}
+                            {portalOldPassVerified && (
+                              <div className="shrink-0 w-10 h-10 flex items-center justify-center">
+                                <Check className="h-4 w-4 text-emerald-400" />
+                              </div>
+                            )}
+                          </div>
+                          {portalOldPassError && (
+                            <p className="text-red-400/70 text-[11px] mt-1">{portalOldPassError}</p>
+                          )}
+                        </div>
+                      )}
+
+                      {(!portalExists || portalOldPassVerified) && (
+                        <>
+                          <div className={portalExists ? 'mt-3' : 'mt-5'}>
+                            <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
+                              {portalExists ? 'New password' : 'Password'}
+                            </label>
+                            <input
+                              type="password"
+                              value={portalPass}
+                              onChange={(e) => setPortalPass(e.target.value)}
+                              placeholder="••••••••"
+                              autoComplete="new-password"
+                              autoFocus={!portalExists}
+                              onKeyDown={handleKeyDown}
+                              className={inputCls}
+                            />
+                            {portalPass.length > 0 && portalPass.length < 6 && (
+                              <p className="text-amber-400/70 text-[11px] mt-1">At least 6 characters</p>
+                            )}
+                          </div>
+
+                          <div className="mt-3">
+                            <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
+                              {portalExists ? 'Confirm new password' : 'Confirm password'}
+                            </label>
+                            <input
+                              type="password"
+                              value={portalPassConfirm}
+                              onChange={(e) => setPortalPassConfirm(e.target.value)}
+                              placeholder="••••••••"
+                              autoComplete="new-password"
+                              onKeyDown={handleKeyDown}
+                              className={inputCls}
+                            />
+                            {portalPassConfirm.length > 0 && !portalPassMatch && (
+                              <p className="text-red-400/70 text-[11px] mt-1">Passwords don't match</p>
+                            )}
+                          </div>
+                        </>
+                      )}
+
+                      {/* ── 2FA toggle card ── */}
+                      <div className="mt-5 border border-white/[0.06] rounded-xl overflow-hidden">
                         <button
                           onClick={async () => {
-                            setPortalVerifying(true);
-                            setPortalOldPassError('');
-                            try {
-                              const res = await fetch('/api/portal/verify-password', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ password: portalOldPass }),
-                              });
-                              const data = await res.json();
-                              if (data.valid) {
-                                setPortalOldPassVerified(true);
+                            if (totpEnabled && totpVerified) {
+                              setTotpDisabling(true);
+                              return;
+                            }
+                            if (!totpEnabled) {
+                              // Enable → go to setup phase
+                              setTotpEnabled(true);
+                              setTotpError('');
+                              setTotpCode('');
+                              // Fetch QR if not already loaded
+                              if (!totpQrUri) {
+                                try {
+                                  const res = await fetch('/api/portal/totp/setup', {
+                                    method: 'POST',
+                                    headers: { 'Content-Type': 'application/json' },
+                                    body: JSON.stringify({ password: portalExists ? portalOldPass : portalPass }),
+                                  });
+                                  const data = await res.json();
+                                  if (res.ok) {
+                                    setTotpSecret(data.secret);
+                                    setTotpQrUri(data.qrDataUri);
+                                    setTotpOtpauthUri(data.otpauthUri);
+                                    setStep3Phase('totp-setup');
+                                  } else {
+                                    setTotpError(data.error || 'Setup failed');
+                                    setTotpEnabled(false);
+                                  }
+                                } catch {
+                                  setTotpError('Could not reach server');
+                                  setTotpEnabled(false);
+                                }
                               } else {
-                                setPortalOldPassError('Incorrect password');
+                                setStep3Phase('totp-setup');
                               }
-                            } catch {
-                              setPortalOldPassError('Could not verify');
-                            } finally {
-                              setPortalVerifying(false);
+                            } else {
+                              // Disable (setup incomplete)
+                              setTotpEnabled(false);
+                              setTotpQrUri('');
+                              setTotpSecret('');
+                              setTotpOtpauthUri('');
                             }
                           }}
-                          disabled={portalVerifying}
-                          className="shrink-0 px-4 py-3 bg-white/[0.06] hover:bg-white/[0.1] text-white/60 text-[13px] font-medium rounded-xl transition-colors disabled:opacity-40"
+                          type="button"
+                          className="w-full flex items-center gap-3 px-4 py-3 text-left"
                         >
-                          {portalVerifying ? <LoaderCircle className="h-4 w-4 animate-spin" /> : 'Verify'}
+                          <div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${totpEnabled && totpVerified ? 'bg-emerald-500/10' : 'bg-white/[0.04]'}`}>
+                            {totpEnabled && totpVerified ? (
+                              <ShieldCheck className="h-[18px] w-[18px] text-emerald-400" />
+                            ) : (
+                              <Shield className="h-[18px] w-[18px] text-white/30" />
+                            )}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <span className="text-[13px] font-medium text-white">Two-Factor Authentication</span>
+                              {(tunnelMode === 'quick' || tunnelMode === 'named') && !totpEnabled && (
+                                <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-400 border border-amber-500/20 shrink-0">Recommended</span>
+                              )}
+                              {totpEnabled && totpVerified && (
+                                <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shrink-0">Active</span>
+                              )}
+                            </div>
+                            <p className="text-[11px] text-white/30 mt-0.5">
+                              {totpEnabled && totpVerified ? 'Require a 6-digit code from your authenticator app' : 'Add an extra layer of security'}
+                            </p>
+                          </div>
+                          <div className={`w-10 h-6 rounded-full transition-colors relative shrink-0 ${totpEnabled ? 'bg-emerald-500' : 'bg-white/10'}`}>
+                            <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${totpEnabled ? 'translate-x-5' : 'translate-x-1'}`} />
+                          </div>
                         </button>
-                      )}
-                      {portalOldPassVerified && (
-                        <div className="shrink-0 w-10 h-10 flex items-center justify-center">
-                          <Check className="h-4 w-4 text-emerald-400" />
-                        </div>
-                      )}
-                    </div>
-                    {portalOldPassError && (
-                      <p className="text-red-400/70 text-[11px] mt-1">{portalOldPassError}</p>
-                    )}
-                  </div>
-                )}
 
-                {/* New password + confirm (shown when no existing credentials, or when old password verified) */}
-                {(!portalExists || portalOldPassVerified) && (
-                  <>
-                    <div className={portalExists ? 'mt-3' : 'mt-5'}>
-                      <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
-                        {portalExists ? 'New password' : 'Password'}
-                      </label>
-                      <input
-                        type="password"
-                        value={portalPass}
-                        onChange={(e) => setPortalPass(e.target.value)}
-                        placeholder="••••••••"
-                        autoComplete="new-password"
-                        autoFocus={!portalExists}
-                        onKeyDown={handleKeyDown}
-                        className={inputCls}
-                      />
-                      {portalPass.length > 0 && portalPass.length < 6 && (
-                        <p className="text-amber-400/70 text-[11px] mt-1">At least 6 characters</p>
-                      )}
-                    </div>
-
-                    <div className="mt-3">
-                      <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
-                        {portalExists ? 'Confirm new password' : 'Confirm password'}
-                      </label>
-                      <input
-                        type="password"
-                        value={portalPassConfirm}
-                        onChange={(e) => setPortalPassConfirm(e.target.value)}
-                        placeholder="••••••••"
-                        autoComplete="new-password"
-                        onKeyDown={handleKeyDown}
-                        className={inputCls}
-                      />
-                      {portalPassConfirm.length > 0 && !portalPassMatch && (
-                        <p className="text-red-400/70 text-[11px] mt-1">Passwords don't match</p>
-                      )}
-                    </div>
-                  </>
-                )}
-
-                {/* ── Two-Factor Authentication ── */}
-                <div className="mt-6 border border-white/[0.06] rounded-xl overflow-hidden">
-                  <button
-                    onClick={async () => {
-                      if (totpEnabled && totpVerified) {
-                        // Already enabled — show disable flow
-                        setTotpDisabling(true);
-                        return;
-                      }
-                      const newVal = !totpEnabled;
-                      setTotpEnabled(newVal);
-                      setTotpError('');
-                      setTotpCode('');
-                      setRecoveryCodes([]);
-                      setRecoveryCodesCopied(false);
-                      if (newVal && !totpQrUri) {
-                        // Start setup
-                        try {
-                          const res = await fetch('/api/portal/totp/setup', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ password: portalExists ? portalOldPass : portalPass }),
-                          });
-                          const data = await res.json();
-                          if (res.ok) {
-                            setTotpSecret(data.secret);
-                            setTotpQrUri(data.qrDataUri);
-                            setTotpOtpauthUri(data.otpauthUri);
-                          } else {
-                            setTotpError(data.error || 'Setup failed');
-                            setTotpEnabled(false);
-                          }
-                        } catch {
-                          setTotpError('Could not reach server');
-                          setTotpEnabled(false);
-                        }
-                      }
-                    }}
-                    type="button"
-                    className="w-full flex items-center gap-3 px-4 py-3 text-left"
-                  >
-                    <div className={`w-9 h-9 rounded-lg flex items-center justify-center ${totpEnabled && totpVerified ? 'bg-emerald-500/10' : 'bg-white/[0.04]'}`}>
-                      {totpEnabled && totpVerified ? (
-                        <ShieldCheck className="h-4.5 w-4.5 text-emerald-400" />
-                      ) : (
-                        <Shield className="h-4.5 w-4.5 text-white/30" />
-                      )}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="text-[13px] font-medium text-white">Two-Factor Authentication</span>
-                        {(tunnelMode === 'quick' || tunnelMode === 'named') && !totpEnabled && (
-                          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-400 border border-amber-500/20">Recommended</span>
+                        {/* Inline disable flow */}
+                        {totpDisabling && (
+                          <div className="px-4 pb-3 border-t border-white/[0.06]">
+                            <p className="text-[12px] text-white/40 mt-3 mb-2">Enter your current TOTP code to disable 2FA:</p>
+                            <div className="flex items-center gap-2">
+                              <input
+                                type="text"
+                                inputMode="numeric"
+                                autoComplete="one-time-code"
+                                maxLength={6}
+                                value={totpDisableCode}
+                                onChange={(e) => { setTotpDisableCode(e.target.value.replace(/\D/g, '')); setTotpDisableError(''); }}
+                                placeholder="000000"
+                                className={inputSmCls + ' flex-1 tracking-[0.3em] text-center font-mono'}
+                              />
+                              <button
+                                onClick={async () => {
+                                  if (totpDisableCode.length !== 6) return;
+                                  try {
+                                    const res = await fetch('/api/portal/totp/disable', {
+                                      method: 'POST',
+                                      headers: { 'Content-Type': 'application/json' },
+                                      body: JSON.stringify({ password: portalExists ? portalOldPass : portalPass, code: totpDisableCode }),
+                                    });
+                                    const data = await res.json();
+                                    if (res.ok) {
+                                      setTotpEnabled(false);
+                                      setTotpVerified(false);
+                                      setTotpSecret('');
+                                      setTotpQrUri('');
+                                      setTotpOtpauthUri('');
+                                      setTotpDisabling(false);
+                                      setTotpDisableCode('');
+                                      setRecoveryCodes([]);
+                                      setRecoveryCodesCopied(false);
+                                    } else {
+                                      setTotpDisableError(data.error || 'Failed to disable');
+                                    }
+                                  } catch {
+                                    setTotpDisableError('Could not reach server');
+                                  }
+                                }}
+                                disabled={totpDisableCode.length !== 6}
+                                className="shrink-0 px-4 py-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-400 text-[13px] font-medium rounded-xl transition-colors disabled:opacity-40"
+                              >
+                                Disable
+                              </button>
+                            </div>
+                            {totpDisableError && <p className="text-red-400/70 text-[11px] mt-1">{totpDisableError}</p>}
+                            <button onClick={() => { setTotpDisabling(false); setTotpDisableCode(''); setTotpDisableError(''); }} className="text-[11px] text-white/30 hover:text-white/50 mt-2">Cancel</button>
+                          </div>
                         )}
-                        {totpEnabled && totpVerified && (
-                          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Active</span>
+
+                        {totpError && step3Phase === 'password' && (
+                          <div className="mx-4 mb-3 bg-red-500/8 border border-red-500/15 rounded-xl px-3 py-2">
+                            <p className="text-red-400/90 text-[11px]">{totpError}</p>
+                          </div>
                         )}
                       </div>
-                      <p className="text-[11px] text-white/30 mt-0.5">
-                        {totpEnabled && totpVerified ? 'Require a 6-digit code from your authenticator app' : 'Add an extra layer of security with an authenticator app'}
-                      </p>
-                    </div>
-                    <div className={`w-10 h-6 rounded-full transition-colors relative ${totpEnabled ? 'bg-emerald-500' : 'bg-white/10'}`}>
-                      <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${totpEnabled ? 'translate-x-5' : 'translate-x-1'}`} />
-                    </div>
-                  </button>
 
-                  {/* Disable 2FA confirmation */}
-                  {totpDisabling && (
-                    <div className="px-4 pb-4 border-t border-white/[0.06]">
-                      <p className="text-[12px] text-white/40 mt-3 mb-2">Enter your current TOTP code to disable 2FA:</p>
-                      <div className="flex items-center gap-2">
-                        <input
-                          type="text"
-                          inputMode="numeric"
-                          autoComplete="one-time-code"
-                          maxLength={6}
-                          value={totpDisableCode}
-                          onChange={(e) => { setTotpDisableCode(e.target.value.replace(/\D/g, '')); setTotpDisableError(''); }}
-                          placeholder="000000"
-                          className={inputSmCls + ' flex-1 tracking-[0.3em] text-center font-mono'}
-                        />
+                      <button
+                        onClick={next}
+                        disabled={!canNext}
+                        className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                      >
+                        Continue
+                        <ArrowRight className="h-4 w-4" />
+                      </button>
+                    </motion.div>
+                  )}
+
+                  {/* ── Phase: TOTP Setup (QR + verify) ── */}
+                  {step3Phase === 'totp-setup' && (
+                    <motion.div
+                      key="totp-setup"
+                      initial={{ opacity: 0, x: 20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: 20 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <div className="flex items-center gap-3 mb-1">
                         <button
-                          onClick={async () => {
-                            if (totpDisableCode.length !== 6) return;
-                            try {
-                              const res = await fetch('/api/portal/totp/disable', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ password: portalExists ? portalOldPass : portalPass, code: totpDisableCode }),
-                              });
-                              const data = await res.json();
-                              if (res.ok) {
-                                setTotpEnabled(false);
-                                setTotpVerified(false);
-                                setTotpSecret('');
-                                setTotpQrUri('');
-                                setTotpOtpauthUri('');
-                                setTotpDisabling(false);
-                                setTotpDisableCode('');
-                                setRecoveryCodes([]);
-                                setRecoveryCodesCopied(false);
-                              } else {
-                                setTotpDisableError(data.error || 'Failed to disable');
-                              }
-                            } catch {
-                              setTotpDisableError('Could not reach server');
-                            }
+                          onClick={() => {
+                            setTotpEnabled(false);
+                            setTotpQrUri('');
+                            setTotpSecret('');
+                            setTotpOtpauthUri('');
+                            setTotpCode('');
+                            setTotpError('');
+                            setStep3Phase('password');
                           }}
-                          disabled={totpDisableCode.length !== 6}
-                          className="shrink-0 px-4 py-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-400 text-[13px] font-medium rounded-xl transition-colors disabled:opacity-40"
+                          className="w-7 h-7 rounded-full bg-white/[0.04] flex items-center justify-center text-white/40 hover:text-white/70 transition-colors shrink-0"
                         >
-                          Disable
+                          <ArrowLeft className="h-4 w-4" />
                         </button>
+                        <h1 className="text-xl font-bold text-white tracking-tight">Set up 2FA</h1>
                       </div>
-                      {totpDisableError && <p className="text-red-400/70 text-[11px] mt-1">{totpDisableError}</p>}
-                      <button onClick={() => { setTotpDisabling(false); setTotpDisableCode(''); setTotpDisableError(''); }} className="text-[11px] text-white/30 hover:text-white/50 mt-2">Cancel</button>
-                    </div>
-                  )}
 
-                  {/* TOTP Setup flow */}
-                  {totpEnabled && !totpVerified && !totpDisabling && (
-                    <div className="px-4 pb-4 border-t border-white/[0.06]">
                       {totpError && (
                         <div className="mt-3 bg-red-500/8 border border-red-500/15 rounded-xl px-3 py-2">
                           <p className="text-red-400/90 text-[11px]">{totpError}</p>
@@ -1216,45 +1276,56 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
 
                       {totpQrUri && (
                         <>
-                          <p className="text-[12px] text-white/40 mt-3 mb-3">
-                            Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.)
-                          </p>
-
-                          {/* QR Code / Mobile deep link */}
+                          {/* Desktop: horizontal QR + instructions | Mobile: authenticator link */}
                           {isMobileDevice ? (
-                            <div className="flex flex-col items-center gap-3">
+                            <div className="mt-4">
+                              <p className="text-white/40 text-[13px] leading-relaxed mb-4">
+                                Add Fluxy to your authenticator app, then enter the 6-digit code below to confirm.
+                              </p>
                               <a
                                 href={totpOtpauthUri}
-                                className="w-full py-2.5 bg-[#AF27E3]/10 hover:bg-[#AF27E3]/20 text-[#AF27E3] text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
+                                className="w-full py-3 bg-[#AF27E3]/10 hover:bg-[#AF27E3]/20 text-[#AF27E3] text-[14px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
                               >
                                 <Smartphone className="h-4 w-4" />
                                 Open in Authenticator
                               </a>
                               <button
                                 onClick={() => { navigator.clipboard.writeText(totpSecret); }}
-                                className="text-[11px] text-white/30 hover:text-white/50 flex items-center gap-1"
+                                className="w-full mt-2 text-[11px] text-white/25 hover:text-white/40 flex items-center justify-center gap-1 py-1 transition-colors"
                               >
                                 <Copy className="h-3 w-3" />
-                                Copy secret key
+                                Or copy secret key manually
                               </button>
                             </div>
                           ) : (
-                            <div className="flex flex-col items-center gap-3">
-                              <div className="bg-white rounded-xl p-2">
-                                <img src={totpQrUri} alt="TOTP QR Code" className="w-48 h-48" />
+                            <div className="mt-4 flex gap-4 items-start">
+                              {/* QR Code — compact */}
+                              <div className="shrink-0">
+                                <div className="bg-white rounded-xl p-1.5">
+                                  <img src={totpQrUri} alt="TOTP QR Code" className="w-[140px] h-[140px]" />
+                                </div>
+                              </div>
+                              {/* Instructions */}
+                              <div className="flex-1 min-w-0 pt-1">
+                                <p className="text-white/40 text-[13px] leading-relaxed">
+                                  Scan this QR code with your authenticator app.
+                                </p>
+                                <p className="text-white/25 text-[11px] mt-2 leading-relaxed">
+                                  Google Authenticator, Authy, 1Password, or any TOTP app.
+                                </p>
+                                <button
+                                  onClick={() => { navigator.clipboard.writeText(totpSecret); }}
+                                  className="mt-3 text-[11px] text-white/25 hover:text-white/40 flex items-center gap-1 transition-colors"
+                                >
+                                  <Copy className="h-3 w-3" />
+                                  Copy secret key
+                                </button>
                               </div>
-                              <button
-                                onClick={() => { navigator.clipboard.writeText(totpSecret); }}
-                                className="text-[11px] text-white/30 hover:text-white/50 flex items-center gap-1"
-                              >
-                                <Copy className="h-3 w-3" />
-                                Copy secret key: {totpSecret.slice(0, 8)}...
-                              </button>
                             </div>
                           )}
 
                           {/* Verification input */}
-                          <div className="mt-4">
+                          <div className="mt-5">
                             <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Enter the 6-digit code from your app</label>
                             <div className="flex items-center gap-2">
                               <input
@@ -1265,7 +1336,8 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                                 value={totpCode}
                                 onChange={(e) => { setTotpCode(e.target.value.replace(/\D/g, '')); setTotpError(''); }}
                                 placeholder="000000"
-                                className={inputSmCls + ' flex-1 tracking-[0.3em] text-center font-mono'}
+                                autoFocus
+                                className={inputCls + ' tracking-[0.3em] text-center font-mono flex-1'}
                               />
                               <button
                                 onClick={async () => {
@@ -1282,6 +1354,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                                     if (res.ok && data.success) {
                                       setTotpVerified(true);
                                       setRecoveryCodes(data.recoveryCodes || []);
+                                      setStep3Phase('recovery');
                                     } else {
                                       setTotpError(data.error || 'Verification failed');
                                     }
@@ -1292,7 +1365,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                                   }
                                 }}
                                 disabled={totpCode.length !== 6 || totpVerifying}
-                                className="shrink-0 px-4 py-2.5 bg-white/[0.06] hover:bg-white/[0.1] text-white/60 text-[13px] font-medium rounded-xl transition-colors disabled:opacity-40"
+                                className="shrink-0 px-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-xl transition-colors flex items-center gap-2 disabled:opacity-40"
                               >
                                 {totpVerifying ? <LoaderCircle className="h-4 w-4 animate-spin" /> : 'Verify'}
                               </button>
@@ -1300,54 +1373,72 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                           </div>
                         </>
                       )}
-                    </div>
+                    </motion.div>
                   )}
 
-                  {/* Recovery codes */}
-                  {recoveryCodes.length > 0 && (
-                    <div className="px-4 pb-4 border-t border-white/[0.06]">
-                      <div className="mt-3 bg-amber-500/5 border border-amber-500/15 rounded-xl px-3 py-2.5">
-                        <p className="text-amber-400 text-[12px] font-medium mb-1">Save your recovery codes</p>
-                        <p className="text-white/30 text-[11px] mb-3">
-                          If you lose access to your authenticator, use one of these codes to sign in. Each code works once.
-                        </p>
-                        <div className="grid grid-cols-2 gap-1.5">
-                          {recoveryCodes.map((code, i) => (
-                            <div key={i} className="bg-black/30 rounded-lg px-2.5 py-1.5 text-center">
-                              <code className="text-[12px] text-white/60 font-mono tracking-wider">{code}</code>
-                            </div>
-                          ))}
+                  {/* ── Phase: Recovery codes ── */}
+                  {step3Phase === 'recovery' && (
+                    <motion.div
+                      key="recovery"
+                      initial={{ opacity: 0, x: 20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: 20 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <div className="flex items-center gap-3 mb-1">
+                        <div className="w-9 h-9 rounded-xl bg-emerald-500/10 flex items-center justify-center shrink-0">
+                          <ShieldCheck className="h-[18px] w-[18px] text-emerald-400" />
+                        </div>
+                        <div>
+                          <h1 className="text-xl font-bold text-white tracking-tight">2FA enabled</h1>
+                          <p className="text-emerald-400/70 text-[12px]">Save your recovery codes</p>
                         </div>
-                        <button
-                          onClick={() => {
-                            navigator.clipboard.writeText(recoveryCodes.join('\n'));
-                            setRecoveryCodesCopied(true);
-                          }}
-                          className={`w-full mt-3 py-2 text-[12px] font-medium rounded-lg transition-colors flex items-center justify-center gap-1.5 ${
-                            recoveryCodesCopied
-                              ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
-                              : 'bg-white/[0.04] text-white/50 hover:bg-white/[0.08] border border-white/[0.06]'
-                          }`}
-                        >
-                          {recoveryCodesCopied ? (
-                            <><Check className="h-3.5 w-3.5" />Copied — I've saved these</>
-                          ) : (
-                            <><Copy className="h-3.5 w-3.5" />Copy recovery codes</>
-                          )}
-                        </button>
                       </div>
-                    </div>
-                  )}
-                </div>
 
-                <button
-                  onClick={next}
-                  disabled={!canNext}
-                  className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
-                >
-                  Continue
-                  <ArrowRight className="h-4 w-4" />
-                </button>
+                      <p className="text-white/35 text-[13px] mt-3 leading-relaxed">
+                        If you lose your authenticator app, you can use one of these codes to sign in. Each code works once. Store them somewhere safe.
+                      </p>
+
+                      <div className="mt-4 grid grid-cols-2 gap-1.5">
+                        {recoveryCodes.map((code, i) => (
+                          <div key={i} className="bg-white/[0.03] border border-white/[0.06] rounded-lg px-3 py-2 text-center">
+                            <code className="text-[13px] text-white/60 font-mono tracking-wider">{code}</code>
+                          </div>
+                        ))}
+                      </div>
+
+                      <button
+                        onClick={() => {
+                          navigator.clipboard.writeText(recoveryCodes.join('\n'));
+                          setRecoveryCodesCopied(true);
+                        }}
+                        className={`w-full mt-4 py-3 text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 ${
+                          recoveryCodesCopied
+                            ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
+                            : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.08] border border-white/[0.08]'
+                        }`}
+                      >
+                        {recoveryCodesCopied ? (
+                          <><Check className="h-4 w-4" />Copied</>
+                        ) : (
+                          <><Copy className="h-4 w-4" />Copy recovery codes</>
+                        )}
+                      </button>
+
+                      <button
+                        onClick={() => {
+                          setRecoveryCodes([]);
+                          setStep3Phase('password');
+                        }}
+                        disabled={!recoveryCodesCopied}
+                        className="w-full mt-3 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                      >
+                        Done
+                        <ArrowRight className="h-4 w-4" />
+                      </button>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
               </div>
             )}