pgkiln 0.40.0 → 0.42.0

package/public/app.js

@@ -828,6 +828,15 @@ const pgkilnUnsaved = (() => {
     });
     drawer.addEventListener('change', () => toggle.setAttribute('aria-expanded', String(navOpen())));
   }
+  // (097) a long menu shows the current page's entry: the menu scrolls, not the page
+  {
+    const nav = document.getElementById('t-nav');
+    const current = nav?.querySelector('a[aria-current="page"]');
+    if (nav && current && nav.scrollHeight > nav.clientHeight) {
+      const top = current.getBoundingClientRect().top - nav.getBoundingClientRect().top;
+      if (top < 0 || top + current.offsetHeight > nav.clientHeight) nav.scrollTop += top - nav.clientHeight / 3;
+    }
+  }
 
   // ------------------------------------------------------------ modal dialogs
   const POSITIONS = ['center', 'left', 'right', 'top', 'bottom'];
@@ -972,6 +981,132 @@ const pgkilnUnsaved = (() => {
     }
   });
 
+  // ------------------------------------------------------------ Gantt chart drag and drop (sprint 69)
+  // An editable Gantt chart (.gantt-editable, data-gantt = its region) has tasks with
+  // data-task, data-start and data-end (wall clock ms, read as UTC). Dragging a task moves
+  // it, dragging a bar's end handle changes its end, in whole days or hours (data-snap);
+  // from the keyboard the arrow keys do the same (Shift: the end), Enter saves, Escape
+  // cancels. The server checks and saves the new dates and sends the chart back.
+  const GANTT_STEP = { day: 86400000, hour: 3600000 };
+  const ganttWhen = (ms, snap) => new Date(ms).toISOString().slice(0, snap === 'hour' ? 16 : 10);
+  const ganttState = new WeakMap();
+  function ganttPreview(task, steps, mode) {
+    const chart = task.closest('.gantt-editable');
+    const plot = chart.querySelector('.gantt-plot');
+    const step = GANTT_STEP[chart.dataset.snap] || GANTT_STEP.day;
+    const span = Number(chart.dataset.hi) - Number(chart.dataset.lo);
+    const start = Number(task.dataset.start);
+    const end = Number(task.dataset.end);
+    const prev = ganttState.get(task);
+    // the bar's width before this edit (the preview changes it)
+    const orig = prev ? prev.orig : task.getBoundingClientRect().width;
+    // a bar's end never goes before its start; a milestone only moves
+    const resize = mode === 'end' && task.classList.contains('gantt-bar');
+    if (resize) steps = Math.max(steps, Math.round((start - end) / step));
+    const next = resize ? { start, end: end + steps * step } : { start: start + steps * step, end: end + steps * step };
+    const px = (ms) => (ms / span) * plot.getBoundingClientRect().width;
+    // (translate, not transform: a milestone is a rotated square)
+    task.style.translate = !resize && steps ? `${px(steps * step)}px 0` : '';
+    task.style.width = resize && steps ? `${Math.max(orig + px(steps * step), 2)}px` : '';
+    ganttState.set(task, { steps, mode: resize ? 'end' : 'move', next, orig, keyboard: prev?.keyboard });
+    task.classList.toggle('gantt-moving', !!steps);
+    const status = chart.closest('.region')?.querySelector('.gantt-status');
+    if (status) status.textContent = steps ? `${task.dataset.label}: ${ganttWhen(next.start, chart.dataset.snap).replace('T', ' ')} – ${ganttWhen(next.end, chart.dataset.snap).replace('T', ' ')}` : '';
+    return next;
+  }
+  function ganttReset(task) {
+    task.style.translate = '';
+    task.style.width = '';
+    const status = task.closest('.region')?.querySelector('.gantt-status');
+    if (status) status.textContent = '';
+    task.classList.remove('gantt-moving', 'gantt-dragging');
+    ganttState.delete(task);
+  }
+  async function ganttSave(task) {
+    const st = ganttState.get(task);
+    if (!st || !st.steps) return ganttReset(task);
+    const chart = task.closest('.gantt-editable');
+    const region = chart.closest('.region');
+    const id = task.dataset.task;
+    const snap = chart.dataset.snap;
+    chart.setAttribute('aria-busy', 'true');
+    try {
+      const res = await post(`/chart/${chart.dataset.gantt}/move`, { task: id, start: ganttWhen(st.next.start, snap), end: ganttWhen(st.next.end, snap) });
+      const sheet = document.getElementById('pgkiln-css')?.sheet;
+      if (sheet && res.css) for (const rule of res.css.split('\n')) if (rule) sheet.insertRule(rule, sheet.cssRules.length);
+      const node = region ? replaceHtml(region, res.region) : null;
+      const status = node?.querySelector('.gantt-status');
+      if (status) status.textContent = res.message;
+      // keyboard users keep their place
+      if (st.keyboard) node?.querySelector(`.gantt-editable [data-task="${CSS.escape(id)}"]`)?.focus();
+    } catch (err) {
+      chart.removeAttribute('aria-busy');
+      ganttReset(task);
+      showError(err.message);
+    }
+  }
+  let ganttDrag = null;
+  let ganttSwallowClick = false;
+  document.addEventListener('pointerdown', (e) => {
+    const task = e.button === 0 && e.target.closest?.('.gantt-editable [data-task]');
+    if (!task || task.closest('[aria-busy="true"]')) return;
+    ganttDrag = { task, x: e.clientX, mode: e.target.closest('.gantt-handle') ? 'end' : 'move', id: e.pointerId, moved: false };
+    task.setPointerCapture?.(e.pointerId);
+  });
+  document.addEventListener('pointermove', (e) => {
+    if (!ganttDrag || e.pointerId !== ganttDrag.id) return;
+    const { task } = ganttDrag;
+    const chart = task.closest('.gantt-editable');
+    const width = chart.querySelector('.gantt-plot').getBoundingClientRect().width || 1;
+    const step = GANTT_STEP[chart.dataset.snap] || GANTT_STEP.day;
+    const dx = e.clientX - ganttDrag.x;
+    if (!ganttDrag.moved && Math.abs(dx) < 4) return;
+    ganttDrag.moved = true;
+    task.classList.add('gantt-dragging');
+    const steps = Math.round(((dx / width) * (Number(chart.dataset.hi) - Number(chart.dataset.lo))) / step);
+    if (steps !== ganttState.get(task)?.steps) ganttPreview(task, steps, ganttDrag.mode);
+  });
+  const ganttEnd = (e, cancel) => {
+    if (!ganttDrag || e.pointerId !== ganttDrag.id) return;
+    const { task, moved } = ganttDrag;
+    ganttDrag = null;
+    task.classList.remove('gantt-dragging');
+    if (!moved) return;
+    // a drag is not a click on the task's link
+    ganttSwallowClick = true;
+    setTimeout(() => (ganttSwallowClick = false), 0);
+    if (cancel) ganttReset(task);
+    else ganttSave(task);
+  };
+  document.addEventListener('pointerup', (e) => ganttEnd(e, false));
+  document.addEventListener('pointercancel', (e) => ganttEnd(e, true));
+  document.addEventListener('click', (e) => {
+    if (ganttSwallowClick && e.target.closest?.('.gantt-editable [data-task]')) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, true);
+  document.addEventListener('keydown', (e) => {
+    const task = e.target.closest?.('.gantt-editable [data-task]');
+    if (!task || e.altKey || e.ctrlKey || e.metaKey) return;
+    const st = ganttState.get(task);
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      const mode = e.shiftKey && task.classList.contains('gantt-bar') ? 'end' : 'move';
+      // switching between moving and changing the end starts over
+      if (st && st.mode !== mode) ganttReset(task);
+      const same = ganttState.get(task);
+      ganttPreview(task, (same ? same.steps : 0) + (e.key === 'ArrowRight' ? 1 : -1), mode);
+      ganttState.get(task).keyboard = true;
+    } else if (e.key === 'Enter' && st?.steps) {
+      e.preventDefault();
+      ganttSave(task);
+    } else if (e.key === 'Escape' && st) {
+      e.preventDefault();
+      ganttReset(task);
+    }
+  });
+
   // ------------------------------------------------------------ lazy regions
   // A lazy region arrives as a placeholder with a "Show" link (which works
   // without JavaScript); fetch the region now and put it in place, with its
