@empir3/empir3-bridge 0.3.21

package/installer/server.js

@@ -0,0 +1,231 @@
+#!/usr/bin/env node
+/**
+ * Koba Installer Server — local HTTP server behind the chat UI.
+ *
+ * Flow:
+ *   1. Pick a random localhost port, start the HTTP server.
+ *   2. Open the user's default browser to http://localhost:<port>/
+ *   3. Serve the chat UI; respond to its fetch() calls:
+ *        POST /api/login  { email, password }
+ *        POST /api/signup { email, password, name }
+ *        POST /api/launch { token, user }     → writes auth+settings, spawns bridge
+ *        POST /api/open-browser               → launches Chrome on /connect?oauth_token=...
+ *        POST /api/close                      → exit after a delay so the fetch resolves
+ *   4. When the chat is done, installer exits and the detached Bridge takes over.
+ *
+ * This file never embeds credentials. All auth calls go to app.empir3.com
+ * which issues the token and sets the server-side cookie; we just relay the
+ * POST and persist the returned token locally.
+ */
+const http = require('http');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { spawn, exec } = require('child_process');
+const https = require('https');
+
+const SERVER = process.env.EMPIR3_SERVER || 'https://app.empir3.com';
+// In dev runs UI files are next to this script; in SEA-packaged runs the
+// payload tarball ships installer-ui/ alongside this bundle and the path
+// is surfaced through an env var by build/payload-entry.js.
+const UI_DIR = process.env.EMPIR3_BRIDGE_INSTALLER_UI_DIR || path.join(__dirname, 'ui');
+const APPDATA = path.join(process.env.APPDATA || path.join(os.homedir(), '.empir3'), 'Empir3');
+const AUTH_FILE = path.join(APPDATA, 'bridge-auth.json');
+const SETTINGS_FILE = path.join(APPDATA, 'bridge-settings.json');
+
+function ensureAppdata() { try { fs.mkdirSync(APPDATA, { recursive: true }); } catch {} }
+
+// ── Tiny HTTPS JSON client (no external deps) ──────────────────────────
+
+function postJson(url, body) {
+  return new Promise((resolve, reject) => {
+    const u = new URL(url);
+    const data = JSON.stringify(body);
+    const req = https.request({
+      hostname: u.hostname,
+      port: u.port || 443,
+      path: u.pathname + (u.search || ''),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': Buffer.byteLength(data),
+        'User-Agent': 'empir3-bridge-installer',
+      },
+    }, (res) => {
+      let chunks = '';
+      res.on('data', (c) => (chunks += c));
+      res.on('end', () => {
+        let parsed = null;
+        try { parsed = JSON.parse(chunks); } catch {}
+        resolve({ status: res.statusCode, body: parsed, raw: chunks });
+      });
+    });
+    req.on('error', reject);
+    req.write(data);
+    req.end();
+  });
+}
+
+// ── Local state for the installer session ─────────────────────────────
+
+let savedAuth = null;
+let bridgeChild = null;
+
+// ── HTTP handlers ──────────────────────────────────────────────────────
+
+function readBody(req) {
+  return new Promise((resolve) => {
+    let buf = '';
+    req.on('data', (c) => (buf += c));
+    req.on('end', () => {
+      try { resolve(JSON.parse(buf)); } catch { resolve({}); }
+    });
+  });
+}
+
+function sendJson(res, status, body) {
+  const s = JSON.stringify(body);
+  res.writeHead(status, { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(s) });
+  res.end(s);
+}
+
+function serveStatic(req, res) {
+  // Map request paths to files under UI_DIR. Default → index.html.
+  let rel = req.url.split('?')[0];
+  if (rel === '/' || rel === '') rel = '/index.html';
+  const safe = path.normalize(rel).replace(/^([/\\])+/, '');
+  const filePath = path.join(UI_DIR, safe);
+  if (!filePath.startsWith(UI_DIR)) {
+    res.writeHead(403); res.end('Forbidden'); return;
+  }
+  fs.readFile(filePath, (err, data) => {
+    if (err) { res.writeHead(404); res.end('Not found'); return; }
+    const ext = path.extname(filePath).toLowerCase();
+    const ct = { '.html': 'text/html', '.js': 'application/javascript', '.css': 'text/css', '.svg': 'image/svg+xml' }[ext] || 'application/octet-stream';
+    res.writeHead(200, { 'Content-Type': ct });
+    res.end(data);
+  });
+}
+
+async function handleApi(req, res, pathname) {
+  const body = await readBody(req);
+
+  if (pathname === '/api/login') {
+    // NEVER log password material. Even length + last char is enough to
+    // accelerate a brute-force / shoulder-surf attack and leaks signal
+    // about the user's password. The previous log line shipped to the
+    // installer's local console + bridge.log on disk — caught live in
+    // cont-13O smoke when the user spotted "[login] ... password.length=14
+    // password.lastChar='m'" scrolling past during install.
+    console.log(`[login] email=${JSON.stringify(body.email)}`);
+    const r = await postJson(`${SERVER}/api/auth/login`, { email: body.email, password: body.password });
+    if (r.status === 200 && r.body?.token) {
+      savedAuth = { legacyToken: r.body.token, user: r.body.user, channelId: r.body.channelId || null };
+      return sendJson(res, 200, { ok: true, user: r.body.user });
+    }
+    return sendJson(res, r.status, { ok: false, error: r.body?.error || 'Login failed' });
+  }
+
+  if (pathname === '/api/signup') {
+    const r = await postJson(`${SERVER}/api/auth/register`, { email: body.email, password: body.password, name: body.name });
+    if ((r.status === 200 || r.status === 201) && r.body?.token) {
+      savedAuth = { legacyToken: r.body.token, user: r.body.user, channelId: r.body.channelId || null };
+      return sendJson(res, 200, { ok: true, user: r.body.user });
+    }
+    return sendJson(res, r.status, { ok: false, error: r.body?.error || 'Signup failed' });
+  }
+
+  if (pathname === '/api/launch') {
+    if (!savedAuth) return sendJson(res, 400, { ok: false, error: 'Not authenticated' });
+    ensureAppdata();
+    // Persist auth
+    fs.writeFileSync(AUTH_FILE, JSON.stringify(savedAuth, null, 2));
+    // Ensure a settings file exists; Bridge fills in deviceId on first boot
+    if (!fs.existsSync(SETTINGS_FILE)) {
+      fs.writeFileSync(SETTINGS_FILE, JSON.stringify({
+        deviceName: os.hostname(),
+        homeDirectory: path.join(os.homedir(), 'Documents', 'Empir3'),
+        permissions: { read: true, write: false, execute: false },
+      }, null, 2));
+    }
+    // Spawn the Bridge — detached. In SEA-packaged runs we invoke the
+    // bootstrapper with `--daemon`, which spawns the tray wrapper, which
+    // in turn supervises the actual daemon. The user sees a tray icon.
+    // In dev runs we still point Node directly at index.js (no tray) so
+    // smoke-tests of the installer don't depend on a built Empir3Tray.exe.
+    let isSea = false;
+    try { isSea = !!require('node:sea').isSea(); } catch {}
+    const spawnArgs = isSea ? ['--daemon'] : [path.resolve(__dirname, '..', 'index.js')];
+    bridgeChild = spawn(process.execPath, spawnArgs, {
+      detached: true,
+      stdio: 'ignore',
+      env: { ...process.env, RELAY_SECRET: process.env.RELAY_SECRET || '' },
+    });
+    bridgeChild.unref();
+    return sendJson(res, 200, { ok: true, pid: bridgeChild.pid });
+  }
+
+  if (pathname === '/api/bridge-status') {
+    // Poll for 'relay.connected' in the recent bridge log
+    const logPath = path.join(APPDATA, 'bridge.log');
+    let connected = false;
+    try {
+      const size = fs.statSync(logPath).size;
+      const start = Math.max(0, size - 20_000);
+      const fd = fs.openSync(logPath, 'r');
+      const buf = Buffer.alloc(size - start);
+      fs.readSync(fd, buf, 0, buf.length, start);
+      fs.closeSync(fd);
+      connected = buf.toString('utf8').includes('relay.connected');
+    } catch {}
+    return sendJson(res, 200, { connected });
+  }
+
+  if (pathname === '/api/open-browser') {
+    if (!savedAuth) return sendJson(res, 400, { ok: false, error: 'Not authenticated' });
+    const userJson = encodeURIComponent(JSON.stringify(savedAuth.user));
+    const target = `${SERVER}/connect?oauth_token=${encodeURIComponent(savedAuth.legacyToken)}&oauth_user=${userJson}`;
+    // Open in system default browser (user's regular Chrome, with their cookies + history)
+    const cmd = process.platform === 'win32' ? `start "" "${target}"` :
+                process.platform === 'darwin' ? `open "${target}"` :
+                `xdg-open "${target}"`;
+    exec(cmd);
+    return sendJson(res, 200, { ok: true, url: target });
+  }
+
+  if (pathname === '/api/close') {
+    sendJson(res, 200, { ok: true });
+    setTimeout(() => process.exit(0), 400);
+    return;
+  }
+
+  sendJson(res, 404, { ok: false, error: 'Not found' });
+}
+
+// ── Server ─────────────────────────────────────────────────────────────
+
+function start() {
+  const server = http.createServer(async (req, res) => {
+    const pathname = new URL(req.url, `http://${req.headers.host}`).pathname;
+    if (pathname.startsWith('/api/')) {
+      try { await handleApi(req, res, pathname); }
+      catch (e) { sendJson(res, 500, { ok: false, error: e.message }); }
+      return;
+    }
+    serveStatic(req, res);
+  });
+
+  server.listen(0, '127.0.0.1', () => {
+    const { port } = server.address();
+    const url = `http://127.0.0.1:${port}/`;
+    console.log(`[koba-installer] ${url}`);
+    const cmd = process.platform === 'win32' ? `start "" "${url}"` :
+                process.platform === 'darwin' ? `open "${url}"` :
+                `xdg-open "${url}"`;
+    exec(cmd);
+  });
+}
+
+if (require.main === module) start();
+
+module.exports = { start };

