@monster-orange/den 0.4.2 → 0.4.4

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

@@ -0,0 +1,241 @@
+/**
+ * The Start agent form's choices (AG-10.0), shared by the Agents tab's
+ * dialog and the Workspaces page's agents section. DOM-free.
+ *
+ * A persona option shows its id only: its role sentence is the help line
+ * under the select (personaHelp), so a long role can't widen the select
+ * past the dialog. The runtime's first option names what it resolves to,
+ * "Claude Code (persona default)", from the persona picked; a runtime that
+ * can't run here says why, and one that can shows its version.
+ *
+ * AG-0.2, readiness before Start: the line under the runtime names the CLI
+ * it will run (its version and path); when that runtime can't run here,
+ * Start is disabled and the line says why and how to fix it (install it,
+ * or set agents.runtimes.<id>.bin in the user.yml it names, or run
+ * `<cli> agents doctor`). Nothing fails only after Start.
+ *
+ * AG-0.5: the runtimes come installed first (the server's order). One
+ * that runs as its own CLI, without Den's tools yet, says "Den tools:
+ * coming"; one not installed is disabled; generic is startable only for a
+ * persona with an argv template. Nothing is offered that can't start.
+ */
+
+function escHtml(s) {
+  return String(s ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+}
+
+/** The persona select's options: the id only. */
+export function personaOptions(personas) {
+  return (personas ?? [])
+    .map((p) => `<option value="${escHtml(p.id)}">${escHtml(p.id)}</option>`)
+    .join("");
+}
+
+/** The help line under the persona select: the picked persona's role. */
+export function personaHelp(personas, id) {
+  return (personas ?? []).find((p) => p.id === id)?.role ?? "";
+}
+
+/** A runtime's name for people ("Claude Code"); its id when it has none. */
+export function runtimeName(runtimes, id) {
+  const r = (runtimes ?? []).find((x) => x.id === id);
+  return r?.label || r?.id || id || "";
+}
+
+/**
+ * The runtime a persona runs on when the agent names none: the persona's
+ * own, else the default runtime.
+ */
+export function defaultRuntimeOf(personas, runtimes, personaId) {
+  const p = (personas ?? []).find((x) => x.id === personaId);
+  if (p?.runtime) return p.runtime;
+  return (runtimes ?? []).find((r) => r.default)?.id ?? "";
+}
+
+/** A catalog runtime the search didn't find (not a path someone set). */
+const notFound = (r) =>
+  !r.available &&
+  r.denTools !== undefined &&
+  r.source !== "setting" &&
+  r.source !== "workspace";
+
+/** Why runtime `r` can't start for persona `personaId`, or "" when it can. */
+export function cantStart(personas, r, personaId, t) {
+  if (!r.available) return r.why || t("ag.unavailable");
+  // generic runs the persona's own argv: none, nothing to run.
+  if (r.id === "generic") {
+    const p = (personas ?? []).find((x) => x.id === personaId);
+    if (!p?.argv?.length) return t("ag.rt.needsArgv");
+  }
+  return "";
+}
+
+/**
+ * The runtime select's options. The first ("" = the persona's) reads
+ * "<name> (persona default)"; one that can't run here is disabled and
+ * says why; one without Den's tools yet says so.
+ */
+export function runtimeOptions(personas, runtimes, personaId, t) {
+  const name = runtimeName(
+    runtimes,
+    defaultRuntimeOf(personas, runtimes, personaId),
+  );
+  const first = name ? t("ag.runtime.default", { name }) : t("ag.runtime.auto");
+  return (
+    `<option value="">${escHtml(first)}</option>` +
+    (runtimes ?? [])
+      .map((r) => {
+        const label = runtimeName(runtimes, r.id);
+        const no = cantStart(personas, r, personaId, t);
+        const parts = [
+          label,
+          r.version,
+          r.denTools === false ? t("ag.rt.denTools") : "",
+        ];
+        return no
+          ? `<option value="${escHtml(r.id)}" disabled>${escHtml(
+              `${label} — ${notFound(r) ? t("ag.rt.notInstalled") : no}`,
+            )}</option>`
+          : `<option value="${escHtml(r.id)}">${escHtml(
+              parts.filter(Boolean).join(" · "),
+            )}</option>`;
+      })
+      .join("")
+  );
+}
+
+/** The most searched directories named inline; the rest are counted. */
+const SHOWN_DIRS = 4;
+
+/**
+ * Whether Start can run, and the line that says so (AG-0.2): for the
+ * runtime picked (`runtimeId`, "" = the persona's), { ok, tone, html }.
+ * `tone` is "" (ready), "warn" (can't start) or "none" (nothing to say).
+ */
+export function readiness(data, personaId, runtimeId, t) {
+  const personas = data?.personas ?? [];
+  const runtimes = data?.runtimes ?? [];
+  const id = runtimeId || defaultRuntimeOf(personas, runtimes, personaId);
+  const r = runtimes.find((x) => x.id === id);
+  if (!r)
+    return {
+      ok: false,
+      tone: "warn",
+      html: escHtml(t("ag.rt.unknown", { id: id || "?" })),
+    };
+  const name = runtimeName(runtimes, r.id);
+  const mono = (x) => `<span class="mono">${escHtml(x)}</span>`;
+  if (r.available) {
+    const no = cantStart(personas, r, personaId, t);
+    if (no)
+      return {
+        ok: false,
+        tone: "warn",
+        html: escHtml(t("ag.rt.refused", { name, why: no })),
+      };
+    if (!r.path) return { ok: true, tone: "none", html: "" };
+    return {
+      ok: true,
+      tone: "",
+      html:
+        escHtml(
+          r.version
+            ? t("ag.rt.ready", { name, version: r.version })
+            : t("ag.rt.readyNoVer", { name }),
+        ) +
+        " " +
+        mono(r.path) +
+        (r.denTools === false
+          ? ` <span class="tagx" data-den-tools="coming">${escHtml(t("ag.rt.denTools"))}</span> ${escHtml(t("ag.rt.ownCli"))}`
+          : ""),
+    };
+  }
+  const file = data?.userConfig || "config/local/user.yml";
+  const fix = t("ag.rt.fix", {
+    key: "\u0000k",
+    file: "\u0000f",
+    cmd: "\u0000c",
+  });
+  const fixHtml = escHtml(fix)
+    .replace("\u0000k", mono(r.setting || `agents.runtimes.${r.id}.bin`))
+    .replace("\u0000f", mono(file))
+    .replace("\u0000c", mono("__DEN_CLI__ agents doctor"));
+  let what;
+  if (r.source === "setting" || !r.searched)
+    what = escHtml(t("ag.rt.refused", { name, why: r.why || "" }));
+  else {
+    const dirs = r.searched;
+    const shown = dirs.slice(0, SHOWN_DIRS).map(mono).join(", ");
+    const more =
+      dirs.length > SHOWN_DIRS
+        ? " " + escHtml(t("ag.rt.more", { n: dirs.length - SHOWN_DIRS }))
+        : "";
+    what =
+      escHtml(t("ag.rt.notFound", { name })) +
+      " " +
+      escHtml(t("ag.rt.searched")) +
+      " " +
+      (shown || escHtml(t("ag.rt.nowhere"))) +
+      more +
+      ".";
+  }
+  return { ok: false, tone: "warn", html: `${what} ${fixHtml}` };
+}
+
+/**
+ * Fill a form's persona and runtime selects, its help line and its
+ * readiness line ([data-runtime-ready]), keep them in step when the
+ * persona or the runtime changes, and disable its submit button while
+ * the runtime can't run. Returns nothing; idempotent per form (the
+ * change listeners are bound once).
+ */
+export function fillStartForm(form, data, t) {
+  const personas = data?.personas ?? [];
+  const runtimes = data?.runtimes ?? [];
+  const ps = form.querySelector('select[name="persona"]');
+  const rs = form.querySelector('select[name="runtime"]');
+  const help = form.querySelector("[data-persona-help]");
+  const ready = form.querySelector("[data-runtime-ready]");
+  const go = form.querySelector('button[type="submit"]');
+  ps.innerHTML = personaOptions(personas);
+  const check = () => {
+    const r = readiness(data, ps.value, rs.value, t);
+    if (ready) {
+      ready.innerHTML = r.html;
+      ready.hidden = !r.html;
+      ready.dataset.tone = r.tone;
+    }
+    if (go) {
+      go.disabled = !r.ok;
+      go.dataset.blocked = r.ok ? "" : "runtime";
+    }
+  };
+  const sync = () => {
+    const keep = rs.value;
+    rs.innerHTML = runtimeOptions(personas, runtimes, ps.value, t);
+    if ([...rs.options].some((o) => o.value === keep && !o.disabled))
+      rs.value = keep;
+    if (help) {
+      const role = personaHelp(personas, ps.value);
+      help.textContent = role;
+      help.hidden = !role;
+    }
+    check();
+  };
+  ps.onchange = sync;
+  rs.onchange = check;
+  sync();
+}
+
+/** Whether a form's Start is held back by its runtime (readiness). */
+export function blockedByRuntime(form) {
+  return (
+    form.querySelector('button[type="submit"]')?.dataset.blocked === "runtime"
+  );
+}

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

@@ -8,15 +8,31 @@
  * the scrollback first, then the live output; keystrokes go to the
  * session and the pane's size follows the pane. Closing a pane (or
  * leaving the page) detaches: the session keeps running. Stop (an agent
- * only, behind the lock) is the Workspaces page's own agent route.
+ * only) is the Workspaces page's own agent route.
  *
  * The open panes are the URL (?open=<id>,<id>), so a reload, Back or a
  * link reopens them, each reattaching with its scrollback.
  *
