@runuai/host 0.8.37 → 0.8.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runuai/host",
-  "version": "0.8.37",
+  "version": "0.8.38",
   "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/ui/app.js

@@ -368,33 +368,120 @@ 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 =
+/**
+ * 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 form = document.createElement("div");
+  form.className = "engine-setup";
+
+  const note = document.createElement("p");
+  note.className = "setup-note";
+  note.textContent =
     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();
+      ? "Paste a token from `claude setup-token` (a long value, usually starting with sk-ant-oat…) or an API key. 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 secretField = document.createElement("div");
+  secretField.className = "field";
+  const secretInput = document.createElement("textarea");
+  secretInput.className = "text-input token-area";
+  secretInput.rows = 3;
+  secretInput.placeholder =
+    e.kind === "claude" ? "Claude token or API key" : "OpenAI API key";
+  secretInput.autocomplete = "off";
+  secretInput.spellcheck = false;
+  secretField.append(secretInput);
+  form.append(secretField);
+
+  const status = document.createElement("div");
+  status.className = "setup-status";
+  form.append(status);
+
+  const fail = (msg) => {
+    status.className = "setup-status err";
+    status.textContent = msg;
+  };
+
+  const actions = document.createElement("div");
+  actions.className = "setup-actions";
+  const save = document.createElement("button");
+  save.className = "btn";
+  save.type = "button";
+  save.textContent = "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 = "Add account";
+    fail((result && result.message) || "Couldn't add the account.");
+  });
+  actions.append(save);
+
+  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);
+  setTimeout(() => labelInput.focus(), 0);
+  return form;
 }
 
 // --- add-engine modal -------------------------------------------------------

package/ui/style.css

@@ -604,6 +604,16 @@ 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;
+}
+
 .setup-actions {
   display: flex;
   align-items: center;