@mason-data/cli 0.6.2 → 0.8.0

package/dist/src/web/app.js

@@ -1,335 +1,407 @@
 /**
  * THE WEB PAGE OF `mason start` (`mason ui`; docs/WEB-UI.md, and .claude/rules/web-ui.md for whoever builds it out):
- * one page, two sections, rendered from the run's command server's JSON (src/cli/run-server.ts) in the words the
- * commands print —
+ * the SHELL — a left sidebar (the project, then a nav of links with icons: Overview · Tables · Users, and the
+ * Observability group: Queries · Usage · Logs; at its foot when it was updated and the version; an icon rail on a narrow
+ * window, a menu on a phone) and one section per page, the one shown chosen by the URL's hash (`#overview`, the
+ * default; an unknown hash is the Overview; `#observability/queries?range=24h`, the shared time range of the three) —
+ * over the pages, each an ES module of src/web/pages/ rendered from the run's command server's JSON
+ * (src/cli/run-server.ts) in the words the commands print.
  *
- *   STATUS   GET /api/state, /api/slow, /api/refused: what `mason status` prints, polled every 2 s while the tab is seen
- *   USERS    GET /api/users, POST /api/users, DELETE /api/users/<name>: what `mason user list|add|remove` does
+ * Plain JavaScript, ES modules, no framework and no build step: the server serves each file as it is (PAGE_ROUTES),
+ * under a `default-src 'self'` policy. The renderers are PURE FUNCTIONS OF THE JSON, returning HTML strings (every
+ * value escaped), exported so tests/web-page.test.ts runs them under node; `createApp` holds what the page knows and
+ * does, over a `fetch` it is handed; `start` (a browser only) wires them to the document. The page never holds the
+ * run's token: the browser's cookie carries it (src/cli/security.ts); of the address it reads the hash alone.
  *
- * Plain JavaScript, an ES module, no framework and no build step: the server serves this file as it is, under a
- * `default-src 'self'` policy. The renderers are PURE FUNCTIONS OF THE JSON, returning HTML strings (every value
- * escaped), exported so tests/web-page.test.ts runs them under node; `createApp` holds what the page knows and does,
- * over a `fetch` it is handed; `start` (a browser only) wires them to the document. The page never holds the run's
- * token: the browser's cookie carries it (src/cli/security.ts).
+ * THE PAGE MODULE CONTRACT (src/web/pages/<id>.js), so a page is built without touching the others:
+ *
+ *   export const page = { id, title, hash?, parent?, create(ctx) }
+ *     id      its section (<section id="page-<id>"> in index.html) and its route (/pages/<id>.js); its hash too, unless
+ *     hash    says another (`overview`, `observability/queries`): the address it is shown at
+ *     title   its link in the nav (under its `parent`'s group, `observability`, whose pages share the time range:
+ *             ctx.range()); its icon is the shell's (NAV_ICONS)
+ *     create(ctx) → {
+ *       reads()        [{ path, everyMs }]: what it reads WHILE SHOWN, each at its own rate (everyMs ≤ POLL_MS: every
+ *                      poll); a path is the store's key, so a path built from the page's own state (a filter, a page
+ *                      of results) is read as that state changes. The FIRST is the page's own: its failure is the
+ *                      banner at the top (`poll`); the page renders the others' failures itself.
+ *       view()         { <element id>: html }: the parts of its section it writes, from ctx.read and its own state
+ *       actions        { name: fn }: what its buttons do, merged onto the app (the tests drive them); each re-reads
+ *                      what it changed with ctx.refresh([path])
+ *       afterRead?()   after a poll stored its reads: drop what the new data made stale (a confirm for a row gone)
+ *       click?(dataset, button, { doc, win })  a button of its section clicked: null when not its, else a value or a
+ *                      promise (the shell writes the page again once it settles)
+ *       submit?(form, FormData)  a form submitted: null when not its, else a promise (the shell prevents the default)
+ *       input?(target)  an input changed: null when not its
+ *       toggle?(target)  a <details> opened or closed: null when not its, else a value or a promise (as `click`);
+ *                      a details that must stay open across a refresh is `details(key, …)` of shared.js, its open set
+ *                      `createOpenSet()` in the page's state, whose `toggle` this is. `target` is the element (its
+ *                      toggle event) or, for a click on its summary, `{ id, dataset, open, clicked: true }`: `open`
+ *                      what the click asks for, BEFORE the element changes; clicked, a details the page keeps is
+ *                      answered (true) even when its state already says so, the shell writing it again
+ *       charts?()      { <holder key>: spec }: the charts drawn in its holders after each write (src/web/charts.js; a
+ *                      progressive addition: every number a chart draws is also text)
+ *       route?(params, { doc })  the hash showed it with these parameters (`#tables?show=failed`: { show: "failed" }):
+ *                      it takes the ones it knows into its state (and a control outside its parts, through `doc`)
+ *       model?         its state, for the tests
+ *     }
+ *     ctx = { ask(path, init) → { body } | { failure }, read(path) → { body, failure } | undefined (body: the last
+ *             one read; failure: this read's, else null), refresh(paths) → Promise (read them now), now() → Date,
+ *             range() → a key of RANGES: the time range the Observability pages share (from the hash) }
+ *
+ * A page is registered by its import and its place in PAGES below, its route in PAGE_ROUTES, and its section in
+ * index.html.
  */
+import { esc, badge, icon, createAsk, renderFailure, updatedText, placePops, RANGES, DEFAULT_RANGE, rangeOf, rangeOffered, isLive, POLL_MS } from "./shared.js";
+import { createCharts } from "./charts.js";
+import { page as statusPage } from "./pages/status.js";
+import { page as tablesPage } from "./pages/tables.js";
+import { page as queriesPage } from "./pages/queries.js";
+import { page as usersPage } from "./pages/users.js";
+import { page as usagePage } from "./pages/usage.js";
+import { page as syncsPage } from "./pages/syncs.js";
 
