@nanobpm/urban 0.42.0 → 0.44.0

package/src/runtime/core/modules/pages.ts

@@ -534,7 +534,13 @@ body { margin:0; font:15px/1.5 system-ui,sans-serif; padding:2rem; max-width:64r
 .pc-msg.err { color:var(--nano-danger); }
 .pc-msg.ok { color:var(--nano-ok); }
 table.pc-grid { width:100%; border-collapse:collapse; font-size:.9rem; }
-table.pc-grid th, table.pc-grid td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--nano-edge); }
+/* Wrap long, space-less cell values (e.g. a JSON blob or a 40-char SHA) so one
+   cell can't force its column wide and blow the whole table past the page.
+   overflow-wrap:anywhere reduces the cell's min-content width so the auto table
+   layout can shrink it to fit; max-width caps a single column when there is
+   ample room. vertical-align:top keeps a multi-line cell aligned with its
+   single-line neighbours. */
+table.pc-grid th, table.pc-grid td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--nano-edge); overflow-wrap:anywhere; word-wrap:break-word; max-width:32rem; vertical-align:top; }
 table.pc-grid th { font-weight:600; color:var(--nano-text-muted); }
 .pc-tabs { display:flex; gap:.5rem; margin-bottom:.75rem; }
 .pc-tab { padding:.35rem .8rem; border:1px solid var(--nano-edge); border-radius:.4rem; background:transparent; color:inherit; font:inherit; cursor:pointer; }
@@ -546,6 +552,13 @@ table.pc-grid th { font-weight:600; color:var(--nano-text-muted); }
 .pc-detail-field { display:flex; gap:.5rem; font-size:.85rem; margin:.15rem 0; }
 .pc-detail-label { color:var(--nano-text-muted); min-width:8rem; }
 .pc-link { color:var(--nano-accent); }
