@nanobpm/urban 0.42.0 → 0.43.0

package/dist/runtime/core/modules/cancel.d.ts

@@ -19,10 +19,14 @@ type CancelApi = Pick<AppApi, "engine" | "data" | "log">;
  * Outcome rules:
  *  - `cancelInstance` returns without throwing → the engine accepted the termination (a committed
  *    204); trust it even if the read model still lags at ACTIVE.
- *  - `cancelInstance` throws but the instance reads back non-ACTIVE (already TERMINATED/COMPLETED
- *    /gone) → the cancel was effectively idempotent; treat as success.
- *  - `cancelInstance` throws and the instance is still ACTIVE → an honest failure: report it and
- *    do NOT touch any row (the instance is still running).
+ *  - `cancelInstance` throws but the instance reads back positively terminal (TERMINATED/COMPLETED)
+ *    → the cancel was effectively idempotent; treat as success. Only a TERMINATED read reconciles a
+ *    row here (see below); a COMPLETED read intentionally reconciles nothing.
+ *  - `cancelInstance` throws and the read is NOT positively terminal — still ACTIVE, or "gone"
+ *    (absent from the read model, which after an engine restart can transiently lack a live
+ *    instance) → an honest failure: report it and do NOT touch any row (the instance may still be
+ *    running). A throw is not a committed cancel, and absence from the read model is not proof of
+ *    termination, so success is never inferred from it.
  *
  * Reconcile only on `TERMINATED`: a COMPLETED instance's terminal row-write is owned by the app's
  * own finalize logic, and a gone/ACTIVE instance has nothing to flip here.

package/dist/runtime/core/modules/cancel.js

@@ -13,9 +13,9 @@
 //
 // This primitive keys success on the engine's response, then reconciles off the read model: a
 // non-throwing `cancelInstance` is a committed termination (trusted even if the read model still
