Merge branch 'main' into feat/add-searchbar-in-atlas

client/src/pages/AdminPage.tsx

@@ -14,6 +14,7 @@ import GitHubPanel from '../components/Admin/GitHubPanel'
 import AddonManager from '../components/Admin/AddonManager'
 import PackingTemplateManager from '../components/Admin/PackingTemplateManager'
 import AuditLogPanel from '../components/Admin/AuditLogPanel'
+import AdminMcpTokensPanel from '../components/Admin/AdminMcpTokensPanel'
 import { Users, Map, Briefcase, Shield, Trash2, Edit2, Camera, FileText, Eye, EyeOff, Save, CheckCircle, XCircle, Loader2, UserPlus, ArrowUpCircle, ExternalLink, Download, AlertTriangle, RefreshCw, GitBranch, Sun, Link2, Copy, Plus } from 'lucide-react'
 import CustomSelect from '../components/shared/CustomSelect'
 
@@ -63,6 +64,7 @@ export default function AdminPage(): React.ReactElement {
     { id: 'settings', label: t('admin.tabs.settings') },
     { id: 'backup', label: t('admin.tabs.backup') },
     { id: 'audit', label: t('admin.tabs.audit') },
+    { id: 'mcp-tokens', label: t('admin.tabs.mcpTokens') },
     { id: 'github', label: t('admin.tabs.github') },
   ]
 
@@ -85,6 +87,7 @@ export default function AdminPage(): React.ReactElement {
 
   // Registration toggle
   const [allowRegistration, setAllowRegistration] = useState<boolean>(true)
+  const [requireMfa, setRequireMfa] = useState<boolean>(false)
 
   // Invite links
   const [invites, setInvites] = useState<any[]>([])
@@ -119,7 +122,7 @@ export default function AdminPage(): React.ReactElement {
   const [updating, setUpdating] = useState<boolean>(false)
   const [updateResult, setUpdateResult] = useState<'success' | 'error' | null>(null)
 
-  const { user: currentUser, updateApiKeys } = useAuthStore()
+  const { user: currentUser, updateApiKeys, setAppRequireMfa } = useAuthStore()
   const navigate = useNavigate()
   const toast = useToast()
 
@@ -155,6 +158,7 @@ export default function AdminPage(): React.ReactElement {
     try {
       const config = await authApi.getAppConfig()
       setAllowRegistration(config.allow_registration)
+      if (config.require_mfa !== undefined) setRequireMfa(!!config.require_mfa)
       if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
     } catch (err: unknown) {
       // ignore
@@ -201,6 +205,18 @@ export default function AdminPage(): React.ReactElement {
     }
   }
 
+  const handleToggleRequireMfa = async (value: boolean) => {
+    setRequireMfa(value)
+    try {
+      await authApi.updateAppSettings({ require_mfa: value })
+      setAppRequireMfa(value)
+      toast.success(t('common.saved'))
+    } catch (err: unknown) {
+      setRequireMfa(!value)
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    }
+  }
+
   const toggleKey = (key) => {
     setShowKeys(prev => ({ ...prev, [key]: !prev[key] }))
   }
@@ -706,6 +722,34 @@ export default function AdminPage(): React.ReactElement {
                 </div>
               </div>
 
+              {/* Require 2FA for all users */}
+              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                <div className="px-6 py-4 border-b border-slate-100">
+                  <h2 className="font-semibold text-slate-900">{t('admin.requireMfa')}</h2>
+                </div>
+                <div className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium text-slate-700">{t('admin.requireMfa')}</p>
+                      <p className="text-xs text-slate-400 mt-0.5">{t('admin.requireMfaHint')}</p>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleToggleRequireMfa(!requireMfa)}
+                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                        requireMfa ? 'bg-slate-900' : 'bg-slate-300'
+                      }`}
+                    >
+                      <span
+                        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                          requireMfa ? 'translate-x-6' : 'translate-x-1'
+                        }`}
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+
               {/* Allowed File Types */}
               <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                 <div className="px-6 py-4 border-b border-slate-100">
@@ -997,6 +1041,8 @@ export default function AdminPage(): React.ReactElement {
 
           {activeTab === 'audit' && <AuditLogPanel />}
 
+          {activeTab === 'mcp-tokens' && <AdminMcpTokensPanel />}
+
           {activeTab === 'github' && <GitHubPanel />}
         </div>
       </div>

client/src/pages/LoginPage.tsx

@@ -544,11 +544,11 @@ export default function LoginPage(): React.ReactElement {
                     <KeyRound size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
                     <input
                       type="text"
-                      inputMode="numeric"
+                      inputMode="text"
                       autoComplete="one-time-code"
                       value={mfaCode}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMfaCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
-                      placeholder="000000"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMfaCode(e.target.value.toUpperCase().slice(0, 24))}
+                      placeholder="000000 or XXXX-XXXX"
                       required
                       style={inputBase}
                       onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}

client/src/pages/SettingsPage.tsx

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useAuthStore } from '../store/authStore'
 import { useSettingsStore } from '../store/settingsStore'
 import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
 import Navbar from '../components/Layout/Navbar'
 import CustomSelect from '../components/shared/CustomSelect'
 import { useToast } from '../components/shared/Toast'
