@runuai/host 0.8.4 → 0.8.6

package/src/ui/types.ts

@@ -74,5 +74,28 @@ export type UserRow = z.infer<typeof UserRow>;
 export const UsersResponse = z.object({ users: z.array(UserRow) });
 export type UsersResponse = z.infer<typeof UsersResponse>;
 
+// GET /api/engines — the engine catalog + which are connected on this host.
+export const EngineCatalogEntry = z.object({
+  kind: z.enum(["claude", "codex", "kimi", "grok", "cursor"]),
+  label: z.string(),
+  authMode: z.enum(["token-command", "login-command", "api-key"]),
+  notes: z.string().nullable(),
+  getKeyUrl: z.string().nullable(),
+});
+export type EngineCatalogEntry = z.infer<typeof EngineCatalogEntry>;
+
+export const EnginesResponse = z.object({
+  catalog: z.array(EngineCatalogEntry),
+  statuses: z.record(z.boolean()), // kind → connected
+});
+export type EnginesResponse = z.infer<typeof EnginesResponse>;
+
+// POST /api/engines/disconnect — the disconnect result.
+export const EngineOpResponse = z.object({
+  ok: z.boolean(),
+  message: z.string().optional(),
+});
+export type EngineOpResponse = z.infer<typeof EngineOpResponse>;
+
 export const ErrorResponse = z.object({ error: z.string() });
 export type ErrorResponse = z.infer<typeof ErrorResponse>;

package/ui/app.js

@@ -7,6 +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
 
 const KIND_CLASS = {
   "task.created": "created",
@@ -23,18 +24,22 @@ async function getJSON(path) {
 
 async function poll() {
   try {
-    const [status, cloud, tasks, events] = await Promise.all([
+    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 =
-      `read-only · 127.0.0.1 · updated ${new Date().toLocaleTimeString()}`;
+      `127.0.0.1 · updated ${new Date().toLocaleTimeString()}`;
   } catch {
     setBadge("bad", "unreachable");
   }
@@ -216,6 +221,378 @@ function renderEvents(events) {
   }
 }
 
+// --- 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);
+
+  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;
+}
+
+// --- 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 {
+    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;
+}
+
+/** 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 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 }, (line) => {
+      log.textContent += (log.textContent ? "\n" : "") + line;
+      log.scrollTop = log.scrollHeight;
+    });
+    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);
+  form.append(actions, status, log);
+
+  // Claude: a manual paste fallback for when the browser flow isn't possible.
+  if (e.authMode === "token-command") {
+    const pasteToggle = document.createElement("button");
+    pasteToggle.className = "link-btn";
+    pasteToggle.type = "button";
+    pasteToggle.textContent = "Paste a token 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 = "sk-ant-oat…";
+    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 = "Save token";
+    pSave.addEventListener("click", async () => {
+      const pastedToken = pInput.value.trim();
+      if (!pastedToken) {
+        pStatus.className = "setup-status err";
+        pStatus.textContent = "Paste a token first.";
+        return;
+      }
+      pSave.disabled = true;
+      pSave.textContent = "Saving…";
+      const result = await runConnect({ kind: e.kind, pastedToken });
+      if (result.ok) {
+        await poll();
+        closeModal();
+      } else {
+        pSave.disabled = false;
+        pSave.textContent = "Save token";
+        pStatus.className = "setup-status err";
+        pStatus.textContent = result.message || "Couldn't save the token.";
+      }
+    });
+    const pActions = document.createElement("div");
+    pActions.className = "setup-actions";
+    pActions.append(pSave);
+    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: `{line}` frames feed
+ * onLine; the final `{done,ok,message}` frame is the result.
+ */
+async function runConnect(body, onLine) {
+  let res;
+  try {
+    res = await fetch("/api/engines/connect", {
+      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: `connect 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) {
@@ -260,5 +637,15 @@ $("badge").addEventListener("click", () => {
   $("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);

package/ui/index.html

@@ -32,6 +32,18 @@
         <dl class="kv" id="service-kv"></dl>
       </section>
 
+      <section class="panel">
+        <h2>
+          Engines <span class="count" id="engines-count"></span>
+          <button class="link-btn add-engine" id="add-engine" type="button">
+            + Add engine
+          </button>
+        </h2>
+        <div id="engines" class="engines">
+          <p class="empty" id="engines-empty">No engines connected.</p>
+        </div>
+      </section>
+
       <section class="panel">
         <h2>Active tasks <span class="count" id="tasks-count"></span></h2>
         <div id="tasks" class="tasks">
@@ -47,9 +59,32 @@
       </section>
 
       <footer class="foot">
-        <span id="foot-note">read-only · 127.0.0.1 · polls every 2s</span>
+        <span id="foot-note">127.0.0.1 · polls every 2s</span>
       </footer>
     </main>
+
+    <div class="modal-backdrop" id="engine-modal" hidden>
+      <div
+        class="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="engine-modal-title"
+      >
+        <div class="modal-head">
+          <h3 id="engine-modal-title">Add engine</h3>
+          <button
+            class="modal-close"
+            id="engine-modal-close"
+            type="button"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+        <div class="modal-body" id="engine-modal-body"></div>
+      </div>
+    </div>
+
     <script src="/app.js"></script>
   </body>
 </html>