@@ -3480,6 +3615,77 @@ function areaFilter(map, f) {
   check();
 })();
 
+// (sprint 72) Install app (PWA): the header's button appears when the browser offers the installation.
+(() => {
+  const button = document.querySelector('[data-pwa-install]');
+  if (!button) return;
+  let offer = null;
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    offer = e;
+    button.hidden = false;
+  });
+  button.addEventListener('click', async () => {
+    if (!offer) return;
+    offer.prompt();
+    await offer.userChoice.catch(() => null);
+    offer = null;
+    button.hidden = true;
+  });
+  window.addEventListener('appinstalled', () => { button.hidden = true; });
+})();
+
+// (sprint 72) The developer toolbar: docked where the developer chose (bottom, top, left, right;
+// kept in this browser), shrunk to a slim tab after a few seconds without use (unless turned off),
+// back when pointed at or focused. Its panels close when another opens or on Escape.
+(() => {
+  const bar = document.querySelector('.devbar');
+  if (!bar) return;
+  const KEY = 'pgkiln.devbar';
+  let prefs = { dock: 'bottom', autohide: true };
+  try { prefs = { ...prefs, ...JSON.parse(localStorage.getItem(KEY) || '{}') }; } catch {}
+  if (!['bottom', 'top', 'left', 'right'].includes(prefs.dock)) prefs.dock = 'bottom';
+  const save = () => { try { localStorage.setItem(KEY, JSON.stringify(prefs)); } catch {} };
+  const settings = bar.querySelector('.devbar-settings');
+  settings?.closest('li')?.removeAttribute('hidden');
+  const apply = () => {
+    bar.dataset.dock = prefs.dock;
+    bar.querySelectorAll('input[name="devbar-dock"]').forEach((r) => { r.checked = r.value === prefs.dock; });
+    const auto = bar.querySelector('input[name="devbar-autohide"]');
+    if (auto) auto.checked = !!prefs.autohide;
+  };
+  apply();
+  bar.addEventListener('change', (e) => {
+    if (e.target.name === 'devbar-dock') prefs.dock = e.target.value;
+    else if (e.target.name === 'devbar-autohide') prefs.autohide = e.target.checked;
+    else return;
+    save();
+    apply();
+  });
+  const menus = [...bar.querySelectorAll('details.devbar-menu')];
+  menus.forEach((m) => m.addEventListener('toggle', () => { if (m.open) menus.forEach((o) => { if (o !== m) o.open = false; }); }));
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && menus.some((m) => m.open)) {
+      const open = menus.find((m) => m.open);
+      open.open = false;
+      open.querySelector('summary')?.focus();
+    }
+  });
+  document.addEventListener('click', (e) => { if (!bar.contains(e.target)) menus.forEach((m) => { m.open = false; }); });
+  let timer = 0;
+  const busy = () => bar.matches(':hover') || bar.contains(document.activeElement) || menus.some((m) => m.open) || !!bar.querySelector('[aria-pressed="true"]');
+  const later = () => {
+    clearTimeout(timer);
+    if (prefs.autohide) timer = setTimeout(() => { if (!busy()) bar.classList.add('is-idle'); else later(); }, 3000);
+  };
+  const wake = () => { bar.classList.remove('is-idle'); later(); };
+  bar.addEventListener('pointerenter', wake);
+  bar.addEventListener('focusin', wake);
+  bar.addEventListener('pointerleave', later);
+  bar.addEventListener('change', wake);
+  later();
+})();
+
 // (sprint 59) Quick edit from the developer toolbar (APEX: Quick Edit): while it is on, pointing at a
 // region, item or button outlines it and a click opens it in the Page Designer (in the builder's tab);
 // Esc or the button again turns it off. The toolbar is only there for developers of the application.

