@monster-orange/den 0.4.3 → 0.4.5

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

@@ -13,6 +13,11 @@
  * 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) {
@@ -53,10 +58,28 @@ export function defaultRuntimeOf(personas, runtimes, personaId) {
   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.
+ * says why; one without Den's tools yet says so.
  */
 export function runtimeOptions(personas, runtimes, personaId, t) {
   const name = runtimeName(
@@ -69,12 +92,18 @@ export function runtimeOptions(personas, runtimes, personaId, t) {
     (runtimes ?? [])
       .map((r) => {
         const label = runtimeName(runtimes, r.id);
-        return r.available
-          ? `<option value="${escHtml(r.id)}">${escHtml(
-              r.version ? `${label} · ${r.version}` : label,
+        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)}" disabled>${escHtml(
-              `${label} — ${r.why || t("ag.unavailable")}`,
+          : `<option value="${escHtml(r.id)}">${escHtml(
+              parts.filter(Boolean).join(" · "),
             )}</option>`;
       })
       .join("")
@@ -103,6 +132,13 @@ export function readiness(data, personaId, runtimeId, t) {
   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,
@@ -114,7 +150,10 @@ export function readiness(data, personaId, runtimeId, t) {
             : t("ag.rt.readyNoVer", { name }),
         ) +
         " " +
-        mono(r.path),
+        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";

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

@@ -8,26 +8,30 @@
  * 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, LK-1): the lock is checked before the dialog opens
- * (the server, then the vault: checkUnlock). Locked, the dialog asks for
- * the password inline at its top, and Start unlocks, then starts, without
- * closing anything. The runtime line says what will run, or why it
- * can't, before Start (agent-start.js readiness).
+ * 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 {
-  checkUnlock,
-  onLockChange,
-  requireUnlock,
-  unlockWith,
-} from "/topbar.js";
 import { fillStartForm } from "/agent-start.js";
 
 const t = (key, vars) => window.denShell?.t?.(key, vars) ?? key;
@@ -57,6 +61,7 @@ const st = {
   timer: null,
   xterm: null,
   csrf: null,
+  docWired: false,
 };
 
 // ── the URL ─────────────────────────────────────────────────────────────
@@ -336,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);
@@ -357,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") {
@@ -368,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;
@@ -415,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);
@@ -448,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);
 }
 
@@ -489,7 +607,7 @@ function closePane(id, { quiet = false } = {}) {
 
 async function stopAgent(p, button) {
   const r = rowOf(p.id);
-  if (!r?.agent || !(await requireUnlock())) return;
+  if (!r?.agent) return;
   button.disabled = true;
   try {
     await api(
@@ -505,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");
@@ -516,78 +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;
-  }
-  fillStartForm(st.root.querySelector("#ag-form"), data, t);
-  // LK-1: the lock before the modal. Locked, its password is asked here.
-  paintInlineLock(!(await checkUnlock()));
+  if (!(await fillForWorkspace(wsSel.value || shown[0]))) return;
   if (dlg.open) return;
   if (typeof dlg.showModal === "function") dlg.showModal();
   else dlg.setAttribute("open", "");
-  st.root.querySelector("#ag-lock:not([hidden]) input")?.focus();
-}
-
-/** Show (or hide) the dialog's inline password field (LK-1). */
-function paintInlineLock(locked) {
-  const box = st.root?.querySelector("#ag-lock");
-  if (!box) return;
-  box.hidden = !locked;
-  const err = box.querySelector("#ag-lock-err");
-  if (!locked) {
-    box.querySelector("#ag-lock-pw").value = "";
-    err.hidden = true;
-  }
-}
-
-/**
- * The lock, for Start: the dialog's own field when it shows one (unlock,
- * then go on), else the shell's rule (its popover is in the top layer).
- */
-async function unlockForStart(go) {
-  const box = st.root.querySelector("#ag-lock");
-  if (box.hidden) return requireUnlock();
-  if (await checkUnlock()) {
-    paintInlineLock(false);
-    return true;
-  }
-  const input = box.querySelector("#ag-lock-pw");
-  const err = box.querySelector("#ag-lock-err");
-  if (!input.value) {
-    err.textContent = t("lock.title");
-    err.hidden = false;
-    input.focus();
-    return false;
-  }
-  go.disabled = true;
-  go.textContent = t("lock.checking");
-  const r = await unlockWith(input.value);
-  go.disabled = false;
-  go.textContent = t("ag.go");
-  if (r.ok) {
-    paintInlineLock(false);
-    return true;
-  }
-  err.textContent = r.error;
-  err.hidden = false;
-  input.value = "";
-  input.focus();
-  return false;
 }
 
 async function submitStart(form) {
   const dlg = st.root.querySelector("#ag-dlg");
   const go = st.root.querySelector("#ag-go");
   if (go.disabled) return;
-  if (!(await unlockForStart(go))) return;
   const ws = form.querySelector("#ag-ws").value || viewWorkspaces()[0];
   const persona = form.querySelector("#ag-persona").value;
   const runtime = form.querySelector("#ag-runtime").value;
@@ -615,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) {
@@ -630,8 +767,6 @@ function translateStatic(root) {
   set("#ag-r-t", "ag.runtime");
   set("#ag-cancel", "ag.cancel");
   set("#ag-go", "ag.go");
-  set("#ag-lock-t", "lock.pw");
-  set("#ag-lock-note", "lock.title");
   const h = root.querySelector("#ag-dlg-h");
   if (h) h.textContent = h.textContent.replace(/^\+\s*/, "");
 }
@@ -667,9 +802,8 @@ export async function mountAgentsPage(root) {
   root.querySelector("#ag-start").addEventListener("click", () => {
     void openStart();
   });
-  // Unlocked elsewhere (the chip, another tab): the field goes.
-  onLockChange((unlocked) => {
-    if (unlocked) paintInlineLock(false);
+  root.querySelector("#ag-ws").addEventListener("change", (e) => {
+    void fillForWorkspace(e.currentTarget.value);
   });
   root.querySelector("#ag-cancel").addEventListener("click", () => {
     root.querySelector("#ag-dlg").close?.();
@@ -695,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;

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

@@ -7,15 +7,15 @@
  *
  * Every call is the server's agent routes (agent-routes.ts), which are the
  * CLI's own operations: nothing here keeps an agent's state. Each action
- * goes through denShell.api() (a refusal is its error toast) after the
- * lock rule (requireUnlock, R8), as a service action does. A row with a
+ * goes through denShell.api() (a refusal is its error toast). None asks
+ * for the admin password: it is for sudo, and no agent action runs sudo
+ * (LK-0). A row with a
  * session has Open (its terminal on the Agents page, AG-4a-term), and the
  * header links to the Agents page for the workspace.
  *
  * The page's table styles (table.svc, .tablewrap, .tbl-*) and the shell's
  * (.den-sec, .den-btn, .den-dot) are reused as they are.
  */
-import { requireUnlock } from "/topbar.js";
 import { fillStartForm } from "/agent-start.js";
 
 const t = (key, vars) => window.denShell?.t?.(key, vars) ?? key;
@@ -217,7 +217,6 @@ async function openForm(sec) {
 }
 
 async function act(ws, verb, id, button) {
-  if (!(await requireUnlock())) return;
   button.disabled = true;
   try {
     await api("POST", `${base(ws)}/${encodeURIComponent(id)}/${verb}`);
@@ -231,7 +230,6 @@ async function act(ws, verb, id, button) {
 }
 
 async function start(ws, form) {
-  if (!(await requireUnlock())) return;
   const go = form.querySelector("#agent-start-go");
   const persona = form.querySelector('select[name="persona"]').value;
   const runtime = form.querySelector('select[name="runtime"]').value;

package/src/ui/server/public/agents.html

@@ -298,7 +298,17 @@
         font-size: 12.5px;
       }
       dialog.ag-dlg {
-        width: min(440px, calc(100vw - 32px));
+        /* The approved mock's Start agent dialog (AG-0.5), measured on
+           den-shell.html: .dlg.wide, min(600px, 100%) of content in a
+           content-box, so 600 + 2 x 18 padding + 2 x 1 border = 638
+           outside at 1440. Here the box is border-box: 638, and never
+           wider than the viewport less 16px a side (at 375 the mock's
+           box is 381 and overflows; this one is 343). */
+        box-sizing: border-box;
+        width: min(638px, calc(100vw - 32px));
+        max-width: none;
+        max-height: calc(100vh - 32px);
+        overflow-y: auto;
         background: var(--raised);
         color: var(--text);
         border: 1px solid var(--border-strong);
@@ -324,8 +334,7 @@
       }
       .ag-dlg .help[hidden],
       .ag-dlg .ready[hidden],
-      .ag-dlg .err[hidden],
-      .ag-dlg .ag-lock[hidden] {
+      .ag-dlg .err[hidden] {
         display: none;
       }
       /* AG-0.2: the runtime it will run, or why it can't, before Start
@@ -342,20 +351,6 @@
       .ag-dlg .ready .mono {
         font-family: var(--mono);
       }
-      /* LK-1: locked, the password is asked here, at the top of the dialog,
-         and Start unlocks then starts. */
-      .ag-dlg .ag-lock {
-        display: grid;
-        gap: 6px;
-        padding: 10px 12px;
-        border: 1px solid
-          color-mix(in srgb, var(--warn) 45%, var(--border));
-        border-radius: var(--radius-button);
-        background: color-mix(in srgb, var(--warn) 8%, var(--raised));
-      }
-      .ag-dlg .ag-lock .help {
-        margin: 0;
-      }
       .ag-dlg .err {
         margin: 0;
         font: 12.5px/1.45 var(--sans);
@@ -447,17 +442,6 @@
       <dialog class="ag-dlg" id="ag-dlg" aria-labelledby="ag-dlg-h">
         <form method="dialog" id="ag-form">
           <h2 id="ag-dlg-h">Start an agent</h2>
-          <div class="ag-lock" id="ag-lock" hidden>
-            <label
-              ><span id="ag-lock-t">Admin password</span>
-              <input
-                type="password"
-                id="ag-lock-pw"
-                autocomplete="current-password"
-            /></label>
-            <p class="help" id="ag-lock-note"></p>
-            <p class="err" id="ag-lock-err" role="alert" hidden></p>
-          </div>
           <label id="ag-ws-l"
             ><span id="ag-ws-t">Workspace</span>
             <select name="ws" id="ag-ws"></select