skopix 2.0.94 → 2.0.95

package/cli/commands/agent.js

@@ -93,6 +93,7 @@ async function promptAndAuth(serverUrl, secretKey) {
 export async function agentCommand(options) {
   const serverUrl = (options.server || process.env.SKOPIX_SERVER_URL || '').replace(/\/$/, '');
   const secretKey = options.key || process.env.SKOPIX_SECRET_KEY;
+  const apiKey = options.apiKey || process.env.SKOPIX_AGENT_API_KEY;
   const agentName = options.name || os.hostname();
   const machine = os.hostname() + ' (' + os.platform() + ')';
   const agentId = crypto.randomUUID();
@@ -120,13 +121,30 @@ export async function agentCommand(options) {
   let userName = agentName;
 
   try {
-    const authData = await promptAndAuth(serverUrl, secretKey);
-    userId = authData.userId;
-    userName = authData.name || agentName;
-    if (userId) {
-      console.log(chalk.green('  ✔ Authenticated as ') + chalk.white(userName));
+    // API key takes priority — no interactive prompt needed
+    if (apiKey) {
+      const res = await fetch(serverUrl + '/api/agent/auth-apikey', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'x-skopix-key': secretKey, 'Authorization': 'Bearer ' + apiKey },
+        body: JSON.stringify({}),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        userId = data.userId;
+        userName = data.name || agentName;
+        console.log(chalk.green('  ✔ Authenticated via API key as ') + chalk.white(userName));
+      } else {
+        throw new Error('API key authentication failed');
+      }
     } else {
-      console.log(chalk.cyan('  ◆ Solo mode — no user auth needed'));
+      const authData = await promptAndAuth(serverUrl, secretKey);
+      userId = authData.userId;
+      userName = authData.name || agentName;
+      if (userId) {
+        console.log(chalk.green('  ✔ Authenticated as ') + chalk.white(userName));
+      } else {
+        console.log(chalk.cyan('  ◆ Solo mode — no user auth needed'));
+      }
     }
   } catch (err) {
     console.log(chalk.yellow('  ⚠ Could not authenticate: ' + err.message));

package/cli/commands/dashboard.js

@@ -160,7 +160,6 @@ export async function dashboardCommand(options) {
               return;
             }
             const user = teamMode.db.getUserByEmail(email.trim().toLowerCase());
-            // Use generic error to avoid leaking which emails are registered
             const fail = () => sendJSON(res, 401, { error: 'Invalid email or password' });
             if (!user) { fail(); return; }
             if (user.status !== 'active') {
@@ -170,47 +169,145 @@ export async function dashboardCommand(options) {
             const ok = await teamMode.auth.verifyPassword(password, user.password_hash);
             if (!ok) { fail(); return; }
 
-            // Create session
+            // If MFA is enabled, create a pending session and require TOTP
+            if (user.mfa_enabled && user.mfa_secret) {
+              const pendingToken = teamMode.auth.generateSessionToken();
+              teamMode.db.createMfaPending({
+                token: pendingToken,
+                userId: user.id,
+                ipAddress: req.socket.remoteAddress,
+                userAgent: req.headers['user-agent'] || null,
+              });
+              sendJSON(res, 200, { mfaRequired: true, pendingToken });
+              return;
+            }
+
+            // If MFA not enrolled yet — force enrollment
+            if (!user.mfa_enabled) {
+              const pendingToken = teamMode.auth.generateSessionToken();
+              teamMode.db.createMfaPending({
+                token: pendingToken,
+                userId: user.id,
+                ipAddress: req.socket.remoteAddress,
+                userAgent: req.headers['user-agent'] || null,
+              });
+              sendJSON(res, 200, { mfaEnrollRequired: true, pendingToken });
+              return;
+            }
+
+            // Create session (should not reach here normally)
             const token = teamMode.auth.generateSessionToken();
-            const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(); // 30 days
-            teamMode.db.createWebSession({
-              token,
-              userId: user.id,
-              expiresAt,
-              ipAddress: req.socket.remoteAddress,
-              userAgent: req.headers['user-agent'] || null,
-            });
+            const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
+            teamMode.db.createWebSession({ token, userId: user.id, expiresAt, ipAddress: req.socket.remoteAddress, userAgent: req.headers['user-agent'] || null });
             teamMode.db.updateUserLastLogin(user.id);
-            teamMode.db.logAudit({
-              userId: user.id,
-              action: 'user.login',
-              targetType: 'user',
-              targetId: user.id,
-            });
-
-            // Set HTTP-only cookie
-            // Note: SameSite=Lax allows the cookie to flow on same-site navigations.
-            // We don't set Secure unless the request was HTTPS (so localhost still works).
+            teamMode.db.logAudit({ userId: user.id, action: 'user.login', targetType: 'user', targetId: user.id });
             const isHttps = req.headers['x-forwarded-proto'] === 'https' || req.connection.encrypted === true;
-            const cookieAttrs = [
-              `skopix_session=${token}`,
-              'Path=/',
-              'HttpOnly',
-              'SameSite=Lax',
-              `Max-Age=${30 * 24 * 60 * 60}`,
-              ...(isHttps ? ['Secure'] : []),
-            ];
-            res.setHeader('Set-Cookie', cookieAttrs.join('; '));
-            sendJSON(res, 200, {
-              ok: true,
-              user: { id: user.id, email: user.email, name: user.name, role: user.role },
-            });
+            res.setHeader('Set-Cookie', [`skopix_session=${token}`, 'Path=/', 'HttpOnly', 'SameSite=Lax', `Max-Age=${30 * 24 * 60 * 60}`, ...(isHttps ? ['Secure'] : [])].join('; '));
+            sendJSON(res, 200, { ok: true, user: { id: user.id, email: user.email, name: user.name, role: user.role } });
           } catch (err) {
             sendJSON(res, 500, { error: err.message });
           }
           return;
         }
 
+        // ─── MFA: VERIFY TOTP (after password OK) ────────────────────────────
+        if (pathname === '/api/auth/mfa-verify' && method === 'POST') {
+          try {
+            const { pendingToken, totpCode } = JSON.parse(await readBody(req));
+            if (!pendingToken || !totpCode) { sendJSON(res, 400, { error: 'Missing fields' }); return; }
+            const pending = teamMode.db.getMfaPending(pendingToken);
+            if (!pending) { sendJSON(res, 401, { error: 'Session expired. Please sign in again.' }); return; }
+            const user = teamMode.db.getUserById(pending.user_id);
+            if (!user || user.status !== 'active') { sendJSON(res, 401, { error: 'Account not found or disabled.' }); return; }
+            if (!teamMode.auth.verifyTotp(user.mfa_secret, totpCode)) {
+              sendJSON(res, 401, { error: 'Invalid authentication code. Please try again.' }); return;
+            }
+            // TOTP OK — create real session
+            teamMode.db.deleteMfaPending(pendingToken);
+            const token = teamMode.auth.generateSessionToken();
+            const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
+            teamMode.db.createWebSession({ token, userId: user.id, expiresAt, ipAddress: req.socket.remoteAddress, userAgent: req.headers['user-agent'] || null });
+            teamMode.db.updateUserLastLogin(user.id);
+            teamMode.db.logAudit({ userId: user.id, action: 'user.login', targetType: 'user', targetId: user.id, metadata: { mfa: true } });
+            const isHttps = req.headers['x-forwarded-proto'] === 'https' || req.connection.encrypted === true;
+            res.setHeader('Set-Cookie', [`skopix_session=${token}`, 'Path=/', 'HttpOnly', 'SameSite=Lax', `Max-Age=${30 * 24 * 60 * 60}`, ...(isHttps ? ['Secure'] : [])].join('; '));
+            sendJSON(res, 200, { ok: true, user: { id: user.id, email: user.email, name: user.name, role: user.role } });
+          } catch (err) { sendJSON(res, 500, { error: err.message }); }
+          return;
+        }
+
+        // ─── MFA: START ENROLLMENT (get QR code) ─────────────────────────────
+        if (pathname === '/api/auth/mfa-enroll' && method === 'POST') {
+          try {
+            const { pendingToken } = JSON.parse(await readBody(req));
+            if (!pendingToken) { sendJSON(res, 400, { error: 'Missing pendingToken' }); return; }
+            const pending = teamMode.db.getMfaPending(pendingToken);
+            if (!pending) { sendJSON(res, 401, { error: 'Session expired. Please sign in again.' }); return; }
+            const user = teamMode.db.getUserById(pending.user_id);
+            if (!user) { sendJSON(res, 401, { error: 'User not found' }); return; }
+            // Generate new TOTP secret
+            const secret = teamMode.auth.generateTotpSecret();
+            teamMode.db.setMfaSecret(user.id, secret);
+            const otpauthUrl = teamMode.auth.getTotpQrUrl(secret, user.email);
+            // QR code as URL using Google Charts API (no server-side dependency)
+            const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(otpauthUrl)}`;
+            sendJSON(res, 200, { secret, otpauthUrl, qrUrl });
+          } catch (err) { sendJSON(res, 500, { error: err.message }); }
+          return;
+        }
+
+        // ─── MFA: CONFIRM ENROLLMENT ──────────────────────────────────────────
+        if (pathname === '/api/auth/mfa-enroll-confirm' && method === 'POST') {
+          try {
+            const { pendingToken, totpCode } = JSON.parse(await readBody(req));
+            if (!pendingToken || !totpCode) { sendJSON(res, 400, { error: 'Missing fields' }); return; }
+            const pending = teamMode.db.getMfaPending(pendingToken);
+            if (!pending) { sendJSON(res, 401, { error: 'Session expired. Please sign in again.' }); return; }
+            const user = teamMode.db.getUserById(pending.user_id);
+            if (!user) { sendJSON(res, 401, { error: 'User not found' }); return; }
+            if (!teamMode.auth.verifyTotp(user.mfa_secret, totpCode)) {
+              sendJSON(res, 401, { error: 'Invalid code. Check your authenticator app and try again.' }); return;
+            }
+            // Enable MFA
+            teamMode.db.enableMfa(user.id);
+            teamMode.db.deleteMfaPending(pendingToken);
+            // Create real session
+            const token = teamMode.auth.generateSessionToken();
+            const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
+            teamMode.db.createWebSession({ token, userId: user.id, expiresAt, ipAddress: req.socket.remoteAddress, userAgent: req.headers['user-agent'] || null });
+            teamMode.db.updateUserLastLogin(user.id);
+            teamMode.db.logAudit({ userId: user.id, action: 'user.mfa_enrolled', targetType: 'user', targetId: user.id });
+            const isHttps = req.headers['x-forwarded-proto'] === 'https' || req.connection.encrypted === true;
+            res.setHeader('Set-Cookie', [`skopix_session=${token}`, 'Path=/', 'HttpOnly', 'SameSite=Lax', `Max-Age=${30 * 24 * 60 * 60}`, ...(isHttps ? ['Secure'] : [])].join('; '));
+            sendJSON(res, 200, { ok: true, user: { id: user.id, email: user.email, name: user.name, role: user.role } });
+          } catch (err) { sendJSON(res, 500, { error: err.message }); }
+          return;
+        }
+
+        // ─── MFA: ADMIN RESET (removes MFA for a user) ───────────────────────
+        if (pathname.match(/^\/api\/users\/[^/]+\/mfa-reset$/) && method === 'POST') {
+          if (!currentUser || currentUser.role !== 'admin') { sendJSON(res, 403, { error: 'Admin only' }); return; }
+          const userId = pathname.split('/')[3];
+          teamMode.db.disableMfa(userId);
+          teamMode.db.logAudit({ userId: currentUser.id, action: 'user.mfa_reset', targetType: 'user', targetId: userId });
+          sendJSON(res, 200, { ok: true });
+          return;
+        }
+
+        // ─── MFA: USER DISABLE (from settings, requires current TOTP) ────────
+        if (pathname === '/api/auth/mfa-disable' && method === 'POST') {
+          if (!currentUser) { sendJSON(res, 401, { error: 'Not authenticated' }); return; }
+          const { totpCode } = JSON.parse(await readBody(req));
+          const user = teamMode.db.getUserById(currentUser.id);
+          if (!teamMode.auth.verifyTotp(user.mfa_secret, totpCode)) {
+            sendJSON(res, 401, { error: 'Invalid authentication code.' }); return;
+          }
+          teamMode.db.disableMfa(currentUser.id);
+          teamMode.db.logAudit({ userId: currentUser.id, action: 'user.mfa_disabled', targetType: 'user', targetId: currentUser.id });
+          sendJSON(res, 200, { ok: true });
+          return;
+        }
+
         // ─── AUTH: LOGOUT ────────────────────────────────────────────────
         if (pathname === '/api/auth/logout' && method === 'POST') {
           const token = parseCookie(req.headers.cookie || '', 'skopix_session');
@@ -503,6 +600,36 @@ export async function dashboardCommand(options) {
           return;
         }
 
+        // ─── API KEYS ─────────────────────────────────────────────────────
+        if (pathname === '/api/api-keys' && method === 'GET') {
+          if (!currentUser) { sendJSON(res, 401, { error: 'Not authenticated' }); return; }
+          sendJSON(res, 200, teamMode.db.listApiKeys(currentUser.id));
+          return;
+        }
+        if (pathname === '/api/api-keys' && method === 'POST') {
+          if (!currentUser) { sendJSON(res, 401, { error: 'Not authenticated' }); return; }
+          const { name } = JSON.parse(await readBody(req));
+          if (!name || typeof name !== 'string') { sendJSON(res, 400, { error: 'Name required' }); return; }
+          const rawKey = teamMode.auth.generateApiKey();
+          const keyHash = crypto.createHash('sha256').update(rawKey).digest('hex');
+          const keyPrefix = rawKey.slice(0, 12) + '...';
+          const id = teamMode.auth.generateApiKeyId();
+          teamMode.db.createApiKey({ id, userId: currentUser.id, name, keyHash, keyPrefix });
+          teamMode.db.logAudit({ userId: currentUser.id, action: 'api_key.created', targetType: 'api_key', targetId: id, metadata: { name } });
+          // Return raw key only once
+          sendJSON(res, 200, { id, name, keyPrefix, key: rawKey, createdAt: new Date().toISOString() });
+          return;
+        }
+        if (pathname.match(/^\/api\/api-keys\/[^/]+$/) && method === 'DELETE') {
+          if (!currentUser) { sendJSON(res, 401, { error: 'Not authenticated' }); return; }
+          const keyId = pathname.split('/')[3];
+          const deleted = teamMode.db.deleteApiKey(keyId, currentUser.id);
+          if (!deleted) { sendJSON(res, 404, { error: 'Not found' }); return; }
+          teamMode.db.logAudit({ userId: currentUser.id, action: 'api_key.deleted', targetType: 'api_key', targetId: keyId });
+          sendJSON(res, 200, { deleted: true });
+          return;
+        }
+
         // ─── ACTIVE SESSIONS (admin only) ────────────────────────────────
         if (pathname === '/api/sessions/active' && method === 'GET') {
           if (!currentUser || !teamMode.auth.canManageUsers(currentUser.role)) {
@@ -880,7 +1007,22 @@ export async function dashboardCommand(options) {
 
       // ─── RUN ───────────────────────────────────────────────────────────
       // ─── RECORDER ENDPOINTS ──────────────────────────────────────────────────
-      // POST /api/agent/auth — agents call this to identify themselves by email/password
+      // POST /api/agent/auth-apikey — agents authenticate via API key
+      if (pathname === '/api/agent/auth-apikey' && method === 'POST') {
+        const authHeader = req.headers['authorization'] || '';
+        if (!authHeader.startsWith('Bearer sk_live_')) {
+          sendJSON(res, 401, { error: 'API key required in Authorization header' }); return;
+        }
+        const apiKey = authHeader.slice(7);
+        const keyHash = crypto.createHash('sha256').update(apiKey).digest('hex');
+        const keyRow = teamMode.db.getApiKeyByHash(keyHash);
+        if (!keyRow) { sendJSON(res, 401, { error: 'Invalid or expired API key' }); return; }
+        const user = teamMode.db.getUserById(keyRow.user_id);
+        if (!user || user.status !== 'active') { sendJSON(res, 401, { error: 'User not found or disabled' }); return; }
+        teamMode.db.touchApiKey(keyRow.id);
+        sendJSON(res, 200, { userId: user.id, name: user.name, email: user.email });
+        return;
+      }
       // Returns { userId, name } so the agent can register with the correct userId
       // Uses same secret key as header auth (already validated above)
       if (pathname === '/api/agent/auth' && method === 'POST') {
@@ -2390,13 +2532,27 @@ function parseCookie(cookieHeader, name) {
 // Pass `tm` (the teamMode object) so this works without globals.
 function resolveCurrentUser(req, tm) {
   if (!tm) return null;
+
+  // Check for API key in Authorization header (for agents)
+  const authHeader = req.headers['authorization'] || '';
+  if (authHeader.startsWith('Bearer sk_live_')) {
+    const apiKey = authHeader.slice(7);
+    const keyHash = crypto.createHash('sha256').update(apiKey).digest('hex');
+    const keyRow = tm.db.getApiKeyByHash(keyHash);
+    if (!keyRow) return null;
+    const user = tm.db.getUserById(keyRow.user_id);
+    if (!user || user.status !== 'active') return null;
+    tm.db.touchApiKey(keyRow.id);
+    return { user, apiKeyId: keyRow.id };
+  }
+
+  // Check session cookie
   const token = parseCookie(req.headers.cookie || '', 'skopix_session');
   if (!token) return null;
   const session = tm.db.getWebSession(token);
   if (!session) return null;
   const user = tm.db.getUserById(session.user_id);
   if (!user || user.status !== 'active') return null;
-  // Touch the session so active users don't expire prematurely
   tm.db.touchWebSession(token);
   return { user, sessionToken: token };
 }
@@ -2411,8 +2567,12 @@ function isPublicPath(pathname) {
     '/api/setup',
     '/api/auth/login',
     '/api/auth/logout',
-    '/api/auth/me', // returns 401 itself, doesn't need to be blocked here
-    '/api/agent/auth', // agents authenticate with secret key, not session cookie
+    '/api/auth/me',
+    '/api/auth/mfa-verify',
+    '/api/auth/mfa-enroll',
+    '/api/auth/mfa-enroll-confirm',
+    '/api/agent/auth',
+    '/api/agent/auth-apikey',
   ]);
   if (publicApis.has(pathname)) return true;
   // Public invite endpoints: GET invite details + accept invite (no auth needed)

package/cli/index.js

@@ -83,6 +83,7 @@ program
   .requiredOption('-s, --server <url>', 'Skopix server URL (e.g. http://192.168.1.45:9000)')
   .requiredOption('-k, --key <key>', 'Secret key (same SKOPIX_SECRET_KEY as the server)')
   .option('-n, --name <name>', 'Agent display name (defaults to hostname)')
+  .option('--api-key <key>', 'API key for agent auth (skips MFA, recommended for automated agents)')
   .action(agentCommand);
 
 // Short alias: "skopix start" — starts dashboard + agent in one command

package/core/auth.js

@@ -96,6 +96,105 @@ export function decryptSecret(stored) {
   return decrypted.toString('utf8');
 }
 
+// ─── TOTP (RFC 6238) — no external dependencies ──────────────────────────────
+// Base32 alphabet used by TOTP secrets
+const BASE32_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+
+export function generateTotpSecret() {
+  // 20 random bytes → base32 encoded = 32-char secret
+  const bytes = crypto.randomBytes(20);
+  let result = '';
+  let buffer = 0, bitsLeft = 0;
+  for (const byte of bytes) {
+    buffer = (buffer << 8) | byte;
+    bitsLeft += 8;
+    while (bitsLeft >= 5) {
+      result += BASE32_CHARS[(buffer >> (bitsLeft - 5)) & 31];
+      bitsLeft -= 5;
+    }
+  }
+  if (bitsLeft > 0) result += BASE32_CHARS[(buffer << (5 - bitsLeft)) & 31];
+  return result;
+}
+
+function _base32Decode(str) {
+  const cleaned = str.toUpperCase().replace(/[^A-Z2-7]/g, '');
+  const bytes = [];
+  let buffer = 0, bitsLeft = 0;
+  for (const char of cleaned) {
+    const val = BASE32_CHARS.indexOf(char);
+    if (val === -1) continue;
+    buffer = (buffer << 5) | val;
+    bitsLeft += 5;
+    if (bitsLeft >= 8) {
+      bytes.push((buffer >> (bitsLeft - 8)) & 255);
+      bitsLeft -= 8;
+    }
+  }
+  return Buffer.from(bytes);
+}
+
+function _hotp(secret, counter) {
+  const key = _base32Decode(secret);
+  // Counter as 8-byte big-endian buffer
+  const counterBuf = Buffer.alloc(8);
+  const hi = Math.floor(counter / 0x100000000);
+  const lo = counter >>> 0;
+  counterBuf.writeUInt32BE(hi, 0);
+  counterBuf.writeUInt32BE(lo, 4);
+  const hmac = crypto.createHmac('sha1', key).update(counterBuf).digest();
+  const offset = hmac[hmac.length - 1] & 0xf;
+  const code = ((hmac[offset] & 0x7f) << 24) |
+               ((hmac[offset + 1] & 0xff) << 16) |
+               ((hmac[offset + 2] & 0xff) << 8) |
+               (hmac[offset + 3] & 0xff);
+  return String(code % 1000000).padStart(6, '0');
+}
+
+export function getTotpToken(secret, time) {
+  const t = Math.floor((time || Date.now()) / 1000 / 30);
+  return _hotp(secret, t);
+}
+
+export function verifyTotp(secret, token) {
+  if (!secret || !token || typeof token !== 'string') return false;
+  const cleaned = token.replace(/\s/g, '');
+  if (!/^\d{6}$/.test(cleaned)) return false;
+  const t = Math.floor(Date.now() / 1000 / 30);
+  // Check current window ±1 to allow for clock drift
+  for (const offset of [-1, 0, 1]) {
+    if (_hotp(secret, t + offset) === cleaned) return true;
+  }
+  return false;
+}
+
+export function getTotpQrUrl(secret, email, issuer = 'Skopix') {
+  const label = encodeURIComponent(`${issuer}:${email}`);
+  const params = new URLSearchParams({
+    secret,
+    issuer,
+    algorithm: 'SHA1',
+    digits: '6',
+    period: '30',
+  });
+  return `otpauth://totp/${label}?${params.toString()}`;
+}
+
+// ─── API KEY GENERATION ───────────────────────────────────────────────────────
+export function generateApiKey() {
+  // Format: sk_live_<32 random hex chars>
+  const raw = 'sk_live_' + crypto.randomBytes(24).toString('hex');
+  return raw;
+}
+
+export function hashApiKey(key) {
+  return crypto.createHash('sha256').update(key).digest('hex');
+}
+
+export function generateApiKeyId() {
+  return 'ak_' + crypto.randomBytes(8).toString('hex');
+}
+
 // ─── EMAIL VALIDATION ────────────────────────────────────────────────────────
 export function isValidEmail(email) {
   if (typeof email !== 'string') return false;

package/core/db.js

@@ -57,6 +57,56 @@ export function getDbPath() {
 // Versioned schema migrations. To add a new one, append to the array.
 // Existing migrations are immutable once shipped.
 const MIGRATIONS = [
+  {
+    version: 3,
+    name: 'mfa totp',
+    up: (db) => {
+      db.exec(`
+        ALTER TABLE users ADD COLUMN mfa_secret TEXT;
+        ALTER TABLE users ADD COLUMN mfa_enabled INTEGER NOT NULL DEFAULT 0;
+        ALTER TABLE users ADD COLUMN mfa_enrolled_at TEXT;
+      `);
+    },
+  },
+  {
+    version: 4,
+    name: 'api keys',
+    up: (db) => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS api_keys (
+          id TEXT PRIMARY KEY,
+          user_id TEXT NOT NULL,
+          name TEXT NOT NULL,
+          key_hash TEXT NOT NULL UNIQUE,
+          key_prefix TEXT NOT NULL,
+          created_at TEXT NOT NULL,
+          last_used_at TEXT,
+          expires_at TEXT,
+          FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
+        );
+        CREATE INDEX IF NOT EXISTS idx_api_keys_user ON api_keys(user_id);
+        CREATE INDEX IF NOT EXISTS idx_api_keys_hash ON api_keys(key_hash);
+      `);
+    },
+  },
+  {
+    version: 5,
+    name: 'mfa pending sessions',
+    up: (db) => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS mfa_pending (
+          token TEXT PRIMARY KEY,
+          user_id TEXT NOT NULL,
+          created_at TEXT NOT NULL,
+          expires_at TEXT NOT NULL,
+          ip_address TEXT,
+          user_agent TEXT,
+          FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
+        );
+        CREATE INDEX IF NOT EXISTS idx_mfa_pending_user ON mfa_pending(user_id);
+      `);
+    },
+  },
   {
     version: 2,
     name: 'password reset tokens',
@@ -185,7 +235,7 @@ export function getUserByEmail(email) {
 
 export function listUsers() {
   if (!_db) return [];
-  return _db.prepare('SELECT id, email, name, role, status, created_at, last_login_at FROM users ORDER BY created_at ASC').all();
+  return _db.prepare('SELECT id, email, name, role, status, created_at, last_login_at, mfa_enabled FROM users ORDER BY created_at ASC').all();
 }
 
 export function createUser({ id, email, name, passwordHash, role, status }) {
@@ -501,3 +551,89 @@ export function revokeAllUserSessions(userId) {
   const result = _db.prepare('DELETE FROM web_sessions WHERE user_id = ?').run(userId);
   return result.changes;
 }
+
+// ─── MFA (TOTP) ──────────────────────────────────────────────────────────────
+export function setMfaSecret(userId, secret) {
+  if (!_db) throw new Error('DB not ready');
+  const now = new Date().toISOString();
+  _db.prepare('UPDATE users SET mfa_secret = ?, mfa_enabled = 0, updated_at = ? WHERE id = ?').run(secret, now, userId);
+}
+
+export function enableMfa(userId) {
+  if (!_db) throw new Error('DB not ready');
+  const now = new Date().toISOString();
+  _db.prepare('UPDATE users SET mfa_enabled = 1, mfa_enrolled_at = ?, updated_at = ? WHERE id = ?').run(now, now, userId);
+}
+
+export function disableMfa(userId) {
+  if (!_db) throw new Error('DB not ready');
+  const now = new Date().toISOString();
+  _db.prepare('UPDATE users SET mfa_secret = NULL, mfa_enabled = 0, mfa_enrolled_at = NULL, updated_at = ? WHERE id = ?').run(now, userId);
+}
+
+// MFA pending sessions — created after password OK, before TOTP verified
+export function createMfaPending({ token, userId, ipAddress, userAgent }) {
+  if (!_db) throw new Error('DB not ready');
+  const now = new Date().toISOString();
+  const expiresAt = new Date(Date.now() + 10 * 60 * 1000).toISOString(); // 10 mins
+  _db.prepare(`
+    INSERT INTO mfa_pending (token, user_id, created_at, expires_at, ip_address, user_agent)
+    VALUES (?, ?, ?, ?, ?, ?)
+  `).run(token, userId, now, expiresAt, ipAddress || null, userAgent || null);
+}
+
+export function getMfaPending(token) {
+  if (!_db) return null;
+  const row = _db.prepare('SELECT * FROM mfa_pending WHERE token = ?').get(token);
+  if (!row) return null;
+  if (new Date(row.expires_at) < new Date()) {
+    _db.prepare('DELETE FROM mfa_pending WHERE token = ?').run(token);
+    return null;
+  }
+  return row;
+}
+
+export function deleteMfaPending(token) {
+  if (!_db) return;
+  _db.prepare('DELETE FROM mfa_pending WHERE token = ?').run(token);
+}
+
+// ─── API KEYS ─────────────────────────────────────────────────────────────────
+export function createApiKey({ id, userId, name, keyHash, keyPrefix, expiresAt }) {
+  if (!_db) throw new Error('DB not ready');
+  const now = new Date().toISOString();
+  _db.prepare(`
+    INSERT INTO api_keys (id, user_id, name, key_hash, key_prefix, created_at, expires_at)
+    VALUES (?, ?, ?, ?, ?, ?, ?)
+  `).run(id, userId, name, keyHash, keyPrefix, now, expiresAt || null);
+  return getApiKeyById(id);
+}
+
+export function getApiKeyById(id) {
+  if (!_db) return null;
+  return _db.prepare('SELECT * FROM api_keys WHERE id = ?').get(id);
+}
+
+export function getApiKeyByHash(keyHash) {
+  if (!_db) return null;
+  const row = _db.prepare('SELECT * FROM api_keys WHERE key_hash = ?').get(keyHash);
+  if (!row) return null;
+  if (row.expires_at && new Date(row.expires_at) < new Date()) return null;
+  return row;
+}
+
+export function listApiKeys(userId) {
+  if (!_db) return [];
+  return _db.prepare('SELECT id, user_id, name, key_prefix, created_at, last_used_at, expires_at FROM api_keys WHERE user_id = ? ORDER BY created_at DESC').all(userId);
+}
+
+export function deleteApiKey(id, userId) {
+  if (!_db) throw new Error('DB not ready');
+  const result = _db.prepare('DELETE FROM api_keys WHERE id = ? AND user_id = ?').run(id, userId);
+  return result.changes > 0;
+}
+
+export function touchApiKey(id) {
+  if (!_db) return;
+  _db.prepare('UPDATE api_keys SET last_used_at = ? WHERE id = ?').run(new Date().toISOString(), id);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.94",
+  "version": "2.0.95",
   "description": "Browser-based QA tool — record tests by using your app, replay them deterministically, generate Playwright code automatically",
   "main": "cli/index.js",
   "bin": {

package/web/app/index.html

@@ -1968,6 +1968,31 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
       </div>
 
+      <!-- AGENT API KEYS -->
+      <div class="card" style="margin-bottom:20px">
+        <div class="card-header">
+          <div class="card-title">Agent API keys</div>
+          <div style="font-family:var(--mono);font-size:11px;color:var(--muted)">Use these to connect agents without MFA</div>
+        </div>
+        <div class="card-body" style="padding:22px 24px">
+          <p style="font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:20px">
+            API keys allow agents to connect to this dashboard without requiring MFA. Use the <code style="color:var(--cyan)">--api-key</code> flag when starting an agent. The key is only shown once — copy it immediately.
+          </p>
+          <div id="api-keys-list" style="display:flex;flex-direction:column;gap:8px;margin-bottom:16px"></div>
+          <div style="display:flex;gap:8px">
+            <input class="form-input" id="new-api-key-name" type="text" placeholder="Key name (e.g. My Mac Agent)" style="flex:1" onkeydown="if(event.key==='Enter')createApiKey()">
+            <button class="btn btn-primary" onclick="createApiKey()">Generate key</button>
+          </div>
+          <div id="new-api-key-reveal" style="display:none;margin-top:14px;padding:14px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.3);border-radius:8px">
+            <div style="font-family:var(--mono);font-size:11px;color:var(--green);margin-bottom:8px">✓ Key generated — copy it now, it won't be shown again</div>
+            <div style="display:flex;gap:8px;align-items:center">
+              <code id="new-api-key-value" style="font-family:var(--mono);font-size:12px;color:var(--white);flex:1;word-break:break-all"></code>
+              <button class="btn btn-ghost" style="flex-shrink:0" onclick="copyToClipboard(document.getElementById('new-api-key-value').textContent);showToast('Copied!')">Copy</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- API KEYS & TOKENS -->
       <div class="card" style="margin-bottom:20px">
         <div class="card-header">
@@ -4978,6 +5003,7 @@ switchView = function(name) {
   if (name === 'my-settings') {
     fetchMySecrets();
     loadOllamaConfig();
+    fetchApiKeys();
   }
   if (name === 'audit') {
     fetchAuditLog();
@@ -5000,6 +5026,75 @@ const SECRET_DEFINITIONS = {
 
 let _myCurrentSecrets = []; // [{ key, updatedAt }]
 
+// ── AGENT API KEYS ────────────────────────────────────────────────────────────
+async function fetchApiKeys() {
+  try {
+    const res = await fetch(API_BASE + '/api/api-keys');
+    if (!res.ok) return;
+    const keys = await res.json();
+    renderApiKeys(keys);
+  } catch {}
+}
+
+function renderApiKeys(keys) {
+  const container = document.getElementById('api-keys-list');
+  if (!container) return;
+  if (!keys.length) {
+    container.innerHTML = '<div style="font-family:var(--mono);font-size:12px;color:var(--muted2)">No API keys yet.</div>';
+    return;
+  }
+  container.innerHTML = keys.map(k => `
+    <div style="display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);border-radius:8px;border:1px solid var(--border)">
+      <div style="flex:1">
+        <div style="font-size:13px;color:var(--text)">${escapeHtml(k.name)}</div>
+        <div style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px">
+          ${escapeHtml(k.key_prefix)} · Created ${formatDateTime(k.created_at)}
+          ${k.last_used_at ? ' · Last used ' + formatDateTime(k.last_used_at) : ' · Never used'}
+        </div>
+      </div>
+      <button class="btn btn-ghost" style="color:var(--red);flex-shrink:0" onclick="deleteApiKey('${escapeAttr(k.id)}','${escapeAttr(k.name)}')">Revoke</button>
+    </div>`).join('');
+}
+
+async function createApiKey() {
+  const name = document.getElementById('new-api-key-name')?.value?.trim();
+  if (!name) { showToast('Enter a name for this key'); return; }
+  try {
+    const res = await fetch(API_BASE + '/api/api-keys', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    });
+    if (!res.ok) { showToast('Failed to create key'); return; }
+    const data = await res.json();
+    document.getElementById('new-api-key-name').value = '';
+    document.getElementById('new-api-key-value').textContent = data.key;
+    document.getElementById('new-api-key-reveal').style.display = 'block';
+    fetchApiKeys();
+  } catch (err) { showToast('Error: ' + err.message); }
+}
+
+async function deleteApiKey(id, name) {
+  showConfirm('Revoke API key?', `Revoke "${name}"? Any agents using this key will disconnect.`, async () => {
+    await fetch(API_BASE + '/api/api-keys/' + encodeURIComponent(id), { method: 'DELETE' });
+    fetchApiKeys();
+    showToast('API key revoked');
+  });
+}
+
+// ── ADMIN MFA RESET ───────────────────────────────────────────────────────────
+async function adminResetMfa(userId, name) {
+  showConfirm('Reset MFA?', `Reset MFA for ${name}? They will be required to re-enroll on their next login.`, async () => {
+    const res = await fetch(API_BASE + '/api/users/' + encodeURIComponent(userId) + '/mfa-reset', { method: 'POST' });
+    if (res.ok) {
+      showToast('MFA reset — ' + name + ' will re-enroll on next login');
+      fetchUsersAndInvites();
+    } else {
+      showToast('Failed to reset MFA');
+    }
+  });
+}
+
 async function fetchMySecrets() {
   try {
     const res = await fetch(API_BASE + '/api/user/secrets');
@@ -5390,6 +5485,9 @@ function renderUsers(users) {
     const isMe = me && u.id === me.id;
     const lastLogin = u.last_login_at ? formatDateTime(u.last_login_at) : 'Never';
     const created = u.created_at ? formatDateTime(u.created_at) : '';
+    const mfaBadge = u.mfa_enabled
+      ? '<span style="font-family:var(--mono);font-size:9px;letter-spacing:0.1em;padding:2px 6px;border-radius:4px;background:rgba(16,185,129,0.15);color:var(--green);text-transform:uppercase">MFA ✓</span>'
+      : '<span style="font-family:var(--mono);font-size:9px;letter-spacing:0.1em;padding:2px 6px;border-radius:4px;background:rgba(239,68,68,0.15);color:var(--red);text-transform:uppercase">MFA pending</span>';
     return `
       <div class="saved-test-row" style="cursor:default">
         <div style="display:flex;align-items:center;gap:14px;flex:1;min-width:0">
@@ -5399,6 +5497,7 @@ function renderUsers(users) {
               <span>${escapeHtml(u.name)}</span>
               ${isMe ? '<span style="font-family:var(--mono);font-size:9px;letter-spacing:0.1em;padding:2px 6px;border-radius:4px;background:var(--cyan-dim);color:var(--cyan);text-transform:uppercase">You</span>' : ''}
               ${u.status === 'disabled' ? '<span style="font-family:var(--mono);font-size:9px;letter-spacing:0.1em;padding:2px 6px;border-radius:4px;background:rgba(245,158,11,0.15);color:var(--yellow);text-transform:uppercase">Disabled</span>' : ''}
+              ${mfaBadge}
             </div>
             <div style="font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-top:3px">
               <span>${escapeHtml(u.email)}</span>
@@ -5416,6 +5515,7 @@ function renderUsers(users) {
           </select>
           ${!isMe ? `
             ${u.status === 'active' ? `
+              ${u.mfa_enabled ? `<button class="btn btn-ghost" onclick="adminResetMfa('${escapeAttr(u.id)}', '${escapeAttr(u.name || u.email)}')" title="Reset MFA — forces re-enrollment on next login" style="color:var(--yellow)">Reset MFA</button>` : ''}
               <button class="btn btn-ghost" onclick="generatePasswordReset('${escapeAttr(u.id)}', '${escapeAttr(u.name || u.email)}')" title="Generate a password reset link for this user">Reset password</button>
               <button class="btn btn-ghost" onclick="forceLogout('${escapeAttr(u.id)}', '${escapeAttr(u.name || u.email)}')" title="Revoke all active sessions for this user">Force logout</button>
               <button class="btn btn-ghost" onclick="toggleUserStatus('${escapeAttr(u.id)}', 'disabled')" title="Disable - they won't be able to log in">Disable</button>

package/web/login.html

@@ -8,264 +8,195 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@500;700&display=swap" rel="stylesheet">
 <style>
-:root {
-  --bg: #080810;
-  --surface: #0d0d1a;
-  --surface2: #12121f;
-  --border: rgba(255,255,255,0.06);
-  --border-bright: rgba(0,212,255,0.2);
-  --cyan: #00d4ff;
-  --cyan-dim: rgba(0,212,255,0.12);
-  --red: #ef4444;
-  --green: #10b981;
-  --yellow: #f59e0b;
-  --text: #e8eaf0;
-  --muted: #5a6180;
-  --muted2: #3a3f5c;
-  --white: #ffffff;
-  --mono: 'DM Mono', monospace;
-  --display: 'Syne', sans-serif;
-}
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--display);
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  position: relative;
-  overflow-x: hidden;
-}
-body::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background-image:
-    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
-  background-size: 60px 60px;
-  pointer-events: none;
-  z-index: 0;
-}
-body::after {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background: radial-gradient(circle at 50% 30%, rgba(0,212,255,0.08) 0%, transparent 60%);
-  pointer-events: none;
-  z-index: 0;
-}
-.wrap {
-  position: relative;
-  z-index: 1;
-  max-width: 440px;
-  width: 100%;
-}
-.brand {
-  font-family: var(--mono);
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--cyan);
-  letter-spacing: 0.2em;
-  text-align: center;
-  margin-bottom: 12px;
-}
-.title {
-  font-family: var(--display);
-  font-weight: 700;
-  font-size: 36px;
-  color: var(--white);
-  text-align: center;
-  margin-bottom: 12px;
-  line-height: 1.1;
-}
-.sub {
-  font-family: var(--mono);
-  font-size: 13px;
-  color: var(--muted);
-  text-align: center;
-  margin-bottom: 36px;
-  line-height: 1.6;
-}
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 32px;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
-}
-.field { margin-bottom: 18px; }
-.label {
-  display: block;
-  font-family: var(--mono);
-  font-size: 11px;
-  letter-spacing: 0.1em;
-  color: var(--muted);
-  text-transform: uppercase;
-  margin-bottom: 8px;
-}
-.input {
-  width: 100%;
-  padding: 12px 14px;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--white);
-  font-family: var(--mono);
-  font-size: 14px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-.input:focus {
-  border-color: var(--cyan);
-  box-shadow: 0 0 0 3px var(--cyan-dim);
-}
-.btn {
-  width: 100%;
-  padding: 14px 24px;
-  background: var(--cyan);
-  color: var(--bg);
-  border: none;
-  border-radius: 8px;
-  font-family: var(--mono);
-  font-size: 13px;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  transition: all 0.2s;
-  margin-top: 8px;
-  text-transform: uppercase;
-}
-.btn:hover { background: #00b8e0; box-shadow: 0 0 30px rgba(0,212,255,0.3); }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.alert {
-  padding: 12px 14px;
-  border-radius: 8px;
-  font-family: var(--mono);
-  font-size: 12px;
-  margin-bottom: 16px;
-  line-height: 1.5;
-}
-.alert.error {
-  background: rgba(239,68,68,0.1);
-  border: 1px solid rgba(239,68,68,0.3);
-  color: var(--red);
-}
-.alert.success {
-  background: rgba(16,185,129,0.1);
-  border: 1px solid rgba(16,185,129,0.3);
-  color: var(--green);
-}
-.note {
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--muted);
-  text-align: center;
-  margin-top: 24px;
-  line-height: 1.6;
-}
-.hidden { display: none; }
+:root{--bg:#080810;--surface:#0d0d1a;--surface2:#12121f;--border:rgba(255,255,255,0.06);--cyan:#00d4ff;--cyan-dim:rgba(0,212,255,0.12);--red:#ef4444;--green:#10b981;--text:#e8eaf0;--muted:#5a6180;--white:#ffffff;--mono:'DM Mono',monospace;--display:'Syne',sans-serif;}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+body{background:var(--bg);color:var(--text);font-family:var(--display);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow-x:hidden;}
+body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0;}
+body::after{content:'';position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,rgba(0,212,255,0.08) 0%,transparent 60%);pointer-events:none;z-index:0;}
+.wrap{position:relative;z-index:1;max-width:440px;width:100%;}
+.brand{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--cyan);letter-spacing:0.2em;text-align:center;margin-bottom:12px;}
+.title{font-family:var(--display);font-weight:700;font-size:36px;color:var(--white);text-align:center;margin-bottom:12px;line-height:1.1;}
+.sub{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center;margin-bottom:36px;line-height:1.6;}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,0.4);}
+.field{margin-bottom:18px;}
+.label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;}
+.input{width:100%;padding:12px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--white);font-family:var(--mono);font-size:14px;outline:none;transition:border-color 0.2s;}
+.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);}
+.btn{width:100%;padding:14px 24px;background:var(--cyan);color:var(--bg);border:none;border-radius:8px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.05em;cursor:pointer;transition:all 0.2s;margin-top:8px;text-transform:uppercase;}
+.btn:hover{background:#00b8e0;box-shadow:0 0 30px rgba(0,212,255,0.3);}
+.btn:disabled{opacity:0.5;cursor:not-allowed;}
+.alert{padding:12px 14px;border-radius:8px;font-family:var(--mono);font-size:12px;margin-bottom:16px;line-height:1.5;}
+.alert.error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:var(--red);}
+.alert.success{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);color:var(--green);}
+.note{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;margin-top:24px;line-height:1.6;}
+.hidden{display:none;}
+.back-btn{width:100%;margin-top:10px;padding:10px;background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:12px;cursor:pointer;}
+.back-btn:hover{color:var(--text);}
+.secret-box{text-align:center;margin-bottom:20px;padding:10px;background:var(--surface2);border-radius:6px;border:1px solid var(--border);}
 </style>
 </head>
 <body>
 <div class="wrap">
   <div class="brand">SKOPIX</div>
-  <h1 class="title">Sign in.</h1>
-  <p class="sub">Welcome back. Enter your email and password.</p>
+  <h1 class="title" id="page-title">Sign in.</h1>
+  <p class="sub" id="page-sub">Welcome back. Enter your email and password.</p>
 
   <div class="card">
     <div id="alert" class="alert hidden"></div>
 
-    <form id="login-form">
-      <div class="field">
-        <label class="label" for="email">Email address</label>
-        <input class="input" id="email" name="email" type="email" autocomplete="email" required autofocus placeholder="you@yourcompany.com">
-      </div>
+    <div id="step-login">
+      <form id="login-form">
+        <div class="field">
+          <label class="label" for="email">Email address</label>
+          <input class="input" id="email" name="email" type="email" autocomplete="email" required autofocus placeholder="you@yourcompany.com">
+        </div>
+        <div class="field">
+          <label class="label" for="password">Password</label>
+          <input class="input" id="password" name="password" type="password" autocomplete="current-password" required placeholder="Your password">
+        </div>
+        <button id="submit-btn" class="btn" type="submit">Sign in &#8594;</button>
+      </form>
+    </div>
+
+    <div id="step-mfa-verify" style="display:none">
+      <form id="mfa-verify-form">
+        <div class="field">
+          <label class="label" for="totp-code">Authentication code</label>
+          <input class="input" id="totp-code" name="totp-code" type="text" inputmode="numeric" maxlength="6" placeholder="000000" autocomplete="one-time-code">
+          <p style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5">Open your authenticator app (Google Authenticator, Authy, 1Password etc.) and enter the 6-digit code.</p>
+        </div>
+        <button id="mfa-verify-btn" class="btn" type="submit">Verify &#8594;</button>
+        <button type="button" class="back-btn" onclick="backToLogin()">&#8592; Back to sign in</button>
+      </form>
+    </div>
 
-      <div class="field">
-        <label class="label" for="password">Password</label>
-        <input class="input" id="password" name="password" type="password" autocomplete="current-password" required placeholder="Your password">
-      </div>
+    <div id="step-mfa-enroll" style="display:none">
+      <form id="mfa-enroll-form">
+        <div style="text-align:center;margin-bottom:16px">
+          <img id="qr-code-img" src="" alt="QR Code" style="width:180px;height:180px;border-radius:8px;background:#fff;padding:8px">
+        </div>
+        <p style="font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;margin-bottom:6px">Can't scan? Enter this code manually in your authenticator app:</p>
+        <div class="secret-box">
+          <code id="secret-text" style="font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:0.12em;word-break:break-all"></code>
+        </div>
+        <div class="field">
+          <label class="label" for="enroll-code">Enter 6-digit code to confirm setup</label>
+          <input class="input" id="enroll-code" name="enroll-code" type="text" inputmode="numeric" maxlength="6" placeholder="000000" autocomplete="one-time-code">
+        </div>
+        <button id="enroll-btn" class="btn" type="submit">Confirm &#38; sign in &#8594;</button>
+        <button type="button" class="back-btn" onclick="backToLogin()">&#8592; Back to sign in</button>
+      </form>
+    </div>
 
-      <button id="submit-btn" class="btn" type="submit">Sign in →</button>
-    </form>
   </div>
 
-  <p class="note">
-    Need an account? Ask your Skopix admin for an invite.
-  </p>
+  <p class="note">Need an account? Ask your Skopix admin for an invite.</p>
 </div>
 
 <script>
-const form = document.getElementById('login-form');
 const alertEl = document.getElementById('alert');
 const submitBtn = document.getElementById('submit-btn');
+let pendingToken = null;
 
-function showAlert(message, kind = 'error') {
-  alertEl.textContent = message;
-  alertEl.className = 'alert ' + kind;
+function showStep(step) {
+  ['login','mfa-verify','mfa-enroll'].forEach(function(s) {
+    document.getElementById('step-' + s).style.display = s === step ? 'block' : 'none';
+  });
+  alertEl.classList.add('hidden');
+  var titles = {login:'Sign in.',  'mfa-verify':'Two-factor auth.', 'mfa-enroll':'Set up MFA.'};
+  var subs = {login:'Welcome back. Enter your email and password.', 'mfa-verify':'Enter the 6-digit code from your authenticator app.', 'mfa-enroll':'Scan the QR code with your authenticator app to enable MFA.'};
+  document.getElementById('page-title').textContent = titles[step] || 'Sign in.';
+  document.getElementById('page-sub').textContent = subs[step] || '';
+  setTimeout(function() {
+    var focusMap = {login:'email', 'mfa-verify':'totp-code', 'mfa-enroll':'enroll-code'};
+    var el = document.getElementById(focusMap[step]);
+    if (el) el.focus();
+  }, 100);
+}
+
+function showAlert(msg, kind) {
+  alertEl.textContent = msg;
+  alertEl.className = 'alert ' + (kind || 'error');
   alertEl.classList.remove('hidden');
 }
 
-// On load: if already signed in, redirect to dashboard. If team mode is off,
-// no point being here either.
 async function checkStatus() {
   try {
-    const statusRes = await fetch('/api/team/status');
-    if (!statusRes.ok) {
-      window.location.href = '/app/';
-      return;
-    }
-    const status = await statusRes.json();
-    if (status.needsSetup) {
-      window.location.href = '/setup';
-      return;
-    }
-    // Try /api/auth/me - if logged in, skip to dashboard
-    const meRes = await fetch('/api/auth/me');
-    if (meRes.ok) {
-      window.location.href = '/app/';
-    }
-  } catch {}
+    var r = await fetch('/api/team/status');
+    if (!r.ok) { window.location.href = '/app/'; return; }
+    var s = await r.json();
+    if (s.needsSetup) { window.location.href = '/setup'; return; }
+    var me = await fetch('/api/auth/me');
+    if (me.ok) { window.location.href = '/app/'; }
+  } catch(e) {}
 }
 checkStatus();
 
-form.addEventListener('submit', async (e) => {
+document.getElementById('login-form').addEventListener('submit', async function(e) {
   e.preventDefault();
   alertEl.classList.add('hidden');
+  var email = document.getElementById('email').value.trim();
+  var password = document.getElementById('password').value;
+  submitBtn.disabled = true; submitBtn.textContent = 'Signing in...';
+  try {
+    var res = await fetch('/api/auth/login', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,password:password})});
+    var data = await res.json();
+    if (!res.ok) { showAlert(data.error || 'Sign in failed.'); submitBtn.disabled=false; submitBtn.textContent='Sign in \u2192'; return; }
+    pendingToken = data.pendingToken;
+    if (data.mfaRequired) {
+      showStep('mfa-verify');
+    } else if (data.mfaEnrollRequired) {
+      await startEnrollment();
+      showStep('mfa-enroll');
+    } else if (data.ok) {
+      showAlert('Signed in. Redirecting...', 'success');
+      setTimeout(function(){ window.location.href='/app/'; }, 600);
+    }
+  } catch(err) { showAlert('Network error: ' + err.message); }
+  submitBtn.disabled=false; submitBtn.textContent='Sign in \u2192';
+});
 
-  const email = document.getElementById('email').value.trim();
-  const password = document.getElementById('password').value;
-
-  submitBtn.disabled = true;
-  submitBtn.textContent = 'Signing in...';
-
+document.getElementById('mfa-verify-form').addEventListener('submit', async function(e) {
+  e.preventDefault();
+  alertEl.classList.add('hidden');
+  var code = document.getElementById('totp-code').value.replace(/[^0-9]/g,'');
+  var btn = document.getElementById('mfa-verify-btn');
+  btn.disabled=true; btn.textContent='Verifying...';
   try {
-    const res = await fetch('/api/auth/login', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email, password }),
-    });
-    const data = await res.json();
+    var res = await fetch('/api/auth/mfa-verify', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({pendingToken:pendingToken,totpCode:code})});
+    var data = await res.json();
+    if (!res.ok) { showAlert(data.error||'Invalid code. Try again.'); document.getElementById('totp-code').value=''; document.getElementById('totp-code').focus(); btn.disabled=false; btn.textContent='Verify \u2192'; return; }
+    showAlert('Signed in. Redirecting...','success');
+    setTimeout(function(){ window.location.href='/app/'; }, 600);
+  } catch(err) { showAlert('Network error: '+err.message); btn.disabled=false; btn.textContent='Verify \u2192'; }
+});
 
-    if (!res.ok) {
-      showAlert(data.error || 'Sign in failed.');
-      submitBtn.disabled = false;
-      submitBtn.textContent = 'Sign in →';
-      return;
-    }
+async function startEnrollment() {
+  try {
+    var res = await fetch('/api/auth/mfa-enroll', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({pendingToken:pendingToken})});
+    var data = await res.json();
+    if (!res.ok) { showAlert(data.error||'Enrollment failed.'); return; }
+    document.getElementById('qr-code-img').src = data.qrUrl;
+    document.getElementById('secret-text').textContent = data.secret;
+  } catch(err) { showAlert('Network error: '+err.message); }
+}
 
-    showAlert('Signed in. Redirecting...', 'success');
-    setTimeout(() => { window.location.href = '/app/'; }, 600);
-  } catch (err) {
-    showAlert('Network error: ' + err.message);
-    submitBtn.disabled = false;
-    submitBtn.textContent = 'Sign in →';
-  }
+document.getElementById('mfa-enroll-form').addEventListener('submit', async function(e) {
+  e.preventDefault();
+  alertEl.classList.add('hidden');
+  var code = document.getElementById('enroll-code').value.replace(/[^0-9]/g,'');
+  var btn = document.getElementById('enroll-btn');
+  btn.disabled=true; btn.textContent='Confirming...';
+  try {
+    var res = await fetch('/api/auth/mfa-enroll-confirm', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({pendingToken:pendingToken,totpCode:code})});
+    var data = await res.json();
+    if (!res.ok) { showAlert(data.error||'Invalid code. Check your app.'); document.getElementById('enroll-code').value=''; document.getElementById('enroll-code').focus(); btn.disabled=false; btn.textContent='Confirm & sign in \u2192'; return; }
+    showAlert('MFA enabled! Signing in...','success');
+    setTimeout(function(){ window.location.href='/app/'; }, 800);
+  } catch(err) { showAlert('Network error: '+err.message); btn.disabled=false; btn.textContent='Confirm & sign in \u2192'; }
 });
+
+function backToLogin() { pendingToken=null; showStep('login'); }
 </script>
 </body>
 </html>