@runuai/host 0.8.5 → 0.8.7

package/src/ui/server.ts

@@ -27,8 +27,18 @@ import { schema, type Db } from "../../lib/db";
 import { parsePreviewPortRuntimes } from "../../lib/preview-ports";
 import { getCloudState } from "../../lib/cloud-state";
 import { dockerCli } from "../../lib/docker-exec";
+import {
+  connectEngine,
+  disconnectEngine,
+  engineCatalog,
+  engineStatuses,
+  isEngineKind,
+} from "../../lib/engines";
+import { ensureStandardImage } from "../../lib/standard-image";
 import {
   CloudResponse,
+  EngineOpResponse,
+  EnginesResponse,
   EventsResponse,
   StatusResponse,
   TasksResponse,
@@ -55,6 +65,12 @@ export interface UiServerOptions {
   logPath: string;
   /** Best-effort container memory by compose project; null on failure. */
   taskMemory?: (composeProject: string) => Promise<number | null>;
+  /**
+   * Re-advertise host capabilities to the cloud (ADR-021). Wired from main.ts
+   * (`sendCapabilities`) so an engine connect/disconnect updates the cloud's
+   * task picker promptly. Optional (tests omit it).
+   */
+  readvertise?: () => void;
 }
 
 export interface UiServerHandle {
@@ -121,8 +137,20 @@ async function handle(
   opts: UiServerOptions,
 ): Promise<void> {
   const path = (req.url ?? "/").split("?")[0] ?? "/";
+  const method = req.method ?? "GET";
   try {
-    if (req.method !== "GET") {
+    // POST — engine connect/disconnect (the only writes; localhost-bound, so
+    // the loopback binding is the perimeter, ADR-028).
+    if (method === "POST") {
+      switch (path) {
+        case "/api/engines/connect":
+          return await handleEngineConnect(req, res, opts);
+        case "/api/engines/disconnect":
+          return await handleEngineDisconnect(req, res, opts);
+      }
+      return sendError(res, 404, `no such endpoint: ${path}`);
+    }
+    if (method !== "GET") {
       return sendError(res, 405, "method not allowed");
     }
     switch (path) {
@@ -144,6 +172,8 @@ async function handle(
         return sendJson(res, EventsResponse, eventsBody(opts));
       case "/api/users":
         return sendJson(res, UsersResponse, usersBody(opts));
+      case "/api/engines":
+        return sendJson(res, EnginesResponse, enginesBody());
     }
     if (path.startsWith("/api/")) {
       return sendError(res, 404, `no such endpoint: ${path}`);
@@ -154,6 +184,105 @@ async function handle(
   }
 }
 
+// --- engines ----------------------------------------------------------------
+
+function enginesBody(): EnginesResponse {
+  return { catalog: engineCatalog(), statuses: engineStatuses() };
+}
+
+/**
+ * POST /api/engines/connect `{kind, apiKey?, pastedToken?}`.
+ *
+ * Streams the connect as newline-delimited JSON (`application/x-ndjson`): each
+ * live CLI log line is `{"line":"…"}`, and a final `{"done":true,"ok":…,
+ * "message":"…"}` carries the result. api-key/paste connects emit no log lines
+ * and just the final frame. On success we re-advertise and kick a (best-effort)
+ * standard-image rebuild so a newly-configured engine's CLI gets installed.
+ */
+async function handleEngineConnect(
+  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 apiKey = typeof body?.apiKey === "string" ? body.apiKey : undefined;
+  const pastedToken =
+    typeof body?.pastedToken === "string" ? body.pastedToken : undefined;
+
+  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,
+      { apiKey, pastedToken },
+      (line) => emit({ line }),
+    );
+  } catch (err) {
+    result = {
+      ok: false,
+      message: err instanceof Error ? err.message : "connect failed",
+    };
+  }
+  if (result.ok) {
+    // Re-advertise so the cloud picker offers the engine; rebuild the image so
+    // an optional engine's CLI (kimi/grok/cursor) is installed. Best-effort.
+    opts.readvertise?.();
+    void ensureStandardImage();
+  }
+  emit({ done: true, ok: result.ok, message: result.message });
+  res.end();
+}
+
+/** POST /api/engines/disconnect `{kind}` → forget the credential + re-advertise. */
+async function handleEngineDisconnect(
+  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");
+  }
+  disconnectEngine(kind);
+  opts.readvertise?.();
+  return sendJson(res, EngineOpResponse, { ok: true });
+}
+
+/** Read a request body and parse it as a JSON object; null on empty/invalid. */
+async function readJsonBody(
+  req: IncomingMessage,
+): Promise<Record<string, unknown> | null> {
+  const chunks: Buffer[] = [];
+  let size = 0;
+  for await (const chunk of req) {
+    const buf = chunk as Buffer;
+    size += buf.length;
+    if (size > 64 * 1024) throw new Error("request body too large");
+    chunks.push(buf);
+  }
+  if (chunks.length === 0) return null;
+  try {
+    const parsed: unknown = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : null;
+  } catch {
+    return null;
+  }
+}
+
 // --- handlers ---------------------------------------------------------------
 
 async function tasksBody(opts: UiServerOptions): Promise<TasksResponse> {
@@ -236,6 +365,8 @@ const STATIC_FILES: Record<string, string> = {
   "/index.html": "index.html",
   "/style.css": "style.css",
   "/app.js": "app.js",
+  "/uai-wheel.svg": "uai-wheel.svg",
+  "/uai-favicon.svg": "uai-favicon.svg",
   "/uai-logo-black.svg": "uai-logo-black.svg",
 };
 

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

@@ -5,14 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Uai host</title>
     <!-- Local monitor UI (ADR-028). Served from 127.0.0.1 by the host service. -->
-    <link rel="icon" type="image/svg+xml" href="/uai-logo-black.svg" />
+    <link rel="icon" type="image/svg+xml" href="/uai-favicon.svg" />
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <main>
       <header class="topbar">
         <div class="brand">
-          <img class="logo" src="/uai-logo-black.svg" alt="Uai" />
+          <img class="logo" src="/uai-wheel.svg" alt="Uai" />
           <div class="brand-text">
             <div class="host-name" id="host-name">…</div>
             <div class="host-sub" id="host-sub">host monitor</div>
@@ -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>