pgkiln 0.44.0 → 0.46.0

package/src/builder/advisor.ts

@@ -57,6 +57,7 @@ function sqlFields(kind: string, row: any): { name: string; shape: SqlShape }[]
     case 'button':
       return [{ name: 'condition', shape: 'boolean' }, { name: 'badge_query', shape: 'select' }];
     case 'computation':
+    case 'app_computation':
       return [
         ...(row.type === 'sql_query' ? [{ name: 'expression', shape: 'select' as const }] : []),
         ...conditionSql(row),
@@ -83,6 +84,7 @@ function sqlFields(kind: string, row: any): { name: string; shape: SqlShape }[]
     case 'automation_action':
       return [{ name: 'code', shape: 'statements' }, { name: 'condition', shape: 'boolean' }];
     case 'document_template':
+    case 'report_query':
       return [{ name: 'query', shape: 'select' }];
     case 'task_definition':
       return [{ name: 'action_code', shape: 'statements' }];
@@ -286,7 +288,8 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
   const buildOptions = new Set(all.filter((x) => x.kind === 'build_option').map((x) => x.row.name));
   const layouts = new Set(all.filter((x) => x.kind === 'report_layout').map((x) => x.row.name.toUpperCase()));
   const regionIds = new Set(all.filter((x) => x.kind === 'region').map((x) => x.row.id));
-  const documents = new Set(all.filter((x) => x.kind === 'document_template').map((x) => x.row.name.toUpperCase()));
+  // (104) a document button names a document template or a report query
+  const documents = new Set(all.filter((x) => x.kind === 'document_template' || x.kind === 'report_query').map((x) => x.row.name.toUpperCase()));
   const missing = (entry: Entry | null, field: string, message: string, severity: Severity = 'error') => findings.push({ severity, entry, field, message });
 
   for (const e of entries) {
@@ -353,7 +356,7 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
         && !(await one('select 1 as ok from meta.app a join meta.page p on p.app_id = a.id where a.alias = $1 and p.page_no = $2', [row.target_app, row.target_page])))
       missing(e, 'Application (app)', `Application ${row.target_app} has no page ${row.target_page}.`);
     if (kind === 'button' && row.action === 'document' && !documents.has(String(row.document ?? '').toUpperCase()))
-      missing(e, 'Document template', row.document ? `Document template ${row.document} doesn't exist.` : 'A document button needs a document template.');
+      missing(e, 'Document template', row.document ? `Document template or report query ${row.document} doesn't exist.` : 'A document button needs a document template or a report query.');
     if (kind === 'rest_module') for (const problem of handlerProblems(row.handlers)) missing(e, 'Handlers (JSON)', problem);
     if (kind === 'workflow_definition') {
       const tasks = new Set(all.filter((x) => x.kind === 'task_definition').map((x) => x.row.name.toUpperCase()));
@@ -376,6 +379,8 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
         for (const problem of [...devRefs.errors, ...devRefs.warnings]) missing(e, field, problem, 'warning');
       }
     }
+    if (kind === 'report_query' && row.layout && !layouts.has(String(row.layout).toUpperCase())) missing(e, 'Report layout', `Report layout ${row.layout} doesn't exist (the default layout is used).`, 'warning');
+    if (kind === 'app_computation' && row.type === 'item' && !items.has(String(row.expression).toUpperCase())) missing(e, 'Expression', `Item ${row.expression} doesn't exist (its value is always empty).`, 'warning');
     if (kind === 'document_template') {
       const problem = templateProblem(row.template ?? '');
       if (problem) missing(e, 'Template (HTML)', problem);

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

@@ -32,16 +32,18 @@ const CHECKS: Record<string, SqlShape> = {
   'region.source': 'select', 'region.condition': 'boolean', 'item.lov': 'select', 'item.readonly_condition': 'boolean',
   'button.condition': 'boolean', 'validation.expression': 'boolean', 'process.code': 'statements', 'authz_scheme.value': 'boolean',
   'lov.query': 'select', 'app_process.code': 'statements', 'automation.query': 'select', 'automation_action.code': 'statements', 'automation_action.condition': 'boolean',
-  'document_template.query': 'select', 'task_definition.action_code': 'statements', 'dynamic_action.code': 'statements',
+  'document_template.query': 'select', 'report_query.query': 'select', 'task_definition.action_code': 'statements', 'dynamic_action.code': 'statements',
   'button.badge_query': 'select', 'list.query': 'select', 'list_entry.condition': 'boolean',
 };
 /** Fields whose check follows the component's type select, like SWITCH ("none": no check). */
 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',
+  'app_computation.condition_expr': 'condition_type:sql=boolean,exists=select,not_exists=select,*=none',
   'branch.condition_expr': 'condition_type:sql=boolean,exists=select,not_exists=select,*=none',
 };
 /** Fields whose language follows the component's type select: "type:value=lang,…" (other values: SQL). */