-// ------------------------------------------------------------------ helpers, DOM-free
+/** What the shell itself reads when the page shown does not: the state (the sidebar's project, badge and version). */
+const SHELL_STATE = { path: "/api/state", everyMs: 60_000 };
 
-/** A value as HTML text: every character that means something in HTML escaped. */
-export const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+/** A text that moves with the clock (an age, a running time), and a part's HTML without them: `paint` sets those
+ *  texts in place when nothing else changed. */
+const TICK = /(<time data-tick[^>]*>)([^<]*)(<\/time>)/g;
+const steady = (html) => html.replace(TICK, "$1$3");
 
-const n = (x) => x.toLocaleString("en-US");
-const firstLine = (s) => s.split("\n")[0].trim();
+/** The longest a pointer's press holds the page's writes (a click is well under it): see `pressedAt`. */
+export const PRESS_HOLD_MS = 2000;
 
-/** A span of seconds as a person reads it: `45 s`, `12 min`, `2 h 5 min` (src/cli/readiness.ts `duration`, held equal by the tests). */
-export function duration(seconds) {
-  const s = Math.max(1, Math.round(seconds));
-  if (s < 90) return `${s} s`;
-  const m = Math.round(s / 60);
-  return m < 90 ? `${m} min` : `${Math.floor(m / 60)} h ${m % 60} min`;
-}
+// every renderer the tests import from here, wherever it lives now
+export * from "./shared.js";
+export { copyingText, tableLine, keptAge, sourceRows, renderStatus } from "./pages/status.js";
+export { tableFacts, addedLines, removedReport, pickBody, columnsPath, renderTableAdded, renderTablesRemoved, renderTables } from "./pages/tables.js";
+export { renderUsers, renderAdded, attributesText } from "./pages/users.js";
+export { renderRequests } from "./pages/queries.js";
+export { renderRunning, renderSessions, renderClients, renderSlowest, queriesHref } from "./pages/usage.js";
 
-/** A share (0 to 1) as the commands print it beside a bar: whole percent, rounded down (`12%`). */
-export const percent = (share) => `${Math.floor(Math.max(0, Math.min(1, share)) * 100)}%`;
+/** The pages, in the nav's order: a page with a `parent` is in its parent's group. */
+export const PAGES = [statusPage, tablesPage, usersPage, queriesPage, usagePage, syncsPage];
 
-/** The time a copy has left, as the commands print it: `~12 min left`; "" when nothing is measured yet. */
-export const leftText = (secondsLeft) => secondsLeft === null || secondsLeft === undefined ? "" : `~${duration(secondsLeft)} left`;
+/** The groups a parent stands for: its title, the heading of its pages in the nav. */
+const GROUPS = { observability: { title: "Observability" } };
 
-/** A table as the commands name it: `orders` in public, else `schema.table` (src/cli/sources.ts `entryName`). */
-export const entryName = (table) => table.startsWith("public.") ? table.slice("public.".length) : table;
+/** Each page's icon in the nav (Lucide's names, src/web/shared.js ICONS): the shell's, so a page module stays its own. */
+export const NAV_ICONS = { status: "layout-dashboard", tables: "table", users: "users", queries: "square-terminal", usage: "chart-column", syncs: "logs" };
 
-/**
- * What a copying table's line says, and how full its bar is: src/cli/readiness.ts `copyingText`, line for line, so the
- * page and `mason status` say one thing (tests/web-page.test.ts holds the two equal).
- */
-export function copyingText(copied, rowsEstimate, p) {
-  const shown = copied + (p?.rowsReading ?? 0);
-  const estimate = rowsEstimate !== null && rowsEstimate > 0 ? rowsEstimate : null;
-  const past = estimate !== null && shown > estimate;
-  const fraction = p !== undefined ? p.share : estimate === null ? null : Math.min(0.99, shown / estimate);
-  const of = estimate === null ? "" : past ? ` · past the ~${n(estimate)} estimated` : ` of ~${n(estimate)}`;
-  const rowsText = (k) => past ? `${n(k)} rows${of}` : `${n(k)}${of} rows`;
-  if (p === undefined) return { fraction, text: rowsText(copied) };
-  const since = p.readingSeconds === null ? "" : ` (${duration(p.readingSeconds)})`;
-  const chunks = (k) => `${k} chunk${k === 1 ? "" : "s"}`;
-  if (p.rowsPerSecond === null) {
-    const first = p.reading === 0 ? "about to read the first chunk" : `reading the first ${p.reading === 1 ? "chunk" : chunks(p.reading)}${since}`;
-    return { fraction, text: copied === 0 ? `${first}${estimate === null ? "" : ` · ~${n(estimate)} rows to copy`}` : `${rowsText(copied)} · resumed, ${first}` };
-  }
-  const parts = [rowsText(shown)];
-  const allIn = p.reading === 0 && p.chunksDone >= p.chunksTotal;
-  if (allIn) parts.push(`every chunk read (${p.chunksDone}): checking it and swapping it in`);
-  else parts.push(`${p.reading === 0 ? "starting the next chunk" : `${chunks(p.reading)} reading${since}`}, ${p.chunksDone} of ~${p.chunksTotal} in`);
-  parts.push(`${n(Math.round(p.rowsPerSecond))} rows/s`);
-  if (!allIn && p.secondsLeft !== null) parts.push(leftText(p.secondsLeft));
-  return { fraction, text: parts.join(" · ") };
-}
+/** The hashes of before the Observability group, and the group's own: each lands on the view it was (`#status` the Overview). */
+const ALIASES = { status: "status", queries: "queries", usage: "usage", logs: "syncs", syncs: "syncs", "observability/logs": "syncs", observability: "queries" };
 