package/public/builder.css

@@ -168,7 +168,7 @@ body.ide { margin: 0; min-height: 100vh; min-height: 100dvh; padding-left: var(-
 .ide-page { max-width: 1680px; margin: 0 auto; padding: 14px 18px 48px; }
 .ide .region-standard, .ide .region-collapsible { border-radius: var(--radius); box-shadow: none; }
 .ide .region-header { min-height: 38px; padding: 0.35rem 0.85rem; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
-.ide .region-header h2 { font-size: 13px; font-weight: 650; }
+.ide .region-header h2 { font-size: 13px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
 .ide .region-body { padding: 0.85rem; }
 .ide .btn { font-size: 13px; padding: 0.34rem 0.8rem; border-radius: 4px; }
 .ide input:not([type=checkbox]):not([type=radio]), .ide select, .ide textarea { padding: 0.32rem 0.5rem; border-radius: 3px; font-size: 13px; }
@@ -768,7 +768,12 @@ button.is-busy { opacity: 0.7; cursor: progress; }
   --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-size: 15px; --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 6%);
   color-scheme: light; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
   background: var(--bg); color: var(--text); font: var(--font-size)/1.5 var(--font); }
-.tr-preview-iris { --bg: #f6f6fb; --surface-2: #f8f8fc; --surface-3: #eeeef6; --text: #1d1b2e; --muted: #5f5d75; --border: #e3e2ef;
+.tr-preview-iris { --bg: #ffffff; --surface-2: #f7f6f5; --surface-3: #efedeb; --text: #1f1c1a; --muted: #645e59; --border: #e2dfdc;
+  --accent: #2b62c4; --accent-soft: #e9f0fb; --header: #3a3632; --header-text: #f7f5f3; --radius: 4px; --shadow: none;
+  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
+.tr-preview-iris .tr-preview-header { box-shadow: inset 0 3px 0 var(--accent); }
+.tr-preview-iris .btn-hot { background: #2f2b28; border-color: #2f2b28; color: #fff; }
+.tr-preview-lavender { --bg: #f6f6fb; --surface-2: #f8f8fc; --surface-3: #eeeef6; --text: #1d1b2e; --muted: #5f5d75; --border: #e3e2ef;
   --accent: #5146d8; --accent-soft: #eeedfd; --header: #1e1a4d; --header-text: #f1f0ff; --radius: 12px;
   --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --shadow: 0 1px 2px rgb(30 27 75 / 5%), 0 2px 8px rgb(30 27 75 / 6%); }
 .tr-preview-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; background: var(--header); color: var(--header-text); font-weight: 700; }
@@ -779,7 +784,7 @@ button.is-busy { opacity: 0.7; cursor: progress; }
 .tr-preview input { background: var(--surface); color: var(--text); border-color: var(--border); }
 .tr-preview .btn { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: calc(var(--radius) * 0.75); font: inherit; }
 .tr-preview .btn-hot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
-.tr-preview-iris .btn-hot { border-radius: 999px; }
+.tr-preview-lavender .btn-hot { border-radius: 999px; }
 
 /* icon picker (forms.ts iconPicker) */
 .icon-picker > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 34px; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; list-style: none; background: var(--surface); }
@@ -872,3 +877,26 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .gal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .gal-foot form { margin: 0; }
 .ab-group select { min-width: 140px; }
+
+/* (sprint 73) the Create Application wizard on one page */
+.create-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; margin: 0.75rem 0 1rem; }
+.create-source { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
+.create-source:hover, .create-source:focus-visible { border-color: var(--accent); }
+.create-source .icon { color: var(--accent); margin-top: 0.15rem; }
+.create-source span { display: grid; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
+.create-app .region + form, .create-app form .region { margin-top: 1rem; }
+.aw-pages { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.4rem; }
+.aw-pages li { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 16rem); gap: 0.15rem 0.75rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
+.aw-pages li > small, .aw-pages li > .muted:last-child { grid-column: 1 / -1; }
+.aw-page-kind { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
+@media (max-width: 560px) { .aw-pages li { grid-template-columns: 1fr; } }
+.aw-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1rem; }
+.aw-advanced > summary { cursor: pointer; list-style: none; }
+.aw-advanced > summary::-webkit-details-marker { display: none; }
+.aw-advanced .region-body { padding: 1rem; }
+/* the overlay while a long form (Create application) is being processed */
+.progress-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgb(0 0 0 / 35%); }
+.progress-box { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgb(0 0 0 / 25%); }
+.progress-spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: progress-spin 0.8s linear infinite; }
+@keyframes progress-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .progress-spinner { animation: none; } }

package/public/builder.js

@@ -859,3 +859,34 @@ document.addEventListener('click', async (e) => {
     show(e.target.closest?.('.pe [data-prop]'));
   });
 })();