package/installer/ui/app.js

@@ -0,0 +1,278 @@
+/**
+ * Koba chat — installer front-end.
+ *
+ * Single state-machine driving the conversation:
+ *   greet → ask_email → ask_account → (login | signup)
+ *                                      ↓
+ *                                 wait_connect → offer_browser → done
+ *
+ * Every agent line renders as a bubble after a pacing delay so Koba doesn't
+ * wall-of-text new users. User replies are collected via an input row or a
+ * choice row, which we re-render per step.
+ */
+
+const chat = document.getElementById('chat');
+const action = document.getElementById('action');
+const stage = document.getElementById('stage');
+
+const session = { email: '', user: null };
+
+// ── Helpers ─────────────────────────────────────────────────────────────
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const pace = (text) => Math.min(1400, Math.max(450, text.length * 28));
+
+function scrollToBottom() {
+  chat.scrollTop = chat.scrollHeight;
+}
+
+function addRow(kind, html) {
+  const row = document.createElement('div');
+  row.className = 'row ' + kind;
+  row.innerHTML = `<div class="bubble">${html}</div>`;
+  chat.appendChild(row);
+  scrollToBottom();
+  return row;
+}
+
+function addSpeaker(name) {
+  // Label only once per streak of agent bubbles
+  const last = chat.lastElementChild;
+  if (last?.classList.contains('speaker') && last.textContent === name) return;
+  if (last?.classList.contains('row') && last.classList.contains('agent')) return;
+  const s = document.createElement('div');
+  s.className = 'speaker';
+  s.textContent = name;
+  chat.appendChild(s);
+}
+
+function showTyping() {
+  const row = document.createElement('div');
+  row.className = 'row agent typing-row';
+  row.innerHTML = `<div class="bubble"><span class="typing"><span></span><span></span><span></span></span></div>`;
+  chat.appendChild(row);
+  scrollToBottom();
+  return row;
+}
+
+async function koba(text) {
+  addSpeaker('Koba');
+  const typing = showTyping();
+  await sleep(pace(text));
+  typing.remove();
+  addRow('agent', escapeHtml(text));
+}
+
+function me(text) {
+  addRow('user', escapeHtml(text));
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}
+
+function setAction(html) {
+  action.innerHTML = html;
+}
+
+function clearAction() {
+  action.innerHTML = '';
+}
+
+function setStage(label) {
+  stage.textContent = label;
+}
+
+function askInput({ placeholder = '', type = 'text', submitLabel = 'Send' }) {
+  return new Promise((resolve) => {
+    setAction(`
+      <div class="input-row">
+        <input id="inp" type="${type}" placeholder="${escapeHtml(placeholder)}" autofocus />
+        <button class="primary" id="btn">${escapeHtml(submitLabel)}</button>
+      </div>
+    `);
+    const inp = document.getElementById('inp');
+    const btn = document.getElementById('btn');
+    const done = () => {
+      const v = inp.value.trim();
+      if (!v) return;
+      clearAction();
+      resolve(v);
+    };
+    btn.onclick = done;
+    inp.addEventListener('keydown', (e) => { if (e.key === 'Enter') done(); });
+    inp.focus();
+  });
+}
+
+function askChoice(options) {
+  return new Promise((resolve) => {
+    const buttons = options
+      .map((o, i) => `<button class="${o.primary ? 'primary' : 'secondary'}" data-i="${i}">${escapeHtml(o.label)}</button>`)
+      .join('');
+    setAction(`<div class="choices">${buttons}</div>`);
+    action.querySelectorAll('button').forEach((b) => {
+      b.onclick = () => {
+        const opt = options[parseInt(b.dataset.i, 10)];
+        clearAction();
+        resolve(opt.value);
+      };
+    });
+  });
+}
+
+async function api(path, body) {
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body || {}),
+  });
+  return res.json();
+}
+
+// ── Flow ────────────────────────────────────────────────────────────────
+
+async function run() {
+  setStage('Greeting');
+  await koba("Hey — I'm Koba. I'm going to get your team set up so Vincent and the rest of us can help you out directly from your machine.");
+  await koba("It's quick. I just need your email, and if you don't have an Empir3 account yet, we'll make one together.");
+
+  // Loop so the user can correct themselves
+  let email = '';
+  while (!email) {
+    setStage('Email');
+    const v = await askInput({ placeholder: 'you@domain.com', type: 'email', submitLabel: 'Next' });
+    me(v);
+    if (!v.includes('@')) {
+      await koba("That doesn't look like an email — give me one with an @ in it?");
+      continue;
+    }
+    email = v;
+  }
+  session.email = email;
+
+  setStage('Account');
+  const mode = await askChoice([
+    { label: 'I already have one', value: 'login', primary: true },
+    { label: 'Create one for me', value: 'signup' },
+  ]);
+  me(mode === 'login' ? 'I already have an Empir3 account' : 'Create one for me');
+
+  if (mode === 'login') {
+    await runLogin(email);
+  } else {
+    await runSignup(email);
+  }
+
+  // After auth, session.user is set and the Bridge gets launched.
+  await runConnect();
+  await runOpenBrowser();
+  await runGoodbye();
+}
+
+async function runLogin(email) {
+  while (true) {
+    setStage('Password');
+    await koba("What's your password?");
+    const pwd = await askInput({ placeholder: 'password', type: 'password', submitLabel: 'Sign in' });
+    me('••••••••');
+    await koba("One second, signing you in…");
+    const r = await api('/api/login', { email, password: pwd });
+    if (r.ok) {
+      session.user = r.user;
+      await koba(`Welcome back, ${r.user?.name || email}.`);
+      return;
+    }
+    await koba(`Hmm — ${r.error || 'that didn\'t work'}. Want to try again?`);
+    const retry = await askChoice([
+      { label: 'Try again', value: 'retry', primary: true },
+      { label: "I don't have an account — make one", value: 'signup' },
+    ]);
+    me(retry === 'retry' ? 'Try again' : 'Make one for me');
+    if (retry === 'signup') return runSignup(email);
+  }
+}
+
+async function runSignup(email) {
+  let name = '';
+  while (!name) {
+    setStage('Your name');
+    await koba("Nice. What should I call you?");
+    const v = await askInput({ placeholder: 'Your name', submitLabel: 'Next' });
+    me(v);
+    if (v.length > 100) { await koba("Let's keep it under 100 characters."); continue; }
+    name = v;
+  }
+
+  while (true) {
+    setStage('Password');
+    await koba("Pick a password — eight characters minimum.");
+    const pwd = await askInput({ placeholder: 'password (8+ chars)', type: 'password', submitLabel: 'Create account' });
+    me('••••••••');
+    if (pwd.length < 8) {
+      await koba("Eight characters or more — that's the rule. Try again?");
+      continue;
+    }
+    await koba("Got it. Creating your account…");
+    const r = await api('/api/signup', { email, password: pwd, name });
+    if (r.ok) {
+      session.user = r.user;
+      await koba(`You're in, ${r.user?.name || name}. Account created.`);
+      return;
+    }
+    await koba(`That didn't work — ${r.error || 'something went wrong'}. Want to try a different password?`);
+    const retry = await askChoice([
+      { label: 'Try again', value: 'retry', primary: true },
+      { label: 'I actually have an account', value: 'login' },
+    ]);
+    me(retry === 'retry' ? 'Try again' : 'I actually have one');
+    if (retry === 'login') return runLogin(email);
+  }
+}
+
+async function runConnect() {
+  setStage('Connecting Bridge');
+  await koba("Now I'm going to fire up the Bridge on your machine — that's the piece that lets the team reach you.");
+  await api('/api/launch', {});
+
+  // Poll bridge-status for up to 20s
+  const deadline = Date.now() + 20_000;
+  while (Date.now() < deadline) {
+    const r = await api('/api/bridge-status', {});
+    if (r.connected) {
+      await koba("Bridge is up and talking to the team.");
+      return;
+    }
+    await sleep(800);
+  }
+  await koba("The Bridge is taking a bit longer than usual — it should connect on its own shortly. You can keep going.");
+}
+
+async function runOpenBrowser() {
+  setStage('Open browser?');
+  const choice = await askChoice([
+    { label: 'Yes, open it and log me in', value: 'yes', primary: true },
+    { label: 'Not now', value: 'no' },
+  ]);
+  me(choice === 'yes' ? 'Yes, open it' : 'Not right now');
+
+  if (choice === 'yes') {
+    await koba("On it. Opening Empir3 in your browser now.");
+    await api('/api/open-browser', {});
+  } else {
+    await koba("No problem. You can open app.empir3.com whenever — you're already signed in.");
+  }
+}
+
+async function runGoodbye() {
+  setStage('Done');
+  await koba("You're all set. The Bridge will stay running in the background. I'll close this window now.");
+  await sleep(1200);
+  await api('/api/close', {});
+}
+
+// ── Go ──────────────────────────────────────────────────────────────────
+
+run().catch(async (e) => {
+  await koba(`Something went wrong on my end: ${e.message}. You can close this window and try again.`);
+});

