@monster-orange/den 0.4.3 → 0.4.4

package/src/ui/server/public/settings-registry.js

@@ -64,6 +64,13 @@ export const DEN_SETTING_CATEGORIES = [
     description:
       "Settings for one workspace. They follow the Workspace you view in the top bar.",
   },
+  {
+    id: "agents",
+    label: "Agents",
+    order: 55,
+    description:
+      "The runtimes agents run on, installed first. Paths you set are this machine's only: everywhere (config/local/user.yml) or for one workspace (config/local/workspaces.yml), which wins.",
+  },
   {
     id: "cli",
     label: "Command line",
@@ -416,6 +423,29 @@ export const DEN_SETTINGS = [
     write: (v, ctx) => ctx.saveWorkspace({ editor: v || null }),
   },
 
+  // ── Agents ─────────────────────────────────────────────────────────────
+  {
+    id: "agents.runtimes",
+    category: "agents",
+    label: "Runtimes",
+    description:
+      "Each runtime's status and version, the path in use and where it came from. Set path… runs its version command first and refuses a path that isn't that runtime.",
+    keywords: [
+      "runtime",
+      "claude",
+      "codex",
+      "gemini",
+      "grok",
+      "path",
+      "bin",
+      "cli",
+      "agent",
+    ],
+    scope: "user",
+    control: { type: "custom", render: renderRuntimes },
+    read: () => null,
+  },
+
   // ── Command line ───────────────────────────────────────────────────────
   {
     id: "cli.local_dev",
@@ -498,6 +528,53 @@ export const DEN_SETTINGS = [
     },
     read: () => null,
   },
+  {
+    // R8, LK-0: the admin password is for sudo, and nothing else. Den asks
+    // for it only when a command it runs needs sudo; here is whether it is
+    // saved, and Forget. Reading never wakes the vault.
+    id: "cli.sudo",
+    category: "cli",
+    label: "Admin password",
+    description:
+      "Used only when a command Den runs needs sudo, and asked for only then. It is no sign-in: nothing else needs it.",
+    keywords: ["admin", "password", "sudo", "forget", "vault", "1password"],
+    scope: "user",
+    control: {
+      type: "custom",
+      render(host, ctx) {
+        const draw = (st) => {
+          const saved = st?.saved;
+          const where =
+            saved === "vault"
+              ? `Saved in ${st.vault?.label || "the vault"}`
+              : saved === "session"
+                ? "Saved for this session"
+                : "Not saved";
+          host.innerHTML =
+            '<output class="set-ro" id="set-sudo"></output>' +
+            (saved
+              ? ' <button type="button" class="btn" id="set-sudo-forget">Forget</button>'
+              : "");
+          host.querySelector("output").textContent = where;
+          host
+            .querySelector("#set-sudo-forget")
+            ?.addEventListener("click", () =>
+              ctx.shell
+                .api("POST", "/api/sudo-password/forget", {})
+                .then(load)
+                .catch(load),
+            );
+        };
+        const load = () =>
+          fetch("/api/sudo-password/status", { cache: "no-store" })
+            .then((r) => (r.ok ? r.json() : null))
+            .then(draw)
+            .catch(() => draw(null));
+        void load();
+      },
+    },
+    read: () => null,
+  },
 
   // ── Distribution (read-only) ───────────────────────────────────────────
   distRow(
@@ -547,6 +624,154 @@ export const DEN_SETTINGS = [
   ),
 ];
 
+// ── Settings › Agents › Runtimes (AG-0.5) ────────────────────────────────
+
+const escR = (s) =>
+  String(s ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+
+/** Where a runtime's path came from, as the row says it. */
+export const RUNTIME_SOURCE = {
+  workspace: "workspace",
+  setting: "global",
+  "login-shell": "detected · login shell",
+  PATH: "detected · PATH",
+  "well-known": "detected · install directory",
+  "interactive-shell": "detected · interactive shell",
+};
+
+/** One runtime's row (r: GET /api/agents/runtimes' entry). */
+export function runtimeRowHtml(r, scopeWs) {
+  const id = escR(r.id);
+  const name =
+    `<b>${escR(r.label || r.id)}</b>` +
+    (r.vendor ? ` <span class="rt-v">${escR(r.vendor)}</span>` : "") +
+    (r.denTools === false
+      ? ` <span class="set-tag" data-den-tools="coming">Den tools: coming</span>`
+      : "");
+  const set = r.source === "workspace" || r.source === "setting";
+  const status = r.available
+    ? `<span class="rt-ok">✓ ${escR(r.version ? r.version : "installed")}</span>`
+    : `<span class="rt-bad">${escR(set ? r.why : "Not installed")}</span>`;
+  const where = r.path
+    ? `<span class="den-mono rt-p">${escR(r.path)}</span> <span class="set-tag" data-src="${escR(r.source || "")}">${escR(RUNTIME_SOURCE[r.source] || r.source || "")}</span>`
+    : set
+      ? `<span class="set-tag" data-src="${escR(r.source)}">${escR(RUNTIME_SOURCE[r.source])}</span>`
+      : "";
+  // A path set at the scope shown can be cleared from here.
+  const mine = scopeWs ? r.source === "workspace" : r.source === "setting";
+  return (
+    `<div class="rt" data-runtime="${id}" data-available="${r.available ? "true" : "false"}">` +
+    `<div class="rt-n">${name}</div>` +
+    `<div class="rt-s">${status}</div>` +
+    `<div class="rt-w">${where}</div>` +
+    `<div class="rt-a"><button type="button" class="btn sm" data-set-path="${id}">Set path…</button>` +
+    (mine
+      ? ` <button type="button" class="btn sm" data-clear-path="${id}">Clear</button>`
+      : "") +
+    `</div>` +
+    `<form class="rt-f" data-path-form="${id}" hidden>` +
+    `<label class="rt-fl" for="rt-in-${id}">Path to ${escR(r.label || r.id)}${scopeWs ? ` for ${escR(scopeWs)}` : " (every workspace)"}</label>` +
+    `<input type="text" id="rt-in-${id}" class="den-mono" spellcheck="false" autocomplete="off" placeholder="/absolute/path/to/${escR(r.id === "den-claude" ? "claude" : r.id)}" value="${escR(mine ? r.path || "" : "")}">` +
+    `<button type="submit" class="btn sm primary">Save</button> <button type="button" class="btn sm" data-cancel-path>Cancel</button>` +
+    `<div class="rt-err" role="alert" hidden></div></form>` +
+    `</div>`
+  );
+}
+
+/** The Runtimes row: the list, a workspace selector, Set path… and Clear. */
+function renderRuntimes(host, ctx) {
+  const wss = ctx.workspaces || [];
+  let ws = "";
+  const draw = (rows, note) => {
+    host.innerHTML =
+      `<div class="rt-scope"><label for="rt-ws">Paths for</label> <select id="rt-ws" data-focus-key="rt-ws">` +
+      `<option value="">every workspace (user.yml)</option>` +
+      wss
+        .map(
+          (w) =>
+            `<option value="${escR(w)}"${w === ws ? " selected" : ""}>${escR(w)} (workspaces.yml)</option>`,
+        )
+        .join("") +
+      `</select></div>` +
+      (note ? `<div class="set-note">${escR(note)}</div>` : "") +
+      `<div class="rt-list" role="list">${rows.map((r) => runtimeRowHtml(r, ws)).join("")}</div>`;
+  };
+  const load = () => {
+    // Under an invalid config the runtimes answer 422: say why, ask nothing.
+    if (ctx.shell?.configInvalid?.() === true)
+      return draw([], "Fix the config first: the runtimes are read from it.");
+    return ctx.shell
+      .api(
+        "GET",
+        `/api/agents/runtimes${ws ? `?workspace=${encodeURIComponent(ws)}` : ""}`,
+      )
+      .then((b) =>
+        // Only what has a CLI to find: generic is the persona's argv.
+        draw((b?.runtimes || []).filter((r) => r.setting)),
+      )
+      .catch((e) => draw([], e?.message || "The runtimes did not load."));
+  };
+  host.addEventListener("change", (e) => {
+    if (e.target.id !== "rt-ws") return;
+    ws = e.target.value;
+    void load();
+  });
+  host.addEventListener("click", async (e) => {
+    const b = e.target.closest("button");
+    if (!b) return;
+    const row = b.closest(".rt");
+    const form = row?.querySelector(".rt-f");
+    if (b.dataset.setPath && form) {
+      form.hidden = false;
+      form.querySelector("input").focus();
+    } else if (b.hasAttribute("data-cancel-path") && form) {
+      form.hidden = true;
+    } else if (b.dataset.clearPath) {
+      await savePath(b.dataset.clearPath, null, form);
+    }
+  });
+  host.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const form = e.target.closest(".rt-f");
+    if (!form) return;
+    const bin = form.querySelector("input").value.trim();
+    if (!bin) return;
+    await savePath(form.dataset.pathForm, bin, form);
+  });
+  async function savePath(id, bin, form) {
+    const err = form?.querySelector(".rt-err");
+    const btns = form ? [...form.querySelectorAll("button")] : [];
+    btns.forEach((x) => (x.disabled = true));
+    try {
+      await ctx.shell.api(
+        "POST",
+        `/api/agents/runtimes/${encodeURIComponent(id)}/path`,
+        {
+          scope: ws ? "workspace" : "global",
+          ...(ws ? { workspace: ws } : {}),
+          bin,
+        },
+      );
+      await load();
+    } catch (x) {
+      // Its refusal is shown here, under the field, not as a toast.
+      if (err) {
+        err.textContent = x?.message || "Not saved";
+        err.hidden = false;
+      }
+    } finally {
+      btns.forEach((x) => (x.disabled = false));
+    }
+  }
+  void load();
+}
+
 /** Register Den's categories and rows with the shell's SETTINGS registry. */
 export function registerDenSettings(shell) {
   for (const c of DEN_SETTING_CATEGORIES) shell.registerSettingsCategory(c);

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

@@ -95,7 +95,9 @@
         top: 0;
         z-index: 4;
         background: var(--bg);
-        box-shadow: 0 -20px 0 0 var(--bg), 0 12px 0 0 var(--bg);
+        box-shadow:
+          0 -20px 0 0 var(--bg),
+          0 12px 0 0 var(--bg);
       }
       .ph .act {
         margin-left: auto;
@@ -352,6 +354,93 @@
         border-radius: 999px;
         padding: 0 6px;
       }