+
+// (sprint 73) a proposed value is selected on the first focus, so typing replaces it (data-select-once)
+document.querySelectorAll('input[data-select-once]').forEach((el) => {
+  el.addEventListener('focus', () => {
+    el.select();
+    // the click that focused it would put the caret back: keep the selection
+    el.addEventListener('mouseup', (e) => e.preventDefault(), { once: true });
+  }, { once: true });
+});
+
+// (sprint 73) a form that takes a while (data-progress="Creating …"): an overlay with the message while the server works
+document.addEventListener('submit', (e) => {
+  const form = e.target.closest?.('form[data-progress]');
+  if (!form || e.defaultPrevented || !form.checkValidity()) return;
+  const overlay = document.createElement('div');
+  overlay.className = 'progress-overlay';
+  overlay.setAttribute('role', 'status');
+  overlay.setAttribute('aria-live', 'polite');
+  const box = document.createElement('div');
+  box.className = 'progress-box';
+  const spin = document.createElement('span');
+  spin.className = 'progress-spinner';
+  spin.setAttribute('aria-hidden', 'true');
+  const text = document.createElement('span');
+  text.textContent = form.dataset.progress;
+  box.append(spin, text);
+  overlay.append(box);
+  document.body.append(overlay);
+  // back from the browser's cache (the back button): no overlay
+  window.addEventListener('pageshow', (ev) => { if (ev.persisted) overlay.remove(); }, { once: true });
+});

