@cordfuse/crosstalk 7.0.0-alpha.9 → 7.0.0-beta.1

package/src/web/stubs.ts

@@ -0,0 +1,510 @@
+// stubs.ts — auth/admin pages, aligned with @cordfuse/llmux.
+//
+// Account / Users / Tokens are now interactive (mint/revoke/create/
+// delete/toggle-admin/change-passphrase). Logs + Settings remain
+// read-only stubs until those subsystems have something mutable.
+
+import { page, escapeHtml, relativeTime, TOAST_HELPER } from './layout.js';
+import type { User } from '../auth/users.js';
+import type { IdentityToken } from '../auth/tokens.js';
+
+interface CommonOpts {
+  host: string;
+  alias: string;
+}
+
+// ── /account ─────────────────────────────────────────────────────────
+
+export function accountPage(opts: CommonOpts & { user: User | null }): string {
+  const u = opts.user;
+  if (!u) {
+    return page({
+      title: `crosstalk on ${opts.host} · Account`,
+      host: opts.host, alias: opts.alias, activeNav: 'account', pageTitle: 'Account',
+      body: `<section class="card"><h3>Not signed in</h3><p class="sub">Sign in via <a href="/login">/login</a> to see account details.</p></section>`,
+    });
+  }
+  return page({
+    title: `crosstalk on ${opts.host} · Account`,
+    host: opts.host, alias: opts.alias, activeNav: 'account', pageTitle: 'Account',
+    body: `
+<section class="card">
+  <h3>Signed in as</h3>
+  <div class="kv"><span class="key">username</span><span class="val brand">${escapeHtml(u.username)}</span></div>
+  <div class="kv"><span class="key">display name</span><span class="val">${escapeHtml(u.name)}</span></div>
+  <div class="kv"><span class="key">role</span><span class="val ${u.admin ? 'brand' : 'dim'}">${u.admin ? 'admin' : 'member'}</span></div>
+  <div class="kv"><span class="key">created</span><span class="val dim">${escapeHtml(u.createdAt)} (${escapeHtml(relativeTime(u.createdAt))})</span></div>
+  <div class="actions" style="margin-top:14px">
+    <button type="button" id="logout-btn">Sign out</button>
+  </div>
+</section>
+
+<section class="card">
+  <h3>Change passphrase</h3>
+  <p class="sub">Requires your current passphrase. Minimum 8 characters.</p>
+  <form id="passphrase-form" autocomplete="off">
+    <div class="field">
+      <label for="pp-old">current passphrase</label>
+      <input type="password" id="pp-old" autocomplete="current-password" required>
+    </div>
+    <div class="field">
+      <label for="pp-new">new passphrase</label>
+      <input type="password" id="pp-new" autocomplete="new-password" minlength="8" required>
+    </div>
+    <div class="field">
+      <label for="pp-confirm">confirm new passphrase</label>
+      <input type="password" id="pp-confirm" autocomplete="new-password" minlength="8" required>
+    </div>
+    <div class="actions">
+      <button type="submit" class="primary">Update passphrase</button>
+    </div>
+  </form>
+</section>
+`,
+    inlineScript: `${TOAST_HELPER}
+document.getElementById('logout-btn').addEventListener('click', async () => {
+  try {
+    const r = await fetch('/api/auth/logout', { method: 'POST' });
+    if (r.ok) location.href = '/login';
+    else window.showToast('logout failed: ' + r.status, 'err');
+  } catch (e){ window.showToast('logout error: ' + e.message, 'err'); }
+});
+document.getElementById('passphrase-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  const oldPP = document.getElementById('pp-old').value;
+  const newPP = document.getElementById('pp-new').value;
+  const confirmPP = document.getElementById('pp-confirm').value;
+  if (newPP !== confirmPP){ window.showToast('confirmation does not match', 'err'); return; }
+  try {
+    const r = await fetch('/api/account/passphrase', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ oldPassphrase: oldPP, newPassphrase: newPP }),
+    });
+    const body = await r.json().catch(() => ({}));
+    if (r.ok){
+      window.showToast('passphrase updated', 'ok');
+      document.getElementById('passphrase-form').reset();
+    } else {
+      window.showToast(body.error || 'update failed', 'err');
+    }
+  } catch (e){ window.showToast('error: ' + e.message, 'err'); }
+});
+`,
+  });
+}
+
+// ── /users (admin) ───────────────────────────────────────────────────
+
+export function usersPage(opts: CommonOpts & { users: User[]; viewerIsAdmin: boolean; viewerUsername: string | null }): string {
+  if (!opts.viewerIsAdmin) {
+    return page({
+      title: `crosstalk on ${opts.host} · Users`,
+      host: opts.host, alias: opts.alias, activeNav: 'users', pageTitle: 'Users',
+      body: `<section class="card"><h3>Admin only</h3><p class="sub">Only admin users can view and manage the operator roster.</p></section>`,
+    });
+  }
+  const rows = opts.users.map((u) => {
+    const isSelf = u.username === opts.viewerUsername;
+    return `
+  <div class="user-row" data-username="${escapeHtml(u.username)}">
+    <div class="user-info">
+      <div class="user-name"><span class="brand">${escapeHtml(u.username)}</span> ${u.admin ? '<span class="chip brand">admin</span>' : ''}${isSelf ? '<span class="chip" style="color:#a371f7;border-color:#3d2466">you</span>' : ''}</div>
+      <div class="user-meta">${escapeHtml(u.name)} · ${escapeHtml(relativeTime(u.createdAt))}</div>
+    </div>
+    <div class="user-actions">
+      <button type="button" data-action="toggle-admin" data-admin="${u.admin ? 'false' : 'true'}"${isSelf ? ' disabled title="cannot change your own admin flag"' : ''}>${u.admin ? 'demote' : 'promote'}</button>
+      <button type="button" data-action="delete" class="danger"${isSelf ? ' disabled title="cannot delete yourself"' : ''}>delete</button>
+    </div>
+  </div>`;
+  }).join('');
+  return page({
+    title: `crosstalk on ${opts.host} · Users`,
+    host: opts.host, alias: opts.alias, activeNav: 'users', pageTitle: 'Users',
+    extraCss: `
+  .user-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #1f2329;flex-wrap:wrap}
+  .user-row:last-of-type{border-bottom:none}
+  .user-info{flex:1 1 auto;min-width:0}
+  .user-name{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+  .user-meta{font-size:11px;color:#7a7f87;margin-top:2px}
+  .user-actions{display:flex;gap:6px;flex-shrink:0}
+  .user-actions button{padding:5px 10px;font-size:11px}
+  .user-actions button.danger{color:#f85149;border-color:#4a2329}
+  .user-actions button.danger:hover:not(:disabled){background:#1a0e0e}
+    `,
+    body: `
+<section class="card">
+  <h3>Operators (${opts.users.length})</h3>
+  <p class="sub">All admins can create users and toggle admin flags. You can't demote or delete yourself.</p>
+  <div id="users-list">
+    ${rows || '<div class="empty">no users</div>'}
+  </div>
+</section>
+
+<section class="card">
+  <h3>Create user</h3>
+  <form id="create-form" autocomplete="off">
+    <div class="field">
+      <label for="cu-username">username</label>
+      <input type="text" id="cu-username" pattern="[a-z0-9_-]+" maxlength="32" required placeholder="lowercase, no spaces">
+    </div>
+    <div class="field">
+      <label for="cu-name">display name</label>
+      <input type="text" id="cu-name" required>
+    </div>
+    <div class="field">
+      <label for="cu-passphrase">passphrase</label>
+      <input type="password" id="cu-passphrase" minlength="8" required>
+    </div>
+    <div class="field">
+      <label><input type="checkbox" id="cu-admin"> admin</label>
+    </div>
+    <div class="actions">
+      <button type="submit" class="primary">Create user</button>
+    </div>
+  </form>
+</section>
+`,
+    inlineScript: `${TOAST_HELPER}
+async function refreshList(){ location.reload(); }
+document.getElementById('users-list').addEventListener('click', async (ev) => {
+  const btn = ev.target;
+  if (!(btn instanceof HTMLElement) || !btn.dataset.action) return;
+  const row = btn.closest('.user-row');
+  if (!row) return;
+  const username = row.dataset.username;
+  if (btn.dataset.action === 'toggle-admin'){
+    const next = btn.dataset.admin === 'true';
+    if (!confirm((next ? 'Promote' : 'Demote') + ' ' + username + '?')) return;
+    btn.disabled = true;
+    try {
+      const r = await fetch('/api/users/' + encodeURIComponent(username), {
+        method: 'PATCH', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ admin: next }),
+      });
+      const body = await r.json().catch(() => ({}));
+      if (r.ok){ window.showToast('admin flag updated', 'ok'); setTimeout(refreshList, 500); }
+      else { window.showToast(body.error || 'failed', 'err'); btn.disabled = false; }
+    } catch (e){ window.showToast('error: ' + e.message, 'err'); btn.disabled = false; }
+  } else if (btn.dataset.action === 'delete'){
+    if (!confirm('Delete user ' + username + '? This also revokes all their tokens.')) return;
+    btn.disabled = true;
+    try {
+      const r = await fetch('/api/users/' + encodeURIComponent(username), { method: 'DELETE' });
+      const body = await r.json().catch(() => ({}));
+      if (r.ok){ window.showToast('user deleted', 'ok'); setTimeout(refreshList, 500); }
+      else { window.showToast(body.error || 'failed', 'err'); btn.disabled = false; }
+    } catch (e){ window.showToast('error: ' + e.message, 'err'); btn.disabled = false; }
+  }
+});
+document.getElementById('create-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  const payload = {
+    username: document.getElementById('cu-username').value.trim(),
+    name: document.getElementById('cu-name').value.trim(),
+    passphrase: document.getElementById('cu-passphrase').value,
+    admin: document.getElementById('cu-admin').checked,
+  };
+  try {
+    const r = await fetch('/api/users', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    const body = await r.json().catch(() => ({}));
+    if (r.ok){
+      window.showToast('user ' + payload.username + ' created', 'ok');
+      setTimeout(refreshList, 500);
+    } else {
+      window.showToast(body.error || 'create failed', 'err');
+    }
+  } catch (e){ window.showToast('error: ' + e.message, 'err'); }
+});
+`,
+  });
+}
+
+// ── /tokens ──────────────────────────────────────────────────────────
+
+export function tokensPage(opts: CommonOpts & { tokens: IdentityToken[]; viewerUsername: string | null }): string {
+  const rows = opts.tokens.map((t) => `
+  <div class="token-row" data-token-id="${escapeHtml(t.tokenId)}">
+    <div class="token-info">
+      <div class="token-name"><span class="brand">${escapeHtml(t.name)}</span> <span class="token-id">${escapeHtml(t.tokenId)}</span></div>
+      <div class="token-meta">
+        created ${escapeHtml(relativeTime(t.createdAt))}${t.lastUsedAt ? ' · last used ' + escapeHtml(relativeTime(t.lastUsedAt)) : ' · never used'}${t.expiresAt ? ' · expires ' + escapeHtml(t.expiresAt) : ''}
+      </div>
+    </div>
+    <div class="token-actions">
+      <button type="button" data-action="revoke" class="danger">revoke</button>
+    </div>
+  </div>`).join('');
+  return page({
+    title: `crosstalk on ${opts.host} · Tokens`,
+    host: opts.host, alias: opts.alias, activeNav: 'tokens', pageTitle: 'Tokens',
+    extraCss: `
+  .token-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #1f2329;flex-wrap:wrap}
+  .token-row:last-of-type{border-bottom:none}
+  .token-info{flex:1 1 auto;min-width:0}
+  .token-name{font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+  .token-id{font-size:10px;color:#7a7f87;font-family:ui-monospace,monospace}
+  .token-meta{font-size:11px;color:#7a7f87;margin-top:2px}
+  .token-actions button.danger{color:#f85149;border-color:#4a2329;padding:5px 10px;font-size:11px}
+  .token-actions button.danger:hover{background:#1a0e0e}
+  #new-token-secret{margin-top:10px;background:#0b0c10;border:1px solid #2d4a66;border-radius:6px;padding:10px;font:11px ui-monospace,monospace;color:#7cc4ff;word-break:break-all;display:none}
+  #new-token-secret.show{display:block}
+  #new-token-secret .copy-btn{display:inline-block;margin-left:8px;padding:3px 8px;font-size:10px}
+    `,
+    body: `
+<section class="card">
+  <h3>Tokens${opts.viewerUsername ? ' · ' + escapeHtml(opts.viewerUsername) : ''} (${opts.tokens.length})</h3>
+  <p class="sub">API tokens grant bearer access to the engine API. The plaintext secret is shown once at mint — copy it before navigating away.</p>
+  <div id="tokens-list">
+    ${rows || '<div class="empty">no tokens yet — mint one below</div>'}
+  </div>
+</section>
+
+<section class="card">
+  <h3>Mint new token</h3>
+  <form id="mint-form" autocomplete="off">
+    <div class="field">
+      <label for="tk-name">token name</label>
+      <input type="text" id="tk-name" required placeholder="e.g. cachy-cli, mac-ci">
+    </div>
+    <div class="actions">
+      <button type="submit" class="primary">Mint</button>
+    </div>
+  </form>
+  <div id="new-token-secret" role="alert">
+    <strong>new token (copy now — won't be shown again):</strong><br>
+    <span id="secret-text"></span>
+    <button type="button" class="copy-btn" id="copy-secret">copy</button>
+  </div>
+</section>
+`,
+    inlineScript: `${TOAST_HELPER}
+document.getElementById('tokens-list').addEventListener('click', async (ev) => {
+  const btn = ev.target;
+  if (!(btn instanceof HTMLElement) || btn.dataset.action !== 'revoke') return;
+  const row = btn.closest('.token-row');
+  if (!row) return;
+  const tokenId = row.dataset.tokenId;
+  if (!confirm('Revoke token ' + tokenId + '? This will invalidate any clients using this token.')) return;
+  btn.disabled = true;
+  try {
+    const r = await fetch('/api/tokens/' + encodeURIComponent(tokenId), { method: 'DELETE' });
+    const body = await r.json().catch(() => ({}));
+    if (r.ok){
+      window.showToast('token revoked', 'ok');
+      setTimeout(() => location.reload(), 500);
+    } else { window.showToast(body.error || 'failed', 'err'); btn.disabled = false; }
+  } catch (e){ window.showToast('error: ' + e.message, 'err'); btn.disabled = false; }
+});
+document.getElementById('mint-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  const name = document.getElementById('tk-name').value.trim();
+  if (!name) return;
+  try {
+    const r = await fetch('/api/tokens', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    });
+    const body = await r.json().catch(() => ({}));
+    if (r.ok){
+      window.showToast('token minted — copy the secret now', 'ok');
+      document.getElementById('secret-text').textContent = body.plaintextSecret;
+      document.getElementById('new-token-secret').classList.add('show');
+      document.getElementById('mint-form').reset();
+    } else { window.showToast(body.error || 'mint failed', 'err'); }
+  } catch (e){ window.showToast('error: ' + e.message, 'err'); }
+});
+document.getElementById('copy-secret').addEventListener('click', async () => {
+  const text = document.getElementById('secret-text').textContent;
+  try {
+    await navigator.clipboard.writeText(text);
+    window.showToast('copied', 'ok');
+  } catch { window.showToast('clipboard blocked — select + copy manually', 'err'); }
+});
+`,
+  });
+}
+
+// ── /logs (live tail via SSE) ────────────────────────────────────────
+
+export function logsPage(opts: CommonOpts & { errorsLogged: number; transportRoot: string }): string {
+  return page({
+    title: `crosstalk on ${opts.host} · Logs`,
+    host: opts.host, alias: opts.alias, activeNav: 'logs', pageTitle: 'Logs',
+    extraCss: `
+  #logs-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
+  #logs-filter{flex:1 1 200px;background:#0b0c10;color:#e6e8eb;border:1px solid #262c34;border-radius:6px;padding:7px 10px;font:13px ui-monospace,monospace;outline:none;min-width:160px}
+  #logs-filter:focus{border-color:#2d4a66}
+  #logs-status{font-size:11px;color:#7a7f87}
+  #logs-status.connected{color:#7ee787}
+  #logs-status.dead{color:#f85149}
+  #logs-list{background:#0b0c10;border:1px solid #1f2329;border-radius:6px;padding:10px;font:11px/1.5 ui-monospace,monospace;max-height:70dvh;overflow-y:auto;overflow-x:auto;white-space:nowrap}
+  #logs-list .log-row{padding:2px 0;border-bottom:1px dotted #1c2128;white-space:nowrap}
+  #logs-list .log-row:last-child{border-bottom:none}
+  #logs-list .log-ts{color:#7a7f87;margin-right:8px}
+  #logs-list .log-event{color:#7cc4ff;font-weight:600;margin-right:6px}
+  #logs-list .log-fields{color:#c9d1d9}
+  #logs-list .log-row.error .log-event{color:#f85149}
+  #logs-list .log-row.warn .log-event{color:#d29922}
+  #logs-list .log-row.dispatch .log-event{color:#7ee787}
+  #logs-list .log-row.workflow .log-event{color:#a371f7}
+  #logs-list .log-row.hidden{display:none}
+    `,
+    body: `
+<section class="card">
+  <h3>Logs <span class="chip">live tail</span></h3>
+  <p class="sub">Structured events from the engine's <code>log()</code> calls. Server-sent stream — updates as the dispatcher works. Reflects the in-process ring buffer (last 500 entries).</p>
+  <div class="kv"><span class="key">errors logged (since start)</span><span class="val ${opts.errorsLogged > 0 ? 'warn' : 'ok'}">${opts.errorsLogged}</span></div>
+  <div class="kv"><span class="key">errors file</span><span class="val dim" style="font-size:11px">${escapeHtml(opts.transportRoot)}/../state/transport/errors.log</span></div>
+</section>
+
+<section class="card">
+  <h3>Live tail</h3>
+  <div id="logs-toolbar">
+    <input type="text" id="logs-filter" placeholder="filter by event name (e.g. dispatch, workflow)…" autocomplete="off">
+    <button type="button" id="logs-pause">pause</button>
+    <button type="button" id="logs-clear">clear</button>
+    <span id="logs-status">connecting…</span>
+  </div>
+  <div id="logs-list" role="log" aria-live="polite"></div>
+</section>
+`,
+    inlineScript: `${TOAST_HELPER}
+const list = document.getElementById('logs-list');
+const filter = document.getElementById('logs-filter');
+const pauseBtn = document.getElementById('logs-pause');
+const clearBtn = document.getElementById('logs-clear');
+const status = document.getElementById('logs-status');
+
+let paused = false;
+let autoscroll = true;
+let lastSeq = 0;
+let es = null;
+let reconnectT = null;
+
+function setStatus(text, cls){ status.textContent = text; status.className = cls || ''; }
+function applyFilter(row, term){
+  if (!term){ row.classList.remove('hidden'); return; }
+  const txt = row.textContent || '';
+  row.classList.toggle('hidden', !txt.toLowerCase().includes(term));
+}
+function escapeHtml(s){ return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+
+function appendEntry(entry){
+  if (entry.seq && entry.seq > lastSeq) lastSeq = entry.seq;
+  const row = document.createElement('div');
+  row.className = 'log-row';
+  // Color hint by event name prefix.
+  const ev = entry.event || '';
+  if (ev.includes('error') || ev.includes('fail') || ev.includes('crash')) row.classList.add('error');
+  else if (ev.includes('warn') || ev.includes('stale')) row.classList.add('warn');
+  else if (ev.startsWith('dispatch') || ev === 'dispatch') row.classList.add('dispatch');
+  else if (ev.startsWith('workflow')) row.classList.add('workflow');
+  const ts = (entry.ts || '').slice(11, 23); // HH:MM:SS.mmm
+  const fields = entry.fields || {};
+  const kvs = Object.keys(fields).map(k => k + '=' + (typeof fields[k] === 'string' ? fields[k] : JSON.stringify(fields[k]))).join(' ');
+  row.innerHTML = '<span class="log-ts">' + escapeHtml(ts) + '</span>' +
+                  '<span class="log-event">' + escapeHtml(ev) + '</span>' +
+                  '<span class="log-fields">' + escapeHtml(kvs) + '</span>';
+  applyFilter(row, filter.value.toLowerCase().trim());
+  list.appendChild(row);
+  // Cap displayed rows so the DOM doesn't grow forever.
+  while (list.children.length > 1000) list.removeChild(list.firstChild);
+  if (autoscroll && !paused) list.scrollTop = list.scrollHeight;
+}
+
+function connect(){
+  if (es){ try { es.close(); } catch(_){} }
+  setStatus('connecting…');
+  const url = '/api/logs/stream' + (lastSeq > 0 ? '?since=' + lastSeq : '');
+  es = new EventSource(url);
+  es.addEventListener('open', () => setStatus('live · streaming', 'connected'));
+  es.addEventListener('message', (ev) => {
+    if (paused) return;
+    try { appendEntry(JSON.parse(ev.data)); } catch(_) {}
+  });
+  es.addEventListener('error', () => {
+    setStatus('disconnected · reconnecting in 3s', 'dead');
+    if (reconnectT) clearTimeout(reconnectT);
+    reconnectT = setTimeout(connect, 3000);
+  });
+}
+
+// Detect manual scroll-up: if the user scrolls away from the bottom,
+// stop auto-scrolling so new entries don't yank them back.
+list.addEventListener('scroll', () => {
+  const distFromBottom = list.scrollHeight - (list.scrollTop + list.clientHeight);
+  autoscroll = distFromBottom < 30;
+});
+
+filter.addEventListener('input', () => {
+  const term = filter.value.toLowerCase().trim();
+  for (const row of list.children) applyFilter(row, term);
+});
+
+pauseBtn.addEventListener('click', () => {
+  paused = !paused;
+  pauseBtn.textContent = paused ? 'resume' : 'pause';
+});
+
+clearBtn.addEventListener('click', () => {
+  list.innerHTML = '';
+  window.showToast('logs cleared (server buffer unchanged)', 'ok');
+});
+
+connect();
+`,
+  });
+}
+
+// ── /settings (read-only stub) ──────────────────────────────────────
+
+export interface SettingsPageData extends CommonOpts {
+  version: string;
+  transportRoot: string;
+  claimedModels: string[];
+  pollSeconds: number | null;
+  apiPort: number;
+}
+
+export function settingsPage(d: SettingsPageData): string {
+  return page({
+    title: `crosstalk on ${d.host} · Settings`,
+    host: d.host, alias: d.alias, activeNav: 'settings', pageTitle: 'Settings',
+    body: `
+<section class="card">
+  <h3>Engine settings <span class="chip">read-only — backlog</span></h3>
+  <p class="sub">Snapshot of the running engine. Editable settings are on the backlog — for now, restart the engine with different flags / env vars.</p>
+  <div class="kv"><span class="key">alias</span><span class="val brand">${escapeHtml(d.alias)}</span></div>
+  <div class="kv"><span class="key">version</span><span class="val">${escapeHtml(d.version)}</span></div>
+  <div class="kv"><span class="key">transport root</span><span class="val dim" style="font-size:11px">${escapeHtml(d.transportRoot)}</span></div>
+  <div class="kv"><span class="key">api port</span><span class="val">${d.apiPort}</span></div>
+  <div class="kv"><span class="key">poll cadence</span><span class="val">${d.pollSeconds !== null ? d.pollSeconds + 's' : '—'}</span></div>
+  <div class="kv"><span class="key">claimed models</span><span class="val">${d.claimedModels.length === 0 ? '<span class="dim">none</span>' : d.claimedModels.map((m) => '<span class="chip">' + escapeHtml(m) + '</span>').join(' ')}</span></div>
+</section>
+`,
+  });
+}
+
+// ── /about ───────────────────────────────────────────────────────────
+
+export function aboutPage(opts: CommonOpts & { version: string; transportRoot: string }): string {
+  return page({
+    title: `crosstalk on ${opts.host} · About`,
+    host: opts.host, alias: opts.alias, activeNav: 'about', pageTitle: 'About',
+    body: `
+<section class="card">
+  <h3>Crosstalk</h3>
+  <p class="sub">Async git-backed message bus + dispatcher for AI agent CLIs. Sibling product to <a href="https://github.com/cordfuse/llmux">@cordfuse/llmux</a> (interactive tmux-based session mux).</p>
+  <div class="kv"><span class="key">engine version</span><span class="val brand">${escapeHtml(opts.version)}</span></div>
+  <div class="kv"><span class="key">alias</span><span class="val">${escapeHtml(opts.alias)}</span></div>
+  <div class="kv"><span class="key">host</span><span class="val">${escapeHtml(opts.host)}</span></div>
+  <div class="kv"><span class="key">transport</span><span class="val dim" style="font-size:11px">${escapeHtml(opts.transportRoot)}</span></div>
+  <div class="kv"><span class="key">repo</span><span class="val"><a href="https://github.com/cordfuse/crosstalk">github.com/cordfuse/crosstalk</a></span></div>
+  <div class="kv"><span class="key">license</span><span class="val">MIT</span></div>
+</section>
+`,
+  });
+}