pgkiln 0.44.0 → 0.46.0

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;
+}

package/src/builder/form-designer.ts

@@ -0,0 +1,229 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { heading } from '../runtime/items.ts';
+import { RESERVED_SCHEMAS, SOURCE_ID } from '../runtime/data-reporter.ts';
+import { fdSourcesOf, type FdColumn, type FdSource } from '../runtime/form-designer.ts';
+import type { Session } from '../session.ts';
+import { findObject, objectList, type DbObject } from './reporter.ts';
+import { back, BASE, csrf, developer, flash, type Req } from './ui.ts';
+
+// Page designer → a Form Designer region → Settings (sprint 85): the tables
+// and views the region offers (which columns forms may show and change, their
+// labels and lists of values, the key column, whether forms may add, change
+// and delete rows) and who may design forms. Saving replaces only the keys
+// this form knows (sources, design_authz, page_size, empty).
+
+type Config = Record<string, any>;
+type Body = Record<string, string | undefined>;
+
+export const MAX_FD_SOURCES = 20;
+
+/** The single-column primary key of a table (null: none, or a view). */
+export async function primaryKeyOf(schema: string, table: string): Promise<string | null> {
+  const row = await owner.one<{ name: string }>(
+    `select a.attname as name from pg_index i join pg_class c on c.oid = i.indrelid join pg_namespace n on n.oid = c.relnamespace
+       join pg_attribute a on a.attrelid = c.oid and a.attnum = i.indkey[0]
+      where i.indisprimary and i.indnatts = 1 and n.nspname = $1 and c.relname = $2`, [schema, table]);
+  return row?.name ?? null;
+}
+
+const clip = (v: string | undefined, max: number) => (v ?? '').trim().slice(0, max);
+const LOV_REF = /^(LOV:[A-Z0-9_]+|STATIC:.+)$/is;
+
+/**
+ * The region's settings from the form. Columns and the key must exist in the
+ * source's table or view (looked up by `lookup`); a new source is a table or
+ * view outside pgkiln's and the system's schemas, with its columns offered
+ * except binary and JSON ones, and its primary key as the key. A list of
+ * values is a shared one of the application (`lovs`) or STATIC:….
+ */
+export async function mergeFormDesignerSettings(
+  config: Config, b: Body, a: { authz: Set<string>; lovs: Set<string> },
+  lookup: { byName: (schema: string, table: string) => Promise<DbObject | null>; byOid: (oid: number) => Promise<DbObject | null>; key: (schema: string, table: string) => Promise<string | null> } =
+    { byName: findObject, byOid: objectByOid, key: primaryKeyOf },
+): Promise<{ config: Config; errors: string[] }> {
+  const out: Config = { ...config };
+  const errors: string[] = [];
+  const size = Number(b.page_size);
+  if (b.page_size && Number.isInteger(size) && size >= 5 && size <= 200 && size !== 25) out.page_size = size;
+  else delete out.page_size;
+  const empty = clip(b.empty, 200);
+  if (empty) out.empty = empty;
+  else delete out.empty;
+  delete out.design_authz;
+  if (b.design_authz && a.authz.has(b.design_authz.toUpperCase())) out.design_authz = b.design_authz;
+  else if (b.design_authz) errors.push(`There is no authorization scheme ${b.design_authz}.`);
+
+  const lovOk = (v: string) => LOV_REF.test(v) && (!/^LOV:/i.test(v) || a.lovs.has(v.slice(4).toUpperCase()));
+  const sources: FdSource[] = [];
+  const existing = fdSourcesOf({ config });
+  for (let i = 0; i < existing.length; i++) {
+    const s = existing.find((x) => x.id === b[`s${i}_key`]);
+    if (!s || sources.some((x) => x.id === s.id)) continue;
+    if (b[`s${i}_remove`] === 'true') continue;
+    const obj = await lookup.byName(s.schema, s.table);
+    const names = new Set(obj?.columns.map((c) => c.name));
+    const columns: FdColumn[] = [];
+    for (let j = 0; j < 500 && b[`s${i}_col_${j}`] !== undefined; j++) {
+      const name = b[`s${i}_col_${j}`]!;
+      if (b[`s${i}_on_${j}`] !== 'true' || columns.some((c) => c.name === name)) continue;
+      // a column the table no longer has may stay offered (it is skipped at run time), but none can be added
+      if (!names.has(name) && !s.columns.some((c) => c.name === name)) continue;
+      const label = clip(b[`s${i}_label_${j}`], 80);
+      let lov = clip(b[`s${i}_lov_${j}`], 2000);
+      if (lov && !lovOk(lov)) {
+        errors.push(`${s.id}.${name}: "${lov.slice(0, 60)}" is not a shared list of values of this application (LOV:NAME) or STATIC:Display;value,….`);
+        lov = '';
+      }
+      columns.push({ name, ...(label ? { label } : {}), ...(lov ? { lov } : {}) });
+    }
+    if (!columns.length) errors.push(`Data source ${s.id} offers no columns.`);
+    const key = clip(b[`s${i}_keycol`], 63);
+    if (key && !names.has(key)) errors.push(`${s.id}: the key column ${key} is not in ${s.schema}.${s.table}.`);
+    const label = clip(b[`s${i}_label`], 80);
+    const description = clip(b[`s${i}_description`], 300);
+    const hasKey = !!key && names.has(key);
+    sources.push({
+      id: s.id, ...(label ? { label } : {}), ...(description ? { description } : {}), schema: s.schema, table: s.table,
+      ...(hasKey ? { key } : {}), columns, insert: b[`s${i}_insert`] === 'true', update: hasKey && b[`s${i}_update`] === 'true', delete: hasKey && b[`s${i}_delete`] === 'true',
+    });
+  }
+
+  if (b.new_object) {
+    const obj = /^\d{1,10}$/.test(b.new_object) ? await lookup.byOid(Number(b.new_object)) : null;
+    if (!obj || RESERVED_SCHEMAS.test(obj.schema)) errors.push('Choose a table or view for the new data source.');
+    else if (sources.length >= MAX_FD_SOURCES) errors.push(`A region offers at most ${MAX_FD_SOURCES} data sources.`);
+    else {
+      let id = clip(b.new_id, 40).toLowerCase();
+      if (id && !SOURCE_ID.test(id)) {
+        errors.push(`"${id}" is not a valid static id: lower case letters, digits and _, starting with a letter.`);
+        id = '';
+      }
+      if (id && sources.some((s) => s.id === id)) {
+        errors.push(`There is already a data source ${id}.`);
+        id = '';
+      }
+      if (!id) {
+        const base = (obj.table.toLowerCase().replace(/[^a-z0-9_]+/g, '_').replace(/^[^a-z]+/, '') || 'source').slice(0, 36);
+        id = base;
+        for (let n = 2; sources.some((s) => s.id === id); n++) id = `${base}_${n}`;
+      }
+      const label = clip(b.new_label, 80) || heading(obj.table);
+      const key = await lookup.key(obj.schema, obj.table);
+      const columns = obj.columns.filter((c) => !/^(bytea|json|jsonb|xml)$/.test(c.type)).map((c) => ({ name: c.name, label: heading(c.name) }));
+      // adding rows at first; changing them when the table has a key; never deleting until the developer says so
+      sources.push({ id, label, schema: obj.schema, table: obj.table, ...(key ? { key } : {}), columns, insert: true, update: !!key, delete: false });
+    }
+  }
+  if (sources.length) out.sources = sources;
+  else delete out.sources;
+  return { config: out, errors };
+}
+
+async function objectByOid(oid: number): Promise<DbObject | null> {
+  const row = await owner.one<{ schema: string; table: string }>(`select n.nspname as schema, c.relname as table from pg_class c join pg_namespace n on n.oid = c.relnamespace where c.oid = $1`, [oid]);
+  return row ? findObject(row.schema, row.table) : null;
+}
+
+const opt = (value: string, label: string, current: string) => html`<option value="${value}"${value === current ? raw(' selected') : ''}>${label}</option>`;
+
+/** The settings form under a Form Designer region in the page designer. */
+export async function formDesignerSettingsForm(pageId: number, appId: number, r: { id: number; config: Config }, s: Session): Promise<Raw> {
+  const cfg = r.config ?? {};
+  const id = (n: string) => `fds_${r.id}_${n}`;
+  const app = await owner.one<{ db_role: string | null }>('select db_role from meta.app where id = $1', [appId]);
+  const schemes = (await owner.query<{ name: string }>('select name from meta.authz_scheme where app_id = $1 order by name', [appId])).rows.map((x) => x.name);
+  const lovs = (await owner.query<{ name: string }>('select name from meta.lov where app_id = $1 order by name', [appId])).rows.map((x) => x.name);
+  const objects = await objectList(app?.db_role ?? null);
+  const sources = fdSourcesOf({ config: cfg });
+  const designAuthz = typeof cfg.design_authz === 'string' ? cfg.design_authz : '';
+  const role = app?.db_role ?? null;
+  const sourceSets = await Promise.all(
+    sources.map(async (src, i) => {
+      const obj = await findObject(src.schema, src.table);
+      const offered = new Map(src.columns.map((c) => [c.name, c]));
+      const all = [...(obj?.columns ?? []).map((c) => ({ name: c.name, type: c.type, missing: false })),
+        ...src.columns.filter((c) => !obj?.columns.some((x) => x.name === c.name)).map((c) => ({ name: c.name, type: '', missing: true }))];
+      const privileges = obj && role
+        ? await owner.one<{ sel: boolean; ins: boolean; upd: boolean; del: boolean }>(
+            `select has_table_privilege($1, $2::oid, 'select') as sel, has_table_privilege($1, $2::oid, 'insert') as ins,
+                    has_table_privilege($1, $2::oid, 'update') as upd, has_table_privilege($1, $2::oid, 'delete') as del`, [role, obj.oid])
+            .catch(() => undefined)
+        : undefined;
+      const missing = privileges ? (['sel', 'ins', 'upd', 'del'] as const).filter((k) => !privileges[k] && (k === 'sel' || src[({ ins: 'insert', upd: 'update', del: 'delete' } as const)[k as 'ins' | 'upd' | 'del']])) : [];
+      const grant = { sel: 'SELECT', ins: 'INSERT', upd: 'UPDATE', del: 'DELETE' };
+      const check = (k: 'insert' | 'update' | 'delete', label: string, needsKey: boolean) =>
+        html`<label class="check"><input type="checkbox" name="s${i}_${k}" value="true"${src[k] ? raw(' checked') : ''}> ${label}${needsKey && !src.key ? ' (needs a key column)' : ''}</label>`;
+      return html`<fieldset class="prop-group"><legend>${src.label || src.id} <span class="muted">(${src.schema}.${src.table})</span></legend>
+        <input type="hidden" name="s${i}_key" value="${src.id}">
+        ${!obj ? html`<div class="alert alert-error" role="alert">The table or view ${src.schema}.${src.table} does not exist (any more).</div>` : ''}
+        ${missing.length ? html`<div class="alert alert-error" role="alert">The application's database role lacks ${missing.map((k) => grant[k]).join(', ')} on ${src.schema}.${src.table}: grant it, or forms can't do that.</div>` : ''}
+        <div class="form-grid">
+          <div class="field"><label class="label" for="${id(`s${i}_id`)}">Static id</label><input id="${id(`s${i}_id`)}" value="${src.id}" readonly></div>
+          <div class="field"><label class="label" for="${id(`s${i}_label`)}">Label</label><input id="${id(`s${i}_label`)}" name="s${i}_label" maxlength="80" value="${src.label ?? ''}" placeholder="${heading(src.table)}"></div>
+          <div class="field" data-wide><label class="label" for="${id(`s${i}_description`)}">Description (shown to designers)</label><input id="${id(`s${i}_description`)}" name="s${i}_description" maxlength="300" value="${src.description ?? ''}"></div>
+          <div class="field"><label class="label" for="${id(`s${i}_keycol`)}">Key column (identifies a row)</label>
+            <select id="${id(`s${i}_keycol`)}" name="s${i}_keycol"><option value="">- none: forms only add rows -</option>${(obj?.columns ?? []).map((c) => opt(c.name, c.name, src.key ?? ''))}</select></div>
+          <div class="field"><span class="label">Forms on it may</span>
+            ${check('insert', 'add rows', false)} ${check('update', 'change rows', true)} ${check('delete', 'delete rows', true)}</div>
+        </div>
+        <div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">Offer</th><th scope="col">Column</th><th scope="col">Label</th><th scope="col">List of values</th></tr></thead><tbody>
+          ${all.map((c, j) => {
+            const o = offered.get(c.name);
+            return html`<tr>
+              <td data-label="Offer"><input type="hidden" name="s${i}_col_${j}" value="${c.name}"><input type="checkbox" name="s${i}_on_${j}" value="true"${o ? raw(' checked') : ''} aria-label="Offer ${c.name}"></td>
+              <td data-label="Column"><code>${c.name}</code> <span class="muted">${c.type}</span>${c.missing ? html` <span class="tag tag-error">not in the table</span>` : ''}</td>
+              <td data-label="Label"><input name="s${i}_label_${j}" maxlength="80" value="${o?.label ?? ''}" placeholder="${heading(c.name)}" aria-label="Label of ${c.name}"></td>
+              <td data-label="List of values"><input name="s${i}_lov_${j}" maxlength="2000" value="${o?.lov ?? ''}" placeholder="LOV:NAME" list="${id('lovs')}" aria-label="List of values of ${c.name}"></td>
+            </tr>`;
+          })}
+        </tbody></table></div>
+        <div class="field"><label class="check"><input type="checkbox" name="s${i}_remove" value="true"> Remove this data source (forms on it stop working)</label></div>
+      </fieldset>`;
+    }),
+  );
+  return html`<h3 class="u-mt15">Form Designer settings</h3>
+    <p class="muted u-mt0">Users that pass the designers' authorization scheme build data entry forms on the tables and views below: they pick offered columns, labels, help texts, required fields and defaults, and publish forms for everyone who can see this region. Forms read and write rows as the application's database role, so grants and row level security apply.</p>
+    <datalist id="${id('lovs')}">${lovs.map((n) => html`<option value="LOV:${n}">`)}</datalist>
+    <form method="post" action="${BASE}/pages/${pageId}/region/${r.id}/form-designer" class="component-form">${csrf(s)}
+      <fieldset class="prop-group"><legend>Forms</legend><div class="form-grid">
+        <div class="field"><label class="label" for="${id('design_authz')}">Who may design forms</label>
+          <select id="${id('design_authz')}" name="design_authz">${opt('', 'Nobody (choose an authorization scheme)', designAuthz)}${schemes.map((n) => opt(n, `Authorization: ${n}`, designAuthz))}</select></div>
+        <div class="field"><label class="label" for="${id('page_size')}">Rows per page</label>
+          <input id="${id('page_size')}" name="page_size" type="number" min="5" max="200" value="${cfg.page_size ?? ''}" placeholder="25"></div>
+        <div class="field" data-wide><label class="label" for="${id('empty')}">Text when there are no rows</label>
+          <input id="${id('empty')}" name="empty" maxlength="200" value="${cfg.empty ?? ''}" placeholder="No data found"></div>
+      </div></fieldset>
+      ${sourceSets}
+      <fieldset class="prop-group"><legend>Add a data source</legend><div class="form-grid">
+        <div class="field" data-wide><label class="label" for="${id('new_object')}">Table or view</label>
+          <select id="${id('new_object')}" name="new_object"><option value="">- none -</option>${objects.map((o) => html`<option value="${o.oid}">${o.name}${o.access ? '' : ' (no access for the app role)'}</option>`)}</select></div>
+        <div class="field"><label class="label" for="${id('new_id')}">Static id</label><input id="${id('new_id')}" name="new_id" maxlength="40" pattern="[a-z][a-z0-9_]*" placeholder="from the name"></div>
+        <div class="field"><label class="label" for="${id('new_label')}">Label</label><input id="${id('new_label')}" name="new_label" maxlength="80"></div>
+      </div>
+      <small class="help">All columns are offered at first (except binary and JSON ones), the primary key is the key column, and forms may add and change rows, not delete them. Untick columns designers should not put on forms, such as generated keys and audit columns.</small></fieldset>
+      <div class="buttons"><button class="btn btn-hot">Save Form Designer settings</button></div>
+    </form>`;
+}
+
+export async function formDesignerBuilderRoutes(app: FastifyInstance) {
+  app.post(`${BASE}/pages/:pid/region/:rid/form-designer`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const { pid, rid } = req.params as { pid: string; rid: string };
+    const r = /^\d{1,9}$/.test(pid) && /^\d{1,9}$/.test(rid)
+      ? await owner.one<{ id: number; config: Config; app_id: number }>(
+          `select r.id, r.config, p.app_id from meta.region r join meta.page p on p.id = r.page_id where r.id = $1 and r.page_id = $2 and r.type = 'form_designer'`, [rid, pid])
+      : undefined;
+    if (!r) return reply.code(404).send('Not found');
+    const schemes = (await owner.query<{ name: string }>('select name from meta.authz_scheme where app_id = $1', [r.app_id])).rows;
+    const lovs = (await owner.query<{ name: string }>('select name from meta.lov where app_id = $1', [r.app_id])).rows;
+    const { config, errors } = await mergeFormDesignerSettings(r.config ?? {}, (req.body ?? {}) as Body,
+      { authz: new Set(schemes.map((x) => x.name.toUpperCase())), lovs: new Set(lovs.map((x) => x.name.toUpperCase())) });
+    await owner.query('update meta.region set config = $2 where id = $1', [r.id, JSON.stringify(config)]);
+    if (errors.length) flash(s, errors.join(' '), 'error');
+    else flash(s, 'Settings saved.');
+    return back(reply, s, `${BASE}/pages/${pid}?c=region-${rid}`);
+  });
+}

