@monster-orange/den 0.4.18 → 0.4.19

package/src/ui/server/public/server-agent-page.js

@@ -0,0 +1,415 @@
+/**
+ * The server agent's page (ON-6): this Den's own agent in a terminal pane,
+ * framed as the page, with "Open in Agents" as the way out. A fresh Den's
+ * first page (the server serves it at /). Its status is GET
+ * /api/server-agent (server-agent-routes.ts).
+ *
+ *  - Fresh, with a runtime that can run it: it starts by itself. It only
+ *    reads until the person allows a write (each write is held for the
+ *    browser's Allow, ON-3).
+ *  - No runtime: the manual path, and how to install a runtime.
+ *  - Running on Claude on a fresh Den: a line saying Claude asks to trust
+ *    its folder (choose Yes), and one saying to log in to Claude in the
+ *    terminal if it asks (Den can't tell whether it is logged in). Which
+ *    runtime it runs on is its record's (runningRuntime), never the
+ *    picker's: the two differ after the picker changes, or when the runtime
+ *    is not found again on a later read.
+ *  - Started by itself, but not running yet when the page reads it back:
+ *    the page reads again, a few times, until it runs (so the terminal and
+ *    its lines come up without a reload).
+ *  - Not fresh and not running: a Start button (never started by itself).
+ *  - The runtime picker saves the person's choice (agents.server_runtime),
+ *    and the model picker beside it (agents.server_model), with only the
+ *    runtime's own models.
+ *
+ * serverAgentView(status) is pure (HTML from the status JSON), so tests
+ * need no server.
+ */
+
+const t = (key, vars) => globalThis.window?.denShell?.t?.(key, vars) ?? key;
+const esc = (s) =>
+  String(s ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+const CLI = "__DEN_CLI__";
+
+const RUNNING = new Set(["running", "stopping"]);
+
+/**
+ * What the page shows for `status`: its header line, its body, whether
+ * the agent starts by itself, and whether a terminal opens.
+ *
+ *   { sub, body, autoStart, terminal }
+ */
+export function serverAgentView(s) {
+  const running = RUNNING.has(s.state) && !!s.sessionId;
+  const hasRuntime = !!s.runtime;
+  const sub = s.fresh ? t("sa.sub.fresh") : t("sa.sub");
+  const readsOnly = `<p class="note sa-reads" data-note="reads-only">${esc(t("sa.readsOnly"))}</p>`;
+  // Den can't tell whether Claude is logged in (ON-6). On a fresh Den's
+  // first run, one line above the terminal says a login prompt is
+  // expected, so Claude's own login screen never reads as a crash.
+  // Claude Code asks once whether to trust the agent's folder, which Den
+  // made for it; Den doesn't answer for the person (that is Claude's own
+  // file, ~/.claude.json, with no documented way to pre-accept).
+  const onClaude =
+    s.fresh &&
+    (running ? (s.runningRuntime ?? s.runtime?.id) : s.runtime?.id) ===
+      "den-claude";
+  const login = onClaude
+    ? `<p class="note sa-trust" data-note="trust">${esc(t("sa.trust"))}</p>` +
+      `<p class="note sa-login" data-note="login">${esc(t("sa.login", { name: s.name }))}</p>`
+    : "";
+  if (running)
+    return {
+      sub,
+      body: login + readsOnly,
+      autoStart: false,
+      terminal: s.sessionId,
+    };
+  if (!hasRuntime)
+    return {
+      sub,
+      body: noRuntimeHtml(s),
+      autoStart: false,
+      terminal: null,
+    };
+  // Fresh and never started (or stopped): it starts by itself.
+  if (s.fresh)
+    return {
+      sub,
+      body: `<p class="note" data-note="starting">${esc(t("sa.starting"))}</p>${readsOnly}`,
+      autoStart: true,
+      terminal: null,
+    };
+  return {
+    sub,
+    body:
+      `<div class="sa-idle" data-note="idle"><p>${esc(t("sa.idle", { name: s.name }))}</p>` +
+      `<button type="button" class="den-btn primary" data-act="start">${esc(t("sa.start"))}</button></div>` +
+      readsOnly,
+    autoStart: false,
+    terminal: null,
+  };
+}
+
+/** No runtime can run it: how to install one, and the manual path. */
+function noRuntimeHtml(s) {
+  const installs = (s.runtimes ?? [])
+    .filter((r) => !r.usable)
+    .map(
+      (r) =>
+        `<li data-runtime="${esc(r.id)}"><b>${esc(r.label ?? r.id)}</b>` +
+        (r.available && !r.denTools
+          ? ` · ${esc(t("sa.noTools"))}`
+          : r.install
+            ? ` · <code>${esc(r.install)}</code>`
+            : "") +
+        `</li>`,
+    )
+    .join("");
+  const manual = (s.manual ?? [])
+    .map((c) => `<li><code>${esc(c)}</code></li>`)
+    .join("");
+  return (
+    `<section class="sa-none" data-note="no-runtime"><h2 class="sec">${esc(t("sa.none.h"))}</h2>` +
+    `<p>${esc(t("sa.none"))}</p>` +
+    (installs ? `<ul class="sa-install">${installs}</ul>` : "") +
+    `</section>` +
+    `<section class="sa-manual" data-note="manual"><h2 class="sec">${esc(t("sa.manual.h"))}</h2>` +
+    `<p>${esc(t("sa.manual"))}</p><ol class="sa-steps">${manual}</ol></section>`
+  );
+}
+
+/** The model picker's options: the runtime's own models, the chosen one selected. */
+export function modelOptionsHtml(s) {
+  const models = s.models ?? [];
+  if (!models.length) return "";
+  return models
+    .map(
+      (m) =>
+        `<option value="${esc(m.id)}"${s.model === m.id ? " selected" : ""}>${esc(m.label ?? m.id)}</option>`,
+    )
+    .join("");
+}
+
+/** The runtime picker's options: the usable ones, the chosen one first. */
+export function runtimeOptionsHtml(s) {
+  const usable = (s.runtimes ?? []).filter((r) => r.usable);
+  if (!usable.length) return "";
+  return usable
+    .map(
+      (r) =>
+        `<option value="${esc(r.id)}"${s.runtime?.id === r.id ? " selected" : ""}>${esc(r.label ?? r.id)}</option>`,
+    )
+    .join("");
+}
+
+// ── the page ────────────────────────────────────────────────────────────
+
+const st = {
+  root: null,
+  status: null,
+  pane: null,
+  starting: false,
+  autoTried: false,
+  /** Reads after a start that came back not running yet. */
+  rereads: 0,
+};
+
+/** How many times, a second apart, a start is read back until it runs. */
+const REREADS = 15;
+
+async function readStatus() {
+  try {
+    const r = await fetch("/api/server-agent", { headers: { accept: "json" } });
+    return r.ok ? await r.json() : null;
+  } catch {
+    return null;
+  }
+}
+
+function paint() {
+  const s = st.status;
+  const sub = st.root.querySelector("#sa-sub");
+  const body = st.root.querySelector("#sa-body");
+  const open = st.root.querySelector("#sa-open");
+  const pick = st.root.querySelector("#sa-runtime");
+  const mpick = st.root.querySelector("#sa-model");
+  body.removeAttribute("aria-busy");
+  if (!s) {
+    sub.textContent = t("sa.unread");
+    body.innerHTML = "";
+    return null;
+  }
+  const v = serverAgentView(s);
+  sub.textContent = v.sub;
+  body.innerHTML = v.body;
+  const opts = runtimeOptionsHtml(s);
+  pick.hidden = !opts;
+  if (opts) pick.querySelector("select").innerHTML = opts;
+  const mopts = modelOptionsHtml(s);
+  if (mpick) {
+    mpick.hidden = !mopts;
+    if (mopts) mpick.querySelector("select").innerHTML = mopts;
+  }
+  open.hidden = !v.terminal;
+  if (v.terminal)
+    open.setAttribute("href", `/agents?open=${encodeURIComponent(v.terminal)}`);
+  return v;
+}
+
+async function refresh() {
+  st.status = await readStatus();
+  const v = paint();
+  if (!v) return;
+  if (v.terminal) void openTerminal(v.terminal);
+  else closeTerminal();
+  // Once per page: a start that ends at once is never retried in a loop.
+  if (v.autoStart && !st.autoTried) {
+    st.autoTried = true;
+    void start();
+    return;
+  }
+  // Started, but not running yet: read again until it is.
+  if (st.autoTried && !v.terminal && v.autoStart && st.rereads < REREADS) {
+    st.rereads++;
+    setTimeout(() => void refresh(), 1000);
+  }
+}
+
+async function start() {
+  if (st.starting) return;
+  st.starting = true;
+  try {
+    await window.denShell.api("POST", "/api/server-agent/start", {});
+  } catch (err) {
+    st.starting = false;
+    const body = st.root.querySelector("#sa-body");
+    const why = err?.message ?? String(err);
+    body.innerHTML = `<p class="note bad" data-note="failed" role="alert">${esc(t("sa.failed", { why, cli: CLI }))}</p>`;
+    return;
+  }
+  st.starting = false;
+  await refresh();
+}
+
+async function saveModel(id) {
+  try {
+    await window.denShell.api("POST", "/api/server-agent/model", {
+      model: id,
+    });
+    window.denShell?.toast?.(t("sa.saved"));
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+  await refresh();
+}
+
+async function saveRuntime(id) {
+  try {
+    await window.denShell.api("POST", "/api/server-agent/runtime", {
+      runtime: id,
+    });
+    window.denShell?.toast?.(t("sa.saved"));
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+  await refresh();
+}
+
+// ── the terminal ────────────────────────────────────────────────────────
+
+function cssVar(name) {
+  const v = getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+  return v || undefined;
+}
+
+async function csrf() {
+  try {
+    const r = await fetch("/api/session", { credentials: "same-origin" });
+    const b = r.ok ? await r.json() : null;
+    return typeof b?.csrf === "string" ? b.csrf : null;
+  } catch {
+    return null;
+  }
+}
+
+function closeTerminal() {
+  const p = st.pane;
+  if (!p) return;
+  st.pane = null;
+  p.closed = true;
+  p.sock?.close();
+  p.term?.dispose();
+  p.observer?.disconnect();
+  p.el.remove();
+}
+
+async function openTerminal(id) {
+  if (st.pane?.id === id) return;
+  closeTerminal();
+  const el = document.createElement("div");
+  el.className = "sa-term";
+  el.dataset.id = id;
+  el.innerHTML = `<div class="tbox"></div>`;
+  st.root.querySelector("#sa-pane").appendChild(el);
+  const p = { id, el, term: null, fit: null, sock: null, closed: false };
+  st.pane = p;
+  let lib;
+  try {
+    const [x, f] = await Promise.all([
+      import("/vendor/xterm.mjs"),
+      import("/vendor/addon-fit.mjs"),
+    ]);
+    lib = { Terminal: x.Terminal, FitAddon: f.FitAddon };
+  } catch (err) {
+    el.innerHTML = `<p class="note">${esc(err?.message ?? String(err))}</p>`;
+    return;
+  }
+  if (p.closed) return;
+  const bg = cssVar("--sunken");
+  const term = new lib.Terminal({
+    fontFamily: cssVar("--mono") ?? "monospace",
+    fontSize: 12,
+    lineHeight: 1.25,
+    scrollback: 5000,
+    theme: { background: bg, foreground: cssVar("--text"), cursorAccent: bg },
+  });
+  const fit = new lib.FitAddon();
+  term.loadAddon(fit);
+  term.open(el.querySelector(".tbox"));
+  p.term = term;
+  p.fit = fit;
+  const refit = () => {
+    try {
+      fit.fit();
+    } catch {
+      /* not laid out yet */
+    }
+  };
+  refit();
+  p.observer = new ResizeObserver(refit);
+  p.observer.observe(el);
+  const enc = new TextEncoder();
+  term.onData((d) => {
+    if (p.sock?.readyState === WebSocket.OPEN) p.sock.send(enc.encode(d));
+  });
+  const size = () => {
+    if (p.sock?.readyState === WebSocket.OPEN && term.cols > 1 && term.rows > 1)
+      p.sock.send(
+        JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }),
+      );
+  };
+  term.onResize(size);
+  const token = await csrf();
+  if (p.closed) return;
+  const proto = location.protocol === "https:" ? "wss:" : "ws:";
+  const sock = new WebSocket(
+    `${proto}//${location.host}/api/sessions/${encodeURIComponent(id)}/io`,
+    ["den.io", `den.csrf.${token ?? ""}`],
+  );
+  sock.binaryType = "arraybuffer";
+  p.sock = sock;
+  sock.onopen = () => {
+    refit();
+    size();
+    term.focus();
+  };
+  sock.onmessage = (e) => {
+    if (typeof e.data === "string") {
+      let msg = null;
+      try {
+        msg = JSON.parse(e.data);
+      } catch {
+        return;
+      }
+      if (msg?.type === "exit") {
+        term.write(`\r\n${t("ag.exitedLine", { code: "" })}\r\n`);
+        setTimeout(() => void refresh(), 1000);
+      }
+      return;
+    }
+    term.write(new Uint8Array(e.data));
+  };
+  sock.onclose = (e) => {
+    if (p.closed || p.sock !== sock) return;
+    p.sock = null;
+    term.write(`\r\n${t("ag.lost", { why: e.reason || String(e.code) })}\r\n`);
+  };
+}
+
+export async function mountServerAgentPage(root) {
+  if (!root) return;
+  st.root = root;
+  for (const [sel, key] of [
+    ["#sa-title", "n.serverAgent"],
+    ["#sa-runtime > span", "sa.runsOn"],
+    ["#sa-model > span", "sa.model"],
+    ["#sa-open", "sa.openAgents"],
+  ]) {
+    const el = root.querySelector(sel);
+    if (el) el.textContent = t(key);
+  }
+  if (window.denShell?.apiOff?.()) return;
+  root.addEventListener("click", (e) => {
+    const b = e.target.closest("button[data-act]");
+    if (b?.dataset.act === "start") {
+      b.disabled = true;
+      void start();
+    }
+  });
+  root.querySelector("#sa-runtime select")?.addEventListener("change", (e) => {
+    void saveRuntime(e.target.value);
+  });
+  root.querySelector("#sa-model select")?.addEventListener("change", (e) => {
+    void saveModel(e.target.value);
+  });
+  await refresh();
+}

package/src/ui/server/public/server-agent.html

@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      // Mode before first paint: yours (the server fills it in below),
+      // else the system's, else the theme's default, else dark.
+      (function () {
+        var m = "@@DEN_MODE@@";
+        if (m !== "dark" && m !== "light") {
+          var q = function (s) {
+            return (
+              window.matchMedia &&
+              matchMedia("(prefers-color-scheme: " + s + ")").matches
+            );
+          };
+          m = q("light")
+            ? "light"
+            : q("dark")
+              ? "dark"
+              : "@@DEN_DEFAULT_MODE@@";
+        }
+        document.documentElement.dataset.mode =
+          m === "light" ? "light" : "dark";
+      })();
+    </script>
+    <link rel="stylesheet" href="/theme.css" id="theme-css" />
+    <link rel="stylesheet" href="/vendor/xterm.css" />
+    <title>__DEN_TITLE__ · Server agent</title>
+    <style>
+      /* The server agent's page (ON-6): the prototype's page header (.ph,
+         R20), then the agent's terminal as the page, the Agents tab's pane
+         look (.pane .term) without its list. --r is --radius. */
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        background: var(--bg);
+        color: var(--text);
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      html body.den-has-shell > #den-content {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        min-height: 0;
+        overflow: auto;
+        padding: 20px 24px 14px 24px;
+        font: 14px/1.45 var(--sans);
+        color: var(--text);
+      }
+      #den-content :focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+      a {
+        color: var(--accent-text);
+      }
+      .ph {
+        display: flex;
+        align-items: flex-end;
+        gap: 16px;
+        flex-wrap: wrap;
+        margin-bottom: 12px;
+      }
+      .ph h1 {
+        font: 600 22px/1.2 var(--display);
+        margin: 0;
+        text-wrap: balance;
+      }
+      .ph .sub {
+        color: var(--muted);
+        font-size: 13px;
+        margin-top: 4px;
+      }
+      .ph .acts {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .ph label {
+        font-size: 13px;
+        color: var(--muted);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .ph select {
+        font: inherit;
+        color: var(--text);
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-button);
+        padding: 4px 8px;
+      }
+      .note {
+        color: var(--muted);
+        font-size: 13px;
+        margin: 0 0 10px;
+      }
+      .note.bad {
+        color: var(--bad);
+      }
+      h2.sec {
+        font: 600 13px var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.07em;
+        color: var(--muted);
+        margin: 0 0 10px;
+      }
+      section {
+        margin-bottom: 22px;
+      }
+      code {
+        font: 12.5px var(--mono);
+      }
+      .sa-steps li,
+      .sa-install li {
+        margin-bottom: 6px;
+      }
+      .sa-idle {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 10px;
+      }
+      .sa-idle p {
+        margin: 0;
+      }
+      /* The terminal is the page: it takes what is left. */
+      #sa-pane {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+      }
+      #sa-pane:empty {
+        display: none;
+      }
+      .sa-term {
+        flex: 1 1 auto;
+        min-height: 240px;
+        min-width: 0;
+        display: grid;
+        grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+        padding: 6px 4px 4px 8px;
+        background: var(--sunken);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        overflow: hidden;
+      }
+      .sa-term .tbox {
+        min-height: 0;
+        min-width: 0;
+        overflow: hidden;
+      }
+      .sa-term .xterm {
+        height: 100%;
+      }
+      .sa-term .xterm .xterm-viewport {
+        background-color: var(--sunken);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- The shell: top bar and rail, the same on every page (shell.js). -->
+    <div id="den-shell" data-page="server-agent"></div>
+    <script src="/shell.js"></script>
+
+    <!-- The page's one main landmark: everything after the shell. -->
+    <main id="den-content">
+      <div class="ph">
+        <div>
+          <h1 id="sa-title">__DEN_TITLE__ agent</h1>
+          <div class="sub" id="sa-sub"></div>
+        </div>
+        <div class="acts">
+          <label id="sa-runtime" hidden
+            ><span>Runs on</span> <select></select
+          ></label>
+          <label id="sa-model" hidden
+            ><span>Model</span> <select></select
+          ></label>
+          <a class="den-btn" id="sa-open" href="/agents" hidden
+            >Open in Agents</a
+          >
+        </div>
+      </div>
+      <div id="sa-body" aria-busy="true" aria-live="polite"></div>
+      <div id="sa-pane"></div>
+
+      <script type="module">
+        import {
+          applyDenConfig,
+          initChangelog,
+          initHealth,
+          initLogBadge,
+          initWorkspacePill,
+        } from "/header.js";
+        import { mountServerAgentPage } from "/server-agent-page.js";
+        void Promise.all([
+          initHealth(),
+          initWorkspacePill(),
+          applyDenConfig(),
+          initChangelog(),
+        ]).then(initLogBadge);
+        void mountServerAgentPage(document.getElementById("den-content"));
+      </script>
+    </main>
+  </body>
+</html>