@mason-data/cli 0.9.0 → 0.11.0

package/dist/src/lib/cidr.js

@@ -0,0 +1,177 @@
+/**
+ * ADDRESSES AND ADDRESS RANGES, READ BY ONE GRAMMAR: `MASON_PG_PROXY_FROM` (src/api/postgres/proxy.ts) and a `mason
+ * user`'s address ranges (src/duck/users.ts `from`) both read an entry here. An entry is an IPv4 or IPv6 address, alone
+ * (one address: /32 or /128) or with its prefix length, held to its family (`10.0.0.0/33` and `999.999.999.999/99` are
+ * refused), with no bits set past the prefix (`10.0.1.5/24` is refused with its network as the guess), and no host name
+ * (never looked up) nor zone index. An address is first held to `node:net`'s own reading (`isIPv4`, `isIPv6`), then
+ * read into its bytes here, so nothing either reading refuses is ever taken.
+ *
+ * EVERY ADDRESS IN ONE SPACE, as Mason means one: IPv6's 128 bits, an IPv4 address at its v4-mapped place
+ * (::ffff:a.b.c.d), since a v4-mapped peer or header source IS that IPv4 client (`shownAddress`). What an entry names and
+ * what a list covers are both read here, never from how an entry is spelt: `0.0.0.0/1,128.0.0.0/1` is every IPv4
+ * address, as `0.0.0.0/0` is, and `::/64` holds every v4-mapped address, so every IPv4 one too.
+ */
+import * as net from "node:net";
+/** An address as Mason shows it: IPv4 dotted, IPv6 in RFC 5952's form, a v4-mapped IPv6 one as IPv4; null when it is no
+ *  address (undefined, a zone index, a name). */
+export function shownAddress(text) {
+    if (text === undefined)
+        return null;
+    const v4 = ipv4Bytes(text);
+    if (v4 !== null)
+        return Array.from(v4).join(".");
+    const v6 = ipv6Bytes(text);
+    return v6 === null ? null : ipv6Text(v6);
+}
+/** An IPv4 address's 4 bytes, from dotted decimal with no leading zero; null for anything else. */
+function ipv4Bytes(text) {
+    if (!net.isIPv4(text))
+        return null;
+    const parts = text.split(".");
+    if (parts.length !== 4 || !parts.every((p) => /^(?:0|[1-9]\d{0,2})$/.test(p) && Number(p) <= 255))
+        return null;
+    return Uint8Array.from(parts.map(Number));
+}
+/** An IPv6 address's 16 bytes (`::` once at most, an IPv4 tail); null for anything else, a zone index included. */
+export function ipv6Bytes(text) {
+    // node:net takes a zone index (fe80::1%eth0): an address with one names no place here
+    if (!/^[0-9A-Fa-f:.]+$/.test(text) || !net.isIPv6(text))
+        return null;
+    const halves = text.split("::");
+    if (halves.length > 2 || (halves.length === 2 && halves[0].includes(".")))
+        return null;
+    const groups = (s) => {
+        if (s === "")
+            return [];
+        const out = [];
+        const parts = s.split(":");
+        for (const [i, p] of parts.entries()) {
+            if (i === parts.length - 1 && p.includes(".")) {
+                const v4 = ipv4Bytes(p);
+                if (v4 === null)
+                    return null;
+                out.push((v4[0] << 8) | v4[1], (v4[2] << 8) | v4[3]);
+            }
+            else if (/^[0-9A-Fa-f]{1,4}$/.test(p))
+                out.push(parseInt(p, 16));
+            else
+                return null;
+        }
+        return out;
+    };
+    const head = groups(halves[0]), tail = halves.length === 2 ? groups(halves[1]) : [];
+    if (head === null || tail === null)
+        return null;
+    const n = head.length + tail.length;
+    if (halves.length === 1 ? n !== 8 : n > 7)
+        return null;
+    const all = [...head, ...new Array(8 - n).fill(0), ...tail];
+    return Uint8Array.from(all.flatMap((g) => [g >> 8, g & 0xff]));
+}
+/** whether 16 bytes are an IPv4 address mapped into IPv6 (::ffff:a.b.c.d) */
+const v4Mapped = (b) => b.subarray(0, 10).every((x) => x === 0) && b[10] === 0xff && b[11] === 0xff;
+/** 16 bytes as Mason shows an IPv6 address: RFC 5952 (lower case, the longest run of two or more zero groups as `::`,
+ *  the first of equal runs), and a v4-mapped one as its IPv4 address. */
+export function ipv6Text(b) {
+    if (v4Mapped(b))
+        return Array.from(b.subarray(12, 16)).join(".");
+    const g = Array.from({ length: 8 }, (_, i) => (b[2 * i] << 8) | b[2 * i + 1]);
+    let at = -1, run = 0;
+    for (let i = 0; i < 8;) {
+        if (g[i] !== 0) {
+            i++;
+            continue;
+        }
+        let j = i;
+        while (j < 8 && g[j] === 0)
+            j++;
+        if (j - i > run) {
+            at = i;
+            run = j - i;
+        }
+        i = j;
+    }
+    const hex = g.map((x) => x.toString(16));
+    return run < 2 ? hex.join(":") : `${hex.slice(0, at).join(":")}::${hex.slice(at + run).join(":")}`;
+}
+export const V4_START = 0xffffn << 32n;
+export const V4_END = V4_START + (1n << 32n) - 1n;
+export const ALL_END = (1n << 128n) - 1n;
+const bigOf = (b) => b.reduce((n, x) => (n << 8n) | BigInt(x), 0n);
+/** an address's place (`V4_START`), or null when it is no address */
+function placeOf(address) {
+    const v4 = ipv4Bytes(address);
+    if (v4 !== null)
+        return V4_START | bigOf(v4);
+    const v6 = ipv6Bytes(address);
+    return v6 === null ? null : bigOf(v6);
+}
+/** the places an entry names */
+export function rangeOf(c) {
+    const start = c.family === 4 ? V4_START | bigOf(c.bytes) : bigOf(c.bytes);
+    return { start, end: start + (1n << BigInt((c.family === 4 ? 32 : 128) - c.prefix)) - 1n };
+}
+/** Whether `address` (as `shownAddress` shows one, or in any spelling of the same address) is in one of `ranges`; never
+ *  for what is no address. */
+export function inRanges(ranges, address) {
+    const at = placeOf(address);
+    return at !== null && ranges.some((r) => r.start <= at && at <= r.end);
+}
+/** whether `ranges` together hold every place from `lo` to `hi` */
+export function covers(ranges, lo, hi) {
+    let next = lo;
+    for (const r of [...ranges].sort((a, b) => (a.start < b.start ? -1 : a.start > b.start ? 1 : 0))) {
+        if (r.start > next)
+            return false;
+        if (r.end >= next)
+            next = r.end + 1n;
+        if (next > hi)
+            return true;
+    }
+    return next > hi;
+}
+function prefixEqual(a, b, bits) {
+    for (let i = 0; i * 8 < bits; i++) {
+        const mask = bits - i * 8 >= 8 ? 0xff : (0xff << (8 - (bits - i * 8))) & 0xff;
+        if ((a[i] & mask) !== (b[i] & mask))
+            return false;
+    }
+    return true;
+}
+/** the network `bytes` / `prefix` names, its host bits cleared */
+function network(bytes, prefix) {
+    return bytes.map((x, i) => i * 8 >= prefix ? 0 : prefix - i * 8 >= 8 ? x : x & ((0xff << (8 - (prefix - i * 8))) & 0xff));
+}
+const text = (family, bytes) => family === 4 ? Array.from(bytes).join(".") : ipv6Text(bytes);
+/** An entry as Mason writes it back: the network in `shownAddress`'s form, its prefix only when it is not one address. */
+export const cidrText = (c) => `${text(c.family, c.bytes)}${c.prefix === (c.family === 4 ? 32 : 128) ? "" : `/${c.prefix}`}`;
+/**
+ * One entry read, or what is wrong with it, with a did-you-mean where one is a fair guess: a guess is offered only
+ * once it is read as an entry itself, so it is never one that would be refused in turn. `everyRefused`: a prefix of 0
+ * (every address of a family) is refused with these words (a PROXY header believed from anyone); else it is taken.
+ */
+export function cidrOf(entry, everyRefused = null) {
+    const quoted = JSON.stringify(entry);
+    const m = /^([^/]*)(?:\/(\d{1,3}))?$/.exec(entry);
+    const v4 = m === null ? null : ipv4Bytes(m[1]), v6 = m === null || v4 !== null ? null : ipv6Bytes(m[1]);
+    if (m === null || (v4 === null && v6 === null)) {
+        return { problem: `${quoted} is not an address or a CIDR (10.0.0.0/16, 2001:db8::/32, or one address such as 10.0.4.7; a host name is not looked up)` };
+    }
+    const family = v4 !== null ? 4 : 6, bytes = (v4 ?? v6), max = family === 4 ? 32 : 128;
+    const prefix = m[2] === undefined ? max : Number(m[2]);
+    if (prefix > max)
+        return { problem: `${quoted}: an IPv${family} prefix is at most /${max}` };
+    if (family === 6 && v4Mapped(bytes) && prefix >= 96) {
+        const p4 = prefix - 96, net4 = network(bytes.subarray(12, 16), p4);
+        const meant = `${text(4, net4)}${p4 === 32 ? "" : `/${p4}`}`, read = cidrOf(meant, everyRefused);
+        return { problem: "problem" in read
+                ? `${quoted} is IPv4 written as IPv6, which Mason reads as ${meant}, and ${read.problem}`
+                : `${quoted} is IPv4 written as IPv6, which Mason reads as IPv4: did you mean ${meant}?` };
+    }
+    if (prefix === 0 && everyRefused !== null)
+        return { problem: `${quoted} names every address, ${everyRefused}` };
+    const net = network(bytes, prefix);
+    if (!prefixEqual(net, bytes, max))
+        return { problem: `${quoted} has bits set past its prefix: did you mean ${text(family, net)}/${prefix}?` };
+    return { family, bytes: net, prefix };
+}

