pgkiln 0.45.0 → 0.47.0

package/src/app.ts

@@ -49,6 +49,9 @@ import { accountRoutes } from './runtime/account.ts';
 import { taskRoutes } from './runtime/tasks.ts';
 import { dataReporterRoutes } from './runtime/data-reporter.ts';
 import { reporterBuilderRoutes } from './builder/reporter.ts';
+import { formDesignerRoutes } from './runtime/form-designer.ts';
+import { formDesignerBuilderRoutes } from './builder/form-designer.ts';
+import { builderErrorPages, builderServerError } from './builder/errors.ts';
 import { workflowRoutes } from './runtime/workflows.ts';
 import { pwaRoutes } from './runtime/pwa.ts';
 import { pushRoutes } from './runtime/push.ts';
@@ -138,10 +141,13 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   });
   // An id in the URL that isn't a number (or is too big) fails in PostgreSQL:
   // that's a page that doesn't exist, not a server error.
-  app.setErrorHandler((err: Error & { code?: string }, _req, reply) => {
+  app.setErrorHandler((err: Error & { code?: string }, req, reply) => {
     if (err.code === '22P02' || err.code === '22003') return reply.code(404).type('text/plain').send('Not found');
+    // (sprint 86) a browser on a builder page gets an HTML error page
+    if (builderServerError(req, reply, err)) return reply;
     return reply.send(err);
   });
+  builderErrorPages(app);
   await app.register(cookie);
   await app.register(formbody, { bodyLimit: 5 * 1024 * 1024 });
   // file upload items; oversized files are cut off and reported, not thrown
@@ -223,6 +229,8 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(codeEditorRoutes);
   await app.register(dataReporterRoutes);
   await app.register(reporterBuilderRoutes);
+  await app.register(formDesignerRoutes);
+  await app.register(formDesignerBuilderRoutes);
   await app.register(sampleDataRoutes);
   await app.register(assistantRoutes);
   await app.register(aiFilterRoutes);

package/src/builder/ai-builder.ts

@@ -15,7 +15,7 @@ import { WIZARD_KINDS, wizardTables } from './wizards.ts';
 // App Builder AI (migration 062), with the AI service an administrator
 // chooses for the builder (meta.builder_ai):
 // - SQL Workshop → AI: SQL from a question (shown, never run: the developer
-//   may run it in SQL Commands), and an explanation of a query or an error;
+//   may run it in the SQL Worksheet), and an explanation of a query or an error;
 // - SQL Workshop → AI → Describe tables: descriptions of tables and columns
 //   for the model (meta.ai_table_note, optionally also COMMENT ON), typed or
 //   drafted by AI from the names and types (never from the data) and
@@ -148,7 +148,7 @@ async function workshopPage(s: Session, reply: FastifyReply, out: { question?: s
     ${out.result ?? ''}
     <div class="columns">
       ${region('SQL from a question', html`
-        <p class="muted u-mt0">The answer is shown, never run: check it, then run it in SQL Commands if you want.</p>
+        <p class="muted u-mt0">The answer is shown, never run: check it, then run it in the SQL Worksheet if you want.</p>
         <form method="post" action="${BASE}/sql/ai/sql">${csrf(s)}
           <div class="form-grid">${select('schema', 'Schema', out.schema ?? list[0] ?? '', list)}</div>
           <div class="field"><label class="label" for="f_question">Question</label>
@@ -324,7 +324,7 @@ export async function aiBuilderRoutes(app: FastifyInstance) {
         <form method="post" action="${BASE}/sql">${csrf(s)}
           <div class="field"><label class="label" for="f_ai_sql">SQL (not run)</label>
             <textarea id="f_ai_sql" name="sql" class="code sql-editor" rows="10" spellcheck="false" data-code="plpgsql">${sql}</textarea></div>
-          <div class="buttons"><button class="btn">Run in SQL Commands</button></div>
+          <div class="buttons"><button class="btn">Run in the SQL Worksheet</button></div>
         </form>`);
     } catch (e) {
       result = errorBox(e);

package/src/builder/appwizard.ts

@@ -50,6 +50,9 @@ interface Relation {
   calendar: boolean;
   /** (sprint 73) a table with a foreign key to this one, for master-detail */
   detail: boolean;
+  /** (sprint 87) row level security is on, with this many policies */
+  rls: boolean;
+  policies: number;
 }
 
 /** The tables, partitioned tables, views and materialized views of a schema (not partitions). */
@@ -59,7 +62,8 @@ export async function schemaRelations(schema: string): Promise<Relation[]> {
       `select c.relname, meta.wizard_table_label(c.oid) as label, case when c.relkind in ('v', 'm') then 'view' else 'table' end as kind,
               meta.wizard_pk(c.oid) as pk, case when c.reltuples >= 0 then c.reltuples::bigint end as rows,
               meta.wizard_defaults('calendar', c.oid) ->> 'start' is not null as calendar,
-              meta.wizard_pk(c.oid) is not null and meta.wizard_defaults('master_detail', c.oid) ->> 'detail' is not null as detail
+              meta.wizard_pk(c.oid) is not null and meta.wizard_defaults('master_detail', c.oid) ->> 'detail' is not null as detail,
+              c.relrowsecurity as rls, (select count(*)::int from pg_policy p where p.polrelid = c.oid) as policies
          from pg_class c join pg_namespace n on n.oid = c.relnamespace
         where n.nspname = $1 and c.relkind in ('r', 'p', 'v', 'm') and not c.relispartition
         order by c.relkind in ('v', 'm'), c.relname`,
@@ -311,6 +315,16 @@ const SOURCES: [string, string, string, string][] = [
   ['gallery', 'grid', 'From the App Gallery', 'A starter application'],
 ];
 
+/**
+ * (sprint 87) A table's row level security, before the application is created: on with its number
+ * of policies, or on without any (the application's role then sees no rows unless it owns the table).
+ */
+const rlsBadge = (r: Relation) =>
+  !r.rls ? ''
+  : r.policies > 0
+    ? html` <span class="tag aw-rls" title="Row level security is on (${r.policies} ${r.policies === 1 ? 'policy' : 'policies'}): each user sees only the rows the policies allow">${icon('shield')} RLS · ${r.policies}</span>`
+    : html` <span class="tag tag-error aw-rls" title="Row level security is on without policies: the application's role sees no rows (unless it owns the table or bypasses row level security)">${icon('shield')} RLS, no policies</span>`;
+
 async function createPage(s: Session, reply: FastifyReply, schema: string, b: Body | null, message: Raw | '' = '') {
   const schemas = await appSchemas();
   const known = schemas.includes(schema);
@@ -334,8 +348,8 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
         'The application\'s parsing schema. Choose a schema to get a page per table and view; a new schema is named after the alias.')}</div>
       <div class="buttons"><button class="btn">${icon('search')} Show its tables</button></div></form>`)}
     <form method="post" action="${BASE}/apps" data-progress="Creating the application and its pages…">${csrf(s)}
-      <input type="hidden" name="schema" value="${known ? schema : ''}"><input type="hidden" name="features" value="1">
-      ${known ? html`<input type="hidden" name="tables" value="1">` : ''}
+      <input type="hidden" name="features" value="1">
+      <div id="aw-schema-fields"><input type="hidden" name="schema" value="${known ? schema : ''}">${known ? html`<input type="hidden" name="tables" value="1">` : ''}</div>
       ${region('Application', html`<div class="form-grid">
         <div class="field"><label class="label" for="f_name">Name</label>
           <input id="f_name" name="name" value="${v('name', suggested)}" required data-select-once></div>
@@ -354,14 +368,16 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
             ? relations.map((r, i) => html`<li><input type="hidden" name="t_${i}" value="${r.relname}">
                 <label class="aw-page-kind" for="f_k_${i}">${icon(r.kind === 'view' ? 'eye' : 'table')} ${r.label}</label>
                 <select id="f_k_${i}" name="k_${i}">${kindsFor(r).map((k) => html`<option value="${k}"${k === kindOf(r, i) ? raw(' selected') : ''}>${PAGE_KINDS[k]}</option>`)}</select>
-                <small class="muted"><code>${r.relname}</code> · ${r.kind === 'view' ? 'view' : rows(r)}${r.kind === 'table' && !r.pk ? ', no single-column key: no form' : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? ': a paged grid' : ''}</small></li>`)
+                <small class="muted"><code>${r.relname}</code> · ${r.kind === 'view' ? 'view' : rows(r)}${r.kind === 'table' && !r.pk ? ', no single-column key: no form' : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? ': a paged grid' : ''}</small>${rlsBadge(r)}</li>`)
             : html`<li class="muted">${schema} has no tables or views.</li>`
           : html`<li class="muted">Choose a schema under Data for a page per table, or add pages with the page wizards later.</li>`}
       </ul>
-      ${known ? check('chart', 'Dashboard: a chart per table with the number of rows per parent row (a foreign key) or per value of a column whose values repeat', b ? b.chart === 'true' : true) : ''}`)}
+      ${known ? check('chart', 'Dashboard: a chart per table with the number of rows per parent row (a foreign key) or per value of a column whose values repeat', b ? b.chart === 'true' : true) : ''}`, '', 'aw-pages')}
       ${region('Features', html`<div class="aw-features">${FEATURES.map(([k, label, help]) => check(`f_${k}`, label, features[k], help))}</div>`)}
       ${region('Settings', html`<div class="form-grid">
-        ${input('alias', 'Alias (URL)', v('alias', known ? await aliasFor(schema) : ''), { required: true, help: 'lowercase, e.g. inventory → /a/inventory' })}
+        <div class="field"><label class="label" for="f_alias">Alias (URL)</label>
+          <input id="f_alias" name="alias" value="${v('alias', known ? await aliasFor(schema) : '')}" required pattern="[a-z][a-z0-9_\-]*" maxlength="50" data-derive-from="f_name"${b && b.alias ? raw(' data-edited') : ''}>
+          <small class="help">lowercase, e.g. inventory → /a/inventory; follows the name until you change it</small></div>
         ${select('authentication', 'Authentication', v('authentication', 'app_users'), [['app_users', 'App users (login page)'], ['none', 'None (public)']])}
         ${input('admin_user', 'First user', v('admin_user', ''), { placeholder: 'e.g. your name', help: 'Gets the admin role. An existing account in Users is reused.' })}
         ${input('admin_password', 'Password', '', { type: 'password', auto: 'new-password', help: 'For a new account; at least 8 characters.' })}

package/src/builder/arrange.ts

@@ -17,6 +17,8 @@ import { BASE, developer, flash, type Req } from './ui.ts';
 export const LAYOUT_KINDS = ['region', 'item', 'button'] as const;
 export type LayoutKind = (typeof LAYOUT_KINDS)[number];
 const isKind = (k: unknown): k is LayoutKind => (LAYOUT_KINDS as readonly unknown[]).includes(k);
+/** (sprint 90) The components with a build option, which can be commented out. */
+const COMMENTABLE = new Set(['region', 'item', 'button', 'dynamic_action', 'validation', 'process', 'computation', 'branch']);
 
 const options = (kind: string, field: string) => COMPONENTS[kind].fields.find((f) => f.name === field)!.options!.filter(Boolean);
 export const REGION_TYPES = () => options('region', 'type');
@@ -38,22 +40,22 @@ export const BOTTOM_SLOTS = ['previous', 'close', 'delete', 'next'];
 
 /** Gallery names and icons. */
 export const REGION_LABELS: Record<string, [string, string]> = {
-  report: ['Interactive report', 'table'], grid: ['Interactive grid', 'grid'], form: ['Form', 'file'], chart: ['Chart', 'chart'],
-  cards: ['Cards', 'layers'], calendar: ['Calendar', 'calendar'], facets: ['Faceted search', 'filter'], smart_filters: ['Smart filters', 'search'], display_selector: ['Region display selector', 'menu'], tasks: ['Task list', 'inbox'],
-  workflows: ['Workflow console', 'activity'], map: ['Map', 'map'], tree: ['Tree', 'org'], static: ['Static content', 'region'], dynamic: ['Dynamic content', 'code'],
-  template_component: ['Template component', 'layers'], list: ['List', 'list'], data_reporter: ['Data Reporter', 'table'],
-  ai_assistant: ['AI assistant', 'bolt'], url: ['URL', 'link'], search: ['Search', 'search'],
+  report: ['Interactive Report', 'table'], grid: ['Interactive Grid', 'grid'], form: ['Form', 'file'], chart: ['Chart', 'chart'],
+  cards: ['Cards', 'layers'], calendar: ['Calendar', 'calendar'], facets: ['Faceted Search', 'filter'], smart_filters: ['Smart Filters', 'search'], display_selector: ['Region Display Selector', 'menu'], tasks: ['Task List', 'inbox'],
+  workflows: ['Workflow Console', 'activity'], map: ['Map', 'map'], tree: ['Tree', 'org'], static: ['Static Content', 'region'], dynamic: ['Dynamic Content', 'code'],
+  template_component: ['Template Component', 'layers'], list: ['List', 'list'], data_reporter: ['Data Reporter', 'table'], form_designer: ['Form Designer', 'file'],
+  ai_assistant: ['AI Assistant', 'bolt'], url: ['URL', 'link'], search: ['Search', 'search'], login: ['Login', 'lock'], plugin: ['Plug-in', 'layers'],
 };
 export const ITEM_LABELS: Record<string, [string, string]> = {
-  text: ['Text field', 'item'], textarea: ['Text area', 'item'], number: ['Number field', 'item'], date: ['Date picker', 'calendar'],
-  datetime: ['Date and time', 'clock'], select: ['Select list', 'list'], popup_lov: ['Popup LOV', 'search'], radio: ['Radio group', 'check'],
-  checkbox: ['Checkbox', 'check'], switch: ['Switch', 'check'], checkbox_group: ['Checkbox group', 'check'], multiselect: ['Multi select', 'list'],
-  email: ['E-mail', 'inbox'], tel: ['Phone number', 'item'], url: ['URL', 'item'], color: ['Color picker', 'item'], file: ['File upload', 'upload'],
-  location: ['Location', 'map'], richtext: ['Rich text editor', 'edit'], markdown: ['Markdown editor', 'code'], rating: ['Star rating', 'check'],
-  combobox: ['Combobox (tags)', 'list'], daterange: ['Date range', 'calendar'], qrcode: ['QR code', 'scan'], image: ['Display image', 'file'], address: ['Geocoded address', 'map'], hidden: ['Hidden', 'item'], display: ['Display only', 'file'], password: ['Password', 'key'],
+  text: ['Text Field', 'item'], textarea: ['Text Area', 'item'], number: ['Number Field', 'item'], date: ['Date Picker', 'calendar'],
+  datetime: ['Date and Time', 'clock'], select: ['Select List', 'list'], popup_lov: ['Popup LOV', 'search'], radio: ['Radio Group', 'check'],
+  checkbox: ['Checkbox', 'check'], switch: ['Switch', 'check'], checkbox_group: ['Checkbox Group', 'check'], multiselect: ['Multi Select', 'list'],
+  email: ['E-mail', 'inbox'], tel: ['Phone Number', 'item'], url: ['URL', 'item'], color: ['Color Picker', 'item'], file: ['File Upload', 'upload'],
+  location: ['Location', 'map'], richtext: ['Rich Text Editor', 'edit'], markdown: ['Markdown Editor', 'code'], rating: ['Star Rating', 'check'],
+  combobox: ['Combobox (Tags)', 'list'], daterange: ['Date Range', 'calendar'], qrcode: ['QR Code', 'scan'], image: ['Display Image', 'file'], address: ['Geocoded Address', 'map'], hidden: ['Hidden', 'item'], display: ['Display Only', 'file'], password: ['Password', 'key'],
 };
 export const BUTTON_LABELS: Record<string, [string, string]> = {
-  submit: ['Submit page', 'button'], redirect: ['Redirect to page', 'button'], da: ['Dynamic action', 'bolt'], document: ['Download document', 'download'],
+  submit: ['Submit Page', 'button'], redirect: ['Redirect to Page', 'button'], da: ['Dynamic Action', 'bolt'], document: ['Download Document', 'download'],
 };
 
 /** A working starting point per region type, so a new region renders straight away. */
@@ -351,6 +353,25 @@ export async function arrangeRoutes(app: FastifyInstance) {
   });
 
   // (sprint 77) the rendering tree's menu: Duplicate, Copy to other Page
+  // (sprint 90, PD-4; APEX: Comment Out) a component left out of the page by the build option COMMENTED_OUT (made with
+  // the status Exclude when first needed); Uncomment takes it off again. Not a layout change: the undo history stays.
+  route('comment', async (_s, pid, b) => {
+    const kind = b.kind ?? '';
+    const id = int(b.id);
+    if (!COMMENTABLE.has(kind) || id === null) throw new LayoutError(400, 'Unknown component.');
+    const on = b.on !== 'false';
+    const done = await owner.tx(async (c) => {
+      if (on)
+        await c.query(
+          `insert into meta.build_option (app_id, name, status, description)
+           select app_id, 'COMMENTED_OUT', 'exclude', 'Components commented out in the page designer' from meta.page where id = $1
+           on conflict (app_id, name) do nothing`, [pid]);
+      return (await c.query(`update ${COMPONENTS[kind].table} set build_option = $3 where id = $1 and page_id = $2 and ${on ? 'true' : `build_option = 'COMMENTED_OUT'`}`, [id, pid, on ? 'COMMENTED_OUT' : null])).rowCount;
+    });
+    if (!done) throw new LayoutError(404, 'Unknown component.');
+    return { sel: `${kind}-${id}`, message: `${COMPONENTS[kind].label} ${on ? 'commented out: it stays in the page designer and is left out of the page (build option COMMENTED_OUT)' : 'back on the page'}.` };
+  });
+
   route('duplicate', async (s, pid, b) => {
     const kind = b.kind;
     const id = int(b.id);

package/src/builder/code-editor.ts

@@ -39,7 +39,7 @@ const CHECKS: Record<string, SqlShape> = {
 const CHECK_SWITCH: Record<string, string> = {
   'dynamic_action.code': 'action:set_value=select,*=statements',
   'process.code': 'type:sql=statements,*=none',
-  'region.source': 'type:static=none,form=none,facets=none,smart_filters=none,display_selector=none,tasks=none,workflows=none,list=none,data_reporter=none,ai_assistant=none,*=select',
+  'region.source': 'type:static=none,form=none,facets=none,smart_filters=none,display_selector=none,tasks=none,workflows=none,list=none,data_reporter=none,form_designer=none,ai_assistant=none,*=select',
   'computation.expression': 'type:sql_query=select,*=none',
   'app_computation.expression': 'type:sql_query=select,*=none',
   'computation.condition_expr': 'condition_type:sql=boolean,exists=select,not_exists=select,*=none',

package/src/builder/components.ts

@@ -107,7 +107,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'title', common: true, label: 'Title', kind: 'text', group: 'Identification' },
       { name: 'static_id', label: 'Static ID', kind: 'text', group: 'Identification',
         help: 'Optional, unique on the page: lower case letters, digits, _ and -, starting with a letter. Names the region in exported files (so renaming it keeps them) and is data-static-id on the page, for CSS and JavaScript.' },
-      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
+      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'form_designer', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
       { name: 'source', common: true, label: 'Source', kind: 'code', wide: true, group: 'Source',
         help: 'report/grid: a SELECT (use :ITEM binds) · chart: label column + one numeric column per series · cards: title, subtitle, body, badge, icon · calendar: start_date, end_date, title · map: lat and lng (or location "lat,lng"), title, body, geojson · tree: id, parent_id, label, icon · template_component: any SELECT (its columns are #COLUMN# in the template), or empty for one instance · dynamic: a SELECT returning HTML (escape with meta.html_escape) · static: HTML with &ITEM. substitutions · url: the page to show, https://host/path?q=&P1_ITEM. (the host is written out; items are URL-encoded) or a path on this server (/a/other/1).' },
       { name: 'rest_source', label: 'REST data source', kind: 'rest_source', group: 'Source',

package/src/builder/designer.ts

@@ -1,9 +1,11 @@
-import type { FastifyInstance } from 'fastify';
+import type { FastifyInstance, FastifyReply } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { COMPONENTS } from './components.ts';
-import { back, BASE, bicon, csrf, developer, flash, input, select, send, shell, type Req } from './ui.ts';
+import { back, BASE, bicon, csrf, designerUrl, developer, flash, input, select, send, shell, type Req } from './ui.ts';
+import { wantsHtml } from './errors.ts';
+import type { Session } from '../session.ts';
 import { buildOptionChoices, componentForm, lookups, saveComponent } from './forms.ts';
 import { regionConfigHelp } from './region-help.ts';
 import { parseIncludes } from './static-files.ts';
@@ -47,16 +49,35 @@ export async function designerRoutes(app: FastifyInstance) {
     const appId = /^\d{1,9}$/.test(req.params.id) ? Number(req.params.id) : null;
     const no = /^\d{1,9}$/.test(req.query.page ?? '') ? Number(req.query.page) : -1;
     const p = appId === null ? null : await owner.one('select id from meta.page where app_id = $1 and page_no = $2', [appId, no]);
-    if (p) return reply.redirect(`${BASE}/pages/${p.id}`, 303);
+    if (p) return reply.redirect(designerUrl(appId!, no), 303);
     flash(s, `There is no page ${req.query.page ?? ''}.`, 'error');
     return back(reply, s, appId === null ? BASE : `${BASE}/apps/${appId}`);
   });
 
   // ---------------------------------------------------------------- page designer
+  // (sprint 86) its address is the application's id and the page's number; a browser that opens the
+  // internal id (an old bookmark, a redirect after saving) is sent there with the same query
+  app.get(`${BASE}/apps/:app/pages/:no`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const page = /^\d{1,9}$/.test(req.params.app) && /^\d{1,9}$/.test(req.params.no)
+      ? await owner.one<{ id: number }>('select id from meta.page where app_id = $1 and page_no = $2', [req.params.app, req.params.no])
+      : undefined;
+    if (!page) return reply.code(404).send('Not found');
+    return pageDesigner(req, reply, s, page.id);
+  });
   app.get(`${BASE}/pages/:pid`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
-    const p = await owner.one('select p.*, a.alias, a.name as app_name from meta.page p join meta.app a on a.id = p.app_id where p.id = $1', [req.params.pid]);
+    if (wantsHtml(req) && /^\d{1,9}$/.test(req.params.pid)) {
+      const p = await owner.one<{ app_id: number; page_no: number }>('select app_id, page_no from meta.page where id = $1', [req.params.pid]);
+      if (p) return reply.redirect(designerUrl(p.app_id, p.page_no, req.url.split('?')[1] ?? ''), 302);
+    }
+    return pageDesigner(req, reply, s, req.params.pid);
+  });
+
+  async function pageDesigner(req: Req, reply: FastifyReply, s: Session, pid: number | string) {
+    const p = await owner.one('select p.*, a.alias, a.name as app_name from meta.page p join meta.app a on a.id = p.app_id where p.id = $1', [pid]);
     if (!p) return reply.code(404).send('Not found');
     const rows: Record<string, any[]> = {};
     for (const kind of PAGE_KINDS) rows[kind] = (await owner.query(`select * from ${COMPONENTS[kind].table} where page_id = $1 order by seq, id`, [p.id])).rows;
@@ -73,7 +94,9 @@ export async function designerRoutes(app: FastifyInstance) {
     const sel = req.query.c ?? '';
     const newKind = PAGE_KINDS.includes(req.query.new ?? '') ? req.query.new : '';
     const [kind, cid] = sel.split('-');
-    const url = (q: string) => `${BASE}/pages/${p.id}${q ? `?${q}` : ''}`;
+    const url = (q: string) => designerUrl(p.app_id, p.page_no, q);
+    // the page's forms post to its internal id (a page number can change)
+    const post = `${BASE}/pages/${p.id}`;
     const isSel = (key: string) => sel === key || (key === 'page' && !sel && !newKind);
     const cur = (key: string) => (isSel(key) ? raw(' aria-current="true"') : '');
     const badges = (r: any) => html`${r.authz ? html`<span class="pd-tag" title="Authorization: ${r.authz}">${icon('shield')}<span class="sr-only">Authorization ${r.authz}</span></span>` : ''}${r.condition || r.readonly_condition || r.condition_type ? html`<span class="pd-tag" title="Has a condition">${icon('filter')}<span class="sr-only">Has a condition</span></span>` : ''}${r.build_option ? html`<span class="pd-tag" title="Build option: ${r.build_option}">${icon('settings')}<span class="sr-only">Build option ${r.build_option}</span></span>` : ''}`;
@@ -81,8 +104,10 @@ export async function designerRoutes(app: FastifyInstance) {
 
     // ------------------------------------------------------------ left: component tree
     // (sprint 77) data-kind and data-id: the node's context menu (Duplicate, Copy to other page, Delete…) and icon colour
+    // (sprint 90) a commented-out component: struck through in the tree, Uncomment in its menu
+    const commented = (r: any) => (r.build_option === 'COMMENTED_OUT' ? raw(' data-commented') : '');
     const leaf = (k: string, r: any, ic: Raw | '', label: string, note = '') =>
-      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}">${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
+      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
     const folder = (label: string, children: Raw[] | Raw, open = true) =>
       html`<li${open ? '' : raw(' data-collapsed')}><span class="pd-node pd-folder"><span class="pd-label">${label}</span></span><ul>${children}</ul></li>`;
     const none = (text: string) => html`<li class="pd-empty">${text}</li>`;
@@ -95,7 +120,7 @@ export async function designerRoutes(app: FastifyInstance) {
       const bySlot = ['region', ...TOP_SLOTS, ...BOTTOM_SLOTS].map((sl) => [sl, buttons.filter((b) => (b.slot ?? 'region') === sl)] as const).filter(([, list]) => list.length);
       const kids = [...(items.length ? [folder('Items', items.map(itemLeaf))] : []),
         ...bySlot.map(([sl, list]) => folder(sl === 'region' ? 'Buttons' : `Buttons: ${SLOT_LABELS[sl]}`, list.map(buttonLeaf)))];
-      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}">${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
+      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
     };
     // (sprint 77, APEX: the rendering tree by display position) the page template's positions, and others in use
     const treeSide = p.page_template === 'left_side_column' ? 'left' : p.page_template === 'right_side_column' ? 'right' : null;
@@ -129,7 +154,7 @@ export async function designerRoutes(app: FastifyInstance) {
           </ul></li>
       </ul>
       <dialog class="pd-dialog" id="pd-copy-dialog" aria-labelledby="pd-copy-title">
-        <form method="post" action="${url('')}/layout/copy">${csrf(s)}<input type="hidden" name="kind" value=""><input type="hidden" name="id" value="">
+        <form method="post" action="${post}/layout/copy">${csrf(s)}<input type="hidden" name="kind" value=""><input type="hidden" name="id" value="">
           <h2 id="pd-copy-title">Copy to other page</h2>
           <p class="muted" data-copy-what></p>
           <div class="field"><label class="label" for="pd-copy-page">Page</label>
@@ -226,7 +251,7 @@ export async function designerRoutes(app: FastifyInstance) {
         ${side === 'left' || extra('left') ? zone('left') : ''}${zone('body')}${side === 'right' || extra('right') ? zone('right') : ''}
       </div>${zone('footer')}`;
     const gallery = (k: 'region' | 'item' | 'button', types: string[], labels: Record<string, [string, string]>) =>
-      html`<ul class="pd-gallery-list" aria-label="${COMPONENTS[k].plural}">${types.map((t) => html`<li><a class="pd-gal" href="${url(`new=${k}&type=${t}`)}" draggable="true" data-new="${k}" data-type="${t}" title="Drag onto the layout, or open to create">${bicon(labels[t]?.[1] ?? k)}<span>${labels[t]?.[0] ?? t}</span></a></li>`)}</ul>`;
+      html`<ul class="pd-gallery-list" aria-label="${COMPONENTS[k].plural}">${types.map((t) => html`<li><a class="pd-gal" href="${url(`new=${k}&type=${t}`)}" draggable="true" data-new="${k}" data-type="${t}" title="${labels[t]?.[0] ?? t}: drag onto the layout, or open to create">${bicon(labels[t]?.[1] ?? k)}<span>${labels[t]?.[0] ?? t}</span></a></li>`)}</ul>`;
     const layout = html`
       <div class="pd-canvas-bar" role="toolbar" aria-label="Layout">
         <button type="button" class="tb-btn" data-zoom="-1" title="Zoom out" hidden>${bicon('zoom-out')}<span class="sr-only">Zoom out</span></button>
@@ -294,7 +319,7 @@ export async function designerRoutes(app: FastifyInstance) {
     let hasForm = true;
     const peTabs = (panels: Raw[]) => html`<div class="pd-tabs" data-tabs="pd-right" data-tabs-remember aria-label="Properties">${panels}</div>`;
     const moveForm = (k: string, id: number, fields: Raw, button: Raw, title: string) =>
-      html`<form method="post" action="${url('')}/layout/move" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="kind" value="${k}"><input type="hidden" name="id" value="${id}">${fields}<button class="tb-btn" title="${title}">${button}</button></form>`;
+      html`<form method="post" action="${post}/layout/move" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="kind" value="${k}"><input type="hidden" name="id" value="${id}">${fields}<button class="tb-btn" title="${title}">${button}</button></form>`;
     if (newKind) {
       const spec = COMPONENTS[newKind];
       const lastSeq = Math.max(0, ...rows[newKind].map((r) => r.seq));
@@ -325,9 +350,9 @@ export async function designerRoutes(app: FastifyInstance) {
             ${moveForm(kind, row.id, html`<input type="hidden" name="dir" value="up">`, html`${bicon('arrow-up')}<span class="sr-only">Move up</span>`, 'Move up (earlier in the sequence)')}
             ${moveForm(kind, row.id, html`<input type="hidden" name="dir" value="down">`, html`${bicon('arrow-down')}<span class="sr-only">Move down</span>`, 'Move down (later in the sequence)')}
             ${kind === 'region'
-              ? html`<form method="post" action="${url('')}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="-1"><button class="tb-btn" title="Narrower (one column less)"${row.columns <= 1 ? raw(' disabled') : ''}>${bicon('narrow')}<span class="sr-only">Narrower</span></button></form>
+              ? html`<form method="post" action="${post}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="-1"><button class="tb-btn" title="Narrower (one column less)"${row.columns <= 1 ? raw(' disabled') : ''}>${bicon('narrow')}<span class="sr-only">Narrower</span></button></form>
                 <span class="pe-span" title="Column span">${row.columns}/12</span>
-                <form method="post" action="${url('')}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="1"><button class="tb-btn" title="Wider (one column more)"${row.columns >= 12 ? raw(' disabled') : ''}>${bicon('wide')}<span class="sr-only">Wider</span></button></form>`
+                <form method="post" action="${post}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="1"><button class="tb-btn" title="Wider (one column more)"${row.columns >= 12 ? raw(' disabled') : ''}>${bicon('wide')}<span class="sr-only">Wider</span></button></form>`
               : moveForm(kind, row.id, html`<label class="sr-only" for="pe-move-region">Move to region</label><select id="pe-move-region" name="region">${regionOptions}</select>`, html`<span>Move</span>`, 'Move to the end of this region')}
           </div>`;
         }
@@ -395,7 +420,7 @@ export async function designerRoutes(app: FastifyInstance) {
     const next = pages[idx + 1];
     const h = undoState(s, p.id);
     const tbForm = (op: string, ic: string, label: string, title: string | null) =>
-      html`<form method="post" action="${url('')}/layout/${op}" class="tb-form">${csrf(s)}<button class="tb-btn" title="${title ? `${label}: ${title}` : `Nothing to ${label.toLowerCase()}`}"${title ? '' : raw(' disabled')}>${bicon(ic)}<span class="sr-only">${label}</span></button></form>`;
+      html`<form method="post" action="${post}/layout/${op}" class="tb-form">${csrf(s)}<button class="tb-btn" title="${title ? `${label}: ${title}` : `Nothing to ${label.toLowerCase()}`}"${title ? '' : raw(' disabled')}>${bicon(ic)}<span class="sr-only">${label}</span></button></form>`;
     const createMenu = html`<details class="menu tb-menu">
         <summary class="tb-btn" title="Create">${icon('plus')}${bicon('down', 'icon tb-caret')}<span class="sr-only">Create</span></summary>
         <div class="menu-panel align-right"><div class="menu-section menu-links">
@@ -415,7 +440,7 @@ export async function designerRoutes(app: FastifyInstance) {
         </div></div></details>`;
     const toolbar = html`
       <div class="tb-group pd-pagenav" role="group" aria-label="Page">
-        ${prev ? html`<a class="tb-btn" href="${BASE}/pages/${prev.id}" title="Previous page: ${prev.page_no}. ${prev.name}">${bicon('left')}<span class="sr-only">Previous page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('left')}</span>`}
+        ${prev ? html`<a class="tb-btn" href="${designerUrl(p.app_id, prev.page_no)}" title="Previous page: ${prev.page_no}. ${prev.name}">${bicon('left')}<span class="sr-only">Previous page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('left')}</span>`}
         <form method="get" action="${BASE}/apps/${p.app_id}/goto" class="tb-form pd-goto-no">
           <label class="sr-only" for="pd-goto-no">Page number (Enter goes there)</label>
           <input id="pd-goto-no" name="page" type="number" min="0" max="999999999" step="1" value="${p.page_no}" inputmode="numeric" title="Page number: type or step to a number, then Enter">
@@ -425,7 +450,7 @@ export async function designerRoutes(app: FastifyInstance) {
           <select id="pd-goto" name="page" data-autosubmit>${pages.map((x) => html`<option value="${x.page_no}"${x.id === p.id ? raw(' selected') : ''}>${x.page_no} · ${x.name}</option>`)}</select>
           <button class="tb-btn tb-text pd-goto-go">Go</button>
         </form>
-        ${next ? html`<a class="tb-btn" href="${BASE}/pages/${next.id}" title="Next page: ${next.page_no}. ${next.name}">${bicon('right')}<span class="sr-only">Next page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('right')}</span>`}
+        ${next ? html`<a class="tb-btn" href="${designerUrl(p.app_id, next.page_no)}" title="Next page: ${next.page_no}. ${next.name}">${bicon('right')}<span class="sr-only">Next page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('right')}</span>`}
       </div>
       <div class="tb-group tb-undo" role="group" aria-label="History">${tbForm('undo', 'undo', 'Undo', h.undo)}${tbForm('redo', 'redo', 'Redo', h.redo)}</div>
       <div class="tb-group tb-menus">${createMenu}${utilMenu}</div>
@@ -442,7 +467,7 @@ export async function designerRoutes(app: FastifyInstance) {
         <section class="pd-pane pd-right tab-panel" id="pd-p-props" data-tab${pane === 'pd-p-props' ? raw(' data-tab-active') : ''}><h2 class="tab-title pd-pane-title"><span>Properties</span></h2>${right}</section>
       </div>`;
     return send(reply, s, shell(s, `Page ${p.page_no}`, [['App Builder', BASE], [p.app_name, `${BASE}/apps/${p.app_id}`], [`Page ${p.page_no}: ${p.name}`]], main, 'apps', { toolbar, full: true }));
-  });
+  }
 
   // (sprint 59) Quick edit from the developer toolbar: an item or button of the page by its name
   app.get(`${BASE}/pages/:pid/quick`, async (req: Req, reply) => {
@@ -452,7 +477,9 @@ export async function designerRoutes(app: FastifyInstance) {
     const q = req.query ?? {};
     const [kind, table, name] = q.item ? ['item', 'meta.item', String(q.item).toUpperCase()] : q.button ? ['button', 'meta.button', String(q.button).toUpperCase()] : [null, null, null];
     const row = kind ? await owner.one(`select id from ${table} where page_id = $1 and name = $2 order by id limit 1`, [req.params.pid, name]) : null;
-    return reply.redirect(`${BASE}/pages/${req.params.pid}${row ? `?c=${kind}-${row.id}` : ''}`);
+    const page = await owner.one<{ app_id: number; page_no: number }>('select app_id, page_no from meta.page where id = $1', [req.params.pid]);
+    if (!page) return reply.code(404).send('Not found');
+    return reply.redirect(designerUrl(page.app_id, page.page_no, row ? `c=${kind}-${row.id}` : ''));
   });
 
   app.post(`${BASE}/pages/:pid`, async (req: Req, reply) => {

package/src/builder/errors.ts

@@ -0,0 +1,65 @@
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
+import { html } from '../html.ts';
+import { documentShell } from '../layout.ts';
+import { BASE, THEME_COOKIE, validTheme } from './ui.ts';
+
+// (sprint 86) The builder's error pages: a browser that opens an address under /builder that
+// doesn't exist (or an application or page that doesn't, or not for this developer), or that
+// meets a server error, gets an HTML page in the builder's theme with a way back, instead of
+// JSON or plain text. Requests from scripts (fetch, the layout canvas) keep their plain answers.
+
+/** A browser's navigation (it asks for HTML), not a script's request. */
+export const wantsHtml = (req: FastifyRequest) =>
+  (req.method === 'GET' || req.method === 'HEAD') && /\btext\/html\b/.test(String(req.headers.accept ?? '')) && req.headers['x-requested-with'] === undefined;
+
+const isBuilder = (url: string) => url === BASE || url.startsWith(`${BASE}/`) || url.startsWith(`${BASE}?`);
+
+const TEXTS: Record<number, { title: string; text: string }> = {
+  404: { title: 'Page not found', text: 'There is nothing at this address in the App Builder. The application or page may have been deleted, or belongs to a workspace you are not a member of.' },
+  500: { title: 'Something went wrong', text: 'The App Builder could not show this page because of an error on the server. It has been logged; try again, or go back.' },
+};
+
+/** The error page for a status (404, or 500 for any server error). */
+export function builderErrorPage(req: FastifyRequest, status: number) {
+  const { title, text } = TEXTS[status >= 500 ? 500 : 404];
+  const theme = validTheme((req.cookies as Record<string, string> | undefined)?.[THEME_COOKIE]) ?? 'auto';
+  return documentShell(
+    `${title} · App Builder`,
+    html`<main class="t-error" id="main"><div class="card"><h1>${title}</h1><p>${text}</p>
+      <p class="muted">${status >= 500 ? 'Error' : 'Not found'}: <code>${req.url.split('?')[0].slice(0, 200)}</code></p>
+      <p><a class="btn btn-hot" href="${BASE}">App Builder home</a></p></div></main>`,
+    'login-body',
+    {},
+    '',
+    { theme },
+  );
+}
+
+const sendPage = (req: FastifyRequest, reply: FastifyReply, status: number) =>
+  reply.code(status).type('text/html; charset=utf-8').header('cache-control', 'no-store').send(builderErrorPage(req, status));
+
+/**
+ * The hooks (registered on the root instance): unknown builder addresses, the builder's own
+ * "Not found" answers and server errors become HTML pages for browsers.
+ */
+export function builderErrorPages(app: FastifyInstance) {
+  app.setNotFoundHandler((req, reply) => {
+    if (isBuilder(req.url) && wantsHtml(req)) return sendPage(req, reply, 404);
+    return reply.code(404).send({ message: `Route ${req.method}:${req.url} not found`, error: 'Not Found', statusCode: 404 });
+  });
+  // a route's own plain "Not found" (an id that doesn't exist, another workspace's application)
+  app.addHook('onSend', async (req, reply, payload) => {
+    if (reply.statusCode !== 404 || !isBuilder(req.url) || !wantsHtml(req)) return payload;
+    if (!/^text\/plain\b/.test(String(reply.getHeader('content-type') ?? ''))) return payload;
+    reply.type('text/html; charset=utf-8');
+    return builderErrorPage(req, 404);
+  });
+}
+
+/** For the root error handler: a server error on a builder page a browser opened, as HTML (true: sent). */
+export function builderServerError(req: FastifyRequest, reply: FastifyReply, err: Error & { statusCode?: number }) {
+  if (!isBuilder(req.url) || !wantsHtml(req) || (err.statusCode !== undefined && err.statusCode < 500)) return false;
+  req.log.error(err);
+  sendPage(req, reply, 500);
+  return true;
+}