package/public/sw.js

@@ -1,6 +1,7 @@
 // pgkiln service worker for one application (served as /a/<alias>/sw.js with PGKILN = {base, offlinePages, offlineSubmit, version}).
 //   static files (app.css, app.js, icons) and the offline page: cached at install, served from the cache by their
 //   exact URL; pages ask for them with ?v=<version> (static-version.ts), so a changed file is fetched anew
+//   (offline, the cached copy of another version)
 //   pages (navigations): network first; offline, the cached copy (only when the app keeps pages) or the offline page
 //   signing in or out empties the page cache, so the next person on the device doesn't see them
 //   push notifications (migration 074): shown as they arrive, a click opens their page of the app;
@@ -40,8 +41,10 @@ self.addEventListener('fetch', (event) => {
   if (req.method !== 'GET') return;
 
   if (url.pathname.startsWith('/static/')) {
-    // the exact URL: another ?v= (a changed file) is not the cached copy
-    event.respondWith(caches.match(req, { cacheName: STATIC }).then((hit) => hit || fetch(req)));
+    // the exact URL: another ?v= (a changed file) is not the cached copy. Offline, the copy under another ?v= is
+    // better than none: a page kept on the device under an older version still gets its script and styles
+    const anyVersion = async () => (await caches.match(req, { cacheName: STATIC, ignoreSearch: true })) || Response.error();
+    event.respondWith(caches.match(req, { cacheName: STATIC }).then((hit) => hit || fetch(req).catch(anyVersion)));
     return;
   }
 

package/src/app.ts

@@ -70,6 +70,9 @@ import { galleryRoutes } from './builder/gallery.ts';
 import { appGroupRoutes } from './builder/app-groups.ts';
 import { crossAppRoutes } from './builder/cross-app.ts';
 import { workspaceBackupRoutes } from './builder/workspace-backups.ts';
+import { restCatalogRoutes } from './builder/rest-catalogs.ts';
+import { workspaceTransferRoutes } from './builder/workspace-transfer.ts';
+import { findWorkspaceRoutes } from './builder/find-workspace.ts';
 import { runtimeScope } from './db.ts';
 
 export async function buildApp(opts: { logger?: boolean } = {}) {
@@ -179,6 +182,9 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(appGroupRoutes);
   await app.register(crossAppRoutes);
   await app.register(workspaceBackupRoutes);
+  await app.register(restCatalogRoutes);
+  await app.register(workspaceTransferRoutes);
+  await app.register(findWorkspaceRoutes);
   await app.register(sharedRoutes);
   await app.register(designerRoutes);
   await app.register(lockRoutes);

package/src/builder/appfromfile.ts

@@ -21,7 +21,7 @@ import type { Session } from '../session.ts';
 import { MAX_MB, preview, resultHtml } from './dataload.ts';
 import { buildAppFromSheets, MAX_SHEETS, parseBook, sheetsForm, type BuiltBook, type NamedSheet } from './appsheets.ts';
 import { appWizardRoutes, PASTED } from './appwizard.ts';
-import { checkNewApp, createApp, createAppError, reservedSchema, type CheckedApp } from './newapp.ts';
+import { finishGeneratedApp, checkNewApp, createApp, createAppError, reservedSchema, type CheckedApp } from './newapp.ts';
 import { currentWorkspace } from './workspaces.ts';
 import { BASE, csrf, developer, input, region, select, send, shell, type Body, type Req } from './ui.ts';
 
@@ -149,9 +149,9 @@ export async function buildAppFromFile(checked: CheckedApp, sheet: Sheet, b: Bod
     const generate = async (kind: string, page: number, options: Record<string, unknown>) => {
       await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb)', [checked.alias, kind, T, page, JSON.stringify(options)]);
     };
-    const label = (await c.query(`select meta.wizard_label($1) as l`, [tableName])).rows[0].l as string;
-    await generate('report_form', 2, { form_page: 3, label });
-    pages.push({ page: 2, label }, { page: 3, label: `${label} form` });
+    const { label, singular } = (await c.query('select meta.wizard_table_label($1::regclass) as label, meta.wizard_table_label($1::regclass, false) as singular', [T])).rows[0] as { label: string; singular: string };
+    await generate('report_form', 2, { form_page: 3 });
+    pages.push({ page: 2, label }, { page: 3, label: `${singular} form` });
     let next = 4;
     // the statistics tell which columns group the rows: a few values, repeated (not a name per row)
     const rows = result.inserted;
@@ -178,6 +178,7 @@ export async function buildAppFromFile(checked: CheckedApp, sheet: Sheet, b: Bod
         pages.push({ page: next++, label: `Faceted search (${facets.join(', ')})` });
       }
     }
+    await finishGeneratedApp(c, app.id, { description: checked.description });
     return { app: { id: app.id, alias: checked.alias, existingAccount: app.existingAccount }, table: T, result, pages, notes };
   });
 }