@@ -51,7 +53,10 @@ const SWITCH: Record<string, string> = {
   'authz_scheme.value': 'type:role=text',
   'dynamic_action.code': 'action:set_value=sql',
   'computation.expression': 'type:static=text,item=text,function_body=plpgsql',
+  'app_computation.expression': 'type:static=text,item=text,function_body=plpgsql',
+  'shortcut.value': 'type:text=text,html=html,function_body=plpgsql',
   'computation.condition_expr': 'condition_type:item_null=text,item_not_null=text,item_equals=text,item_not_equals=text',
+  'app_computation.condition_expr': 'condition_type:item_null=text,item_not_null=text,item_equals=text,item_not_equals=text',
   'branch.condition_expr': 'condition_type:item_null=text,item_not_null=text,item_equals=text,item_not_equals=text',
 };
 /** Language when no SWITCH value matches. */

package/src/builder/components.ts

@@ -20,6 +20,7 @@ import { aiProblems } from '../runtime/ai.ts';
 import { DATA_LOAD_DEF_SPEC } from './dataload.ts';
 import { processProblems } from '../runtime/processes.ts';
 import { BUTTON_OPTIONS, ITEM_OPTIONS, REGION_OPTIONS } from '../runtime/template-options.ts';
+import { checkGroupMembers } from '../subscriptions.ts';
 
 export type FieldKind =
   | 'text' | 'int' | 'bool' | 'code' | 'json' | 'select' | 'upper'
@@ -68,8 +69,8 @@ export interface ComponentSpec {
   defaults?: Record<string, unknown>;
   /** checks the parsed values before saving; returns a message when they're not valid */
   validate?: (values: Record<string, any>) => string | null;
-  /** adjusts the parsed values before they are saved (cid: the row being edited); throws when they can't be */
-  beforeSave?: (values: Record<string, unknown>, cid: string | undefined) => Promise<void>;
+  /** adjusts the parsed values before they are saved (cid: the row being edited; parentId: its page or application); throws when they can't be */
+  beforeSave?: (values: Record<string, unknown>, cid: string | undefined, parentId: string) => Promise<void>;
 }
 
 const AUTHZ_HELP = 'Authorization scheme; prefix with ! to negate. MUST_NOT_BE_PUBLIC_USER is built in.';
@@ -106,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',
@@ -169,7 +170,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'name', common: true, label: 'Name (request)', kind: 'upper', group: 'Identification' },
       { name: 'label', common: true, label: 'Label', kind: 'text', group: 'Identification' },
       { name: 'action', common: true, label: 'Action', kind: 'select', options: ['submit', 'redirect', 'da', 'document', 'menu'], group: 'Behaviour', help: 'menu = a menu of links and submit requests (Menu entries) · da = "Defined by dynamic action"; document = download a document template (filled with the page\'s values as last loaded or saved)' },
-      { name: 'document', label: 'Document template (action document)', kind: 'upper', group: 'Behaviour', help: 'The name of a document template (Shared Components → Document templates).' },
+      { name: 'document', label: 'Document template (action document)', kind: 'upper', group: 'Behaviour', help: 'The name of a document template or a report query (Shared Components → Document templates, Report queries).' },
       { name: 'target_page', common: true, label: 'Target / branch page', kind: 'page', group: 'Behaviour' },
       { name: 'target_items', label: 'Set items (JSON)', kind: 'json', group: 'Behaviour', help: '{"P3_ID": "&P2_ID."}' },
       { name: 'confirm', label: 'Confirm message', kind: 'text', group: 'Behaviour' },
@@ -454,6 +455,66 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       buildOption(),
     ],
   },
