@mason-data/cli 0.9.0 → 0.11.0

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

@@ -10,18 +10,18 @@
  * `copySizes` every minute; a table's columns once, when its Columns… or Name its key… form opens
  * (`GET /api/tables/<table>/columns`, `columnsPath`).
  */
-import { msText, bytesText, button, card, cards, code, createOpenSet, moreRows, details, empty, entryName, esc, fileSize, firstLine, json, n, panel, renderFailure, rowsHtml, spanText, duration, status, streamRows, utcText, pop, fresh, actId, ROOMS, POLL_MS } from "../shared.js";
+import { msText, bytesText, button, card, cards, code, createOpenSet, moreRows, details, empty, entryName, esc, fileSize, firstLine, json, n, panel, renderFailure, rowsHtml, spanText, duration, status, streamRows, utcText, pop, fresh, actId, ROOMS, POLL_MS, readOnlyLine } from "../shared.js";
 import { copyBar, copyingCount, createMonotone, tableLine } from "./status.js";
 
 /** `/api/usage` asked for the copies' own sizes alone: the last minute's samples (none needed), and `copySizes`. */
-const SIZES_PATH = "/api/usage?since=1m";
+const SIZES_PATH = "api/usage?since=1m";
 
 /** Where one table's columns are read, when its form opens (src/cli/run-server.ts tableColumns): never with the state,
  *  which is polled every 2 s and would carry every table's (3.4 MB at 800 tables of 50 columns). */
 /** A table's sync events: Observability › Sync events narrowed to it (src/web/pages/syncs.js `route`), over the week (its
  *  copy and failures are rarely in the last 15 minutes, Now's). */
 export const syncsHref = (table) => `#observability/syncs?table=${encodeURIComponent(table)}&range=7d`;
-export const columnsPath = (table) => `/api/tables/${encodeURIComponent(table)}/columns`;
+export const columnsPath = (table) => `api/tables/${encodeURIComponent(table)}/columns`;
 
 /** A table's sync in one word (`/api/state` `tables[].sync.state`, src/cli/readiness.ts `syncStateOf`). */
 const SYNC_WORDS = { synced: "Synced", syncing: "Syncing", behind: "Behind", failed: "Failed", waiting: "Waiting" };