+      /* Settings › Agents › Runtimes (AG-0.5): one row per runtime. */
+      .set-custom {
+        flex: 1 1 100%;
+        min-width: 0;
+      }
+      .rt-scope {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+        font-size: 13px;
+        color: var(--muted);
+        margin-bottom: 6px;
+      }
+      .rt-list {
+        display: grid;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-button);
+      }
+      .rt {
+        display: grid;
+        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(
+            0,
+            2fr
+          ) auto;
+        align-items: center;
+        gap: 4px 12px;
+        padding: 8px 10px;
+        font-size: 13px;
+      }
+      .rt + .rt {
+        border-top: 1px solid var(--border);
+      }
+      .rt-v {
+        color: var(--muted);
+      }
+      .rt-n .set-tag {
+        white-space: nowrap;
+      }
+      .rt-ok {
+        color: var(--ok);
+      }
+      .rt-bad {
+        color: var(--muted);
+        overflow-wrap: anywhere;
+      }
+      .rt-w {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .rt-p {
+        font-size: 12px;
+      }
+      .rt-f {
+        grid-column: 1 / -1;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px;
+      }
+      .rt-f[hidden],
+      .rt-err[hidden] {
+        display: none;
+      }
+      .rt-fl {
+        flex-basis: 100%;
+        color: var(--muted);
+        font-size: 12.5px;
+      }
+      .rt-f input {
+        flex: 1 1 260px;
+        min-width: 0;
+      }
+      .rt-err {
+        flex-basis: 100%;
+        color: var(--bad);
+        font-size: 12.5px;
+        overflow-wrap: anywhere;
+      }
+      @media (max-width: 640px) {
+        .rt {
+          grid-template-columns: minmax(0, 1fr) auto;
+        }
+        .rt-w {
+          grid-column: 1 / -1;
+        }
+      }
       .set-langs {
         display: grid;
         gap: 4px;

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

@@ -22,10 +22,10 @@
  *            each part an .ib button with a .pop menu (an ARIA menu: ↑/↓,
  *            Home, End, Enter; Escape and a click outside close it) ·
  *            the ⌘K search field (R5) · the status chip (R6) · the Runs
- *            chip (R7) · the lock chip (R8) · What's new · ◐ ▾ (R10).
+ *            chip (R7) · the sudo chip (R8, only while asked) · What's new · ◐ ▾ (R10).
  *            shell.js draws them; topbar.js (through header.js) drives the
  *            chips, the command palette (R17), the status drawer (R15) and
- *            the lock popover; appearance.js the user menu (dev.20).
+ *            the admin-password prompt; appearance.js the user menu (dev.20).
  *   rail     Pinned, then the NAV registry by GROUPS (Develop, Verify,
  *            Ship, a distribution's own), then Settings and the collapse
  *            toggle. One tab stop (the current page); ↑/↓, Home and End
@@ -251,24 +251,20 @@
     "dock.err": "failed",
     "dock.last": "Last run: {s} ↗",
     "dock.resize": "Drag to resize",
-    // The lock chip and its popover (R8).
-    "lock.locked": "Locked",
-    "lock.unlocked": "Unlocked",
-    "lock.title": "Unlock to start, stop and restart services and agents",
-    "lock.nopw": "Passwordless sudo (NOPASSWD): no admin password needed",
-    "lock.session": "Unlocked for this session",
-    "lock.sessionDesc":
-      "Unlocked for this session: start, stop and restart work on every page.",
+    // The admin password, asked only when a command needs sudo (R8, LK-0).
+    "lock.waiting": "Admin password needed",
+    "lock.needs": "{cmd} needs your admin password",
+    "lock.cmd": "A command",
     "lock.cfg":
       "Saving the password is off: set secrets.provider and secrets.refs.sudo in {file}.",
     "lock.update": "Update stored password",
     "lock.saveTo": "Save to {s}",
     "lock.pw": "Admin password",
-    "lock.go": "Unlock",
+    "lock.go": "Continue",
     "lock.checking": "Checking…",
-    "lock.note": "Den asks once per session. Agents can't unlock.",
-    "lock.again": "Enter the password again…",
-    "lock.saveFailed": "Unlocked, but saving to {s} failed: {err}",
+    "lock.note": "Den uses it only for sudo. Agents can't enter it.",
+    "lock.saved": "Admin password kept for this session",
+    "lock.saveFailed": "Kept for this session, but saving to {s} failed: {err}",
     "lock.wrong": "Incorrect password — try again",
     "lock.reqFailed": "Request failed — is the server running?",
     // What's new (R9) and the stale-server pill.
@@ -402,11 +398,13 @@
     "set.graph.density": "Cards",
     "set.graph.panelWidth": "Details panel",
     "set.workspace.editor": "IDE for this workspace",
+    "set.agents.runtimes": "Runtimes",
     "set.cli.local_dev": "Local environment",
     "set.cli.cli_tabs": "Terminal tabs",
     "set.cli.log_window_lines": "Log pane lines",
     "set.cli.web_port": "Your web port",
     "set.cli.signin": "Browser sign-in",
+    "set.cli.sudo": "Admin password",
     "set.distribution.brand": "Product name",
     "set.distribution.github_org": "GitHub org",
     "set.distribution.orgs": "Org labels",
@@ -495,6 +493,11 @@
     "ag.rt.fix":
       "Install it, or set {key} to its path in {file}, or run {cmd}.",
     "ag.rt.unknown": "No runtime {id} here.",
+    "ag.rt.denTools": "Den tools: coming",
+    "ag.rt.ownCli":
+      "It runs as its own CLI in the workspace: Den's tools and permission modes are coming for it.",
+    "ag.rt.notInstalled": "not installed",
+    "ag.rt.needsArgv": "the persona has no argv template",
   };
   // The languages the UI has a catalog for, each named in itself (a name is
   // never translated). The server's list is ui-language.ts's UI_LANGUAGES.
@@ -1347,9 +1350,9 @@
 
   // ── the frame ──────────────────────────────────────────────────────────
   // The top bar after the scope, in the prototype's order (dev.20): the ⌘K
-  // search field (R5), then .chips: status (R6), Runs (R7), the lock (R8),
+  // search field (R5), then .chips: status (R6), Runs (R7), the sudo ask (R8),
   // What's new (R9) and ◐ ▾ (R10, appearance.js fills #den-user). The
-  // chips start neutral ("Checking…", "Runs", "Locked") and topbar.js
+  // chips start neutral ("Checking…", "Runs"; the sudo chip hidden) and topbar.js
   // paints them: a cold load never shows a partial red.
   var chips =
     '<button type="button" class="den-search" id="den-search" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K" aria-label="' +
@@ -1366,10 +1369,10 @@
     '<span class="den-dot off" aria-hidden="true"></span><span class="den-n den-lbl-l">' +
     esc(t("runs.title")) +
     "</span></button>" +
-    '<button type="button" class="den-chip" id="den-lock" aria-haspopup="dialog" aria-expanded="false" title="' +
-    esc(t("lock.title")) +
-    '"><span class="den-lock-ic" aria-hidden="true">🔒</span><span class="den-lbl-l">' +
-    esc(t("lock.locked")) +
+    // LK-0: shown only while a run waits for the admin password (topbar.js).
+    '<button type="button" class="den-chip" id="den-lock" aria-haspopup="dialog" aria-expanded="false" hidden>' +
+    '<span class="den-lock-ic" aria-hidden="true">🔑</span><span class="den-lbl-l">' +
+    esc(t("lock.waiting")) +
     "</span></button>" +
     '<button class="den-ib v-pill" id="version-pill" onclick="openChangelog()" title="' +
     esc(t("v.title")) +
@@ -3853,7 +3856,7 @@
     "  max-height: calc(100vh - 72px); overflow-y: auto; box-sizing: border-box;",
     "  font: 14px/1.45 var(--sans); color: var(--text); }",
     ".den-pop:focus { outline: none; }",
-    // LK-1: the lock popover is a <dialog> in the top layer (a popover, or
+    // LK-1: the admin-password prompt is a <dialog> in the top layer (a popover, or
     // a modal over another modal): placed by its top/left, no UA box.
     "dialog.den-pop { margin: 0; inset: auto; max-width: none; }",
     "dialog.den-pop::backdrop { background: transparent; }",
@@ -3909,6 +3912,8 @@
     ".den-chip .den-n { font-variant-numeric: tabular-nums; }",
     ".den-chip .den-dot, .den-drawer .den-dot, .den-pal .den-dot { margin: 0; }",
     ".den-chip[aria-expanded='true'] { border-color: var(--border-strong); }",
+    ".den-chip[hidden] { display: none; }",
+    "#den-lock { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }",
     ".den-dot.run { background: var(--accent); animation: den-pulse 1.2s infinite; }",
     ".den-dot.pending { background: var(--faint); animation: den-pulse 1.2s infinite; }",
     "@keyframes den-pulse { 50% { opacity: .35; } }",
@@ -3973,7 +3978,7 @@
     ".den-pal li.den-pal-empty { cursor: default; color: var(--muted); }",
     ".den-pal .den-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border);",
     "  color: var(--faint); font-size: 12px; flex-wrap: wrap; }",
-    // The lock popover (.pop form, .pop input, .note: R8)
+    // The admin-password prompt (.pop form, .pop input, .note: R8, LK-0)
     ".den-pop form { display: grid; gap: 8px; padding: 6px 8px 8px; width: 260px; box-sizing: content-box; margin: 0; }",
     ".den-pop input:not([type='checkbox']) { border: 1px solid var(--border); background: var(--bg); color: var(--text);",
     "  border-radius: var(--radius-button); padding: 6px 8px; font: inherit; font-size: 13.3333px; line-height: normal; }",
@@ -3982,7 +3987,7 @@
     ".den-pop .den-lock-save { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }",
     ".den-pop .den-lock-save[hidden], .den-pop .den-lock-err[hidden], .den-mslot[hidden] { display: none; }",
     ".den-pop .den-lock-err { color: var(--bad); font-size: 12.5px; }",
-    ".den-pop .den-lock-desc { padding: 2px 8px 6px; color: var(--muted); font-size: 12.5px; max-width: 260px; }",
+    ".den-pop #den-lock-t { overflow-wrap: anywhere; }",
     // What's new (.ib.whatsnew + .badge-dot)
     "#den-shell .v-pill { font: inherit; padding: 4px 8px; border: 1px solid transparent;",
     "  border-radius: var(--radius-button); color: var(--muted); flex-shrink: 0; }",