@monster-orange/den 0.4.3 → 0.4.4

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

package/src/ui/server/public/graph-model.js

@@ -156,6 +156,7 @@ export function applyHealth(m, results) {
       check: h.check ?? null,
       error: h.error ?? null,
       status: h.status ?? null,
+      redirect: h.redirect ?? null,
       ms:
         typeof h.ms === "number"
           ? h.ms
@@ -232,6 +233,7 @@ export function repoRollup(m, repo) {
       service: s.name,
       ok: s.health.ok,
       isEntrypoint: s.entry,
+      redirect: !!s.health.redirect,
     })),
   );
 }

package/src/ui/server/public/header.js

@@ -30,12 +30,11 @@ const escT = (key, vars) =>
   );
 
 export {
-  isUnlocked,
-  onLockChange,
+  askSudo,
   problemCards,
   problemFix,
-  requireUnlock,
   setServiceRunner,
+  sudoRun,
   takePendingAction,
 } from "./topbar.js";
 export { buildRow } from "./health-fit.js";

package/src/ui/server/public/health-rollup.js

@@ -27,9 +27,9 @@
 export const STATE_RANK = { down: 0, degraded: 1, ok: 2, unknown: 3 };
 
 /**
- * @typedef {{ service: string, ok: boolean | null | undefined, isEntrypoint?: boolean, awaiting?: boolean }} HealthSignal
+ * @typedef {{ service: string, ok: boolean | null | undefined, isEntrypoint?: boolean, awaiting?: boolean, redirect?: boolean }} HealthSignal
  * @typedef {"down" | "degraded" | "ok" | "unknown"} RepoState
- * @typedef {{ state: RepoState, entry: string | null, down: string[], checked: number, unchecked: number, awaiting: number }} RepoRollup
+ * @typedef {{ state: RepoState, entry: string | null, down: string[], checked: number, unchecked: number, awaiting: number, redirected?: number }} RepoRollup
  */
 
 /**
@@ -60,6 +60,11 @@ export function rollupRepo(repo, signals) {
   const answered = signals.filter((s) => !s.awaiting);
   const entry = entrySignal(repo, answered);
   const checked = answered.filter((s) => s.ok === true || s.ok === false);
+  // A redirect (ok null, `redirect`) answered: not down, not up, and not
+  // "not checked" either; counted on its own.
+  const redirected = answered.filter(
+    (s) => s.redirect && s.ok !== true && s.ok !== false,
+  ).length;
   const down = awaiting
     ? []
     : checked.filter((s) => s.ok === false).map((s) => s.service);
@@ -77,8 +82,9 @@ export function rollupRepo(repo, signals) {
     entry: entry ? entry.service : null,
     down,
     checked: checked.length,
-    unchecked: answered.length - checked.length,
+    unchecked: answered.length - checked.length - redirected,
     awaiting,
+    ...(redirected ? { redirected } : {}),
   };
 }
 
@@ -99,16 +105,22 @@ export function rollupRows(rows) {
 
 /**
  * "down (web down)", "degraded (mailpit down)", "healthy",
- * "healthy, 25 not checked", "unknown (not checked)".
+ * "healthy, 25 not checked", "healthy, 1 redirect", "unknown (not
+ * checked)", "unknown (1 redirect)".
  * @param {RepoRollup} r
  * @returns {string}
  */
 export function describeRollup(r) {
-  const notChecked = r.unchecked > 0 ? `${r.unchecked} not checked` : "";
+  const extra = [
+    r.redirected ? `${r.redirected} redirect` : "",
+    r.unchecked > 0 ? `${r.unchecked} not checked` : "",
+  ]
+    .filter(Boolean)
+    .join(", ");
   if (r.awaiting) return "unknown (still checking)";
-  if (r.state === "unknown") return "unknown (not checked)";
-  if (r.state === "ok")
-    return notChecked ? `healthy, ${notChecked}` : "healthy";
+  if (r.state === "unknown")
+    return r.redirected ? `unknown (${extra})` : "unknown (not checked)";
+  if (r.state === "ok") return extra ? `healthy, ${extra}` : "healthy";
   return `${r.state} (${r.down.join(", ")} down)`;
 }