+  // (102) application computations (APEX: Shared Components → Application Computations)
+  app_computation: {
+    table: 'meta.app_computation',
+    scope: 'app',
+    label: 'Application computation',
+    plural: 'Application computations',
+    icon: 'activity',
+    summary: (c) => `${c.item_name} (${c.point}, ${c.type})`,
+    defaults: { point: 'before_header', type: 'static' },
+    fields: [
+      { name: 'item_name', label: 'Item', kind: 'upper', group: 'Identification', help: 'An application item, e.g. AI_REGION (a page item is computed on its own page only)' },
+      { name: 'point', label: 'Point', kind: 'select', options: ['after_authentication', 'before_header', 'after_submit'], group: 'Identification',
+        help: 'after_authentication: once, when a user signs in · before_header: every page shown, before the page\'s own computations · after_submit: every page submitted, before the page\'s own computations' },
+      { name: 'seq', label: 'Sequence', kind: 'int', group: 'Identification' },
+      { name: 'type', label: 'Type', kind: 'select', options: ['static', 'item', 'sql_query', 'sql_expression', 'function_body'], group: 'Computation' },
+      { name: 'expression', label: 'Expression', kind: 'code', wide: true, group: 'Computation',
+        help: 'static: a value, &ITEM. allowed · item: an item name · sql_query: a SELECT (first column of the first row), e.g. select region from sales.rep where lower(username) = lower(:APP_USER) · sql_expression · function_body: PL/pgSQL. Runs as the application\'s role.' },
+      ...conditionFields('Condition'),
+      { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
+      buildOption('Security'),
+      { name: 'comments', label: 'Comments', kind: 'textarea', wide: true, group: 'Comments' },
+    ],
+  },
+  // (105) component groups (APEX: Shared Components → Component Groups)
+  component_group: {
+    table: 'meta.component_group',
+    scope: 'app',
+    label: 'Component group',
+    plural: 'Component groups',
+    icon: 'layers',
+    summary: (g) => `${g.name} (${(g.members ?? []).length})`,
+    defaults: {},
+    beforeSave: async (v, _cid, appId) => {
+      const { members, problems } = await checkGroupMembers(Number(appId), (v.members as string[] | null) ?? []);
+      if (problems.length) throw new Error(problems.join(' '));
+      v.members = members;
+    },
+    fields: [
+      { name: 'name', label: 'Name', kind: 'text', help: 'e.g. Sales lookups. Other applications subscribe to all of its components at once (Subscriptions), when this is a library or theme application.' },
+      { name: 'description', label: 'Description', kind: 'text', wide: true },
+      { name: 'members', label: 'Components', kind: 'list', wide: true,
+        help: 'Comma separated kind:name, e.g. lov:JOBS, authz_scheme:MANAGER, build_option:FEATURE_EXPORT, template_component:status_badge, list:SHORTCUTS.' },
+    ],
+  },
+  // (103) shortcuts (APEX: Shared Components → Shortcuts)
+  shortcut: {
+    table: 'meta.shortcut',
+    scope: 'app',
+    label: 'Shortcut',
+    plural: 'Shortcuts',
+    icon: 'link',
+    summary: (s) => `"${s.name}" (${s.type})`,
+    defaults: { type: 'text' },
+    fields: [
+      { name: 'name', label: 'Name', kind: 'upper', help: 'e.g. DELETE_CONFIRM_MSG: "DELETE_CONFIRM_MSG" (in double quotes) in a static region\'s content, an item\'s help text or a button\'s confirm message is replaced by the shortcut.' },
+      { name: 'type', label: 'Type', kind: 'select', options: ['text', 'html', 'function_body'], help: 'text: the value (escaped in HTML) · html: the value as HTML · function_body: PL/pgSQL that returns the text, e.g. begin return \'Signed in as \' || :APP_USER; end. Runs as the application\'s role, once per request.' },
+      { name: 'value', label: 'Value', kind: 'code', wide: true },
+      { name: 'comments', label: 'Comments', kind: 'textarea', wide: true },
+    ],
+  },
   page_group: {
     table: 'meta.page_group',
     scope: 'app',
@@ -578,6 +639,27 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
   web_credential: WEB_CREDENTIAL_SPEC,
   rest_source: REST_SOURCE_SPEC,
   data_load_def: DATA_LOAD_DEF_SPEC,
+  // (104) report queries (APEX: Shared Components → Report Queries)
+  report_query: {
+    table: 'meta.report_query',
+    scope: 'app',
+    label: 'Report query',
+    plural: 'Report queries',
+    icon: 'file',
+    summary: (q) => `${q.name} (${q.format})`,
+    defaults: { format: 'pdf', query: 'select empno, ename, job from sales.staff order by ename' },
+    fields: [
+      { name: 'name', label: 'Name', kind: 'upper', group: 'Identification', help: 'Pages download it with ?doc=NAME (a document template of that name wins); buttons with action "document" name it.' },
+      { name: 'description', label: 'Description', kind: 'text', wide: true, group: 'Identification' },
+      { name: 'query', label: 'Query (SQL)', kind: 'code', wide: true, group: 'Source', help: 'A SELECT with :ITEM binds (the page\'s session state), run as the application\'s role. Its columns\' names are the headings.' },
+      { name: 'format', label: 'Output format', kind: 'select', options: ['pdf', 'xlsx', 'csv', 'json', 'xml', 'html'], group: 'Output' },
+      { name: 'layout', label: 'Report layout', kind: 'upper', group: 'Output', help: 'PDF: paper, margins, font size, colours, logo and footer (Shared Components → Report layouts). Empty: the default layout.' },
+      { name: 'file_name', label: 'File name', kind: 'text', group: 'Output', help: 'Without extension, e.g. staff-&P3_DEPTNO. Empty: the name in lower case.' },
+      { name: 'title', label: 'Title', kind: 'text', group: 'Output', help: 'Of a PDF or HTML file (&ITEM. allowed). Empty: the description or the name.' },
+      { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
+      { name: 'comments', label: 'Comments', kind: 'textarea', wide: true, group: 'Comments' },
+    ],
+  },
   document_template: {
     table: 'meta.document_template',
     scope: 'app',

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) => {