@monster-orange/den 0.4.16 → 0.4.17

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

@@ -1168,6 +1168,11 @@
       }
       .tablewrap {
         overflow-x: auto;
+        /* 0.4.17: in a short window (under ~620 px tall) the column's other
+           parts squeezed it to nothing; it keeps room for rows and scrolls. */
+        min-height: 200px;
+        flex-shrink: 0;
+        overflow-y: auto;
         border: 1px solid var(--border);
         border-radius: var(--radius);
         background: var(--surface);
@@ -1285,6 +1290,9 @@
       .tbl-health.ok {
         color: var(--ok);
       }
+      .tbl-up:not(:empty) {
+        margin-left: 8px;
+      }
       .tbl-muted {
         color: var(--muted);
         font-size: 12.5px;
@@ -1330,6 +1338,46 @@
       .tbl-acts .tbl-more-sp {
         display: inline-block;
       }
+      /* Visit ↗ (0.4.17): before Start, so Start/Stop/Restart/Logs and ⋯
+         still line up across rows whether a service has a URL or not. */
+      .tbl-acts .tbl-visit {
+        flex: none;
+        padding-left: 6px;
+        padding-right: 6px;
+        text-decoration: none;
+      }
+      /* The table never scrolls sideways: in a window under 1600px wide
+         (the workspace list beside it) Visit is its ↗; its name and title
+         still say Visit. */
+      @media (max-width: 1599px) {
+        .tbl-visit .tbl-visit-w {
+          display: none;
+        }
+      }
+      table.svc a.repo-name {
+        text-decoration: underline;
+        text-decoration-color: var(--border-strong);
+        text-underline-offset: 2px;
+      }
+      table.svc a.repo-name:hover {
+        text-decoration-color: currentColor;
+      }
+      /* The favourite star (0.4.17): the shell's pins, as on Services. */
+      .tbl-star {
+        background: none;
+        border: 1px solid transparent;
+        border-radius: var(--radius-button);
+        color: var(--faint);
+        cursor: pointer;
+        font-size: 13px;
+        line-height: 1.2;
+        padding: 0 2px;
+      }
+      .tbl-star:hover,
+      .tbl-star[aria-pressed="true"] {
+        color: var(--accent-text);
+        background: var(--sunken);
+      }
       .tbl-btn:disabled {
         opacity: 0.45;
         cursor: not-allowed;
@@ -1769,7 +1817,11 @@
               .querySelectorAll(".ws-menu-dropdown.open")
               .forEach((d) => d.classList.remove("open"));
             const menu = document.getElementById(menuBtn.dataset.menuId);
-            menu?.classList.toggle("open");
+            if (menu?.classList.toggle("open"))
+              window.denShell?.topLayer?.show(menu, menuBtn, {
+                align: "right",
+                gap: 2,
+              });
             return;
           }
           // ↗ open in editor
@@ -1858,8 +1910,16 @@
               if (d.id !== btn.dataset.menuId) d.style.display = "none";
             });
             const menu = document.getElementById(btn.dataset.menuId);
-            if (menu)
-              menu.style.display = menu.style.display === "none" ? "" : "none";
+            if (menu) {
+              const show = menu.style.display === "none";
+              menu.style.display = show ? "" : "none";
+              // 0.4.17: in the top layer, so no row or card clips it.
+              if (show)
+                window.denShell?.topLayer?.show(menu, btn, {
+                  align: "right",
+                  gap: 3,
+                });
+            }
             e.stopPropagation();
             return;
           }
@@ -2102,7 +2162,7 @@
                 <th scope="col">Health</th>
                 <th scope="col">Branch</th>
                 <th scope="col">Mode</th>
-                <th scope="col">Last run</th>
+                <th scope="col">Last test run</th>
                 <th scope="col"><span class="tbl-sr">Actions</span></th>
               </tr></thead>
             </table>
@@ -2272,22 +2332,60 @@
           return [{ key: "", title: null, rows }];
         }
 