package/installer/ui/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Empir3 — Setup with Koba</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header class="top">
+    <div class="brand">
+      <span class="dot"></span>
+      <span class="name">Empir3</span>
+    </div>
+    <div class="stage" id="stage">Setup</div>
+  </header>
+
+  <main class="chat" id="chat"></main>
+
+  <footer class="action" id="action"></footer>
+
+  <script src="app.js"></script>
+</body>
+</html>

package/installer/ui/styles.css

@@ -0,0 +1,146 @@
+:root {
+  --bg: #faf8f4;
+  --ink: #1a1716;
+  --muted: #8a8480;
+  --line: #e8e2d9;
+  --accent: #14B8A6;
+  --accent-ink: #ffffff;
+  --surface: #ffffff;
+  --agent-bubble: #f1ede5;
+  --user-bubble: #14B8A6;
+  --user-ink: #ffffff;
+  --radius: 16px;
+  --radius-sm: 10px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+  --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); }
+
+body { display: flex; flex-direction: column; }
+
+header.top {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 22px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(250, 248, 244, 0.9);
+  backdrop-filter: blur(8px);
+  position: sticky; top: 0; z-index: 5;
+}
+
+.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; }
+.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+.name { font-family: var(--font-serif); font-size: 18px; }
+.stage { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
+
+main.chat {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 24px min(4vw, 40px);
+  display: flex;
+  flex-direction: column;
+  max-width: 720px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.row { display: flex; margin-bottom: 6px; }
+.row.agent { justify-content: flex-start; }
+.row.user  { justify-content: flex-end; }
+.row + .row { margin-top: 2px; }
+.row.agent + .row.agent .bubble { border-top-left-radius: 4px; }
+.row.user  + .row.user  .bubble { border-top-right-radius: 4px; }
+
+.bubble {
+  max-width: 78%;
+  padding: 11px 15px;
+  border-radius: var(--radius);
+  line-height: 1.45;
+  font-size: 15px;
+  word-wrap: break-word;
+  box-shadow: 0 1px 1px rgba(26,23,22,0.04);
+}
+.row.agent .bubble {
+  background: var(--agent-bubble);
+  color: var(--ink);
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: var(--radius);
+}
+.row.user .bubble {
+  background: var(--user-bubble);
+  color: var(--user-ink);
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: 6px;
+}
+
+.speaker {
+  font-size: 12px;
+  color: var(--muted);
+  margin: 10px 0 4px 4px;
+  letter-spacing: 0.02em;
+}
+
+.typing { display: inline-flex; gap: 3px; padding: 6px 2px; }
+.typing span {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--muted); opacity: 0.6;
+  animation: blink 1.2s infinite;
+}
+.typing span:nth-child(2) { animation-delay: 0.15s; }
+.typing span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 0.95; } }
+
+footer.action {
+  border-top: 1px solid var(--line);
+  padding: 14px min(4vw, 40px);
+  background: var(--surface);
+  max-width: 720px; margin: 0 auto; width: 100%;
+}
+
+.input-row { display: flex; gap: 10px; align-items: stretch; }
+.input-row input {
+  flex: 1;
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg);
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 15px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.input-row input:focus { border-color: var(--accent); }
+
+button.primary, button.secondary {
+  padding: 12px 18px;
+  border-radius: var(--radius-sm);
+  border: 0;
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 15px;
+  cursor: pointer;
+  transition: transform 0.08s, box-shadow 0.15s;
+}
+button.primary { background: var(--accent); color: var(--accent-ink); }
+button.primary:hover { box-shadow: 0 2px 10px rgba(20, 184, 166, 0.3); }
+button.primary:active { transform: translateY(1px); }
+button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
+button.secondary:hover { background: var(--agent-bubble); }
+
+.choices { display: flex; gap: 10px; flex-wrap: wrap; }
+.choices button { flex: 1; min-width: 140px; }
+
+.error { color: #c53030; font-size: 13px; margin-top: 8px; }
+.hint  { color: var(--muted); font-size: 13px; margin-top: 6px; }
+
+.link-btn {
+  background: none; border: 0; color: var(--accent);
+  font-family: inherit; font-size: inherit; cursor: pointer;
+  padding: 0; text-decoration: underline; text-underline-offset: 3px;
+}