package/src/builder/appsheets.ts

@@ -19,7 +19,7 @@ import {
   type Sheet,
 } from '../dataload.ts';
 import { preview } from './dataload.ts';
-import { createApp, createAppError, type CheckedApp } from './newapp.ts';
+import { finishGeneratedApp, createApp, createAppError, type CheckedApp } from './newapp.ts';
 import { groupColumn } from './appfromfile.ts';
 import { region, type Body } from './ui.ts';
 
@@ -278,14 +278,21 @@ interface Catalog {
  * A dashboard page: a chart per table (at most six) with the number of rows per
  * parent row (the first foreign key), or per value of a text, yes/no or date
  * column whose values repeat (from the statistics). Null when no table has one.
+ * (097) Tables with row level security are left out (the application's role may
+ * see none of their rows: an empty chart); the charts are titled "Employees by
+ * Manager", and the Dashboard comes right after Home in the navigation menu.
  */
-export async function addDashboard(c: Client, alias: string, tables: string[], page: number): Promise<{ page: number; label: string } | null> {
+export async function addDashboard(c: Client, alias: string, tables: string[], page: number, skipped: string[] = []): Promise<{ page: number; label: string } | null> {
   const picks: { table: string; group: string }[] = [];
   for (const t of tables) {
     if (picks.length >= MAX_CHARTS) break;
+    const rel = (await c.query('select relrowsecurity as rls, greatest(reltuples, 0) as n from pg_class where oid = $1::regclass', [t])).rows[0];
+    if (rel.rls) {
+      skipped.push(t);
+      continue;
+    }
     const catalog = (await c.query<Catalog>('select column_name, kind, is_pk, distinct_values, fk_table::text from meta.wizard_catalog($1::regclass)', [t])).rows;
-    const rows = Number((await c.query('select greatest(reltuples, 0) as n from pg_class where oid = $1::regclass', [t])).rows[0].n);
-    const group = catalog.find((x) => x.fk_table && !x.is_pk)?.column_name ?? groupColumn(catalog, rows);
+    const group = catalog.find((x) => x.fk_table && !x.is_pk)?.column_name ?? groupColumn(catalog, Number(rel.n));
     if (group) picks.push({ table: t, group });
   }
   if (!picks.length) return null;
@@ -295,7 +302,7 @@ export async function addDashboard(c: Client, alias: string, tables: string[], p
       JSON.stringify({ label: 'Dashboard', icon: 'chart', nav, label_column: group, function: 'count', value_column: null }),
     ]);
   const title = async (table: string, group: string) =>
-    (await c.query(`select meta.wizard_label(relname) || ' per ' || lower(meta.wizard_label(regexp_replace($2, '_(id|no|code)$', ''))) as t from pg_class where oid = $1::regclass`, [table, group])).rows[0].t as string;
+    (await c.query(`select meta.wizard_table_label($1::regclass) || ' by ' || meta.wizard_column_label($1::regclass, $2) as t`, [table, group])).rows[0].t as string;
   const dash = (await generate(picks[0].table, picks[0].group, page, true)).rows[0].id;
   await c.query('update meta.region set title = $2 where page_id = $1', [dash, await title(picks[0].table, picks[0].group)]);
   for (const [n, p] of picks.slice(1).entries()) {
@@ -306,7 +313,13 @@ export async function addDashboard(c: Client, alias: string, tables: string[], p
     await c.query('delete from meta.page where id = $1', [tmp]);
   }
   if (picks.length > 1) await c.query('update meta.region set columns = 6 where page_id = $1', [dash]);
-  return { page, label: `Dashboard (${picks.map((p) => `${p.table.replace(/^.*\./, '')} per ${p.group}`).join(', ')})` };
+  // right after Home (the first top-level entry)
+  await c.query(
+    `update meta.nav_entry e set seq = coalesce((select min(seq) from meta.nav_entry h where h.app_id = e.app_id and h.parent_id is null and h.target_page = a.home_page), 0) + 1
+       from meta.app a where a.alias = $1 and e.app_id = a.id and e.parent_id is null and e.target_page = $2`,
+    [alias, page],
+  );
+  return { page, label: `Dashboard (${(await Promise.all(picks.map((p) => title(p.table, p.group)))).join(', ')})` };
 }
 
 /** Create the application, the tables, the rows, the foreign keys and the pages, in one transaction. */
@@ -371,9 +384,9 @@ export async function buildAppFromSheets(checked: CheckedApp, sheets: NamedSheet
     let next = 2;
     for (const p of plans) {
       const T = qualified.get(p.k)!;
-      const label = (await c.query('select meta.wizard_label($1) as l', [p.table])).rows[0].l as string;
-      await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb)', [checked.alias, 'report_form', T, next, JSON.stringify({ form_page: next + 1, label })]);
-      pages.push({ page: next, label }, { page: next + 1, label: `${label} form` });
+      const { label, singular } = (await c.query('select meta.wizard_table_label($1::regclass) as label, meta.wizard_table_label($1::regclass, false) as singular', [T])).rows[0] as { label: string; singular: string };
+      await c.query('select meta.generate_page($1, $2, $3::regclass, $4, $5::jsonb)', [checked.alias, 'report_form', T, next, JSON.stringify({ form_page: next + 1 })]);
+      pages.push({ page: next, label }, { page: next + 1, label: `${singular} form` });
       next += 2;
     }
     if (b.chart === 'true') {
@@ -381,6 +394,7 @@ export async function buildAppFromSheets(checked: CheckedApp, sheets: NamedSheet
       if (dash) pages.push(dash);
       else notes.push('No dashboard: no table has a foreign key or a text, yes/no or date column with a few values that repeat, to count the rows by.');
     }
+    await finishGeneratedApp(c, app.id, { description: checked.description });
     return { app: { id: app.id, alias: checked.alias, existingAccount: app.existingAccount }, tables, foreignKeys, pages, notes };
   });
 }