package/dist/src/lib/table-sync.js

@@ -5,7 +5,7 @@
  * in the same words at both entrances:
  *
  *   off               nothing after the first copy until `mason sync <table>`, which polls it once, now (the default)
- *   poll <interval>   the xmin poll every <interval>: <n>s, <n>m or <n>h, a whole number, at least 1s, at most 24h
+ *   poll <interval>   the xmin poll every <interval>: <n>s, <n>m, <n>h or <n>d, a whole number, at least 1s, at most 24h
  *   replication       the database's change log, through the project's ONE slot and publication (src/duck/stream.ts):
  *                     the publication carries the replicated tables only, and the polled ones are polled beside it
  *
@@ -34,11 +34,11 @@ export const BIG_TABLE_ROWS = 1_000_000;
 export const COSTLY_POLL_ROWS = 10_000_000;
 export const COSTLY_POLL_SECONDS = 60;
 const MODES = ["off", "poll", "replication"];
-const UNIT_SECONDS = { s: 1, m: 60, h: 3600 };
+const UNIT_SECONDS = { s: 1, m: 60, h: 3600, d: 86_400 };
 /** the units a person may write for one of ours, said back as the one to write */
 const UNIT_WORDS = {
     s: "s", sec: "s", secs: "s", second: "s", seconds: "s", m: "m", min: "m", mins: "m", minute: "m", minutes: "m",
-    h: "h", hr: "h", hrs: "h", hour: "h", hours: "h",
+    h: "h", hr: "h", hrs: "h", hour: "h", hours: "h", d: "d", day: "d", days: "d",
 };
 const EXAMPLES = "poll 5s, poll 5m or poll 1h";
 /** what a sync is, said where one is wrong */