package/src/builder/forms.ts

@@ -179,7 +179,7 @@ export async function saveComponent(kind: string, parentCol: 'page_id' | 'app_id
   const values = parseFields(spec, body);
   const problem = spec.validate?.(values);
   if (problem) throw new Error(problem);
-  await spec.beforeSave?.(values, cid);
+  await spec.beforeSave?.(values, cid, parentId);
   // region fields only take regions of the same page
   if (parentCol === 'page_id')
     for (const f of spec.fields)

package/src/builder/locks.ts

@@ -41,6 +41,12 @@ const RUN_ONLY_EXEMPT = /^\/apps\/\d+\/(availability|backups|backups\/settings|l
 /** The application (and page) a builder URL under /apps/:id or /pages/:pid is about, or null. */
 export async function appOfPath(path: string): Promise<{ appId: number; pageNo: number | null; pageId: number | null } | null> {
   const rel = path.split('?')[0].slice(BASE.length);
+  // (sprint 86) the page designer by the page's number
+  const byNo = /^\/apps\/(\d{1,9})\/pages\/(\d{1,9})(\/|$)/.exec(rel);
+  if (byNo) {
+    const p = await owner.one<{ id: number }>('select id from meta.page where app_id = $1 and page_no = $2', [Number(byNo[1]), Number(byNo[2])]);
+    return { appId: Number(byNo[1]), pageNo: Number(byNo[2]), pageId: p?.id ?? null };
+  }
   const app = /^\/apps\/(\d{1,9})(\/|$)/.exec(rel);
   if (app) return { appId: Number(app[1]), pageNo: null, pageId: null };
   const page = /^\/pages\/(\d{1,9})(\/|$)/.exec(rel);

package/src/builder/newapp.ts

@@ -268,7 +268,8 @@ export async function createApp(c: Client, a: CheckedApp): Promise<{ id: number;
   if (base !== 'standard') theme.base = base;
   if (a.topNav) theme.nav = 'top';
   if (a.accent) theme.accent = a.accent;
-  const r = await c.query('insert into meta.app (alias, name, authentication, db_role, theme, language) values ($1, $2, $3, $4, $5, $6) returning id', [a.alias, a.name, a.authentication, a.role, theme, a.language ?? 'en']);
+  // (107) a new application starts at Release 1.0, like APEX's
+  const r = await c.query(`insert into meta.app (alias, name, authentication, db_role, theme, language, version) values ($1, $2, $3, $4, $5, $6, 'Release 1.0') returning id`, [a.alias, a.name, a.authentication, a.role, theme, a.language ?? 'en']);
   const appId = r.rows[0].id as number;
   await placeApp(c, appId, a.workspaceId);
   const p = await c.query(`insert into meta.page (app_id, page_no, name, title) values ($1, 1, 'Home', 'Home') returning id`, [appId]);

package/src/builder/object-browser.ts

@@ -4,7 +4,9 @@ import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { readSchema } from '../ddl.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Req } from './ui.ts';
-import { sessionSchema, workshopDb } from './workspaces.ts';
+import { currentWorkspace, inWorkspaceSql, sessionSchema, workshopDb } from './workspaces.ts';
+import { owner } from '../db.ts';
+import type { Session } from '../session.ts';
 
 // (sprint 75) The SQL Workshop's Object Browser like APEX's: a schema in the header (the session's
 // schema by default), a tree with a folder per object type, a filter, a + menu that starts a CREATE
@@ -61,6 +63,23 @@ export function createTemplate(kind: string, schema: string): string | null {
 }
 
 const PAGE_SIZE = 25;
+
+/**
+ * (sprint 89, SQL-4) The parsing schema of the application changed last in the developer's workspace: the
+ * schema its database role may use (not public, pgkiln's or the system's). APEX opens the Object Browser
+ * on the workspace's parsing schema.
+ */
+async function parsingSchema(s: Session): Promise<string | null> {
+  const row = await owner.one<{ n: string }>(
+    `select n.nspname as n
+       from meta.app a join pg_roles r on r.rolname = a.db_role
+       join pg_namespace n on has_schema_privilege(r.oid, n.oid, 'USAGE')
+      where ${inWorkspaceSql('a', 1)} and n.nspname !~ '^pg_' and n.nspname not in ('information_schema', 'public') and not (n.nspname = any ($2))
+      order by a.updated_at desc, a.id desc, n.nspname limit 1`,
+    [currentWorkspace(s), SYSTEM_SCHEMAS],
+  ).catch(() => undefined);
+  return row?.n ?? null;
+}
 /** A column type in an action: a type name with an optional size and array brackets. */
 const TYPE_RE = /^[a-z][a-z0-9_ ]{0,40}(\(\d{1,4}(,\s?\d{1,4})?\))?(\[\])?$/i;
 const NAME_RE = /^[A-Za-z_][A-Za-z0-9_$]{0,62}$/;
@@ -81,8 +100,15 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
         [system, SYSTEM_SCHEMAS],
       )
     ).rows.map((r) => r.n);
-    const own = await sessionSchema(s, db);
-    const schema = typeof q.schema === 'string' && schemas.includes(q.schema) ? q.schema : own && schemas.includes(own) ? own : (schemas[0] ?? '');
+    // (sprint 89, SQL-4) the schema asked for, else the last one shown (remembered per session), else the session's
+    // schema of SQL Commands, else the parsing schema of the application changed last, else the first
+    const usable = (v: unknown): v is string => typeof v === 'string' && schemas.includes(v);
+    const asked = usable(q.schema) ? q.schema : null;
+    const last = s.state.__OBSCHEMA;
+    const own = asked || usable(last) ? null : await sessionSchema(s, db);
+    const parsing = asked || usable(last) || usable(own) ? null : await parsingSchema(s);
+    const schema = asked ?? (usable(last) ? last : usable(own) ? own : usable(parsing) ? parsing : (schemas[0] ?? ''));
+    if (schema && schema !== last) s.state.__OBSCHEMA = schema;
     const filter = typeof q.q === 'string' ? q.q.trim().slice(0, 100) : '';
     const objects = schema ? await listObjects(db, schema, system) : [];
     const shown = objects.filter((o) => !filter || o.name.toLowerCase().includes(filter.toLowerCase()));
@@ -161,6 +187,24 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
       if (!cols.includes(col)) problem = 'Choose a column of the table.';
       else if (!NAME_RE.test(to) || cols.includes(to)) problem = 'The new name must be a valid name that the table doesn\'t have yet.';
       else sql = `alter table ${table.q} rename column ${ident(col)} to ${ident(to)};`;
+    } else if (b.action === 'modify') {
+      // (sprint 89, SQL-4) type, nulls and default in one ALTER TABLE; a default is one expression, never a statement
+      const type = String(b.type ?? '').trim();
+      const expr = String(b.default ?? '').trim();
+      const parts: string[] = [];
+      const c = ident(col);
+      if (!cols.includes(col)) problem = 'Choose a column of the table.';
+      else if (type && !TYPE_RE.test(type)) problem = 'A type is a name with an optional size, e.g. text, numeric(9,2), varchar(40), int[].';
+      else if (b.default_action === 'set' && (!expr || expr.length > 200 || /;|--|\/\*/.test(expr))) problem = 'A default is one expression (at most 200 characters, without ; or comments), e.g. now(), 0 or \'new\'.';
+      else {
+        if (type) parts.push(`alter column ${c} type ${type} using ${c}::${type}`);
+        if (b.nullable === 'not_null') parts.push(`alter column ${c} set not null`);
+        else if (b.nullable === 'null') parts.push(`alter column ${c} drop not null`);
+        if (b.default_action === 'set') parts.push(`alter column ${c} set default ${expr}`);
+        else if (b.default_action === 'drop') parts.push(`alter column ${c} drop default`);
+        if (!parts.length) problem = 'Nothing to change: choose a new type, nulls or a default.';
+        else sql = `alter table ${table.q}\n  ${parts.join(',\n  ')};`;
+      }
     } else if (b.action === 'drop') {
       if (!cols.includes(col)) problem = 'Choose a column of the table.';
       else sql = `alter table ${table.q} drop column ${ident(col)};`;
@@ -210,7 +254,7 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
   const table = (rows: Record<string, unknown>[], empty = 'None.') =>
     rows.length
       ? html`<div class="table-wrap"><table class="report"><thead><tr>${Object.keys(rows[0]).map((k) => html`<th scope="col">${k}</th>`)}</tr></thead>
-        <tbody>${rows.map((r) => html`<tr>${Object.values(r).map((v) => html`<td>${v === null ? html`<span class="null">null</span>` : typeof v === 'object' ? JSON.stringify(v) : String(v)}</td>`)}</tr>`)}</tbody></table></div>`
+        <tbody>${rows.map((r) => html`<tr>${Object.values(r).map((v) => html`<td>${v === null ? '' : typeof v === 'object' ? JSON.stringify(v) : String(v)}</td>`)}</tr>`)}</tbody></table></div>`
       : html`<p class="muted">${empty}</p>`;
   const ddlOf = async (match: (x: { kind: string; name: string; table?: string }) => boolean) => {
     const objects = await readSchema(db.pool as pg.Pool, schema).catch(() => []);
@@ -247,7 +291,14 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
   const isTable = o.type === 'table';
   const tabs = TABLE_TABS.filter(([k]) => isTable || !['indexes', 'constraints', 'triggers', 'rls'].includes(k) || (o.type === 'matview' && k === 'indexes'));
   const tab = tabs.some(([k]) => k === tabAsked) ? tabAsked : 'columns';
-  const nav = html`<nav class="settings-tabs ob-tabs" aria-label="${o.name}">${tabs.map(([k, label]) => html`<a href="${link({ k: o.type, o: o.ref, tab: k })}"${k === tab ? raw(' aria-current="page"') : ''}>${label}</a>`)}</nav>`;
+  // (sprint 89, SQL-4) the tabs on one row: the main ones and the current one, the rest under More
+  const MAIN = ['columns', 'data', 'indexes', 'constraints', 'ddl'];
+  const tabLink = ([k, label]: readonly [string, string]) => html`<a href="${link({ k: o.type, o: o.ref, tab: k })}"${k === tab ? raw(' aria-current="page"') : ''}>${label}</a>`;
+  const shownTabs = tabs.filter(([k]) => MAIN.includes(k) || k === tab);
+  const moreTabs = tabs.filter(([k]) => !shownTabs.some(([x]) => x === k));
+  const nav = html`<nav class="settings-tabs ob-tabs" aria-label="${o.name}">${shownTabs.map(tabLink)}${moreTabs.length
+    ? html`<details class="menu ob-more"><summary>More ${icon('chevron-down')}</summary><div class="menu-panel"><div class="menu-section menu-links">${moreTabs.map(tabLink)}</div></div></details>`
+    : ''}</nav>`;
   let body: Raw;
   switch (tab) {
     case 'columns': {
@@ -262,20 +313,32 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
       ).rows;
       const names = cols.map((c) => String(c.column));
       const hidden = html`${raw(`<input type="hidden" name="__csrf" value="${s.csrf_token}">`)}<input type="hidden" name="table" value="${o.ref}"><input type="hidden" name="schema" value="${schema}">`;
-      const pick = (id: string) => html`<label class="sr-only" for="${id}">Column</label><select id="${id}" name="column">${names.map((n) => html`<option>${n}</option>`)}</select>`;
-      body = html`${table(cols)}${isTable
-        ? html`<div class="ob-actions">
-            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="add">
-              <b>Add column</b><label class="sr-only" for="ob-add-name">Name</label><input id="ob-add-name" name="column" placeholder="name" required>
-              <label class="sr-only" for="ob-add-type">Type</label><input id="ob-add-type" name="type" placeholder="text" required>
-              <label class="check"><input type="checkbox" name="not_null" value="true"> not null</label><button class="btn btn-sm">Show the SQL</button></form>
-            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="rename">
-              <b>Rename column</b>${pick('ob-ren-col')}<label class="sr-only" for="ob-ren-to">New name</label><input id="ob-ren-to" name="new_name" placeholder="new name" required><button class="btn btn-sm">Show the SQL</button></form>
-            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="drop">
-              <b>Drop column</b>${pick('ob-drop-col')}<button class="btn btn-sm">Show the SQL</button></form>
-            <p class="muted u-m0">Each action writes the ALTER TABLE statement into SQL Commands: review it there and press Run.</p>
+      const pick = (id: string) => html`<label class="label" for="${id}">Column</label><select id="${id}" name="column">${names.map((n) => html`<option>${n}</option>`)}</select>`;
+      // (sprint 89, SQL-4; APEX: the Columns toolbar) Add, Modify, Rename and Drop above the columns, each a small form
+      body = html`${isTable
+        ? html`<div class="ob-toolbar" role="toolbar" aria-label="Columns">
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('plus')} Add column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="add">
+                <label class="label" for="ob-add-name">Name</label><input id="ob-add-name" name="column" placeholder="name" required>
+                <label class="label" for="ob-add-type">Type</label><input id="ob-add-type" name="type" placeholder="text" required>
+                <label class="check"><input type="checkbox" name="not_null" value="true"> not null</label><button class="btn btn-sm btn-hot">Show the SQL</button></form></div></details>
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('edit')} Modify column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="modify">
+                ${pick('ob-mod-col')}
+                <label class="label" for="ob-mod-type">New type</label><input id="ob-mod-type" name="type" placeholder="the same">
+                <label class="label" for="ob-mod-null">Nulls</label><select id="ob-mod-null" name="nullable"><option value="">the same</option><option value="null">allowed</option><option value="not_null">not null</option></select>
+                <label class="label" for="ob-mod-def">Default</label><select id="ob-mod-def" name="default_action"><option value="">the same</option><option value="set">set to</option><option value="drop">none</option></select>
+                <label class="sr-only" for="ob-mod-expr">Default expression</label><input id="ob-mod-expr" name="default" placeholder="now(), 0, 'x'">
+                <button class="btn btn-sm btn-hot">Show the SQL</button></form></div></details>
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('tag')} Rename column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="rename">
+                ${pick('ob-ren-col')}<label class="label" for="ob-ren-to">New name</label><input id="ob-ren-to" name="new_name" placeholder="new name" required><button class="btn btn-sm btn-hot">Show the SQL</button></form></div></details>
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('trash')} Drop column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="drop">
+                ${pick('ob-drop-col')}<button class="btn btn-sm btn-danger">Show the SQL</button></form></div></details>
+            <span class="muted ob-toolbar-note">Each writes the ALTER TABLE statement into SQL Commands: review it there and press Run.</span>
           </div>`
-        : ''}`;
+        : ''}${table(cols)}`;
       break;
     }
     case 'data': {

package/src/builder/region-help.ts

@@ -21,6 +21,7 @@ export const REGION_CONFIG_HELP: [string[], string][] = [
   [['*'], '{"display_selector":true} puts it in the page\'s display selector'],
   [['report', 'chart', 'cards', 'dynamic', 'tree', 'template_component'], '{"lazy":true} loads it after the page shows, {"cache":{"scope":"user"|"session"|"all","seconds":300}} keeps its HTML (a submit of the page empties it)'],
   [['data_reporter'], '{"sources":[{"id":"orders","label":"Orders","description":"…","schema":"sales","table":"order_v","columns":[{"name":"total","label":"Total","format":"FML999G990D00"}]}],"sharing":true,"share_authz":"SCHEME","page_size":25} (the Data Reporter settings below edit it)'],
+  [['form_designer'], '{"sources":[{"id":"orders","label":"Orders","description":"…","schema":"sales","table":"orders","key":"id","columns":[{"name":"customer","label":"Customer"},{"name":"status","lov":"LOV:ORDER_STATUS"}],"insert":true,"update":true,"delete":false}],"design_authz":"SCHEME","page_size":25} (the Form Designer region\'s Settings; users that pass design_authz design forms)'],
   [['ai_assistant'], '{"service":"NAME","system":"…","welcome":"…","context":[{"name":"policy","sql":"select … :AI_PROMPT …"}],"tools":[{"name":"my_leave","description":"…","sql":"select … where status = :STATUS","parameters":{"STATUS":{"type":"string","enum":["PENDING"]}}},{"name":"dept","type":"rest","source":"DEPARTMENT","description":"…"}],"max_rounds":5,"max_turns":20} (the AI assistant settings below edit it)'],
   [['report'], '{"ai_filter":{"service":"NAME"}} adds an "Ask in your own words" box (natural-language filters)'],
   [['plugin'], '{"plugin":"name","attributes":{"NAME":"value"}} (a region plug-in; a Source SELECT feeds its template)'],
@@ -45,6 +46,7 @@ const ANCHORS: Record<string, string> = {
   tree: 'tree',
   list: 'list-lists',
   data_reporter: 'data-reporter-data-reporter',
+  form_designer: 'form_designer-form-designer',
   ai_assistant: 'ai-assistant-ai-assistant',
   template_component: 'template-components',
   static: 'static-and-dynamic-content',

package/src/builder/region-settings.ts

@@ -16,6 +16,7 @@ import { LIST_TEMPLATES } from '../runtime/lists.ts';
 import { MAX_EXTRA_LAYERS } from '../runtime/maps.ts';
 import { postgis } from '../runtime/spatial.ts';
 import { reporterSettingsForm } from './reporter.ts';
+import { formDesignerSettingsForm } from './form-designer.ts';
 
 // Page designer → a region → Settings: the region's "config" JSON as a form
 // for grid, chart, cards, calendar and faceted search regions (report
@@ -732,6 +733,7 @@ export async function regionSettingsForm(pageId: number, appId: number, r: Regio
   if (r.type === 'ai_assistant') return assistantSettingsForm(pageId, appId, r, s);
   if (r.type === 'template_component') return templateRegionForm(pageId, appId, r, s);
   if (r.type === 'data_reporter') return reporterSettingsForm(pageId, appId, r, s);
+  if (r.type === 'form_designer') return formDesignerSettingsForm(pageId, appId, r, s);
   if (!(SETTINGS_TYPES as readonly string[]).includes(r.type)) return '';
   const cfg = r.config ?? {};
   const id = (n: string) => `rg_${r.id}_${n}`;

package/src/builder/reporter.ts

@@ -43,7 +43,7 @@ async function objectByOid(oid: number): Promise<DbObject | null> {
 }
 
 /** The tables and views to choose from, with whether the application's role may read them. */
-async function objectList(dbRole: string | null) {
+export async function objectList(dbRole: string | null) {
   return (
     await owner.query<{ oid: number; name: string; access: boolean }>(
       `select c.oid::int as oid, format('%I.%I', n.nspname, c.relname) as name,

package/src/builder/routes.ts

@@ -13,7 +13,7 @@ import { documentShell } from '../layout.ts';
 import { passwordProblem } from '../accounts.ts';
 import { clientIp, createSession, destroySession, getSession, loginThrottled, logActivity, saveState, takeFlash } from '../session.ts';
 import { loginSettingsFields, saveLoginSettings } from './login-page.ts';
-import { APP_COLORS, appHeader, back, BASE, builderHead, csrf, developer, flash, input, region, select, send, shell, THEME_COOKIE, validTheme, type Req } from './ui.ts';
+import { APP_COLORS, appHeader, back, BASE, designerUrl, builderHead, csrf, developer, flash, input, region, select, send, shell, THEME_COOKIE, validTheme, type Req } from './ui.ts';
 import { appOr404 } from './forms.ts';
 import { docToFiles, filesToZip } from '../appfiles.ts';
 import { homeRoutes, rememberApp } from './home.ts';
@@ -278,11 +278,11 @@ export async function builderRoutes(app: FastifyInstance) {
               <select id="f_group" name="group">${[['', 'All pages'], ...groups.map((g) => [g, g]), ['-', 'Without a group']].map(([v, l]) => html`<option value="${v}"${v === groupFilter ? raw(' selected') : ''}>${l}</option>`)}</select></div>
               <button class="btn u-selfend">Show</button></form>`
           : ''}${icons
-          ? html`<ul class="page-icons" id="pages-rows">${shownPages.map((p) => html`<li><a href="${BASE}/pages/${p.id}" class="page-icon"><span class="page-icon-no">${p.page_no}</span><b>${p.name}</b><small class="muted">${p.mode}, ${p.regions} region${p.regions === 1 ? '' : 's'}</small></a></li>`)}</ul>`
+          ? html`<ul class="page-icons" id="pages-rows">${shownPages.map((p) => html`<li><a href="${designerUrl(a.id, p.page_no)}" class="page-icon"><span class="page-icon-no">${p.page_no}</span><b>${p.name}</b><small class="muted">${p.mode}, ${p.regions} region${p.regions === 1 ? '' : 's'}</small></a></li>`)}</ul>`
           : html`<div class="table-wrap"><table class="report">
           <thead><tr><th class="num">Page</th><th>Name</th>${grouped ? html`<th>Group</th>` : ''}<th>Mode</th><th class="num">Regions</th><th class="num">Items</th><th class="num">DAs</th><th class="num">Processes</th><th>Authorization</th><th>Protection</th><th>Lock</th><th></th></tr></thead>
           <tbody id="pages-rows">${shownPages.map((p) => html`<tr>
-            <td class="num">${p.page_no}</td><td><a href="${BASE}/pages/${p.id}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
+            <td class="num">${p.page_no}</td><td><a href="${designerUrl(a.id, p.page_no)}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
             <td class="num">${p.regions}</td><td class="num">${p.items}</td><td class="num">${p.das}</td><td class="num">${p.processes}</td>
             <td>${p.requires_auth ? (p.authz ?? '—') : 'public'}</td><td>${p.protection}</td>
             <td>${((l) => (l ? html`<span class="lock-tag" title="${lockText(l)}">${icon('key')}<span>${l.locked_by === s.username ? 'you' : l.locked_by}</span></span>` : '—'))(locks.get(p.page_no))}</td>
@@ -401,6 +401,7 @@ export async function builderRoutes(app: FastifyInstance) {
             <div class="form-grid">
               ${input('name', 'Name', a.name, { required: true })}
               ${input('alias', 'Alias', a.alias, { required: true })}
+              ${input('version', 'Version', a.version ?? '', { placeholder: 'Release 1.0', help: 'Shown in the footer of the application\'s pages; empty: none.' })}
               ${input('home_page', 'Home page', a.home_page, { type: 'number' })}
               ${select('app_type', 'Application type', a.app_type ?? 'standard', APP_TYPES.map((t): [string, string] => [t, APP_TYPE_LABELS[t]]),
                 'Theme and library applications offer their theme or shared components to other applications (Shared Components → Subscriptions); Create application can start from a boilerplate application.')}
@@ -546,7 +547,7 @@ export async function builderRoutes(app: FastifyInstance) {
                 date_format = $14, timestamp_format = $15, remember_me_days = $16, ldap_directories = $17,
                 header_name = $18, header_auto_create = $19, logout_url = $20, db_auth_roles = $21, db_auth_member_of = $22,
                 custom_auth_function = $23, custom_auth_code = $24, custom_auth_post_code = $25, nav_list = $26, navbar_list = $27,
-                app_type = $28, session_group = $29, updated_at = now() where id = $1`,
+                app_type = $28, session_group = $29, version = $30, updated_at = now() where id = $1`,
         [req.params.id, b.name?.trim(), b.alias?.trim().toLowerCase(), Number(b.home_page) || 1, b.authentication, b.db_role?.trim() || null, b.debug === 'true',
          JSON.stringify({
            base: baseStyleOf({ base: b.base }) === 'standard' ? undefined : baseStyleOf({ base: b.base }),
@@ -579,7 +580,8 @@ export async function builderRoutes(app: FastifyInstance) {
          b.nav_list?.trim().toUpperCase() || null,
          b.navbar_list?.trim().toUpperCase() || null,
          (APP_TYPES as readonly string[]).includes(b.app_type ?? '') ? b.app_type : 'standard',
-         /^[a-z][a-z0-9_]{0,29}$/.test(b.session_group?.trim().toLowerCase() ?? '') ? b.session_group!.trim().toLowerCase() : null],
+         /^[a-z][a-z0-9_]{0,29}$/.test(b.session_group?.trim().toLowerCase() ?? '') ? b.session_group!.trim().toLowerCase() : null,
+         (b.version ?? '').trim().slice(0, 40) || null],
       );
       await saveTimeZoneSettings(req.params.id, b);
       await saveLoginSettings(req.params.id, b);