@fyresmith/hive-server 4.0.0 → 5.0.0

package/routes/dashboard.js

@@ -0,0 +1,590 @@
+import { Router } from 'express';
+import { urlencoded } from 'express';
+import { platform } from 'os';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { authenticateAccount } from '../lib/accountState.js';
+import {
+  createInvite,
+  loadManagedState,
+  removeMember,
+  revokeInvite,
+} from '../lib/managedState.js';
+import { createVaultAtParent, initializeOwnerManagedVault } from '../lib/setupOrchestrator.js';
+import { loadEnvFile, normalizeEnv, writeEnvFile } from '../cli/env-file.js';
+import {
+  clearDashboardCookie,
+  getDashboardSession,
+  requireDashboardAuth,
+  setDashboardCookie,
+  signDashboardSessionToken,
+} from '../lib/dashboardAuth.js';
+
+const router = Router();
+router.use(urlencoded({ extended: false }));
+const execFileAsync = promisify(execFile);
+
+function getVaultPath() {
+  const value = String(process.env.VAULT_PATH ?? '').trim();
+  if (!value) throw new Error('VAULT_PATH env var is required');
+  return value;
+}
+
+function getConfiguredVaultPath() {
+  return String(process.env.VAULT_PATH ?? '').trim();
+}
+
+function getEnvFilePath(req) {
+  return String(req.app.locals.hiveEnvFile ?? process.env.HIVE_ENV_FILE ?? '').trim();
+}
+
+function getServerUrl(req) {
+  return process.env.HIVE_SERVER_URL?.trim() || `${req.protocol}://${req.get('host')}`;
+}
+
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+const BASE_STYLES = `
+  *, *::before, *::after { box-sizing: border-box; }
+  body { font-family: system-ui, sans-serif; margin: 0; background: #f5f5f5; color: #222; }
+  .topbar { background: #1a1a2e; color: #fff; display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 52px; }
+  .topbar .brand { font-weight: 700; font-size: 1.1rem; color: #fff; text-decoration: none; }
+  .topbar nav { display: flex; gap: 16px; flex: 1; }
+  .topbar nav a { color: #ccc; text-decoration: none; font-size: 0.9rem; padding: 4px 8px; border-radius: 4px; }
+  .topbar nav a.active, .topbar nav a:hover { color: #fff; background: rgba(255,255,255,0.1); }
+  .topbar .signout { margin-left: auto; }
+  .topbar .signout button { background: transparent; border: 1px solid #666; color: #ccc; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
+  .topbar .signout button:hover { border-color: #aaa; color: #fff; }
+  .content { max-width: 960px; margin: 32px auto; padding: 0 24px; }
+  h1 { margin: 0 0 24px; font-size: 1.5rem; }
+  h2 { margin: 0 0 16px; font-size: 1.1rem; }
+  .card { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; }
+  .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
+  .stat { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; text-align: center; }
+  .stat .value { font-size: 2rem; font-weight: 700; color: #2d6cdf; }
+  .stat .label { font-size: 0.85rem; color: #666; margin-top: 4px; }
+  table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+  th { text-align: left; padding: 8px 12px; background: #f0f0f0; border-bottom: 2px solid #ddd; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #555; }
+  td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
+  tr:last-child td { border-bottom: none; }
+  .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
+  .badge-pending { background: #e8f4fd; color: #1a6fa8; }
+  .badge-claimed { background: #e8f7ee; color: #1a7a3c; }
+  .badge-revoked { background: #fdf0f0; color: #c0392b; }
+  .badge-used { background: #f5f0ff; color: #6c3fc5; }
+  .badge-owner { background: #fff3e0; color: #b35c00; }
+  .btn { display: inline-block; padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.85rem; text-decoration: none; }
+  .btn-primary { background: #2d6cdf; color: #fff; }
+  .btn-primary:hover { background: #2459b8; }
+  .btn-danger { background: #c0392b; color: #fff; }
+  .btn-danger:hover { background: #a93226; }
+  .btn-secondary { background: #f0f0f0; color: #333; border: 1px solid #ccc; }
+  .btn-secondary:hover { background: #e0e0e0; }
+  .mono { font-family: monospace; font-size: 0.82rem; word-break: break-all; color: #444; }
+  .muted { color: #888; font-size: 0.85rem; }
+  .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
+  .alert-error { background: #fdf0f0; color: #c0392b; border: 1px solid #f5c6c6; }
+  label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
+  input[type=email], input[type=password] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 14px; font-size: 1rem; }
+  input[type=email]:focus, input[type=password]:focus { outline: none; border-color: #2d6cdf; }
+`;
+
+function dashboardPage(title, bodyHtml, { activeNav = '' } = {}) {
+  const nav = (href, label) => {
+    const isActive = activeNav === label ? ' class="active"' : '';
+    return `<a href="${href}"${isActive}>${escapeHtml(label)}</a>`;
+  };
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hive Dashboard — ${escapeHtml(title)}</title>
+  <style>${BASE_STYLES}</style>
+</head>
+<body>
+<div class="topbar">
+  <a class="brand" href="/dashboard/overview">Hive</a>
+  <nav>
+    ${nav('/dashboard/overview', 'Overview')}
+    ${nav('/dashboard/invites', 'Invites')}
+    ${nav('/dashboard/members', 'Members')}
+  </nav>
+  <div class="signout">
+    <form method="POST" action="/dashboard/logout">
+      <button type="submit">Sign Out</button>
+    </form>
+  </div>
+</div>
+<div class="content">
+${bodyHtml}
+</div>
+</body>
+</html>`;
+}
+
+function loginPage(error) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hive Dashboard — Sign In</title>
+  <style>
+    ${BASE_STYLES}
+    .login-wrap { max-width: 400px; margin: 80px auto; padding: 0 16px; }
+    .login-card { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 32px; }
+    .login-card h1 { margin: 0 0 24px; font-size: 1.3rem; }
+  </style>
+</head>
+<body>
+<div class="login-wrap">
+  <div class="login-card">
+    <h1>Hive Dashboard</h1>
+    ${error ? `<div class="alert alert-error">${escapeHtml(error)}</div>` : ''}
+    <form method="POST" action="/dashboard/login">
+      <label for="email">Email</label>
+      <input type="email" id="email" name="email" required autofocus placeholder="owner@example.com">
+      <label for="password">Password</label>
+      <input type="password" id="password" name="password" required>
+      <button class="btn btn-primary" type="submit" style="width:100%;padding:12px">Sign In</button>
+    </form>
+  </div>
+</div>
+</body>
+</html>`;
+}
+
+function setupPage(error) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hive — Set Up Your Vault</title>
+  <style>
+    ${BASE_STYLES}
+    .setup-wrap { max-width: 480px; margin: 60px auto; padding: 0 16px; }
+    .setup-card { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 32px; }
+    .setup-card h1 { margin: 0 0 8px; font-size: 1.3rem; }
+    .setup-card .subtitle { color: #666; margin: 0 0 24px; font-size: 0.9rem; }
+    .section-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin: 20px 0 12px; font-weight: 700; }
+    hr { border: none; border-top: 1px solid #eee; margin: 20px 0; }
+  </style>
+</head>
+<body>
+<div class="setup-wrap">
+  <div class="setup-card">
+    <h1>Set Up Your Hive Vault</h1>
+    <p class="subtitle">Configure your vault and create the owner account. This only runs once.</p>
+    ${error ? `<div class="alert alert-error">${escapeHtml(error)}</div>` : ''}
+    <form method="POST" action="/dashboard/setup">
+      <p class="section-label">Vault</p>
+      <label for="vaultName">Vault display name</label>
+      <input type="text" id="vaultName" name="vaultName" required autofocus placeholder='e.g. "Team Vault"' style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;margin-bottom:14px;font-size:1rem">
+      <label for="vaultParentPath">Vault location (parent folder)</label>
+      <div style="display:flex;gap:8px;margin-bottom:14px">
+        <input type="text" id="vaultParentPath" name="vaultParentPath" required placeholder="/Users/you/Documents" style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;font-size:1rem">
+        <button class="btn btn-secondary" type="button" id="pickFolderBtn" style="white-space:nowrap">Open Folder…</button>
+      </div>
+      <hr>
+      <p class="section-label">Owner account</p>
+      <label for="email">Email</label>
+      <input type="email" id="email" name="email" required placeholder="you@example.com">
+      <label for="displayName">Display name</label>
+      <input type="text" id="displayName" name="displayName" required placeholder="Your name">
+      <label for="password">Password</label>
+      <input type="password" id="password" name="password" required minlength="8">
+      <button class="btn btn-primary" type="submit" style="width:100%;padding:12px;margin-top:4px">Set Up Hive</button>
+    </form>
+  </div>
+</div>
+<script>
+(() => {
+  const btn = document.getElementById('pickFolderBtn');
+  const input = document.getElementById('vaultParentPath');
+  if (!btn || !input) return;
+  btn.addEventListener('click', async () => {
+    btn.disabled = true;
+    const old = btn.textContent;
+    btn.textContent = 'Choosing...';
+    try {
+      const res = await fetch('/dashboard/setup/pick-folder', { method: 'POST' });
+      const payload = await res.json().catch(() => null);
+      if (!res.ok || !payload?.ok || !payload.path) {
+        throw new Error(payload?.error || 'Could not choose folder');
+      }
+      input.value = payload.path;
+    } catch (err) {
+      alert(err.message || 'Could not choose folder');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = old || 'Open Folder…';
+    }
+  });
+})();
+</script>
+</body>
+</html>`;
+}
+
+function inviteStatusBadge(invite) {
+  if (invite.revokedAt) return '<span class="badge badge-revoked">Revoked</span>';
+  if (invite.downloadTicketUsedAt) return '<span class="badge badge-used">Bundle Used</span>';
+  if (invite.usedAt) return '<span class="badge badge-claimed">Claimed</span>';
+  return '<span class="badge badge-pending">Pending</span>';
+}
+
+async function requireOwnerSession(req, res) {
+  if (!getConfiguredVaultPath()) {
+    res.redirect('/dashboard/setup');
+    return null;
+  }
+  const state = await loadManagedState(getVaultPath());
+  if (!state) {
+    res.redirect('/dashboard/setup');
+    return null;
+  }
+  if (req.dashboardSession?.accountId !== state.ownerId) {
+    clearDashboardCookie(req, res);
+    res.redirect('/dashboard/login');
+    return null;
+  }
+  return state;
+}
+
+// GET /dashboard
+router.get('/', async (req, res) => {
+  if (!getConfiguredVaultPath()) return res.redirect('/dashboard/setup');
+  let state = null;
+  try { state = await loadManagedState(getVaultPath()); } catch { /* uninitialized */ }
+  if (!state) return res.redirect('/dashboard/setup');
+
+  const session = getDashboardSession(req);
+  if (session && session.accountId === state.ownerId) return res.redirect('/dashboard/overview');
+  return res.redirect('/dashboard/login');
+});
+
+// GET /dashboard/setup
+router.get('/setup', async (req, res) => {
+  if (!getConfiguredVaultPath()) {
+    return res.send(setupPage());
+  }
+  let state = null;
+  try { state = await loadManagedState(getVaultPath()); } catch { /* uninitialized */ }
+  if (state) return res.redirect('/dashboard/login');
+  res.send(setupPage());
+});
+
+// POST /dashboard/setup/pick-folder
+router.post('/setup/pick-folder', async (req, res) => {
+  if (platform() !== 'darwin') {
+    return res.status(400).json({ ok: false, error: 'Folder picker is currently supported on macOS only. Enter path manually.' });
+  }
+  try {
+    const { stdout } = await execFileAsync('osascript', [
+      '-e',
+      'POSIX path of (choose folder with prompt "Choose parent folder for your Hive vault")',
+    ]);
+    const path = String(stdout ?? '').trim();
+    if (!path) {
+      return res.status(400).json({ ok: false, error: 'No folder selected.' });
+    }
+    return res.json({ ok: true, path });
+  } catch {
+    return res.status(400).json({ ok: false, error: 'Folder selection cancelled.' });
+  }
+});
+
+// POST /dashboard/setup
+router.post('/setup', async (req, res) => {
+  const configuredPath = getConfiguredVaultPath();
+  if (configuredPath) {
+    let state = null;
+    try { state = await loadManagedState(configuredPath); } catch { /* uninitialized */ }
+    if (state) return res.redirect('/dashboard/login');
+  }
+
+  let state = null;
+  if (configuredPath) {
+    try { state = await loadManagedState(configuredPath); } catch { /* uninitialized */ }
+    if (state) return res.redirect('/dashboard/login');
+  }
+
+  const vaultName = String(req.body?.vaultName ?? '').trim();
+  const vaultParentPath = String(req.body?.vaultParentPath ?? '').trim();
+  const email = String(req.body?.email ?? '').trim();
+  const displayName = String(req.body?.displayName ?? '').trim();
+  const password = String(req.body?.password ?? '');
+
+  if (!vaultName || !vaultParentPath || !email || !displayName || !password) {
+    return res.send(setupPage('All fields are required.'));
+  }
+
+  try {
+    const envFile = getEnvFilePath(req);
+    if (!envFile) {
+      return res.send(setupPage('Could not determine env file path.'));
+    }
+    const vaultPath = await createVaultAtParent({
+      parentPath: vaultParentPath,
+      vaultName,
+    });
+    const existingEnv = normalizeEnv(await loadEnvFile(envFile));
+    const nextEnv = {
+      ...existingEnv,
+      VAULT_PATH: vaultPath,
+    };
+    await writeEnvFile(envFile, nextEnv);
+    process.env.VAULT_PATH = vaultPath;
+
+    const { account } = await initializeOwnerManagedVault({
+      vaultPath,
+      vaultName,
+      ownerEmail: email,
+      ownerDisplayName: displayName,
+      ownerPassword: password,
+    });
+
+    if (typeof req.app.locals.activateRealtime === 'function') {
+      await req.app.locals.activateRealtime();
+    }
+
+    const token = signDashboardSessionToken(account.id);
+    setDashboardCookie(req, res, token);
+    return res.redirect('/dashboard/overview');
+  } catch (err) {
+    return res.send(setupPage(err instanceof Error ? err.message : 'Setup failed. Please try again.'));
+  }
+});
+
+// GET /dashboard/login
+router.get('/login', async (req, res) => {
+  if (!getConfiguredVaultPath()) return res.redirect('/dashboard/setup');
+  let state = null;
+  try { state = await loadManagedState(getVaultPath()); } catch { /* uninitialized */ }
+  if (!state) return res.redirect('/dashboard/setup');
+
+  const session = getDashboardSession(req);
+  if (session && session.accountId === state.ownerId) return res.redirect('/dashboard/overview');
+  res.send(loginPage());
+});
+
+// POST /dashboard/login
+router.post('/login', async (req, res) => {
+  const state = await loadManagedState(getVaultPath());
+  if (!state) {
+    return res.redirect('/dashboard/setup');
+  }
+  const email = String(req.body?.email ?? '').trim();
+  const password = String(req.body?.password ?? '');
+
+  try {
+    const account = await authenticateAccount({ vaultPath: getVaultPath(), email, password });
+    if (account.id !== state.ownerId) {
+      return res.send(loginPage('Access denied. Owner credentials required.'));
+    }
+    const token = signDashboardSessionToken(account.id);
+    setDashboardCookie(req, res, token);
+    return res.redirect('/dashboard/overview');
+  } catch (err) {
+    return res.send(loginPage(err instanceof Error ? err.message : 'Sign in failed.'));
+  }
+});
+
+// POST /dashboard/logout
+router.post('/logout', (req, res) => {
+  clearDashboardCookie(req, res);
+  res.redirect('/dashboard/login');
+});
+
+// GET /dashboard/overview
+router.get('/overview', requireDashboardAuth, async (req, res) => {
+  try {
+    const state = await requireOwnerSession(req, res);
+    if (!state) return;
+
+    const inviteList = Object.values(state.invites ?? {});
+    const pendingCount = inviteList.filter((i) => !i.usedAt && !i.revokedAt).length;
+    const memberCount = Object.keys(state.members ?? {}).length;
+
+    const body = `
+      <h1>${escapeHtml(state.vaultName ?? 'Hive Vault')}</h1>
+      <div class="stat-grid">
+        <div class="stat">
+          <div class="value">${memberCount}</div>
+          <div class="label">Members</div>
+        </div>
+        <div class="stat">
+          <div class="value">${inviteList.length}</div>
+          <div class="label">Total Invites</div>
+        </div>
+        <div class="stat">
+          <div class="value">${pendingCount}</div>
+          <div class="label">Pending Invites</div>
+        </div>
+      </div>
+      <div class="card">
+        <h2>Details</h2>
+        <table>
+          <tr><td><strong>Vault Name</strong></td><td>${escapeHtml(state.vaultName ?? '(not set)')}</td></tr>
+          <tr><td><strong>Vault ID</strong></td><td class="mono">${escapeHtml(state.vaultId)}</td></tr>
+          <tr><td><strong>Initialized</strong></td><td>${escapeHtml(state.initializedAt)}</td></tr>
+          <tr><td><strong>Owner ID</strong></td><td class="mono">${escapeHtml(state.ownerId)}</td></tr>
+        </table>
+      </div>
+    `;
+    res.send(dashboardPage('Overview', body, { activeNav: 'Overview' }));
+  } catch (err) {
+    res.status(500).send(dashboardPage('Error', `<p>${escapeHtml(err instanceof Error ? err.message : String(err))}</p>`));
+  }
+});
+
+// GET /dashboard/invites
+router.get('/invites', requireDashboardAuth, async (req, res) => {
+  try {
+    const state = await requireOwnerSession(req, res);
+    if (!state) return;
+
+    const invites = Object.values(state.invites ?? {}).sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    const serverUrl = getServerUrl(req);
+
+    const rows = invites.length === 0
+      ? '<tr><td colspan="4" class="muted" style="text-align:center;padding:24px">No invites yet.</td></tr>'
+      : invites.map((invite) => {
+        const isPending = !invite.usedAt && !invite.revokedAt;
+        const claimUrl = `${serverUrl}/auth/claim?code=${encodeURIComponent(invite.code)}`;
+        const copyBtn = isPending
+          ? `<button class="btn btn-secondary" onclick="navigator.clipboard.writeText(${JSON.stringify(claimUrl)}).then(()=>this.textContent='Copied!').catch(()=>{})" style="font-size:0.75rem;padding:4px 10px">Copy</button>`
+          : '';
+        const revokeBtn = isPending
+          ? `<form method="POST" action="/dashboard/invites/revoke" style="display:inline">
+              <input type="hidden" name="code" value="${escapeHtml(invite.code)}">
+              <button class="btn btn-danger" type="submit" style="font-size:0.75rem;padding:4px 10px" onclick="return confirm('Revoke invite ${escapeHtml(invite.code)}?')">Revoke</button>
+            </form>`
+          : '';
+        const urlCell = isPending
+          ? `<span class="mono">${escapeHtml(claimUrl)}</span>`
+          : `<span class="muted">${escapeHtml(invite.usedAt ? 'Claimed' : 'Revoked')}</span>`;
+
+        return `<tr>
+          <td class="mono">${escapeHtml(invite.code)}</td>
+          <td>${inviteStatusBadge(invite)}</td>
+          <td>${urlCell}</td>
+          <td><div class="actions">${copyBtn}${revokeBtn}</div></td>
+        </tr>`;
+      }).join('');
+
+    const body = `
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+        <h1 style="margin:0">Invites</h1>
+        <form method="POST" action="/dashboard/invites/create">
+          <button class="btn btn-primary" type="submit">+ Create Invite</button>
+        </form>
+      </div>
+      <div class="card" style="padding:0;overflow:hidden">
+        <table>
+          <thead><tr><th>Code</th><th>Status</th><th>Claim URL</th><th>Actions</th></tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    `;
+    res.send(dashboardPage('Invites', body, { activeNav: 'Invites' }));
+  } catch (err) {
+    res.status(500).send(dashboardPage('Error', `<p>${escapeHtml(err instanceof Error ? err.message : String(err))}</p>`));
+  }
+});
+
+// POST /dashboard/invites/create
+router.post('/invites/create', requireDashboardAuth, async (req, res) => {
+  try {
+    const state = await requireOwnerSession(req, res);
+    if (!state) return;
+    await createInvite({
+      vaultPath: getVaultPath(),
+      createdBy: state.ownerId,
+    });
+    res.redirect('/dashboard/invites');
+  } catch (err) {
+    res.status(500).send(dashboardPage('Error', `<p>${escapeHtml(err instanceof Error ? err.message : String(err))}</p>`));
+  }
+});
+
+// POST /dashboard/invites/revoke
+router.post('/invites/revoke', requireDashboardAuth, async (req, res) => {
+  const code = String(req.body?.code ?? '').trim();
+  try {
+    const state = await requireOwnerSession(req, res);
+    if (!state) return;
+    await revokeInvite({ vaultPath: getVaultPath(), code });
+    res.redirect('/dashboard/invites');
+  } catch (err) {
+    res.status(500).send(dashboardPage('Error', `<p>${escapeHtml(err instanceof Error ? err.message : String(err))}</p>`));
+  }
+});
+
+// GET /dashboard/members
+router.get('/members', requireDashboardAuth, async (req, res) => {
+  try {
+    const state = await requireOwnerSession(req, res);
+    if (!state) return;
+
+    const members = Object.values(state.members ?? {}).sort((a, b) => a.addedAt.localeCompare(b.addedAt));
+
+    const rows = members.length === 0
+      ? '<tr><td colspan="3" class="muted" style="text-align:center;padding:24px">No members yet.</td></tr>'
+      : members.map((member) => {
+        const isOwner = member.id === state.ownerId;
+        const badge = isOwner ? '<span class="badge badge-owner">Owner</span>' : '';
+        const removeBtn = isOwner
+          ? ''
+          : `<form method="POST" action="/dashboard/members/remove" style="display:inline">
+              <input type="hidden" name="userId" value="${escapeHtml(member.id)}">
+              <button class="btn btn-danger" type="submit" style="font-size:0.75rem;padding:4px 10px" onclick="return confirm('Remove member ${escapeHtml(member.username)}?')">Remove</button>
+            </form>`;
+        return `<tr>
+          <td>${escapeHtml(member.username)} ${badge}</td>
+          <td class="mono muted">${escapeHtml(member.id)}</td>
+          <td class="muted">${escapeHtml(member.addedAt)}</td>
+          <td>${removeBtn}</td>
+        </tr>`;
+      }).join('');
+
+    const body = `
+      <h1>Members</h1>
+      <div class="card" style="padding:0;overflow:hidden">
+        <table>
+          <thead><tr><th>Name</th><th>User ID</th><th>Joined</th><th>Actions</th></tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    `;
+    res.send(dashboardPage('Members', body, { activeNav: 'Members' }));
+  } catch (err) {
+    res.status(500).send(dashboardPage('Error', `<p>${escapeHtml(err instanceof Error ? err.message : String(err))}</p>`));
+  }
+});
+
+// POST /dashboard/members/remove
+router.post('/members/remove', requireDashboardAuth, async (req, res) => {
+  const userId = String(req.body?.userId ?? '').trim();
+  try {
+    const state = await requireOwnerSession(req, res);
+    if (!state) return;
+    await removeMember({ vaultPath: getVaultPath(), userId });
+    res.redirect('/dashboard/members');
+  } catch (err) {
+    res.status(500).send(dashboardPage('Error', `<p>${escapeHtml(err instanceof Error ? err.message : String(err))}</p>`));
+  }
+});
+
+export default router;