@bod.ee/db 0.12.8 → 0.13.1

package/admin/src/components/tabs/KeyAuth.tsx

@@ -0,0 +1,462 @@
+import { useEffect, useRef } from 'react';
+import { db } from '../../context/DbContext';
+
+interface Props { active: boolean; }
+
+interface AccountInfo {
+  fingerprint: string;
+  displayName?: string;
+  roles?: string[];
+  encryptedPrivateKey?: string;
+  salt?: string;
+  iv?: string;
+  authTag?: string;
+  publicKey?: string;
+}
+
+interface DeviceKeys { publicKey: string; privateKeyDer: Uint8Array; }
+
+// QR lib loader
+let _qrLib: unknown = null;
+async function loadQRLib(): Promise<(typeNumber: number, errorCorrectionLevel: string) => { addData(s: string): void; make(): void; getModuleCount(): number; isDark(r: number, c: number): boolean }> {
+  if (_qrLib) return _qrLib as never;
+  return new Promise((resolve, reject) => {
+    const s = document.createElement('script');
+    s.src = 'https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js';
+    s.onload = () => { _qrLib = (window as unknown as { qrcode: unknown }).qrcode; resolve(_qrLib as never); };
+    s.onerror = () => reject(new Error('Failed to load QR lib'));
+    document.head.appendChild(s);
+  });
+}
+
+async function generateQRSvg(text: string, size = 150): Promise<string> {
+  const qr = await loadQRLib();
+  const q = qr(0, 'L');
+  q.addData(text);
+  q.make();
+  const moduleCount = q.getModuleCount();
+  const cellSize = Math.floor(size / moduleCount);
+  const actualSize = cellSize * moduleCount;
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${actualSize}" height="${actualSize}" viewBox="0 0 ${moduleCount} ${moduleCount}">`;
+  svg += `<rect width="${moduleCount}" height="${moduleCount}" fill="#fff"/>`;
+  for (let r = 0; r < moduleCount; r++)
+    for (let c = 0; c < moduleCount; c++)
+      if (q.isDark(r, c)) svg += `<rect x="${c}" y="${r}" width="1" height="1" fill="#000"/>`;
+  svg += '</svg>';
+  return svg;
+}
+
+export default function KeyAuth({ active }: Props) {
+  const kaPermsRef = useRef<Array<{ path: string; read: boolean; write: boolean }>>([]);
+  const kaExpandedFpRef = useRef<string | null>(null);
+  const kaDeviceKeysRef = useRef<DeviceKeys | null>(null);
+  const kaQrPollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const kaAccountsRef = useRef<AccountInfo[]>([]);
+
+  useEffect(() => {
+    if (active) loadKeyAuth();
+  }, [active]);
+
+  function kaStatus(msg: string, isErr?: boolean) {
+    const el = document.getElementById('ka-status') as HTMLElement;
+    el.textContent = msg;
+    el.className = 'status ' + (isErr ? 'err' : 'ok');
+  }
+
+  async function loadKeyAuth() {
+    if (!db.connected) { setTimeout(loadKeyAuth, 300); return; }
+    try {
+      const [server, fingerprints] = await Promise.all([
+        db.get('_auth/server'),
+        db._send('auth-list-account-fingerprints'),
+      ]);
+
+      const sEl = document.getElementById('ka-server') as HTMLElement;
+      if (server) {
+        const s = server as { fingerprint?: string; publicKey?: string };
+        sEl.textContent = 'fp: ' + (s.fingerprint || '—') + '\nkey: ' + (s.publicKey || '—').slice(0, 40) + '…';
+      } else {
+        sEl.textContent = 'KeyAuth not enabled.\nAdd keyAuth: {} to config.ts';
+      }
+
+      let accounts: AccountInfo[] | null = null, roles: unknown = null;
+      try {
+        [accounts, roles] = await Promise.all([
+          db._send('auth-list-accounts') as Promise<AccountInfo[]>,
+          db._send('auth-list-roles'),
+        ]);
+      } catch {}
+
+      const authenticated = !!accounts;
+      kaAccountsRef.current = accounts || ((fingerprints as AccountInfo[]) || []).map((f: AccountInfo) => ({ ...f, roles: [] }));
+
+      const aEl = document.getElementById('ka-accounts') as HTMLElement;
+      if (kaAccountsRef.current.length) {
+        aEl.innerHTML = kaAccountsRef.current.map(a => {
+          const fp = a.fingerprint;
+          const name = a.displayName || '—';
+          const rls = authenticated ? ((a.roles || []).join(', ') || 'none') : '';
+          const isDevice = authenticated && !a.encryptedPrivateKey;
+          const expanded = kaExpandedFpRef.current === fp;
+          return `<div style="border:1px solid #333;border-radius:4px;padding:6px;margin-bottom:4px;cursor:pointer" data-fp="${fp}">
+            <span style="font-weight:bold">${name}</span>${rls ? ' [' + rls + ']' : ''} ${isDevice ? '<span style="color:#888">(device)</span>' : ''}
+            <span style="color:#666;font-size:11px;float:right">${fp.slice(0,12)}… ${expanded?'▼':'▶'}</span>
+            <div id="ka-detail-${fp}" style="display:${expanded?'block':'none'};margin-top:6px;padding-top:6px;border-top:1px solid #333"></div>
+          </div>`;
+        }).join('');
+        if (!authenticated) aEl.innerHTML += '<div style="color:#888;font-size:12px;margin-top:4px">Authenticate to see roles &amp; details</div>';
+        aEl.querySelectorAll('[data-fp]').forEach(el => {
+          el.addEventListener('click', () => kaExpandAccount((el as HTMLElement).dataset.fp!));
+        });
+        if (kaExpandedFpRef.current && authenticated) kaLoadDetail(kaExpandedFpRef.current);
+      } else {
+        aEl.innerHTML = '<div class="result">No accounts yet.</div>';
+      }
+
+      const rEl = document.getElementById('ka-roles') as HTMLElement;
+      if (roles && (roles as unknown[]).length) {
+        rEl.innerHTML = (roles as Array<{ id: string; name?: string; permissions?: Array<{ path?: string; read?: boolean; write?: boolean }> }>).map(r => {
+          const perms = (r.permissions || []).map(p => `${p.path||'/'} R:${!!p.read} W:${!!p.write}`).join(', ');
+          return `<div style="margin-bottom:2px">${r.id}: ${r.name||r.id} → ${perms||'none'} <button class="sm" data-role="${r.id}" style="float:right">×</button></div>`;
+        }).join('');
+        rEl.querySelectorAll('[data-role]').forEach(btn => {
+          btn.addEventListener('click', () => kaDeleteRole((btn as HTMLElement).dataset.role!));
+        });
+      } else {
+        rEl.textContent = authenticated ? 'No roles.' : 'Authenticate to view roles';
+      }
+
+      const sel = document.getElementById('ka-assign-account') as HTMLSelectElement;
+      sel.innerHTML = kaAccountsRef.current.map(a => `<option value="${a.fingerprint}">${a.displayName||a.fingerprint.slice(0,12)}</option>`).join('');
+      const authSel = document.getElementById('ka-auth-fp') as HTMLSelectElement;
+      const prevFp = authSel.value;
+      const pwAccounts = authenticated ? kaAccountsRef.current.filter(a => !!a.encryptedPrivateKey) : kaAccountsRef.current;
+      authSel.innerHTML = '<option value="">— select account —</option>' + pwAccounts.map(a =>
+        `<option value="${a.fingerprint}"${a.fingerprint===prevFp?' selected':''}>${a.displayName||a.fingerprint.slice(0,12)}${authenticated ? ' [' + ((a.roles||[]).join(',')||'none') + ']' : ''}</option>`
+      ).join('');
+    } catch (e: unknown) {
+      (document.getElementById('ka-server') as HTMLElement).textContent = 'Error: ' + (e as Error).message;
+    }
+  }
+
+  async function kaExpandAccount(fp: string) {
+    kaExpandedFpRef.current = kaExpandedFpRef.current === fp ? null : fp;
+    (document.getElementById('ka-auth-fp') as HTMLSelectElement).value = fp;
+    loadKeyAuth();
+  }
+
+  async function kaLoadDetail(fp: string) {
+    const el = document.getElementById('ka-detail-' + fp) as HTMLElement;
+    if (!el) return;
+    try {
+      const [devices, sessions] = await Promise.all([
+        db._send('auth-list-devices', { accountFingerprint: fp }) as Promise<Array<{ name?: string; fingerprint: string }>>,
+        db._send('auth-list-sessions', { accountFingerprint: fp }) as Promise<Array<{ sid: string; expiresAt: number }>>,
+      ]);
+      const acct = kaAccountsRef.current.find(a => a.fingerprint === fp);
+      const isDevice = acct && !acct.encryptedPrivateKey;
+      let html = '<div style="font-size:12px">';
+      html += '<b>Devices:</b> ';
+      if (devices?.length) {
+        html += devices.map(d => `${d.name||d.fingerprint.slice(0,8)} <button class="sm" data-dfp="${d.fingerprint}">×</button>`).join(' | ');
+      } else { html += '<span style="color:#666">none</span>'; }
+      html += '<br><b>Sessions:</b> ';
+      if (sessions?.length) {
+        html += sessions.map(s => `${s.sid.slice(0,8)}… exp:${new Date(s.expiresAt).toLocaleTimeString()} <button class="sm" data-sid="${s.sid}">×</button>`).join(' | ');
+      } else { html += '<span style="color:#666">none</span>'; }
+      html += '<br>';
+      if (!isDevice) {
+        html += `<button class="sm" data-action="link-device" data-fp="${fp}">Link Device</button> `;
+        html += `<button class="sm" data-action="change-pw" data-fp="${fp}">Change Pw</button>`;
+      }
+      html += '</div>';
+      el.innerHTML = html;
+      el.querySelectorAll('[data-dfp]').forEach(btn => {
+        btn.addEventListener('click', (e) => { e.stopPropagation(); kaRevokeDevice(fp, (btn as HTMLElement).dataset.dfp!); });
+      });
+      el.querySelectorAll('[data-sid]').forEach(btn => {
+        btn.addEventListener('click', (e) => { e.stopPropagation(); kaRevokeSession((btn as HTMLElement).dataset.sid!); });
+      });
+      el.querySelectorAll('[data-action="link-device"]').forEach(btn => {
+        btn.addEventListener('click', (e) => { e.stopPropagation(); kaLinkDevice((btn as HTMLElement).dataset.fp!); });
+      });
+      el.querySelectorAll('[data-action="change-pw"]').forEach(btn => {
+        btn.addEventListener('click', (e) => { e.stopPropagation(); kaChangePassword((btn as HTMLElement).dataset.fp!); });
+      });
+    } catch (e: unknown) { el.textContent = 'Error: ' + (e as Error).message; }
+  }
+
+  async function kaRevokeDevice(accountFp: string, deviceFp: string) {
+    try { await db._send('auth-revoke-device', { accountFingerprint: accountFp, deviceFingerprint: deviceFp }); kaStatus('Device revoked'); loadKeyAuth(); }
+    catch (e: unknown) { kaStatus('Revoke failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaRevokeSession(sid: string) {
+    try { await db._send('auth-revoke-session', { sid }); kaStatus('Session revoked'); loadKeyAuth(); }
+    catch (e: unknown) { kaStatus('Revoke failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaChangePassword(fp: string) {
+    const oldPw = prompt('Current password:'); if (!oldPw) return;
+    const newPw = prompt('New password:'); if (!newPw) return;
+    try { await db._send('auth-change-password', { fingerprint: fp, oldPassword: oldPw, newPassword: newPw }); kaStatus('Password changed'); }
+    catch (e: unknown) { kaStatus('Change failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaLinkDevice(accountFp: string) {
+    const pw = prompt('Account password (to authorize linking):'); if (!pw) return;
+    const name = prompt('Device name:', 'New Device');
+    try {
+      const kp = await crypto.subtle.generateKey({ name: 'Ed25519' }, true, ['sign', 'verify']);
+      const spki = await crypto.subtle.exportKey('spki', kp.publicKey);
+      const pubB64 = btoa(String.fromCharCode(...new Uint8Array(spki)));
+      const result = await db._send('auth-link-device', { accountFingerprint: accountFp, password: pw, devicePublicKey: pubB64, deviceName: name }) as { fingerprint: string };
+      kaStatus('Device linked: ' + result.fingerprint.slice(0, 12));
+      loadKeyAuth();
+    } catch (e: unknown) { kaStatus('Link failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaDeleteRole(roleId: string) {
+    try { await db._send('auth-delete-role', { roleId }); kaStatus('Role deleted'); loadKeyAuth(); }
+    catch (e: unknown) { kaStatus('Delete failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaUpdateRoles() {
+    const fp = (document.getElementById('ka-assign-account') as HTMLSelectElement).value;
+    const rolesStr = (document.getElementById('ka-assign-roles') as HTMLInputElement).value.trim();
+    if (!fp || !rolesStr) { kaStatus('Select account and enter roles', true); return; }
+    const roles = rolesStr.split(',').map(r => r.trim()).filter(Boolean);
+    try { await db._send('auth-update-roles', { accountFingerprint: fp, roles }); kaStatus('Roles updated'); loadKeyAuth(); }
+    catch (e: unknown) { kaStatus('Update failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaCreateAccount() {
+    const pw = (document.getElementById('ka-new-pw') as HTMLInputElement).value.trim();
+    if (!pw) { kaStatus('Password required', true); return; }
+    const displayName = (document.getElementById('ka-new-name') as HTMLInputElement).value.trim() || undefined;
+    const rolesStr = (document.getElementById('ka-new-roles') as HTMLInputElement).value.trim();
+    const roles = rolesStr ? rolesStr.split(',').map(r => r.trim()) : [];
+    try {
+      const result = await db._send('auth-create-account', { password: pw, roles, displayName }) as { fingerprint: string };
+      (document.getElementById('ka-auth-fp') as HTMLSelectElement).value = result.fingerprint;
+      kaStatus('Account created: ' + result.fingerprint.slice(0, 12));
+      loadKeyAuth();
+    } catch (e: unknown) { kaStatus('Create failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaRegisterDevice() {
+    const el = document.getElementById('ka-auth-result') as HTMLElement;
+    try {
+      const kp = await crypto.subtle.generateKey({ name: 'Ed25519' }, true, ['sign', 'verify']);
+      const spki = await crypto.subtle.exportKey('spki', kp.publicKey);
+      const pkcs8 = await crypto.subtle.exportKey('pkcs8', kp.privateKey);
+      const pubB64 = btoa(String.fromCharCode(...new Uint8Array(spki)));
+      kaDeviceKeysRef.current = { publicKey: pubB64, privateKeyDer: new Uint8Array(pkcs8) };
+      sessionStorage.setItem('ka-device-pub', pubB64);
+      sessionStorage.setItem('ka-device-priv', btoa(String.fromCharCode(...new Uint8Array(pkcs8))));
+      const result = await db._send('auth-register-device', { publicKey: pubB64, displayName: 'Browser Device' }) as { fingerprint: string };
+      kaStatus('Device registered: ' + result.fingerprint.slice(0, 12));
+      el.textContent = 'Device registered! fp: ' + result.fingerprint + '\nUse "Device Auth" to authenticate.';
+      loadKeyAuth();
+    } catch (e: unknown) { kaStatus('Register failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaDeviceAuth() {
+    const el = document.getElementById('ka-auth-result') as HTMLElement;
+    if (!kaDeviceKeysRef.current) {
+      const pub = sessionStorage.getItem('ka-device-pub');
+      const priv = sessionStorage.getItem('ka-device-priv');
+      if (pub && priv) kaDeviceKeysRef.current = { publicKey: pub, privateKeyDer: Uint8Array.from(atob(priv), c => c.charCodeAt(0)) };
+    }
+    if (!kaDeviceKeysRef.current) { el.textContent = 'No device keys. Click "Register Device" first.'; kaStatus('No device keys', true); return; }
+    try {
+      el.textContent = 'Requesting challenge…';
+      const challenge = await db._send('auth-challenge') as { nonce: string };
+      el.textContent = 'Signing with device key…';
+      const sigKey = await crypto.subtle.importKey('pkcs8', kaDeviceKeysRef.current.privateKeyDer.buffer as ArrayBuffer, { name: 'Ed25519' }, false, ['sign']);
+      const sigBuf = await crypto.subtle.sign('Ed25519', sigKey, new TextEncoder().encode(challenge.nonce));
+      const sigB64 = btoa(String.fromCharCode(...new Uint8Array(sigBuf)));
+      const result = await db._send('auth-verify', { publicKey: kaDeviceKeysRef.current.publicKey, signature: sigB64, nonce: challenge.nonce }) as { token: string; expiresAt: number };
+      el.textContent = 'Device authenticated!\nToken: ' + result.token.slice(0, 60) + '…\nExpires: ' + new Date(result.expiresAt).toLocaleString();
+      kaStatus('Device auth succeeded');
+      loadKeyAuth();
+    } catch (e: unknown) { el.textContent = 'Error: ' + (e as Error).message; kaStatus('Device auth failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaShowQR() {
+    const el = document.getElementById('ka-auth-result') as HTMLElement;
+    const qrEl = document.getElementById('ka-qr-display') as HTMLElement;
+    try {
+      const kp = await crypto.subtle.generateKey({ name: 'Ed25519' }, true, ['sign', 'verify']);
+      const spki = await crypto.subtle.exportKey('spki', kp.publicKey);
+      const pkcs8 = await crypto.subtle.exportKey('pkcs8', kp.privateKey);
+      const pubB64 = btoa(String.fromCharCode(...new Uint8Array(spki)));
+      kaDeviceKeysRef.current = { publicKey: pubB64, privateKeyDer: new Uint8Array(pkcs8) };
+      const result = await db._send('auth-request-approval', { publicKey: pubB64 }) as { requestId: string };
+      const requestId = result.requestId;
+      const approveUrl = `${location.origin}${location.pathname}#approve=${requestId}`;
+      qrEl.style.display = 'block';
+      const qrImg = await generateQRSvg(approveUrl, 150);
+      qrEl.innerHTML = `<div style="display:flex;gap:12px;align-items:flex-start">` +
+        `<div style="background:#fff;padding:4px;border-radius:4px;line-height:0">${qrImg}</div>` +
+        `<div style="flex:1">` +
+        `<div style="margin-bottom:6px"><b>Scan QR</b> or copy Request ID:</div>` +
+        `<input type="text" value="${requestId}" readonly onclick="this.select();navigator.clipboard?.writeText(this.value)" style="width:100%;font-size:13px;padding:6px;background:#0d1117;color:#58a6ff;border:1px solid #58a6ff;border-radius:3px;cursor:pointer" title="Click to copy">` +
+        `<div style="margin-top:8px;color:#0f0">⏳ Waiting for approval…</div>` +
+        `</div></div>`;
+      (document.getElementById('ka-qr-request-id') as HTMLInputElement).value = requestId;
+      el.textContent = 'Waiting for a signed-in device to approve…';
+      if (kaQrPollTimerRef.current) clearInterval(kaQrPollTimerRef.current);
+      kaQrPollTimerRef.current = setInterval(async () => {
+        try {
+          const poll = await db._send('auth-poll-approval', { requestId }) as { status: string; token?: string; expiresAt?: number };
+          if (poll.status === 'approved') {
+            clearInterval(kaQrPollTimerRef.current!); kaQrPollTimerRef.current = null;
+            qrEl.innerHTML += '<br><b style="color:#0f0">✓ APPROVED!</b>';
+            el.textContent = 'Cross-device auth complete!\nToken: ' + poll.token!.slice(0, 60) + '…\nExpires: ' + new Date(poll.expiresAt!).toLocaleString();
+            kaStatus('QR approval succeeded'); loadKeyAuth();
+          } else if (poll.status === 'expired') {
+            clearInterval(kaQrPollTimerRef.current!); kaQrPollTimerRef.current = null;
+            qrEl.innerHTML += '<br><b style="color:#f44">✗ Expired</b>'; kaStatus('QR request expired', true);
+          }
+        } catch {}
+      }, 2000);
+    } catch (e: unknown) { el.textContent = 'Error: ' + (e as Error).message; kaStatus('QR failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaApproveQR() {
+    const requestId = (document.getElementById('ka-qr-request-id') as HTMLInputElement).value.trim();
+    if (!requestId) { kaStatus('Enter a Request ID', true); return; }
+    try {
+      const result = await db._send('auth-approve-device', { requestId }) as { fingerprint: string };
+      kaStatus('Approved! Device fp: ' + result.fingerprint.slice(0, 12));
+      loadKeyAuth();
+    } catch (e: unknown) { kaStatus('Approve failed: ' + (e as Error).message, true); }
+  }
+
+  async function kaCreateRole() {
+    const id = (document.getElementById('ka-role-id') as HTMLInputElement).value.trim();
+    const name = (document.getElementById('ka-role-name') as HTMLInputElement).value.trim();
+    if (!id) { kaStatus('Role ID required', true); return; }
+    const role = { id, name: name || id, permissions: [...kaPermsRef.current] };
+    try { await db._send('auth-create-role', { role }); kaPermsRef.current = []; kaStatus('Role created: ' + id); loadKeyAuth(); }
+    catch (e: unknown) { kaStatus('Create role failed: ' + (e as Error).message, true); }
+  }
+
+  function kaAddPermission() {
+    const path = (document.getElementById('ka-perm-path') as HTMLInputElement).value.trim();
+    const read = (document.getElementById('ka-perm-read') as HTMLInputElement).checked;
+    const write = (document.getElementById('ka-perm-write') as HTMLInputElement).checked;
+    if (!path) { kaStatus('Path required', true); return; }
+    kaPermsRef.current.push({ path, read, write });
+    kaStatus(`Permission queued: ${path} (R:${read} W:${write}). ${kaPermsRef.current.length} pending.`);
+  }
+
+  async function kaChallengeResponse() {
+    const fp = (document.getElementById('ka-auth-fp') as HTMLSelectElement).value.trim();
+    const pw = (document.getElementById('ka-auth-pw') as HTMLInputElement).value.trim();
+    if (!fp) { kaStatus('Enter account fingerprint', true); return; }
+    const el = document.getElementById('ka-auth-result') as HTMLElement;
+    try {
+      el.textContent = 'Step 1: Fetching account + decrypting key…';
+      const account = await db.get('_auth/accounts/' + fp) as AccountInfo | null;
+      if (!account) { el.textContent = 'Account not found: ' + fp; return; }
+      const salt = Uint8Array.from(atob(account.salt!), c => c.charCodeAt(0));
+      const iv = Uint8Array.from(atob(account.iv!), c => c.charCodeAt(0));
+      const authTag = Uint8Array.from(atob(account.authTag!), c => c.charCodeAt(0));
+      const encrypted = Uint8Array.from(atob(account.encryptedPrivateKey!), c => c.charCodeAt(0));
+      const keyMaterial = await crypto.subtle.importKey('raw', new TextEncoder().encode(pw), 'PBKDF2', false, ['deriveKey']);
+      const aesKey = await crypto.subtle.deriveKey(
+        { name: 'PBKDF2', salt, iterations: 100000, hash: 'SHA-256' },
+        keyMaterial, { name: 'AES-GCM', length: 256 }, false, ['decrypt']
+      );
+      const ciphertext = new Uint8Array(encrypted.length + authTag.length);
+      ciphertext.set(encrypted); ciphertext.set(authTag, encrypted.length);
+      let privateKeyDer: Uint8Array;
+      try {
+        const decrypted = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, aesKey, ciphertext);
+        privateKeyDer = new Uint8Array(decrypted);
+      } catch { el.textContent = 'Wrong password — decryption failed'; kaStatus('Wrong password', true); return; }
+      el.textContent = 'Step 2: Requesting challenge nonce…';
+      const challenge = await db._send('auth-challenge') as { nonce: string };
+      el.textContent = 'Step 3: Signing nonce with Ed25519…';
+      const sigKey = await crypto.subtle.importKey('pkcs8', privateKeyDer.buffer as ArrayBuffer, { name: 'Ed25519' }, false, ['sign']);
+      const sigBuf = await crypto.subtle.sign('Ed25519', sigKey, new TextEncoder().encode(challenge.nonce));
+      const sigB64 = btoa(String.fromCharCode(...new Uint8Array(sigBuf)));
+      el.textContent = 'Step 4: Verifying signature…';
+      const result = await db._send('auth-verify', { publicKey: account.publicKey, signature: sigB64, nonce: challenge.nonce }) as { token: string; expiresAt: number };
+      el.textContent = 'Authenticated!\n\nToken: ' + result.token.slice(0, 60) + '…\nExpires: ' + new Date(result.expiresAt).toLocaleString();
+      kaStatus('Challenge-response succeeded');
+      loadKeyAuth();
+    } catch (e: unknown) { el.textContent = 'Error: ' + (e as Error).message; kaStatus('Auth failed: ' + (e as Error).message, true); }
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <div style={{ flex: 2, minWidth: 400 }}>
+        <label>Accounts</label>
+        <div id="ka-accounts" style={{ marginBottom: 8 }}>Loading...</div>
+        <div className="row" style={{ marginBottom: 6 }}>
+          <input type="text" id="ka-new-pw" placeholder="Password" defaultValue="demo123" />
+          <input type="text" id="ka-new-name" placeholder="Display name" />
+          <input type="text" id="ka-new-roles" placeholder="Roles (comma-sep)" />
+          <button onClick={kaCreateAccount}>+ Account</button>
+          <button onClick={kaRegisterDevice}>+ Device</button>
+        </div>
+        <div style={{ marginTop: 10, border: '1px solid #444', borderRadius: 6, padding: 10 }}>
+          <label>Auth Flows</label>
+          <div style={{ marginBottom: 8 }}>
+            <b>1. Challenge-Response (password)</b>
+            <div className="row" style={{ marginTop: 4 }}>
+              <select id="ka-auth-fp" style={{ flex: 1 }}><option value="">— select account —</option></select>
+              <input type="text" id="ka-auth-pw" placeholder="Password" defaultValue="demo123" />
+              <button className="success" onClick={kaChallengeResponse}>Authenticate</button>
+            </div>
+          </div>
+          <div style={{ marginBottom: 8 }}>
+            <b>2. Device Auth (keypair)</b>
+            <div className="row" style={{ marginTop: 4 }}>
+              <button onClick={kaDeviceAuth}>Authenticate with Stored Keypair</button>
+            </div>
+          </div>
+          <div>
+            <b>3. QR Cross-Device Auth</b>
+            <div className="row" style={{ marginTop: 4 }}>
+              <button onClick={kaShowQR}>Show QR (new device)</button>
+              <input type="text" id="ka-qr-request-id" placeholder="Request ID to approve" />
+              <button className="success" onClick={kaApproveQR}>Approve (signed-in device)</button>
+            </div>
+            <div id="ka-qr-display" style={{ display: 'none', marginTop: 6, padding: 8, background: '#1a1a2e', borderRadius: 4, fontFamily: 'monospace', fontSize: 12 }}></div>
+          </div>
+          <div id="ka-auth-result" className="result" style={{ minHeight: 40, marginTop: 6 }}>Select an auth flow above</div>
+        </div>
+      </div>
+      <div style={{ flex: 1, minWidth: 280 }}>
+        <label>Roles & IAM</label>
+        <div id="ka-roles" className="result" style={{ minHeight: 80, marginBottom: 8 }}>Loading...</div>
+        <div className="row" style={{ marginBottom: 6 }}>
+          <input type="text" id="ka-role-id" placeholder="Role ID" defaultValue="editor" />
+          <input type="text" id="ka-role-name" placeholder="Name" defaultValue="Editor" />
+          <button onClick={kaCreateRole}>+ Role</button>
+        </div>
+        <div className="row" style={{ marginBottom: 8 }}>
+          <input type="text" id="ka-perm-path" placeholder="Path pattern" defaultValue="posts/$postId" />
+          <label style={{ display: 'inline', margin: 0 }}><input type="checkbox" id="ka-perm-read" defaultChecked /> R</label>
+          <label style={{ display: 'inline', margin: 0 }}><input type="checkbox" id="ka-perm-write" defaultChecked /> W</label>
+          <button className="sm" onClick={kaAddPermission}>+ Perm</button>
+        </div>
+        <div style={{ border: '1px solid #444', borderRadius: 6, padding: 8, marginBottom: 8 }}>
+          <label>Assign Roles</label>
+          <div className="row" style={{ marginTop: 4 }}>
+            <select id="ka-assign-account" style={{ flex: 1 }}></select>
+            <input type="text" id="ka-assign-roles" placeholder="Roles (comma-sep)" />
+            <button onClick={kaUpdateRoles}>Update</button>
+          </div>
+        </div>
+        <label>Server Info</label>
+        <div id="ka-server" className="result" style={{ minHeight: 60 }}>Loading...</div>
+      </div>
+      <div id="ka-status" className="status" style={{ marginTop: 6, width: '100%' }}></div>
+    </div>
+  );
+}