@moondeck/station 0.0.1 → 1.0.1

package/ui/app.js

@@ -0,0 +1,1102 @@
+/* Local host UI (ADR-028). Vanilla JS, no framework, no build step.
+   Polls the read-only JSON API every 2s and renders four panels. */
+
+"use strict";
+
+const $ = (id) => document.getElementById(id);
+const expanded = new Set(); // task ids whose events are expanded (persist across polls)
+let latestTasks = [];
+let latestEvents = [];
+let latestEngines = null; // { catalog, statuses, cli, accounts } from /api/engines
+
+const KIND_CLASS = {
+  "task.created": "created",
+  "task.started": "started",
+  "task.ended": "ended",
+  "task.ship": "ship",
+};
+
+async function getJSON(path) {
+  const res = await fetch(path, { cache: "no-store" });
+  if (!res.ok) throw new Error(`${path} → ${res.status}`);
+  return res.json();
+}
+
+async function poll() {
+  try {
+    const [status, cloud, tasks, events, engines] = await Promise.all([
+      getJSON("/api/status"),
+      getJSON("/api/cloud"),
+      getJSON("/api/tasks"),
+      getJSON("/api/events"),
+      // Engines are non-fatal: a failure here must not flip the badge to
+      // "unreachable" — keep the last known catalog.
+      getJSON("/api/engines").catch(() => latestEngines),
+    ]);
+    renderStatus(status);
+    renderCloud(cloud);
+    renderEvents(events.events);
+    renderTasks(tasks.tasks, events.events);
+    renderEngines(engines);
+    $("foot-note").textContent =
+      `127.0.0.1 · updated ${new Date().toLocaleTimeString()}`;
+  } catch {
+    setBadge("bad", "unreachable");
+  }
+}
+
+// --- service ----------------------------------------------------------------
+
+function renderStatus(s) {
+  $("host-name").textContent = s.hostName;
+  $("host-sub").textContent = `host monitor · v${s.version}`;
+  const kv = $("service-kv");
+  kv.replaceChildren();
+  addKv(kv, "PID", String(s.pid));
+  addKv(kv, "Uptime", fmtDuration(s.uptime * 1000));
+  addKv(kv, "Cloud", s.cloudUrl);
+  addKv(kv, "Host ID", s.hostId);
+  addKv(kv, "Log", s.logPath);
+}
+
+function addKv(dl, key, value) {
+  const dt = document.createElement("dt");
+  dt.textContent = key;
+  const dd = document.createElement("dd");
+  dd.textContent = value;
+  dl.append(dt, dd);
+}
+
+// --- connection badge -------------------------------------------------------
+
+function renderCloud(c) {
+  const map = {
+    connected: ["ok", "connected"],
+    reconnecting: ["warn", "reconnecting"],
+    disconnected: ["bad", "disconnected"],
+  };
+  const [cls, label] = map[c.state] || ["bad", c.state];
+  setBadge(cls, label);
+
+  const d = $("badge-detail");
+  d.replaceChildren();
+  d.append(detailRow("Last connected", c.lastConnectedAt ? fmtTime(c.lastConnectedAt) : "never"));
+  d.append(detailRow("Reconnects", String(c.reconnectCount)));
+  if (c.lastError) {
+    const e = document.createElement("div");
+    e.className = "err";
+    e.textContent = c.lastError;
+    d.append(e);
+  }
+}
+
+function setBadge(cls, label) {
+  $("badge-dot").className = "dot " + cls;
+  $("badge-label").textContent = label;
+}
+
+function detailRow(key, value) {
+  const row = document.createElement("div");
+  row.className = "row";
+  const k = document.createElement("span");
+  k.textContent = key;
+  const v = document.createElement("span");
+  v.textContent = value;
+  row.append(k, v);
+  return row;
+}
+
+// --- tasks ------------------------------------------------------------------
+
+function renderTasks(tasks, events) {
+  latestTasks = tasks;
+  latestEvents = events;
+  const wrap = $("tasks");
+  $("tasks-count").textContent = tasks.length ? `(${tasks.length})` : "";
+  $("tasks-empty").hidden = tasks.length > 0;
+  wrap.querySelectorAll(".task").forEach((n) => n.remove());
+  for (const t of tasks) wrap.append(taskNode(t, events));
+}
+
+function taskNode(t, events) {
+  const open = expanded.has(t.taskId);
+  const node = document.createElement("div");
+  node.className = "task" + (open ? " open" : "");
+
+  const head = document.createElement("div");
+  head.className = "task-head";
+  head.addEventListener("click", () => {
+    if (expanded.has(t.taskId)) expanded.delete(t.taskId);
+    else expanded.add(t.taskId);
+    renderTasks(latestTasks, latestEvents);
+  });
+
+  const main = document.createElement("div");
+  main.className = "task-main";
+
+  const title = document.createElement("div");
+  title.className = "task-title";
+  const owner = document.createElement("span");
+  owner.className = "task-owner";
+  owner.textContent = t.ownerEmail || "unknown owner";
+  title.append(owner);
+  for (const slug of t.projectSlugs) {
+    const s = document.createElement("span");
+    s.className = "slug";
+    s.textContent = slug;
+    title.append(s);
+  }
+  if (t.projectSlugs.length === 0) {
+    const s = document.createElement("span");
+    s.className = "slug";
+    s.textContent = "scratchpad";
+    title.append(s);
+  }
+  main.append(title);
+
+  const meta = document.createElement("div");
+  meta.className = "task-meta";
+  const bits = [
+    t.status || "—",
+    t.ageMs != null ? `up ${fmtDuration(t.ageMs)}` : null,
+    t.memoryBytes != null ? fmtBytes(t.memoryBytes) : null,
+  ].filter(Boolean);
+  meta.append(document.createTextNode(bits.join(" · ") + "  "));
+  const id = document.createElement("span");
+  id.className = "task-id";
+  id.textContent = t.taskId;
+  meta.append(id);
+  main.append(meta);
+
+  const chev = document.createElement("span");
+  chev.className = "chev";
+  chev.textContent = "›";
+
+  head.append(main);
+  // Stop — pause a running task's containers (resumable). Owner-agnostic: the
+  // operator controls what runs on their machine (ADR-028).
+  if (t.status === "running" || t.status === "starting") {
+    const stop = document.createElement("button");
+    stop.className = "link-btn danger task-stop";
+    stop.type = "button";
+    stop.textContent = "Stop";
+    stop.addEventListener("click", async (ev) => {
+      ev.stopPropagation();
+      if (!confirm(`Stop this task?\n\n${t.taskId}\n\nContainers stop (freeing memory); the worktree is kept so it can be resumed.`)) return;
+      stop.disabled = true;
+      stop.textContent = "Stopping…";
+      try {
+        const r = await postJSON("/api/tasks/stop", { taskId: t.taskId });
+        if (!r.ok) alert(`Stop failed: ${r.message || "unknown error"}`);
+      } catch {
+        /* poll re-syncs truth */
+      }
+      await poll();
+    });
+    head.append(stop);
+  }
+  head.append(chev);
+  node.append(head);
+
+  if (open) {
+    const ev = document.createElement("div");
+    ev.className = "task-events";
+    const list = document.createElement("ol");
+    const mine = events.filter((e) => e.taskId === t.taskId);
+    if (mine.length === 0) {
+      const li = document.createElement("li");
+      li.className = "empty";
+      li.textContent = "No events for this task.";
+      list.append(li);
+    } else {
+      for (const e of mine) {
+        const li = document.createElement("li");
+        li.textContent = `${e.kind} — ${fmtTime(e.ts)}${e.detail ? " · " + e.detail : ""}`;
+        list.append(li);
+      }
+    }
+    ev.append(list);
+    node.append(ev);
+  }
+  return node;
+}
+
+// --- events -----------------------------------------------------------------
+
+function renderEvents(events) {
+  latestEvents = events;
+  const ol = $("events");
+  ol.querySelectorAll("li:not(.empty)").forEach((n) => n.remove());
+  $("events-empty").hidden = events.length > 0;
+  for (const e of events) {
+    const li = document.createElement("li");
+    const kind = document.createElement("span");
+    kind.className = "ev-kind " + (KIND_CLASS[e.kind] || "");
+    kind.textContent = e.kind;
+    const time = document.createElement("span");
+    time.className = "ev-time";
+    time.textContent = fmtAgo(e.ts);
+    const task = document.createElement("span");
+    task.className = "ev-task";
+    task.textContent = e.taskId;
+    li.append(kind, time, task);
+    ol.append(li);
+  }
+}
+
+// --- engines ----------------------------------------------------------------
+
+async function postJSON(path, body) {
+  const res = await fetch(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(`${path} → ${res.status}`);
+  return res.json();
+}
+
+function engineByKind(kind) {
+  return (latestEngines?.catalog || []).find((e) => e.kind === kind) || null;
+}
+
+function monogram(label) {
+  const m = document.createElement("span");
+  m.className = "engine-mono";
+  m.textContent = (label || "?").trim().charAt(0).toUpperCase();
+  return m;
+}
+
+function renderEngines(data) {
+  if (data) latestEngines = data;
+  const wrap = $("engines");
+  if (!wrap) return;
+  const catalog = latestEngines?.catalog || [];
+  const statuses = latestEngines?.statuses || {};
+  const connected = catalog.filter((e) => statuses[e.kind]);
+
+  $("engines-count").textContent = connected.length ? `(${connected.length})` : "";
+  $("engines-empty").hidden = connected.length > 0;
+  wrap.querySelectorAll(".engine-card").forEach((n) => n.remove());
+  for (const e of connected) wrap.append(engineCard(e));
+}
+
+function engineCard(e) {
+  const card = document.createElement("div");
+  card.className = "engine-card";
+
+  const head = document.createElement("div");
+  head.className = "engine-head";
+  head.append(monogram(e.label));
+  const meta = document.createElement("div");
+  meta.className = "engine-meta";
+  const name = document.createElement("div");
+  name.className = "engine-name";
+  name.textContent = e.label;
+  const sub = document.createElement("div");
+  sub.className = "engine-sub ok";
+  sub.textContent = "Connected";
+  meta.append(name, sub);
+  head.append(meta);
+  card.append(head);
+
+  // ADR-076: multiple accounts per engine. Rendered for account-model kinds
+  // (claude/codex/opencode). Extra accounts can be removed; claude/codex can
+  // add one by pasting a token / API key.
+  const accounts = (latestEngines?.accounts || {})[e.kind] || [];
+  const extras = accounts.filter((a) => !a.isDefault);
+  const canAdd = e.kind === "claude" || e.kind === "codex";
+  if (accounts.length > 0 && (extras.length > 0 || canAdd)) {
+    card.append(engineAccounts(e, accounts, canAdd));
+  }
+
+  const btn = document.createElement("button");
+  btn.className = "link-btn danger";
+  btn.type = "button";
+  btn.textContent = "Disconnect";
+  btn.addEventListener("click", async () => {
+    btn.disabled = true;
+    btn.textContent = "Disconnecting…";
+    try {
+      await postJSON("/api/engines/disconnect", { kind: e.kind });
+    } catch {
+      /* poll re-syncs truth */
+    }
+    await poll();
+  });
+  card.append(btn);
+  return card;
+}
+
+/** Accounts sub-panel for an engine card (ADR-076). */
+function engineAccounts(e, accounts, canAdd) {
+  const box = document.createElement("div");
+  box.className = "engine-accounts";
+
+  const title = document.createElement("div");
+  title.className = "engine-sub";
+  title.textContent = `Accounts (${accounts.length}) — rotated automatically`;
+  box.append(title);
+
+  for (const a of accounts) {
+    const row = document.createElement("div");
+    row.className = "engine-account-row";
+    const name = document.createElement("span");
+    name.textContent = a.isDefault ? `${a.label} (default)` : a.label;
+    row.append(name);
+    if (!a.isDefault) {
+      const rm = document.createElement("button");
+      rm.className = "link-btn danger";
+      rm.type = "button";
+      rm.textContent = "Remove";
+      rm.addEventListener("click", async () => {
+        rm.disabled = true;
+        try {
+          await postJSON("/api/engines/accounts/remove", { id: a.id });
+        } catch {
+          /* poll re-syncs truth */
+        }
+        await poll();
+      });
+      row.append(rm);
+    }
+    box.append(row);
+  }
+
+  if (canAdd) {
+    const add = document.createElement("button");
+    add.className = "link-btn";
+    add.type = "button";
+    add.textContent = "+ Add account";
+    add.addEventListener("click", () => openAddAccount(e));
+    box.append(add);
+  }
+  return box;
+}
+
+/**
+ * Add-account modal (ADR-076). Replaces the old back-to-back window.prompt()
+ * flow: a single-line prompt hid what you pasted and silently truncated long
+ * `claude setup-token` values, which then surfaced downstream as a 401 on the
+ * rotated account. A real form (visible multi-line textarea + inline
+ * validation) makes a bad paste obvious before it's saved.
+ */
+function openAddAccount(e) {
+  $("engine-modal-title").textContent = `Add ${e.label} account`;
+  const body = $("engine-modal-body");
+  body.replaceChildren();
+  body.append(addAccountForm(e));
+  openModal();
+}
+
+function addAccountForm(e) {
+  const isToken = e.authMode === "token-command"; // Claude: browser sign-in
+  const form = document.createElement("div");
+  form.className = "engine-setup";
+
+  const note = document.createElement("p");
+  note.className = "setup-note";
+  note.textContent = isToken
+    ? "Sign in with the account you want to add — a browser opens to authorize Claude and the token is captured here automatically. This account rotates in automatically when another Claude account hits its limit."
+    : "Paste an OpenAI API key (starts with sk-…). This account rotates in automatically when another account of this kind hits its limit.";
+  form.append(note);
+
+  const labelField = document.createElement("div");
+  labelField.className = "field";
+  const labelInput = document.createElement("input");
+  labelInput.type = "text";
+  labelInput.className = "text-input";
+  labelInput.placeholder = "Label (e.g. work)";
+  labelInput.autocomplete = "off";
+  labelInput.spellcheck = false;
+  labelField.append(labelInput);
+  form.append(labelField);
+
+  const status = document.createElement("div");
+  status.className = "setup-status";
+  const log = document.createElement("pre");
+  log.className = "log";
+  log.hidden = true;
+  const pushLine = (line) => {
+    log.textContent += (log.textContent ? "\n" : "") + line;
+    log.scrollTop = log.scrollHeight;
+  };
+  const fail = (msg) => {
+    status.className = "setup-status err";
+    status.textContent = msg;
+  };
+
+  const actions = document.createElement("div");
+  actions.className = "setup-actions";
+
+  // --- Automatic sign-in (token-command / Claude) --------------------------
+  if (isToken) {
+    const signIn = document.createElement("button");
+    signIn.className = "btn";
+    signIn.type = "button";
+    signIn.textContent = "Sign in with Claude";
+    signIn.addEventListener("click", async () => {
+      const label = labelInput.value.trim();
+      if (!label) return fail("Give the account a label first.");
+      signIn.disabled = true;
+      signIn.textContent = "Signing in…";
+      status.className = "setup-status";
+      status.textContent = "A browser will open to authorize Claude…";
+      log.hidden = false;
+      log.textContent = "";
+      const result = await runStream(
+        "/api/engines/accounts/connect",
+        { kind: e.kind, label },
+        pushLine,
+      );
+      if (result.ok) {
+        await poll();
+        closeModal();
+        return;
+      }
+      signIn.disabled = false;
+      signIn.textContent = "Try again";
+      fail(result.message || "Sign-in failed.");
+    });
+    actions.append(signIn);
+  }
+
+  const cancel = document.createElement("button");
+  cancel.className = "link-btn";
+  cancel.type = "button";
+  cancel.textContent = "Cancel";
+  cancel.addEventListener("click", closeModal);
+  actions.append(cancel);
+  form.append(actions, status, log);
+
+  // --- Manual fallback: copyable command + paste box -----------------------
+  if (isToken) {
+    const or = document.createElement("p");
+    or.className = "setup-note setup-or";
+    or.textContent =
+      "Can't use the browser here? Run this in a terminal, then paste the token:";
+    form.append(or, copyRow("claude setup-token"));
+  }
+
+  const secretField = document.createElement("div");
+  secretField.className = "field";
+  const secretInput = document.createElement("textarea");
+  secretInput.className = "text-input token-area";
+  secretInput.rows = 3;
+  secretInput.placeholder = isToken ? "Claude token or API key" : "OpenAI API key";
+  secretInput.autocomplete = "off";
+  secretInput.spellcheck = false;
+  secretField.append(secretInput);
+  form.append(secretField);
+
+  const pasteActions = document.createElement("div");
+  pasteActions.className = "setup-actions";
+  const save = document.createElement("button");
+  save.className = isToken ? "link-btn" : "btn";
+  save.type = "button";
+  save.textContent = isToken ? "Add pasted token" : "Add account";
+  save.addEventListener("click", async () => {
+    const label = labelInput.value.trim();
+    const secret = secretInput.value.trim();
+    if (!label) return fail("Give the account a label.");
+    if (!secret) return fail("Paste a token or API key.");
+    // Mirrors the host-side check — a token with internal whitespace/newlines is
+    // a mangled paste, not a value; catch it here so it never becomes a 401.
+    if (/\s/.test(secret)) {
+      return fail("That value has spaces or line breaks — paste just the token.");
+    }
+    save.disabled = true;
+    save.textContent = "Adding…";
+    const payload =
+      e.kind === "claude"
+        ? { kind: e.kind, label, token: secret }
+        : { kind: e.kind, label, apiKey: secret };
+    let result;
+    try {
+      result = await postJSON("/api/engines/accounts/add", payload);
+    } catch {
+      result = { ok: false, message: "Couldn't reach the host." };
+    }
+    if (result && result.ok) {
+      await poll();
+      closeModal();
+      return;
+    }
+    save.disabled = false;
+    save.textContent = isToken ? "Add pasted token" : "Add account";
+    fail((result && result.message) || "Couldn't add the account.");
+  });
+  pasteActions.append(save);
+  form.append(pasteActions);
+
+  setTimeout(() => labelInput.focus(), 0);
+  return form;
+}
+
+/** A monospace command line with a Copy button (writes to the clipboard). */
+function copyRow(cmd) {
+  const row = document.createElement("div");
+  row.className = "copy-row";
+  const code = document.createElement("code");
+  code.className = "copy-cmd";
+  code.textContent = cmd;
+  const btn = document.createElement("button");
+  btn.className = "link-btn";
+  btn.type = "button";
+  btn.textContent = "Copy";
+  btn.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(cmd);
+      btn.textContent = "Copied";
+      setTimeout(() => {
+        btn.textContent = "Copy";
+      }, 1500);
+    } catch {
+      // Clipboard API blocked (non-secure context) — select the text so the
+      // user can copy it manually.
+      const range = document.createRange();
+      range.selectNodeContents(code);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  });
+  row.append(code, btn);
+  return row;
+}
+
+// --- add-engine modal -------------------------------------------------------
+
+function openModal() {
+  $("engine-modal").hidden = false;
+}
+function closeModal() {
+  $("engine-modal").hidden = true;
+  $("engine-modal-body").replaceChildren();
+  $("engine-modal-title").textContent = "Add engine";
+}
+
+function openAddEngine() {
+  $("engine-modal-title").textContent = "Add engine";
+  const body = $("engine-modal-body");
+  body.replaceChildren();
+
+  const catalog = latestEngines?.catalog || [];
+  const statuses = latestEngines?.statuses || {};
+  const available = catalog.filter((e) => !statuses[e.kind]);
+
+  if (available.length === 0) {
+    const p = document.createElement("p");
+    p.className = "empty";
+    p.textContent = "All engines are connected.";
+    body.append(p);
+    openModal();
+    return;
+  }
+
+  const list = document.createElement("div");
+  list.className = "engine-picker";
+  for (const e of available) {
+    const row = document.createElement("button");
+    row.className = "engine-pick";
+    row.type = "button";
+    row.append(monogram(e.label));
+    const meta = document.createElement("div");
+    meta.className = "engine-meta";
+    const name = document.createElement("div");
+    name.className = "engine-name";
+    name.textContent = e.label;
+    if (e.notes) {
+      const sub = document.createElement("div");
+      sub.className = "engine-sub";
+      sub.textContent = e.notes;
+      meta.append(name, sub);
+    } else {
+      meta.append(name);
+    }
+    row.append(meta);
+    const chev = document.createElement("span");
+    chev.className = "chev";
+    chev.textContent = "›";
+    row.append(chev);
+    row.addEventListener("click", () => setupEngine(e));
+    list.append(row);
+  }
+  body.append(list);
+  openModal();
+}
+
+function setupEngine(e) {
+  $("engine-modal-title").textContent = `Connect ${e.label}`;
+  const body = $("engine-modal-body");
+  body.replaceChildren();
+
+  if (e.authMode === "api-key") {
+    body.append(apiKeyForm(e));
+  } else if (e.authMode === "external-login") {
+    body.append(externalLoginForm(e));
+  } else {
+    body.append(commandForm(e));
+  }
+
+  const back = document.createElement("button");
+  back.className = "link-btn back";
+  back.type = "button";
+  back.textContent = "‹ Back";
+  back.addEventListener("click", openAddEngine);
+  body.append(back);
+}
+
+/** api-key mode (Cursor): a masked field + Save + "get a key" link. */
+function apiKeyForm(e) {
+  const form = document.createElement("div");
+  form.className = "engine-setup";
+
+  if (e.notes) {
+    const note = document.createElement("p");
+    note.className = "setup-note";
+    note.textContent = e.notes;
+    form.append(note);
+  }
+
+  const field = document.createElement("div");
+  field.className = "field";
+  const input = document.createElement("input");
+  input.type = "password";
+  input.className = "text-input";
+  input.placeholder = `${e.label} API key`;
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  field.append(input);
+  form.append(field);
+
+  const status = document.createElement("div");
+  status.className = "setup-status";
+  form.append(status);
+
+  const actions = document.createElement("div");
+  actions.className = "setup-actions";
+  const save = document.createElement("button");
+  save.className = "btn";
+  save.type = "button";
+  save.textContent = "Save";
+  save.addEventListener("click", async () => {
+    const apiKey = input.value.trim();
+    if (!apiKey) {
+      status.className = "setup-status err";
+      status.textContent = "Paste a key first.";
+      return;
+    }
+    save.disabled = true;
+    save.textContent = "Saving…";
+    const result = await runConnect({ kind: e.kind, apiKey });
+    if (result.ok) {
+      await poll();
+      closeModal();
+    } else {
+      save.disabled = false;
+      save.textContent = "Save";
+      status.className = "setup-status err";
+      status.textContent = result.message || "Couldn't save the key.";
+    }
+  });
+  actions.append(save);
+  if (e.getKeyUrl) {
+    const link = document.createElement("a");
+    link.className = "link-btn";
+    link.href = e.getKeyUrl;
+    link.target = "_blank";
+    link.rel = "noreferrer";
+    link.textContent = "Get a key";
+    actions.append(link);
+  }
+  form.append(actions);
+  return form;
+}
+
+/**
+ * external-login mode (OpenCode): the engine's own CLI is an interactive TUI we
+ * can't drive here, so the owner runs it in their terminal and we just detect
+ * the credential it wrote. Install (if the CLI is missing) → run the login
+ * command → "Check connection".
+ */
+function externalLoginForm(e) {
+  const form = document.createElement("div");
+  form.className = "engine-setup";
+
+  if (e.notes) {
+    const note = document.createElement("p");
+    note.className = "setup-note";
+    note.textContent = e.notes;
+    form.append(note);
+  }
+
+  const status = document.createElement("div");
+  status.className = "setup-status";
+  const log = document.createElement("pre");
+  log.className = "log";
+  log.hidden = true;
+  const pushLine = (line) => {
+    log.textContent += (log.textContent ? "\n" : "") + line;
+    log.scrollTop = log.scrollHeight;
+  };
+
+  const cliMissing =
+    !!latestEngines?.cli && latestEngines.cli[e.kind] === false && !!e.installHint;
+
+  // Step 1 (only when the CLI is absent): install it.
+  const installWrap = document.createElement("div");
+  if (cliMissing) {
+    const installNote = document.createElement("p");
+    installNote.className = "setup-note";
+    installNote.textContent = `The ${e.label} CLI isn't installed on this Mac. Install it with:`;
+    const installCmd = document.createElement("pre");
+    installCmd.className = "log";
+    installCmd.textContent = e.installHint;
+    const install = document.createElement("button");
+    install.className = "btn";
+    install.type = "button";
+    install.textContent = "Install";
+    install.addEventListener("click", async () => {
+      install.disabled = true;
+      install.textContent = "Installing…";
+      status.className = "setup-status";
+      status.textContent = "Running the installer…";
+      log.hidden = false;
+      log.textContent = "";
+      const result = await runInstall({ kind: e.kind }, pushLine);
+      if (result.ok) {
+        await poll();
+        installWrap.hidden = true;
+        status.className = "setup-status";
+        status.textContent = "Installed. Now sign in from your terminal below.";
+      } else {
+        install.disabled = false;
+        install.textContent = "Try again";
+        status.className = "setup-status err";
+        status.textContent = result.message || "Install failed.";
+      }
+    });
+    installWrap.append(installNote, installCmd, install);
+  } else {
+    installWrap.hidden = true;
+  }
+  form.append(installWrap);
+
+  // Step 2: the command the owner runs in their own terminal.
+  if (e.loginCmd) {
+    const runNote = document.createElement("p");
+    runNote.className = "setup-note";
+    runNote.textContent = "Run this in your terminal to sign in:";
+    const cmd = document.createElement("pre");
+    cmd.className = "log";
+    cmd.textContent = e.loginCmd;
+    form.append(runNote, cmd);
+  }
+
+  // Step 3: re-detect what login wrote.
+  const actions = document.createElement("div");
+  actions.className = "setup-actions";
+  const check = document.createElement("button");
+  check.className = "btn";
+  check.type = "button";
+  check.textContent = "Check connection";
+  check.addEventListener("click", async () => {
+    check.disabled = true;
+    check.textContent = "Checking…";
+    status.className = "setup-status";
+    status.textContent = "Looking for your credentials…";
+    const result = await runConnect({ kind: e.kind });
+    if (result.ok) {
+      await poll();
+      closeModal();
+    } else {
+      check.disabled = false;
+      check.textContent = "Check again";
+      status.className = "setup-status err";
+      status.textContent = result.message || "Not signed in yet.";
+    }
+  });
+  actions.append(check);
+  form.append(actions, status, log);
+  return form;
+}
+
+/** token/login mode: a Connect button + a live log; Claude adds a paste link. */
+function commandForm(e) {
+  const form = document.createElement("div");
+  form.className = "engine-setup";
+
+  if (e.notes) {
+    const note = document.createElement("p");
+    note.className = "setup-note";
+    note.textContent = e.notes;
+    form.append(note);
+  }
+
+  const status = document.createElement("div");
+  status.className = "setup-status";
+  const log = document.createElement("pre");
+  log.className = "log";
+  log.hidden = true;
+
+  const pushLine = (line) => {
+    log.textContent += (log.textContent ? "\n" : "") + line;
+    log.scrollTop = log.scrollHeight;
+  };
+
+  const actions = document.createElement("div");
+  actions.className = "setup-actions";
+  const connect = document.createElement("button");
+  connect.className = "btn";
+  connect.type = "button";
+  connect.textContent = "Connect";
+  connect.addEventListener("click", async () => {
+    connect.disabled = true;
+    connect.textContent = "Connecting…";
+    status.className = "setup-status";
+    status.textContent =
+      e.authMode === "token-command"
+        ? "Your browser will open to authorize…"
+        : "Your browser will open to sign in…";
+    log.hidden = false;
+    log.textContent = "";
+    const result = await runConnect({ kind: e.kind }, pushLine);
+    if (result.ok) {
+      await poll();
+      closeModal();
+    } else {
+      connect.disabled = false;
+      connect.textContent = "Try again";
+      status.className = "setup-status err";
+      status.textContent = result.message || "Connect failed.";
+    }
+  });
+  actions.append(connect);
+
+  // CLI missing → offer the pinned installer first, chaining into connect on
+  // success. The command is shown verbatim; its output streams into the log.
+  const cliMissing =
+    !!latestEngines?.cli && latestEngines.cli[e.kind] === false && !!e.installHint;
+  if (cliMissing) {
+    connect.hidden = true;
+    const installNote = document.createElement("p");
+    installNote.className = "setup-note";
+    installNote.textContent = `The ${e.label} CLI isn't installed on this Mac. Install it with:`;
+    const installCmd = document.createElement("pre");
+    installCmd.className = "log";
+    installCmd.textContent = e.installHint;
+    const install = document.createElement("button");
+    install.className = "btn";
+    install.type = "button";
+    install.textContent = "Install & connect";
+    install.addEventListener("click", async () => {
+      install.disabled = true;
+      install.textContent = "Installing…";
+      status.className = "setup-status";
+      status.textContent = "Running the installer…";
+      log.hidden = false;
+      log.textContent = "";
+      const result = await runInstall({ kind: e.kind }, pushLine);
+      if (result.ok) {
+        await poll();
+        install.hidden = true;
+        connect.hidden = false;
+        connect.click();
+      } else {
+        install.disabled = false;
+        install.textContent = "Try again";
+        status.className = "setup-status err";
+        status.textContent = result.message || "Install failed.";
+      }
+    });
+    actions.prepend(install);
+    form.append(installNote, installCmd);
+  }
+
+  form.append(actions, status, log);
+
+  // Manual paste fallback for when the browser flow isn't possible: Claude
+  // takes a token or API key (one box, classified server-side); login-command
+  // engines with an apiKeyHint (Codex, Grok) take an API key.
+  const isToken = e.authMode === "token-command";
+  if (isToken || e.apiKeyHint) {
+    const saveLabel = isToken ? "Save token" : "Save key";
+    const pasteToggle = document.createElement("button");
+    pasteToggle.className = "link-btn";
+    pasteToggle.type = "button";
+    pasteToggle.textContent = isToken
+      ? "Paste a token or API key instead"
+      : "Use an API key instead";
+    const pasteWrap = document.createElement("div");
+    pasteWrap.className = "engine-setup";
+    pasteWrap.hidden = true;
+    const pInput = document.createElement("input");
+    pInput.type = "password";
+    pInput.className = "text-input";
+    pInput.placeholder = e.apiKeyHint || "sk-ant-…";
+    pInput.autocomplete = "off";
+    pInput.spellcheck = false;
+    const pField = document.createElement("div");
+    pField.className = "field";
+    pField.append(pInput);
+    const pStatus = document.createElement("div");
+    pStatus.className = "setup-status";
+    const pSave = document.createElement("button");
+    pSave.className = "btn";
+    pSave.type = "button";
+    pSave.textContent = saveLabel;
+    pSave.addEventListener("click", async () => {
+      const value = pInput.value.trim();
+      if (!value) {
+        pStatus.className = "setup-status err";
+        pStatus.textContent = isToken ? "Paste a token first." : "Paste a key first.";
+        return;
+      }
+      pSave.disabled = true;
+      pSave.textContent = "Saving…";
+      const body = isToken
+        ? { kind: e.kind, pastedToken: value }
+        : { kind: e.kind, apiKey: value };
+      const result = await runConnect(body);
+      if (result.ok) {
+        await poll();
+        closeModal();
+      } else {
+        pSave.disabled = false;
+        pSave.textContent = saveLabel;
+        pStatus.className = "setup-status err";
+        pStatus.textContent = result.message || "Couldn't save it.";
+      }
+    });
+    const pActions = document.createElement("div");
+    pActions.className = "setup-actions";
+    pActions.append(pSave);
+    if (e.apiKeyUrl) {
+      const link = document.createElement("a");
+      link.className = "link-btn";
+      link.href = e.apiKeyUrl;
+      link.target = "_blank";
+      link.rel = "noreferrer";
+      link.textContent = "Get a key";
+      pActions.append(link);
+    }
+    pasteWrap.append(pField, pActions, pStatus);
+    pasteToggle.addEventListener("click", () => {
+      pasteWrap.hidden = !pasteWrap.hidden;
+    });
+    form.append(pasteToggle, pasteWrap);
+  }
+  return form;
+}
+
+/** POST /api/engines/connect and consume the NDJSON stream. */
+function runConnect(body, onLine) {
+  return runStream("/api/engines/connect", body, onLine);
+}
+
+/** POST /api/engines/install and consume the NDJSON stream. */
+function runInstall(body, onLine) {
+  return runStream("/api/engines/install", body, onLine);
+}
+
+/**
+ * POST an NDJSON-streaming endpoint: `{line}` frames feed onLine; the final
+ * `{done,ok,message}` frame is the result.
+ */
+async function runStream(path, body, onLine) {
+  let res;
+  try {
+    res = await fetch(path, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body),
+    });
+  } catch (err) {
+    return { ok: false, message: String(err) };
+  }
+  if (!res.ok || !res.body) {
+    return { ok: false, message: `request failed (${res.status})` };
+  }
+  const reader = res.body.getReader();
+  const dec = new TextDecoder();
+  let buf = "";
+  let result = null;
+  for (;;) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buf += dec.decode(value, { stream: true });
+    let nl;
+    while ((nl = buf.indexOf("\n")) >= 0) {
+      const raw = buf.slice(0, nl);
+      buf = buf.slice(nl + 1);
+      if (!raw.trim()) continue;
+      let msg;
+      try {
+        msg = JSON.parse(raw);
+      } catch {
+        continue;
+      }
+      if (typeof msg.line === "string" && onLine) onLine(msg.line);
+      if (msg.done) result = { ok: !!msg.ok, message: msg.message || "" };
+    }
+  }
+  return result || { ok: false, message: "Connection ended unexpectedly." };
+}
+
+// --- formatting -------------------------------------------------------------
+
+function fmtDuration(ms) {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ${m % 60}m`;
+  const d = Math.floor(h / 24);
+  return `${d}d ${h % 24}h`;
+}
+
+function fmtAgo(epochMs) {
+  const diff = Date.now() - epochMs;
+  if (diff < 60_000) return "just now";
+  return fmtDuration(diff) + " ago";
+}
+
+function fmtTime(epochMs) {
+  return new Date(epochMs).toLocaleString();
+}
+
+function fmtBytes(n) {
+  if (n < 1024) return `${n} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let v = n / 1024;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i += 1;
+  }
+  return `${v.toFixed(1)} ${units[i]}`;
+}
+
+// --- wire up ----------------------------------------------------------------
+
+$("badge").addEventListener("click", () => {
+  const detail = $("badge-detail");
+  const show = detail.hidden;
+  detail.hidden = !show;
+  $("badge").setAttribute("aria-expanded", String(show));
+});
+
+$("add-engine").addEventListener("click", openAddEngine);
+$("engine-modal-close").addEventListener("click", closeModal);
+$("engine-modal").addEventListener("click", (e) => {
+  // Click the backdrop (not the dialog) to dismiss.
+  if (e.target === $("engine-modal")) closeModal();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && !$("engine-modal").hidden) closeModal();
+});
+
+poll();
+setInterval(poll, 2000);