@monster-orange/den 0.4.2 → 0.4.3

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 || {}));

package/src/ui/server/public/local-dev.html

@@ -1371,6 +1371,34 @@
       }
       .agent-form select {
         max-width: 320px;
+        min-width: 0;
+      }
+      .agent-form-help {
+        flex-basis: 100%;
+        margin: 0;
+        font-size: 12px;
+        color: var(--muted);
+        overflow-wrap: anywhere;
+      }
+      .agent-form-help[hidden],
+      .agent-form-ready[hidden] {
+        display: none;
+      }
+      /* AG-0.2: the runtime it will run, or why it can't (the mock's .helpl). */
+      .agent-form-ready {
+        flex-basis: 100%;
+        order: 1;
+        margin: 0;
+        font-size: 12px;
+        line-height: 1.4;
+        color: var(--faint);
+        overflow-wrap: anywhere;
+      }
+      .agent-form-ready[data-tone="warn"] {
+        color: var(--warn);
+      }
+      .agent-form-ready .mono {
+        font-family: var(--mono);
       }
       .agent-cwd {
         max-width: 280px;
@@ -1518,8 +1546,9 @@
             .replace(/"/g, """);
 
         // ── The lock (R8): the shell's lock chip and popover (topbar.js) ──────────
-        // requireSudo() is this page's lock rule, shared with every page: true
-        // when unlocked; otherwise the lock popover opens on its password
+        // requireSudo() is this page's lock rule, shared with every page
+        // (async): true when unlocked, after asking the server and the vault
+        // (LK-2, LK-3); otherwise the lock popover opens on its password
         // field and the command doesn't run.
         function requireSudo() {
           return requireUnlock();
@@ -3021,8 +3050,8 @@
 
         // ── Workspace-level command (SSE) ─────────────────────────────────────────
         // Routes output to each service's own tab as `label` events arrive.
-        window.runWorkspaceSync = function () {
-          if (!requireSudo()) return;
+        window.runWorkspaceSync = async function () {
+          if (!(await requireSudo())) return;
           setAllButtons(true);
           setWsStatus("syncing…");
           const es = new EventSource("/api/workspace/sync");
@@ -3073,8 +3102,8 @@
         // rather than a shared pane, so it sits with everything else for that
         // system. Buttons are not globally disabled: it is one repo.
         const _syncing = new Set();
-        window.runRepoSync = function (repo) {
-          if (!requireSudo()) return;
+        window.runRepoSync = async function (repo) {
+          if (!(await requireSudo())) return;
           if (_syncing.has(repo)) return; // already in flight — ignore re-entry
           _syncing.add(repo);
 
@@ -3126,8 +3155,8 @@
           };
         };
 
-        window.runWorkspaceCmd = function (cmd, addresses) {
-          if (!requireSudo()) return;
+        window.runWorkspaceCmd = async function (cmd, addresses) {
+          if (!(await requireSudo())) return;
           const only =
             Array.isArray(addresses) && addresses.length
               ? `&addresses=${encodeURIComponent(addresses.join(","))}`
@@ -3240,8 +3269,8 @@
         // is derived on the SERVER (see the `seed` param in /api/workspace/exec):
         // its rules are load-bearing, and the already-healthy skip it relies on is
         // suppressed whenever an explicit address list is sent.
-        window.runUpWithDeps = function (repo) {
-          if (!requireSudo()) return;
+        window.runUpWithDeps = async function (repo) {
+          if (!(await requireSudo())) return;
           void runWorkspaceCmdAsync("up", null, {
             seed: repo,
             undismiss: true,
@@ -3252,16 +3281,16 @@
         // same closure as "up with deps", reversed. Derived server-side for the
         // same reason as its counterpart: the already-stopped skip is suppressed
         // when an explicit address list is sent.
-        window.runDownWithDeps = function (repo) {
-          if (!requireSudo()) return;
+        window.runDownWithDeps = async function (repo) {
+          if (!(await requireSudo())) return;
           void runWorkspaceCmdAsync("down", null, {
             seed: repo,
             undismiss: true,
           });
         };
 
-        window.runCmd = function (address, repo, service, cmd) {
-          if (!requireSudo()) return;
+        window.runCmd = async function (address, repo, service, cmd) {
+          if (!(await requireSudo())) return;
           // Explicit single-service action — undo any prior dismissal so its pane returns.
           clearDismissed(address);
           // up/restart/down go through the workspace-exec runner: it uses the full

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

@@ -472,7 +472,7 @@ export const DEN_SETTINGS = [
     category: "cli",
     label: "Browser sign-in",
     description:
-      "Signing in is needed only when this server is reached beyond this machine (the edge, or a LAN address); on localhost nothing asks for it. __DEN_CLI__ web login prints a sign-in link; __DEN_CLI__ web sessions lists signed-in browsers.",
+      "Signing in is needed only when this server is reached from another machine (through the edge, or a LAN address); on localhost, and through the edge from this machine, nothing asks for it. __DEN_CLI__ web login prints a sign-in link; __DEN_CLI__ web sessions lists signed-in browsers.",
     keywords: ["sign in", "sign out", "login", "logout", "session", "browser"],
     scope: "user",
     control: {

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

@@ -444,6 +444,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 +485,16 @@
     "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.",
   };
   // 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.
@@ -3361,6 +3372,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 +3853,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 lock popover 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; }",

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

@@ -15,9 +15,18 @@
  *                     form in a popover (Local Dev's sudo banner, moved)
  *
  * Exports for pages (through header.js): requireUnlock() (Local Dev's lock
- * rule: true when unlocked, else the lock popover opens), isUnlocked(),
- * onLockChange(fn), setServiceRunner(fn) (the page that runs Start and
- * Restart itself), takePendingAction().
+ * rule, async: true when unlocked, else the lock popover opens), and
+ * checkUnlock() and unlockWith(password) for a modal that asks inline
+ * (LK-1), isUnlocked(), onLockChange(fn), setServiceRunner(fn) (the page
+ * that runs Start and Restart itself), takePendingAction().
+ *
+ * The lock (LK, 0.4.3): the page's own idea of it is never the last word.
+ * When it thinks it's locked, an action asks the server again first
+ * (another tab or device may have unlocked it, LK-2), then, when a
+ * password is stored in the vault, loads it from there (LK-3, once a page,
+ * on any page; a page view alone never wakes the vault). The popover is in
+ * the top layer (a popover, or its own modal <dialog> when a modal is
+ * open), so no modal ever covers it (LK-1).
  *
  * The pure parts (statusSummary, statusChip, problemCards, drawerGroups,
  * checkLine, rankCommands, runOf) take plain data, so tests need no
@@ -745,9 +754,9 @@ export function setServiceRunner(fn) {
  * stores it for this tab (sessionStorage, not a link anyone could open)
  * and Local Dev takes it once (takePendingAction).
  */
-export function runServiceAction(cmd, svc) {
+export async function runServiceAction(cmd, svc) {
   if (serviceRunner) return serviceRunner(cmd, svc);
-  if (!requireUnlock()) return;
+  if (!(await requireUnlock())) return;
   try {
     sessionStorage.setItem(
       SS_PENDING,
@@ -1135,15 +1144,88 @@ export function onLockChange(fn) {
 }
 
 /**
- * Local Dev's lock rule, for every page: true when unlocked; otherwise the
- * lock popover opens on its password field and the action doesn't run.
+ * Whether the lock is open, asking before saying no (never prompts): the
+ * server's status (LK-2), then, when a password is stored, the vault, once
+ * a page (LK-3). Resolves true when unlocked.
+ */
+let rechecking = null;
+let vaultTried = false;
+export function checkUnlock() {
+  if (lock.unlocked) return Promise.resolve(true);
+  rechecking ??= (async () => {
+    const st = await getJson("/api/sudo-password/status", null);
+    if (st && (st.set || st.passwordless)) {
+      setUnlocked(true, !!st.passwordless && !st.set);
+      return true;
+    }
+    if (!vaultTried) {
+      await checkVault();
+      if (
+        !lock.unlocked &&
+        lock.vault.backendAvailable &&
+        lock.vault.hasStored
+      ) {
+        vaultTried = true;
+        const loaded = await getJson(
+          "/api/sudo-password/load-from-vault",
+          { ok: false },
+          { method: "POST" },
+        );
+        if (loaded.ok && !lock.unlocked) setUnlocked(true);
+      }
+    }
+    return lock.unlocked;
+  })().finally(() => {
+    rechecking = null;
+  });
+  return rechecking;
+}
+
+/**
+ * Local Dev's lock rule, for every page (async): true when unlocked, after
+ * checkUnlock; otherwise the lock popover opens on its password field and
+ * the action doesn't run.
  */
-export function requireUnlock() {
-  if (lock.unlocked) return true;
+export async function requireUnlock() {
+  if (await checkUnlock()) return true;
   openLock();
   return false;
 }
 
+/**
+ * Unlock with `password` (the popover's form, or a modal's own field):
+ * { ok, savedToVault?, vaultError?, error? }. On success every page
+ * subscriber hears it (onLockChange). Never logs the password.
+ */
+export async function unlockWith(password, { saveToVault = false } = {}) {
+  if (!password) return { ok: false, error: t("lock.wrong") };
+  try {
+    const r = await fetch("/api/sudo-password", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ password, saveToVault }),
+    });
+    const data = await r.json().catch(() => ({}));
+    if (r.ok) {
+      if (data.savedToVault) lock.vault.hasStored = true;
+      setUnlocked(true);
+      return {
+        ok: true,
+        savedToVault: !!data.savedToVault,
+        ...(data.vaultError ? { vaultError: data.vaultError } : {}),
+      };
+    }
+    // A wrong password is said in the page's language; another refusal
+    // is the server's own message.
+    return {
+      ok: false,
+      error: r.status === 401 || !data.error ? t("lock.wrong") : data.error,
+    };
+  } catch {
+    return { ok: false, error: t("lock.reqFailed") };
+  }
+}
+
 function setUnlocked(unlocked, passwordless = false) {
   const changed = lock.unlocked !== unlocked || !lock.known;
   lock.known = true;
@@ -1250,6 +1332,7 @@ async function initLock() {
   await checkVault();
   if (!lock.vault.backendAvailable || !lock.vault.hasStored || lock.unlocked)
     return;
+  vaultTried = true;
   const loaded = await getJson(
     "/api/sudo-password/load-from-vault",
     { ok: false },
@@ -1300,7 +1383,10 @@ function openLock() {
   closeOverlay(false);
   sh()?.closeMenu?.();
   if (!lock.unlocked) void checkVault();
-  const pop = document.createElement("div");
+  // LK-1: in the top layer, so no modal covers it. Under an open modal
+  // <dialog> only another modal is reachable (a popover there is inert),
+  // so it opens as its own modal; elsewhere it is a popover.
+  const pop = document.createElement("dialog");
   pop.className = "den-pop den-lock-pop";
   pop.id = "den-lock-pop";
   pop.setAttribute("role", "dialog");
@@ -1335,38 +1421,25 @@ function openLock() {
     err.hidden = true;
     const saveToVault = !!(lock.vault.backendAvailable && saveCb?.checked);
     try {
-      const r = await fetch("/api/sudo-password", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ password: pw, saveToVault }),
-      });
-      const data = await r.json();
-      if (r.ok) {
+      const res = await unlockWith(pw, { saveToVault });
+      if (res.ok) {
         input.value = "";
-        if (data.savedToVault) lock.vault.hasStored = true;
         forceForm = false;
-        setUnlocked(true);
         closeOverlay(true);
         toast(
-          saveToVault && data.vaultError
+          saveToVault && res.vaultError
             ? t("lock.saveFailed", {
                 s: lock.vault.label || lock.vault.backend,
-                err: data.vaultError,
+                err: res.vaultError,
               })
             : t("lock.session"),
         );
         return;
       }
-      // A wrong password is said in the page's language; another refusal
-      // is the server's own message.
-      err.textContent =
-        r.status === 401 || !data.error ? t("lock.wrong") : data.error;
+      err.textContent = res.error;
       err.hidden = false;
       input.value = "";
       input.focus();
-    } catch {
-      err.textContent = t("lock.reqFailed");
-      err.hidden = false;
     } finally {
       if (btn.isConnected) {
         btn.textContent = t("lock.go");
@@ -1376,6 +1449,23 @@ function openLock() {
   };
   draw();
   document.body.appendChild(pop);
+  const underModal = [...document.querySelectorAll("dialog")].some(
+    (d) => d !== pop && d.open && d.matches(":modal"),
+  );
+  try {
+    if (underModal) pop.showModal();
+    else if (typeof pop.showPopover === "function") {
+      pop.setAttribute("popover", "manual");
+      pop.showPopover();
+    } else pop.show();
+  } catch {
+    pop.setAttribute("open", "");
+  }
+  // A cancel (Escape on a modal) closes it as the chip would.
+  pop.addEventListener("cancel", (e) => {
+    e.preventDefault();
+    closeOverlay(true);
+  });
   const r = chip.getBoundingClientRect();
   pop.style.top = `${r.bottom + 6}px`;
   pop.style.left = `${Math.max(8, Math.min(r.left, window.innerWidth - pop.offsetWidth - 8))}px`;
@@ -1441,6 +1531,15 @@ export function initTopbar(opts = {}) {
   $("den-lock")?.addEventListener("click", () =>
     overlay?.kind === "lock" ? closeOverlay(true) : openLock(),
   );
+  // LK-2: back on this tab, the lock may have been opened elsewhere.
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState !== "visible" || lock.unlocked) return;
+    if (sh()?.apiOff?.() === true) return;
+    void getJson("/api/sudo-password/status", null).then((st) => {
+      if (st && (st.set || st.passwordless))
+        setUnlocked(true, !!st.passwordless && !st.set);
+    });
+  });
   document.addEventListener("keydown", (e) => {
     if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "k") {
       e.preventDefault();