@monster-orange/den 0.4.2 → 0.4.4

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",
@@ -444,6 +442,7 @@
     "ag.persona": "Persona",
     "ag.runtime": "Runtime",
     "ag.runtime.auto": "The persona's",
+    "ag.runtime.default": "{name} (persona default)",
     "ag.unavailable": "unavailable",
     "ag.go": "Start",
     "ag.starting": "Starting…",
@@ -484,6 +483,21 @@
     "ag.pal": "Agents › {ws} / {name}",
     "ag.palStart": "Start agent…",
     "ag.cap": "Up to 4 panes: {id}'s closed to make room (it keeps running)",
+    "ag.rt.ready": "Starts {name} {version} from",
+    "ag.rt.readyNoVer": "Starts {name} from",
+    "ag.rt.notFound": "{name} not found.",
+    "ag.rt.searched": "Searched:",
+    "ag.rt.more": "and {n} more",
+    "ag.rt.nowhere": "no directories",
+    "ag.rt.refused": "{name} can't start: {why}.",
+    "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.
@@ -1336,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="' +
@@ -1355,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")) +
@@ -3361,6 +3375,31 @@
     }
   }
 
+  // 0.4.3: the edge is reachable from other machines (the server fills
+  // data-edge-exposed on #den-shell). One line; dismissed per browser.
+  var EDGE_LS = "den.edgeExposed.dismissed";
+  var edgeDismissed = false;
+  try {
+    edgeDismissed = localStorage.getItem(EDGE_LS) === "1";
+  } catch (e) {
+    edgeDismissed = false;
+  }
+  if (host.dataset.edgeExposed && !edgeDismissed)
+    showBanner("edge-exposed", {
+      text: host.dataset.edgeExposed,
+      action: {
+        label: t("api.close"),
+        run: function () {
+          try {
+            localStorage.setItem(EDGE_LS, "1");
+          } catch (e) {
+            /* no storage: dismissed for this page only */
+          }
+          hideBanner("edge-exposed");
+        },
+      },
+    });
+
   // The config fails validation (0.4.1): the server marks every page it
   // serves while it does (data-config-invalid on #den-shell), and the first
   // /api answer of 422 config_invalid marks it too. From then on the shell
@@ -3817,6 +3856,10 @@
     "  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 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; }",
     ".den-pop :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }",
     ".den-pop .den-ml { font: 11px var(--mono); color: var(--faint); text-transform: uppercase;",
     "  letter-spacing: .07em; padding: 6px 8px 2px; }",
@@ -3869,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; } }",
@@ -3933,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; }",
@@ -3942,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; }",