-import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock, KeyRound } from 'lucide-react'
+import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock, KeyRound, AlertTriangle, Copy, Download, Printer, Terminal, Plus, Check } from 'lucide-react'
 import { authApi, adminApi, notificationsApi } from '../api/client'
 import apiClient from '../api/client'
+import { useAddonStore } from '../store/addonStore'
 import type { LucideIcon } from 'lucide-react'
 import type { UserWithOidc } from '../types'
 import { getApiErrorMessage } from '../types'
@@ -18,6 +19,15 @@ interface MapPreset {
   url: string
 }
 
+const MFA_BACKUP_SESSION_KEY = 'trek_mfa_backup_codes_pending'
+interface McpToken {
+  id: number
+  name: string
+  token_prefix: string
+  created_at: string
+  last_used_at: string | null
+}
+
 const MAP_PRESETS: MapPreset[] = [
   { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
   { name: 'OpenStreetMap DE', url: 'https://tile.openstreetmap.de/{z}/{x}/{y}.png' },
@@ -101,36 +111,39 @@ function NotificationPreferences({ t, memoriesEnabled }: { t: any; memoriesEnabl
 }
 
 export default function SettingsPage(): React.ReactElement {
-  const { user, updateProfile, uploadAvatar, deleteAvatar, logout, loadUser, demoMode } = useAuthStore()
+  const { user, updateProfile, uploadAvatar, deleteAvatar, logout, loadUser, demoMode, appRequireMfa } = useAuthStore()
+  const [searchParams] = useSearchParams()
   const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean | 'blocked'>(false)
   const avatarInputRef = React.useRef<HTMLInputElement>(null)
   const { settings, updateSetting, updateSettings } = useSettingsStore()
+  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
   const { t, locale } = useTranslation()
   const toast = useToast()
   const navigate = useNavigate()
 
   const [saving, setSaving] = useState<Record<string, boolean>>({})
 
-  // Immich
-  const [memoriesEnabled, setMemoriesEnabled] = useState(false)
+  // Addon gating (derived from store)
+  const memoriesEnabled = addonEnabled('memories')
+  const mcpEnabled = addonEnabled('mcp')
   const [immichUrl, setImmichUrl] = useState('')
   const [immichApiKey, setImmichApiKey] = useState('')
   const [immichConnected, setImmichConnected] = useState(false)
   const [immichTesting, setImmichTesting] = useState(false)
 
   useEffect(() => {
-    apiClient.get('/addons').then(r => {
-      const mem = r.data.addons?.find((a: any) => a.id === 'memories' && a.enabled)
-      setMemoriesEnabled(!!mem)
-      if (mem) {
-        apiClient.get('/integrations/immich/settings').then(r2 => {
-          setImmichUrl(r2.data.immich_url || '')
-          setImmichConnected(r2.data.connected)
-        }).catch(() => {})
-      }
-    }).catch(() => {})
+    loadAddons()
   }, [])
 
+  useEffect(() => {
+    if (memoriesEnabled) {
+      apiClient.get('/integrations/immich/settings').then(r2 => {
+        setImmichUrl(r2.data.immich_url || '')
+        setImmichConnected(r2.data.connected)
+      }).catch(() => {})
+    }
+  }, [memoriesEnabled])
+
   const handleSaveImmich = async () => {
     setSaving(s => ({ ...s, immich: true }))
     try {
@@ -164,6 +177,67 @@ export default function SettingsPage(): React.ReactElement {
     }
   }
 
+  // MCP tokens
+  const [mcpTokens, setMcpTokens] = useState<McpToken[]>([])
+  const [mcpModalOpen, setMcpModalOpen] = useState(false)
+  const [mcpNewName, setMcpNewName] = useState('')
+  const [mcpCreatedToken, setMcpCreatedToken] = useState<string | null>(null)
+  const [mcpCreating, setMcpCreating] = useState(false)
+  const [mcpDeleteId, setMcpDeleteId] = useState<number | null>(null)
+  const [copiedKey, setCopiedKey] = useState<string | null>(null)
+
+  useEffect(() => {
+    authApi.mcpTokens.list().then(d => setMcpTokens(d.tokens || [])).catch(() => {})
+  }, [])
+
+  const handleCreateMcpToken = async () => {
+    if (!mcpNewName.trim()) return
+    setMcpCreating(true)
+    try {
+      const d = await authApi.mcpTokens.create(mcpNewName.trim())
+      setMcpCreatedToken(d.token.raw_token)
+      setMcpNewName('')
+      setMcpTokens(prev => [{ id: d.token.id, name: d.token.name, token_prefix: d.token.token_prefix, created_at: d.token.created_at, last_used_at: null }, ...prev])
+    } catch {
+      toast.error(t('settings.mcp.toast.createError'))
+    } finally {
+      setMcpCreating(false)
+    }
+  }
+
+  const handleDeleteMcpToken = async (id: number) => {
+    try {
+      await authApi.mcpTokens.delete(id)
+      setMcpTokens(prev => prev.filter(tk => tk.id !== id))
+      setMcpDeleteId(null)
+      toast.success(t('settings.mcp.toast.deleted'))
+    } catch {
+      toast.error(t('settings.mcp.toast.deleteError'))
+    }
+  }
+
+  const handleCopy = (text: string, key: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedKey(key)
+      setTimeout(() => setCopiedKey(null), 2000)
+    })
+  }
+
+  const mcpEndpoint = `${window.location.origin}/mcp`
+  const mcpJsonConfig = `{
+  "mcpServers": {
+    "trek": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "${mcpEndpoint}",
+        "--header",
+        "Authorization: Bearer <your_token>"
+      ]
+    }
+  }
+}`
+
   // Map settings
   const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
   const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
@@ -193,6 +267,71 @@ export default function SettingsPage(): React.ReactElement {
   const [mfaDisablePwd, setMfaDisablePwd] = useState('')
   const [mfaDisableCode, setMfaDisableCode] = useState('')
   const [mfaLoading, setMfaLoading] = useState(false)
+  const mfaRequiredByPolicy =
+    !demoMode &&
+    !user?.mfa_enabled &&
+    (searchParams.get('mfa') === 'required' || appRequireMfa)
+
+  const [backupCodes, setBackupCodes] = useState<string[] | null>(null)
+
+  const backupCodesText = backupCodes?.join('\n') || ''
+
+  // Restore backup codes panel after refresh (loadUser silent fix + sessionStorage)
+  useEffect(() => {
+    if (!user?.mfa_enabled || backupCodes) return
+    try {
+      const raw = sessionStorage.getItem(MFA_BACKUP_SESSION_KEY)
+      if (!raw) return
+      const parsed = JSON.parse(raw) as unknown
+      if (Array.isArray(parsed) && parsed.length > 0 && parsed.every((x) => typeof x === 'string')) {
+        setBackupCodes(parsed)
+      }
+    } catch {
+      sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+    }
+  }, [user?.mfa_enabled, backupCodes])
+
+  const dismissBackupCodes = (): void => {
+    sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+    setBackupCodes(null)
+  }
+
+  const copyBackupCodes = async (): Promise<void> => {
+    if (!backupCodesText) return
+    try {
+      await navigator.clipboard.writeText(backupCodesText)
+      toast.success(t('settings.mfa.backupCopied'))
+    } catch {
+      toast.error(t('common.error'))
+    }
+  }
+
+  const downloadBackupCodes = (): void => {
+    if (!backupCodesText) return
+    const blob = new Blob([backupCodesText + '\n'], { type: 'text/plain;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'trek-mfa-backup-codes.txt'
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  const printBackupCodes = (): void => {
+    if (!backupCodesText) return
+    const html = `<!doctype html><html><head><meta charset="utf-8"/><title>TREK MFA Backup Codes</title>
+      <style>body{font-family:Arial,sans-serif;padding:32px}h1{font-size:20px}pre{font-size:16px;line-height:1.6}</style>
+      </head><body><h1>TREK MFA Backup Codes</h1><p>${new Date().toLocaleString()}</p><pre>${backupCodesText}</pre></body></html>`
+    const w = window.open('', '_blank', 'width=900,height=700')
+    if (!w) return
+    w.document.open()
+    w.document.write(html)
+    w.document.close()
+    w.focus()
+    w.print()
+  }
 
   useEffect(() => {
     setMapTileUrl(settings.map_tile_url || '')
@@ -572,6 +711,162 @@ export default function SettingsPage(): React.ReactElement {
             </Section>
           )}
 
+          {/* MCP Configuration — only when MCP addon is enabled */}
+          {mcpEnabled && <Section title={t('settings.mcp.title')} icon={Terminal}>
+            {/* Endpoint URL */}
+            <div>
+              <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.endpoint')}</label>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 px-3 py-2 rounded-lg text-sm font-mono border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                  {mcpEndpoint}
+                </code>
+                <button onClick={() => handleCopy(mcpEndpoint, 'endpoint')}
+                  className="p-2 rounded-lg border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                  style={{ borderColor: 'var(--border-primary)' }} title={t('settings.mcp.copy')}>
+                  {copiedKey === 'endpoint' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />}
+                </button>
+              </div>
+            </div>
+
+            {/* JSON config box */}
+            <div>
+              <div className="flex items-center justify-between mb-1.5">
+                <label className="block text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.clientConfig')}</label>
+                <button onClick={() => handleCopy(mcpJsonConfig, 'json')}
+                  className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                  style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                  {copiedKey === 'json' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
+                  {copiedKey === 'json' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
+                </button>
+              </div>
+              <pre className="p-3 rounded-lg text-xs font-mono overflow-x-auto border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                {mcpJsonConfig}
+              </pre>
+              <p className="mt-1.5 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.mcp.clientConfigHint')}</p>
+            </div>
+
+            {/* Token list */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.apiTokens')}</label>
+                <button onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                  style={{ background: 'var(--accent-primary, #4f46e5)', color: '#fff' }}>
+                  <Plus className="w-3.5 h-3.5" /> {t('settings.mcp.createToken')}
+                </button>
+              </div>
+
+              {mcpTokens.length === 0 ? (
+                <p className="text-sm py-3 text-center rounded-lg border" style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)' }}>
+                  {t('settings.mcp.noTokens')}
+                </p>
+              ) : (
+                <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                  {mcpTokens.map((token, i) => (
+                    <div key={token.id} className="flex items-center gap-3 px-4 py-3"
+                      style={{ borderBottom: i < mcpTokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
+                        <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                          {token.token_prefix}...
+                          <span className="ml-3 font-sans">{t('settings.mcp.tokenCreatedAt')} {new Date(token.created_at).toLocaleDateString(locale)}</span>
+                          {token.last_used_at && (
+                            <span className="ml-2">· {t('settings.mcp.tokenUsedAt')} {new Date(token.last_used_at).toLocaleDateString(locale)}</span>
+                          )}
+                        </p>
+                      </div>
+                      <button onClick={() => setMcpDeleteId(token.id)}
+                        className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                        style={{ color: 'var(--text-tertiary)' }} title={t('settings.mcp.deleteTokenTitle')}>
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </Section>}
+
+          {/* Create MCP Token modal */}
+          {mcpModalOpen && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+              onClick={e => { if (e.target === e.currentTarget && !mcpCreatedToken) { setMcpModalOpen(false) } }}>
+              <div className="rounded-xl shadow-xl w-full max-w-md p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+                {!mcpCreatedToken ? (
+                  <>
+                    <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createTitle')}</h3>
+                    <div>
+                      <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.tokenName')}</label>
+                      <input type="text" value={mcpNewName} onChange={e => setMcpNewName(e.target.value)}
+                        onKeyDown={e => e.key === 'Enter' && handleCreateMcpToken()}
+                        placeholder={t('settings.mcp.modal.tokenNamePlaceholder')}
+                        className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
+                        style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
+                        autoFocus />
+                    </div>
+                    <div className="flex gap-2 justify-end pt-1">
+                      <button onClick={() => setMcpModalOpen(false)}
+                        className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        {t('common.cancel')}
+                      </button>
+                      <button onClick={handleCreateMcpToken} disabled={!mcpNewName.trim() || mcpCreating}
+                        className="px-4 py-2 rounded-lg text-sm font-medium text-white disabled:opacity-50"
+                        style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                        {mcpCreating ? t('settings.mcp.modal.creating') : t('settings.mcp.modal.create')}
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createdTitle')}</h3>
+                    <div className="flex items-start gap-2 p-3 rounded-lg border border-amber-200" style={{ background: 'rgba(251,191,36,0.1)' }}>
+                      <span className="text-amber-500 mt-0.5">⚠</span>
+                      <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.createdWarning')}</p>
+                    </div>
+                    <div className="relative">
+                      <pre className="p-3 pr-10 rounded-lg text-xs font-mono break-all border whitespace-pre-wrap" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                        {mcpCreatedToken}
+                      </pre>
+                      <button onClick={() => handleCopy(mcpCreatedToken, 'new-token')}
+                        className="absolute top-2 right-2 p-1.5 rounded transition-colors hover:bg-slate-200 dark:hover:bg-slate-600"
+                        style={{ color: 'var(--text-secondary)' }} title={t('settings.mcp.copy')}>
+                        {copiedKey === 'new-token' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                      </button>
+                    </div>
+                    <div className="flex justify-end">
+                      <button onClick={() => { setMcpModalOpen(false); setMcpCreatedToken(null) }}
+                        className="px-4 py-2 rounded-lg text-sm font-medium text-white"
+                        style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                        {t('settings.mcp.modal.done')}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Delete MCP Token confirm */}
+          {mcpDeleteId !== null && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+              onClick={e => { if (e.target === e.currentTarget) setMcpDeleteId(null) }}>
+              <div className="rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+                <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.deleteTokenTitle')}</h3>
+                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.deleteTokenMessage')}</p>
+                <div className="flex gap-2 justify-end">
+                  <button onClick={() => setMcpDeleteId(null)}
+                    className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                    {t('common.cancel')}
+                  </button>
+                  <button onClick={() => handleDeleteMcpToken(mcpDeleteId)}
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
+                    {t('settings.mcp.deleteTokenTitle')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Account */}
           <Section title={t('settings.account')} icon={User}>
             <div>
@@ -652,6 +947,19 @@ export default function SettingsPage(): React.ReactElement {
                 <h3 className="font-semibold text-base m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.title')}</h3>
               </div>
               <div className="space-y-3">
+                {mfaRequiredByPolicy && (
+                  <div
+                    className="flex gap-3 p-3 rounded-lg border text-sm"
+                    style={{
+                      background: 'var(--bg-secondary)',
+                      borderColor: 'var(--border-primary)',
+                      color: 'var(--text-primary)',
+                    }}
+                  >
+                    <AlertTriangle className="w-5 h-5 flex-shrink-0 text-amber-600" />
+                    <p className="m-0 leading-relaxed">{t('settings.mfa.requiredByPolicy')}</p>
+                  </div>
+                )}
                 <p className="text-sm m-0" style={{ color: 'var(--text-muted)', lineHeight: 1.5 }}>{t('settings.mfa.description')}</p>
                 {demoMode ? (
                   <p className="text-sm text-amber-700 m-0">{t('settings.mfa.demoBlocked')}</p>
@@ -709,12 +1017,21 @@ export default function SettingsPage(): React.ReactElement {
                             onClick={async () => {
                               setMfaLoading(true)
                               try {
-                                await authApi.mfaEnable({ code: mfaSetupCode })
+                                const resp = await authApi.mfaEnable({ code: mfaSetupCode }) as { backup_codes?: string[] }
                                 toast.success(t('settings.mfa.toastEnabled'))
                                 setMfaQr(null)
                                 setMfaSecret(null)
                                 setMfaSetupCode('')
-                                await loadUser()
+                                const codes = resp.backup_codes || null
+                                if (codes?.length) {
+                                  try {
+                                    sessionStorage.setItem(MFA_BACKUP_SESSION_KEY, JSON.stringify(codes))
+                                  } catch {
+                                    /* ignore quota / private mode */
+                                  }
+                                }
+                                setBackupCodes(codes)
+                                await loadUser({ silent: true })
                               } catch (err: unknown) {
                                 toast.error(getApiErrorMessage(err, t('common.error')))
                               } finally {
@@ -766,7 +1083,9 @@ export default function SettingsPage(): React.ReactElement {
                               toast.success(t('settings.mfa.toastDisabled'))
                               setMfaDisablePwd('')
                               setMfaDisableCode('')
-                              await loadUser()
+                              sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+                              setBackupCodes(null)
+                              await loadUser({ silent: true })
                             } catch (err: unknown) {
                               toast.error(getApiErrorMessage(err, t('common.error')))
                             } finally {
@@ -779,6 +1098,29 @@ export default function SettingsPage(): React.ReactElement {
                         </button>
                       </div>
                     )}
+
+                    {backupCodes && backupCodes.length > 0 && (
+                      <div className="space-y-3 p-3 rounded-lg border" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-hover)' }}>
+                        <p className="text-sm font-semibold m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.backupTitle')}</p>
+                        <p className="text-xs m-0" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.backupDescription')}</p>
+                        <pre className="text-xs m-0 p-2 rounded border overflow-auto" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', maxHeight: 220 }}>{backupCodesText}</pre>
+                        <p className="text-xs m-0" style={{ color: '#b45309' }}>{t('settings.mfa.backupWarning')}</p>
+                        <div className="flex flex-wrap gap-2">
+                          <button type="button" onClick={copyBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            <Copy size={13} /> {t('settings.mfa.backupCopy')}
+                          </button>
+                          <button type="button" onClick={downloadBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            <Download size={13} /> {t('settings.mfa.backupDownload')}
+                          </button>
+                          <button type="button" onClick={printBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            <Printer size={13} /> {t('settings.mfa.backupPrint')}
+                          </button>
+                          <button type="button" onClick={dismissBackupCodes} className="px-3 py-2 rounded-lg text-xs border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            {t('common.ok')}
+                          </button>
+                        </div>
+                      </div>
+                    )}
                   </>
                 )}
               </div>