@monster-orange/den 0.4.1 → 0.4.3

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

@@ -0,0 +1,202 @@
+/**
+ * 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.
+ */
+
+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 ?? "";
+}
+
+/**
+ * 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.
+ */
+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);
+        return r.available
+          ? `<option value="${escHtml(r.id)}">${escHtml(
+              r.version ? `${label} · ${r.version}` : label,
+            )}</option>`
+          : `<option value="${escHtml(r.id)}" disabled>${escHtml(
+              `${label} — ${r.why || t("ag.unavailable")}`,
+            )}</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) {
+    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),
+    };
+  }
+  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

@@ -15,8 +15,20 @@
  *
  * 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).
  */
-import { requireUnlock } from "/topbar.js";
+import {
+  checkUnlock,
+  onLockChange,
+  requireUnlock,
+  unlockWith,
+} from "/topbar.js";
+import { fillStartForm } from "/agent-start.js";
 
 const t = (key, vars) => window.denShell?.t?.(key, vars) ?? key;
 const esc = (s) =>
@@ -104,6 +116,12 @@ function displayName(r) {
   return r.kind === "agent" ? (r.persona ?? r.label) : r.label;
 }
 
+// A pane's title and its Close: the agent's display name (AG-10.8), else
+// its id, never the persona. There is no display name before AG-10.
+function paneName(r) {
+  return r.kind === "agent" ? r.displayName || r.agent || r.label : r.label;
+}
+
 function rowHtml(r) {
   const open = st.open.includes(r.id);
   const nm =
@@ -293,7 +311,7 @@ function paintLayout() {
 function paintBar(p) {
   const r = rowOf(p.id);
   const bar = p.el.querySelector(".bar2");
-  const name = r ? displayName(r) : p.label || p.id;
+  const name = r ? paneName(r) : p.label || p.id;
   const where = r
     ? [r.workspace, r.runtime].filter(Boolean).join(" · ")
     : p.workspace || "";
@@ -471,7 +489,7 @@ function closePane(id, { quiet = false } = {}) {
 
 async function stopAgent(p, button) {
   const r = rowOf(p.id);
-  if (!r?.agent || !requireUnlock()) return;
+  if (!r?.agent || !(await requireUnlock())) return;
   button.disabled = true;
   try {
     await api(
@@ -509,28 +527,67 @@ async function openStart() {
     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("");
+  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 (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) {
-  if (!requireUnlock()) return;
   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;
@@ -573,6 +630,8 @@ 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*/, "");
 }
@@ -608,6 +667,10 @@ 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-cancel").addEventListener("click", () => {
     root.querySelector("#ag-dlg").close?.();
   });
@@ -615,6 +678,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())

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

@@ -16,6 +16,7 @@
  * (.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;
 const esc = (s) =>
@@ -62,6 +63,8 @@ export function agentsSectionHtml(ws) {
               <form class="agent-form" id="agent-start-form" hidden>
                 <label>${esc(t("ag.persona"))} <select class="form-sel" name="persona" required></select></label>
                 <label>${esc(t("ag.runtime"))} <select class="form-sel" name="runtime"></select></label>
+                <p class="agent-form-help" data-persona-help hidden></p>
+                <p class="agent-form-ready" data-runtime-ready role="status" hidden></p>
                 <button type="submit" class="den-btn sm primary" id="agent-start-go">${esc(t("ag.go"))}</button>
                 <button type="button" class="den-btn sm" data-agent-cancel>${esc(t("ag.cancel"))}</button>
               </form>
@@ -185,22 +188,7 @@ async function refresh(ws) {
 }
 
 function fillForm(form, data) {
-  const ps = form.querySelector('select[name="persona"]');
-  ps.innerHTML = (data.personas ?? [])
-    .map(
-      (p) =>
-        `<option value="${esc(p.id)}">${esc(p.id)}${p.role ? ` — ${esc(p.role)}` : ""}</option>`,
-    )
-    .join("");
-  const rs = form.querySelector('select[name="runtime"]');
-  rs.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("");
+  fillStartForm(form, data, t);
 }
 
 async function openForm(sec) {
@@ -229,7 +217,7 @@ async function openForm(sec) {
 }
 
 async function act(ws, verb, id, button) {
-  if (!requireUnlock()) return;
+  if (!(await requireUnlock())) return;
   button.disabled = true;
   try {
     await api("POST", `${base(ws)}/${encodeURIComponent(id)}/${verb}`);
@@ -243,7 +231,7 @@ async function act(ws, verb, id, button) {
 }
 
 async function start(ws, form) {
-  if (!requireUnlock()) return;
+  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

@@ -311,8 +311,56 @@
       }
       .ag-dlg form {
         display: grid;
+        /* AG-10.0: minmax(0, 1fr), so a long option can't widen the form
+           past the dialog and push Cancel and Start out of sight. */
+        grid-template-columns: minmax(0, 1fr);
         gap: 12px;
       }
+      .ag-dlg .help {
+        margin: -6px 0 0;
+        font: 12.5px/1.45 var(--sans);
+        color: var(--muted);
+        overflow-wrap: anywhere;
+      }
+      .ag-dlg .help[hidden],
+      .ag-dlg .ready[hidden],
+      .ag-dlg .err[hidden],
+      .ag-dlg .ag-lock[hidden] {
+        display: none;
+      }
+      /* AG-0.2: the runtime it will run, or why it can't, before Start
+         (the mock's .helpl: 12px, faint, 1.4). */
+      .ag-dlg .ready {
+        margin: -6px 0 0;
+        font: 12px/1.4 var(--sans);
+        color: var(--faint);
+        overflow-wrap: anywhere;
+      }
+      .ag-dlg .ready[data-tone="warn"] {
+        color: var(--warn);
+      }
+      .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);
+        color: var(--bad);
+      }
       .ag-dlg h2 {
         margin: 0;
         font: 600 17px var(--display);
@@ -325,7 +373,10 @@
         text-transform: uppercase;
         letter-spacing: 0.07em;
       }
+      .ag-dlg input[type="password"],
       .ag-dlg select {
+        width: 100%;
+        min-width: 0;
         font: 13px var(--sans);
         text-transform: none;
         letter-spacing: 0;
@@ -396,6 +447,17 @@
       <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
@@ -404,10 +466,18 @@
             ><span id="ag-p-t">Persona</span>
             <select name="persona" id="ag-persona" required></select
           ></label>
+          <p class="help" id="ag-p-help" data-persona-help hidden></p>
           <label
             ><span id="ag-r-t">Runtime</span>
             <select name="runtime" id="ag-runtime"></select
           ></label>
+          <p
+            class="ready"
+            id="ag-r-ready"
+            data-runtime-ready
+            role="status"
+            hidden
+          ></p>
           <div class="btns">
             <button type="button" class="den-btn" id="ag-cancel">Cancel</button>
             <button type="submit" class="den-btn primary" id="ag-go">

package/src/ui/server/public/i18n/es.js

@@ -330,6 +330,7 @@
     "ag.persona": "Persona",
     "ag.runtime": "Runtime",
     "ag.runtime.auto": "La de la persona",
+    "ag.runtime.default": "{name} (la de la persona)",
     "ag.unavailable": "no disponible",
     "ag.go": "Iniciar",
     "ag.starting": "Iniciando…",
@@ -372,5 +373,15 @@
     "ag.palStart": "Iniciar agente…",
     "ag.cap":
       "Hasta 4 paneles: se cerró el de {id} para hacer sitio (sigue en marcha)",
+    "ag.rt.ready": "Inicia {name} {version} desde",
+    "ag.rt.readyNoVer": "Inicia {name} desde",
+    "ag.rt.notFound": "No se encontró {name}.",
+    "ag.rt.searched": "Se buscó en:",
+    "ag.rt.more": "y {n} más",
+    "ag.rt.nowhere": "ningún directorio",
+    "ag.rt.refused": "{name} no puede iniciarse: {why}.",
+    "ag.rt.fix":
+      "Instálalo, o pon su ruta en {key} en {file}, o ejecuta {cmd}.",
+    "ag.rt.unknown": "Aquí no hay ningún runtime {id}.",
   };
 })((window.denMessages = window.denMessages || {}));

package/src/ui/server/public/i18n/ja.js

@@ -318,6 +318,7 @@
     "ag.persona": "ペルソナ",
     "ag.runtime": "ランタイム",
     "ag.runtime.auto": "ペルソナの既定",
+    "ag.runtime.default": "{name}（ペルソナの既定）",
     "ag.unavailable": "利用不可",
     "ag.go": "開始",
     "ag.starting": "開始中…",
@@ -357,5 +358,15 @@
     "ag.palStart": "エージェントを開始…",
     "ag.cap":
       "ペインは最大 4 つです。{id} のペインを閉じました（実行は続きます）",
+    "ag.rt.ready": "{name} {version} を起動:",
+    "ag.rt.readyNoVer": "{name} を起動:",
+    "ag.rt.notFound": "{name} が見つかりません。",
+    "ag.rt.searched": "検索した場所:",
+    "ag.rt.more": "ほか {n} 件",
+    "ag.rt.nowhere": "なし",
+    "ag.rt.refused": "{name} を起動できません: {why}。",
+    "ag.rt.fix":
+      "インストールするか、{file} の {key} にパスを設定するか、{cmd} を実行してください。",
+    "ag.rt.unknown": "ランタイム {id} はここにありません。",
   };
 })((window.denMessages = window.denMessages || {}));