+ * The size. A session has one PTY size and every viewer shares it (the
+ * last resize wins: another browser, a CLI attach). The server says the
+ * PTY's size on attach and whenever anyone changes it (a `size` frame), so
+ * a pane knows when it is out of step, and the pane in use wins: it says
+ * its own size when it is focused, when the page is shown again, and
+ * before the first keystroke after the PTY's size changed under it. A
+ * hidden pane never resizes the PTY, nor does one under 2x2. The cells
+ * are measured again once the theme's fonts have loaded (a web font
+ * arriving after the first fit would leave the cell width the fallback
+ * font's) and after the theme changes.
+ *
  * Nothing here keeps a session's state: the list is GET /api/sessions,
  * asked again every few seconds while the page is shown.
+ *
+ * Start agent (AG-0.2): the runtime line says what will run, or why it
+ * can't, before Start (agent-start.js readiness). Starting, stopping and
+ * resuming an agent never ask for the admin password: it is for sudo, and
+ * no agent action runs sudo (LK-0).
  */
-import { requireUnlock } from "/topbar.js";
+import { fillStartForm } from "/agent-start.js";
 
 const t = (key, vars) => window.denShell?.t?.(key, vars) ?? key;
 const esc = (s) =>
@@ -45,6 +61,7 @@ const st = {
   timer: null,
   xterm: null,
   csrf: null,
+  docWired: false,
 };
 
 // ── the URL ─────────────────────────────────────────────────────────────
