@monster-orange/den 0.2.8 → 0.4.0

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

@@ -1,31 +1,72 @@
 /**
- * Shared header logic — service health dots
- *
- * Both index.html and services.html include this script.
- * It expects:
- *   - a <div id="health"> in the header to render dots into
- *   - a <select id="env-sel"> whose change event triggers a re-ping
+ * The shell's behaviour (shell.js draws the frame: top bar and rail):
+ * the health poll that feeds the status chip and drawer (topbar.js), the
+ * version pill and changelog, the workspace menu, the env picker (one for
+ * the whole shell) and the log badge. Every page imports it. It expects
+ * a <select id="env-sel"> (shell.js) whose change event triggers a re-ping.
  *
  * Health data is driven entirely by __DEN_CLI__.json manifests — no hardcoded
  * service names. Each registered service that declares a health.url for
- * the current env gets a dot.
+ * the current env is counted.
  */
 
-import {
-  buildWorkspaceMenuModel,
-  buildWorkspacePillModel,
-} from "./workspace-picker.js";
+import { buildScopeMenuModel } from "./workspace-picker.js";
+import { initAppearance } from "./appearance.js";
+import { versionLabel } from "./version-label.js";
 import { changelogView } from "./changelog-view.js";
+import { buildRow, healthCycle, paintGate, shellHealth } from "./health-fit.js";
+import { initTopbar, paintChecking, paintStatus } from "./topbar.js";
+import { registerDenSettings } from "./settings-registry.js";
+
+/** The shell's message lookup (R19; shell.js MESSAGES). */
+const t = (key, vars) =>
+  typeof window !== "undefined" && window.denShell?.t
+    ? window.denShell.t(key, vars)
+    : key;
+const escT = (key, vars) =>
+  String(t(key, vars)).replace(
+    /[&<>"]/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
+  );
+
+export {
+  isUnlocked,
+  onLockChange,
+  problemCards,
+  problemFix,
+  requireUnlock,
+  setServiceRunner,
+  takePendingAction,
+} from "./topbar.js";
+export { buildRow } from "./health-fit.js";
+
+// Every page with this header gets the appearance controls (mode, theme)
+// and the top bar's chips, palette and drawer (topbar.js).
+void initAppearance();
+// Den's SETTINGS rows on every page, not only /settings: each is a ⌘K
+// palette row (kind "setting"), so "terminal" finds Default terminal.
+if (typeof window !== "undefined")
+  (window.denShellQueue = window.denShellQueue || []).push((sh) => {
+    if (sh?.registerSetting) registerDenSettings(sh);
+  });
+if (typeof document !== "undefined")
+  initTopbar({
+    refreshHealth: (env, opts) => refreshHealth(env, opts),
+    healthEnv: () => healthEnv(),
+    storeOpenLog: (repo, service, env) => storeOpenLog(repo, service, env),
+  });
 
 // 5s between polls — measured from each poll's COMPLETION (schedulePoll
-// re-arms after renderHealthDots resolves), so slow probes can't overlap.
+// re-arms after renderHealth resolves), so slow probes can't overlap.
 const POLL_INTERVAL_MS = 5_000;
 
 // Last painted health results, keyed `repo/service`, so a new poll can seed
 // from them and update dots in place instead of collapsing the strip and
-// regrowing it (which shifted the whole page below — see renderHealthDots).
+// regrowing it (see renderHealth).
 let _healthAcc = new Map();
 let _healthAccGen = -1;
+// The poll generation that last painted _healthAcc (healthCycle's `last`).
+let _healthPaintGen = -1;
 let pollTimer = null;
 // Generation token: every (re)start of polling bumps this. A stale tick (an
 // env the user already switched away from, or a slow fetch resolving late)
@@ -34,46 +75,63 @@ let pollTimer = null;
 // the dots back to the old env.
 let pollGen = 0;
 
-// ── Editor preference (cached) ─────────────────────────────────────────────────
-let _editorKey = null;
-let _editorKeyFetched = false;
-async function _loadEditorKey() {
-  if (_editorKeyFetched) return;
-  _editorKeyFetched = true;
-  try {
-    const data = await fetch("/api/settings").then((r) => r.json());
-    _editorKey = data.editor ?? null;
-  } catch {
-    /* settings unavailable */
-  }
+// ── The env picker: one for the whole shell (0.3.0-dev.14) ─────────────────────
+
+const LS_ENV = "__DEN_CLI__-env";
+let _envReady = null;
+
+/**
+ * Fill the shell's env picker from /api/environments and restore the last
+ * choice (one key for every page). Resolves with the env list once the
+ * picker holds the right value; pages await it before reading #env-sel.
+ * Started as soon as header.js loads.
+ */
+export function envReady() {
+  if (_envReady) return _envReady;
+  _envReady = (async () => {
+    const sel = document.getElementById("env-sel");
+    const envs = await fetch("/api/environments")
+      .then((r) => r.json())
+      .then((v) => (Array.isArray(v) ? v : ["local"]))
+      .catch(() => ["local"]);
+    if (!sel) return envs;
+    const esc = (s) =>
+      String(s).replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
+    sel.innerHTML = envs
+      .map((e) => `<option value="${esc(e)}">${esc(e)}</option>`)
+      .join("");
+    let saved = null;
+    try {
+      saved = localStorage.getItem(LS_ENV);
+    } catch {}
+    if (saved && envs.includes(saved)) sel.value = saved;
+    // The Env ▾ menu (shell.js) shows and sets this select's value.
+    window.denShell?.syncEnv?.();
+    sel.addEventListener("change", () => {
+      try {
+        localStorage.setItem(LS_ENV, sel.value);
+      } catch {}
+    });
+    return envs;
+  })();
+  return _envReady;
 }
+if (typeof document !== "undefined" && document.getElementById?.("env-sel"))
+  void envReady();
 
-function _injectNavStyles() {
-  if (document.getElementById("__DEN_CLI__-nav-styles")) return;
-  const s = document.createElement("style");
-  s.id = "__DEN_CLI__-nav-styles";
-  s.textContent = `
-    .nav-open-btn {
-      background: none; border: none; color: var(--muted, #8b949e);
-      cursor: pointer; font-size: 11px; padding: 0 3px; line-height: 1;
-      opacity: 0; transition: opacity .15s, color .1s;
-      flex-shrink: 0;
-    }
-    .health-item:hover .nav-open-btn,
-    .health-group:hover .nav-open-btn { opacity: 1; }
-    .nav-open-btn:hover { color: var(--accent, #58a6ff) !important; }
-    /* Repo dots boxed by application (Org > Application > Repo). */
-    .health-app {
-      display: flex; align-items: center; gap: 8px;
-      padding: 1px 8px 1px 6px; border: 1px solid var(--border, #30363d);
-      border-radius: 10px;
-    }
-    .health-app-label {
-      font-size: 10px; font-weight: 600; letter-spacing: .03em;
-      color: var(--text, #c9d1d9); opacity: .7; white-space: nowrap;
-    }
-  `;
-  document.head.appendChild(s);
+/** The env picker's value: what this page shows. */
+export function currentEnv() {
+  return document.getElementById("env-sel")?.value ?? "local";
+}
+
+/**
+ * The env the health row checks: the page's pin (Local Dev and Releases are
+ * local by nature: `data-health-env` on #den-shell), else the env picker.
+ */
+export function healthEnv() {
+  return (
+    document.getElementById("den-shell")?.dataset?.healthEnv || currentEnv()
+  );
 }
 
 // ── Changelog modal ────────────────────────────────────────────────────────────
@@ -91,19 +149,19 @@ function _injectChangelogStyles() {
   const style = document.createElement("style");
   style.textContent = `
     .v-pill {
-      font-family: var(--mono, monospace); font-size: 10px;
+      font-family: var(--mono); font-size: 10px;
       padding: 2px 8px; border-radius: 10px;
-      border: 1px solid var(--border, #30363d); color: var(--muted, #8b949e);
+      border: 1px solid var(--border); color: var(--muted);
       background: none; cursor: pointer; user-select: none;
       transition: color .1s, border-color .1s; position: relative;
       flex-shrink: 0;
     }
-    .v-pill:hover { color: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); }
+    .v-pill:hover { color: var(--accent-text); border-color: var(--accent); }
     .v-pip {
       position: absolute; top: -3px; right: -3px;
       width: 7px; height: 7px; border-radius: 50%;
-      background: var(--accent, #58a6ff);
-      border: 1.5px solid var(--bg, #0d1117);
+      background: var(--accent);
+      border: 1.5px solid var(--bg);
       display: none; pointer-events: none;
     }
     .cl-overlay {
@@ -113,58 +171,58 @@ function _injectChangelogStyles() {
     }
     .cl-overlay.open { display: flex; }
     .cl-box {
-      background: var(--surface, #161b22);
-      border: 1px solid var(--border, #30363d);
+      background: var(--surface);
+      border: 1px solid var(--border);
       border-radius: 10px; width: min(580px, 92vw); max-height: 78vh;
       display: flex; flex-direction: column; overflow: hidden;
-      box-shadow: 0 8px 40px rgba(0,0,0,.65);
+      box-shadow: var(--shadow);
     }
     .cl-hdr {
       display: flex; align-items: center; gap: 10px;
-      padding: 13px 18px; border-bottom: 1px solid var(--border, #30363d); flex-shrink: 0;
+      padding: 13px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
     }
     .cl-hdr h3 {
-      font-family: var(--mono, monospace); font-size: 13px; font-weight: 600;
-      color: var(--text, #c9d1d9); flex: 1; margin: 0;
+      font-family: var(--mono); font-size: 13px; font-weight: 600;
+      color: var(--text); flex: 1; margin: 0;
     }
     .cl-close {
-      background: none; border: none; color: var(--muted, #8b949e);
+      background: none; border: none; color: var(--muted);
       font-size: 18px; cursor: pointer; line-height: 1;
       padding: 2px 5px; border-radius: 3px; transition: color .1s, background .1s;
     }
-    .cl-close:hover { color: var(--text, #c9d1d9); background: var(--border, #30363d); }
+    .cl-close:hover { color: var(--text); background: var(--border); }
     .cl-body { overflow-y: auto; padding: 16px 18px; flex: 1; }
     .cl-entry { margin-bottom: 18px; }
     .cl-ver-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
     .cl-ver {
       margin: 0;
-      font-family: var(--mono, monospace); font-size: 13px; font-weight: 700;
-      color: var(--accent, #58a6ff);
+      font-family: var(--mono); font-size: 13px; font-weight: 700;
+      color: var(--accent-text);
     }
-    .cl-date { font-size: 11px; color: var(--muted, #8b949e); }
-    .cl-note { font-size: 12px; color: var(--muted, #8b949e); margin: 0 0 8px; font-style: italic; }
+    .cl-date { font-size: 11px; color: var(--muted); }
+    .cl-note { font-size: 12px; color: var(--muted); margin: 0 0 8px; font-style: italic; }
     .cl-sec {
       font-size: 10px; font-weight: 600; text-transform: uppercase;
-      letter-spacing: .07em; color: var(--muted, #8b949e); margin: 8px 0 4px;
+      letter-spacing: .07em; color: var(--muted); margin: 8px 0 4px;
     }
     .cl-items { list-style: none; padding: 0; margin: 0; }
     .cl-items li {
-      font-size: 12px; color: var(--text, #c9d1d9);
+      font-size: 12px; color: var(--text);
       padding: 2px 0 2px 14px; position: relative; line-height: 1.5;
     }
-    .cl-items li::before { content: "·"; position: absolute; left: 2px; color: var(--muted, #8b949e); }
+    .cl-items li::before { content: "·"; position: absolute; left: 2px; color: var(--muted); }
     .cl-subitems { list-style: none; padding: 0; margin: 2px 0 0 0; }
-    .cl-subitems li { font-size: 11.5px; padding: 1px 0 1px 14px; color: var(--muted, #8b949e); }
+    .cl-subitems li { font-size: 11.5px; padding: 1px 0 1px 14px; color: var(--muted); }
     .cl-subitems li::before { content: "–"; position: absolute; left: 2px; }
     .cl-items code {
-      font-family: var(--mono, monospace); font-size: 10.5px;
-      color: var(--accent, #58a6ff); background: rgba(88,166,255,.1);
+      font-family: var(--mono); font-size: 10.5px;
+      color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent);
       padding: 1px 4px; border-radius: 3px;
     }
-    .cl-divider { border: none; border-top: 1px solid var(--border, #30363d); margin: 14px 0; }
+    .cl-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
     .cl-copy-group { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
     .cl-copy-btn, .cl-slack-btn {
-      background: none; border: 1px solid var(--border, #30363d); color: var(--muted, #8b949e);
+      background: none; border: 1px solid var(--border); color: var(--muted);
       padding: 3px 6px; border-radius: 4px; line-height: 0;
       cursor: pointer; flex-shrink: 0;
       display: inline-flex; align-items: center; justify-content: center;
@@ -172,22 +230,22 @@ function _injectChangelogStyles() {
     }
     .cl-more-btn {
       margin-right: auto; padding: 4px 12px;
-      font: inherit; font-size: 11px; color: var(--muted, #8b949e);
-      background: none; border: 1px solid var(--border, #30363d); border-radius: 6px;
+      font: inherit; font-size: 11px; color: var(--muted);
+      background: none; border: 1px solid var(--border); border-radius: 6px;
       cursor: pointer;
     }
-    .cl-more-btn:hover { color: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); }
-    .cl-copy-btn:hover { color: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); }
-    .cl-copy-btn.copied { color: #3fb950; border-color: #3fb950; }
-    .cl-slack-btn:hover { color: #e01e5a; border-color: #e01e5a; }
-    .cl-slack-btn.copied { color: #3fb950; border-color: #3fb950; }
+    .cl-more-btn:hover { color: var(--accent-text); border-color: var(--accent); }
+    .cl-copy-btn:hover { color: var(--accent-text); border-color: var(--accent); }
+    .cl-copy-btn.copied { color: var(--ok); border-color: var(--ok); }
+    .cl-slack-btn:hover { color: var(--accent-text); border-color: var(--accent); }
+    .cl-slack-btn.copied { color: var(--ok); border-color: var(--ok); }
     .cl-footer {
-      padding: 10px 18px; border-top: 1px solid var(--border, #30363d);
+      padding: 10px 18px; border-top: 1px solid var(--border);
       display: flex; justify-content: flex-end; flex-shrink: 0;
-      background: var(--surface, #161b22);
+      background: var(--surface);
     }
     .cl-got-it {
-      background: var(--accent, #58a6ff); border: none; color: #000;
+      background: var(--accent-fill); border: none; color: var(--on-accent);
       padding: 5px 16px; border-radius: 5px; font-size: 12px;
       font-weight: 600; cursor: pointer;
     }
@@ -201,9 +259,11 @@ function _injectChangelogStyles() {
   overlay.className = "cl-overlay";
   overlay.innerHTML =
     '<div class="cl-box" role="dialog" aria-modal="true" aria-labelledby="cl-title">' +
-    '<div class="cl-hdr"><h3 id="cl-title" tabindex="-1">What\'s new</h3><button type="button" class="cl-close" id="cl-close-btn" title="Close" aria-label="Close">×</button></div>' +
+    `<div class="cl-hdr"><h3 id="cl-title" tabindex="-1">${escT("cl.title")}</h3><button type="button" class="cl-close" id="cl-close-btn" title="${escT("cl.close")}" aria-label="${escT("cl.close")}">×</button></div>` +
     '<div class="cl-body" id="cl-body"></div>' +
-    '<div class="cl-footer"><button type="button" class="cl-more-btn" id="cl-more" aria-controls="cl-body" aria-expanded="false" hidden></button><button class="cl-got-it" id="cl-got-it-btn">Got it</button></div>' +
+    '<div class="cl-footer"><button type="button" class="cl-more-btn" id="cl-more" aria-controls="cl-body" aria-expanded="false" hidden></button><button class="cl-got-it" id="cl-got-it-btn">' +
+    escT("cl.gotIt") +
+    "</button></div>" +
     "</div>";
   document.body.appendChild(overlay);
   document.getElementById("cl-more")?.addEventListener("click", () => {
@@ -224,50 +284,41 @@ function _injectChangelogStyles() {
     ?.addEventListener("click", () => window.closeChangelog());
 
   document.addEventListener("keydown", (e) => {
-    if (!_changelogIsOpen()) return;
-    if (e.key === "Escape") window.closeChangelog();
-    else if (e.key === "Tab") _trapChangelogTab(e);
+    if (!overlay.classList.contains("open")) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      window.closeChangelog();
+    } else if (e.key === "Tab") _trapChangelogTab(e, overlay);
   });
 }
 
-function _changelogIsOpen() {
-  return !!document.getElementById("cl-overlay")?.classList.contains("open");
-}
-
-/** The dialog's focusable controls, in order (hidden ones excluded). */
-function _changelogFocusables() {
-  const box = document.querySelector("#cl-overlay .cl-box");
-  if (!box) return [];
-  return [...box.querySelectorAll("button, a[href], [tabindex]")].filter(
-    (el) => !el.hidden && el.getAttribute("tabindex") !== "-1",
-  );
-}
-
-/** Keep Tab inside the open dialog (aria-modal). */
-function _trapChangelogTab(e) {
-  const els = _changelogFocusables();
-  if (!els.length) return;
-  const first = els[0];
-  const last = els[els.length - 1];
-  const inside = els.includes(document.activeElement);
-  if (e.shiftKey && (document.activeElement === first || !inside)) {
+/** Tab and Shift+Tab stay inside the open dialog (aria-modal). */
+function _trapChangelogTab(e, overlay) {
+  const box = overlay.querySelector(".cl-box");
+  const stops = [
+    ...box.querySelectorAll("button, a[href], [tabindex]:not([tabindex='-1'])"),
+  ].filter((el) => !el.hidden && !el.disabled && el.getClientRects().length);
+  if (!stops.length) return;
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  const at = document.activeElement;
+  // Anything not one of the stops (the focused heading, or outside) counts
+  // as outside: Shift+Tab from the heading must not leave the dialog.
+  const inside = stops.includes(at);
+  if (e.shiftKey ? at === first || !inside : at === last) {
     e.preventDefault();
-    last.focus();
-  } else if (!e.shiftKey && (document.activeElement === last || !inside)) {
+    (e.shiftKey ? last : first).focus();
+  } else if (!inside) {
     e.preventDefault();
     first.focus();
   }
 }
 
-/** What had focus before the dialog opened; it gets it back on close. */
-let _clReturnFocus = null;
-
 function _renderChangelogBody(entries) {
   const body = document.getElementById("cl-body");
   if (!body) return;
   if (!entries.length) {
-    body.innerHTML =
-      '<p style="color:var(--muted,#8b949e);font-size:12px">No entries found.</p>';
+    body.innerHTML = `<p style="color:var(--muted);font-size:12px">${escT("cl.none")}</p>`;
     return;
   }
   const escHtml = (s) =>
@@ -295,9 +346,11 @@ function _renderChangelogBody(entries) {
         '<div class="cl-copy-group">' +
         '<button class="cl-copy-btn" data-cl-version="' +
         escHtml(entry.version) +
-        '" title="Copy as Markdown" aria-label="Copy v' +
-        escHtml(entry.version) +
-        ' as Markdown">' +
+        '" title="' +
+        escT("cl.copyMd") +
+        '" aria-label="' +
+        escT("cl.copyMdX", { v: entry.version }) +
+        '">' +
         '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
         '<rect x="4" y="0.5" width="8.5" height="8.5" rx="1.5"/>' +
         '<path d="M8.5 9v2.5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.5"/>' +
@@ -305,9 +358,11 @@ function _renderChangelogBody(entries) {
         "</button>" +
         '<button class="cl-slack-btn" data-cl-version="' +
         escHtml(entry.version) +
-        '" title="Copy for Slack" aria-label="Copy v' +
-        escHtml(entry.version) +
-        ' for Slack">' +
+        '" title="' +
+        escT("cl.copySlack") +
+        '" aria-label="' +
+        escT("cl.copySlackX", { v: entry.version }) +
+        '">' +
         '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
         '<path d="M1 2a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H7.5L5 12v-3H2a1 1 0 0 1-1-1V2z"/>' +
         "</svg>" +
@@ -352,7 +407,11 @@ function _renderChangelogBody(entries) {
   if (more) {
     more.hidden = !view.toggle;
     if (view.toggle) {
-      more.textContent = view.toggle.label;
+      // changelog-view.js's labels are its en; the button says them in
+      // the page's language.
+      more.textContent = view.toggle.expanded
+        ? t("cl.latest")
+        : t("cl.all", { n: entries.length - 1 });
       more.setAttribute("aria-expanded", String(view.toggle.expanded));
     }
   }
@@ -387,8 +446,8 @@ function _renderChangelogBody(entries) {
           btn.classList.remove("copied");
         }, 2000);
       } catch {
-        btn.title = "Copy failed — try again";
-        setTimeout(() => (btn.title = "Copy as Markdown"), 2000);
+        btn.title = t("cl.copyFailed");
+        setTimeout(() => (btn.title = t("cl.copyMd")), 2000);
       }
     });
   });
@@ -410,8 +469,8 @@ function _renderChangelogBody(entries) {
           btn.classList.remove("copied");
         }, 2000);
       } catch {
-        btn.title = "Copy failed — try again";
-        setTimeout(() => (btn.title = "Copy for Slack"), 2000);
+        btn.title = t("cl.copyFailed");
+        setTimeout(() => (btn.title = t("cl.copySlack")), 2000);
       }
     });
   });
@@ -521,23 +580,27 @@ function _buildMarkdown(entry) {
   return lines.join("\n");
 }
 
+// Where focus goes back to when the dialog closes.
+let _clReturnFocus = null;
+
 window.openChangelog = function () {
   _clShowAll = false;
   _injectChangelogStyles();
   _renderChangelogBody(_changelogEntries);
   const overlay = document.getElementById("cl-overlay");
   if (!overlay) return;
-  if (!overlay.classList.contains("open")) {
-    // A first-visit auto-open has nothing focused: return to the pill.
-    const active = document.activeElement;
+  const wasOpen = overlay.classList.contains("open");
+  if (!wasOpen) {
+    const at = document.activeElement;
+    // Nothing focused (a first-visit auto-open): the version pill.
     _clReturnFocus =
-      active && active !== document.body
-        ? active
+      at && at !== document.body && !overlay.contains(at)
+        ? at
         : document.getElementById("version-pill");
   }
   overlay.classList.add("open");
-  // After .open: while the overlay is display:none the body cannot scroll,
-  // and a reset made then does not stick. Always open at the newest release.
+  // Always opens at the newest release. After `.open`: while the overlay is
+  // display:none the body has no scroll box, so a reset there doesn't stick.
   const body = document.getElementById("cl-body");
   if (body) body.scrollTop = 0;
   // The heading first, so a screen reader starts at the latest notes.
@@ -578,20 +641,16 @@ export async function initChangelog() {
 
   const latest = _changelogEntries[0];
   const pill = document.getElementById("version-pill");
-  if (pill && latest?.version) {
-    pill.querySelector(".v-txt").textContent = "v" + latest.version;
+  if (pill) {
+    let running = null;
+    try {
+      running = (await fetch("/api/server-info").then((r) => r.json())).version;
+    } catch {
+      /* fall back to the changelog's newest version */
+    }
+    const label = versionLabel(running, _changelogEntries);
+    if (label) pill.querySelector(".v-txt").textContent = label;
   }
-  // The pill names the running build (0.2.5-dev.2, not the changelog's
-  // newest heading, 0.2.5), so a prerelease under test says what it is.
-  fetch("/api/server-info")
-    .then((r) => r.json())
-    .then((info) => {
-      const txt = pill?.querySelector(".v-txt");
-      if (txt && typeof info?.version === "string" && info.version) {
-        txt.textContent = "v" + info.version;
-      }
-    })
-    .catch(() => {});
 
   let lastSeen = null;
   try {
@@ -624,7 +683,7 @@ async function getDenConfig() {
 }
 
 /**
- * Apply __DEN_CLI__ config to the nav — hide "Local Dev" when local environment is disabled.
+ * Apply __DEN_CLI__ config to the nav — hide Workspaces when the local environment is disabled.
  * Call once on page load from each page's init function.
  */
 export async function applyDenConfig() {
@@ -633,7 +692,7 @@ export async function applyDenConfig() {
   const localEnabled = config.environments?.includes("local") ?? true;
   if (!localEnabled) {
     document
-      .querySelectorAll("nav a[href='/'], nav a[href='/local-dev']")
+      .querySelectorAll(".den-rail a[href='/local-dev']")
       .forEach((el) => {
         el.style.display = "none";
       });
@@ -646,18 +705,20 @@ export async function applyDenConfig() {
  * before the product name: "Globex › __DEN_CLI__".
  */
 function _renderOrgCrumb(org) {
-  const h1 = document.querySelector("header h1");
+  // The shell's scope has an org part (the prototype's "/ ORG name").
+  if (window.denShell?.setOrg?.(org)) return;
+  const h1 = document.querySelector(".den-top .den-title, header h1");
   if (!h1 || !org?.title || document.getElementById("org-crumb")) return;
   const crumb = document.createElement("span");
   crumb.id = "org-crumb";
-  crumb.title = `Org: ${org.title} (${org.id})`;
+  crumb.title = t("org.titleId", { title: org.title, id: org.id });
   crumb.style.cssText =
-    "font-size:12px;font-weight:600;color:var(--text,#c9d1d9);" +
+    "font-size:12px;font-weight:600;color:var(--text);" +
     "white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:8px";
   crumb.textContent = org.title;
   const sep = document.createElement("span");
   sep.textContent = "›";
-  sep.style.cssText = "color:var(--muted,#8b949e);font-weight:400";
+  sep.style.cssText = "color:var(--muted);font-weight:400";
   crumb.appendChild(sep);
   h1.parentNode.insertBefore(crumb, h1);
 }
@@ -706,243 +767,127 @@ export function groupReposByApplication(repos, apps) {
   return out;
 }
 
-// ── Workspace pill ────────────────────────────────────────────────────────────
-
-// Set when a page opts into switching (initWorkspacePill's `onSwitch`): the
-// pill becomes a dropdown of every known workspace instead of a static label.
-let _wsOnSwitch = null;
-let _wsMenuOpen = false;
+// ── Workspace: the scope breadcrumb's Workspace ▾ menu (R4) ─────────────────
 
 /**
- * Render the active workspace name into <span id="ws-pill">.
- * Pass the id of the env <select> to show the pill only when env is "local".
- * Omit envSelId (or pass null) to always show it (e.g. Local Dev page).
+ * Feed the shell's Workspace part (shell.js #ws-pill, a menu): "All active"
+ * and each active workspace, the focused one marked. Choosing one sets the
+ * view scope (POST /api/scope, a preference) for every page. It replaces
+ * dev.17's workspace pill and its focus menu (one control, not two): the
+ * focus moves only through the menu's separate "Set <ws> as focus".
  *
- * Pass `onSwitch` to make the pill a workspace picker: choosing an entry POSTs
- * `use` (activate + focus, same as `__DEN_CLI__ workspace use`) and then calls
- * onSwitch(name) so the page can reload whatever it derives from the focused
- * workspace. Pages with their own workspace UI (Local Dev) omit it.
+ * The arguments are dev.17's (an env select, an onSwitch callback) and are
+ * no longer used: the view applies to every env.
  */
-export async function initWorkspacePill(envSelId = null, { onSwitch } = {}) {
-  const envSel = envSelId ? document.getElementById(envSelId) : null;
-  _wsOnSwitch = onSwitch ?? null;
-  await _renderPill(envSel);
-  if (envSel) {
-    envSel.addEventListener("change", () => _renderPill(envSel));
-  }
+export async function initWorkspacePill() {
+  await _renderScopeMenu();
 }
 
-/** Re-fetch and re-render the workspace pill (call after switching workspaces). */
+/** Re-fetch and repaint the Workspace part (after a workspace change). */
 export async function refreshWorkspacePill() {
-  const envSel = document.getElementById("env-sel");
-  await _renderPill(envSel);
+  await _renderScopeMenu();
 }
 
-async function _renderPill(envSel) {
-  const el = document.getElementById("ws-pill");
-  if (!el) return;
-  const isLocal = !envSel || envSel.value === "local";
-  if (!isLocal) {
-    _closeWorkspaceMenu();
-    _pillHost(el).style.display = "none";
-    return;
-  }
+async function _renderScopeMenu() {
+  const sh = window.denShell;
+  if (!sh?.setWorkspaces) return;
   try {
-    const data = await fetch("/api/workspaces").then((r) => r.json());
-    const { label, title } = buildWorkspacePillModel(data);
-    if (_wsOnSwitch) {
-      _renderPickerPill(el, data, label, title);
-    } else {
-      el.textContent = label;
-      el.title = data.active?.length > 1 ? title : "";
-    }
-    // The pill starts as inline display:none in every page's markup; clear it
-    // on the pill AND its picker wrapper, or the wrapper shows an empty box.
-    el.style.display = "";
-    _pillHost(el).style.display = "";
+    const [data, scope] = await Promise.all([
+      fetch("/api/workspaces").then((r) => r.json()),
+      fetch("/api/scope")
+        .then((r) => (r.ok ? r.json() : null))
+        .catch(() => null),
+    ]);
+    sh.setWorkspaces({
+      ...buildScopeMenuModel(pageScope(scope, data), data, t),
+      onSelect: _switchScope,
+      onFocus: _setFocus,
+    });
   } catch {
-    _closeWorkspaceMenu();
-    _pillHost(el).style.display = "none";
+    sh.setWorkspaces(null);
   }
 }
 
 /**
- * The element whose visibility tracks the pill's: the wrapper once the picker
- * has been built (so the menu is hidden with it), the pill itself before that.
+ * The Graph page draws what its ?ws= names (it wins over the stored view,
+ * 0.3.0-dev.33), so its pill shows that workspace too: the pill, the URL,
+ * the header's line and the graph agree (0.3.0-dev.34, a consumer's
+ * finding). Elsewhere, and for a ?ws= that names no active workspace,
+ * the stored view.
  */
-function _pillHost(el) {
-  return el.parentElement?.classList.contains("ws-pill-wrap")
-    ? el.parentElement
-    : el;
-}
-
-function _injectWorkspacePickerStyles() {
-  if (document.getElementById("__DEN_CLI__-ws-picker-styles")) return;
-  const s = document.createElement("style");
-  s.id = "__DEN_CLI__-ws-picker-styles";
-  s.textContent = `
-    .ws-pill-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
-    #ws-pill.ws-pill-btn { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 5px; }
-    #ws-pill.ws-pill-btn:hover, #ws-pill.ws-pill-btn.open { border-color: var(--accent, #58a6ff); }
-    .ws-pill-caret { font-size: 8px; opacity: .7; }
-    .ws-menu {
-      display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
-      background: var(--surface, #161b22); border: 1px solid var(--border, #30363d);
-      border-radius: 6px; min-width: 190px; max-height: 280px; overflow-y: auto;
-      box-shadow: 0 4px 16px rgba(0,0,0,.4); padding: 3px 0;
-    }
-    .ws-menu.open { display: block; }
-    .ws-menu-item {
-      display: flex; align-items: center; gap: 8px; width: 100%;
-      background: none; border: none; text-align: left;
-      padding: 6px 12px; cursor: pointer; font-size: 12px;
-      font-family: var(--mono, monospace); color: var(--text, #c9d1d9); white-space: nowrap;
-    }
-    .ws-menu-item:hover { background: var(--border, #30363d); }
-    .ws-menu-item[disabled] { cursor: default; }
-    .ws-menu-mark { width: 10px; flex-shrink: 0; color: var(--accent, #58a6ff); }
-    .ws-menu-tag { margin-left: auto; font-size: 10px; color: var(--muted, #8b949e); }
-  `;
-  document.head.appendChild(s);
+function pageScope(scope, data) {
+  if (location.pathname !== "/graph") return scope;
+  const ws = new URLSearchParams(location.search).get("ws");
+  const active = Array.isArray(data?.active)
+    ? data.active
+    : data?.active
+      ? [data.active]
+      : [];
+  return ws && active.includes(ws) ? { ...scope, scope: ws } : scope;
 }
 
-/** Turn the static pill into a button + dropdown (idempotent). */
-function _renderPickerPill(el, data, label, title) {
-  _injectWorkspacePickerStyles();
-
-  let wrap = el.parentElement;
-  if (!wrap?.classList.contains("ws-pill-wrap")) {
-    wrap = document.createElement("span");
-    wrap.className = "ws-pill-wrap";
-    el.replaceWith(wrap);
-    wrap.appendChild(el);
-    el.classList.add("ws-pill-btn");
-    el.setAttribute("role", "button");
-    el.setAttribute("tabindex", "0");
-    el.addEventListener("click", () => _toggleWorkspaceMenu());
-    el.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        _toggleWorkspaceMenu();
-      }
-    });
-  }
-
-  el.replaceChildren();
-  const name = document.createElement("span");
-  name.textContent = label;
-  const caret = document.createElement("span");
-  caret.className = "ws-pill-caret";
-  caret.textContent = "▾";
-  el.append(name, caret);
-  el.title = title;
-
-  let menu = wrap.querySelector(".ws-menu");
-  if (!menu) {
-    menu = document.createElement("div");
-    menu.className = "ws-menu";
-    wrap.appendChild(menu);
-  }
-  _paintWorkspaceMenu(menu, data);
+/**
+ * On the Graph page a choice replaces ?ws= (All active drops it, a
+ * workspace sets it), so the reload shows the choice rather than the old
+ * ?ws=, which would win over it. The history entry is replaced, not
+ * pushed: Back does not return to a view the picker has left.
+ */
+function followScopeInUrl(value) {
+  if (location.pathname !== "/graph") return;
+  const u = new URL(location.href);
+  if (value === "all") u.searchParams.delete("ws");
+  else u.searchParams.set("ws", value);
+  history.replaceState(history.state, "", u.pathname + u.search + u.hash);
 }
 
-function _paintWorkspaceMenu(menu, data) {
-  const { items } = buildWorkspaceMenuModel(data);
-  menu.replaceChildren();
-  if (items.length === 0) {
-    const empty = document.createElement("button");
-    empty.className = "ws-menu-item";
-    empty.disabled = true;
-    empty.textContent = "No workspaces";
-    menu.appendChild(empty);
+/**
+ * A view filter only: POST /api/scope stores the preference (user.yml
+ * `view`), then the page reloads to show the new view whole. No service,
+ * container, daemon or route changes, and the focus stays where it is.
+ */
+async function _switchScope(value) {
+  try {
+    await window.denShell.api("POST", "/api/scope", { scope: value });
+  } catch (err) {
+    if (err?.denApi) {
+      err.message = t("ws.viewFailed", { msg: err.message });
+      window.denShell.errorToast(err);
+    } else window.denShell?.toast?.(t("ws.viewFailed", { msg: err.message }));
     return;
   }
-  for (const item of items) {
-    const btn = document.createElement("button");
-    btn.className = "ws-menu-item";
-    btn.type = "button";
-    // Selecting an inactive workspace activates it (POST `use`), which only
-    // rewrites workspaces.json — no services are started.
-    btn.title = item.focused
-      ? "Current workspace"
-      : item.active
-        ? "Focus this workspace"
-        : "Activate and focus this workspace";
-
-    const mark = document.createElement("span");
-    mark.className = "ws-menu-mark";
-    mark.textContent = item.focused ? "●" : "";
-    const name = document.createElement("span");
-    name.textContent = item.name;
-    btn.append(mark, name);
-
-    if (!item.active) {
-      const tag = document.createElement("span");
-      tag.className = "ws-menu-tag";
-      tag.textContent = "not active";
-      btn.appendChild(tag);
-    }
-
-    btn.addEventListener("click", () => _switchWorkspace(item));
-    menu.appendChild(btn);
-  }
-}
-
-function _toggleWorkspaceMenu(force = null) {
-  const menu = document.querySelector(".ws-pill-wrap .ws-menu");
-  const pill = document.getElementById("ws-pill");
-  if (!menu) return;
-  _wsMenuOpen = force ?? !_wsMenuOpen;
-  menu.classList.toggle("open", _wsMenuOpen);
-  pill?.classList.toggle("open", _wsMenuOpen);
-}
-
-function _closeWorkspaceMenu() {
-  if (_wsMenuOpen) _toggleWorkspaceMenu(false);
+  followScopeInUrl(value);
+  location.reload();
 }
 
-document.addEventListener("click", (e) => {
-  if (_wsMenuOpen && !e.target.closest(".ws-pill-wrap")) _closeWorkspaceMenu();
-});
-document.addEventListener("keydown", (e) => {
-  if (e.key === "Escape") _closeWorkspaceMenu();
-});
-
-async function _switchWorkspace(item) {
-  _closeWorkspaceMenu();
-  if (item.focused) return;
-  const onSwitch = _wsOnSwitch;
+/**
+ * "Set <ws> as focus": Local Dev's focus action (POST /api/workspaces
+ * `focus`, which writes workspaces.yml and retargets the CLI). Separate
+ * from the view: it is the only thing in the menu that moves the focus.
+ */
+async function _setFocus(name) {
   try {
-    const res = await fetch("/api/workspaces", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      // `use` = activate + focus, matching `__DEN_CLI__ workspace use`. Focus alone
-      // is rejected by the server for a workspace that is not active yet.
-      body: JSON.stringify({ name: item.name, action: "use" }),
+    await window.denShell.api("POST", "/api/workspaces", {
+      name,
+      action: "focus",
     });
-    if (!res.ok) {
-      const text = await res.text().catch(() => "");
-      throw new Error(text || `HTTP ${res.status}`);
-    }
   } catch (err) {
-    alert(`Could not switch to workspace "${item.name}": ${err.message}`);
+    if (err?.denApi) {
+      err.message = t("ws.focusFailed", { msg: err.message });
+      window.denShell.errorToast(err);
+    } else window.denShell?.toast?.(t("ws.focusFailed", { msg: err.message }));
     return;
   }
-  await refreshWorkspacePill();
-  try {
-    await onSwitch?.(item.name);
-  } catch {
-    /* the page's own refresh failing must not break the switch */
-  }
+  location.reload();
 }
 
-// ── Health dots ───────────────────────────────────────────────────────────────
+// ── Health: the status chip and drawer (topbar.js, R6 and R15) ─────────────
 
 /** Call once on page load. Does NOT manage env changes — caller handles that. */
 export async function initHealth() {
-  const env = document.getElementById("env-sel")?.value ?? "local";
+  await envReady();
+  const env = healthEnv();
   const gen = ++pollGen;
-  await renderHealthDots(env, gen);
+  await renderHealth(env, gen);
   schedulePoll(env, gen);
 }
 
@@ -950,120 +895,75 @@ export async function initHealth() {
 export async function refreshHealth(env, { force = false } = {}) {
   const gen = ++pollGen;
   clearTimeout(pollTimer);
-  setCheckingState(env);
-  await renderHealthDots(env, gen, force);
+  // The chip goes neutral while the new env is checked: never red from
+  // the old env's answers, never a partial count.
+  if (env !== _healthEnvPainted) paintChecking();
+  await renderHealth(env, gen, force);
   schedulePoll(env, gen);
 }
 
 // Background tabs throttle chained timers (Chrome clamps to ~1/min after a few
-// hidden minutes), so the dots freeze while hidden — refresh immediately on
+// hidden minutes), so the chip freezes while hidden — refresh immediately on
 // return instead of showing pre-hide state for up to another minute.
 document.addEventListener("visibilitychange", () => {
   if (!document.hidden && pollGen > 0) {
-    refreshHealth(document.getElementById("env-sel")?.value ?? "local");
+    refreshHealth(healthEnv());
   }
 });
 
-/** Immediately show all dots as "checking" so the user can see the env changed. */
-function setCheckingState(env) {
-  const container = document.getElementById("health");
-  if (!container) return;
-  // Pulse all dots yellow while we re-ping
-  container.querySelectorAll(".dot").forEach((d) => {
-    d.className = "dot running";
-  });
-}
-
 function schedulePoll(env, gen) {
   if (gen !== pollGen) return; // superseded by an env switch/re-init
   clearTimeout(pollTimer);
   pollTimer = setTimeout(async () => {
     try {
-      await renderHealthDots(env, gen);
+      await renderHealth(env, gen);
     } finally {
       // ALWAYS re-arm: a thrown/aborted tick must not silently kill polling
-      // (that froze the dots at their last state until a page reload).
+      // (that froze the chip at its last state until a page reload).
       schedulePoll(env, gen);
     }
   }, POLL_INTERVAL_MS);
 }
 
 /**
- * Stream health results, painting each batch as it lands.
- *
- * The checks run concurrently but the slowest are shell probes that shell out
- * to the aws CLI (~0.45s each), so waiting for the whole set made every dot
- * resolve at the pace of the worst one. Streaming paints ~75% of them inside
- * 200ms. Batched through requestAnimationFrame so 30 results cause a handful of
- * repaints, not 30.
+ * Stream health results and paint them through the gate (health-fit.js):
+ * a first cycle (a page load, an env switch) paints once, complete, so a
+ * cold load never shows a partial count or a flash of red; later polls
+ * seed from the last one and repaint debounced.
  */
-async function renderHealthDots(env, gen = pollGen, force = false) {
-  const container = document.getElementById("health");
-  if (!container) return;
-
-  await Promise.all([_loadEditorKey(), _loadApps()]);
-  _injectNavStyles();
-
-  // Merge into the PREVIOUS poll's results rather than starting empty.
-  //
-  // Each poll streams results as checks complete, repainting per batch. Painting
-  // only what has landed so far made the strip collapse (13 items → 2) and
-  // regrow on every 5s poll; because the strip sits above the content, the whole
-  // page below it — the dependency graph especially — visibly jumped ~30px each
-  // time. Seeding from the last known set keeps the item count stable, so a poll
-  // updates dot COLOURS in place instead of rebuilding the row.
-  const acc = new Map(gen === _healthAccGen ? _healthAcc : []);
+async function renderHealth(env, gen = pollGen, force = false) {
+  await _loadApps();
+  const seed = gen === _healthAccGen ? [..._healthAcc] : [];
   _healthAccGen = gen;
-  const keyOf = (r) => `${r.repo}/${r.service}`;
-  let scheduled = false;
-  const paint = () => {
-    scheduled = false;
-    if (gen !== pollGen) return; // a newer poll owns the DOM now
-    _healthAcc = acc;
-    _paintHealthDots(container, env, _sortHealth([...acc.values()]));
-  };
-  const schedule = () => {
-    if (scheduled) return;
-    scheduled = true;
-    requestAnimationFrame(paint);
-  };
-
-  const fresh = new Map();
-  const streamed = await _streamHealth(env, force, (r) => {
-    acc.set(keyOf(r), r);
-    fresh.set(keyOf(r), r);
-    schedule();
+  await healthCycle({
+    seed,
+    gate: _healthGate,
+    stream: (onResult) => _streamHealth(env, force, onResult),
+    // Stream unavailable or broken (older server, a proxy that buffers SSE,
+    // a dropped connection): the plain endpoint completes the cycle.
+    fetchAll: () =>
+      fetch(`/api/health?env=${env}${force ? "&refresh=1" : ""}`, {
+        signal: AbortSignal.timeout(10_000),
+      })
+        .then((r) => r.json())
+        .catch(() => null),
+    // What the chip shows now, for a paint before this cycle completes.
+    last: () => (_healthPaintGen === gen ? _healthAcc : null),
+    paint: (m) => {
+      _healthAcc = m;
+      _healthPaintGen = gen;
+      _paintHealth(env, _sortHealth([...m.values()]));
+    },
+    current: () => gen === pollGen,
   });
-
-  if (!streamed) {
-    // Stream unavailable (older server, proxy that buffers SSE) — fall back to
-    // the plain endpoint so the dots still resolve.
-    try {
-      const rs = await fetch(
-        `/api/health?env=${env}${force ? "&refresh=1" : ""}`,
-        {
-          signal: AbortSignal.timeout(10_000),
-        },
-      ).then((r) => r.json());
-      fresh.clear();
-      for (const r of rs) fresh.set(keyOf(r), r);
-    } catch {
-      /* server unreachable */
-    }
-  }
-  if (gen !== pollGen) return;
-  // Settle on exactly what THIS poll returned, so a service removed from the
-  // workspace disappears instead of lingering from the seeded set.
-  if (fresh.size > 0) {
-    _healthAcc = fresh;
-    _paintHealthDots(container, env, _sortHealth([...fresh.values()]));
-  }
 }
+const _healthGate = paintGate();
+let _healthEnvPainted = null;
 
 /**
  * Stable display order. `idx` is the server's graph-ranked position (entry repo
  * first … infra-stack last); results arrive in completion order, which differs
- * every poll, so sorting by it is what keeps the dots from reshuffling. Falls
+ * every poll, so sorting by it is what keeps the drawer from reshuffling. Falls
  * back to repo name when the server doesn't send `idx`.
  */
 function _sortHealth(results) {
@@ -1077,18 +977,21 @@ function _sortHealth(results) {
 
 /**
  * Read /api/health/stream to completion, calling onResult per check.
- * Resolves true if the stream ran, false if the caller should fall back.
+ * Resolves "done" when the server ended the cycle (every check answered),
+ * "partial" when it broke after some results, "none" when it gave nothing:
+ * only "done" is a whole cycle (healthCycle).
  */
 function _streamHealth(env, force, onResult) {
   return new Promise((resolve) => {
     let es;
     let got = false;
     // Backstop: a hung stream must not stall the poll chain forever.
+    const broken = () => (got ? "partial" : "none");
     const guard = setTimeout(() => {
       try {
         es?.close();
       } catch {}
-      resolve(got);
+      resolve(broken());
     }, 15_000);
     const done = (ok) => {
       clearTimeout(guard);
@@ -1105,7 +1008,7 @@ function _streamHealth(env, force, onResult) {
       );
     } catch {
       clearTimeout(guard);
-      return resolve(false);
+      return resolve("none");
     }
     es.onmessage = (e) => {
       let msg;
@@ -1118,149 +1021,36 @@ function _streamHealth(env, force, onResult) {
         got = true;
         onResult(msg.result);
       } else if (msg.type === "done") {
-        done(true);
+        done("done");
       } else if (msg.type === "error") {
-        done(got);
+        done(broken());
       }
     };
-    // Errors before any result mean "fall back"; after results, keep what we got.
-    es.onerror = () => done(got);
+    // An error ends the stream: before any result, fall back; after some,
+    // the cycle is partial and /api/health completes it.
+    es.onerror = () => done(broken());
   });
 }
 
-/** One repo's dot + label in the health row. */
-function _repoHealthItem(repo, items, escAttr) {
-  // Show open-in-editor icon if editor is configured and any item is dev-managed
-  const devItem = items.find((i) => i.mode === "dev-managed" && i.repoPath);
-  const openIcon =
-    _editorKey && devItem
-      ? `<button class="nav-open-btn" data-open-path="${escAttr(devItem.repoPath)}" title="Open in editor">↗</button>`
-      : "";
-
-  const isSingle = items.length === 1 && items[0].service === repo;
-  if (isSingle) {
-    const { service, ok, status, error } = items[0];
-    // What was checked: the URL, or a shell check's command.
-    const what = items[0].url ?? items[0].check;
-    const state = ok === true ? "ok" : ok === false ? "err" : "";
-    const tip =
-      ok == null
-        ? error
-          ? `${what} — ${error}`
-          : "no health check"
-        : error
-          ? `${what} — ${error}`
-          : `${what} → ${status}`;
-    return `<div class="health-item" title="${escAttr(tip)}">
-      <span class="dot ${state}" id="h-${repo}-${service}"></span>
-      <span>${repo}</span>
-      ${openIcon}
-    </div>`;
-  }
-  // Multi-service repo: ONE dot for the system's main component (the
-  // entrypoint), so a down app isn't masked green by its shared-infra
-  // sidecars. An entrypoint-less infra provider (infra-stack) falls back
-  // to an aggregate across its subsystems.
-  const entry = items.find((i) => i.isEntrypoint);
-  let overallState, tip;
-  if (entry) {
-    overallState = entry.ok === true ? "ok" : entry.ok === false ? "err" : "";
-    tip =
-      entry.ok == null
-        ? entry.error
-          ? `${entry.url ?? entry.check} — ${entry.error}`
-          : "no health check"
-        : entry.error
-          ? `${entry.url ?? entry.check} — ${entry.error}`
-          : `${entry.url ?? entry.check} → ${entry.status}`;
-  } else {
-    // Only a completed, failed check (ok false) is down; ok null (no check,
-    // or no answer yet) is unknown and never turns the dot red.
-    const allOk = items.every((i) => i.ok === true);
-    const anyOk = items.some((i) => i.ok === true);
-    const anyDown = items.some((i) => i.ok === false);
-    overallState = allOk ? "ok" : anyOk ? "running" : anyDown ? "err" : "";
-    tip = `${items.length} services`;
-  }
-  return `<div class="health-item" title="${escAttr(tip)}">
-      <span class="dot ${overallState}"></span>
-      <span>${repo}</span>
-      ${openIcon}
-    </div>`;
-}
-
-function _paintHealthDots(container, env, results) {
-  const escAttr = (s) =>
-    String(s ?? "")
-      .replace(/&/g, "&amp;")
-      .replace(/"/g, "&quot;");
-
-  if (!results.length) {
-    container.innerHTML = `<div class="health-item" style="color:var(--muted);font-size:11px">${env}: no services</div>`;
-  } else {
-    // Group by repo so multi-service repos don't produce duplicate labels.
-    const byRepo = new Map();
-    for (const item of results) {
-      if (!byRepo.has(item.repo)) byRepo.set(item.repo, []);
-      byRepo.get(item.repo).push(item);
-    }
-    const repoHtml = new Map(
-      [...byRepo.entries()].map(([repo, items]) => [
-        repo,
-        _repoHealthItem(repo, items, escAttr),
-      ]),
-    );
-    container.innerHTML = groupReposByApplication([...byRepo.keys()], _apps)
-      .map(({ app, repos }) => {
-        const inner = repos.map((r) => repoHtml.get(r)).join("");
-        if (!app) return inner;
-        const tip = [app.title, app.owner, app.description]
-          .filter(Boolean)
-          .join(" · ");
-        return `<div class="health-app" title="${escAttr(tip)}"><span class="health-app-label">${escAttr(app.name)}</span>${inner}</div>`;
-      })
-      .join("");
-
-    // Wire open-in-editor click handlers (data-open-path avoids inline onclick escaping)
-    container
-      .querySelectorAll(".nav-open-btn[data-open-path]")
-      .forEach((btn) => {
-        btn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          fetch("/api/editor/open", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ path: btn.dataset.openPath }),
-          }).then((r) => {
-            if (!r.ok)
-              r.json().then((d) =>
-                console.warn("[__DEN_CLI__] open-in-editor:", d.error),
-              );
-          });
-        });
-      });
-  }
+/**
+ * One painted cycle: the shared rollup (buildRow, health-rollup.js) feeds
+ * the rail (the Services badge and pinned dots) and the status chip and
+ * drawer alike, so they never disagree (R6, R13): a down service counts
+ * only once its repo's checks have all answered, pending and unchecked
+ * ones never do.
+ */
+function _paintHealth(env, results) {
+  const repos = [...new Set(results.map((r) => r.repo))];
+  const groups = groupReposByApplication(repos, _apps);
+  const row = buildRow(results, groups);
+  window.denShell?.setState(shellHealth(row));
+  _healthEnvPainted = env;
+  paintStatus({ row, groups, env });
 
   // Broadcast results so other components (e.g. dep graph) can stay in sync
   document.dispatchEvent(
     new CustomEvent("__DEN_CLI__:health-update", { detail: results }),
   );
-
-  // Refresh button — shown on every page, no per-page HTML changes needed
-  const btn = document.createElement("button");
-  btn.title = "Refresh service health";
-  btn.textContent = "⟳";
-  btn.style.cssText =
-    "background:none;border:none;color:var(--muted);cursor:pointer;" +
-    "font-size:13px;padding:1px 4px;border-radius:3px;line-height:1;margin-left:4px;" +
-    "transition:color .1s;";
-  btn.addEventListener("mouseenter", () => (btn.style.color = "var(--text)"));
-  btn.addEventListener("mouseleave", () => (btn.style.color = "var(--muted)"));
-  btn.addEventListener("click", () => {
-    const currentEnv = document.getElementById("env-sel")?.value ?? env;
-    refreshHealth(currentEnv); // pulses dots yellow while re-pinging
-  });
-  container.appendChild(btn);
 }
 
 // ── Log badge (shared across pages) ───────────────────────────────────────────
@@ -1279,16 +1069,14 @@ export function initLogBadge() {
   });
 }
 
+/** The Logs page's NAV badge (shell.js) reads `openLogs`. */
 function _updateBadgeFromStorage() {
-  const el = document.getElementById("log-badge");
-  if (!el) return;
   try {
     const logs = JSON.parse(localStorage.getItem(LS_OPEN_LOGS) || "[]");
     const count = Array.isArray(logs) ? logs.length : 0;
-    el.textContent = count;
-    el.style.display = count > 0 ? "inline" : "none";
+    window.denShell?.setState({ openLogs: count });
   } catch {
-    el.style.display = "none";
+    window.denShell?.setState({ openLogs: 0 });
   }
 }
 
@@ -1317,7 +1105,7 @@ export function storeOpenLog(repo, service, env) {
 export function computePrimaryByRepo(svcList) {
   const primary = new Map();
   const rank = new Map();
-  for (const s of svcList || []) {
+  for (const s of Array.isArray(svcList) ? svcList : []) {
     const r = s.isEntrypoint ? 2 : s.service === s.repo ? 1 : 0;
     if (!primary.has(s.repo) || r > (rank.get(s.repo) ?? -1)) {
       primary.set(s.repo, s.address);
@@ -1346,31 +1134,31 @@ function _injectStaleStyles() {
   const s = document.createElement("style");
   s.textContent = `
     .stale-pill {
-      font-family: var(--mono, monospace); font-size: 10px; font-weight: 600;
+      font-family: var(--mono); font-size: 10px; font-weight: 600;
       padding: 2px 9px; border-radius: 10px; cursor: pointer; user-select: none;
-      border: 1px solid var(--yellow, #d29922); color: var(--yellow, #d29922);
-      background: rgba(210,153,34,0.12);
+      border: 1px solid var(--warn); color: var(--warn);
+      background: color-mix(in srgb, var(--warn) 12%, transparent);
       display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
       animation: stale-pulse 2s ease-in-out infinite;
     }
-    .stale-pill:hover { color: #0d1117; background: var(--yellow, #d29922); }
+    .stale-pill:hover { color: var(--bg); background: var(--warn); }
     .stale-pill b { font-weight: 700; }
     @keyframes stale-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
     .restart-overlay {
-      position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.82);
+      position: fixed; inset: 0; z-index: 2000; background: color-mix(in srgb, var(--bg) 90%, transparent);
       display: flex; align-items: center; justify-content: center;
       flex-direction: column; gap: 16px;
-      color: var(--text, #c9d1d9); font-family: var(--mono, monospace);
+      color: var(--text); font-family: var(--mono);
     }
     .restart-overlay .spinner {
       width: 30px; height: 30px; border-radius: 50%;
-      border: 3px solid var(--border, #30363d); border-top-color: var(--accent, #58a6ff);
+      border: 3px solid var(--border); border-top-color: var(--accent);
       animation: stale-spin .8s linear infinite;
     }
     @keyframes stale-spin { to { transform: rotate(360deg); } }
     .restart-overlay .msg { font-size: 13px; }
     .restart-overlay .hint {
-      font-size: 11px; color: var(--muted, #8b949e);
+      font-size: 11px; color: var(--muted);
       max-width: 380px; text-align: center; line-height: 1.5;
     }
   `;
@@ -1385,16 +1173,15 @@ function _renderStalePill(info) {
   }
   _injectStaleStyles();
   if (!pill) {
-    const header = document.querySelector("header");
+    const header =
+      document.querySelector(".den-top") || document.querySelector("header");
     if (!header) return;
     pill = document.createElement("button");
     pill.id = "stale-pill";
     pill.className = "stale-pill";
-    pill.title =
-      "This __DEN_CLI__ web server is running code older than your working tree — " +
-      "click to restart and pick up your changes. Running deploys continue on " +
-      "GitHub; an open deploy log reattaches after the reload.";
-    pill.innerHTML = "⚠ stale server · <b>Restart</b>";
+    pill.title = t("stale.title", { cli: "__DEN_CLI__" });
+    pill.setAttribute("aria-label", t("stale.aria"));
+    pill.innerHTML = `<span aria-hidden="true">⚠</span><span class="stale-lbl"> ${escT("stale.label")} · <b>${escT("stale.restart")}</b></span>`;
     pill.addEventListener("click", _requestRestart);
     const vpill = document.getElementById("version-pill");
     if (vpill && vpill.parentNode)
@@ -1420,6 +1207,13 @@ async function _staleTick() {
   if (info && info.pid != null)
     _lastServerInfo = { pid: info.pid, startedAt: info.startedAt };
   _renderStalePill(info);
+  // MD-2: a newer engine on disk than the one this server runs.
+  if (info && "engineStale" in info)
+    window.denShell?.setEngine?.({
+      stale: info.engineStale === true,
+      loaded: info.loaded?.version ?? null,
+      onDisk: info.onDisk?.version ?? null,
+    });
   setTimeout(_staleTick, SERVER_INFO_POLL_MS);
 }
 
@@ -1449,8 +1243,8 @@ function _showRestartOverlay() {
   o.className = "restart-overlay";
   o.innerHTML =
     '<div class="spinner"></div>' +
-    '<div class="msg">Restarting __DEN_CLI__ web…</div>' +
-    '<div class="hint" id="restart-hint">Reconnecting — this page will reload automatically.</div>';
+    `<div class="msg">${escT("restart.msg", { cli: "__DEN_CLI__" })}</div>` +
+    `<div class="hint" id="restart-hint">${escT("restart.hint")}</div>`;
   document.body.appendChild(o);
 }
 
@@ -1467,8 +1261,10 @@ async function _pollForNewServer(before, startedAt) {
   if (Date.now() - startedAt > 90_000) {
     const hint = document.getElementById("restart-hint");
     if (hint)
-      hint.innerHTML =
-        "Still restarting… if this persists, run <b>__DEN_CLI__ web restart</b> in a terminal, then reload.";
+      hint.innerHTML = escT("restart.still", { cmd: "\u0000" }).replace(
+        "\u0000",
+        "<b>__DEN_CLI__ web restart</b>",
+      );
   }
   setTimeout(() => _pollForNewServer(before, startedAt), 1500);
 }