pgkiln 0.70.0 → 0.72.0

package/src/builder/utilities.ts

@@ -0,0 +1,181 @@
+import type { FastifyInstance } from 'fastify';
+import { unifiedDiff } from '../cli/diff.ts';
+import { owner } from '../db.ts';
+import { appChecksum, ensureSnapshot, pageChecksums, shortSum } from '../history.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { icon, ICONS, LUCIDE_VERSION, lucideNames, searchIcons } from '../icons.ts';
+import { appOfPath } from './locks.ts';
+import { appHeader, BASE, designerUrl, developer, region, select, send, shell, type Req } from './ui.ts';
+
+// (sprint 138, AP-5) App Builder → an application's Utilities (APEX: Application
+// Utilities): one page for what an application's maintenance needs, the tools
+// that existed elsewhere (Advisor, Search, Debug messages, Backups, Activity,
+// Working copies, Export) and the new ones: Database object dependencies
+// (dependencies.ts), Change history (below; recorded by src/history.ts), Upgrade
+// application (upgrade.ts), UI defaults (ui-defaults.ts), the application and
+// page checksums (history.ts) and the icon browser (/builder/icons).
+
+const appOf = async (id: string) => (/^\d{1,9}$/.test(id) ? owner.one('select * from meta.app where id = $1', [id]) : undefined);
+const when = (t: string | null | undefined) => (t ? String(t).slice(0, 16).replace('T', ' ') : '');
+
+/** A unified diff with its added and removed lines marked (escaped). */
+export function diffHtml(path: string, a: string | null | undefined, b: string | null | undefined, names: [string, string]): Raw {
+  const text = unifiedDiff(path, a === null || a === undefined ? undefined : Buffer.from(a), b === null || b === undefined ? undefined : Buffer.from(b), names);
+  return html`<pre class="code-block diff">${text.replace(/\n$/, '').split('\n').map((l) =>
+    l.startsWith('+') && !l.startsWith('+++') ? html`<span class="diff-add">${l}</span>\n` : l.startsWith('-') && !l.startsWith('---') ? html`<span class="diff-del">${l}</span>\n` : html`${l}\n`)}</pre>`;
+}
+
+/** The files of one change as diffs (before → after). */
+function changeDiff(before: Record<string, string> | null, after: Record<string, string> | null): Raw {
+  const paths = [...new Set([...Object.keys(before ?? {}), ...Object.keys(after ?? {})])].sort();
+  return html`${paths.map((p) => (before?.[p] === after?.[p] ? '' : diffHtml(p, before?.[p], after?.[p], ['before', 'after'])))}`;
+}
+
+/** The component of a history row in the builder (a page component opens the page designer). */
+const componentUrl = (appId: number, page: number | null) => (page !== null && page !== undefined && page >= 0 ? designerUrl(appId, page) : `${BASE}/apps/${appId}/shared`);
+
+/** (registered on the root instance, like app-updates.ts) a first snapshot before an application's first recorded change */
+export function historyHooks(app: FastifyInstance) {
+  const snapshotted = new Set<number>();
+  app.addHook('preHandler', async (req) => {
+    if (req.method !== 'POST' || !req.url.startsWith(`${BASE}/`)) return;
+    const target = await appOfPath(req.url).catch(() => null);
+    if (!target || snapshotted.has(target.appId)) return;
+    await ensureSnapshot(target.appId).catch((err) => req.log.warn({ err }, 'app snapshot not taken'));
+    snapshotted.add(target.appId);
+  });
+}
+
+export async function utilityRoutes(app: FastifyInstance) {
+  // ---------------------------------------------------------------- the Utilities page
+  app.get(`${BASE}/apps/:id/utilities`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const a = await appOf(req.params.id);
+    if (!a) return reply.code(404).send('Not found');
+    const doc = (await owner.one('select meta.export_app($1) as d', [a.alias])).d;
+    const sum = appChecksum(doc);
+    const pageSums = pageChecksums(doc);
+    const counts = await owner.one(
+      `select (select count(*) from meta.page where app_id = $1)::int as pages,
+              (select count(*) from meta.region r join meta.page p on p.id = r.page_id where p.app_id = $1)::int as regions,
+              (select count(*) from meta.item i join meta.page p on p.id = i.page_id where p.app_id = $1)::int as items,
+              (select count(*) from meta.process x join meta.page p on p.id = x.page_id where p.app_id = $1)::int as processes,
+              (select count(*) from meta.lov where app_id = $1)::int as lovs,
+              (select count(*) from meta.component_change where app_id = $1 and changed_at > now() - interval '7 days')::int as week`,
+      [a.id],
+    );
+    const pages = (await owner.query<{ page_no: number; name: string }>('select page_no, name from meta.page where app_id = $1 order by page_no', [a.id])).rows;
+    const recent = (await owner.query<{ page_no: number; changed_at: string; changed_by: string | null; n: number }>(
+      `select distinct on (page_no) page_no, changed_at::text, changed_by, count(*) over (partition by page_no)::int as n
+         from meta.component_change where app_id = $1 and page_no is not null order by page_no, changed_at desc`, [a.id])).rows
+      .sort((x, y) => (x.changed_at < y.changed_at ? 1 : -1)).slice(0, 10);
+    const pageName = new Map(pages.map((p) => [p.page_no, p.name]));
+    const card = (href: string, ic: string, title: string, text: string) =>
+      html`<a class="ab-tile" href="${href}"><span class="ab-tile-icon">${icon(ic)}</span><strong>${title}</strong><span>${text}</span></a>`;
+    const u = `${BASE}/apps/${a.id}`;
+    const main = html`${appHeader(a, 'utilities', s)}
+      <div class="ab-tiles ab-tiles-wrap util-tiles">
+        ${card(`${u}/advisor`, 'check', 'Advisor', 'Plans every SQL statement as the application\'s role and checks every reference.')}
+        ${card(`${u}/utilities/dependencies`, 'database', 'Database object dependencies', 'The tables, views, sequences and functions the application uses, missing ones and missing grants.')}
+        ${card(`${u}/utilities/history`, 'history', 'Change history', 'Who changed which component and when, with the differences.')}
+        ${card(`${u}/utilities/upgrade`, 'refresh', 'Upgrade application', 'Components that can use a newer default of this pgkiln version.')}
+        ${card(`${BASE}/ui-defaults`, 'sliders-horizontal', 'UI defaults', 'Labels, format masks, help and lists of values per table column, used by the page wizards.')}
+        ${card(`${u}/search`, 'search', 'Search', 'Names, SQL, conditions, settings and help texts of every component.')}
+        ${card(`${u}/debug`, 'list', 'Debug messages', 'Timed steps of each request and messages from meta.debug().')}
+        ${card(`${u}/activity`, 'activity', 'Activity', 'Page views, errors, sign-ins and the application\'s logs.')}
+        ${card(`${u}/backups`, 'archive', 'Backups', 'Back up now, download and restore earlier versions.')}
+        ${card(`${u}/working-copies`, 'layers', 'Working copies', 'Change a copy, compare it and merge it back.')}
+        ${card(`${u}/export`, 'download', 'Export', `The application as a file (checksum ${shortSum(sum)}).`)}
+        ${card(`${BASE}/icons`, 'image', 'Icons', 'Browse the icons the icon picker offers.')}
+      </div>
+      ${region('Application dashboard', html`<dl class="util-stats">
+          <div><dt>Pages</dt><dd>${counts.pages}</dd></div><div><dt>Regions</dt><dd>${counts.regions}</dd></div>
+          <div><dt>Items</dt><dd>${counts.items}</dd></div><div><dt>Processes</dt><dd>${counts.processes}</dd></div>
+          <div><dt>Lists of values</dt><dd>${counts.lovs}</dd></div><div><dt>Changes in 7 days</dt><dd>${counts.week}</dd></div>
+        </dl>`)}
+      ${region('Recently updated pages', recent.length
+        ? html`<div class="table-wrap"><table class="table report-reflow"><thead><tr><th scope="col">Page</th><th scope="col">Last change</th><th scope="col">By</th><th scope="col">Changes</th></tr></thead><tbody>
+            ${recent.map((r) => html`<tr><td data-label="Page"><a href="${designerUrl(a.id, r.page_no)}">${r.page_no}${pageName.has(r.page_no) ? `: ${pageName.get(r.page_no)}` : ''}</a></td><td data-label="Last change">${when(r.changed_at)}</td>
+              <td data-label="By">${r.changed_by ?? 'command line'}</td><td data-label="Changes"><a href="${u}/utilities/history?page=${r.page_no}">${r.n}</a></td></tr>`)}</tbody></table></div>`
+        : html`<p class="muted u-mt0">No recorded changes yet: the change history starts with the first change after the upgrade to this version.</p>`)}
+      ${region('Application checksum', html`<p class="u-mt0">The checksum of the application's definition (its export without the alias): the same definition gives the same checksum on any installation, so two installations, or an application and its working copy, compare at a glance.</p>
+        <p class="util-sum"><code>${sum}</code></p>
+        <details><summary>Page checksums (${pageSums.size})</summary><div class="table-wrap"><table class="table report-reflow"><thead><tr><th scope="col">Page</th><th scope="col">Checksum</th></tr></thead><tbody>
+          ${[...pageSums].map(([p, h]) => html`<tr><td data-label="Page">${p}${pageName.has(p) ? `: ${pageName.get(p)}` : ''}</td><td data-label="Checksum"><code>${shortSum(h)}</code></td></tr>`)}</tbody></table></div></details>`, '', 'checksum')}`;
+    return send(reply, s, shell(s, `Utilities · ${a.name}`, [['App Builder', BASE], [a.name, u], ['Utilities']], main));
+  });
+
+  // ---------------------------------------------------------------- change history
+  app.get(`${BASE}/apps/:id/utilities/history`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const a = await appOf(req.params.id);
+    if (!a) return reply.code(404).send('Not found');
+    const q = req.query ?? {};
+    const dev = typeof q.dev === 'string' ? q.dev.slice(0, 200) : '';
+    const DATE = /^\d{4}-\d{2}-\d{2}$/;
+    const from = typeof q.from === 'string' && DATE.test(q.from) ? q.from : '';
+    const to = typeof q.to === 'string' && DATE.test(q.to) ? q.to : '';
+    const page = typeof q.page === 'string' && /^-?\d{1,9}$/.test(q.page) ? Number(q.page) : null;
+    const text = typeof q.q === 'string' ? q.q.trim().slice(0, 100) : '';
+    const shown = typeof q.c === 'string' && /^\d{1,18}$/.test(q.c) ? q.c : '';
+    const devs = (await owner.query<{ d: string | null }>('select distinct changed_by as d from meta.component_change where app_id = $1 order by 1 nulls last', [a.id])).rows.map((r) => r.d);
+    const params: unknown[] = [a.id];
+    const where = ['app_id = $1'];
+    const add = (sql: string, v: unknown) => {
+      params.push(v);
+      where.push(sql.replace('?', `$${params.length}`));
+    };
+    if (dev === '(command line)') where.push('changed_by is null');
+    else if (dev) add('changed_by = ?', dev);
+    if (from) add(`changed_at >= ?::date`, from);
+    if (to) add(`changed_at < ?::date + 1`, to);
+    if (page !== null) add('page_no = ?', page);
+    if (text) add(`(label ilike '%' || ? || '%' escape '\\')`, text.replace(/[\\%_]/g, (m) => `\\${m}`));
+    const rows = (await owner.query(
+      `select id::text, component, label, page_no, op, changed_by, source, changed_at::text from meta.component_change
+        where ${where.join(' and ')} order by changed_at desc, id desc limit 500`, params)).rows;
+    const detail = shown ? await owner.one('select id::text, label, page_no, op, before, after, changed_by, source, changed_at::text from meta.component_change where app_id = $1 and id = $2', [a.id, shown]) : null;
+    const keep = new URLSearchParams(Object.entries({ dev, from, to, page: page === null ? '' : String(page), q: text }).filter(([, v]) => v));
+    const link = (id: string) => `?${new URLSearchParams([...keep, ['c', id]])}#change`;
+    const OPS: Record<string, string> = { added: 'tag-info', changed: 'tag-warning', deleted: 'tag-error' };
+    const main = html`${appHeader(a, 'utilities', s)}
+      ${region('Change history', html`<p class="muted u-mt0">Every change made in the builder (and every import, restore or merge) is compared with the application before it: each component that was added, changed or deleted is listed here with who and when. Changes from the command line or the MCP server have no developer.</p>
+        <form method="get" class="util-filters">
+          ${select('dev', 'Developer', dev, [['', 'All'], ...devs.map((d): [string, string] => (d === null ? ['(command line)', 'Command line / import'] : [d, d]))])}
+          <div class="field"><label class="label" for="f_from">From</label><input id="f_from" name="from" type="date" value="${from}"></div>
+          <div class="field"><label class="label" for="f_to">To</label><input id="f_to" name="to" type="date" value="${to}"></div>
+          <div class="field"><label class="label" for="f_page">Page</label><input id="f_page" name="page" type="number" value="${page ?? ''}"></div>
+          <div class="field"><label class="label" for="f_q">Component</label><input id="f_q" name="q" type="search" value="${text}" placeholder="e.g. P3_ID"></div>
+          <div class="buttons"><button class="btn btn-sm">${icon('filter')} Show</button></div></form>
+        ${rows.length
+          ? html`<div class="table-wrap"><table class="table util-history report-reflow"><thead><tr><th scope="col">When</th><th scope="col">Developer</th><th scope="col">Component</th><th scope="col">Change</th><th scope="col">Differences</th></tr></thead><tbody>
+              ${rows.map((r) => html`<tr${r.id === shown ? raw(' aria-current="true"') : ''}><td data-label="When">${when(r.changed_at)}</td><td data-label="Developer">${r.changed_by ?? html`<span class="muted">${r.source === 'import' ? 'import' : 'command line'}</span>`}</td>
+                <td data-label="Component"><a href="${componentUrl(a.id, r.page_no)}">${r.label}</a></td>
+                <td data-label="Change"><span class="tag ${OPS[r.op] ?? ''}">${r.op}</span>${r.source !== 'builder' ? html` <span class="tag">${r.source}</span>` : ''}</td>
+                <td data-label="Differences"><a class="btn btn-sm" href="${link(r.id)}">Show</a></td></tr>`)}</tbody></table></div>`
+          : html`<p class="muted">No changes${where.length > 1 ? ' with these filters' : ' recorded yet'}.</p>`}`)}
+      ${detail ? region(`Differences: ${detail.label}`, html`<p class="muted u-mt0">${detail.op} by ${detail.changed_by ?? 'the command line'}, ${when(detail.changed_at)}. Lines with <code>-</code> are before the change, lines with <code>+</code> after it.</p>${changeDiff(detail.before, detail.after)}`, '', 'change') : ''}`;
+    return send(reply, s, shell(s, `Change history · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Utilities', `${BASE}/apps/${a.id}/utilities`], ['Change history']], main));
+  });
+
+  // ---------------------------------------------------------------- icons
+  app.get(`${BASE}/icons`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const q = typeof req.query?.q === 'string' ? req.query.q.trim().slice(0, 60) : '';
+    const needle = q.toLowerCase().replace(/^fa-/, '');
+    const own = (ICONS as readonly string[]).filter((n) => !needle || n.includes(needle));
+    const lucide = needle ? searchIcons(q, 300) : [];
+    const tile = (n: string) => html`<li><span class="icon-tile">${icon(n, 'icon icon-2x')}<code>${n}</code></span></li>`;
+    const main = html`<h1 class="u-mb1">Icons</h1>
+      ${region('Icon browser', html`<p class="muted u-mt0">The icons of the icon picker: pgkiln's own set and ${String(lucideNames().size)} Lucide icons (${LUCIDE_VERSION}, ISC licence). Use the name in an icon field; modifiers such as <code>lg</code>, <code>spin</code> or <code>success</code> may follow it (e.g. <code>truck lg success</code>), and Font APEX names work where Lucide has the same icon (<code>fa-users</code>).</p>
+        <form method="get" role="search" class="util-filters"><div class="field"><label class="label" for="f_icon_q">Search</label><input id="f_icon_q" name="q" type="search" value="${q}" placeholder="e.g. truck, money, arrow"></div>
+          <div class="buttons"><button class="btn btn-sm">${icon('search')} Search</button></div></form>
+        <h3>pgkiln (${own.length})</h3><ul class="util-icons">${own.map(tile)}</ul>
+        ${needle ? html`<h3>Lucide (${lucide.length}${lucide.length === 300 ? '+' : ''})</h3>${lucide.length ? html`<ul class="util-icons">${lucide.map(tile)}</ul>` : html`<p class="muted">No Lucide icon matches.</p>`}`
+          : html`<p class="muted">Search to see the matching Lucide icons.</p>`}`)}`;
+    return send(reply, s, shell(s, 'Icons', [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], ['Icons']], main));
+  });
+}

package/src/builder/wizards.ts

@@ -3,6 +3,7 @@ import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 import { ICONS } from '../icons.ts';
 import { appOr404 } from './forms.ts';
+import { addDashboard } from './appsheets.ts';
 import { appHeader, back, BASE, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
 
 // Create page wizards (APEX: Create Page). Step 1, on the app's Pages tab,
@@ -23,7 +24,32 @@ export const WIZARD_KINDS: [string, string, string][] = [
   ['facets', 'Faceted search', 'A report with a filter panel: values with counts, ranges and a search field.'],
   ['master_detail', 'Master detail', 'A grid of the table and, below it, an editable grid of the selected row\'s details.'],
 ];
-const KINDS = new Set(WIZARD_KINDS.map((k) => k[0]));
+/**
+ * (sprint 137, AP-3) The page types that reuse other regions (APEX: Create a Page → Component), made by the same
+ * meta.generate_page (migration 137), and the dashboard (addDashboard). WIZARD_KINDS above stay the types the
+ * AI path and blueprints propose.
+ */
+export const MORE_KINDS: [string, string, string][] = [
+  ['report', 'Interactive report', 'An interactive report of the table on its own page, optionally with a modal form page.'],
+  ['smart_filters', 'Smart filters', 'An interactive report with one search field above it that suggests filters (chips) from the columns.'],
+  ['search', 'Search page', 'A search region over the application\'s search configurations, or a new one on a table.'],
+  ['data_load', 'Data loading', 'A data load definition for the table and a page where users upload a CSV, Excel, JSON or XML file into it.'],
+  ['tree', 'Tree', 'The rows as a tree: an id, a parent (from a foreign key to the table itself) and a label.'],
+  ['timeline', 'Timeline', 'Rows as events on a vertical line: when, who, a title and a text (template component Timeline).'],
+  ['media_list', 'Media list', 'Rows with initials, a title, a description and a badge (template component Media list).'],
+  ['content_row', 'Content row', 'Rows with initials, a title and a description, and a secondary text and a badge on the right (template component Content row).'],
+  ['comments', 'Comments', 'Rows as a conversation: who wrote what and when (template component Comments).'],
+  ['dashboard', 'Dashboard', 'Charts of the application\'s tables, chosen from the data like a new application\'s dashboard.'],
+  ['wizard', 'Wizard', 'A form over several steps, one page per step with a progress list, Previous and Next; Finish adds the row.'],
+  ['tasks', 'Unified task list', 'The approval and action tasks of the signed-in user (a task list region).'],
+  ['workflows', 'Workflow console', 'The workflows the user started or administers, with their state and history.'],
+];
+/** All the page types step 2 knows: [key, label, description]. */
+export const PAGE_KINDS: [string, string, string][] = [...WIZARD_KINDS, ...MORE_KINDS];
+const KINDS = new Set(PAGE_KINDS.map((k) => k[0]));
+/** Page types that need no table (search takes one optionally, for a new search configuration). */
+export const NO_TABLE = new Set(['search', 'tasks', 'workflows', 'dashboard']);
+const TASK_CONTEXTS: [string, string][] = [['my', 'My tasks (to act on or claim)'], ['initiated', 'Tasks I requested'], ['admin', 'Tasks I administer']];
 const CHART_KINDS = ['bar', 'column', 'line', 'area', 'donut', 'pie', 'funnel'];
 const FUNCTIONS: [string, string][] = [['count', 'Count'], ['sum', 'Sum'], ['avg', 'Average'], ['min', 'Minimum'], ['max', 'Maximum']];
 
@@ -110,6 +136,55 @@ export function wizardOptions(kind: string, b: Record<string, unknown>) {
       o.search = b.search === 'true';
       o.form_page = formPage();
       break;
+    // (137) the page types of migration 137
+    case 'report':
+      o.form_page = formPage();
+      break;
+    case 'smart_filters':
+      o.facets = list(b.facets);
+      o.form_page = formPage();
+      break;
+    case 'tree':
+      for (const k of ['id_column', 'parent_column', 'label_column']) o[k] = str(k) || null;
+      o.expanded = /^\d{1,2}$/.test(str('expanded')) ? Number(str('expanded')) : 1;
+      o.form_page = formPage();
+      break;
+    case 'timeline':
+      for (const k of ['title', 'when', 'who', 'body']) o[k] = str(k) || null;
+      o.form_page = formPage();
+      break;
+    case 'media_list':
+    case 'content_row':
+      for (const k of ['title', 'description', 'badge', ...(kind === 'content_row' ? ['misc'] : [])]) o[k] = str(k) || null;
+      o.form_page = formPage();
+      break;
+    case 'comments':
+      for (const k of ['user', 'date', 'comment']) o[k] = str(k) || null;
+      break;
+    case 'data_load':
+      o.definition = str('definition').toUpperCase() || null;
+      o.mode = ['append', 'merge', 'replace'].includes(str('mode')) ? str('mode') : 'append';
+      o.skip_errors = b.skip_errors === 'true';
+      break;
+    case 'wizard':
+      o.columns = list(b.columns);
+      o.steps = /^\d{1,2}$/.test(str('steps')) ? Number(str('steps')) : 2;
+      o.return_page = pageNo(b.return_page);
+      break;
+    case 'search':
+      o.configs = list(b.configs).map((c) => c.toUpperCase());
+      o.form_page = formPage();
+      break;
+    case 'tasks':
+      o.context = TASK_CONTEXTS.some(([c]) => c === str('context')) ? str('context') : 'my';
+      o.completed = b.completed === 'true';
+      break;
+    case 'workflows':
+      o.context = str('context') === 'admin' ? 'admin' : 'initiator';
+      break;
+    case 'dashboard':
+      o.tables = list(b.tables);
+      break;
     case 'master_detail': {
       const d = str('detail');
       const at = d.lastIndexOf('|');
@@ -130,30 +205,31 @@ export async function wizardRoutes(app: FastifyInstance) {
     if (!a) return reply.code(404).send('Not found');
     const kind = String(req.query.kind ?? '');
     const table = String(req.query.table ?? '');
-    const rel = KINDS.has(kind) && table
+    const rel = KINDS.has(kind) && table && kind !== 'dashboard'
       ? await owner.one<{ t: string; relkind: string }>(
           `select meta.wizard_qname(c.oid) as t, c.relkind::text from pg_class c join pg_namespace n on n.oid = c.relnamespace
             where c.oid = to_regclass($1) and c.relkind in ('r', 'p', 'v', 'm') and n.nspname !~ '^pg_' and n.nspname not in ('information_schema', 'meta')`,
           [table],
         )
       : null;
-    if (!rel) {
+    if (!rel && !(NO_TABLE.has(kind) && !table)) {
       flash(s, KINDS.has(kind) ? 'Choose a table or view.' : 'Choose a page type.', 'error');
-      return back(reply, s, `${BASE}/apps/${a.id}`);
+      // (137) back to the type's table step on the Create page grid
+      return back(reply, s, KINDS.has(kind) ? `${BASE}/apps/${a.id}/create-page?type=${encodeURIComponent(kind)}` : `${BASE}/apps/${a.id}/create-page`);
     }
     const [cols, defaults] = await Promise.all([
-      owner.query<Col>('select * from meta.wizard_catalog($1::regclass)', [rel.t]).then((r) => r.rows),
-      owner.one<{ d: Record<string, any> }>('select meta.wizard_defaults($1, $2::regclass) as d', [kind, rel.t]).then((r) => r?.d ?? {}),
+      rel ? owner.query<Col>('select * from meta.wizard_catalog($1::regclass)', [rel.t]).then((r) => r.rows) : Promise.resolve([] as Col[]),
+      owner.one<{ d: Record<string, any> }>('select meta.wizard_defaults($1, $2::regclass) as d', [kind, rel?.t ?? null]).then((r) => r?.d ?? {}),
     ]);
     const nextPage = await freePage(a.id, Math.max(0, ...(await owner.query('select page_no from meta.page where app_id = $1', [a.id])).rows.map((p) => p.page_no)) + 1);
     const pk = cols.find((c) => c.is_pk)?.column_name ?? null;
     const role = a.db_role as string | null;
-    const access = role
+    const access = role && rel
       ? await owner.one<{ s: boolean; i: boolean; u: boolean; d: boolean }>(
           `select has_table_privilege($1, $2::regclass, 'select') as s, has_table_privilege($1, $2::regclass, 'insert') as i,
                   has_table_privilege($1, $2::regclass, 'update') as u, has_table_privilege($1, $2::regclass, 'delete') as d
             where exists (select 1 from pg_roles where rolname = $1)`,
-          [role, rel.t],
+          [role, rel!.t],
         )
       : null;
 
@@ -171,6 +247,8 @@ export async function wizardRoutes(app: FastifyInstance) {
       )}</div></fieldset>`;
     const formPage = (help: string) => input('form_page', 'Form page', '', { type: 'number', placeholder: `e.g. ${nextPage + 1} (empty: no form)`, help });
     const needsPk = ['report_form', 'grid', 'form', 'master_detail'].includes(kind);
+    const allCols = (c: Col) => c.kind !== 'binary';
+    const dates = (c: Col) => c.kind === 'date' || c.kind === 'timestamp';
 
     let fields: Raw | string = '';
     switch (kind) {
@@ -228,43 +306,134 @@ export async function wizardRoutes(app: FastifyInstance) {
           ${check('search', 'A search field above the facets', defaults.search !== false)}
           ${pk ? html`<div class="form-grid">${formPage('A modal form page, linked from each row, and a Create button.')}</div>` : ''}`;
         break;
+      // (137) the page types of migration 137
+      case 'report':
+        fields = pk ? html`<div class="form-grid">${formPage('A modal form page, linked from each row, and a Create button.')}</div>` : '';
+        break;
+      case 'smart_filters':
+        fields = html`
+          ${colChecks('facets', 'Filters (suggested in the search field)', defaults.facets ?? [], (c) => notBinary(c) && c.kind !== 'point' && c.kind !== 'other', (c) => (c.fk_table ? `: values of ${c.fk_table}.${c.fk_display ?? c.column_name}` : ['number', 'date', 'timestamp'].includes(c.kind) ? ': ranges' : ': values'))}
+          ${pk ? html`<div class="form-grid">${formPage('A modal form page, linked from each row, and a Create button.')}</div>` : ''}`;
+        break;
+      case 'tree':
+        fields = html`<div class="form-grid">
+            ${select('id_column', 'Node id', defaults.id_column ?? '', colOpts(allCols, false), 'What identifies a node: usually the primary key.')}
+            ${select('parent_column', 'Parent', defaults.parent_column ?? '', colOpts(allCols), 'The column with the parent node\'s id; proposed from a foreign key to the table itself. Rows whose parent is not in the table are the top level.')}
+            ${select('label_column', 'Label', defaults.label_column ?? '', colOpts(notBinary, false))}
+            ${input('expanded', 'Levels open at first', defaults.expanded ?? 1, { type: 'number' })}
+            ${pk ? formPage('A modal form page, opened by clicking a node.') : ''}
+          </div>`;
+        break;
+      case 'timeline':
+        fields = html`<div class="form-grid">
+            ${select('title', 'Title', defaults.title ?? '', colOpts(notBinary, false))}
+            ${select('when', 'When', defaults.when ?? '', colOpts(dates), 'The events come newest first.')}
+            ${select('who', 'Who', defaults.who ?? '', colOpts(notBinary))}
+            ${select('body', 'Text', defaults.body ?? '', colOpts(notBinary))}
+            ${pk ? formPage('A modal form page, linked from each title.') : ''}
+          </div>`;
+        break;
+      case 'media_list':
+      case 'content_row':
+        fields = html`<div class="form-grid">
+            ${select('title', 'Title', defaults.title ?? '', colOpts(notBinary, false), 'Its first two letters are the initials.')}
+            ${select('description', 'Description', defaults.description ?? '', colOpts(notBinary))}
+            ${kind === 'content_row' ? select('misc', 'Secondary text (on the right)', defaults.misc ?? '', colOpts(notBinary)) : ''}
+            ${select('badge', 'Badge', defaults.badge ?? '', colOpts(notBinary))}
+            ${pk ? formPage('A modal form page, linked from each title.') : ''}
+          </div>`;
+        break;
+      case 'comments':
+        fields = html`<div class="form-grid">
+            ${select('user', 'Who wrote it', defaults.user ?? '', colOpts(notBinary))}
+            ${select('date', 'When', defaults.date ?? '', colOpts(dates), 'The newest first.')}
+            ${select('comment', 'Comment', defaults.comment ?? '', colOpts(notBinary, false))}
+          </div>`;
+        break;
+      case 'data_load': {
+        const defs = (await owner.query<{ name: string; table_name: string }>('select name, table_name from meta.data_load_def where app_id = $1 order by name', [a.id])).rows;
+        fields = html`<div class="form-grid">
+            ${input('definition', 'Data load definition', defaults.definition ?? '', { required: true, help: `Upper case, e.g. ORDERS_LOAD. A new definition for ${rel?.t ?? 'the table'}; an existing one of that name is used as it is${defs.length ? ` (this application has ${defs.map((d) => d.name).join(', ')})` : ''}.` })}
+            ${select('mode', 'Mode', defaults.mode ?? 'append', [['append', 'Append: add the rows'], ['merge', 'Merge: update rows with the same key, add the others'], ['replace', 'Replace: delete all rows first']])}
+          </div>
+          ${check('skip_errors', 'Skip rows with errors', !!defaults.skip_errors, 'Load the good rows and list the others; otherwise nothing is loaded when a row fails.')}`;
+        break;
+      }
+      case 'wizard':
+        fields = html`<div class="form-grid">
+            ${input('steps', 'Steps', defaults.steps ?? 2, { type: 'number', help: 'One page per step, numbered from the page number up; the columns are shared out in order.' })}
+            ${input('return_page', 'After Finish or Cancel, go to page', defaults.return_page ?? '', { type: 'number', placeholder: a.home_page ? `empty: the home page (${a.home_page})` : 'empty: this page' })}
+          </div>
+          ${colChecks('columns', 'Columns', defaults.columns ?? [], (c) => !c.is_pk && !c.generated && c.kind !== 'binary' && c.kind !== 'geometry', (c) => (c.not_null && !c.has_default ? ', required: always included' : c.fk_table ? `, a select list of ${c.fk_table}` : ''))}`;
+        break;
+      case 'search': {
+        const configs = (await owner.query<{ name: string; label: string; source: string }>('select name, label, source from meta.search_config where app_id = $1 order by seq, name', [a.id])).rows;
+        const tables = await wizardTables(role);
+        fields = html`
+          ${configs.length
+            ? html`<fieldset class="prop-group"><legend>Search configurations</legend><div class="qb-pick">${configs.map((c) => html`<label class="check"><input type="checkbox" name="configs" value="${c.name}" checked> ${c.label} <span class="muted small">${c.name}, ${c.source.slice(0, 60)}</span></label>`)}</div></fieldset>`
+            : html`<p class="muted">This application has no search configurations yet (<a href="${BASE}/apps/${a.id}/shared?type=search_config">Shared Components → Search configurations</a>): choose a table to search below.</p>`}
+          <div class="form-grid">
+            ${select('table', 'And a new configuration on', rel?.t ?? '', [['', '- none -'], ...tables.filter((t) => t.access).map((t): [string, string] => [t.t, t.t])], 'Searches the table\'s text columns and shows its name (or first text) column as the result\'s title.')}
+            ${formPage('With a table: a modal form page that each result links to.')}
+          </div>`;
+        break;
+      }
+      case 'tasks':
+        fields = html`<div class="form-grid">${select('context', 'Show', defaults.context ?? 'my', TASK_CONTEXTS)}</div>
+          ${check('completed', 'Also completed tasks', !!defaults.completed)}
+          <p class="muted small">Tasks come from task definitions (Shared Components → Task definitions) and approvals started in processes or workflows.</p>`;
+        break;
+      case 'workflows':
+        fields = html`<div class="form-grid">${select('context', 'Show', defaults.context ?? 'initiator', [['initiator', 'The workflows the user started'], ['admin', 'The workflows the user administers']])}</div>`;
+        break;
+      case 'dashboard': {
+        const tables = (await wizardTables(role)).filter((t) => t.access);
+        fields = tables.length
+          ? html`<fieldset class="prop-group"><legend>Tables</legend><div class="qb-pick">${tables.map((t, n) => html`<label class="check"><input type="checkbox" name="tables" value="${t.t}"${n < 12 ? raw(' checked') : ''}> ${t.t}</label>`)}</div></fieldset>
+              <p class="muted small">A chart per table (at most six) of the rows per parent row or per repeating value, read from the data; tables with row level security are left out.</p>`
+          : html`<p class="alert alert-error" role="status">The application's database role can't read any table.</p>`;
+        break;
+      }
       case 'master_detail': {
+        const t = rel!.t;
         const details = (
           await owner.query<{ t: string; col: string }>(
             `select meta.wizard_qname(con.conrelid) as t, a.attname::text as col
                from pg_constraint con join pg_attribute a on a.attrelid = con.conrelid and a.attnum = con.conkey[1]
               where con.confrelid = $1::regclass and con.contype = 'f' and con.conrelid <> con.confrelid and array_length(con.conkey, 1) = 1
               order by 1, 2`,
-            [rel.t],
+            [t],
           )
         ).rows;
         fields = details.length
-          ? select('detail', 'Detail table', defaults.detail ? `${defaults.detail}|${defaults.detail_column}` : '', details.map((d): [string, string] => [`${d.t}|${d.col}`, `${d.t} (${d.col} → ${rel.t})`]), 'Tables with a foreign key to this table. Selecting a master row shows its details; new detail rows get the master\'s key.')
-          : html`<p class="alert alert-error" role="status">No table has a foreign key to ${rel.t}: a master-detail page needs one.</p>`;
+          ? select('detail', 'Detail table', defaults.detail ? `${defaults.detail}|${defaults.detail_column}` : '', details.map((d): [string, string] => [`${d.t}|${d.col}`, `${d.t} (${d.col} → ${t})`]), 'Tables with a foreign key to this table. Selecting a master row shows its details; new detail rows get the master\'s key.')
+          : html`<p class="alert alert-error" role="status">No table has a foreign key to ${t}: a master-detail page needs one.</p>`;
         break;
       }
     }
 
-    const kindName = WIZARD_KINDS.find((k) => k[0] === kind)![1];
+    const kindDef = PAGE_KINDS.find((k) => k[0] === kind)!;
+    const kindName = kindDef[1];
     const main = html`${appHeader(a, 'pages', s)}
-      ${region(`${kindName} on ${rel.t}`, html`
-        <p class="muted u-mt0">${WIZARD_KINDS.find((k) => k[0] === kind)![2]} The proposals come from the table's columns, key and foreign keys; change them below. <a href="${BASE}/apps/${a.id}">Back to choose another type or table</a>.</p>
-        ${needsPk && !pk ? html`<p class="alert alert-error" role="status">${rel.t} has no single-column primary key, which this page type needs.</p>` : ''}
-        ${role && access && !(access.s && (!needsPk || (access.i && access.u && access.d)))
-          ? html`<p class="alert alert-error" role="status">The application's database role <code>${role}</code> ${access.s ? 'can read but not change' : 'has no access to'} ${rel.t}: grant it the privileges the page needs (${needsPk ? 'select, insert, update, delete' : 'select'}).</p>`
+      ${region(rel && kind !== 'search' ? `${kindName} on ${rel.t}` : kindName, html`
+        <p class="muted u-mt0">${kindDef[2]} ${rel ? 'The proposals come from the table\'s columns, key and foreign keys; change them below.' : ''} <a href="${BASE}/apps/${a.id}/create-page">Back to choose another type${rel ? ' or table' : ''}</a>.</p>
+        ${rel && needsPk && !pk ? html`<p class="alert alert-error" role="status">${rel.t} has no single-column primary key, which this page type needs.</p>` : ''}
+        ${rel && role && access && !(access.s && (!(needsPk || kind === 'wizard' || kind === 'data_load') || (access.i && (kind === 'wizard' || (access.u && access.d)))))
+          ? html`<p class="alert alert-error" role="status">The application's database role <code>${role}</code> ${access.s ? 'can read but not change' : 'has no access to'} ${rel.t}: grant it the privileges the page needs (${needsPk ? 'select, insert, update, delete' : kind === 'wizard' ? 'select, insert' : kind === 'data_load' ? 'select, insert, update, delete for merge or replace' : 'select'}).</p>`
           : ''}
         <form method="post" action="${BASE}/apps/${a.id}/wizard">${csrf(s)}
-          <input type="hidden" name="kind" value="${kind}"><input type="hidden" name="table" value="${rel.t}">
+          <input type="hidden" name="kind" value="${kind}">${rel && kind !== 'search' ? html`<input type="hidden" name="table" value="${rel.t}">` : ''}
           <div class="form-grid">
             ${input('report_page', 'Page number', nextPage, { type: 'number', required: true })}
             ${input('label', 'Name', defaults.label ?? '', { help: 'The page title and the navigation entry.' })}
             ${select('icon', 'Menu icon', defaults.icon ?? 'table', [...ICONS])}
           </div>
-          ${['report_form', 'grid'].includes(kind) ? '' : check('nav', 'Add a navigation entry', !!defaults.nav)}
+          ${['report_form', 'grid', 'dashboard'].includes(kind) ? '' : check('nav', 'Add a navigation entry', !!defaults.nav)}
           ${fields}
           <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}">Cancel</a><button class="btn btn-hot">Create page</button></div>
         </form>`)}`;
-    return send(reply, s, shell(s, `Create page · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], [`Create ${kindName.toLowerCase()} page`]], main));
+    return send(reply, s, shell(s, `Create page · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', `${BASE}/apps/${a.id}/create-page`], [kindName]], main));
   });
 
   app.post(`${BASE}/apps/:id/wizard`, async (req: Req, reply) => {
@@ -272,26 +441,42 @@ export async function wizardRoutes(app: FastifyInstance) {
     if (!s) return;
     const b = (req.body ?? {}) as Record<string, unknown>;
     const kind = KINDS.has(String(b.kind)) ? String(b.kind) : 'report_form';
-    const table = String(b.table ?? '');
-    const retry = `${BASE}/apps/${req.params.id}/wizard?kind=${encodeURIComponent(kind)}&table=${encodeURIComponent(table)}`;
+    const table = kind === 'dashboard' || kind === 'tasks' || kind === 'workflows' ? '' : String(b.table ?? '');
+    const retry = `${BASE}/apps/${req.params.id}/wizard?kind=${encodeURIComponent(kind)}${table && kind !== 'search' ? `&table=${encodeURIComponent(table)}` : ''}`;
     try {
       const page = pageNo(b.report_page);
       if (page === null) throw new Error('Enter a page number.');
       const options = wizardOptions(kind, b);
+      if (!table && !NO_TABLE.has(kind)) throw new Error('Choose a table or view.');
       const id = await owner.tx(async (c) => {
-        const a = await c.query('select alias from meta.app where id = $1', [req.params.id]);
+        const a = await c.query('select alias, db_role from meta.app where id = $1', [req.params.id]);
         if (!a.rowCount) throw new Error('This application does not exist.');
         // report and form and grid keep their own icons and need no step 2 (older forms post here directly)
         if (kind === 'report_form' && options.form_page === null) throw new Error('Enter the form page number.');
         if (['report_form', 'grid'].includes(kind) && !options.icon) options.icon = kind === 'grid' ? 'grid' : 'table';
-        return (await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb) as id', [a.rows[0].alias, kind, table, page, JSON.stringify(options)])).rows[0].id as number;
+        if (kind === 'dashboard') {
+          // (137) only tables the application's role can read
+          const readable = new Set((await wizardTables(a.rows[0].db_role)).filter((t) => t.access).map((t) => t.t));
+          const tables = (options.tables as string[]).filter((t) => readable.has(t));
+          if (!tables.length) throw new Error('Choose at least one table the application can read.');
+          const made = await addDashboard(c, a.rows[0].alias, tables, page);
+          if (!made) throw new Error('None of these tables has a column worth a chart (a foreign key, or values that repeat).');
+          const pid = (await c.query('select id from meta.page where app_id = $1 and page_no = $2', [req.params.id, page])).rows[0].id as number;
+          if (options.label) {
+            await c.query('update meta.page set name = $2, title = $2 where id = $1', [pid, options.label]);
+            await c.query('update meta.nav_entry set label = $3 where app_id = $1 and target_page = $2', [req.params.id, page, options.label]);
+          }
+          if (options.icon) await c.query('update meta.nav_entry set icon = $3 where app_id = $1 and target_page = $2', [req.params.id, page, options.icon]);
+          return pid;
+        }
+        return (await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb) as id', [a.rows[0].alias, kind, table || null, page, JSON.stringify(options)])).rows[0].id as number;
       });
       const pages = (await owner.query('select page_no from meta.page where app_id = $1 and id >= $2 order by page_no', [req.params.id, id])).rows.map((r) => r.page_no);
-      flash(s, `${pages.length > 1 ? `Pages ${pages.join(' and ')}` : `Page ${page}`} created for ${table}. Make sure the app's database role has privileges on it.`);
+      flash(s, `${pages.length > 1 ? `Pages ${pages.join(', ')}` : `Page ${page}`} created${table ? ` for ${table}. Make sure the app's database role has privileges on it` : ''}.`);
       return back(reply, s, `${BASE}/pages/${id}`);
     } catch (e) {
       flash(s, (e as Error).message, 'error');
-      return back(reply, s, KINDS.has(String(b.kind)) && table ? retry : `${BASE}/apps/${req.params.id}`);
+      return back(reply, s, KINDS.has(String(b.kind)) && (table || NO_TABLE.has(kind)) ? retry : `${BASE}/apps/${req.params.id}`);
     }
   });
 }

package/src/builder/workspaces.ts

@@ -385,7 +385,8 @@ export async function workspaceRoutes(app: FastifyInstance) {
             <div class="buttons"><button class="btn">${tx('wsp.save_devs')}</button></div></form>`)}
       </div>
       ${serviceRegion(s, w)}
-      ${region(tx('wsp.mail_net'), html`<p class="u-mt0">${tx.rich('wsp.mail_net_text', { mail: html`<a href="${BASE}/workspaces/${w.id}/mail">${tx('wsp.mail_service')}</a>`, network: html`<a href="${BASE}/network?ws=${w.id}">${tx('wsp.network')}</a>`, queue: html`<a href="${BASE}/mail-queue${full ? `?ws=${w.id}` : ''}">${tx('wsp.queue')}</a>` })}</p>`, '', 'mail-network')}
+      ${region(tx('wsp.mail_net'), html`<p class="u-mt0">${tx.rich('wsp.mail_net_text', { mail: html`<a href="${BASE}/workspaces/${w.id}/mail">${tx('wsp.mail_service')}</a>`, network: html`<a href="${BASE}/network?ws=${w.id}">${tx('wsp.network')}</a>`, queue: html`<a href="${BASE}/mail-queue${full ? `?ws=${w.id}` : ''}">${tx('wsp.queue')}</a>` })}</p>
+        <p>${tx.rich('wsp.telemetry_text', { link: html`<a href="${BASE}/workspaces/${w.id}/telemetry">${tx('wsp.telemetry')}</a>` })}</p>`, '', 'mail-network')}
       <div class="columns">${preferencesRegion(s, w, without, unlinked)}${linksRegion(s, w, links)}</div>
       ${full ? isolationRegion(s, w, roles.rows) : region(tx('wsp.isolation'), html`<p class="u-mt0">${w.isolated ? tx('wsp.iso_short_on') : tx('wsp.iso_short_off')} ${tx('wsp.admins_change')}</p>`)}
       ${!full ? '' : region(tx('wsp.applications'), html`<div class="table-wrap"><table class="report report-reflow">

package/src/cli/replace.ts

@@ -12,6 +12,7 @@
 import { randomBytes } from 'node:crypto';
 import type pg from 'pg';
 import { regionKeys } from '../appfiles.ts';
+import { ensureSnapshot, recordHistory } from '../history.ts';
 
 /** Tables of an application that are its definition: replaced. */
 export const REPLACED = [
@@ -86,7 +87,10 @@ export const KEPT = ['app_access', 'api_client', 'session', 'sso_pending', 'save
   // (126) outgoing calls the network access lists refused (Administration → Network access; a log, 7 days)
   'network_refusal',
   // (136) rows queued for their embeddings (the vector providers travel in meta.app)
-  'embedding_queue'];
+  'embedding_queue',
+  // (138) the change history and the snapshot it compares with (this installation's record)
+  'app_snapshot', 'component_change',
+];
 /** Children of pages (replaced with their page). */
 const PAGE_CHILDREN = ['region', 'item', 'button', 'dynamic_action', 'validation', 'process', 'computation', 'branch'];
 /** References into replaced tables from kept data, repointed below: "table.column". */
@@ -140,6 +144,9 @@ export async function replaceApp(db: Db, doc: unknown, alias: string, opts: Repl
   const target = (await db.query<{ id: number }>('select id from meta.app where alias = $1 for update', [alias])).rows[0];
   if (!target) throw new Error(`application ${alias} not found`);
   const old = target.id;
+  // (sprint 138) the change history compares the application before and after (src/history.ts); not on a bare pool
+  const inTx = !('totalCount' in db);
+  if (inTx) await ensureSnapshot(old, db as pg.ClientBase);
   const backup = opts.backup === undefined ? { reason: 'import' as const } : opts.backup;
   if (backup) await db.query('select meta.backup_app($1, $2, $3, $4)', [old, backup.reason, backup.user ?? null, backup.note ?? null]);
   const tmpAlias = `pgkiln-replace-${randomBytes(6).toString('hex')}`;
@@ -251,5 +258,6 @@ export async function replaceApp(db: Db, doc: unknown, alias: string, opts: Repl
     [old, neu],
   );
   await db.query('delete from meta.app where id = $1', [neu]);
+  if (inTx) await recordHistory(old, opts.backup ? (opts.backup.user ?? null) : null, 'import', db as pg.ClientBase).catch(() => {});
   return old;
 }