@@ -324,6 +341,100 @@ function send(p, obj) {
   if (p.sock?.readyState === WebSocket.OPEN) p.sock.send(JSON.stringify(obj));
 }
 
+/** The smallest size a pane ever asks for (a pane not laid out yet). */
+const MIN_COLS = 2;
+const MIN_ROWS = 2;
+
+/** Shown: the page is visible and the pane has a box. */
+function paneShown(p) {
+  return (
+    !document.hidden &&
+    p.el.isConnected &&
+    p.el.offsetWidth > 0 &&
+    p.el.offsetHeight > 0
+  );
+}
+
+/** Fit the terminal to its pane (its own cols and rows; nothing is sent). */
+function refit(p) {
+  const box = p.el.querySelector(".term");
+  if (!p.fit || !p.el.isConnected || !box || box.clientWidth <= 0) return;
+  try {
+    p.fit.fit();
+  } catch {
+    /* not laid out yet */
+  }
+  markSize(p);
+}
+
+/** The pane's size and the PTY's, on the pane (data-cols, data-pty-cols). */
+function markSize(p) {
+  if (!p.term) return;
+  p.el.dataset.cols = String(p.term.cols);
+  p.el.dataset.rows = String(p.term.rows);
+  if (p.pty) {
+    p.el.dataset.ptyCols = String(p.pty.cols);
+    p.el.dataset.ptyRows = String(p.pty.rows);
+  }
+}
+
+/**
+ * Whether this pane must say its size before a keystroke: the PTY is known
+ * to have another size, or the host never says the PTY's size (an older
+ * session host that outlived an upgrade sends no size frames), so another
+ * viewer may have resized it unseen. Saying the same size again is free:
+ * the PTY only redraws when the size really changes.
+ */
+function outOfStep(p) {
+  if (!p.term) return false;
+  if (!p.heardSize) return true;
+  return !!p.pty && (p.pty.cols !== p.term.cols || p.pty.rows !== p.term.rows);
+}
+
+/**
+ * Say this pane's size to the session (the PTY takes it: last writer
+ * wins). Never from a hidden pane, never under 2x2.
+ */
+function sendSize(p) {
+  const term = p.term;
+  if (!term || p.sock?.readyState !== WebSocket.OPEN || !paneShown(p))
+    return false;
+  if (term.cols < MIN_COLS || term.rows < MIN_ROWS) return false;
+  send(p, { type: "resize", cols: term.cols, rows: term.rows });
+  // What the PTY will be: the server's frame follows (or another
+  // viewer's, if it resized after).
+  p.pty = { cols: term.cols, rows: term.rows };
+  markSize(p);
+  return true;
+}
+
+/** This pane is in use: fit it and make the PTY its size. */
+function claimSize(p) {
+  refit(p);
+  sendSize(p);
+}
+
+/**
+ * Measure the cells again (xterm measures them once, when the font is
+ * set) and refit: a web font that arrived after the first fit, or a theme
+ * whose --mono is another font. A change the PTY hears via onResize.
+ */
+function remeasure(p) {
+  const term = p.term;
+  if (!term) return;
+  const family = cssVar("--mono") ?? "monospace";
+  // Setting the same family is a no-op in xterm: set another first (never
+  // drawn: the theme's family is back before the refit).
+  if (term.options["fontFamily"] === family)
+    Object.assign(term.options, { fontFamily: `${family}, monospace` });
+  Object.assign(term.options, { fontFamily: family });
+  refit(p);
+}
+
+function remeasureAll() {
+  for (const p of st.panes.values()) remeasure(p);
+}
+
 async function connect(p) {
   p.lost = false;
   paintBar(p);
@@ -345,8 +456,10 @@ async function connect(p) {
   let opened = false;
   sock.onopen = () => {
     opened = true;
-    if (p.term)
-      send(p, { type: "resize", cols: p.term.cols, rows: p.term.rows });
+    p.pty = null;
+    p.heardSize = false;
+    refit(p);
+    sendSize(p);
   };
   sock.onmessage = (e) => {
     if (typeof e.data === "string") {
@@ -356,7 +469,13 @@ async function connect(p) {
       } catch {
         return;
       }
-      if (msg?.type === "session") {
+      if (msg?.type === "size") {
+        if (Number.isInteger(msg.cols) && Number.isInteger(msg.rows)) {
+          p.heardSize = true;
+          p.pty = { cols: msg.cols, rows: msg.rows };
+          markSize(p);
+        }
+      } else if (msg?.type === "session") {
         p.label = msg.label;
         p.workspace = msg.workspace;
         p.exited = !!msg.exited;
@@ -403,7 +522,16 @@ async function openPane(id) {
   el.className = "pane";
   el.dataset.id = id;
   el.innerHTML = `<div class="bar2"></div><div class="term"></div>`;
-  const p = { id, el, term: null, fit: null, sock: null, closed: false };
+  const p = {
+    id,
+    el,
+    term: null,
+    fit: null,
+    sock: null,
+    closed: false,
+    // The PTY's size as last heard (the server's size frame), or null.
+    pty: null,
+  };
   st.panes.set(id, p);
   st.open.push(id);
   paintBar(p);
@@ -436,19 +564,21 @@ async function openPane(id) {
   p.fit = fit;
   const enc = new TextEncoder();
   term.onData((d) => {
-    if (p.sock?.readyState === WebSocket.OPEN) p.sock.send(enc.encode(d));
+    if (p.sock?.readyState !== WebSocket.OPEN) return;
+    // The one typing wins: another viewer resized the PTY since.
+    if (outOfStep(p)) claimSize(p);
+    p.sock.send(enc.encode(d));
   });
-  term.onResize(({ cols, rows }) => send(p, { type: "resize", cols, rows }));
-  const refit = () => {
-    try {
-      if (el.isConnected && el.clientWidth > 0) fit.fit();
-    } catch {
-      /* not laid out yet */
-    }
-  };
-  p.ro = new ResizeObserver(() => refit());
+  term.onResize(() => sendSize(p));
+  // Focused (a click, the window coming back): this pane's size.
+  el.addEventListener("focusin", () => claimSize(p));
+  p.ro = new ResizeObserver(() => refit(p));
   p.ro.observe(el.querySelector(".term"));
-  refit();
+  refit(p);
+  // The theme's font may still be loading: measure again once it has.
+  document.fonts?.ready?.then(() => {
+    if (!p.closed) remeasure(p);
+  });
   void connect(p);
 }
 
@@ -477,7 +607,7 @@ function closePane(id, { quiet = false } = {}) {
 
 async function stopAgent(p, button) {
   const r = rowOf(p.id);
-  if (!r?.agent || !requireUnlock()) return;
+  if (!r?.agent) return;
   button.disabled = true;
   try {
     await api(
@@ -493,7 +623,54 @@ async function stopAgent(p, button) {
 
 // ── Start agent ─────────────────────────────────────────────────────────
 
-let personasAsked = null;
+// Personas and runtimes, per workspace (AG-0.5: a workspace's own runtime
+// paths win), asked once per page each.
+const personasAsked = new Map();
+
+function personasFor(ws) {
+  const key = ws || "";
+  if (!personasAsked.has(key))
+    personasAsked.set(
+      key,
+      api(
+        "GET",
+        `/api/personas${ws ? `?workspace=${encodeURIComponent(ws)}` : ""}`,
+      ).catch((err) => {
+        personasAsked.delete(key);
+        throw err;
+      }),
+    );
+  return personasAsked.get(key);
+}
+
+/** Fill the form for the workspace picked; false when the ask failed. */
+async function fillForWorkspace(ws) {
+  let data;
+  try {
+    data = await personasFor(ws);
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+    return false;
+  }
+  const form = st.root.querySelector("#ag-form");
+  const keep = [
+    form.querySelector("#ag-persona").value,
+    form.querySelector("#ag-runtime").value,
+  ];
+  fillStartForm(form, data, t);
+  // The persona and runtime picked stay, where the new list still has them.
+  const ps = form.querySelector("#ag-persona");
+  if (keep[0] && [...ps.options].some((o) => o.value === keep[0])) {
+    ps.value = keep[0];
+    ps.onchange?.();
+  }
+  const rs = form.querySelector("#ag-runtime");
+  if ([...rs.options].some((o) => o.value === keep[1] && !o.disabled)) {
+    rs.value = keep[1];
+    rs.onchange?.();
+  }
+  return true;
+}
 
 async function openStart() {
   const dlg = st.root.querySelector("#ag-dlg");
@@ -504,39 +681,16 @@ async function openStart() {
     .map((w) => `<option value="${esc(w)}">${esc(w)}</option>`)
     .join("");
   st.root.querySelector("#ag-ws-l").hidden = shown.length <= 1;
-  personasAsked ??= api("GET", "/api/personas").catch((err) => {
-    personasAsked = null;
-    throw err;
-  });
-  let data;
-  try {
-    data = await personasAsked;
-  } catch (err) {
-    window.denShell?.errorToast?.(err);
-    return;
-  }
-  st.root.querySelector("#ag-persona").innerHTML = (data.personas ?? [])
-    .map(
-      (p) =>
-        `<option value="${esc(p.id)}">${esc(p.id)}${p.role ? ` — ${esc(p.role)}` : ""}</option>`,
-    )
-    .join("");
-  st.root.querySelector("#ag-runtime").innerHTML =
-    `<option value="">${esc(t("ag.runtime.auto"))}</option>` +
-    (data.runtimes ?? [])
-      .map(
-        (r) =>
-          `<option value="${esc(r.id)}"${r.available ? "" : " disabled"}>${esc(r.id)}${r.available ? "" : ` — ${esc(t("ag.unavailable"))}`}</option>`,
-      )
-      .join("");
+  if (!(await fillForWorkspace(wsSel.value || shown[0]))) return;
+  if (dlg.open) return;
   if (typeof dlg.showModal === "function") dlg.showModal();
   else dlg.setAttribute("open", "");
 }
 
 async function submitStart(form) {
-  if (!requireUnlock()) return;
   const dlg = st.root.querySelector("#ag-dlg");
   const go = st.root.querySelector("#ag-go");
+  if (go.disabled) return;
   const ws = form.querySelector("#ag-ws").value || viewWorkspaces()[0];
   const persona = form.querySelector("#ag-persona").value;
   const runtime = form.querySelector("#ag-runtime").value;
@@ -564,6 +718,40 @@ async function submitStart(form) {
   }
 }
 
+/**
+ * Once per document: a font that loads later (the theme's --mono as a web
+ * font) and a theme applied without a reload (its sheet, then
+ * den:appearance) measure the cells again; the page shown again makes
+ * each pane say its size (another viewer may have taken the PTY while it
+ * was hidden).
+ */
+function wireDocument() {
+  st.docWired = true;
+  document.fonts?.addEventListener?.("loadingdone", remeasureAll);
+  window.addEventListener("den:appearance", () => {
+    for (const p of st.panes.values())
+      if (p.term) p.term.options.theme = termTheme();
+    remeasureAll();
+  });
+  document.addEventListener(
+    "load",
+    (e) => {
+      if (e.target?.id === "theme-css") {
+        for (const p of st.panes.values())
+          if (p.term) p.term.options.theme = termTheme();
+        remeasureAll();
+      }
+    },
+    true,
+  );
+  // Shown again: each pane says its size (another viewer may have taken
+  // the PTY while this page was hidden).
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) return;
+    for (const p of st.panes.values()) claimSize(p);
+  });
+}
+
 // ── mount ───────────────────────────────────────────────────────────────
 
 function translateStatic(root) {
@@ -614,6 +802,9 @@ export async function mountAgentsPage(root) {
   root.querySelector("#ag-start").addEventListener("click", () => {
     void openStart();
   });
+  root.querySelector("#ag-ws").addEventListener("change", (e) => {
+    void fillForWorkspace(e.currentTarget.value);
+  });
   root.querySelector("#ag-cancel").addEventListener("click", () => {
     root.querySelector("#ag-dlg").close?.();
   });
@@ -621,6 +812,15 @@ export async function mountAgentsPage(root) {
     e.preventDefault();
     void submitStart(e.currentTarget);
   });
+  // Enter starts from any field (a select doesn't submit on its own); Esc
+  // cancels (the dialog's own cancel). A button keeps its own Enter.
+  root.querySelector("#ag-form").addEventListener("keydown", (e) => {
+    if (e.key !== "Enter" || e.isComposing) return;
+    if (e.target.closest("button, textarea")) return;
+    e.preventDefault();
+    if (!st.root.querySelector("#ag-go").disabled)
+      e.currentTarget.requestSubmit();
+  });
   // The terminals follow the mode (light, dark) and the theme.
   new MutationObserver(() => {
     for (const p of st.panes.values())
@@ -629,6 +829,7 @@ export async function mountAgentsPage(root) {
     attributes: true,
     attributeFilter: ["data-mode", "data-theme", "class"],
   });
+  if (!st.docWired) wireDocument();
   window.addEventListener("pagehide", () => {
     for (const p of st.panes.values()) {
       p.closed = true;