-/**
- * AN ADDED TABLE'S LINE, as `mason status` and `mason wait` print it after its bar (src/cli/commands.ts `tableLines`):
- * its state (done, unsynced, failed, copying, waiting), how full its bar is, and what it says.
- */
-export function tableLine(t) {
-  if (t.error) return { state: "failed", fraction: 1, what: `its copy failed: ${firstLine(t.error)}` };
-  if (t.copy?.phase === "copying") {
-    const c = copyingText(t.copy.rowsCopied, t.rows, t.copy.progress);
-    return { state: "copying", fraction: c.fraction ?? 0, what: /^\d/.test(c.text) ? `copying ${c.text}` : c.text };
-  }
-  if (!t.copy) return { state: "waiting", fraction: 0, what: "waiting for its copy to start" };
-  if (t.unsynced) {
-    return { state: "unsynced", fraction: 1, what: `${n(t.copy.rowsCopied ?? 0)} rows · copied, NOT kept current (${t.unsynced.reason}${t.unsynced.asOf ? `; as of ${t.unsynced.asOf.slice(0, 16).replace("T", " ")} UTC` : ""}) — mason sync ${entryName(t.table)}, or mason start --replication` };
-  }
-  return { state: "done", fraction: 1, what: `${n(t.copy.rowsCopied ?? 0)} rows · copied${t.copy.retired ? ` · ${t.copy.retired}` : ""}` };
-}
-
-/** `mason status`'s rows for the database (src/cli/commands.ts `sourceRows`): its sources file, its URL as the run masked it, how its changes arrive. */
-export function sourceRows(s) {
-  return [
-    ...(s.source.file ? [["Source", `${s.source.file} (the tables it names are added)`]] : []),
-    ["Database", `${s.source.url} · Postgres ${s.source.version}${s.source.standby ? " · a read replica" : ""}`],
-    ["Changes", s.source.replication ? `logical replication: slot ${s.source.replication.slot}, publication ${s.source.replication.publication} ` +
-        `(${s.source.replication.owned ? "Mason's own" : "named: read as it is, never altered"}) · mason start --poll goes back to polling`
-      : `polling with SELECTs (xmin), every ${s.engine.pollSeconds} s · mason start --replication reads the database's change log instead`],
-  ];
-}
-
-// ------------------------------------------------------------------ the renderers: JSON in, HTML out
-
-const rowsHtml = (rows) => `<dl class="facts">${rows.map(([k, v]) => `<dt>${esc(k)}</dt><dd>${esc(v)}</dd>`).join("")}</dl>`;
-const code = (s) => `<code>${esc(s)}</code>`;
+const hashOfPage = (p) => p.hash ?? p.id;
 
 /**
- * A FAILURE AS THE CLI SAYS IT (src/cli/command.ts `failureText`): what is wrong after a ✗, then `why` and `fix` as
- * rows, then Next: each command and what it does. `f` is the server's `failure` ({ code, message, why?, fix?, next }).
+ * WHAT A HASH SHOWS: the page (`#tables`, `#observability/usage`, an old one — `#status`, `#queries` — the view it was;
+ * none, or one it does not know, the Overview) and the parameters after its `?` (`range=7d`, `show=failed`).
  */