-        /** The last run (the runs dock's) of a repo's tab: "✓ 12:03", "running…", "—". */
+        // 0.4.17: each repo's last test run, from the server's run history
+        // (every browser's runs, kept across restarts), and when its
+        // service started (the daemons list), shown apart from it.
+        let _lastRuns = {};
+        let _upSince = new Map();
+        async function loadLastRuns() {
+          const [last, daemons] = await Promise.all([
+            fetch("/api/runs/last")
+              .then((r) => (r.ok ? r.json() : null))
+              .catch(() => null),
+            fetch("/api/service/daemons")
+              .then((r) => (r.ok ? r.json() : []))
+              .catch(() => []),
+          ]);
+          _lastRuns = last?.repos ?? {};
+          _upSince = new Map();
+          for (const d of Array.isArray(daemons) ? daemons : []) {
+            const at = Date.parse(d.startedAt);
+            if (!d.repoName || !Number.isFinite(at)) continue;
+            const cur = _upSince.get(d.repoName);
+            if (cur === undefined || at < cur) _upSince.set(d.repoName, at);
+          }
+          paintLastRuns();
+        }
+
+        /** A repo's last test run: "✓ 12:03", "✗ failed 12:03", "running…", "—". */
         function lastRunText(repo) {
-          const list = runs()?.list?.() ?? [];
-          const mine = list.filter(
-            (r) => r.id === repo || r.id.split("/")[0] === repo,
-          );
-          const r = mine.sort((a, b) => (b.ranAt ?? 0) - (a.ranAt ?? 0))[0];
-          if (!r || (!r.ranAt && !r.running)) return { text: "—", cls: "" };
-          if (r.running) return { text: "running…", cls: "" };
+          const r = _lastRuns[repo];
+          if (!r) return { text: "—", cls: "", title: "" };
+          const title = [r.pillar, r.env].filter(Boolean).join(" · ");
+          if (r.running) return { text: "running…", cls: "", title };
           const t = new Intl.DateTimeFormat(undefined, {
             hour: "2-digit",
             minute: "2-digit",
-          }).format(new Date(r.endedAt ?? r.ranAt));
-          return r.error
-            ? { text: `✗ failed ${t}`, cls: "bad" }
-            : { text: `✓ ${t}`, cls: "ok" };
+          }).format(new Date(r.endedAt ?? r.startedAt));
+          return r.exitCode === 0
+            ? { text: `✓ ${t}`, cls: "ok", title }
+            : { text: `✗ failed ${t}`, cls: "bad", title };
+        }
+
+        /** How long a repo's service has run: "up 2h", or "" when it doesn't. */
+        function upText(repo) {
+          const at = _upSince.get(repo);
+          if (at === undefined) return "";
+          const s = Math.max(0, Math.round((Date.now() - at) / 1000));
+          const d =
+            s < 60
+              ? `${s}s`
+              : s < 3600
+                ? `${Math.floor(s / 60)}m`
+                : s < 86400
+                  ? `${Math.floor(s / 3600)}h`
+                  : `${Math.floor(s / 86400)}d`;
+          return `up ${d}`;
         }
 
         /** A health cell: the dot and the rollup, or the failing check. */
@@ -2335,6 +2433,47 @@
           );
         }
 
