@runuai/host 0.8.37 → 0.8.39

package/lib/engines.ts

@@ -414,6 +414,13 @@ export interface ConnectOptions {
   apiKey?: string;
   /** token-command manual fallback: a pasted token or API key (Claude). */
   pastedToken?: string;
+  /**
+   * ADR-076: when set, a token captured by the token-command flow (or pasted)
+   * is handed to this sink INSTEAD of being persisted as the default credential
+   * — used to register an EXTRA account. The sink's result becomes the connect
+   * result.
+   */
+  onToken?: (token: string) => ConnectResult | Promise<ConnectResult>;
 }
 
 export interface ConnectResult {
@@ -465,6 +472,9 @@ export async function connectEngine(
           message: "That doesn't look like a token. Paste just the value.",
         };
       }
+      // Adding an extra account? Route the pasted value to the sink instead of
+      // the default credential.
+      if (opts.onToken) return await opts.onToken(token);
       // One paste box serves both credential kinds — classify by prefix so an
       // `sk-ant-api…` platform key doesn't get stored as an OAuth token.
       upsertEnvLocal(
@@ -476,7 +486,7 @@ export async function connectEngine(
       );
       return { ok: true, message: `${d.label} connected.` };
     }
-    return runTokenCommand(kind, d.label, onLog, s);
+    return runTokenCommand(kind, d.label, onLog, s, opts.onToken);
   }
 
   return runLoginCommand(kind, d.label, onLog, s);
@@ -1028,6 +1038,7 @@ async function runTokenCommand(
   label: string,
   onLog: (line: string) => void,
   s: EngineSeams,
+  onToken?: (token: string) => ConnectResult | Promise<ConnectResult>,
 ): Promise<ConnectResult> {
   let child: ChildProcess;
   try {
@@ -1052,9 +1063,26 @@ async function runTokenCommand(
       resolve(r);
     };
     let raw = "";
+    let capturing = false;
     const forwarded = new Set<string>();
     const acked = new Set<string>();
     const saveToken = (token: string): void => {
+      // The token renders on several redraws (and again on exit) — capture once.
+      if (capturing) return;
+      capturing = true;
+      // ADR-076: adding an EXTRA account routes the captured token to the sink
+      // (which stores it as a separate account) instead of the default env.
+      if (onToken) {
+        Promise.resolve(onToken(token))
+          .then((r) => done(r, true))
+          .catch((err) =>
+            done(
+              { ok: false, message: err instanceof Error ? err.message : String(err) },
+              true,
+            ),
+          );
+        return;
+      }
       upsertEnvLocal("CLAUDE_CODE_OAUTH_TOKEN", token, s);
       done({ ok: true, message: `${label} connected.` }, true);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runuai/host",
-  "version": "0.8.37",
+  "version": "0.8.39",
   "description": "Uai host — runs ephemeral AI coding tasks in Docker on a machine you control.",
   "license": "MIT",
   "author": "Diogo Perillo <diogo.perillo@gmail.com>",

package/src/ui/server.ts

@@ -162,6 +162,8 @@ async function handle(
           return await handleEngineInstall(req, res);
         case "/api/engines/disconnect":
           return await handleEngineDisconnect(req, res, opts);
+        case "/api/engines/accounts/connect":
+          return await handleEngineAccountConnect(req, res, opts);
         case "/api/engines/accounts/add":
           return await handleEngineAccountAdd(req, res, opts);
         case "/api/engines/accounts/remove":
@@ -357,6 +359,58 @@ async function handleEngineAccountAdd(
   });
 }
 
+/**
+ * POST /api/engines/accounts/connect `{kind, label}` → run the engine's
+ * token-command sign-in (streamed NDJSON exactly like /api/engines/connect) and
+ * store the captured token as an EXTRA account (ADR-076) rather than the default
+ * credential. Only meaningful for token-command kinds (Claude); the browser
+ * OAuth authorizes whichever account you sign in with, so run it signed-out /
+ * incognito for the browser to prompt for the second account.
+ */
+async function handleEngineAccountConnect(
+  req: IncomingMessage,
+  res: ServerResponse,
+  opts: UiServerOptions,
+): Promise<void> {
+  const body = await readJsonBody(req);
+  const kind = body?.kind;
+  if (!isEngineKind(kind)) {
+    return sendError(res, 400, "unknown or missing engine kind");
+  }
+  const label = typeof body?.label === "string" ? body.label.trim() : "";
+  if (!label) {
+    return sendError(res, 400, "give the account a label");
+  }
+
+  res.writeHead(200, {
+    "content-type": "application/x-ndjson; charset=utf-8",
+    "cache-control": "no-store",
+  });
+  const emit = (obj: unknown): void => {
+    res.write(`${JSON.stringify(obj)}\n`);
+  };
+
+  let result: { ok: boolean; message: string };
+  try {
+    result = await connectEngine(
+      kind,
+      { onToken: (token) => addEngineAccount(kind, label, { token }) },
+      (line) => emit({ line }),
+    );
+  } catch (err) {
+    result = {
+      ok: false,
+      message: err instanceof Error ? err.message : "sign-in failed",
+    };
+  }
+  if (result.ok) {
+    opts.readvertise?.();
+    void ensureStandardImage();
+  }
+  emit({ done: true, ok: result.ok, message: result.message });
+  res.end();
+}
+
 /** POST /api/engines/accounts/remove `{id}` → forget an EXTRA account. */
 async function handleEngineAccountRemove(
   req: IncomingMessage,

package/ui/app.js

@@ -368,33 +368,201 @@ function engineAccounts(e, accounts, canAdd) {
     add.className = "link-btn";
     add.type = "button";
     add.textContent = "+ Add account";
-    add.addEventListener("click", () => void addAccountFlow(e));
+    add.addEventListener("click", () => openAddAccount(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 */
+/**
+ * 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);
   }
-  await poll();
+
+  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 -------------------------------------------------------

package/ui/style.css

@@ -604,6 +604,39 @@ code,
   border-color: var(--fg-muted);
 }
 
+/* Add-account token field: long secrets must be fully visible (no truncation)
+   and wrap so a bad paste is obvious before saving. */
+textarea.token-area {
+  resize: vertical;
+  min-height: 3.2rem;
+  line-height: 1.35;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+/* Copyable command row (e.g. `claude setup-token`) + Copy button. */
+.copy-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.copy-cmd {
+  flex: 1;
+  padding: 0.45rem 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono);
+  font-size: 0.85rem;
+  word-break: break-all;
+}
+
+.setup-or {
+  margin-top: 0.4rem;
+}
+
 .setup-actions {
   display: flex;
   align-items: center;