-// lags at ACTIVE), while a throw whose instance reads back still-ACTIVE is an honest failure. It
-// reuses the instanceTracking bindings' `onTerminated.set` patch, so the immediate reconcile can
-// never drift from the poll reconciler's.
+// lags at ACTIVE), while a throw that does not read back a positively-terminal state (still ACTIVE,
+// or absent from the read model) is an honest failure. It reuses the instanceTracking bindings'
+// `onTerminated.set` patch, so the immediate reconcile can never drift from the poll reconciler's.
 import { errorMessage } from "../guards.js";
 import { reconcileTerminatedKey } from "./instance-tracking.js";
 /**
@@ -25,10 +25,14 @@ import { reconcileTerminatedKey } from "./instance-tracking.js";
  * Outcome rules:
  *  - `cancelInstance` returns without throwing → the engine accepted the termination (a committed
  *    204); trust it even if the read model still lags at ACTIVE.
- *  - `cancelInstance` throws but the instance reads back non-ACTIVE (already TERMINATED/COMPLETED
- *    /gone) → the cancel was effectively idempotent; treat as success.
- *  - `cancelInstance` throws and the instance is still ACTIVE → an honest failure: report it and
- *    do NOT touch any row (the instance is still running).
+ *  - `cancelInstance` throws but the instance reads back positively terminal (TERMINATED/COMPLETED)
+ *    → the cancel was effectively idempotent; treat as success. Only a TERMINATED read reconciles a
+ *    row here (see below); a COMPLETED read intentionally reconciles nothing.
+ *  - `cancelInstance` throws and the read is NOT positively terminal — still ACTIVE, or "gone"
+ *    (absent from the read model, which after an engine restart can transiently lack a live
+ *    instance) → an honest failure: report it and do NOT touch any row (the instance may still be
+ *    running). A throw is not a committed cancel, and absence from the read model is not proof of
+ *    termination, so success is never inferred from it.
  *
  * Reconcile only on `TERMINATED`: a COMPLETED instance's terminal row-write is owned by the app's
  * own finalize logic, and a gone/ACTIVE instance has nothing to flip here.
@@ -43,11 +47,19 @@ export async function cancelInstanceReconciling(api, bindings, processInstanceKe
         threw = error;
     }
     const state = await readState(api, key, threw);
-    if (threw && state === "ACTIVE") {
-        // The cancel genuinely failed and the instance is still running — never flip a row to a
-        // terminal status while the engine keeps executing it.
-        api.log("error", "cancel: engine termination failed, instance still active", {
+    if (threw && state !== "TERMINATED" && state !== "COMPLETED") {
+        // The cancel threw, so we never got a committed 204 — and the verify read did NOT positively
+        // confirm a terminal state. Two shapes land here, both honest failures:
+        //   • state === "ACTIVE": the instance is demonstrably still running.
+        //   • state === "gone":   the read model has no record of the key. A throw makes this
+        //     ambiguous — after an engine restart the query store can transiently lack a live instance
+        //     before it rehydrates, so "gone" is absence-of-evidence, NOT proof of termination.
+        // Trust neither as success: claiming a cancel that may not have happened (while the run keeps
+        // executing) is the worst possible lie for a cancel button. Report ok:false so the caller
+        // surfaces it and retries; never flip a tracked row to terminal while the instance may live.
+        api.log("error", "cancel: engine termination not confirmed, instance may still be active", {
             processInstanceKey: key,
+            state,
             error: errorMessage(threw),
         });
         return { ok: false, processInstanceKey: key, state, reconciled: 0, error: errorMessage(threw) };

package/dist/runtime/core/modules/pages.js

@@ -483,7 +483,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; }
@@ -495,6 +501,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; }
@@ -505,6 +518,16 @@ 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; }
+/* 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; }
@@ -561,6 +584,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
@@ -714,11 +746,151 @@ function renderText(node) {
   return el(v === "heading" ? "h1" : "p", { class: cls }, node.props.text || "");
 }
 
-// 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
+// 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 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
@@ -734,6 +906,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)) {
@@ -1228,7 +1421,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,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nanobpm/urban",
-	"version": "0.42.0",
+	"version": "0.43.0",
 	"description": "Urban: build and run code-first apps on Nano — runtime, derivation toolkit, and CLI in one. Author durable processes with @nanobpm/workflow (defineFlow), a typed datasource, forms, triggers and surfaces from a nano.app.json manifest, on Node or Deno.",
 	"license": "Apache-2.0",
 	"type": "module",
@@ -66,7 +66,7 @@
 		"@nanobpm/nano-sdk": "^1.2.3",
 		"@nanobpm/workflow": "^0.8.0",
 		"bpmn-auto-layout": "^2.0.0-alpha.2",
-		"create-urban-app": "^0.13.0",
+		"create-urban-app": "^0.14.0",
 		"yaml": "^2.9.0"
 	},
 	"devDependencies": {

package/src/runtime/core/modules/cancel.test.ts

@@ -311,3 +311,31 @@ test("a thrown cancel whose verify read also fails is reported as an honest fail
     await h.close();
   }
 });
+
+test("a thrown cancel whose verify read comes back empty (gone) is an unverified failure, not a false success", async () => {
+  // The engine-restart trap: the cancel POST throws (dead keep-alive socket / the brief window
+  // the gateway is down), then the verify search hits the just-restarted engine whose query store
+  // has NOT yet rehydrated the still-running instance — so the read comes back empty ("gone").
+  // A throw is not a committed 204, and absence from the read model is not proof of termination, so
+  // reporting success here is the "worst possible lie": the button says cancelled while the run
+  // keeps going. It must be an honest ok:false so the caller surfaces it and the user retries.
+  const { engine } = cancelEngine({
+    states: {}, // read model transiently empty (mid-restart), though instance "100" is still live
+    onCancel: () => {
+      throw new Error("fetch failed");
+    },
+  });
+  const h = await withHarness(engine);
+  try {
+    const r = await cancelInstanceReconciling(h.api, [PR_BINDING], "100");
+    assert.equal(r.ok, false); // NOT a false success
+    assert.equal(r.state, "gone");
+    assert.equal(r.reconciled, 0);
+    assert.match(r.error ?? "", /fetch failed/);
+    const row = await h.table.get("100");
+    assert.equal(row?.status, "converging"); // never flip a possibly-live run to a terminal status
+    assert.ok(h.logs.some((l) => l.level === "error"));
+  } finally {
+    await h.close();
+  }
+});

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

@@ -13,9 +13,9 @@
 //
 // This primitive keys success on the engine's response, then reconciles off the read model: a
 // non-throwing `cancelInstance` is a committed termination (trusted even if the read model still
-// lags at ACTIVE), while a throw whose instance reads back still-ACTIVE is an honest failure. It
-// reuses the instanceTracking bindings' `onTerminated.set` patch, so the immediate reconcile can
-// never drift from the poll reconciler's.
+// lags at ACTIVE), while a throw that does not read back a positively-terminal state (still ACTIVE,
+// or absent from the read model) is an honest failure. It reuses the instanceTracking bindings'
+// `onTerminated.set` patch, so the immediate reconcile can never drift from the poll reconciler's.
 
 import type { AppApi } from "../context.ts";
 import type { InstanceTracking } from "../manifest.ts";
@@ -44,10 +44,14 @@ type CancelApi = Pick<AppApi, "engine" | "data" | "log">;
  * Outcome rules:
  *  - `cancelInstance` returns without throwing → the engine accepted the termination (a committed
  *    204); trust it even if the read model still lags at ACTIVE.
- *  - `cancelInstance` throws but the instance reads back non-ACTIVE (already TERMINATED/COMPLETED
- *    /gone) → the cancel was effectively idempotent; treat as success.
- *  - `cancelInstance` throws and the instance is still ACTIVE → an honest failure: report it and
- *    do NOT touch any row (the instance is still running).
+ *  - `cancelInstance` throws but the instance reads back positively terminal (TERMINATED/COMPLETED)
+ *    → the cancel was effectively idempotent; treat as success. Only a TERMINATED read reconciles a
+ *    row here (see below); a COMPLETED read intentionally reconciles nothing.
+ *  - `cancelInstance` throws and the read is NOT positively terminal — still ACTIVE, or "gone"
+ *    (absent from the read model, which after an engine restart can transiently lack a live
+ *    instance) → an honest failure: report it and do NOT touch any row (the instance may still be
+ *    running). A throw is not a committed cancel, and absence from the read model is not proof of
+ *    termination, so success is never inferred from it.
  *
  * Reconcile only on `TERMINATED`: a COMPLETED instance's terminal row-write is owned by the app's
  * own finalize logic, and a gone/ACTIVE instance has nothing to flip here.
@@ -68,11 +72,19 @@ export async function cancelInstanceReconciling(
 
   const state = await readState(api, key, threw);
 
-  if (threw && state === "ACTIVE") {
-    // The cancel genuinely failed and the instance is still running — never flip a row to a
-    // terminal status while the engine keeps executing it.
-    api.log("error", "cancel: engine termination failed, instance still active", {
+  if (threw && state !== "TERMINATED" && state !== "COMPLETED") {
+    // The cancel threw, so we never got a committed 204 — and the verify read did NOT positively
+    // confirm a terminal state. Two shapes land here, both honest failures:
+    //   • state === "ACTIVE": the instance is demonstrably still running.
+    //   • state === "gone":   the read model has no record of the key. A throw makes this
+    //     ambiguous — after an engine restart the query store can transiently lack a live instance
+    //     before it rehydrates, so "gone" is absence-of-evidence, NOT proof of termination.
+    // Trust neither as success: claiming a cancel that may not have happened (while the run keeps
+    // executing) is the worst possible lie for a cancel button. Report ok:false so the caller
+    // surfaces it and retries; never flip a tracked row to terminal while the instance may live.
+    api.log("error", "cancel: engine termination not confirmed, instance may still be active", {
       processInstanceKey: key,
+      state,
       error: errorMessage(threw),
     });
     return { ok: false, processInstanceKey: key, state, reconciled: 0, error: errorMessage(threw) };

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

@@ -138,6 +138,36 @@ test("the shell styles the app through the shared --nano-* token contract", asyn
   assert.match(html, /:root:not\(\[data-appearance\]\)/);
 });
 
+test("the warn badge stays legible in light appearance", async () => {
+  const res = await dispatch("GET", "/");
+  const html = res.body ?? "";
+  // The warn badge sits on --nano-warn, which is a bright amber in dark mode
+  // (dark text reads well) but a dark orange in light mode (#b45309), where the
+  // same dark text collapses to near-zero contrast. Both light paths — the
+  // console-themed [data-appearance="light"] and the standalone
+  // prefers-color-scheme fallback — must flip the warn label to white so it
+  // stays readable.
+  assert.match(html, /:root\[data-appearance="light"\]\s*\.pc-badge-warn\s*\{\s*color:#fff;\s*\}/);
+  assert.match(
+    html,
+    /@media \(prefers-color-scheme: light\)\s*\{\s*:root:not\(\[data-appearance\]\)\s*\.pc-badge-warn\s*\{\s*color:#fff;\s*\}\s*\}/,
+  );
+});
+
+test("grid cells wrap long, space-less values so one cell can't overflow the table", async () => {
+  // Regression: a dataGrid cell holding a long space-less value (e.g. a JSON
+  // blob or a 40-char SHA) has no soft-wrap opportunity, so with table-layout
+  // auto it forces its column to the value's full width and pushes the whole
+  // table past the page. The shared grid CSS must let such a cell break so the
+  // column can shrink to fit its container.
+  const res = await dispatch("GET", "/");
+  const html = res.body ?? "";
+  const rule = (html.match(/table\.pc-grid th,\s*table\.pc-grid td\s*\{[^}]*\}/) ?? [""])[0];
+  assert.ok(rule, "grid th/td rule must be present");
+  assert.match(rule, /overflow-wrap:anywhere/);
+  assert.match(rule, /max-width:/);
+});
+
 test("GET /app/runtime.js serves the renderer module", async () => {
   const res = await dispatch("GET", "/app/runtime.js");
   assert.match(res.headers?.["content-type"] ?? "", /javascript/);
@@ -290,6 +320,24 @@ test("renderer wires a column's linkField to a new-tab anchor", async () => {
   assert.match(js, /rel: "noopener noreferrer"/);
 });
 
+test("renderer wires a column's badge to a tone-classed pill shown only when present", async () => {
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  // A column declaring `badge` renders a compact circular pill (e.g. a red "1"
+  // flagging an incident) only when the field value is non-empty; an empty value
+  // leaves the cell blank so the column is unobtrusive until it matters. Guard
+  // the shape: presence-gated on the trimmed field, tone is allow-listed
+  // (default danger), the label defaults to "1", and the full field text becomes
+  // the tooltip.
+  assert.match(js, /if\s*\(col\.badge\)/);
+  assert.match(js, /text\.trim\(\)\s*===\s*""/);
+  assert.match(js, /t\s*===\s*"warn"\s*\|\|\s*t\s*===\s*"ok"\s*\|\|\s*t\s*===\s*"info"\s*\?\s*t\s*:\s*"danger"/);
+  assert.match(js, /col\.badge\.label\s*==\s*null\s*\?\s*"1"/);
+  assert.match(js, /class:\s*"pc-badge pc-badge-"\s*\+\s*tone/);
+  assert.match(js, /title:\s*text/);
+  assert.match(js, /"aria-label":\s*text/);
+});
+
 test("renderer wires a column's processExplorer link to the console explorer", async () => {
   const res = await dispatch("GET", "/app/runtime.js");
   const js = res.body ?? "";
@@ -480,6 +528,62 @@ test("the renderer ships a nav node (menu bar / rail) with in-app + external lin
   assert.match(js, /pc-main-col/);
 });
 
+test("the renderer ships a button node that opens a copy-pasteable modal", async () => {
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  // button is a first-class node type.
+  assert.match(js, /button: renderButton/);
+  assert.match(js, /function renderButton\(node\)/);
+  // A ghost variant renders the muted outline style; a button carries its modal.
+  assert.match(js, /p\.variant === "ghost"/);
+  assert.match(js, /btn\.addEventListener\("click", \(\) => openModal\(m\)\)/);
+  // The modal is appended to <body>, is dismissable, and cleans up its keydown.
+  assert.match(js, /function openModal\(m\)/);
+  assert.match(js, /class: "pc-modal-overlay"/);
+  assert.match(js, /"aria-modal": "true"/);
+  assert.match(js, /if \(ev\.key === "Escape"\) \{ close\(\); return; \}/);
+  assert.match(js, /document\.removeEventListener\("keydown", onKey\)/);
+  // {{appBase}} in copy text is rebased onto the absolute mount root so an
+  // external agent gets a fetchable URL.
+  assert.match(js, /function resolveCopyText\(text\)/);
+  assert.match(js, /split\("\{\{appBase\}\}"\)\.join\(APP_BASE\.toString\(\)\)/);
+  // Copy is clipboard-first with a sandbox-safe execCommand fallback.
+  assert.match(js, /async function copyToClipboard\(text\)/);
+  assert.match(js, /navigator\.clipboard\.writeText/);
+  assert.match(js, /document\.execCommand\("copy"\)/);
+  // The fallback textarea is torn down in a finally so a throwing select()/
+  // execCommand never leaves a detached node accreting in <body> on retry.
+  assert.match(js, /finally \{ ta\.remove\(\); \}/);
+  // The dialog carries an accessible name (labelled by its title, or a fallback
+  // aria-label) so screen readers don't announce an unnamed dialog.
+  assert.match(js, /"aria-labelledby": titleId/);
+  assert.match(js, /"aria-label": "Dialog"/);
+  // An open modal is registered with teardown() so a page switch disposes it
+  // instead of leaking a stale overlay + document-level keydown listener.
+  assert.match(js, /disposers\.push\(close\)/);
+  // A manual close removes its own disposer entry, so repeated open/close cycles
+  // don't accrete dead close() closures on the disposers stack.
+  assert.match(js, /disposers\.indexOf\(close\)/);
+  assert.match(js, /disposers\.splice\(i, 1\)/);
+  // Focus is restored to the previously-focused element on close, and Tab is
+  // trapped inside the dialog so it can't reach the inert page behind the overlay.
+  assert.match(js, /const prevFocus = document\.activeElement/);
+  assert.match(js, /if \(ev\.key !== "Tab"\) return/);
+  assert.match(js, /ev\.preventDefault\(\); last\.focus\(\)/);
+  assert.match(js, /ev\.preventDefault\(\); first\.focus\(\)/);
+  // Only one modal opens at a time: a second open (e.g. double-click) is dropped
+  // so overlays and document-level keydown listeners never stack.
+  assert.match(js, /let modalOpen = false/);
+  assert.match(js, /if \(modalOpen\) return/);
+  assert.match(js, /modalOpen = true/);
+  assert.match(js, /modalOpen = false/);
+  // The aria-labelledby title id is unique per modal instance so it can't
+  // collide with a pre-existing page id and mis-associate the label.
+  assert.match(js, /let modalSeq = 0/);
+  assert.match(js, /"pc-modal-title-" \+ \(\+\+modalSeq\)/);
+});
+
+
 test("GET /app/data/<source>/<table> returns rows", async () => {
   const res = await dispatch("GET", "/app/data/app/orders");
   assert.equal(res.status, 200);

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,6 +569,16 @@ 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; }
+/* 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; }
@@ -613,6 +636,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
@@ -766,11 +798,151 @@ function renderText(node) {
   return el(v === "heading" ? "h1" : "p", { class: cls }, node.props.text || "");
 }
 
-// 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
+// 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 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 +958,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)) {
@@ -1280,7 +1473,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,