+        /** A service's URL to visit (its edge URL if routed, else its local one), or null. */
+        function visitUrl(svc) {
+          const u = svc?.open;
+          return typeof u === "string" && /^https?:\/\//.test(u) ? u : null;
+        }
+        /** The shell's words (its language), else English. */
+        function shT(key, vars, en) {
+          const v = window.denShell?.t?.(key, vars);
+          return v && v !== key ? v : en;
+        }
+        /** Visit ↗ (0.4.17): opens the service in a new tab; nothing without a URL. */
+        function visitBtn(svc, name) {
+          const url = visitUrl(svc);
+          if (!url) return "";
+          const label = shT(
+            "act.visitX",
+            { s: name },
+            `Visit ${name} (opens a new tab)`,
+          );
+          return `<a class="den-btn sm tbl-btn tbl-visit" href="${escHtml(url)}" target="_blank" rel="noopener" aria-label="${escHtml(label)}" title="${escHtml(url)}" data-k="visit:${escHtml(name)}"><span class="tbl-visit-w">${escHtml(shT("act.visit", {}, "Visit"))} </span>↗</a>`;
+        }
+        /** A row's name: a link to visit when the service has a URL. */
+        function nameLink(svc, text) {
+          const url = visitUrl(svc);
+          return url
+            ? `<a class="repo-name" href="${escHtml(url)}" target="_blank" rel="noopener" title="${escHtml(shT("act.visitX", { s: url }, `Visit ${url} (opens a new tab)`))}">${escHtml(text)}</a>`
+            : `<span class="repo-name">${escHtml(text)}</span>`;
+        }
+        /** The favourite star (0.4.17): the shell's pins, the same store as Services. */
+        function starBtn(id) {
+          const sh = window.denShell;
+          if (!sh?.isPinned) return "";
+          const on = sh.isPinned(id);
+          const label = shT(
+            on ? "act.unpinX" : "act.pinX",
+            { s: id },
+            `${on ? "Unpin" : "Pin"} ${id}`,
+          );
+          return `<button type="button" class="tbl-star" data-pin-toggle="${escHtml(id)}" aria-pressed="${on ? "true" : "false"}" aria-label="${escHtml(label)}" title="${escHtml(label)}" data-k="star:${escHtml(id)}">${on ? "★" : "☆"}</button>`;
+        }
+
         /** Action buttons; each one's name says what and on which repo or service. */
         function actBtns(id, o) {
           const b = (act, label, name, extra = "") =>
@@ -2407,12 +2546,12 @@
             ? `<span class="tbl-mode"><span class="badge ${escHtml(mode)}">${escHtml(mode)}</span><button type="button" class="tbl-switch" data-action="tbl-mode" data-repo="${escHtml(repo)}" data-mode="${switchTo}" aria-label="${escHtml(repo)}: use ${mode === "managed" ? "local" : "managed"}" data-k="mode:${escHtml(repo)}">use ${mode === "managed" ? "local" : "managed"}</button></span>`
             : "";
           const head = `<tr class="repo${r.problem ? " prob" : ""}" data-repo="${escHtml(repo)}">
-              <th scope="row">${exp}<span class="repo-name">${escHtml(repo)}</span>${badges}</th>
-              <td>${repoHealth(r)}</td>
+              <th scope="row">${exp}${nameLink(primary, repo)} ${starBtn(repo)}${badges}</th>
+              <td>${repoHealth(r)}<span class="tbl-muted tbl-up" data-up="${escHtml(repo)}">${escHtml(upText(repo))}</span></td>
               <td class="tbl-mono tbl-muted">${escHtml(primary?.branch ?? "")}</td>
               <td>${modeCell}</td>
-              <td class="tbl-muted${run.cls ? " " + run.cls : ""}" data-last="${escHtml(repo)}">${escHtml(run.text)}</td>
-              <td><div class="tbl-acts">${actBtns(repo, { up: !!startOf(repo).length, restart: !!startOf(repo).length })}${repoMenu(r)}</div></td>
+              <td class="tbl-muted${run.cls ? " " + run.cls : ""}" data-last="${escHtml(repo)}" title="${escHtml(run.title)}">${escHtml(run.text)}</td>
+              <td><div class="tbl-acts">${visitBtn(primary, repo)}${actBtns(repo, { up: !!startOf(repo).length, restart: !!startOf(repo).length })}${repoMenu(r)}</div></td>
             </tr>`;
           const fixes = r.fixes
             .map(
@@ -2434,10 +2573,10 @@
                     s,
                     i,
                   ) => `<tr class="sub" id="${subIds[i]}" data-repo="${escHtml(repo)}" data-id="${escHtml(s.id)}"${shown(s) ? "" : " hidden"}>
-              <th scope="row"><span class="repo-name">${escHtml(s.name)}</span>${s.entry ? ' <span class="badge">entry</span>' : ""}</th>
+              <th scope="row">${nameLink(s, s.name)} ${starBtn(s.id)}${s.entry ? ' <span class="badge">entry</span>' : ""}</th>
               <td>${!_lastHealthAt ? CHECKING() : healthCell(status(s), s.health.ok === false ? checkLineOf(s) : healthLine(s))}</td>
               <td></td><td></td><td></td>
-              <td><div class="tbl-acts">${actBtns(s.id, { up: s.commands.includes("up"), restart: s.commands.includes("up") || s.commands.includes("restart") })}<span class="tbl-more-sp" aria-hidden="true"></span></div></td>
+              <td><div class="tbl-acts">${visitBtn(s, s.id)}${actBtns(s.id, { up: s.commands.includes("up"), restart: s.commands.includes("up") || s.commands.includes("restart") })}<span class="tbl-more-sp" aria-hidden="true"></span></div></td>
             </tr>`,
                 )
                 .join("")
