@monster-orange/den 0.2.8 → 0.3.0

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

@@ -21,13 +21,20 @@ import {
   buildModel,
   edgeModel,
   entryOf,
+  findHit,
   healthLine,
   isCollapsed,
   neighbours,
   nodeFor,
   orgOf,
+  packGroups,
   placementText,
   repoPlacement,
+  repoRollup,
+  repoStatus,
+  repoStatusWord,
+  routeCross,
+  splitTopLevel,
   status,
   statusWord,
 } from "/graph-model.js";
@@ -40,6 +47,7 @@ import {
   renderPanel,
   runAction,
 } from "/panel.js";
+import { ownersLabel } from "/workspace-picker.js";
 
 const LS = "__DEN_CLI__-graph:";
 const store = {
@@ -90,9 +98,26 @@ let edges = [];
 let elk = null;
 let renderSeq = 0;
 let prefsLoaded = false;
+// The floor of the last fit while the view is still the automatic one; null
+// once the user pans or zooms. A viewport that changes size (Local Dev's
+// output panel opening below it) re-fits an automatic view, so cards never
+// sit under the panel; a view the user moved is left where they put it.
+let autoFit = null;
+let vpObserver = null;
 
 const $ = (s, el = host) => el?.querySelector(s);
 const zoomFloor = 0.35;
+/**
+ * The automatic fit (first draw, a new set of cards, a layout change, the
+ * viewport resizing) shows the whole graph, as Fit does (0.3.0-dev.34).
+ * Until dev.33 a graph that needed less than 25% opened on the top of it
+ * at 60%, and a 31-card graph across 10 org groups opened with 17 of 31
+ * cards outside the stage (a consumer's finding); the groups now wrap to
+ * the stage (packGroups), so a graph that big fits at a readable zoom.
+ */
+const AUTO_FIT = "auto";
+/** How far Fit (and zooming out to it) goes for a very big graph. */
+const FIT_MIN = 0.1;
 
 bindPanel({
   model: () => M,
@@ -142,7 +167,7 @@ function loadServerPrefs() {
       store.set("prefs", prefs());
       if (JSON.stringify(prefs()) !== before && host?.isConnected) {
         syncControls();
-        render().then(() => fit(0.6));
+        render().then((d) => d && fit(AUTO_FIT));
       }
     })
     .catch(() => {});
@@ -165,6 +190,25 @@ function loadElk() {
   return elkLoading;
 }
 
+// ── maximize (R23, Ward QA 2026-11-05) ────────────────────────────────────
+// The page owns the layout: hooks.maximize = { isOn(), toggle() } gives the
+// zoom group a Maximize button (F on the page; Esc restores). Without it,
+// no button.
+function maxButton() {
+  const m = hooks.maximize;
+  if (!m) return "";
+  const on = !!m.isOn?.();
+  return `<button data-z="max" aria-pressed="${on}" aria-keyshortcuts="F" aria-label="Maximize graph" title="${on ? "Restore (Esc)" : "Maximize graph (F)"}">${on ? "⤡" : "⤢"}</button>`;
+}
+/** Repaint the Maximize button after the page changed the layout. */
+export function graphMaximized(on) {
+  const b = $('[data-z="max"]');
+  if (!b) return;
+  b.setAttribute("aria-pressed", String(!!on));
+  b.title = on ? "Restore (Esc)" : "Maximize graph (F)";
+  b.textContent = on ? "⤡" : "⤢";
+}
+
 // ── mount ────────────────────────────────────────────────────────────────
 export function mountGraph(el, data, pageHooks) {
   hooks = pageHooks || {};
@@ -191,7 +235,7 @@ export function mountGraph(el, data, pageHooks) {
       <div class="dg-vp" tabindex="0" aria-label="Service graph. Drag to pan, scroll to move, Ctrl or Cmd + scroll to zoom.">
         <div class="dg-world"><svg aria-hidden="true"></svg></div>
         <div class="dg-legend"></div>
-        <div class="dg-zoom" role="group" aria-label="Zoom"><button data-z="out" aria-label="Zoom out">−</button><button data-z="100" aria-label="Reset zoom to 100%">100%</button><button data-z="in" aria-label="Zoom in">+</button><button data-z="fit">Fit</button></div>
+        <div class="dg-zoom" role="group" aria-label="Zoom"><button data-z="out" aria-label="Zoom out">−</button><button data-z="100" aria-label="Reset zoom to 100%">100%</button><button data-z="in" aria-label="Zoom in">+</button><button data-z="fit">Fit</button>${maxButton()}</div>
       </div>
       <aside class="dg-panel" hidden aria-label="Details"></aside>
     </div>
@@ -199,9 +243,16 @@ export function mountGraph(el, data, pageHooks) {
   wire();
   syncControls();
   loadServerPrefs();
-  render().then(() => {
-    if (!st.fitted) {
-      fit(0.6);
+  // Fit once the layout that is drawn is known: a render a newer one
+  // overtook draws nothing and fits nothing (All active, and the org
+  // frames landing after the first draw, mount twice in quick succession).
+  // A new set of cards (the orgs landing, the picker, a workspace
+  // activated) re-fits while the view is the automatic one; a view the
+  // user zoomed or panned stays where they put it.
+  render().then((drawn) => {
+    if (!drawn) return;
+    if (!st.fitted || autoFit != null) {
+      fit(AUTO_FIT);
       st.fitted = true;
     } else applyView();
     if (st.sel) openDetail(st.sel, true);
@@ -213,10 +264,18 @@ export function graphHealth(results) {
   if (!M || !host?.isConnected) return;
   applyHealth(M, results);
   for (const c of host.querySelectorAll(".dg-card")) {
-    if (c.dataset.id && M.byId.has(c.dataset.id))
-      c.innerHTML = cardInner(M.byId.get(c.dataset.id));
-    else if (c.dataset.repo && M.byRepo.has(c.dataset.repo))
+    if (c.dataset.id && M.byId.has(c.dataset.id)) {
+      const s = M.byId.get(c.dataset.id);
+      c.innerHTML = cardInner(s);
+      // A service card's border follows its health too (0.3.0-dev.40,
+      // DOC-1: it stayed red after a recovery; only repo cards toggled).
+      c.classList.toggle("down", s.health.ok === false);
+    } else if (c.dataset.repo && M.byRepo.has(c.dataset.repo)) {
       c.innerHTML = repoCardInner(c.dataset.repo);
+      const s = repoRollup(M, c.dataset.repo).state;
+      c.classList.toggle("down", s === "down");
+      c.classList.toggle("degraded", s === "degraded");
+    }
   }
   for (const g of host.querySelectorAll(".dg-grp.dg-org"))
     g.querySelector(".roll").textContent = rollup(groupServices(g.dataset.key));
@@ -255,8 +314,21 @@ async function render() {
     for (const e of n.edges || []) meta.set(e.id, e._m);
     (n.children || []).forEach(walk);
   })(root);
-  const res = await elk.layout(root);
-  if (seq !== renderSeq || !world.isConnected) return; // a newer render won
+  // Each top-level group on its own, then wrapped to the stage
+  // (graph-model.js splitTopLevel / packGroups, 0.3.0-dev.34).
+  const { parts, cross, groupOf } = splitTopLevel(root);
+  const results = await Promise.all(parts.map((p) => elk.layout(p)));
+  if (seq !== renderSeq || !world.isConnected) return false; // a newer render won
+  const area = fitArea();
+  const tops = results.map((r) => r.children[0]);
+  const pack = packGroups(
+    tops.map((g) => ({ w: g.width, h: g.height })),
+    {
+      direction: st.dir,
+      // The world adds 30px to the groups' extent (padding and margin).
+      ...(area ? { width: area.w - 30, height: area.h - 30 } : {}),
+    },
+  );
   world.querySelectorAll(".dg-grp,.dg-card,.dg-msg").forEach((n) => n.remove());
   edges = edgeModel(M, st.collapsed);
   layoutAbs = {};
@@ -264,7 +336,7 @@ async function render() {
   const paths = [];
   let maxX = 0,
     maxY = 0;
-  (function walk(n, ox, oy) {
+  function walk(n, ox, oy) {
     const x = ox + (n.x || 0),
       y = oy + (n.y || 0);
     if (n.id !== "root") {
@@ -297,35 +369,69 @@ async function render() {
       }
     }
     for (const c of n.children || []) walk(c, x, y);
-  })(res, 0, 0);
+  }
+  // The root's padding (10) around the wrapped groups.
+  const PAD = 10;
+  const bands = new Map();
+  results.forEach((r, i) => {
+    const g = tops[i],
+      at = pack.pos[i];
+    walk(r, PAD + at.x - g.x, PAD + at.y - g.y);
+    const down = st.dir !== "right";
+    const from = PAD + (down ? at.y : at.x);
+    const b = bands.get(at.band) || { band: at.band, from, to: from };
+    b.from = Math.min(b.from, from);
+    b.to = Math.max(b.to, from + (down ? g.height : g.width));
+    bands.set(at.band, b);
+  });
+  const bandOf = new Map(
+    tops.map((g, i) => [g.id, bands.get(pack.pos[i].band)]),
+  );
+  // Edges between groups: routed through the gaps between the wrap's rows.
+  for (const e of cross) {
+    const a = layoutAbs[e.sources[0]],
+      b = layoutAbs[e.targets[0]];
+    const ba = bandOf.get(groupOf.get(e.sources[0])),
+      bb = bandOf.get(groupOf.get(e.targets[0]));
+    if (!a || !b || !ba || !bb) continue;
+    paths.push({ d: roundPath(routeCross(a, b, ba, bb, st.dir)), m: e._m });
+  }
   world.appendChild(frag);
   const svg = $(".dg-world > svg");
   svg.setAttribute("width", maxX + 20);
   svg.setAttribute("height", maxY + 20);
   const MK = {
-    intra: "#8b949e",
-    hard: "#58a6ff",
-    soft: "#8b949e",
-    event: "#bc8cff",
-    cross: "#39c5cf",
+    intra: "var(--muted)",
+    hard: "var(--accent)",
+    soft: "var(--muted)",
+    event: "var(--dg-event)",
+    cross: "var(--remote)",
   };
   svg.innerHTML =
     `<defs>${Object.entries(MK)
       .map(
         ([k, c]) =>
-          `<marker id="dg-ah-${k}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="${c}"/></marker>`,
+          `<marker id="dg-ah-${k}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" style="fill:${c}"/></marker>`,
       )
       .join("")}</defs>` +
     paths
       .map(({ d, m }) => {
         const k = m.cross ? "cross" : m.kind;
-        return `<path class="dg-e ${k}" data-f="${esc(m.from)}" data-t="${esc(m.to)}" d="${d}" marker-end="url(#dg-ah-${k})"/>`;
+        // R22b-2: each edge's flow overlay, drawn on its base path (same
+        // d, same kind, so the same colour); it shows and marches from
+        // data-f to data-t only while the edge is highlighted.
+        const ends = `data-f="${esc(m.from)}" data-t="${esc(m.to)}" d="${d}"`;
+        return (
+          `<path class="dg-e ${k}" ${ends} marker-end="url(#dg-ah-${k})"/>` +
+          `<path class="dg-flow ${k}" ${ends}/>`
+        );
       })
       .join("");
   world.style.width = maxX + 20 + "px";
   world.style.height = maxY + 20 + "px";
   legend();
   applyFocus();
+  return true;
 }
 
 function roundPath(pts) {
@@ -399,7 +505,7 @@ function cardInner(s) {
   const showPlace = s.runs === "remote" || M.mixed;
   const acts = actionsFor(s);
   return `<div class="r1"><span class="dg-dot ${status(s)}" title="${statusWord(s)}"></span><span class="nm" title="${esc(s.name)}">${esc(s.name)}</span>${showPlace ? `<span class="dg-badge ${s.runs}">${esc(placementText(s))}</span>` : ""}</div>
-    <div class="r2" title="${esc(s.id)}">${esc(s.repo)}</div>
+    <div class="r2" title="${esc(s.id)}${s.inWorkspaces.length > 1 ? `: in ${esc(s.inWorkspaces.join(", "))}` : ""}">${esc(s.repo + ownersLabel(s.inWorkspaces))}</div>
     <div class="r3">${s.entry ? '<span class="dg-tag entry">entry</span>' : ""}${s.infra ? '<span class="dg-tag">infra</span>' : ""}${s.missing.length ? `<span class="dg-tag warn" title="Missing: ${esc(s.missing.join(", "))}">⚠ missing</span>` : ""}${!s.cloned ? '<span class="dg-tag warn">not cloned</span>' : ""}<span class="h ${status(s)}">${esc(healthLine(s))}</span></div>
     <div class="dg-acts">${[acts.primary, ...acts.common]
       .filter(Boolean)
@@ -423,8 +529,9 @@ function card(s, x, y, w, h) {
 function repoCardInner(r) {
   const svcs = M.byRepo.get(r),
     ok = svcs.filter((s) => s.health.ok).length,
-    pl = repoPlacement(M, r);
-  return `<div class="r1"><span class="dg-dot ${ok === svcs.length ? "ok" : svcs.some((s) => s.health.ok === false) ? "bad" : ""}"></span><span class="nm">${esc(r)}</span>${pl !== "local" || M.mixed ? `<span class="dg-badge ${pl}">${pl === "hybrid" ? "⇄ hybrid" : pl === "remote" ? "☁ remote" : "⌂ local"}</span>` : ""}</div>
+    pl = repoPlacement(M, r),
+    roll = repoRollup(M, r);
+  return `<div class="r1"><span class="dg-dot ${repoStatus(roll)}" title="${esc(repoStatusWord(roll))}"></span><span class="nm">${esc(r)}</span>${pl !== "local" || M.mixed ? `<span class="dg-badge ${pl}">${pl === "hybrid" ? "⇄ hybrid" : pl === "remote" ? "☁ remote" : "⌂ local"}</span>` : ""}</div>
     <div class="r2">${svcs.length} services · ${ok}/${svcs.length} healthy</div>
     <div class="r3 sum">${svcs.map((s) => `<span class="dg-dot ${status(s)}" title="${esc(s.name)}: ${statusWord(s)}"></span>`).join("")}</div>
     <div class="dg-acts"><button class="dg-btn sm" data-expand="${esc(r)}">Expand</button></div>`;
@@ -432,13 +539,14 @@ function repoCardInner(r) {
 function repoCard(r, x, y, w, h) {
   const svcs = M.byRepo.get(r);
   const el = document.createElement("div");
-  el.className = `dg-card ${st.density === "compact" ? "compact" : ""} ${repoPlacement(M, r) === "remote" ? "remote" : ""} ${svcs.some((s) => s.health.ok === false) ? "down" : ""}`;
+  const roll = repoRollup(M, r);
+  el.className = `dg-card ${st.density === "compact" ? "compact" : ""} ${repoPlacement(M, r) === "remote" ? "remote" : ""} ${roll.state === "down" ? "down" : roll.state === "degraded" ? "degraded" : ""}`;
   el.dataset.repo = r;
   el.tabIndex = 0;
   el.setAttribute("role", "button");
   el.setAttribute(
     "aria-label",
-    `${r}, ${svcs.length} services, ${svcs.filter((s) => s.health.ok).length} healthy. Open details.`,
+    `${r}, ${repoStatusWord(roll)}, ${svcs.length} services, ${svcs.filter((s) => s.health.ok).length} healthy. Open details.`,
   );
   el.innerHTML = repoCardInner(r);
   return place(el, x, y, w, h);
@@ -448,9 +556,9 @@ function legend() {
   const kinds = new Set(edges.map((e) => (e.cross ? "cross" : e.kind)));
   const items = [
     ["hard", "var(--accent)", "solid", "hard dependency"],
-    ["soft", "#8b949e", "dashed", "soft"],
-    ["event", "#bc8cff", "dotted", "event"],
-    ["intra", "#8b949e", "solid", "within a repo"],
+    ["soft", "var(--muted)", "dashed", "soft"],
+    ["event", "var(--dg-event)", "dotted", "event"],
+    ["intra", "var(--muted)", "solid", "within a repo"],
     ["cross", "var(--dg-remote)", "dashed", "local → remote"],
   ].filter(([k]) => kinds.has(k));
   $(".dg-legend").innerHTML =
@@ -488,7 +596,7 @@ function applyFocus() {
   const q = st.q.trim().toLowerCase();
   host.querySelectorAll(".dg-card").forEach((c) => {
     const k = c.dataset.id || "repo:" + c.dataset.repo;
-    const hit = !!q && k.toLowerCase().includes(q);
+    const hit = findHit(k, q);
     c.classList.toggle("sel", key != null && k === key);
     c.classList.toggle("hit", hit);
     c.classList.toggle("dim", (focus && !focus.has(k)) || (!!q && !hit));
@@ -502,6 +610,9 @@ function applyFocus() {
         : p.dataset.f === key || p.dataset.t === key);
     p.classList.toggle("hl", on);
     p.classList.toggle("dim", (!!focus && !on) || !!q);
+    // Its flow overlay (the next sibling, R22b-2) runs only while lit.
+    const flow = p.nextElementSibling;
+    if (flow?.classList.contains("dg-flow")) flow.classList.toggle("on", on);
   });
 }
 function focusOn(sel) {
@@ -604,24 +715,64 @@ function zoomAt(f, cx, cy) {
   const vp = $(".dg-vp").getBoundingClientRect();
   cx ??= vp.width / 2;
   cy ??= vp.height / 2;
-  const nz = Math.min(2, Math.max(zoomFloor, st.z * f));
+  autoFit = null;
+  // Out to 35%, or further when that is what the whole graph needs.
+  const lo = Math.min(zoomFloor, Math.max(FIT_MIN, fitNeed() ?? zoomFloor));
+  const nz = Math.min(2, Math.max(lo, st.z * f));
   st.tx = cx - ((cx - st.tx) * nz) / st.z;
   st.ty = cy - ((cy - st.ty) * nz) / st.z;
   st.z = nz;
   applyView();
 }
-/** Fit the graph; automatic fits pass floor 0.6, the Fit button 0.35. */
-function fit(floor = zoomFloor) {
+/** The fitted view's top inset (st.ty) and the gap kept above the overlays. */
+const FIT_TOP = 16;
+const FIT_GAP = 8;
+/**
+ * The height the overlays at the viewport's foot take (the legend and the
+ * zoom group, from the bottom edge to the higher one's top, plus a gap):
+ * Fit keeps the graph above them (0.3.0-dev.33, a consumer's finding: a
+ * legend on two lines covered the last group's bottom 10px). Measured,
+ * so a wrapped legend reserves its real height.
+ */
+function bottomReserve(vp) {
+  let top = vp.bottom;
+  for (const el of [$(".dg-legend"), $(".dg-zoom")]) {
+    const r = el?.getBoundingClientRect();
+    if (r && r.height > 0) top = Math.min(top, r.top);
+  }
+  return vp.bottom - top + FIT_GAP;
+}
+/** The area a fitted graph may use in the viewport now, or null. */
+function fitArea() {
+  const vp = $(".dg-vp")?.getBoundingClientRect();
+  if (!vp || vp.width < 1 || vp.height < 1) return null;
+  return { w: vp.width - 32, h: vp.height - FIT_TOP - bottomReserve(vp) };
+}
+/** The zoom that shows the whole graph in the viewport now (≤ 1), or null. */
+function fitNeed() {
+  const area = fitArea();
+  const world = $(".dg-world");
+  if (!area || !world) return null;
+  const w = parseFloat(world.style.width) || 1,
+    h = parseFloat(world.style.height) || 1;
+  return Math.min(1, area.w / w, area.h / h);
+}
+/**
+ * Fit the graph; automatic fits pass AUTO_FIT, the Fit button FIT_MIN.
+ * Fit fits: the whole graph, bound by the width and the height (R23), down
+ * to FIT_MIN. A 35% floor here made Fit read 35% for a big graph whether
+ * the graph was maximized or not (a consumer's dev.30 finding). The fitted
+ * view refits when the viewport changes size (maximize, restore, the dock).
+ */
+function fit(floor = FIT_MIN) {
   const vp = $(".dg-vp")?.getBoundingClientRect();
   if (!vp) return;
-  const w = parseFloat($(".dg-world").style.width) || 1,
-    h = parseFloat($(".dg-world").style.height) || 1;
-  st.z = Math.max(
-    floor,
-    Math.min(1, (vp.width - 32) / w, (vp.height - 70) / h),
-  );
+  const w = parseFloat($(".dg-world").style.width) || 1;
+  const need = fitNeed();
+  st.z = Math.max(floor === AUTO_FIT ? FIT_MIN : floor, need);
   st.tx = Math.max(16, (vp.width - w * st.z) / 2);
-  st.ty = 16;
+  st.ty = FIT_TOP;
+  autoFit = floor;
   applyView();
 }
 
@@ -759,6 +910,14 @@ function onClick(e) {
     openDetail(st.sel, true);
     return;
   }
+  const pinT = t.closest("[data-pin-toggle]");
+  if (pinT && window.denShell) {
+    const id = pinT.dataset.pinToggle;
+    if (window.denShell.isPinned(id)) window.denShell.unpin(id);
+    else window.denShell.pin(id);
+    openDetail(st.sel, true);
+    return;
+  }
   if (t.closest("[data-popout]")) {
     st.popped = !st.popped;
     openDetail(st.sel, true);
@@ -831,7 +990,7 @@ function wire() {
       syncControls();
       savePrefs();
       render().then(() => {
-        if (el.dataset.seg !== "density") fit(0.6);
+        if (el.dataset.seg !== "density") fit(AUTO_FIT);
         if (st.sel) keepVisible(st.sel);
       });
     }),
@@ -847,7 +1006,7 @@ function wire() {
             [...M.byRepo.keys()].filter((r) => M.byRepo.get(r).length > 1),
           );
     store.set("collapsed", [...st.collapsed]);
-    render().then(() => fit(0.6));
+    render().then((d) => d && fit(AUTO_FIT));
   });
   const find = $("[data-find]");
   find.addEventListener("input", () => {
@@ -858,7 +1017,7 @@ function wire() {
     if (e.key !== "Enter") return;
     const q = st.q.trim().toLowerCase();
     if (!q) return;
-    const s = M.services.find((x) => x.id.toLowerCase().includes(q));
+    const s = M.services.find((x) => findHit(x.id, q));
     if (s)
       focusOn(
         isCollapsed(M, st.collapsed, s.repo) ? { repo: s.repo } : { id: s.id },
@@ -866,6 +1025,16 @@ function wire() {
   });
   // pan: drag the background; scroll moves; Ctrl/⌘ + scroll zooms
   const vp = $(".dg-vp");
+  vpObserver?.disconnect();
+  if (typeof ResizeObserver === "function") {
+    let size = null;
+    vpObserver = new ResizeObserver(([e]) => {
+      const next = `${Math.round(e.contentRect.width)}x${Math.round(e.contentRect.height)}`;
+      if (size && next !== size && autoFit != null) fit(autoFit);
+      size = next;
+    });
+    vpObserver.observe(vp);
+  }
   let drag = null;
   vp.addEventListener("pointerdown", (e) => {
     if (e.button !== 0 || e.target.closest(".dg-card,button,.dg-zoom")) return;
@@ -877,7 +1046,10 @@ function wire() {
     if (!drag) return;
     const dx = e.clientX - drag.x,
       dy = e.clientY - drag.y;
-    if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
+    if (Math.abs(dx) + Math.abs(dy) > 3) {
+      drag.moved = true;
+      autoFit = null;
+    }
     st.tx = drag.tx + dx;
     st.ty = drag.ty + dy;
     applyView();
@@ -905,6 +1077,7 @@ function wire() {
           e.clientY - r.top,
         );
       else {
+        autoFit = null;
         st.tx -= e.deltaX;
         st.ty -= e.deltaY;
         applyView();
@@ -917,12 +1090,14 @@ function wire() {
     if (z === "in") zoomAt(1.2);
     if (z === "out") zoomAt(1 / 1.2);
     if (z === "100") {
+      autoFit = null;
       st.z = 1;
       st.tx = 24;
       st.ty = 24;
       applyView();
     }
-    if (z === "fit") fit(zoomFloor);
+    if (z === "fit") fit(FIT_MIN);
+    if (z === "max") hooks.maximize?.toggle?.();
   });
   // panel resize (360–760px, remembered)
   let rs = null;
@@ -956,9 +1131,13 @@ document.addEventListener("keydown", (e) => {
       const more = menuOwner.get(m) ?? m.previousElementSibling;
       closeMenus();
       more?.focus();
+      e.preventDefault(); // handled: the page's Esc (restore) waits
       return;
     }
-    if (st.sel) closeDetail();
+    if (st.sel) {
+      closeDetail();
+      e.preventDefault();
+    }
     return;
   }
   if (