@@ -199,8 +199,10 @@ export function renderTables(s, ui = {}) {
   const { removing = null, choosing = null, columns = null, outcome = null, ticked = null, filter = "", show = "all", sizes, syncing = [], adding = [], shares = new Map(), before = new Map(), synced = null, open = () => false, limit = TABLE_ROWS } = ui;
   const now = ui.now ?? Date.now();
   if (!s.tables.length) return empty(`${s.source.database} has no table this user can read.`);
-  // why no table can be added or removed from here (a server's sources file this run cannot write), or null
-  const readOnly = s.sourcesReadOnly ?? null;
+  // why the page changes nothing (MASON_UI_READ_ONLY=1: not even a Sync), or null
+  const viewOnly = s.pageReadOnly ?? null;
+  // why no table can be added or removed from here (that, or a server's sources file this run cannot write), or null
+  const readOnly = viewOnly ?? s.sourcesReadOnly ?? null;
   const stream = s.stream ? new Map(streamRows(s.stream, now).tables) : null;
   // SEVEN NARROW COLUMNS OF FIXED WIDTHS, NOTHING LONG IN A CELL, AND NOTHING A CLICK INSERTS: a table's state is its word
   // over its copy's bar (a line kept for it when it has none); its last sync an age over how long it took; whatever is
@@ -227,7 +229,7 @@ export function renderTables(s, ui = {}) {
       // Sync now → Syncing… → Synced ✓ in the one room (ROOMS.sync), so the actions never move
       // View events: its sync events, on Observability › Sync events (a link: it goes to another page)
       ? `<a class="btn small" href="${esc(syncsHref(t.table))}">View events</a> ` +
-        (syncing.includes(t.table) ? button("Syncing…", {}, "small", { room: ROOMS.sync, disabled: true }) : button(syncedNow ? "Synced ✓" : "Sync now", { syncTable: t.table }, "small", { room: ROOMS.sync })) + " " +
+        (viewOnly ? "" : syncing.includes(t.table) ? button("Syncing…", {}, "small", { room: ROOMS.sync, disabled: true }) : button(syncedNow ? "Synced ✓" : "Sync now", { syncTable: t.table }, "small", { room: ROOMS.sync })) + " " +
         // while it asks, Remove stays where it was, held down: the question beside it answers it
         (readOnly ? "" : asking ? button("Remove", {}, "danger small", { disabled: true, expanded: true }) : button("Remove", { removeTable: t.table }, "danger small"))
       // a sources file this run cannot write (`s.sourcesReadOnly`, a server's): no control that could only fail
@@ -288,7 +290,8 @@ export function renderTables(s, ui = {}) {
   const matching = filter.trim() ? `<p class="count dim">${n(shown.length)} with “${esc(filter.trim())}” in the name</p>` : "";
   const sizesFailed = added && sizes && "failure" in sizes ? `<p class="count">The synced tables' own sizes: could not read them (${esc(firstLine(sizes.failure.message))}; ${code("mason usage")} has them)</p>` : "";
   const rowsHtml_ = written.map(line).join("");
-  return stray + (readOnly === null ? "" : `<p class="count">Tables are not added or removed from this page: ${esc(readOnly)}.</p>`) +
+  return stray + (viewOnly !== null ? readOnlyLine("Tables are not added, removed or synced", viewOnly)
+    : readOnly === null ? "" : `<p class="count">Tables are not added or removed from this page: ${esc(readOnly)}.</p>`) +
     (added ? "" : empty("No table added yet", readOnly === null ? `Add one from the list, as ${code("mason add <table>")} does.` : `The sources file names the tables to sync.`)) + matching +
     panel(`<table class="catalog"><thead><tr>${head.map(([h, c]) => `<th scope="col"${c ? ` class="${c}"` : ""}>${h}</th>`).join("")}</tr></thead>` +
       `<tbody>${rowsHtml_}</tbody></table>`) + pops.join("") + moreRows("tables", Math.min(limit, shown.length), shown.length, TABLE_ROWS) +
@@ -301,7 +304,7 @@ export const page = {
   title: "Tables",
   create(ctx) {
     const m = { removing: null, choosing: null, columns: null, outcome: null, ticked: null, held: null, heldFilter: null, heldShow: null, filter: "", show: "all", syncing: [], adding: [], synced: null, limit: TABLE_ROWS };
-    const state = () => ctx.read("/api/state")?.body ?? null;
+    const state = () => ctx.read("api/state")?.body ?? null;
     const monotone = createMonotone();
     // the details open (a copy's whole error), by key: a poll rewrites the part, and they stay open
     const opened = createOpenSet();
@@ -325,12 +328,12 @@ export const page = {
         // from the click: the row says Adding… (the page paints before the answer), then the state read again shows the copy
         m.adding = [...m.adding, table];
         if (m.choosing !== table) { m.outcome = null; m.synced = null; }
-        const r = await ctx.ask("/api/pick", json("POST", pickBody(table, columns, key)));
+        const r = await ctx.ask("api/pick", json("POST", pickBody(table, columns, key)));
         m.adding = m.adding.filter((x) => x !== table);
         // refused: said over the form, in its popover, written again with the boxes the person had ticked
         if ("failure" in r) { m.outcome = { table, failure: r.failure }; if (m.choosing === table) m.ticked = { columns, key }; return false; }
         m.outcome = { table, added: r.body, at: ctx.now().getTime() }; m.choosing = null; m.columns = null; hold();
-        await ctx.refresh(["/api/state"]);
+        await ctx.refresh(["api/state"]);
         return true;
       },
       /** Open a table's form: its columns read now, once (the state the page polls carries none). */
@@ -348,11 +351,11 @@ export const page = {
       cancelRemoveTable() { m.removing = null; hold(); },
       /** Remove a table (`mason remove`), once asked: the answer beside its actions, then the state read again. */
       async confirmRemoveTable(table) {
-        const r = await ctx.ask("/api/remove", json("POST", { tables: [table] }));
+        const r = await ctx.ask("api/remove", json("POST", { tables: [table] }));
         m.removing = null; hold();
         if ("failure" in r) { m.outcome = { table, failure: r.failure }; return false; }
         m.outcome = { table, removed: r.body, at: ctx.now().getTime() };
-        await ctx.refresh(["/api/state"]);
+        await ctx.refresh(["api/state"]);
         return true;
       },
       dismissOutcome() { m.outcome = null; },
@@ -360,10 +363,10 @@ export const page = {
       async syncTable(table) {
         m.syncing = [...m.syncing, table];
         m.outcome = null; m.synced = null;
-        const r = await ctx.ask("/api/sync", json("POST", { tables: [table] }));
+        const r = await ctx.ask("api/sync", json("POST", { tables: [table] }));
         m.syncing = m.syncing.filter((x) => x !== table);
         m.synced = "failure" in r ? { table, failure: r.failure } : { table, synced: r.body, at: ctx.now().getTime() };
-        await ctx.refresh(["/api/state"]);
+        await ctx.refresh(["api/state"]);
         return !("failure" in r);
       },
       dismissSynced() { m.synced = null; },
@@ -377,7 +380,7 @@ export const page = {
     };
     return {
       model: m,
-      reads: () => [{ path: "/api/state", everyMs: POLL_MS }, { path: SIZES_PATH, everyMs: 60_000 }],
+      reads: () => [{ path: "api/state", everyMs: POLL_MS }, { path: SIZES_PATH, everyMs: 60_000 }],
       afterRead() {
         const s = state();
         if (s === null) return;

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

@@ -14,7 +14,7 @@
  */
 import { esc, n, msText, bytesText, fileSize, duration, details, createOpenSet, cards, card, empty, panel, skeleton, sortTh, sortedBy, nextSort, readPart, usagePath, utcMinute,
   RANGES, DEFAULT_RANGE, rangeOf, isLive, rangeEvery, firstLine, spanText, agoText, utcText, clientText, clip, TITLE_MAX, unsupportedEntry, renderFailure, json, pop, fresh, actId,
-  statementCell, POLL_MS } from "../shared.js";
+  statementCell, POLL_MS, readOnlyLine } from "../shared.js";
 import { spark, seriesChart, seriesOf, drawable } from "../charts.js";
 
 const EVERY_MS = 60_000;
@@ -87,15 +87,15 @@ export function renderCharts(usage, range = DEFAULT_RANGE) {
   return `<div class="chart-grid">${blocks.join("")}</div>`;
 }
 
-const RUNNING = "/api/running";
-const STATE = "/api/state";
+const RUNNING = "api/running";
+const STATE = "api/state";
 /** Who is connected: the clients with the most sessions (or statements) shown, this many; the rest in one row. */
 const SESSIONS_TOP = 10;
 /** What a past range's statements were (GET /api/activity): read once when chosen, every 5 s while the range is Now. */
-export const activityPath = (range = DEFAULT_RANGE) => `/api/activity?since=${RANGES[rangeOf(range)].since}`;
+export const activityPath = (range = DEFAULT_RANGE) => `api/activity?since=${RANGES[rangeOf(range)].since}`;
 const ACTIVITY_EVERY_MS = 5000;
 /** The unsupported SQL of a range (`/api/unsupported`: its 10 entries the most refused first): it says what to rewrite. */
-const unsupportedPath = (range = DEFAULT_RANGE) => `/api/unsupported?since=${RANGES[rangeOf(range)].since}`;
+const unsupportedPath = (range = DEFAULT_RANGE) => `api/unsupported?since=${RANGES[rangeOf(range)].since}`;
 const UNSUPPORTED_EVERY_MS = 60_000;
 const plural = (count, word) => `${n(count)} ${word}${count === 1 ? "" : "s"}`;
 /** The key a running statement is asked about by: its session and its statement's number. */
@@ -166,8 +166,9 @@ export function statementCards(day, line = () => "", label = "last 24 hours", hr
  * popover beside its Cancel (`pop`: no row is inserted, so none below moves; its Cancel stays, held down); `outcome` is
  * what the last cancel answered (a Failure, or `{ cancelled, at }`), a popover beside the row it was for — or beside the
  * part when that statement has ended since — gone by itself after OUTCOME_MS at `now` (a refusal stays until dismissed).
+ * `readOnly`: `/api/state` `pageReadOnly` (MASON_UI_READ_ONLY=1) — no Cancel, and no column for it.
  */
-export function renderRunning(running, asking = null, outcome = null, now = Date.now()) {
+export function renderRunning(running, asking = null, outcome = null, now = Date.now(), readOnly = null) {
   const pops = [];
   const said = fresh(outcome, now) ? outcome : null;
   let shown = false;
@@ -182,11 +183,11 @@ export function renderRunning(running, asking = null, outcome = null, now = Date
     if (said !== null && said.key === key) { shown = true; pops.push(pop(anchor, outcomeHtml(said))); }
     return `<tr><td>${r.session}</td><td>${r.statement}</td><td><span class="clip" title="${esc(r.user)}">${esc(r.user)}</span></td><td><span class="clip" title="${esc(clientText(r.applicationName))}">${esc(clientText(r.applicationName))}</span></td>` +
       `<td class="num"><time data-tick datetime="${esc(r.startedAt)}" title="started ${esc(utcText(r.startedAt))} UTC">${esc(spanText(r.runningMs / 1000))}</time></td><td class="num">${esc(plural(r.rows, "row"))} sent</td>` +
-      `<td>${statementCell(r.query)}</td><td class="act" id="${esc(anchor)}">${asking === key ? `<button type="button" class="danger small" aria-expanded="true" disabled>Cancel</button>` : `<button type="button" class="danger small" data-ask-cancel="${esc(key)}">Cancel</button>`}</td></tr>`;
+      `<td>${statementCell(r.query)}</td>${readOnly !== null ? "" : `<td class="act" id="${esc(anchor)}">${asking === key ? `<button type="button" class="danger small" aria-expanded="true" disabled>Cancel</button>` : `<button type="button" class="danger small" data-ask-cancel="${esc(key)}">Cancel</button>`}</td>`}</tr>`;
   }).join("");
   const table = running.length
     ? `<div class="scroll"><table class="running"><thead><tr><th scope="col">Session</th><th scope="col" title="the statement's number in its session, as mason cancel --statement takes it">No.</th><th scope="col">User</th><th scope="col">Client</th>` +
-      `<th scope="col" class="num">Running for</th><th scope="col">Rows</th><th scope="col">Statement</th><th scope="col"></th></tr></thead><tbody>${rows}</tbody></table></div>`
+      `<th scope="col" class="num">Running for</th><th scope="col">Rows</th><th scope="col">Statement</th>${readOnly !== null ? "" : `<th scope="col"></th>`}</tr></thead><tbody>${rows}</tbody></table></div>`
     : empty("No statement is running now.");
   // the statement ended since: said beside the part, which is there whatever it lists
   if (said !== null && !shown) pops.push(pop("usage-running", outcomeHtml(said)));
@@ -338,7 +339,7 @@ export const page = {
       dismissCancelled() { m.outcome = null; },
       /** POST /api/cancel { session, statement }: the statement listed, never the one the session runs next (409). */
       async confirmCancelStatement(session, statement) {
-        const r = await ctx.ask("/api/cancel", json("POST", { session, statement }));
+        const r = await ctx.ask("api/cancel", json("POST", { session, statement }));
         m.asking = null;
         m.outcome = "failure" in r ? { key: keyOf(session, statement), failure: r.failure } : { key: keyOf(session, statement), cancelled: r.body.cancelled, at: ctx.now().getTime() };
         // who is connected says its running statements too: both read again, so neither says the cancelled one runs
@@ -377,16 +378,19 @@ export const page = {
         const a = ctx.read(activity());
         const running = live ? ctx.read(RUNNING)?.body : undefined;
         const sessions = live ? ctx.read(STATE)?.body?.sessions : undefined;
+        // a read-only page (MASON_UI_READ_ONLY=1) offers no Cancel
+        const readOnly = ctx.read(STATE)?.body?.pageReadOnly ?? null;
         const now = ctx.now().getTime();
         return {
-          "usage-kpis": renderUsageKpis({ activity: a === undefined ? undefined : a.body ?? { failure: a.failure }, usage: ctx.read(samples())?.body, sessions, running: running?.running, range }),
+          // a read-only page (MASON_UI_READ_ONLY=1): why no statement has a Cancel, as Tables and Users say it
+          "usage-kpis": readOnlyLine("Statements are not cancelled", readOnly) + renderUsageKpis({ activity: a === undefined ? undefined : a.body ?? { failure: a.failure }, usage: ctx.read(samples())?.body, sessions, running: running?.running, range }),
           "usage-charts": renderCharts(ctx.read(samples())?.body, range),
           "usage-connected-h": live ? "Connected now" : `Connected in ${esc(span)}`,
           "usage-connected": live ? renderSessions(sessions, SESSIONS_TOP, range) : part(activity(), (b) => renderClients(b.clients, { range, now, total: b.clientsTotal.clients }), false),
           "usage-running-h": live ? "Running now" : `Slowest in ${esc(span)}`,
-          "usage-running-lead": live ? `As <code>mason logs --running</code> lists them. Cancel stops one, as <code>mason cancel</code> does.`
+          "usage-running-lead": live ? `As <code>mason logs --running</code> lists them.${readOnly !== null ? "" : ` Cancel stops one, as <code>mason cancel</code> does.`}`
             : `The statements that took longest to complete, as the request log recorded them.`,
-          "usage-running": live ? (running ? renderRunning(running.running, m.asking, m.outcome, now) : "") : part(activity(), (b) => renderSlowest(b.slowest, { range, now }), false),
+          "usage-running": live ? (running ? renderRunning(running.running, m.asking, m.outcome, now, readOnly) : "") : part(activity(), (b) => renderSlowest(b.slowest, { range, now }), false),
           unsupported: part(unsupportedPath(range), (b) => renderUnsupported(b, span), true),
           "usage-hourly": part(samples(), (b) => renderUsage(b, opened.has, m.sort), true),
           "usage-sizes": part(samples(), (b) => renderCopySizes(b.copySizes), false),

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

@@ -3,15 +3,15 @@
  * POST /api/users/<name>/disable and /enable, DELETE /api/users/<name>. An added user's password lives in this page's memory until the person dismisses it, never in
  * storage, a URL or a log line.
  */
-import { actId, badge, button, code, copyable, copyClick, duration, empty, esc, json, panel, pop, renderFailure, ROOMS, serverHostNote, status, utcMinute } from "../shared.js";
+import { actId, badge, button, code, copyable, copyClick, duration, empty, esc, json, panel, pop, renderFailure, ROOMS, serverHostNote, status, utcMinute, readOnlyLine } from "../shared.js";
 
 /** The users as the page reads them: with each one's last use (`mason user list` asks the same), then every 30 s. */
-const USERS = "/api/users?lastUsed=1";
-const USERS_POST = "/api/users";
+const USERS = "api/users?lastUsed=1";
+const USERS_POST = "api/users";
 const USERS_EVERY_MS = 30_000;
 /** The run's state: where a tool connects (`postgres`, src/cli/pg-url.ts postgresFacts), the Connect panel's; and the
  *  roles file's state (`roles`, src/cli/run-server.ts rolesState), what each user's role is held to. */
-const STATE = "/api/state";
+const STATE = "api/state";
 
 /** A time as `mason user list` stamps it: `2026-10-27 09:10`, UTC. */
 const stamp = utcMinute;
@@ -50,17 +50,20 @@ export const attributesText = (a) => Object.entries(a).map(([k, v]) => `${k}=${t
  * user held to it is refused (57P03), said above the table as `mason user list`'s tip says it (src/cli/roles.ts
  * rolesProblemText, held equal by tests/web-page.test.ts) and in each user's role; beside the role, the user's
  * attributes (its row filters' values) and, where it lacks one its role's filters read, that its statements are refused.
+ * `readOnly`: `/api/state` `pageReadOnly` (MASON_UI_READ_ONLY=1) — no Disable, Enable or Remove, and the page says why.
  */
-export function renderUsers(list, confirming = null, now = Date.now(), refused = null, roles = null) {
+export function renderUsers(list, confirming = null, now = Date.now(), refused = null, roles = null, readOnly = null) {
   const users = [...list.users.filter((u) => u.removedAt == null), ...list.users.filter((u) => u.removedAt != null)];
-  if (!users.length) return empty("No users yet", `A user is the name and password psql, a BI tool or your app connects with. Add one above, as ${code("mason user add <name>")} does: its URL, password included, is shown once.`);
+  const why = readOnlyLine("Users are not added, disabled or removed", readOnly);
+  if (!users.length) return why + empty("No users yet", readOnly !== null ? `A user is the name and password psql, a BI tool or your app connects with, as ${code("mason user add <name>")} adds one.`
+    : `A user is the name and password psql, a BI tool or your app connects with. Add one above, as ${code("mason user add <name>")} does: its URL, password included, is shown once.`);
   const note = (what, text) => text ? `<p class="dim">${esc(what)}: ${esc(text)}.</p>` : "";
   const broken = roles && roles.problem != null ? roles : null;
   const brokenNote = broken ? `<p class="warn">${esc(`${broken.file ?? "mason/roles.yml"} cannot be read as it is now, so every statement of a user held to it is refused: ${broken.problem}`)}</p>` : "";
   // a Remove's or a Disable's question is a popover beside the user's actions (`pop`), never a row: no row below it moves
   const pops = [];
   const ask = askOf(confirming);
-  return brokenNote + panel(`<table class="users"><thead><tr><th scope="col">User</th><th scope="col" class="role">Role</th><th scope="col" class="status">Status</th><th scope="col" class="added">Added</th><th scope="col" class="num last">Last used</th><th scope="col" class="act"></th></tr></thead><tbody>${users.map((u) => {
+  return why + brokenNote + panel(`<table class="users"><thead><tr><th scope="col">User</th><th scope="col" class="role">Role</th><th scope="col" class="status">Status</th><th scope="col" class="added">Added</th><th scope="col" class="num last">Last used</th><th scope="col" class="act"></th></tr></thead><tbody>${users.map((u) => {
     const active = u.removedAt == null;
     const last = lastUsedText(u, list.lastUsedNote, list.requestLogDays, now);
     const lastCell = !active ? "" : u.lastUsedAt != null
@@ -85,7 +88,7 @@ export function renderUsers(list, confirming = null, now = Date.now(), refused =
       `${active && !disabled && !u.live ? ` <span class="warn">does not connect: the API key was rotated since it was added</span>` : ""}</td>` +
       `<td class="mono">${esc(stamp(u.addedAt))} UTC</td><td class="num">${lastCell}</td>` +
       // Queries: its statements of the last 24 hours on Observability › Queries (a removed user's too: its past)
-      `<td class="act" id="${esc(anchor)}"><a class="btn small" href="${esc(userQueriesHref(u.name))}" title="the statements ${esc(u.name)} sent in the last 24 hours">Queries</a>${!active ? "" : ` ${toggle(u, disabled, asking === "disable")} ${asking === "remove" ? button("Remove", {}, "danger small", { disabled: true, expanded: true })
+      `<td class="act" id="${esc(anchor)}"><a class="btn small" href="${esc(userQueriesHref(u.name))}" title="the statements ${esc(u.name)} sent in the last 24 hours">Queries</a>${!active || readOnly !== null ? "" : ` ${toggle(u, disabled, asking === "disable")} ${asking === "remove" ? button("Remove", {}, "danger small", { disabled: true, expanded: true })
         : button("Remove", { remove: u.name }, "danger small")}`}</td></tr>`;
   }).join("")}</tbody></table>`) + pops.join("") + note("Last used", list.lastUsedNote);
 }
@@ -107,6 +110,32 @@ export function renderUsersConnect(pg, served = false) {
     `<p class="tip">A user's name and password go in place of ${code("<user>")} and ${code("<password>")}. The password is shown once, when the user is added: lost, remove the user and add it again.</p></div>`;
 }
 
+/**
+ * THE ADD FORM, from `/api/state` (`state`: its body, undefined until it is read): Name and Add a user, as `mason user
+ * add <name>` — none while the state is unread, and none under `pageReadOnly` (MASON_UI_READ_ONLY=1), where it could
+ * only fail. Where the roles file names roles and reads as it is (`state.roles`, `mason status --json`'s), a Role
+ * choice too, as `--role`: the first option is what `mason user add <name>` gives with no `--role` — the file's
+ * `default:`, marked and sending no role, so the user follows the default as the CLI's does; or, with no default, no
+ * role — then each other role, sent as `role`. The server judges the role (src/cli/user.ts roleToAdd). Written the
+ * same while nothing changes, so a poll never rewrites it under a name being typed.
+ */
+export function renderAddUser(state) {
+  if (state === undefined || state === null || (state.pageReadOnly ?? null) !== null) return "";
+  return `<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">` +
+    roleChoice(state.roles) + `<button type="submit" class="primary">Add a user</button></form>`;
+}
+
+/** The add form's Role choice from `/api/state` `roles`: "" with no roles file, one naming none, or one that cannot be
+ *  read now (the roles it names are not known then) */
+function roleChoice(r) {
+  if (!r || r.file == null || r.problem != null || !Array.isArray(r.roles) || r.roles.length === 0) return "";
+  const dflt = r.default != null && r.roles.includes(r.default) ? r.default : null;
+  const first = dflt !== null ? `<option value="" selected>${esc(dflt)} (default)</option>` : `<option value="" selected>no role: its statements are refused</option>`;
+  return ` <span class="role-field"><label for="user-role">Role</label> <select id="user-role" name="role">${first}` +
+    `${r.roles.filter((n) => n !== dflt).map((n) => `<option value="${esc(n)}">${esc(n)}</option>`).join("")}</select></span> `;
+}
+
 /** A user's statements: Observability › Queries filtered to it, over the last 24 hours (Now's 15 minutes would mostly be empty). */
 export const userQueriesHref = (name) => `#observability/queries?${new URLSearchParams({ user: name, range: "24h" })}`;
 
@@ -141,9 +170,10 @@ export const page = {
     const m = { actionFailure: null, added: null, confirming: null, refused: null };
     const users = () => ctx.read(USERS)?.body ?? null;
     const actions = {
-      async addUser(name) {
+      /** `role`: the Role choice's, sent as mason user add --role; "" or none: no role, as with no --role */
+      async addUser(name, role = "") {
         m.actionFailure = null;
-        const r = await ctx.ask(USERS_POST, json("POST", { name }));
+        const r = await ctx.ask(USERS_POST, json("POST", { name, ...(role ? { role } : {}) }));
         if ("failure" in r) { m.actionFailure = r.failure; return false; }
         m.added = r.body;
         await ctx.refresh([USERS]);
@@ -157,7 +187,7 @@ export const page = {
       async toggleUser(name, verb) {
         m.actionFailure = null;
         m.refused = null;
-        const r = await ctx.ask(`/api/users/${encodeURIComponent(name)}/${verb}`, json("POST"));
+        const r = await ctx.ask(`api/users/${encodeURIComponent(name)}/${verb}`, json("POST"));
         m.confirming = null;
         if ("failure" in r) { m.refused = { name, failure: r.failure }; return false; }
         await ctx.refresh([USERS]);
@@ -167,7 +197,7 @@ export const page = {
       enableUser(name) { return actions.toggleUser(name, "enable"); },
       async confirmRemove(name) {
         m.actionFailure = null;
-        const r = await ctx.ask(`/api/users/${encodeURIComponent(name)}`, json("DELETE"));
+        const r = await ctx.ask(`api/users/${encodeURIComponent(name)}`, json("DELETE"));
         m.confirming = null;
         // refused: said beside the user's Remove, as its question was (nothing above the table moves it)
         if ("failure" in r) { m.refused = { name, failure: r.failure }; return false; }
@@ -192,7 +222,8 @@ export const page = {
         const u = users();
         return {
           // the roles file's state is the run's (/api/state roles): a file that cannot be read refuses every user held to it
-          users: u ? renderUsers(u, m.confirming, ctx.now().getTime(), m.refused, ctx.read(STATE)?.body?.roles ?? null) : "",
+          users: u ? renderUsers(u, m.confirming, ctx.now().getTime(), m.refused, ctx.read(STATE)?.body?.roles ?? null, ctx.read(STATE)?.body?.pageReadOnly ?? null) : "",
+          "add-user-box": renderAddUser(ctx.read(STATE)?.body),
           "users-connect": renderUsersConnect(ctx.read(STATE)?.body?.postgres, ctx.read(STATE)?.body?.served === true),
           added: m.added ? renderAdded(m.added) : "",
           action: m.actionFailure ? renderFailure(m.actionFailure) : "",
@@ -201,7 +232,7 @@ export const page = {
       submit(form) {
         if (form.id !== "add-user") return null;
         const input = form.elements.name;
-        return actions.addUser(input.value.trim()).then((ok) => { if (ok) input.value = ""; });
+        return actions.addUser(input.value.trim(), form.elements.role?.value ?? "").then((ok) => { if (ok) input.value = ""; });
       },
       click(d, button, { doc, win }) {
         if (d.remove !== undefined) return actions.askRemove(d.remove) ?? true;

package/dist/src/web/shared.js

@@ -65,7 +65,7 @@ export const rangeEvery = (range, everyMs) => isLive(range) ? everyMs : Infinity
 export const rangeOf = (text) => Object.hasOwn(RANGES, String(text ?? "")) ? String(text) : DEFAULT_RANGE;
 /** The usage samples of a range, its step a point (src/cli/run-server.ts `usage`): Usage's read, and the Overview's
  *  sparklines (the 24 hours', by name). */
-export const usagePath = (range = DEFAULT_RANGE) => { const r = RANGES[rangeOf(range)]; return `/api/usage?since=${r.since}&step=${r.stepSeconds}`; };
+export const usagePath = (range = DEFAULT_RANGE) => { const r = RANGES[rangeOf(range)]; return `api/usage?since=${r.since}&step=${r.stepSeconds}`; };
 
 /** How often the shown page is asked while the tab is seen (src/web/app.js polls; a page's every-poll reads use it). */
 export const POLL_MS = 2000;
@@ -481,9 +481,10 @@ export const USERS_HASH = "#users";
  * Postgres API's URL with `<user>:<password>` in the credentials' place — the line `mason start` and `mason status`
  * print — and its psql line, each with Copy, and Create a user (the Users page), whose name and password go in that
  * place. `first` (nothing has asked Mason anything yet) leads with what the URL is for. Nothing from a run that does
- * not say it.
+ * not say it. `readOnly`: `/api/state` `pageReadOnly` (MASON_UI_READ_ONLY=1) — no Create a user, whose page could only
+ * refuse it; the URL, psql and their Copy stay.
  */
-export function renderConnect(pg, { first = false, table = null, served = false, share = "" } = {}) {
+export function renderConnect(pg, { first = false, table = null, served = false, share = "", readOnly = null } = {}) {
   if (!pg || typeof pg.shown !== "string") return "";
   // a first statement to type that the request log lists (one that reads a copied table: UNLISTED_STATEMENTS)
   const tryIt = first && table ? `<dt>Then try</dt><dd>${copyable("connect-try", `select count(*) from ${entryName(table)};`)} <span class="dim">it shows on Queries</span></dd>` : "";
@@ -491,9 +492,14 @@ export function renderConnect(pg, { first = false, table = null, served = false,
     (first ? `<p class="lead">Mason answers SQL over the Postgres protocol, as a read replica of your database would: point psql, a BI tool or your app's analytics code at this URL.</p>` : "") +
     `<dl class="facts"><dt>URL</dt><dd>${copyable("connect-url", pg.shown)}</dd><dt>psql</dt><dd>${copyable("connect-psql", pg.psql)}</dd>${tryIt}</dl>` +
     (served ? `<p class="tip">${serverHostNote(pg)}</p>` : "") +
-    `<p class="tip"><a class="btn${first ? " primary" : ""}" href="${USERS_HASH}">Create a user</a> <span>Its name and password go in place of ${code("<user>:<password>")}: the Users page shows the whole URL once, as ${code("mason user add <name>")} prints it.</span></p>${share}</div>`;
+    (readOnly !== null ? `<p class="tip">A user's name and password go in place of ${code("<user>:<password>")}: ${code("mason user add <name>")} prints the whole URL once.</p>`
+      : `<p class="tip"><a class="btn${first ? " primary" : ""}" href="${USERS_HASH}">Create a user</a> <span>Its name and password go in place of ${code("<user>:<password>")}: the Users page shows the whole URL once, as ${code("mason user add <name>")} prints it.</span></p>`) + `${share}</div>`;
 }
 
+/** Why a page offers no control that changes anything (`/api/state` `pageReadOnly`), in its own words — `what` is what is
+ *  not done from it ("Tables are not added, removed or synced") — as the Tables and Users pages say it; "" when it may. */
+export const readOnlyLine = (what, why) => why == null ? "" : `<p class="count">${esc(what)} from this page: ${esc(why)}.</p>`;
+
 /** On a server's page the Postgres URL's host is the server's own view of itself: said beside it, as a tool elsewhere needs the server's address. */
 export const serverHostNote = (pg) => `This is the address on the server: from elsewhere a tool connects to the server's own address, in place of ${code(pg.host ?? "localhost")}.`;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mason-data/cli",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "mason start: point Mason at your Postgres and pick the tables to copy. Fast analytics for the database your app already has.",
   "keywords": ["mason", "analytics", "postgres", "duckdb", "cli"],
   "homepage": "https://github.com/embeddable-hq/mason-data#readme",
@@ -23,10 +23,10 @@
     "yaml": "^2.6.0"
   },
   "optionalDependencies": {
-    "@mason-data/extensions-darwin-arm64": "0.9.0",
-    "@mason-data/extensions-darwin-x64": "0.9.0",
-    "@mason-data/extensions-linux-arm64": "0.9.0",
-    "@mason-data/extensions-linux-x64": "0.9.0",
-    "@mason-data/extensions-win32-x64": "0.9.0"
+    "@mason-data/extensions-darwin-arm64": "0.11.0",
+    "@mason-data/extensions-darwin-x64": "0.11.0",
+    "@mason-data/extensions-linux-arm64": "0.11.0",
+    "@mason-data/extensions-linux-x64": "0.11.0",
+    "@mason-data/extensions-win32-x64": "0.11.0"
   }
 }