@@ -2516,13 +2655,17 @@
           if (keep)
             table.querySelector(`[data-k="${CSS.escape(keep)}"]`)?.focus();
         }
-        /** Only the Last run cells (the dock changed). */
+        /** Only the Last test run and "up" cells (the history changed). */
         function paintLastRuns() {
           document.querySelectorAll("#repo-table [data-last]").forEach((td) => {
             const run = lastRunText(td.dataset.last);
             td.textContent = run.text;
+            td.title = run.title;
             td.className = "tbl-muted" + (run.cls ? " " + run.cls : "");
           });
+          document.querySelectorAll("#repo-table [data-up]").forEach((el) => {
+            el.textContent = upText(el.dataset.up);
+          });
         }
 
         /**
@@ -2581,6 +2724,14 @@
             setTableGroup(g.dataset.group);
             return;
           }
+          const star = e.target.closest("#repo-table [data-pin-toggle]");
+          if (star) {
+            const sh = window.denShell;
+            const id = star.dataset.pinToggle;
+            if (sh?.isPinned(id)) sh.unpin(id);
+            else sh?.pin(id);
+            return;
+          }
           const b = e.target.closest("[data-action^='tbl-']");
           if (!b || b.disabled) return;
           const a = b.dataset.action;
@@ -2641,8 +2792,20 @@
           const v = localStorage.getItem(LS_GROUP);
           if (["none", "app", "org"].includes(v)) _tblGroup = v;
         } catch {}
-        // The Last run column follows the dock.
-        window.denShell?.runs?.onChange?.(paintLastRuns);
+        // The Last test run column: the server's history, read now, when a
+        // run here changes, and every 30 s for runs from elsewhere.
+        void loadLastRuns();
+        // The dock changes on every line of a run: read at most every 2 s.
+        let _lastRunsSoon = null;
+        window.denShell?.runs?.onChange?.(() => {
+          _lastRunsSoon ??= setTimeout(() => {
+            _lastRunsSoon = null;
+            void loadLastRuns();
+          }, 2_000);
+        });
+        setInterval(() => {
+          if (!document.hidden) void loadLastRuns();
+        }, 30_000);
 
         // ── Tab management (one persistent tab per service address) ───────────────
         //

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

@@ -79,7 +79,7 @@ export const ACTIONS = [
   },
   {
     id: "open",
-    label: "Open ↗",
+    label: "Visit ↗",
     for: ["service"],
     tier: "common",
     when: (s) => !!(s.open || s.target?.url),

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

@@ -134,6 +134,10 @@
         font-size: 11px;
         color: var(--muted);
       }
+      .view-note {
+        color: var(--muted);
+        font-size: 12px;
+      }
       #status-text {
         font-size: 11px;
         color: var(--muted);
@@ -678,6 +682,7 @@
         ⟳ Refresh
       </button>
       <span id="status-text">idle</span>
+      <span id="view-note"></span>
       <div class="h-spacer" style="flex: 1"></div>
       <button class="btn" id="waves-btn" title="Edit wave assignment">
         Waves…
@@ -735,6 +740,7 @@
         refreshHealth,
         initWorkspacePill,
       } from "/header.js";
+      import { viewNoteHtml, viewRepos, viewScope } from "/view-scope.js";
 
       // The header's dots report LOCAL service health here: #den-shell pins
       // data-health-env="local" (shell.js). The env picker is the shell's
@@ -819,6 +825,15 @@
           .replace(/>/g, "&gt;")
           .replace(/"/g, "&quot;");
 
+      // 0.4.17: the repos follow the top bar's View (Org and Workspace),
+      // as on Environments: no picker of this page's own (view-scope.js).
+      let viewIn = null;
+      const viewReady = viewScope().then(async (v) => {
+        const note = document.getElementById("view-note");
+        if (note) note.innerHTML = viewNoteHtml(v);
+        viewIn = await viewRepos(v);
+      });
+
       // ── Init ──────────────────────────────────────────────────────────────────
       async function init() {
         try {
@@ -909,7 +924,10 @@
           const data = await fetch(
             `/api/release/status?env=${encodeURIComponent(state.env)}&refresh=${refresh ? 1 : 0}`,
           ).then((r) => r.json());
-          state.rows = data.rows || [];
+          await viewReady;
+          state.rows = (data.rows || []).filter(
+            (r) => !viewIn || viewIn.has(r.repo),
+          );
           setStatus(
             data.error
               ? `error: ${data.error}`

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

@@ -62,8 +62,9 @@
  *   setOrgs([{ id, title, workspaces? }], currentId, onSelect?)
  *                                    two or more: the Org ▾ menu; a pick
  *                                    calls onSelect(id), fires `den:org`
- *   setWorkspaces({ label, title, items, focus, onSelect })
+ *   setWorkspaces({ label, title, items, focus, names, onSelect })
  *                                    the Workspace ▾ menu (header.js)
+ *   workspaceNames()                 every workspace's name, from it
  *   syncEnv()                        repaint Env ▾ from #env-sel
  *   registerCommand({ id, label, keywords?, kind?, run })
  *                                    a ⌘K palette row (R17, dev.20). label
@@ -77,6 +78,8 @@
  *   unregisterCommand(id), commands()
  *   openMenu(anchor, menu)           a .pop menu below anchor (the scope
  *                                    parts' and the user menu's)
+ *   topLayer.show(el, anchor, opts)  a page's own menu in the top layer
+ *                                    (0.4.17), placed by anchor; hide(el)
  *
  * Loading before shell.js: push functions onto window.denShellQueue (an
  * array); each runs with denShell once it exists, and a later push runs at
@@ -160,6 +163,8 @@
     "b.down.one": "{n} down",
     "act.pin": "Pin",
     "act.unpin": "Unpin",
+    "act.visit": "Visit",
+    "act.visitX": "Visit {s} (opens a new tab)",
     "act.pinX": "Pin {s}",
     "act.unpinX": "Unpin {s}",
     "toast.pinned": "Pinned {s}",
@@ -220,6 +225,8 @@
     "kind.app": "App",
     "kind.action": "Action",
     "kind.setting": "Setting",
+    "kind.workspace": "Workspace",
+    "pal.goWs": "Go to workspace {ws}",
     "pal.repos": "{n} repos",
     "pal.repos.one": "{n} repo",
     "pal.restart": "Restart {s}",
@@ -625,6 +632,10 @@
     "ag.pc.busy": "It's working. Change after this turn, or stop it now?",
     "ag.pc.after": "After this turn",
     "ag.pc.now": "Stop it now",
+    "ag.pc.fresh":
+      "{id} is now {p}: nothing to resume yet; started fresh (same conversation id, folder and scope)",
+    "ag.freshLine":
+      "Nothing to resume yet; started fresh (same conversation id, folder and scope)",
     "ag.pc.done": "{id} is now {p}",
     "ag.pc.pending": "{id} becomes {p} when this turn ends",
     "ag.more": "More for {id}",
@@ -776,6 +787,9 @@
       "This session has ended. Its record stays until it is resumed or removed.",
     "ag.switched": "Switched to {p}",
     "ag.exitedLine": "[the session exited{code}]",
+    "ag.refusedUnknown": "the server refused the terminal",
+    "ag.refusedStatus": "the server refused the terminal ({status})",
+    "ag.goWs": "Open {ws} on Workspaces",
     "ag.lost": "[disconnected: {why}]",
     "ag.reconnect": "Reconnect",
     "ag.noBackend":
@@ -1411,6 +1425,116 @@
     return el;
   }
 
+  // ── the top layer (0.4.17): one placement for every menu ─────────────
+  // A menu shown with topShow is in the browser's top layer (a manual
+  // popover), placed by its anchor: below it, above when there's more room
+  // there, kept inside the window. No overflow or stacking ancestor can
+  // clip or cover it, and it stays where it is in the page, so the page's
+  // own click handlers still reach it. It closes when the page hides it
+  // (display: none), its anchor goes, or topHide.
+  var topOpen = [];
+  var TOP_MARGIN = 8;
+  function topSupported(el) {
+    return typeof el.showPopover === "function";
+  }
+  function topPlace(el, anchor, opts) {
+    var r = anchor.getBoundingClientRect();
+    var gap = opts.gap != null ? opts.gap : 4;
+    el.style.maxHeight = "";
+    var w = el.offsetWidth;
+    var h = el.offsetHeight;
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+    var below = vh - r.bottom - gap - TOP_MARGIN;
+    var above = r.top - gap - TOP_MARGIN;
+    var up = h > below && above > below;
+    var room = Math.max(80, up ? above : below);
+    if (h > room) {
+      el.style.maxHeight = room + "px";
+      h = room;
+    }
+    var top = up ? r.top - gap - h : r.bottom + gap;
+    var left = opts.align === "right" ? r.right - w : r.left;
+    left = Math.max(TOP_MARGIN, Math.min(left, vw - w - TOP_MARGIN));
+    // Important, so no page or UA rule (a popover's inset) moves it.
+    el.style.setProperty("top", Math.max(TOP_MARGIN, top) + "px", "important");
+    el.style.setProperty("left", left + "px", "important");
+  }
+  function topIndex(el) {
+    for (var i = 0; i < topOpen.length; i++) if (topOpen[i].el === el) return i;
+    return -1;
+  }
+  function topShow(el, anchor, opts) {
+    if (!el || !anchor) return;
+    opts = opts || {};
+    var i = topIndex(el);
+    if (i >= 0) {
+      topOpen[i].anchor = anchor;
+      topOpen[i].opts = opts;
+    } else {
+      if (topSupported(el)) {
+        if (!el.hasAttribute("popover")) {
+          el.setAttribute("popover", "manual");
+          el.setAttribute("data-den-top-added", "");
+        }
+        try {
+          if (!el.matches(":popover-open")) el.showPopover();
+        } catch (e) {
+          /* not in the document yet: placed as fixed */
+        }
+      }
+      var o = { el: el, anchor: anchor, opts: opts, mo: null };
+      if (typeof MutationObserver === "function") {
+        o.mo = new MutationObserver(function () {
+          topCheck(o);
+        });
+        o.mo.observe(el, {
+          attributes: true,
+          attributeFilter: ["style", "class", "hidden"],
+        });
+      }
+      topOpen.push(o);
+    }
+    el.classList.add("den-toplayer");
+    topPlace(el, anchor, opts);
+  }
+  function topHide(el) {
+    var i = topIndex(el);
+    if (i < 0) return;
+    var o = topOpen.splice(i, 1)[0];
+    if (o.mo) o.mo.disconnect();
+    try {
+      if (el.matches && el.matches(":popover-open")) el.hidePopover();
+    } catch (e) {
+      /* already gone */
+    }
+    if (el.hasAttribute("data-den-top-added")) {
+      el.removeAttribute("popover");
+      el.removeAttribute("data-den-top-added");
+    }
+    el.classList.remove("den-toplayer");
+    el.style.removeProperty("top");
+    el.style.removeProperty("left");
+  }
+  /** The page hid it, or its anchor went: it's closed. */
+  function topCheck(o) {
+    if (
+      !o.el.isConnected ||
+      !o.anchor.isConnected ||
+      o.el.hidden ||
+      getComputedStyle(o.el).display === "none"
+    )
+      topHide(o.el);
+  }
+  function topReplace() {
+    topOpen.slice().forEach(function (o) {
+      topCheck(o);
+      if (topIndex(o.el) >= 0) topPlace(o.el, o.anchor, o.opts);
+    });
+  }
+  window.addEventListener("resize", topReplace);
+  document.addEventListener("scroll", topReplace, true);
+
   // ── menus (.pop, R18): the scope parts' popovers ─────────────────────
   // A menu is { label, items: [{ heading } | { hr: true } | { label, tag?,
   // checked?, href?, onSelect? }] }. Rows with `checked` are radios (✓ when