@@ -52,23 +52,24 @@ export function intervalOf(seconds) {
     const s = Math.max(MIN_POLL_SECONDS, Math.round(seconds));
     return s % 3600 === 0 ? `${s / 3600}h` : s % 60 === 0 ? `${s / 60}m` : `${s}s`;
 }
-/** an interval (`<n>s|m|h`) read, or why it is not one, with the interval to write when there is one. ONE grammar with three
- *  entrances, each worded as it is written: a `sync:`'s `poll <interval>`, a generated table's `target_lag:`, and a
- *  command's wait (`parseDuration`) */
+/** an interval (`<n>s|m|h|d`) read, or why it is not one, with the interval to write when there is one. ONE grammar with
+ *  two entrances, each worded as it is written: a `sync:`'s `poll <interval>` and a generated table's `target_lag:`. Its
+ *  units are a command line's duration's too (`parseDuration`), which also takes a bare number of seconds: a file writes
+ *  the unit, one spelling of each interval. */
 function parseInterval(v, write = "poll ") {
     const m = /^(\d+(?:\.\d+)?)\s*([a-z]+)$/i.exec(v);
     const examples = write === "" ? "5s, 5m or 1h" : EXAMPLES;
-    const how = `an interval is <n>s, <n>m or <n>h, a whole number, at least ${MIN_POLL_SECONDS}s (${examples})`;
+    const how = `an interval is <n>s, <n>m, <n>h or <n>d, a whole number, at least ${MIN_POLL_SECONDS}s (${examples})`;
+    if (/^\d+$/.test(v))
+        return { problem: `${v} has no unit: write ${write}${Number(v)}s for seconds (or m, h, d)` };
     if (m === null)
         return { problem: `${JSON.stringify(v)} is not an interval: ${how}` };
     const n = Number(m[1]), word = m[2].toLowerCase();
     if (word === "ms")
         return { problem: `${v} is under the shortest interval, ${MIN_POLL_SECONDS}s${write === "" ? "" : " (a poll scans the table whole on your database)"}: write ${write}${MIN_POLL_SECONDS}s or longer` };
     const unit = UNIT_WORDS[word];
-    if (unit === undefined) {
-        const days = /^(d|day|days)$/.test(word) ? `: write ${write}${intervalOf(n * 86_400)}` : "";
-        return { problem: `${v}: ${word} is not a unit of an interval — ${days ? `days are hours${days}` : how}` };
-    }
+    if (unit === undefined)
+        return { problem: `${v}: ${word} is not a unit of an interval — ${how}` };
     const seconds = n * UNIT_SECONDS[unit];
     if (!Number.isInteger(n))
         return { problem: `${v}: an interval is a whole number — write ${write}${intervalOf(seconds)}` };
@@ -89,10 +90,41 @@ export function parseLag(v) {
         return { problem: `is ${v === null || v === undefined ? "nothing" : typeof v === "number" ? `the number ${String(v)}` : "not an interval"}: write how far behind the table may be, like 30s, 5m or 1h` };
     return parseInterval(v.trim(), "");
 }
-/** A command's own wait, as an interval (`mason deploy --timeout 10m`): the grammar and range a poll's and a `target_lag:`
- *  take, so a span of time is written one way at every entrance. */
-export function parseDuration(v) {
-    return parseInterval(v.trim(), "");
+/** How a duration on a command line is written: said where one is wrong, and `<duration>` in each usage. */
+export const DURATION_FORMS = "a number of seconds, or <n>s, <n>m, <n>h or <n>d (90, 30s, 10m, 1h, 7d)";
+/**
+ * A DURATION ON A COMMAND LINE, ONE GRAMMAR FOR EVERY FLAG THAT TAKES ONE (`--timeout` of mason wait, share, ui --ssh,
+ * deploy and replica create; mason usage's `--step`; the age `--since` / `--until` take, src/cli/request-filter.ts
+ * `timeOf`, which refuses a bare number as a time): a bare number is seconds, as wait, share and ui read it before; `<n>s|m|h|d`, and the words a sync's
+ * interval takes (`5 min`, `2 hours`, `7 days`), as a `sync:` interval and a `target_lag:` are written. A superset of
+ * every form each flag took before, so nothing that parsed stops parsing. The range is the flag's (`min`, `max` in
+ * seconds; over 0, unless `zero`: an age of now, `--since 0s`, and `--step 0s`, every sample, as each took it before);
+ * the caller names the flag.
+ */
+export function parseDuration(v, o = {}) {
+    const t = v.trim();
+    let seconds, every;
+    if (t !== "" && Number.isFinite(Number(t))) {
+        seconds = Number(t);
+        every = `${seconds}s`;
+    }
+    else {
+        const m = /^(\d+(?:\.\d+)?)\s*([a-z]+)$/i.exec(t);
+        const unit = m === null ? undefined : UNIT_WORDS[m[2].toLowerCase()];
+        if (m === null || unit === undefined)
+            return { problem: `${JSON.stringify(v)} is not a duration: write ${DURATION_FORMS}` };
+        seconds = Number(m[1]) * UNIT_SECONDS[unit];
+        every = `${Number(m[1])}${unit}`;
+    }
+    if (o.zero === true && seconds === 0 && !Object.is(seconds, -0))
+        return { every, seconds: 0 };
+    if (!(seconds > 0))
+        return { problem: `${JSON.stringify(v)} is not a duration over 0: write ${DURATION_FORMS}` };
+    if (o.min !== undefined && seconds < o.min)
+        return { problem: `${every} is under the shortest, ${intervalOf(o.min)}` };
+    if (o.max !== undefined && seconds > o.max)
+        return { problem: `${every} is over the longest, ${intervalOf(o.max)}` };
+    return { every, seconds };
 }
 /**
  * A `sync:` VALUE READ, or what is wrong with it in the words a person fixes it from (the key is the caller's to say):
@@ -186,9 +218,14 @@ function saidInTheFile(what) {
  * every one given on ONE report, one coherent way out (a publication goes with replication). Null when none is given.
  * Read from the raw command line, before the options are parsed, so a removed flag is answered as removed and never
  * as an unknown option.
+ *
+ * `--port` IS NOW `--ui-port` (issue 729: it is the web page's and the commands' port, as MASON_UI_PORT is on a server,
+ * and read as the Postgres API's): answered on the same report with the line to run — `start`, built from the flags
+ * mason start takes alone, so nothing else of the line is repeated. `sync`: a sources-file flag was given.
  */
 export function removedStartFlags(argv, top) {
-    let replication = false, poll = false, publication;
+    let replication = false, poll = false, publication, port = false;
+    const kept = [];
     for (let i = 0; i < argv.length; i++) {
         const a = argv[i];
         if (a === "--")
@@ -203,10 +240,21 @@ export function removedStartFlags(argv, top) {
             const v = argv[i + 1];
             publication = v !== undefined && !v.startsWith("-") ? v : null;
         }
+        else if (a === "--port" || a.startsWith("--port=")) {
+            const v = a === "--port" ? argv[i + 1] : a.slice("--port=".length);
+            if (a === "--port" && v !== undefined && !v.startsWith("-"))
+                i++;
+            port = true;
+            kept.push(`--ui-port ${v !== undefined && /^\d{1,5}$/.test(v) ? v : "<n>"}`);
+        }
+        else if (a === "--attach" || a === "--self-signed-tls" || a === "--json")
+            kept.push(a);
     }
     const given = [...(replication ? ["--replication"] : []), ...(poll ? ["--poll"] : []), ...(publication !== undefined ? ["--publication"] : [])];
+    const start = port ? ["mason start", ...kept].join(" ") : "mason start";
+    const portSaid = { message: "--port is now --ui-port", why: "it is the port of the web page and the mason commands (MASON_UI_PORT on a server), never the Postgres API's (MASON_PG_PORT)" };
     if (given.length === 0)
-        return null;
+        return port ? { ...portSaid, fix: start, start, sync: false } : null;
     const t = top();
     const named = given.length === 1 ? `${given[0]} is gone` : `${given.slice(0, -1).join(", ")} and ${given.at(-1)} are gone`;
     const pub = publication === undefined ? null : topEdit(t, "publication", [publication ?? "<name>"]);
@@ -230,8 +278,10 @@ export function removedStartFlags(argv, top) {
         fix = `${edit} (${edit.startsWith("keep ") ? "every table is polled already; a table's entry may say its own"
             : "any interval: poll 5s, poll 1h; or sync: off, the default, and mason sync <table> when you need it"})`;
     }
-    return { message: `${named}: the sources file says it now`, why: saidInTheFile({ sync: replication || poll, publication: publication !== undefined }),
-        fix: `${fix}, then mason start` };
+    const why = saidInTheFile({ sync: replication || poll, publication: publication !== undefined });
+    if (!port)
+        return { message: `${named}: the sources file says it now`, why, fix: `${fix}, then mason start`, start, sync: true };
+    return { message: `${named}: the sources file says it now; ${portSaid.message}`, why: `${why}; ${portSaid.why}`, fix: `${fix}, then ${start}`, start, sync: true };
 }
 /**
  * `MASON_CHANGES` SET IS REFUSED, never run on a default (CLAUDE.md: a removed setting refuses the start, naming the

package/dist/src/web/app.css

@@ -497,6 +497,11 @@ table.catalog tbody tr:hover > td.act { background: var(--hover); }
 tr.removed > * { color: var(--muted); }
 form.formcard { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); }
 form.formcard input { width: 18em; }
+/* the Users form's Role: its label and select wrap together on a phone, the select shrinking to the card (a long role's
+   name cut in the closed box, whole in the open list), so the page never scrolls sideways */
+#add-user .role-field { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-width: 0; vertical-align: middle; }
+#add-user .role-field label { flex: none; }
+#add-user .role-field select { flex: 0 1 auto; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
 /* ---------------------------------------------------------------- Connect: the URL, its psql line, Create a user */
 /* a box whose title sits on its top edge, as a fieldset's legend does (Connect, Getting started, a chart's name) */
 .connect { background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0 var(--space-6); }

package/dist/src/web/app.js

@@ -62,7 +62,7 @@ import { page as usagePage } from "./pages/usage.js";
 import { page as syncsPage } from "./pages/syncs.js";
 
 /** 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 };
+const SHELL_STATE = { path: "api/state", everyMs: 60_000 };
 
 /** 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. */
@@ -76,7 +76,7 @@ export const PRESS_HOLD_MS = 2000;
 export * from "./shared.js";
 export { copyingText, tableLine, keptAge, keptWords, sourceRows, renderStatus, renderShare, createShare } 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 { renderUsers, renderAdded, renderAddUser, attributesText } from "./pages/users.js";
 export { renderRequests } from "./pages/queries.js";
 export { renderRunning, renderSessions, renderClients, renderSlowest, queriesHref } from "./pages/usage.js";
 
@@ -182,7 +182,7 @@ export function createApp(fetchFn, now = () => new Date(), shown = "status") {
   // every answer passes here: on a server's page a failure the page words itself is the tunnel's (`overTunnel`)
   const ask = async (path, init) => {
     const r = await asked(path, init);
-    return "failure" in r && store.get("/api/state")?.body?.served === true ? { failure: overTunnel(r.failure) } : r;
+    return "failure" in r && store.get("api/state")?.body?.served === true ? { failure: overTunnel(r.failure) } : r;
   };
   const first = parseHash(shown);
   const m = { shown: first.id, range: rangeOf(first.params.range), pollFailure: null, updatedAt: null, rangeReadAt: null };
@@ -236,7 +236,7 @@ export function createApp(fetchFn, now = () => new Date(), shown = "status") {
       afterRead();
     },
     view() {
-      const st = store.get("/api/state")?.body;
+      const st = store.get("api/state")?.body;
       return {
         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)

package/dist/src/web/index.html

@@ -7,9 +7,9 @@
 <!-- no favicon request: an empty one, inline (img-src allows data:) -->
 <link rel="icon" href="data:,">
 <!-- every file Mason's own, from its allowlist (src/cli/run-server.ts PAGE_ROUTES): the fonts are app.css's, vendored -->
-<link rel="stylesheet" href="/app.css">
-<link rel="stylesheet" href="/vendor/uplot-1.6.32/uPlot.min.css">
-<script type="module" src="/app.js"></script>
+<link rel="stylesheet" href="app.css">
+<link rel="stylesheet" href="vendor/uplot-1.6.32/uPlot.min.css">
+<script type="module" src="app.js"></script>
 </head>
 <body>
 <!-- the shell (src/web/app.js): the sidebar — the project, the nav, when it was updated and the version — and the page
@@ -69,11 +69,8 @@
   </section>
   <section id="page-users" aria-labelledby="users-h" hidden>
     <div class="page-head"><h2 id="users-h">Users</h2><p class="desc">A user is the name and password psql, a BI tool or your app connects to Mason with; it does not expire. The same users as <code>mason user</code>.</p></div>
-    <form id="add-user" class="formcard" autocomplete="off">
-      <label for="user-name">Name</label>
-      <input id="user-name" name="name" required placeholder="metabase" spellcheck="false" autocapitalize="off">
-      <button type="submit" class="primary">Add a user</button>
-    </form>
+    <!-- the add form is the page's (src/web/pages/users.js renderAddUser): none on a read-only page -->
+    <div id="add-user-box"></div>
     <div id="action"></div>
     <div id="added"></div>
     <div id="users-connect"></div>

package/dist/src/web/pages/queries.js

@@ -14,7 +14,7 @@
 import { msText, agoText, bytesText, esc, firstLine, n, empty, renderFailure, rowsHtml, utcText, utcMsText, details, createOpenSet, status,
   clip, capped, TITLE_MAX, sortTh, sortedBy, nextSort, RANGES, DEFAULT_RANGE, clientText, renderConnect, copyClick, UNLISTED_STATEMENTS, statementCell, rangeEvery } from "../shared.js";
 
-const STATE = "/api/state";
+const STATE = "api/state";
 const NEWEST_EVERY_MS = 5000;
 /** The newest page while a search is set: a search reads every statement's text of the range (7 days of a busy log,
  *  ~0.6 s a read), so it is read every 30 s, not 5 — said under the log (SEARCH_NOTE). */
@@ -103,7 +103,7 @@ export function requestsPath(filters, before, range = DEFAULT_RANGE) {
   if (filters.slow) p.set("slow", "1");
   if (filters.search) p.set("search", filters.search);
   if (before) p.set("before", before);
-  return `/api/requests?${p.toString()}`;
+  return `api/requests?${p.toString()}`;
 }
 
 export const page = {
@@ -156,7 +156,7 @@ export const page = {
         const s = ctx.read(STATE)?.body;
         return {
           "request-log": (log?.failure ? renderFailure(log.failure) : "") + (log?.body ? renderRequests(log.body, { paged: m.before !== null, filtered: filtered(), isOpen: opened.has, now: ctx.now().getTime(), sort: m.sort,
-            span: m.filters.since ? "" : (RANGES[ctx.range()] ?? RANGES[DEFAULT_RANGE]).span, connect: renderConnect(s?.postgres, { first: true, table: s?.tables?.find((t) => t.added && t.copy?.phase === "done")?.table ?? null }) }) : "") +
+            span: m.filters.since ? "" : (RANGES[ctx.range()] ?? RANGES[DEFAULT_RANGE]).span, connect: renderConnect(s?.postgres, { first: true, table: s?.tables?.find((t) => t.added && t.copy?.phase === "done")?.table ?? null, readOnly: s?.pageReadOnly ?? null }) }) : "") +
             (log?.body && m.filters.search && m.before === null ? `<p class="dim refresh-note">${esc(SEARCH_NOTE)}</p>` : ""),
         };
       },

package/dist/src/web/pages/status.js

@@ -21,7 +21,7 @@ const LINKS = { tables: "#tables", failedTables: "#tables?show=failed", usage: "
   slow: "#observability/queries?slow=1&range=24h", failedQueries: "#observability/queries?status=refused-or-failed&range=24h", failedEvents: "#observability/syncs?failures=1&range=7d" };
 import { msText, bytesText, code, esc, fileSize, firstLine, n, percent, leftText, spanText, duration, entryName, streamRows, slotWarns, masonRow, sessionsRows, diskRows, restartsRows, utcText,
   utcMinute, oneLine, clientText, eventCells, unsupportedEntry, usagePath, POLL_MS, card, cards, details, createOpenSet, skeleton, renderConnect, copyClick,
-  badge, button, copyable, pop, renderFailure, json } from "../shared.js";
+  badge, button, copyable, pop, renderFailure, json, readOnlyLine } from "../shared.js";
 import { spark, seriesOf, drawable } from "../charts.js";
 
 /** How many recent errors of each kind are shown: mason status's (src/cli/commands.ts `RECENT_ERRORS`, held equal by the tests). */
@@ -289,6 +289,8 @@ export function renderFacts(s, now = Date.now()) {
   const d = s.disk;
   rows.push(...diskRows(d).map(([k, v]) => factRow(k, v, d.freeBytes === null || (d.projectedBytes !== null && d.projectedBytes > d.freeBytes))));
   rows.push(...sessionsRows(s.sessions).map(([k, v]) => factRow(k, v)));
+  // `pageSocket` (mason serve with MASON_UI_SOCKET): said without its path, as the page shows no absolute path
+  if (typeof s.pageSocket === "string") rows.push(factRow("Web page", "served on a Unix socket on the server too (MASON_UI_SOCKET)"));
   return `<table class="facts-table"><caption>Mason</caption><tbody>${rows.join("")}</tbody></table>`;
 }
 
@@ -398,10 +400,12 @@ export function renderChecklist(s, queries, users) {
   const answered = queries.queries.week.completed > 0;
   if (copied && user && answered) return "";
   const copying = added && !copied && copyingCount(s) > 0;
+  // a read-only page (MASON_UI_READ_ONLY=1) sends no one to add what it would refuse to add
+  const looks = (s.pageReadOnly ?? null) !== null;
   const steps = [
     ["Mason is running", true, ""],
-    ["A table synced", copied, copying ? `<span class="dim">syncing now</span>` : added ? "" : `<a class="btn small primary" href="${LINKS.tables}">Add a table</a>`],
-    ["A user created", user, `<a class="btn small${copied ? " primary" : ""}" href="#users">Create a user</a>`],
+    ["A table synced", copied, copying ? `<span class="dim">syncing now</span>` : added || looks ? "" : `<a class="btn small primary" href="${LINKS.tables}">Add a table</a>`],
+    ["A user created", user, looks ? "" : `<a class="btn small${copied ? " primary" : ""}" href="#users">Create a user</a>`],
     // the psql line is Connect's (rendered under the checklist once a table is added): its Copy copies it
     ["A first statement answered", answered, copied ? `${`<button type="button" class="small${user ? " primary" : ""}" data-copy="connect-psql">Copy the psql line</button>`} <span class="dim">then run a select on a synced table</span>` : ""],
   ];
@@ -423,8 +427,9 @@ export function renderStatus(s, o = {}) {
   // day's and week's statements, read as none), else after the facts, for the next tool
   const first = isFirstConnect(o.queries);
   const connect = added ? renderConnect(s.postgres, { first, served: s.served === true, table: s.tables.find((t) => t.added && t.copy?.phase === "done")?.table ?? null,
-    share: renderShare(s, o.share ?? NO_SHARE, now) }) : "";
-  return renderHealth(s) + renderChecklist(s, o.queries, o.users) + renderKpis(s, { ...o, now }) + (first ? connect : "") + renderProgress(s, o.open, o.shares, o.before) + renderFacts(s, now) + (first ? "" : connect) + renderStream(s, now) +
+    share: renderShare(s, o.share ?? NO_SHARE, now), readOnly: s.pageReadOnly ?? null }) : "";
+  // a read-only page (MASON_UI_READ_ONLY=1): why it offers no share, no user and no table to add, as Tables and Users say it
+  return readOnlyLine("Nothing is shared, added or created", s.pageReadOnly) + renderHealth(s) + renderChecklist(s, o.queries, o.users) + renderKpis(s, { ...o, now }) + (first ? connect : "") + renderProgress(s, o.open, o.shares, o.before) + renderFacts(s, now) + (first ? "" : connect) + renderStream(s, now) +
     (added ? renderQueries(o.queries) : "") + (added ? renderRecentErrors(o.events, o.requests, o.unsupported) : "");
 }
 