-export function renderFailure(f) {
-  const rows = [...(f.why ? [["why", f.why]] : []), ...(f.fix ? [["fix", f.fix]] : [])];
-  const next = f.next ?? [];
-  return `<div class="failure" role="alert"><p class="message"><span class="mark" aria-hidden="true">✗</span> ${esc(f.message)}</p>` +
-    (rows.length ? `<dl>${rows.map(([k, v]) => `<dt>${k}</dt><dd>${esc(v)}</dd>`).join("")}</dl>` : "") +
-    (next.length ? `<p class="next-head">Next:</p><ul class="next">${next.map((s) => `<li>${code(s.command)}${s.what ? ` <span>${esc(s.what)}</span>` : ""}</li>`).join("")}</ul>` : "") +
-    "</div>";
+export function parseHash(hash) {
+  const raw = String(hash ?? "").replace(/^#/, "");
+  const at = raw.indexOf("?");
+  const where = at < 0 ? raw : raw.slice(0, at);
+  const params = Object.fromEntries(new URLSearchParams(at < 0 ? "" : raw.slice(at + 1)));
+  const page = PAGES.find((p) => hashOfPage(p) === where)?.id ?? ALIASES[where] ?? "status";
+  return { id: page, params };
 }
 
-/** How many of `xs` were in the last day, or why they could not be read. */
-const countLine = (label, r, count, tail) => "failure" in r
-  ? `<p class="count">${esc(label)}: could not read them (${esc(firstLine(r.failure.message))}; ${code("mason logs")} has the detail)</p>`
-  : `<p class="count">${esc(label)}: <strong>${n(count(r))}</strong> in the last day${tail(r)}</p>`;
+/** A page's address with its parameters (`hashOf("queries", { range: "7d" })` → `#observability/queries?range=7d`); the
+ *  default range is left out, so the plain address is Now. */
+export function hashOf(id, params = {}) {
+  const p = PAGES.find((x) => x.id === id) ?? PAGES[0];
+  const q = new URLSearchParams(Object.entries(params).filter(([k, v]) => v !== undefined && v !== "" && !(k === "range" && v === DEFAULT_RANGE)));
+  const qs = q.toString();
+  return `#${hashOfPage(p)}${qs ? `?${qs}` : ""}`;
+}
 
-/**
- * THE STATUS SECTION from `/api/state` (and the counts of `/api/slow`, `/api/refused`; each `{ failure }` when it could
- * not be read): what `mason status` prints — the database, each added table's copy (its bar, percent and the line
- * `mason wait` shows), the warnings, the slow and refused counts, and readiness. Never the engine's name.
- */
-export function renderStatus(s, requests = {}) {
-  const parts = [rowsHtml([...sourceRows(s), ...s.warnings.map((w) => ["Warning", w])])];
-  const picked = s.tables.filter((t) => t.added);
-  if (!picked.length) {
-    parts.push(`<p class="readiness">No table added yet (${n(s.tables.length)} in the database).</p>`,
-      `<p class="dim">${code("mason tables")} lists them; ${code("mason add <table>")} copies one.</p>`);
-    return parts.join("");
+/** The nav's entries, in order: a page of its own, or a group holding its pages (`pages`), at the place of its first. */
+export function tabs() {
+  const list = [];
+  for (const p of PAGES) {
+    if (!p.parent) { list.push({ id: p.id, title: p.title, pages: [p.id] }); continue; }
+    const tab = list.find((t) => t.id === p.parent);
+    if (tab) tab.pages.push(p.id); else list.push({ id: p.parent, title: GROUPS[p.parent]?.title ?? p.parent, pages: [p.id] });
   }
-  // as tableLines orders them: the finished first, in the order they finished, then the failed, the copying, the waiting
-  const rank = { done: 0, unsynced: 0, failed: 1, copying: 2, waiting: 3 };
-  const lines = picked.map((t) => ({ t, l: tableLine(t) }))
-    .sort((a, b) => rank[a.l.state] - rank[b.l.state] || (a.t.copy?.updatedAt ?? "").localeCompare(b.t.copy?.updatedAt ?? "") || a.t.table.localeCompare(b.t.table));
-  parts.push(`<h3>Tables (${picked.length} of ${s.tables.length} added)</h3>`,
-    `<table class="tables"><thead><tr><th scope="col">Table</th><th scope="col">Copy</th><th scope="col"></th></tr></thead><tbody>${lines.map(({ t, l }) =>
-      `<tr class="t-${l.state}"><th scope="row">${code(t.table)}</th>` +
-      `<td class="bar"><progress max="100" value="${Math.floor(Math.max(0, Math.min(1, l.fraction)) * 100)}"></progress> <span class="pct">${percent(l.fraction)}</span></td>` +
-      `<td class="what">${esc(l.what)}${t.error && t.error.includes("\n") ? `<details><summary>the whole error</summary><pre>${esc(t.error)}</pre></details>` : ""}</td></tr>`).join("")}</tbody></table>`);
-  if (requests.slow) parts.push(countLine("Slow queries", requests.slow, (r) => r.slow.length, (r) => ` (${n(r.slowMs / 1000)} s or more)`));
-  if (requests.refused) parts.push(countLine("Refused queries", requests.refused, (r) => r.total ?? r.refused.length, () => ""));
-  if (requests.slow || requests.refused) parts.push(`<p class="dim">${code("mason status")} lists them; ${code("mason logs --requests")} every one.</p>`);
-  const r = s.readiness;
-  if (r) {
-    if (r.ready) parts.push(`<p class="readiness ok">Ready: every added table is copied and served.</p>`);
-    else if (r.failed.length) parts.push(`<p class="readiness bad">Failed:</p><ul class="bullets">${r.failed.map((x) => `<li>${esc(x)}</li>`).join("")}</ul>`);
-    else parts.push(`<p class="readiness">Under way:</p><ul class="bullets">${r.waiting.map((x) => `<li>${esc(x)}</li>`).join("")}</ul>`);
-  }
-  return parts.join("");
+  return list;
 }
 
-/** The heading's line: the database the run copies, and its sources file's name when that is another. */
-export function renderWhere(s) {
-  return `${esc(s.source.database)}${s.source.name && s.source.name !== s.source.database ? ` · source ${esc(s.source.name)}` : ""}`;
-}
+/** One link of the nav: its icon and its label (the label is the link's name; on the icon rail, its tooltip). */
+const navLink = (p, shown, href) =>
+  `<a href="${esc(href)}"${p.id === shown ? ` aria-current="page"` : ""}>${icon(NAV_ICONS[p.id] ?? "")}<span class="label">${esc(p.title)}</span></a>`;
 
 /**
- * THE USERS from `/api/users` (`mason user list --json`'s shape): a line each — its name, when it was added, whether it
- * connects — with a Remove button; the one being removed asks first (`confirming`, its name).
+ * THE SIDEBAR'S NAV: a link per page, each with its icon, the page shown marked as the current page; a group (the
+ * Observability views) is a heading over its pages' links, always shown, each keeping the range they share — so the
+ * hash is the state, and a link followed keeps the time range chosen.
  */
-export function renderUsers(list, confirming = null) {
-  if (!list.users.length) return `<p class="dim">No users yet.</p>`;
-  return `<table class="users"><thead><tr><th scope="col">User</th><th scope="col">Added</th><th scope="col"></th></tr></thead><tbody>${list.users.map((u) =>
-    `<tr><th scope="row">${code(u.name)}${u.live ? "" : ` <span class="warn">does not connect: the API key was rotated since it was added</span>`}</th>` +
-    `<td class="dim">${esc(u.addedAt.slice(0, 16).replace("T", " "))} UTC · id ${esc(u.id)}</td>` +
-    `<td class="act">${confirming === u.name
-      ? `<span class="confirm">Remove ${esc(u.name)}? It connects no more, and the sessions it holds end at their next statement.</span> ` +
-        `<button type="button" class="danger" data-confirm-remove="${esc(u.name)}">Remove ${esc(u.name)}</button> <button type="button" data-cancel-remove>Cancel</button>`
-      : `<button type="button" data-remove="${esc(u.name)}">Remove</button>`}</td></tr>`).join("")}</tbody></table>`;
-}
+export const renderNav = (shown, range = DEFAULT_RANGE) => `<ul>${tabs().map((t) => {
+  const own = PAGES.find((p) => p.id === t.id);
+  if (own) return `<li>${navLink(own, shown, hashOf(own.id))}</li>`;
+  const pages = t.pages.map((id) => PAGES.find((p) => p.id === id));
+  return `<li class="group"><p class="group-title" id="nav-${esc(t.id)}">${esc(t.title)}</p><ul aria-labelledby="nav-${esc(t.id)}">` +
+    pages.map((p) => `<li>${navLink(p, shown, hashOf(p.id, { range }))}</li>`).join("") + `</ul></li>`;
+}).join("")}</ul>`;
 
 /**
- * A USER JUST ADDED (`mason user add --json`'s shape): its password, shown this once, in a box with a copy button,
- * beside the URL to paste — the rows `mason user add` prints. Mason keeps no copy, so it is never shown again.
+ * THE TIME RANGE OF A GROUP'S PAGE (the Observability views'), written beside the view's title in ONE header row (its
+ * section's `range-<id>`; the group's name is the sidebar's heading): a segmented control — each a link to the same view
+ * at that range, so the hash is the state and Back goes to the range before — Now first, the one that follows what
+ * happens (said "Live" beside it); any other is read once when chosen, so beside it are when it was read (`asOf`, a
+ * Date) and Refresh, which reads it again. "" for a page of its own.
  */
-export function renderAdded(a) {
-  const rows = [["url", a.url, "added-url"], ["user", a.user], ["password", a.password, "added-password"], ["database", a.database],
-    ...(a.host !== undefined ? [["host", a.host], ["port", String(a.port)]] : []), ...(a.sslmode && a.sslmode !== "disable" ? [["ssl mode", a.sslmode]] : [])]
-    .filter(([, v]) => v !== undefined);
-  return `<div class="added" role="status"><p class="headline">The user ${esc(a.user)} added: its password is shown this once</p>` +
-    `<dl class="facts">${rows.map(([k, v, id]) => `<dt>${esc(k)}</dt><dd>${id ? `<code id="${id}">${esc(v)}</code> <button type="button" data-copy="${id}">Copy</button>` : esc(v)}</dd>`).join("")}</dl>` +
-    `<p class="tip">Paste it into the tool now: Mason keeps no copy of the password, and this page will not show it again. Lost, remove the user and add it again.</p>` +
-    `<button type="button" data-dismiss-added>I have copied it</button></div>`;
+export function renderSubnav(shown, range = DEFAULT_RANGE, keptDays = undefined, asOf = null) {
+  const p = PAGES.find((x) => x.id === shown);
+  if (!p?.parent) return "";
+  const r = rangeOf(range);
+  // a range past what the run keeps is shown disabled, saying why and what keeps it (the one chosen by its hash stays a link)
+  return `<div class="range" role="group" aria-label="Time range">${Object.entries(RANGES).map(([k, v]) => {
+    const o = rangeOffered(k, keptDays);
+    if (!o.shown && k !== r) return "";
+    if (!o.offered && k !== r) return `<span class="off" aria-disabled="true" title="${esc(o.why)}">${esc(v.label)}<span class="sr"> (${esc(o.why)})</span></span>`;
+    return `<a href="${esc(hashOf(shown, { range: k }))}"${k === r ? ` aria-current="true"` : ""}${v.live ? ` title="follows what happens: read every few seconds"` : ""}>${esc(v.label)}</a>`;
+  }).join("")}</div>` + (isLive(r) ? `<span class="live" title="read every few seconds"><span class="live-dot" aria-hidden="true"></span>Live</span>`
+    : `<span class="as-of">${asOf ? `<span class="dim" title="read once when chosen; Now follows what happens">as of ${esc(asOf.toISOString().slice(11, 19))} UTC</span> ` : ""}<button type="button" class="small" data-refresh-range>Refresh</button></span>`);
 }
 
-/**
- * WHY A REQUEST TO THE RUN FAILED, as a Failure: the server's own `failure` when it sent one; else what the status
- * means here — 403, a cookie this run does not take (the run started again, with a new token); no answer at all, the
- * run stopped. `status` null: fetch itself failed, `text` its error.
- */
-export function failureOf(status, text) {
-  if (status !== null) {
-    let body = null;
-    // the guard answers its refusals as plain text, not JSON: read as text below
-    try { body = JSON.parse(text); } catch { body = null; }
-    if (body && typeof body.failure === "object" && body.failure !== null) return body.failure;
-    if (status === 403 || status === 421) {
-      return { code: "refused", message: "this page's cookie is not the running Mason's", why: text.trim() || `HTTP ${status}`,
-        fix: "Mason was started again since this page was opened, and each run has its own token: mason ui, in the project's folder, opens this page again",
-        next: [{ command: "mason ui", what: "this page, for the Mason that is running" }] };
-    }
-    return { code: "failed", message: (body && typeof body.error === "string" ? body.error : text.trim()) || `HTTP ${status}`, next: [{ command: "mason logs", what: "the run's log: what it was doing" }] };
-  }
-  return { code: "unreachable", message: "Mason does not answer at this address", why: `the run stopped, or runs on another port now (${text})`,
-    fix: "mason start in the project's folder, then mason ui opens this page again: each run has its own address and token",
-    next: [{ command: "mason status", what: "whether Mason runs, and why it stopped" }, { command: "mason start", what: "start it" }, { command: "mason ui", what: "this page, for the Mason that is running" }] };
+/** The heading's line: the database the run copies, and its sources file's name when that is another. */
+function renderWhere(s) {
+  return `${esc(s.source.database)}${s.source.name && s.source.name !== s.source.database ? ` · source ${esc(s.source.name)}` : ""}`;
 }
 
-/** The last-updated line: when the page last heard from the run, in the reader's time. */
-export const updatedText = (at) => `Updated ${at.toLocaleTimeString("en-GB")}`;
-
-// ------------------------------------------------------------------ what the page knows and does
-
 /**
- * THE PAGE'S STATE AND ACTIONS, over `fetch` (the browser's, or a test's): `poll` reads the status and the users,
- * `addUser` / `askRemove` / `cancelRemove` / `confirmRemove` / `dismissAdded` are the users' buttons; `view()` is the
- * HTML of each part of the page, from what it knows now. Nothing here touches a document.
+ * THE PAGE'S STATE AND ACTIONS, over `fetch` (the browser's, or a test's): `show(id)` chooses the page shown, `poll`
+ * reads ITS reads that are due (no other page's), each page's actions are the app's own (addUser, addTable, …), and
+ * `view()` is the HTML of every part of the page, from what it knows now. Nothing here touches a document.
  */
-export function createApp(fetchFn, now = () => new Date()) {
-  const m = { state: null, requests: {}, users: null, usersFailure: null, pollFailure: null, actionFailure: null, added: null, confirming: null, updatedAt: null };
-  /** One request: its JSON, or a Failure (`failure`) when it was refused or nothing answered. */
-  const ask = async (path, init) => {
-    let res;
-    try { res = await fetchFn(path, { credentials: "same-origin", ...init }); }
-    catch (e) { return { failure: failureOf(null, e?.message ?? String(e)) }; }
-    const text = await res.text();
-    if (!res.ok) return { failure: failureOf(res.status, text) };
-    try { return { body: JSON.parse(text) }; }
-    catch (e) { return { failure: { code: "failed", message: `the run's answer to ${path} is not JSON: ${e.message}` } }; }
+export function createApp(fetchFn, now = () => new Date(), shown = "status") {
+  const ask = createAsk(fetchFn);
+  // what was read, by path: the last body, this read's failure (null when it answered), when it was asked
+  const store = new Map();
+  const first = parseHash(shown);
+  const m = { shown: first.id, range: rangeOf(first.params.range), pollFailure: null, updatedAt: null, rangeReadAt: null };
+  const put = (path, at, r) => {
+    const was = store.get(path);
+    store.set(path, { at, body: "body" in r ? r.body : was?.body, failure: "failure" in r ? r.failure : null, stale: false });
+    if ("body" in r) m.updatedAt = now();
   };
-  const readUsers = async () => {
-    const u = await ask("/api/users");
-    if ("failure" in u) { m.usersFailure = u.failure; return; }
-    m.users = u.body; m.usersFailure = null;
-    if (m.confirming !== null && !m.users.users.some((x) => x.name === m.confirming)) m.confirming = null;
+  const pages = new Map();
+  const afterRead = () => { for (const p of pages.values()) p.afterRead?.(); };
+  const refresh = async (paths) => {
+    const at = now().getTime();
+    const rs = await Promise.all(paths.map((p) => ask(p)));
+    paths.forEach((p, i) => put(p, at, rs[i]));
+    afterRead();
   };
-  const json = (method, body) => ({ method, headers: { "Content-Type": "application/json" }, ...(body === undefined ? {} : { body: JSON.stringify(body) }) });
-  return {
+  const ctx = { ask, now, refresh, range: () => m.range, read: (path) => { const e = store.get(path); return e === undefined ? undefined : { body: e.body, failure: e.failure }; } };
+  for (const p of PAGES) pages.set(p.id, p.create(ctx));
+  const app = {
     model: m,
-    async poll() {
-      const [st, slow, refused] = await Promise.all([ask("/api/state"), ask("/api/slow"), ask("/api/refused")]);
-      if ("failure" in st) { m.pollFailure = st.failure; return; }
-      m.state = st.body; m.pollFailure = null; m.updatedAt = now();
-      m.requests = { slow: "failure" in slow ? slow : slow.body, refused: "failure" in refused ? refused : refused.body };
-      await readUsers();
-    },
-    async addUser(name) {
-      m.actionFailure = null;
-      const r = await ask("/api/users", json("POST", { name }));
-      if ("failure" in r) { m.actionFailure = r.failure; return false; }
-      m.added = r.body;
-      await readUsers();
-      return true;
+    pages,
+    /** Show what a hash (or a page's id) says: the page, the range when it is a group's page, and its parameters
+     *  handed to the page (`route`); `env.doc` the document, for a control outside the parts. */
+    show(hash, env = {}) {
+      const r = parseHash(hash);
+      m.shown = r.id;
+      // what is shown is read again now, whatever its rate: a range that is not Now is read once, when it is chosen —
+      // and until it is, it says no "as of" (the last one was another page's, or another range's)
+      app.markStale();
+      m.rangeReadAt = null;
+      if (PAGES.find((p) => p.id === r.id)?.parent) m.range = rangeOf(r.params.range);
+      pages.get(r.id).route?.(r.params, env);
     },
-    askRemove(name) { m.confirming = name; m.actionFailure = null; },
-    cancelRemove() { m.confirming = null; },
-    async confirmRemove(name) {
-      m.actionFailure = null;
-      const r = await ask(`/api/users/${encodeURIComponent(name)}`, json("DELETE"));
-      m.confirming = null;
-      if ("failure" in r) { m.actionFailure = r.failure; return false; }
-      await readUsers();
-      return true;
+    /** Every read due at the next poll (a range chosen again, Refresh): what it has stays shown until it is answered. */
+    markStale() { for (const e of store.values()) e.stale = true; },
+    /** Read the shown page's reads that are due: those at the poll's rate every time, the slower ones once their time is up. */
+    async poll() {
+      const page = pages.get(m.shown);
+      // the sidebar's project, demo badge and version are the state's: a page that does not read it (Users) has it read
+      // once a minute beside its own, so a page opened at its own address never shows an empty sidebar
+      const pageReads = page.reads();
+      const reads = pageReads.some((r) => r.path === SHELL_STATE.path) ? pageReads : [...pageReads, SHELL_STATE];
+      const at = now().getTime();
+      const due = reads.filter((r) => r.everyMs <= POLL_MS || !store.has(r.path) || store.get(r.path).stale || at - store.get(r.path).at >= r.everyMs - POLL_MS / 2);
+      const rs = await Promise.all(due.map((r) => ask(r.path)));
+      due.forEach((r, i) => put(r.path, at, rs[i]));
+      // a range that is not Now says when it was read: its reads are the once-only ones
+      if (due.some((r) => r.everyMs === Infinity)) m.rangeReadAt = now();
+      const own = reads[0] === undefined ? undefined : store.get(reads[0].path);
+      m.pollFailure = own?.failure ?? null;
+      afterRead();
     },
-    dismissAdded() { m.added = null; },
     view() {
+      const st = store.get("/api/state")?.body;
       return {
-        where: m.state ? renderWhere(m.state) : "",
-        updated: m.updatedAt ? esc(updatedText(m.updatedAt)) : "",
+        nav: renderNav(m.shown, m.range),
+        // the range control in the shown view's header row (each group page's own slot; the others empty)
+        ...Object.fromEntries(PAGES.filter((p) => p.parent).map((p) => [`range-${p.id}`, p.id === m.shown ? renderSubnav(m.shown, m.range, st?.engine?.keptDays, m.rangeReadAt) : ""])),
+        where: st ? renderWhere(st) : "",
+        // the demo database is said beside its name, so a person never takes it for their own
+        badge: st?.source?.demo ? badge("demo", "accent") : "",
+        updated: m.updatedAt ? esc(updatedText(m.updatedAt, now())) : "",
+        // the run's version, as mason status's Mason line says it (engine.version)
+        version: typeof st?.engine?.version === "string" ? `Mason ${esc(st.engine.version)}` : "",
+        // the phone's menu button: both icons, the stylesheet shows the one its aria-expanded says
+        "menu-icon": icon("menu", "when-closed") + icon("x", "when-open"),
         poll: m.pollFailure ? renderFailure(m.pollFailure) : "",
-        status: m.state ? renderStatus(m.state, m.requests) : m.pollFailure ? "" : `<p class="dim">Asking Mason…</p>`,
-        users: m.usersFailure ? renderFailure(m.usersFailure) : m.users ? renderUsers(m.users, m.confirming) : "",
-        added: m.added ? renderAdded(m.added) : "",
-        action: m.actionFailure ? renderFailure(m.actionFailure) : "",
+        ...Object.assign({}, ...[...pages.values()].map((p) => p.view())),
       };
     },
   };
+  // each page's actions are the app's (a name used twice is a mistake: the later page's would hide the earlier's)
+  for (const [id, p] of pages) {
+    for (const [name, f] of Object.entries(p.actions ?? {})) {
+      if (name in app) throw new Error(`the ${id} page's action ${name} is already the app's`);
+      app[name] = f;
+    }
+  }
+  // the tables' and the users' state, where the tests have always read it
+  const of = (id, key) => ({ get: () => pages.get(id).model[key], enumerable: true });
+  Object.defineProperties(m, { confirming: of("users", "confirming"), added: of("users", "added"), removing: of("tables", "removing"), choosing: of("tables", "choosing") });
+  return app;
 }
 
 // ------------------------------------------------------------------ the browser
 
-/** How often the status is asked while the tab is seen. */
-export const POLL_MS = 2000;
-
-/** Wire the app to the page: each part written from `view()`, the buttons and the form, the poll while the tab is seen. */
+/** Wire the app to the page: each part written from `view()`, the shown section from the hash, the buttons, forms and
+ *  inputs to the shown page, and the poll while the tab is seen. */
 export function start(doc, win) {
-  const app = createApp((path, init) => win.fetch(path, init));
+  const app = createApp((path, init) => win.fetch(path, init), () => new Date(), "status");
+  app.show(win.location.hash, { doc });
   // what each part was last written, compared as written: the browser's innerHTML serialises attributes its own way
   // (data-x becomes data-x=""), and a part rewritten at every poll replaces the button under a click
   const written = new Map();
+  // a part is not rewritten while a pointer is pressed: a row whose age moves every poll would replace the button
+  // between its press and its release, and the click would be lost. At most PRESS_HOLD_MS: a press whose release the
+  // page never sees (released outside the window, a gesture the browser took over) froze every part for good
+  let pressedAt = null;
+  // the shown page's charts, drawn after each write (src/web/charts.js); a document that cannot hold one draws none
+  const charts = typeof doc.querySelectorAll === "function" && typeof win.getComputedStyle === "function" ? createCharts({ doc, win }) : null;
   const paint = () => {
+    if (pressedAt !== null && Date.now() - pressedAt < PRESS_HOLD_MS) return;
+    pressedAt = null;
+    for (const p of PAGES) { const section = doc.getElementById(`page-${p.id}`); if (section) section.hidden = p.id !== app.model.shown; }
     for (const [id, html] of Object.entries(app.view())) {
       const el = doc.getElementById(id);
-      if (el === null || written.get(id) === html) continue;
-      el.innerHTML = html;
+      const was = written.get(id);
+      if (el === null || was === html) continue;
       written.set(id, html);
+      // only the clock moved (an age, a running time: `<time data-tick>`): those texts set where they are, the part
+      // not replaced — a rewrite each second dropped what the reader had in it (a selection, the focus, a details' click)
+      if (was !== undefined && steady(was) === steady(html) && typeof el.querySelectorAll === "function") {
+        const texts = [...html.matchAll(TICK)].map((m) => m[2]);
+        const times = [...el.querySelectorAll("time[data-tick]")];
+        if (times.length === texts.length) { times.forEach((t, i) => { t.innerHTML = texts[i]; }); continue; }
+      }
+      el.innerHTML = html;
     }
+    if (charts !== null) void charts.mount(app.pages.get(app.model.shown).charts?.() ?? {});
+    place();
+  };
+  // THE POPOVERS (a confirm, a form, an answer: `pop` of shared.js) placed beside their buttons after every write, and
+  // again on a scroll or a resize; a question or a form that has just opened takes the focus (a form's first box, a
+  // question's Cancel: never the destructive button, which Enter would press), and
+  // Escape answers it with its own Cancel (`data-pop-close`)
+  let dialogs = new Set();
+  const place = () => {
+    const now = new Set();
+    for (const el of placePops(doc, win)) {
+      if (el.getAttribute?.("role") !== "dialog") continue;
+      const key = `${el.dataset.anchor}|${el.getAttribute("aria-label") ?? ""}`;
+      now.add(key);
+      if (!dialogs.has(key)) (el.querySelector?.("input") ?? el.querySelector?.("[data-pop-close]"))?.focus?.({ preventScroll: true });
+    }
+    dialogs = now;
   };
   let busy = false;
+  // a poll asked while one is in flight (a Refresh, a link followed) runs when it ends, never dropped: what it was
+  // asked for may be what the one in flight did not read
+  let again = false;
   const poll = async () => {
-    if (busy || doc.visibilityState !== "visible") return;
+    if (doc.visibilityState !== "visible") return;
+    if (busy) { again = true; return; }
     busy = true;
     try { await app.poll(); } finally { busy = false; paint(); }
+    if (again) { again = false; await poll(); }
+  };
+  const shownPage = () => app.pages.get(app.model.shown);
+  // what a page answered an event with: the page written at once (what the action set before it asked: Syncing…), and
+  // again when it is answered
+  const act = async (r) => { paint(); await r; paint(); };
+  // THE PHONE'S MENU: the sidebar's nav as a sheet, opened by its button (shown below 640 px only). Open, the focus is
+  // on its first link; Escape, a click outside it, the focus leaving it or a link followed close it, the focus back on
+  // the button (but when the focus left by itself, to where it went)
+  const sidebar = doc.getElementById("sidebar");
+  const menuButton = doc.getElementById("menu-button");
+  let menuOpen = false;
+  const setMenu = (open, focus) => {
+    menuOpen = open;
+    if (open) sidebar?.setAttribute?.("data-open", ""); else sidebar?.removeAttribute?.("data-open");
+    menuButton?.setAttribute?.("aria-expanded", String(open));
+    if (focus) (open ? doc.getElementById("nav")?.querySelector?.("a") : menuButton)?.focus?.();
   };
-  doc.getElementById("add-user").addEventListener("submit", async (e) => {
+  const inMenu = (t) => Boolean(t) && (sidebar?.contains?.(t) ?? false);
+  doc.addEventListener("keydown", (e) => {
+    if (e.key !== "Escape") return;
+    if (menuOpen) { e.preventDefault?.(); setMenu(false, true); return; }
+    const close = doc.querySelector?.(".pop.ask:not([hidden]) [data-pop-close]");
+    if (close) { e.preventDefault?.(); close.click(); }
+  });
+  doc.addEventListener("focusin", (e) => { if (menuOpen && !inMenu(e.target)) setMenu(false, false); });
+  doc.addEventListener("submit", async (e) => {
+    const r = shownPage().submit?.(e.target, win.FormData) ?? null;
+    if (r === null) return;
     e.preventDefault();
-    const input = e.target.elements.name;
-    if (await app.addUser(input.value.trim())) input.value = "";
-    paint();
+    await act(r);
   });
   doc.addEventListener("click", async (e) => {
     const b = e.target.closest?.("button");
-    if (!b) return;
-    if (b.dataset.remove !== undefined) app.askRemove(b.dataset.remove);
-    else if (b.dataset.cancelRemove !== undefined) app.cancelRemove();
-    else if (b.dataset.confirmRemove !== undefined) await app.confirmRemove(b.dataset.confirmRemove);
-    else if (b.dataset.dismissAdded !== undefined) app.dismissAdded();
-    else if (b.dataset.copy !== undefined) {
-      const text = doc.getElementById(b.dataset.copy)?.textContent ?? "";
-      try { await win.navigator.clipboard.writeText(text); b.textContent = "Copied"; }
-      catch (err) {
-        // the clipboard refused (a browser setting): the text is selected, for the reader's own copy
-        win.getSelection()?.selectAllChildren(doc.getElementById(b.dataset.copy));
-        b.textContent = `Select and copy it (${err?.message ?? err})`;
-      }
+    if (b?.dataset.menu !== undefined) { setMenu(!menuOpen, true); return; }
+    if (menuOpen && !inMenu(e.target)) { setMenu(false, true); return; }
+    // A DETAILS' SUMMARY: opened or closed by the click itself, never by the toggle event the browser fires after it —
+    // a repaint between the two (a pointerup's, a new row of a live log) replaced the element, and the event, fired on
+    // the old one, never reached this document: a request's + took several clicks to open. A link or a box inside a
+    // summary keeps its own click
+    const summary = b || e.target.closest?.("a, input, select, textarea, label") ? null : e.target.closest?.("summary");
+    const det = summary?.parentElement;
+    if (det?.tagName === "DETAILS") {
+      const r = shownPage().toggle?.({ id: det.id, dataset: det.dataset, open: !det.open, clicked: true }) ?? null;
+      if (r === null) return;   // a details the page keeps no state of: the browser opens it, as ever
+      e.preventDefault?.();
+      // what was written there is no proof of what is shown (the element may disagree with the page's state): written again
+      for (const id of [...written.keys()]) if (doc.getElementById(id)?.contains?.(det)) written.delete(id);
+      await act(r);
       return;
     }
-    paint();
+    if (!b) return;
+    // Refresh beside a range that is not Now: everything shown read again
+    if (b.dataset.refreshRange !== undefined) { app.markStale(); await poll(); return; }
+    const r = shownPage().click?.(b.dataset, b, { doc, win }) ?? null;
+    if (r === null) return;
+    await act(r);
+  });
+  doc.addEventListener("input", (e) => {
+    if ((shownPage().input?.(e.target) ?? null) !== null) paint();
   });
+  // a details opening does not bubble, so it is heard on the way down; the page reads what its opening needs at once
+  doc.addEventListener("toggle", async (e) => {
+    const r = shownPage().toggle?.(e.target) ?? null;
+    if (r === null) return;
+    await act(r);
+  }, true);
+  doc.addEventListener("pointerdown", () => { pressedAt = Date.now(); });
+  for (const type of ["pointerup", "pointercancel"]) doc.addEventListener(type, () => { pressedAt = null; win.setTimeout(paint, 0); });
+  win.addEventListener?.("hashchange", () => { if (menuOpen) setMenu(false, true); app.show(win.location.hash, { doc }); paint(); void poll(); });
+  win.addEventListener?.("scroll", place, { capture: true, passive: true });
+  win.addEventListener?.("resize", place);
+  if (charts !== null) {
+    win.addEventListener?.("resize", () => charts.resize());
+    win.matchMedia?.("(prefers-color-scheme: dark)").addEventListener?.("change", () => charts.retheme());
+  }
   doc.addEventListener("visibilitychange", () => { void poll(); });
   win.setInterval(() => { void poll(); }, POLL_MS);
+  paint();
   void poll();
 }