@@ -1422,6 +1546,7 @@
     if (!openPop) return;
     var o = openPop;
     openPop = null;
+    topHide(o.el);
     if (o.el.remove) o.el.remove();
     o.anchor.setAttribute("aria-expanded", "false");
     // aria-controls names the menu only while it exists.
@@ -1497,15 +1622,14 @@
       }
     });
     pop.innerHTML = html;
-    document.body.appendChild(pop);
+    // Inside a modal, in it: anything outside a modal is inert.
+    var host =
+      (anchor.closest && anchor.closest("dialog[open]")) || document.body;
+    host.appendChild(pop);
     openPop = { el: pop, anchor: anchor };
     anchor.setAttribute("aria-expanded", "true");
     anchor.setAttribute("aria-controls", pop.id);
-    var r = anchor.getBoundingClientRect();
-    var w = pop.offsetWidth;
-    pop.style.top = r.bottom + 6 + "px";
-    pop.style.left =
-      Math.max(8, Math.min(r.left, window.innerWidth - w - 8)) + "px";
+    topShow(pop, anchor, { gap: 6 });
     pop.addEventListener("click", function (e) {
       var row = e.target.closest ? e.target.closest(".den-mi") : null;
       if (!row) return;
@@ -1943,7 +2067,14 @@
    * a link to manage them. onSelect(value, focus): choosing a workspace
    * also makes it the CLI default (header.js).
    */
+  // Every workspace's name, from the Workspace menu's model (header.js).
+  var workspaceNameList = [];
+  function workspaceNames() {
+    return workspaceNameList.slice();
+  }
   function setWorkspaces(model) {
+    workspaceNameList =
+      model && Array.isArray(model.names) ? model.names.slice() : [];
     var btn = document.getElementById("ws-pill");
     if (!btn) return;
     var sep = btn.nextElementSibling;
@@ -4377,6 +4508,7 @@
     setOrg: setOrg,
     setOrgs: setOrgs,
     setWorkspaces: setWorkspaces,
+    workspaceNames: workspaceNames,
     /** Repaint the Env part from #env-sel (after setting its value). */
     syncEnv: syncEnv,
     syncPinToggles: syncPinToggles,
@@ -4385,6 +4517,12 @@
     commands: commands,
     /** A .pop menu below `anchor` (the model as the scope menus'). */
     openMenu: openMenu,
+    /**
+     * The top layer (0.4.17): show(el, anchor, { align: "left"|"right",
+     * gap }) puts a page's own menu above everything, placed by its
+     * anchor; hide(el). The page hiding it (display: none) closes it too.
+     */
+    topLayer: { show: topShow, hide: topHide },
     closeMenu: function () {
       closeMenu(false);
     },
@@ -4544,6 +4682,13 @@
     "  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; }",
+    // The top layer (0.4.17): a page's menu placed by its anchor (topShow), not
+    // where the UA puts a popover.
+    // No inset here: top and left are topPlace's (an !important inset beat them,
+    // and every menu sat at the window's corner, 0.4.17-dev.0).
+    ".den-toplayer { position: fixed !important; margin: 0 !important;",
+    "  right: auto !important; bottom: auto !important; z-index: 1000; overflow-y: auto;",
+    "  color: var(--text); }",
     // 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; }",