@runuai/host 0.8.34 → 0.8.36

package/ui/app.js

@@ -7,7 +7,7 @@ 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 } from /api/engines
+let latestEngines = null; // { catalog, statuses, cli, accounts } from /api/engines
 
 const KIND_CLASS = {
   "task.created": "created",
@@ -300,6 +300,16 @@ function engineCard(e) {
   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";
@@ -318,6 +328,75 @@ function engineCard(e) {
   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", () => void addAccountFlow(e));
+    box.append(add);
+  }
+  return box;
+}
+
+/** Minimal add-account flow: prompt for a label + a token/API key, then POST. */
+async function addAccountFlow(e) {
+  const label = window.prompt(`Label for the new ${e.label} account (e.g. "work"):`);
+  if (!label) return;
+  const secretPrompt =
+    e.kind === "claude"
+      ? "Paste a Claude token (run `claude setup-token`) or an API key:"
+      : "Paste an OpenAI API key:";
+  const secret = window.prompt(secretPrompt);
+  if (!secret) return;
+  const body =
+    e.kind === "claude"
+      ? { kind: e.kind, label, token: secret }
+      : { kind: e.kind, label, apiKey: secret };
+  try {
+    const res = await postJSON("/api/engines/accounts/add", body);
+    if (res && res.ok === false && res.message) window.alert(res.message);
+  } catch {
+    /* poll re-syncs truth */
+  }
+  await poll();
+}
+
 // --- add-engine modal -------------------------------------------------------
 
 function openModal() {
@@ -386,6 +465,8 @@ function setupEngine(e) {
 
   if (e.authMode === "api-key") {
     body.append(apiKeyForm(e));
+  } else if (e.authMode === "external-login") {
+    body.append(externalLoginForm(e));
   } else {
     body.append(commandForm(e));
   }
@@ -465,6 +546,114 @@ function apiKeyForm(e) {
   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");

package/ui/style.css

@@ -377,12 +377,31 @@ code,
 .engine-card {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.75rem;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 0.6rem 0.9rem;
 }
 
+/* ADR-076: accounts sub-panel spans the full card width below the head/actions. */
+.engine-accounts {
+  flex-basis: 100%;
+  border-top: 1px solid var(--line);
+  padding-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.engine-account-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  font-size: 0.88rem;
+}
+
 .engine-head {
   display: flex;
   align-items: center;