@@ -446,7 +451,8 @@ const endsLine = (endsAt, now) => endsAt === null || endsAt === undefined ? "It
  * offered, the answer that opened it — the password is in it alone — and the failure). Nothing under `mason serve`.
  */
 export function renderShare(s, m = NO_SHARE, now = Date.now()) {
-  if (s?.served === true) return "";
+  // a server's run has no share to open, and a read-only page (MASON_UI_READ_ONLY=1) opens nothing
+  if (s?.served === true || (s?.pageReadOnly ?? null) !== null) return "";
   const open = pageShareOf(s);
   const head = `<p class="connect-title share-title">Connect from anywhere</p>`;
   const ask = button("Connect from anywhere", { shareAsk: "" }, "", { disabled: m.phase === "asking" || m.phase === "opening" });
@@ -483,7 +489,7 @@ export const UNSUPPORTED_LIMIT = 100;
 
 /** What the page reads every 30 s beside the state: the request log's summary, the recent errors, and the last day's
  *  unsupported SQL. */
-const SLOWER = ["/api/queries", `/api/events?failed=1&limit=${RECENT_ERRORS}`, `/api/requests?failed=1&limit=${RECENT_ERRORS}`, `/api/unsupported?limit=${UNSUPPORTED_LIMIT}`, "/api/users"];
+const SLOWER = ["api/queries", `api/events?failed=1&limit=${RECENT_ERRORS}`, `api/requests?failed=1&limit=${RECENT_ERRORS}`, `api/unsupported?limit=${UNSUPPORTED_LIMIT}`, "api/users"];
 
 /** A read as `renderStatus` takes it: the body, or `{ failure }` when it could not be read; undefined before any read. */
 const asRequest = (r) => r === undefined ? undefined : r.failure ? { failure: r.failure } : r.body;
@@ -499,12 +505,12 @@ export const page = {
     const share = createShare(ctx);
     return {
       model: { open: opened.open, share: share.m },
-      reads: () => [{ path: "/api/state", everyMs: POLL_MS }, ...SLOWER.map((path) => ({ path, everyMs: 30_000 })), { path: HOURLY, everyMs: 60_000 }],
+      reads: () => [{ path: "api/state", everyMs: POLL_MS }, ...SLOWER.map((path) => ({ path, everyMs: 30_000 })), { path: HOURLY, everyMs: 60_000 }],
       actions: share.actions,
-      afterRead: () => share.afterRead(ctx.read("/api/state")?.body),
+      afterRead: () => share.afterRead(ctx.read("api/state")?.body),
       input: (target) => share.input(target),
       view() {
-        const st = ctx.read("/api/state");
+        const st = ctx.read("api/state");
         if (!st?.body) return { status: st?.failure ? "" : skeleton(4) };
         const [queries, events, requests, unsupported, users] = SLOWER.map((p) => asRequest(ctx.read(p)));
         return { status: renderStatus(st.body, { now: ctx.now().getTime(), queries, events, requests, unsupported, users, usage: ctx.read(HOURLY)?.body, open: opened.has, shares: monotone.of(st.body), before: monotone.before, share: share.m }) };
@@ -535,8 +541,8 @@ export function createShare(ctx) {
   const beat = async () => {
     if (beating === null) return;
     const user = beating.user;
-    const r = await ctx.ask(`/api/share/${encodeURIComponent(user)}/beat`, json("POST"));
-    if ("failure" in r && r.failure.code === "not_found" && beating?.user === user) { ended(user, r.failure.message.replace(/^.*?; it ended: /, "")); await ctx.refresh(["/api/state"]); }
+    const r = await ctx.ask(`api/share/${encodeURIComponent(user)}/beat`, json("POST"));
+    if ("failure" in r && r.failure.code === "not_found" && beating?.user === user) { ended(user, r.failure.message.replace(/^.*?; it ended: /, "")); await ctx.refresh(["api/state"]); }
   };
   const startBeats = (user, everyMs = BEAT_MS) => {
     if (beating?.user === user) return;
@@ -547,7 +553,7 @@ export function createShare(ctx) {
     /** Connect from anywhere: what a share would read, then the question */
     async shareAsk() {
       Object.assign(m, NO_SHARE, { phase: "asking" });
-      const r = await ctx.ask("/api/share/choices");
+      const r = await ctx.ask("api/share/choices");
       if (m.phase !== "asking") return;
       if ("failure" in r) { m.phase = "refused"; m.failure = r.failure; return; }
       m.choices = r.body.choices;
@@ -561,17 +567,17 @@ export function createShare(ctx) {
       if (m.phase !== "asking" || m.choices === null) return;
       const role = m.choices.length > 0 ? m.role : null;
       Object.assign(m, { phase: "opening", failure: null });
-      const r = await ctx.ask("/api/share", json("POST", { from: "page", confirmed: true, ...(role !== null ? { role } : {}) }));
+      const r = await ctx.ask("api/share", json("POST", { from: "page", confirmed: true, ...(role !== null ? { role } : {}) }));
       if ("failure" in r) { m.phase = "refused"; m.failure = r.failure; return; }
       Object.assign(m, { phase: "open", opened: { ...r.body, seen: false } });
       startBeats(r.body.user, r.body.beatMs);
-      await ctx.refresh(["/api/state"]);
+      await ctx.refresh(["api/state"]);
     },
     async shareStop(user) {
-      const r = await ctx.ask(`/api/share/${encodeURIComponent(user)}`, json("DELETE"));
+      const r = await ctx.ask(`api/share/${encodeURIComponent(user)}`, json("DELETE"));
       if ("failure" in r && r.failure.code !== "not_found") { m.phase = "refused"; m.failure = r.failure; return; }
       ended(user, "Stop sharing, on this page");
-      await ctx.refresh(["/api/state"]);
+      await ctx.refresh(["api/state"]);
     },
     shareBeat: beat,
   };

package/dist/src/web/pages/syncs.js

@@ -15,9 +15,9 @@ import { esc, agoText, utcText, badge, empty, panel, n, sortTh, nextSort, moreRo
 const EVENTS_LIMIT = 500;
 const EVENTS_SHOWN = 100;
 /** The events of a range: the newest EVENTS_LIMIT since its start. */
-const eventsPath = (range = DEFAULT_RANGE) => `/api/events?limit=${EVENTS_LIMIT}&since=${RANGES[rangeOf(range)].since}`;
-const LOGS = "/api/logs?lines=200";
-const STATE = "/api/state";
+const eventsPath = (range = DEFAULT_RANGE) => `api/events?limit=${EVENTS_LIMIT}&since=${RANGES[rangeOf(range)].since}`;
+const LOGS = "api/logs?lines=200";
+const STATE = "api/state";
 
 const th = (cols) => cols.map((c) => `<th scope="col">${esc(c)}</th>`).join("");