+.pc-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.35rem; box-sizing:border-box; padding:0 .4rem; border-radius:999px; font-size:.72rem; font-weight:700; line-height:1; color:#fff; background:var(--nano-danger); }
+.pc-badge-danger { background:var(--nano-danger); }
+.pc-badge-warn { background:var(--nano-warn); color:#3a2a00; }
+.pc-badge-ok { background:var(--nano-ok); }
+.pc-badge-info { background:var(--nano-info); }
+:root[data-appearance="light"] .pc-badge-warn { color:#fff; }
+@media (prefers-color-scheme: light) { :root:not([data-appearance]) .pc-badge-warn { color:#fff; } }
 .pc-child { margin:.6rem 0; }
 .pc-child-title { font-size:.8rem; font-weight:600; color:var(--nano-text-muted); margin-bottom:.25rem; }
 .pc-transcript { white-space:pre-wrap; max-height:22rem; overflow:auto; background:var(--nano-inset); padding:.5rem; border-radius:.4rem; font-size:.8rem; margin-top:.4rem; }
@@ -556,12 +569,33 @@ table.pc-grid th { font-weight:600; color:var(--nano-text-muted); }
 .pc-collapse-header { display:flex; align-items:center; gap:.5rem; width:100%; margin:0 0 .75rem; padding:0; background:transparent; border:0; color:inherit; font:inherit; font-size:1rem; font-weight:600; cursor:pointer; text-align:left; }
 .pc-chevron-inline { color:var(--nano-text-faint); font-size:.75rem; width:1em; }
 .pc-card-body[hidden] { display:none; }
+/* Grid group headers (dataGrid groupBy): a full-width, clickable band that
+   collapses/expands its member rows; the collapsed state is persisted. */
+.pc-group-header td { padding:0; background:var(--nano-inset); border-top:1px solid var(--nano-edge); }
+.pc-group-toggle { display:flex; align-items:center; gap:.5rem; width:100%; padding:.4rem .6rem; background:transparent; border:0; color:inherit; font:inherit; font-weight:600; cursor:pointer; text-align:left; }
+.pc-group-toggle:hover { background:var(--nano-hover); }
+.pc-group-title { font-size:.9rem; }
+/* A standalone button node + the modal it opens (e.g. a copy-pasteable prompt). */
+.pc-buttonrow { margin:1rem 0; }
+.pc-btn-ghost { background:transparent; color:var(--nano-text-muted); border:1px solid var(--nano-edge); }
+.pc-btn-ghost:hover { color:var(--nano-text); border-color:var(--nano-accent); }
+.pc-modal-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(0,0,0,.55); }
+.pc-modal { background:var(--nano-panel); border:1px solid var(--nano-edge-strong); border-radius:.6rem; padding:1.25rem 1.35rem; max-width:44rem; width:100%; max-height:85vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.45); }
+.pc-modal-title { font-size:1.15rem; margin:0 0 .5rem; }
+.pc-modal-desc { color:var(--nano-text-muted); margin:0 0 .75rem; font-size:.9rem; white-space:pre-wrap; }
+.pc-modal-code { white-space:pre-wrap; word-break:break-word; background:var(--nano-inset); border:1px solid var(--nano-edge); border-radius:.4rem; padding:.75rem; font:.82rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; max-height:45vh; overflow:auto; margin:0 0 .85rem; color:var(--nano-text); }
+.pc-modal-actions { display:flex; gap:.5rem; justify-content:flex-end; }
 /* Multi-page navigation: a horizontal menu bar or a vertical side rail. */
 .pc-layout { display:flex; gap:1.5rem; align-items:flex-start; }
 .pc-rail-wrap { flex:0 0 12rem; position:sticky; top:1rem; align-self:flex-start; }
 .pc-main-col { flex:1 1 auto; min-width:0; }
 .pc-nav-title { font-weight:650; }
 .pc-bar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; border-bottom:1px solid var(--nano-edge); padding-bottom:.6rem; margin-bottom:1.25rem; }
+/* Opt-in sticky bar: stays pinned to the viewport top while the page scrolls.
+   The negative inline margin + matching padding lets its background span the
+   body's 2rem inline padding so scrolled content never shows beside it, and a
+   solid app-colored background hides content passing underneath. */
+.pc-bar.pc-sticky { position:sticky; top:0; z-index:20; background:var(--nano-app); margin-inline:-2rem; padding-inline:2rem; padding-top:.6rem; }
 .pc-bar .pc-nav-title { margin-right:.5rem; }
 .pc-bar .pc-nav-items { display:flex; gap:.25rem; flex-wrap:wrap; }
 .pc-rail { display:flex; flex-direction:column; gap:.5rem; }
@@ -592,15 +626,34 @@ const PAGE_ID = /^[A-Za-z0-9_-]+$/;
 function safePageId(value) {
   return typeof value === "string" && PAGE_ID.test(value);
 }
-function currentPage() {
-  try {
-    const raw = decodeURIComponent((location.hash || "").replace(/^#\/?/, ""));
-    return safePageId(raw) ? raw : HOME;
-  } catch (e) {
-    return HOME;
-  }
+// A route is #/<page> or #/<page>/<url-encoded-param>. We split on the FIRST
+// "/" *before* decoding, so a param that itself contains encoded slashes or
+// hashes (e.g. a plan_key "owner/repo#123" carried as "owner%2Frepo%23123")
+// survives intact instead of the inner "%2F" being decoded into a second
+// segment. The page segment is still restricted to the safe id charset; the
+// param is opaque free text (bound only as a whitelisted '?' SQL value, or
+// interpolated as DOM text — never as HTML/markup).
+function parseRoute() {
+  const raw = (location.hash || "").replace(/^#\/?/, "");
+  const slash = raw.indexOf("/");
+  const pageRaw = slash >= 0 ? raw.slice(0, slash) : raw;
+  const paramRaw = slash >= 0 ? raw.slice(slash + 1) : "";
+  let page = HOME, param = "", pageOk = false;
+  try { const p = decodeURIComponent(pageRaw); if (safePageId(p)) { page = p; pageOk = true; } } catch (e) { /* keep HOME */ }
+  // Only carry the param when the page segment resolved to a real (safe-id) page.
+  // A malformed/unknown page like #/not-a-page/x falls back to HOME and must NOT
+  // inherit x, or that stray param would silently scope every eqParam grid and
+  // {{param}} on the home page to an entity the user never selected.
+  if (pageOk) { try { param = paramRaw ? decodeURIComponent(paramRaw) : ""; } catch (e) { param = ""; } }
+  return { page, param };
 }
+function currentPage() { return parseRoute().page; }
 let CURRENT = currentPage();
+// The current route param (the "/<param>" tail, or "" when absent). Exposed to a
+// page's datasource filters (a filter with { eqParam: true } binds its value to
+// this) and to {{param}} text interpolation, so one page template can scope
+// every section to a selected entity (e.g. an epic's plan_key).
+let PARAM = parseRoute().param;
 
 // Per-render teardown. Each dataGrid registers its poll interval + pc:refresh
 // listener here; navigating to another page runs every disposer before the new
@@ -613,6 +666,15 @@ function teardown() {
   }
 }
 
+// Monotonic counter for per-modal element ids. aria-labelledby needs a unique
+// title id: a fixed id would clash if the page already contains that id, and
+// mis-associate the label for assistive tech.
+let modalSeq = 0;
+// At most one modal is open at a time. A double-click (or two rapid button
+// clicks) would otherwise stack multiple overlays + document-level keydown
+// listeners; this guard keeps a single dialog + handler live.
+let modalOpen = false;
+
 // Theme bridge for the Nano console embed. The app runs in a sandboxed,
 // same-origin iframe, so the console's --nano-* custom properties and its
 // data-appearance never cascade in. Instead the console postMessages its
@@ -760,17 +822,166 @@ function el(tag, attrs = {}, ...kids) {
   return n;
 }
 
+// Interpolate the {{param}} token in a schema-supplied string with the current
+// route param. The result is only ever set as DOM text (textContent), so the
+// substituted value cannot inject markup. Other tokens are left untouched.
+// A function replacement inserts PARAM literally; a plain string replacement would
+// treat replacement patterns inside PARAM (an id like the dollar-one token) as
+// special and render the wrong text.
+function interpParam(s) {
+  return typeof s === "string" ? s.replace(/\{\{param\}\}/g, () => PARAM) : s;
+}
 function renderText(node) {
   const v = node.props.variant;
   const cls = v === "heading" ? "pc-heading" : v === "sub" ? "pc-sub" : "pc-body";
-  return el(v === "heading" ? "h1" : "p", { class: cls }, node.props.text || "");
+  return el(v === "heading" ? "h1" : "p", { class: cls }, interpParam(node.props.text) || "");
+}
+
+// Copy text to the clipboard, resiliently. The async Clipboard API is tried
+// first, but it can reject inside a sandboxed console iframe (no clipboard-write
+// permission) — so fall back to a hidden <textarea> + execCommand("copy"), which
+// works under a user gesture with only allow-scripts. Returns whether a copy
+// succeeded so the caller can nudge the user to ⌘/Ctrl+C when both paths fail.
+async function copyToClipboard(text) {
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch (_e) { /* fall through to the execCommand path */ }
+  const ta = document.createElement("textarea");
+  try {
+    ta.value = text;
+    ta.setAttribute("readonly", "");
+    ta.style.position = "fixed";
+    ta.style.top = "-1000px";
+    ta.style.opacity = "0";
+    document.body.append(ta);
+    ta.select();
+    return document.execCommand("copy");
+  } catch (_e) { return false; }
+  // Always remove the hidden textarea, even if select()/execCommand threw, so a
+  // failed copy never leaves a detached node accreting in <body> on retry.
+  finally { ta.remove(); }
+}
+
+// Rebase the sole {{appBase}} token in author-supplied copy text onto the app's
+// absolute mount root (always ends in "/"), so a prompt like
+// "read {{appBase}}app/api/agent" resolves to a URL an external agent can fetch —
+// the console proxy path when embedded, the app origin when standalone. No other
+// interpolation happens: copy text is otherwise emitted verbatim.
+function resolveCopyText(text) {
+  return typeof text === "string" ? text.split("{{appBase}}").join(APP_BASE.toString()) : "";
+}
+
+// Open a lightweight modal appended to <body>. Closes on the ✕/Close button, a
+// backdrop click, Escape, or a page switch; the keydown listener is removed on
+// close so it never leaks, and close() is registered with teardown() so
+// navigating away (hashchange → renderPage → teardown) tears down any open modal
+// instead of leaving a stale overlay + document-level listener alive. When it
+// carries copyText it renders a scrollable code block plus a Copy button (see
+// copyToClipboard for the sandbox-safe fallback).
+function openModal(m) {
+  // Only one modal at a time — drop a second (e.g. double-click) open so we
+  // never stack overlays or register duplicate document-level keydown handlers.
+  if (modalOpen) return;
+  modalOpen = true;
+  const overlay = el("div", { class: "pc-modal-overlay" });
+  // role="dialog" + aria-modal need an accessible name: label by the visible
+  // title when present, else fall back to a generic aria-label so screen readers
+  // don't announce an unnamed dialog. The title id is unique per instance so it
+  // can't collide with a pre-existing page id.
+  const titleId = m.title ? "pc-modal-title-" + (++modalSeq) : null;
+  const dialog = el("div", titleId
+    ? { class: "pc-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }
+    : { class: "pc-modal", role: "dialog", "aria-modal": "true", "aria-label": "Dialog" });
+  if (m.title) dialog.append(el("h2", { class: "pc-modal-title", id: titleId }, m.title));
+  if (m.description) dialog.append(el("p", { class: "pc-modal-desc" }, m.description));
+  const copyText = resolveCopyText(m.copyText);
+  if (copyText) dialog.append(el("pre", { class: "pc-modal-code" }, copyText));
+  const actions = el("div", { class: "pc-modal-actions" });
+  // Remember what had focus so we can restore it on close — a keyboard/screen
+  // reader user returns to where they were instead of being dumped at <body>.
+  const prevFocus = document.activeElement;
+  let closed = false;
+  function close() {
+    if (closed) return;
+    closed = true;
+    modalOpen = false;
+    document.removeEventListener("keydown", onKey);
+    overlay.remove();
+    // A manual close (button / Escape / backdrop) never pops the disposers
+    // stack, so drop our own entry here — otherwise repeated open/close cycles
+    // accrete dead close() closures until the next page navigation runs teardown.
+    const i = disposers.indexOf(close);
+    if (i !== -1) disposers.splice(i, 1);
+    if (prevFocus && typeof prevFocus.focus === "function") prevFocus.focus();
+  }
+  // Focusable descendants of the dialog, in DOM order, for the Tab focus trap.
+  function focusables() {
+    return Array.prototype.slice.call(dialog.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )).filter((n) => !n.disabled);
+  }
+  function onKey(ev) {
+    if (ev.key === "Escape") { close(); return; }
+    if (ev.key !== "Tab") return;
+    // Trap Tab within the dialog so focus can't slip behind the overlay onto the
+    // inert page underneath — that would break aria-modal semantics.
+    const f = focusables();
+    if (!f.length) return;
+    const first = f[0];
+    const last = f[f.length - 1];
+    if (ev.shiftKey && document.activeElement === first) { ev.preventDefault(); last.focus(); }
+    else if (!ev.shiftKey && document.activeElement === last) { ev.preventDefault(); first.focus(); }
+  }
+  if (copyText) {
+    const label = m.copyLabel || "Copy";
+    const copyBtn = el("button", { class: "pc-btn pc-btn-sm", type: "button" }, label);
+    copyBtn.addEventListener("click", async () => {
+      const ok = await copyToClipboard(copyText);
+      copyBtn.textContent = ok ? "Copied ✓" : "Press ⌘/Ctrl+C";
+      setTimeout(() => { copyBtn.textContent = label; }, 2200);
+    });
+    actions.append(copyBtn);
+  }
+  const closeBtn = el("button", { class: "pc-btn pc-btn-sm pc-btn-ghost", type: "button" }, m.closeLabel || "Close");
+  closeBtn.addEventListener("click", close);
+  actions.append(closeBtn);
+  dialog.append(actions);
+  overlay.append(dialog);
+  // A click on the backdrop (never the dialog itself) dismisses.
+  overlay.addEventListener("click", (ev) => { if (ev.target === overlay) close(); });
+  document.addEventListener("keydown", onKey);
+  document.body.append(overlay);
+  // A page switch runs teardown() before the next render — dispose the modal
+  // there too so navigating away never leaves a stale overlay + keydown listener.
+  disposers.push(close);
+  closeBtn.focus();
 }
 
-// A grid td cell. Two column-declared linking modes, checked in order:
-//   1. linkField — the cell text becomes a link to the URL held in that other
+// A standalone button node. Clicking it opens props.modal — used e.g. to surface
+// a copy-pasteable "point your agent here" prompt. props.variant === "ghost"
+// renders the muted outline style. A button without a modal is inert.
+function renderButton(node) {
+  const p = node.props || {};
+  const btn = el(
+    "button",
+    { class: "pc-btn" + (p.variant === "ghost" ? " pc-btn-ghost" : ""), type: "button" },
+    p.label || "Open",
+  );
+  const m = p.modal && typeof p.modal === "object" ? p.modal : null;
+  if (m) btn.addEventListener("click", () => openModal(m));
+  return el("div", { class: "pc-buttonrow" }, btn);
+}
+
+// A grid td cell with three column-declared rendering modes, checked in order:
+//   1. badge — a compact status indicator, gated on a non-empty field value
+//      (see the detailed note at the check below).
+//   2. linkField — the cell text becomes a link to the URL held in that other
 //      field. Only http(s) hrefs are linked (a javascript:/other-scheme URL
 //      smuggled through row data falls back to plain text).
-//   2. link: { kind: "processExplorer", keyField } — a structured, engine-aware
+//   3. link: { kind: "processExplorer", keyField } — a structured, engine-aware
 //      link: the cell text links to the Nano console's explorer view for the
 //      process instance whose key is held in the row's keyField. The console
 //      path is constructed HERE (never taken from row data) and the key is
@@ -786,6 +997,27 @@ function renderText(node) {
 // grid and child grids.
 function gridCell(col, row) {
   const text = row[col.field] == null ? "" : String(row[col.field]);
+  // 1. badge — a compact status indicator. When the row's field value is
+  //    non-empty (truthy after trimming) render a small circular badge (e.g. a
+  //    red "1" dot flagging an incident) whose tooltip is the full field text;
+  //    when empty the cell stays blank so the column is unobtrusive until it
+  //    matters. tone (danger|warn|ok|info, default danger) picks the color and
+  //    label the glyph inside (default "1"). Label/tone come from the app
+  //    schema (trusted); the tooltip is row data set via title/textContent
+  //    (DOM-escaped by the platform, so no HTML/attribute injection). The full
+  //    field text is also mirrored into aria-label so assistive tech announces
+  //    the incident/status text (the visible "1" glyph alone is not meaningful).
+  if (col.badge) {
+    if (text.trim() === "") return el("td", {});
+    const t = col.badge.tone;
+    const tone = t === "warn" || t === "ok" || t === "info" ? t : "danger";
+    const label = col.badge.label == null ? "1" : String(col.badge.label);
+    return el(
+      "td",
+      {},
+      el("span", { class: "pc-badge pc-badge-" + tone, title: text, "aria-label": text }, label),
+    );
+  }
   if (col.linkField) {
     const href = row[col.linkField] == null ? "" : String(row[col.linkField]);
     if (text !== "" && /^https?:\/\//i.test(href)) {
@@ -796,6 +1028,20 @@ function gridCell(col, row) {
       );
     }
   }
+  if (col.link && col.link.kind === "page" && col.link.page && col.link.keyField) {
+    // An in-app link to another page, scoped to this row: #/<page>/<key>. The
+    // key (e.g. a plan_key "owner/repo#123") is URL-encoded into the route's
+    // param tail, which parseRoute() decodes back verbatim; the page id is
+    // validated against the safe-id charset and the key must be non-empty, so a
+    // blank/keyless cell stays plain text. Navigation is a pure hash change
+    // (no new tab, no server hit) — the SPA router re-renders in place.
+    const key = row[col.link.keyField];
+    const keyStr = key == null ? "" : String(key).trim();
+    if (text !== "" && safePageId(col.link.page) && keyStr !== "") {
+      const href = "#/" + encodeURIComponent(col.link.page) + "/" + encodeURIComponent(keyStr);
+      return el("td", {}, el("a", { class: "pc-link", href }, text));
+    }
+  }
   if (col.link && col.link.kind === "processExplorer" && col.link.keyField) {
     const key = row[col.link.keyField];
     const keyStr = key == null ? "" : String(key).trim();
@@ -968,6 +1214,7 @@ function renderDataGrid(node) {
     const qs = [];
     for (const f of filters || []) {
       if (Array.isArray(f.in)) qs.push("where=" + encodeURIComponent(f.field + ":in:" + f.in.join(",")));
+      else if (f.eqParam) qs.push("where=" + encodeURIComponent(f.field + ":" + PARAM));
       else qs.push("where=" + encodeURIComponent(f.field + ":" + f.eq));
     }
     if (order && order.field) qs.push("order=" + encodeURIComponent(order.field + ":" + (order.dir || "asc")));
@@ -1098,7 +1345,7 @@ function renderDataGrid(node) {
     return box;
   }
 
-  function renderRow(row) {
+  function renderRow(row, sink) {
     const cells = cols.map((c) => gridCell(c, row));
     const key = rowKeyOf(row);
     let toggle = null;
@@ -1116,6 +1363,9 @@ function renderDataGrid(node) {
     }
     const tr = el("tr", {}, ...cells);
     tbody.append(tr);
+    // When grouping, the caller collects every <tr> this row produced (the data
+    // row plus any detail row) so a group header can hide/show them as one unit.
+    if (sink) sink.push({ tr, isDetail: false, key });
     if (detail && toggle) {
       const isOpen = key != null && expanded.has(key);
       // Reuse an already-built detail row for an open PR across refreshes so its
@@ -1143,6 +1393,67 @@ function renderDataGrid(node) {
         }
       });
       tbody.append(dtr);
+      if (sink) sink.push({ tr: dtr, isDetail: true, key });
+    }
+  }
+
+  // Append the fetched rows into the tbody, either flat (default) or partitioned
+  // into collapsible groups when the grid declares 'groupBy: "<field>"'. Each
+  // group renders a clickable header row ("<Label> <value> (<count>)") that
+  // collapses/expands its member rows as one unit; the collapsed state is
+  // persisted (localStorage, keyed by page + node + group value) so it survives
+  // both the refresh poll and a full reload — the same durability the top-level
+  // 'collapsible' node wrapper gives. Group order is numeric-aware ascending
+  // (so waves 1,2,10 sort naturally), falling back to lexical for non-numeric
+  // keys. 'groupDefaultCollapsed' seeds each group collapsed until toggled.
+  function appendRows(rows) {
+    const groupBy = p.groupBy;
+    // Treat a non-string groupBy as "no grouping": labelBase calls groupBy.charAt()
+    // below, so a truthy non-string (number/object from a malformed page schema)
+    // would throw at render time and break the whole page instead of one grid.
+    if (!groupBy || typeof groupBy !== "string") { for (const row of rows) renderRow(row, null); return; }
+    const order = [];
+    const groups = new Map();
+    for (const row of rows) {
+      const gvRaw = row[groupBy];
+      const gv = gvRaw == null ? "" : String(gvRaw);
+      if (!groups.has(gv)) { groups.set(gv, []); order.push(gv); }
+      groups.get(gv).push(row);
+    }
+    order.sort((a, b) => {
+      const na = Number(a), nb = Number(b);
+      if (a !== "" && b !== "" && !Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
+      return a < b ? -1 : a > b ? 1 : 0;
+    });
+    const labelBase = p.groupLabel != null
+      ? String(p.groupLabel)
+      : groupBy.charAt(0).toUpperCase() + groupBy.slice(1);
+    for (const gv of order) {
+      const groupRows = groups.get(gv);
+      const gkey = "pc:collapsed:" + CURRENT + ":" + (node.id || p.title || "grid") + ":g:" + gv;
+      let gcollapsed = readCollapsed(gkey, !!p.groupDefaultCollapsed);
+      const chevron = el("span", { class: "pc-chevron-inline" }, gcollapsed ? "▸" : "▾");
+      const label = (gv === "" ? labelBase + " —" : labelBase + " " + gv) + " (" + groupRows.length + ")";
+      const btn = el("button", { class: "pc-group-toggle", type: "button" },
+        chevron, el("span", { class: "pc-group-title" }, label));
+      tbody.append(el("tr", { class: "pc-group-header" }, el("td", { colspan: span }, btn)));
+      const members = [];
+      for (const row of groupRows) renderRow(row, members);
+      const applyGroup = () => {
+        chevron.textContent = gcollapsed ? "▸" : "▾";
+        btn.setAttribute("aria-expanded", String(!gcollapsed));
+        for (const m of members) {
+          m.tr.hidden = gcollapsed
+            ? true
+            : (m.isDetail ? !(m.key != null && expanded.has(m.key)) : false);
+        }
+      };
+      btn.addEventListener("click", () => {
+        gcollapsed = !gcollapsed;
+        writeCollapsed(gkey, gcollapsed);
+        applyGroup();
+      });
+      applyGroup();
     }
   }
 
@@ -1158,7 +1469,15 @@ function renderDataGrid(node) {
 
   async function refresh() {
     try {
-      const { rows } = await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
+      // A grid scoped to a route param (any eqParam filter) means "show the rows
+      // for the selected entity". With no param present, PARAM is empty and emitting
+      // a where clause of field-colon-empty would read server-side as field equals
+      // empty string and surface empty-valued rows. That is not the selected entity's
+      // rows (there is no selection), so short-circuit to zero rows without a request.
+      const paramScoped = (activeFilter || []).some((f) => f && f.eqParam);
+      const { rows } = paramScoped && PARAM === ""
+        ? { rows: [] }
+        : await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
       // Forget expansion / cached detail nodes for rows no longer present so the maps
       // don't grow without bound and a stale answer can't resurface on a key reuse.
       if (p.rowKey) {
@@ -1197,7 +1516,7 @@ function renderDataGrid(node) {
         }
       }
       tbody.replaceChildren();
-      for (const row of rows) renderRow(row);
+      appendRows(rows);
       if (!rows.length) tbody.append(el("tr", {}, el("td", { colspan: span }, "No rows")));
       if (keepFocus && active.isConnected) {
         active.focus();
@@ -1264,7 +1583,14 @@ function fillNav(list, items) {
 function renderNav(node) {
   const p = node.props || {};
   const rail = p.variant === "rail";
-  const nav = el("nav", { class: rail ? "pc-nav pc-rail" : "pc-nav pc-bar" });
+  // A bar nav can opt into staying pinned to the top of the viewport while the
+  // page scrolls (sticky) — useful on the long, multi-section operator pages so
+  // the page switcher is always reachable. Rails are already full-height, so the
+  // flag only applies to the bar variant.
+  const barSticky = !rail && p.sticky === true;
+  const nav = el("nav", {
+    class: (rail ? "pc-nav pc-rail" : "pc-nav pc-bar") + (barSticky ? " pc-sticky" : ""),
+  });
   if (p.title != null) nav.append(el("div", { class: "pc-nav-title" }, String(p.title)));
   const list = el("div", { class: "pc-nav-items" });
   nav.append(list);
@@ -1280,7 +1606,7 @@ function renderNav(node) {
   return nav;
 }
 
-const RENDERERS = { text: renderText, actionForm: renderActionForm, dataGrid: renderDataGrid, nav: renderNav };
+const RENDERERS = { text: renderText, actionForm: renderActionForm, dataGrid: renderDataGrid, nav: renderNav, button: renderButton };
 
 // Durable per-node UI state. localStorage is keyed by the home page id + node
 // id so two grids on the same page (or the same grid across pages) don't clash,
@@ -1358,7 +1684,9 @@ function makeCollapsible(node, card) {
 // tearing down the previous page's grid polls first.
 async function renderPage() {
   teardown();
-  CURRENT = currentPage();
+  const route = parseRoute();
+  CURRENT = route.page;
+  PARAM = route.param;
   try {
     const doc = await getJSON("/app/pages/" + encodeURIComponent(CURRENT));
     document.title = (doc && doc.title) || "Urban App";