pgkiln 0.35.0 → 0.37.0

package/docs/guide/20-ai-agents.md

@@ -48,6 +48,8 @@ directory the agent started the server in (the project).
 | `get_page` | every component of one page as YAML, SQL inline | no |
 | `read_app_files` | component files by path or prefix (`shared/lovs/`, `navigation.yaml`, …) | no |
 | `describe_schema` | schemas with tables, views and functions; or one table with columns, constraints, indexes, RLS policies and triggers | no |
+| `generate_ddl` | the DDL of a schema's objects, in an order that runs: a start for a migration script | no |
+| `compare_schemas` | the differences between two schemas and a script that makes the target like the source (not run) | no |
 | `run_query` | one SQL statement, read-only, rows as JSON | no |
 | `search_docs` | searches this user guide, the parity matrix and SECURITY.md | no |
 | `recent_errors` | the latest errors and refused requests from the activity log | no |

package/examples/hr/hr_40_sample_data.sql

@@ -47,4 +47,4 @@ values ('HR demo staff', 'Departments, employees and leave requests for trying o
     {"column": "decision_note", "generator": "skip", "options": "", "nulls": 0},
     {"column": "created_at", "generator": "timestamp", "options": "2025-10-01..2026-10-01", "nulls": 0}]}
 ]$json$::jsonb, 'admin', 'admin')
-on conflict (name) do nothing;
+on conflict (workspace_id, name) do nothing;

package/examples/hr/hr_54_region_templates.sql

@@ -0,0 +1,67 @@
+-- =====================================================================
+-- HR example, part 54: region templates (migration 088;
+-- docs/guide/04-pages-and-regions.md "Region templates")
+--
+-- Page 44 "Region templates" (Administration):
+--   - a hero region (an icon, the title, text and a button);
+--   - a title bar with buttons; a buttons container;
+--   - "Leave policy" opens an inline dialog and "Help" an inline drawer
+--     (dynamic actions "Open region"; a link to #R<id> opens them too);
+--   - a carousel (a display selector with style carousel) over three
+--     regions, turning every 8 seconds;
+--   - the steps of onboarding as a wizard progress list above a wizard
+--     region.
+-- =====================================================================
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select id, 44, 'Region templates', 'Region templates', 1 from meta.app where alias = 'hr';
+
+insert into meta.list (app_id, name, type, description)
+select id, 'HR_ONBOARDING_STEPS', 'static', 'The steps of onboarding (a wizard progress list on page 44)' from meta.app where alias = 'hr';
+
+insert into meta.list_entry (app_id, list_name, seq, label, target_page)
+select a.id, 'HR_ONBOARDING_STEPS', e.seq, e.label, e.page
+  from meta.app a, (values (10, 'Personal details', 44), (20, 'Contract', 3), (30, 'Equipment', 28), (40, 'Done', 1)) as e (seq, label, page)
+ where a.alias = 'hr';
+
+insert into meta.region (page_id, seq, title, type, columns, template, source, config)
+select p.id, r.seq, r.title, r.type, 12, r.template, r.source, r.config::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (10, 'Welcome to HR', 'static', 'hero',
+   '<p>Everything about the people in the company: employees, departments, leave and reviews.</p>', '{"icon": "users"}'),
+  (20, 'Employees this month', 'static', 'title_bar', '<p class="muted">Hires and departures of the current month.</p>', '{}'),
+  (30, 'Actions', 'static', 'buttons_container', null, '{}'),
+  (40, 'Leave policy', 'static', 'inline_dialog',
+   '<p>Everyone has 25 days of leave a year. Ask your manager at least two weeks ahead; approvals come by e-mail.</p>', '{}'),
+  (50, 'Help', 'static', 'inline_drawer',
+   '<p>This page shows the region templates: hero, title bar, buttons container, inline dialog and drawer, carousel and wizard.</p>', '{}'),
+  (60, 'Highlights', 'display_selector', 'plain', null, '{"style": "carousel", "interval": 8, "show_all": false}'),
+  (61, 'New colleagues', 'static', 'standard', '<p>Three people joined the Research department this month.</p>', '{"display_selector": true}'),
+  (62, 'Anniversaries', 'static', 'standard', '<p>KING celebrates 45 years with the company.</p>', '{"display_selector": true}'),
+  (63, 'Open positions', 'static', 'standard', '<p>Two analysts and a clerk: see the intranet.</p>', '{"display_selector": true}'),
+  (70, 'Onboarding steps', 'list', 'plain', null, '{"list": "HR_ONBOARDING_STEPS", "template": "wizard_progress"}'),
+  (80, 'Personal details', 'static', 'wizard', '<p>Step 1: check your name, address and bank account in My account.</p>', '{}')
+  ) as r (seq, title, type, template, source, config)
+ where a.alias = 'hr' and p.page_no = 44;
+
+insert into meta.button (page_id, region_id, seq, name, label, action, hot, target_page)
+select p.id, (select r.id from meta.region r where r.page_id = p.id and r.title = b.region), b.seq, b.name, b.label, b.action, b.hot, b.target
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  ('Welcome to HR', 10, 'EMPLOYEES', 'See the employees', 'redirect', true, 2),
+  ('Employees this month', 20, 'POLICY', 'Leave policy', 'da', false, null),
+  ('Actions', 30, 'HELP', 'Help', 'da', false, null)
+  ) as b (region, seq, name, label, action, hot, target)
+ where a.alias = 'hr' and p.page_no = 44;
+
+insert into meta.dynamic_action (page_id, seq, name, event, trigger_element, action, affected_region_id)
+select p.id, d.seq, d.name, 'click', d.button, 'open_region', (select r.id from meta.region r where r.page_id = p.id and r.title = d.region)
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (10, 'Open the leave policy', 'POLICY', 'Leave policy'),
+  (20, 'Open the help', 'HELP', 'Help')
+  ) as d (seq, name, button, region)
+ where a.alias = 'hr' and p.page_no = 44;
+
+insert into meta.nav_entry (app_id, parent_id, seq, label, icon, target_page)
+select a.id, n.id, 50, 'Region templates', 'layers', 44
+  from meta.app a join meta.nav_entry n on n.app_id = a.id and n.label = 'Administration' and n.parent_id is null
+ where a.alias = 'hr';

package/examples/hr/hr_55_page_groups.sql

@@ -0,0 +1,24 @@
+-- =====================================================================
+-- HR example, part 55: page groups (migration 089;
+-- docs/guide/03-builder.md "Page groups")
+--
+-- The HR pages in four groups, shown and filtered in the App Builder's
+-- page list (Shared Components → Page groups).
+-- =====================================================================
+insert into meta.page_group (app_id, name, description)
+select a.id, g.name, g.description
+  from meta.app a, (values
+  ('Employees', 'Employees, departments and their reviews'),
+  ('Leave', 'Leave requests, the calendar and the planner'),
+  ('Administration', 'Pages for administrators'),
+  ('Showcase', 'Pages that show one feature each')
+  ) as g (name, description)
+ where a.alias = 'hr';
+
+update meta.page p set page_group = g.name
+  from meta.app a, (values
+  ('Employees', array[2, 3, 4, 5, 8, 11, 19, 20, 27]),
+  ('Leave', array[6, 7, 12, 22, 24]),
+  ('Administration', array[9, 10, 43, 44])
+  ) as g (name, pages)
+ where a.alias = 'hr' and p.app_id = a.id and p.page_no = any (g.pages);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "Open source low-code, SQL-driven application builder for PostgreSQL, inspired by Oracle APEX",
   "keywords": [
     "postgresql",

package/public/app.css

@@ -254,7 +254,43 @@ details.menu > summary::-webkit-details-marker { display: none; }
 
 /* ---------- regions ---------- */
 .region { min-width: 0; }
-.region-standard, .region-collapsible { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
+.region-standard, .region-collapsible, .region-wizard, .region-inline_dialog, .region-inline_drawer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
+/* (088) more region templates */
+.region-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.5rem; padding: 2rem 1.75rem; border-radius: var(--radius);
+  background: var(--accent-soft); color: var(--text); }
+.region-hero-icon .icon { width: 3rem; height: 3rem; color: var(--accent); }
+.region-hero-text h2 { font-size: 1.75rem; margin: 0 0 0.35rem; }
+.region-hero-buttons, .region-title-buttons, .region-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+@media (max-width: 640px) { .region-hero { grid-template-columns: 1fr; padding: 1.25rem 1rem; } }
+.region-title-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
+.region-title-bar h2 { margin: 0; font-size: 1.15rem; }
+.region-buttons_container .region-buttons { justify-content: flex-end; }
+.region-wizard { max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; }
+dialog[data-inline-region] { padding: 0; max-width: min(640px, calc(100vw - 2rem)); width: 100%; color: var(--text); }
+dialog[data-inline-region]::backdrop { background: rgb(0 0 0 / 45%); }
+dialog[data-inline-region] .region-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+dialog.region-inline_drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; max-width: min(480px, 100vw); border-radius: 0; }
+/* without JavaScript: a link to #R<id> shows it */
+dialog[data-inline-region]:target { display: block; position: fixed; inset: 2rem 0 auto; margin: 0 auto; z-index: 1000; }
+dialog.region-inline_drawer:target { inset: 0 0 0 auto; }
+/* (088) carousel (display selector style) and wizard progress (list template) */
+.rds-carousel { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
+.rds-carousel .rds-list { gap: 0.4rem; }
+.rds-carousel .rds-tab { font-size: 0; width: 0.75rem; height: 0.75rem; padding: 0; border-radius: 50%; background: var(--border); min-height: 0; }
+.rds-carousel .rds-tab.is-current { background: var(--accent); }
+.rds-carousel .rds-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.wizard-progress ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; counter-reset: none; }
+.wizard-step { flex: 1 1 0; min-width: 6rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; position: relative; color: var(--muted); font-size: 0.85rem; }
+.wizard-step::before { content: ""; position: absolute; top: 0.95rem; left: -50%; right: 50%; border-top: 2px solid var(--border); z-index: 0; }
+.wizard-step:first-child::before { display: none; }
+.wizard-step a { color: inherit; text-decoration: none; display: contents; }
+.wizard-step-no { position: relative; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); font-weight: 600; }
+.wizard-step-no .icon { width: 1rem; height: 1rem; }
+.wizard-step.is-done, .wizard-step.is-current { color: var(--text); }
+.wizard-step.is-done .wizard-step-no { border-color: var(--accent); color: var(--accent); }
+.wizard-step.is-done::before, .wizard-step.is-current::before { border-top-color: var(--accent); }
+.wizard-step.is-current .wizard-step-no { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
+.wizard-step.is-current .wizard-step-label { font-weight: 600; }
 .region-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 50px; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
 .region-collapsible summary.region-header { cursor: pointer; list-style: none; }
 .region-collapsible summary.region-header::-webkit-details-marker { display: none; }
@@ -810,6 +846,14 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
 .grid-table tr.deleted td { opacity: 0.5; text-decoration: line-through; }
 .grid-table tr.grid-new { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
 .grid-table tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
+/* the single row view: one row as a form */
+.grid-record { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius, 8px); display: grid; gap: 0.9rem; }
+.grid-record .grid-field { display: grid; gap: 0.3rem; align-content: start; }
+.grid-record .grid-value { min-height: 1.5rem; overflow-wrap: anywhere; }
+.grid-record.grid-new { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
+.grid-record.dirty { box-shadow: inset 3px 0 0 var(--accent); }
+.grid-record.deleted .form-grid { opacity: 0.5; text-decoration: line-through; }
+.grid-record-nav { justify-content: center; }
 .js .grid-template { display: none; }
 .grid-table .icon { width: 14px; height: 14px; }
 /* columns a user hid stay in the form (their values still post) */
@@ -1006,9 +1050,19 @@ input[type=color] { width: 4rem; min-height: 2.4rem; padding: 0.15rem; }
 /* single sign-on buttons on the login page */
 .sso-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
 .sso-buttons .btn { padding: 0.6rem; }
-.login-card .or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
-.login-card .or::before, .login-card .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
+.login-card .or, .login-region .or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
+.login-card .or::before, .login-card .or::after, .login-region .or::before, .login-region .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
 .login-form { display: flex; flex-direction: column; gap: 1rem; }
+.login-forgot { align-self: center; font-size: 0.9rem; }
+/* (087) minimal pages (no header and navigation) and an application's own login page */
+.t-minimal-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
+.login-body .t-minimal-main { max-width: 420px; padding: 1rem; }
+.login-region { display: flex; flex-direction: column; gap: 1rem; }
+.login-region .btn { padding: 0.6rem; }
+.t-minimal .t-titlebar { background: none; border: 0; padding: 0 0 1rem; }
+.t-minimal .t-content { padding: 0; max-width: none; }
+/* on the sign-in backdrop the title sits on the header colour, like the built-in page's card title */
+.login-body .t-titlebar h1 { color: var(--header-text); text-align: center; }
 
 /* ---------- preferences: theme switch, language picker ---------- */
 .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 0.35rem; }
@@ -1612,3 +1666,6 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .session-dialog { max-width: min(28rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; }
 .session-dialog::backdrop { background: rgb(0 0 0 / 40%); }
 .session-dialog p { margin: 0 0 1rem; }
+/* (sprint 59) Quick edit from the developer toolbar */
+.quick-edit .qe-target { outline: 2px dashed var(--accent); outline-offset: 2px; cursor: pointer; }
+.devbar-quick[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

package/public/app.js

@@ -539,7 +539,11 @@ const pgkilnUnsaved = (() => {
       case 'close_region':
         for (const el of targets(da)) {
           const details = el.querySelector(':scope > details');
-          if (details) details.open = da.action === 'open_region';
+          // (088) an inline dialog or drawer region
+          if (el.matches('dialog[data-inline-region]')) {
+            if (da.action === 'open_region' && !el.open) el.showModal();
+            else if (da.action === 'close_region' && el.open) el.close();
+          } else if (details) details.open = da.action === 'open_region';
           else el.hidden = da.action === 'close_region';
         }
         return;
@@ -1157,14 +1161,15 @@ const pgkilnUnsaved = (() => {
     if (leave && dirty && !window.confirm(pgkilnUnsaved.text)) e.preventDefault();
   });
   document.addEventListener('input', (e) => {
-    const row = e.target.closest?.('[data-grid] table.grid-table > tbody > tr');
+    // a grid row, or the single row view's form
+    const row = e.target.closest?.('[data-grid] table.grid-table > tbody > tr, [data-grid] .grid-record');
     if (!row) return;
     row.classList.add('dirty');
     dirty = true;
   });
   document.addEventListener('change', (e) => {
     const del = e.target.closest?.('[data-grid] .grid-sel input');
-    if (del) del.closest('tr').classList.toggle('deleted', del.checked);
+    if (del) del.closest('tr, .grid-record').classList.toggle('deleted', del.checked);
   });
   document.addEventListener('submit', () => (dirty = false));
   window.addEventListener('beforeunload', (e) => {
@@ -1544,6 +1549,30 @@ document.addEventListener('input', (e) => {
   if (custom) custom.checked = true;
 });
 
+// (088) Inline dialog and drawer regions: a link to #R<id> opens one as a modal dialog (without
+// JavaScript CSS shows it as the :target), its close button and Esc close it, a click on the
+// backdrop too.
+document.addEventListener('click', (e) => {
+  const close = e.target.closest?.('[data-region-close]');
+  if (close) {
+    e.preventDefault();
+    close.closest('dialog')?.close();
+    return;
+  }
+  const a = e.target.closest?.('a[href^="#R"]');
+  const d = a && document.getElementById(a.getAttribute('href').slice(1));
+  if (d?.matches('dialog[data-inline-region]')) {
+    e.preventDefault();
+    if (!d.open) d.showModal();
+    return;
+  }
+  if (e.target.matches?.('dialog[data-inline-region]')) e.target.close();
+});
+if (location.hash) {
+  const d = document.getElementById(location.hash.slice(1));
+  if (d?.matches('dialog[data-inline-region]')) d.showModal();
+}
+
 // Region display selector: the links to the regions become ARIA tabs (or a
 // select list) that show one tab's regions at a time; "Show all" shows them
 // all. The choice follows #R<id> in the URL and is remembered for the session.
@@ -1617,6 +1646,23 @@ document.querySelectorAll('[data-rds]').forEach((nav) => {
     const tab = byHash(location.hash.slice(1));
     if (tab) show(tab, false);
   });
+  // (088) carousel: Previous and Next, and turning by itself every data-rds-interval seconds
+  if (nav.classList.contains('rds-carousel')) {
+    const step = (n) => {
+      const i = tabs.findIndex((t) => t.classList.contains('is-current'));
+      show(tabs[(i + n + tabs.length) % tabs.length], false);
+    };
+    nav.querySelectorAll('[data-rds-step]').forEach((b) => {
+      b.hidden = false;
+      b.addEventListener('click', () => step(Number(b.dataset.rdsStep)));
+    });
+    const seconds = Number(nav.dataset.rdsInterval) || 0;
+    if (seconds && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      const area = [nav, ...panels];
+      const busy = () => area.some((el) => el.matches(':hover') || el.contains(document.activeElement));
+      setInterval(() => { if (!busy() && !document.hidden) step(1); }, seconds * 1000);
+    }
+  }
 });
 
 // Popup list of values: the select (which works without JavaScript) is hidden
@@ -3433,3 +3479,43 @@ function areaFilter(map, f) {
   }
   check();
 })();
+
+// (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.
+(() => {
+  const toggle = document.querySelector('[data-quick-edit]');
+  if (!toggle) return;
+  toggle.hidden = false;
+  const base = toggle.dataset.quickEdit;
+  const pick = (el) => el?.closest?.('[data-item], [data-button], .region[id^="R"]');
+  let on = false;
+  let marked = null;
+  const mark = (el) => {
+    marked?.classList.remove('qe-target');
+    marked = el;
+    el?.classList.add('qe-target');
+  };
+  const set = (v) => {
+    on = v;
+    toggle.setAttribute('aria-pressed', String(v));
+    document.body.classList.toggle('quick-edit', v);
+    if (!v) mark(null);
+  };
+  const urlOf = (el) => {
+    if (el.dataset.item) return `${base}/quick?item=${encodeURIComponent(el.dataset.item)}`;
+    if (el.dataset.button) return `${base}/quick?button=${encodeURIComponent(el.dataset.button)}`;
+    return `${base}?c=region-${el.id.slice(1)}`;
+  };
+  toggle.addEventListener('click', () => set(!on));
+  document.addEventListener('pointerover', (e) => { if (on && !e.target.closest('.devbar')) mark(pick(e.target)); });
+  document.addEventListener('click', (e) => {
+    if (!on || e.target.closest('.devbar')) return;
+    const el = pick(e.target);
+    if (!el) return;
+    e.preventDefault();
+    e.stopPropagation();
+    window.open(urlOf(el), 'pgkiln-builder');
+  }, true);
+  document.addEventListener('keydown', (e) => { if (on && e.key === 'Escape') set(false); });
+})();

package/public/builder.css

@@ -676,6 +676,11 @@ details.support-script pre.source { margin-top: 0.4rem; white-space: pre-wrap; o
 
 /* (sprint 34) working copies: differences and conflicts */
 pre.diff { max-height: 32rem; overflow: auto; background: var(--code-bg); padding: 0.6rem; font-size: 0.82rem; white-space: pre; }
+pre.diff .diff-add { color: var(--success, #1a7f37); }
+pre.diff .diff-del { color: var(--danger, #cf222e); }
+/* (sprint 56) SQL Workshop → Schema Comparison */
+.compare-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
+.compare-list summary { cursor: pointer; overflow-wrap: anywhere; }
 tr.row-conflict > td:first-child { border-left: 3px solid var(--warn); }
 .badge.badge-warn { background: var(--warning-soft); color: var(--text); }
 .publish-buttons .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
@@ -770,3 +775,9 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .provider-switch .field { margin: 0; min-width: min(100%, 280px); }
 .mail-check-buttons { margin: 4px 0 14px; }
 .mail-check-result:not(:empty) { margin-top: 8px; }
+/* (sprint 59) Page Designer: the help pane under the properties */
+.pe-help { border-top: 1px solid var(--border); margin-top: 0.75rem; padding: 0.5rem 0.75rem; }
+.pe-help summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
+.pe-help-body { padding-top: 0.4rem; overflow-wrap: anywhere; }
+.pe-help-body h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
+.pe-help-body p { margin: 0 0 0.4rem; }

package/public/builder.js

@@ -809,3 +809,53 @@ document.addEventListener('click', async (e) => {
     buttons.forEach((b) => (b.disabled = false));
   }
 });
+
+// (sprint 59) The Page Designer's help pane (APEX: the Help tab of the property editor): the property
+// that has the focus, its help, the column it is stored in and the guide section of the component type.
+(() => {
+  const pane = document.querySelector('[data-pe-help]');
+  if (!pane) return;
+  const guide = pane.closest('.pe-help')?.dataset.guide;
+  let current = null;
+  const show = (field) => {
+    if (!field || field === current) return;
+    current = field;
+    const label = (field.querySelector('label.label, label.check, .label')?.textContent || field.dataset.prop).trim();
+    const help = field.querySelector('.help');
+    pane.replaceChildren();
+    const h = document.createElement('h3');
+    h.textContent = label;
+    pane.append(h);
+    if (help) {
+      const p = document.createElement('p');
+      // the help is the server's own (escaped) markup: copy its nodes, links included
+      p.append(...[...help.childNodes].map((n) => n.cloneNode(true)));
+      pane.append(p);
+    } else {
+      const p = document.createElement('p');
+      p.className = 'muted';
+      p.textContent = 'This property has no help of its own: see the guide.';
+      pane.append(p);
+    }
+    const meta = document.createElement('p');
+    meta.className = 'small muted';
+    const code = document.createElement('code');
+    code.textContent = field.dataset.prop;
+    meta.append('Stored as ', code, ' (in exports and application files).');
+    pane.append(meta);
+    if (guide) {
+      const a = document.createElement('a');
+      a.href = guide;
+      a.target = '_blank';
+      a.rel = 'noopener';
+      a.textContent = 'This component in the guide ▸';
+      pane.append(a);
+    }
+  };
+  document.addEventListener('focusin', (e) => show(e.target.closest?.('.pe [data-prop]')));
+  document.addEventListener('pointerover', (e) => {
+    // pointing at a property shows its help too, unless another one has the focus
+    if (document.activeElement?.closest?.('.pe [data-prop]')) return;
+    show(e.target.closest?.('.pe [data-prop]'));
+  });
+})();

package/public/code-editor.css

@@ -4,7 +4,7 @@
 :root {
   --ce-bg: #fbfcfd;
   --ce-gutter: #f1f3f6;
-  --ce-gutter-text: #8a94a3;
+  --ce-gutter-text: #5d6876;
   --ce-text: #1b2330;
   --ce-kw: #8b2bb9;
   --ce-type: #0b6e8a;
@@ -26,7 +26,7 @@
   :root:not([data-theme="light"]) {
     --ce-bg: #12161d;
     --ce-gutter: #171c24;
-    --ce-gutter-text: #6c7686;
+    --ce-gutter-text: #8f99a8;
     --ce-text: #e3e7ed;
     --ce-kw: #d39bff;
     --ce-type: #5fd0e6;
@@ -46,7 +46,7 @@
 :root[data-theme="dark"] {
   --ce-bg: #12161d;
   --ce-gutter: #171c24;
-  --ce-gutter-text: #6c7686;
+  --ce-gutter-text: #8f99a8;
   --ce-text: #e3e7ed;
   --ce-kw: #d39bff;
   --ce-type: #5fd0e6;

package/public/sw.js

@@ -1,5 +1,6 @@
 // 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
+//   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
 //   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;
@@ -7,7 +8,7 @@
 /* global PGKILN */
 const STATIC = `pgkiln-static-${PGKILN.version}`;
 const PAGES = `pgkiln-pages-${PGKILN.base}`;
-const SHELL = ['/static/app.css', '/static/app.js', '/static/icons.svg', `${PGKILN.base}/offline`];
+const SHELL = [...['app.css', 'app.js', 'icons.svg'].map((f) => `/static/${f}?v=${PGKILN.version}`), `${PGKILN.base}/offline`];
 
 self.addEventListener('install', (event) => {
   event.waitUntil(caches.open(STATIC).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));
@@ -39,7 +40,8 @@ self.addEventListener('fetch', (event) => {
   if (req.method !== 'GET') return;
 
   if (url.pathname.startsWith('/static/')) {
-    event.respondWith(caches.match(req, { ignoreSearch: true }).then((hit) => hit || fetch(req)));
+    // 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)));
     return;
   }
 

package/src/app.ts

@@ -7,6 +7,7 @@ import fastifyStatic from '@fastify/static';
 import Fastify from 'fastify';
 import { apiRoutes } from './builder/api.ts';
 import { globalizationRoutes } from './builder/globalization.ts';
+import { loginPageRoutes } from './builder/login-page.ts';
 import { designerRoutes } from './builder/designer.ts';
 import { lockRoutes } from './builder/locks.ts';
 import { supportingRoutes } from './builder/supporting.ts';
@@ -64,6 +65,8 @@ import { ownerUrl, runtime } from './db.ts';
 import { refreshInstanceSettings } from './instance.ts';
 import { loadSecrets, securityHeaders, trustProxySetting } from './security.ts';
 import { lucideSymbol } from './icons.ts';
+import { runtimeForAlias } from './workspace-db.ts';
+import { runtimeScope } from './db.ts';
 
 export async function buildApp(opts: { logger?: boolean } = {}) {
   // a database older than the code: apply the migrations (MIGRATE_ON_START=true)
@@ -103,6 +106,22 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
       );
     });
   }
+  // an application of an isolated workspace runs on its workspace's own login (src/workspace-db.ts):
+  // the rest of the request runs in that scope, so runtime.* uses that pool
+  app.addHook('onRequest', (req, _reply, done) => {
+    const m = /^\/a\/([^/?#]{1,100})/.exec(req.url);
+    if (!m || pending.length) return done();
+    let alias: string;
+    try {
+      alias = decodeURIComponent(m[1]);
+    } catch {
+      return done();
+    }
+    runtimeForAlias(alias).then(
+      (db) => runtimeScope.run(db, done),
+      (err: Error) => done(err),
+    );
+  });
   // debug messages: stored after the response, for requests that have a debug log (src/debug.ts)
   app.addHook('onError', async (req, _reply, err) => {
     debugOf(req)?.add(1, 'error', `unhandled: ${err.message}`);
@@ -186,6 +205,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(oauthRoutes);
   await app.register(apiRoutes);
   await app.register(globalizationRoutes);
+  await app.register(loginPageRoutes);
   await app.register(codeEditorRoutes);
   await app.register(dataReporterRoutes);
   await app.register(reporterBuilderRoutes);

package/src/appfiles.ts

@@ -190,6 +190,7 @@ const NAMED: [section: string, dir: string, table: string][] = [
   ['email_templates', 'shared/email-templates', 'email_template'],
   // (086) application settings
   ['app_settings', 'shared/app-settings', 'app_setting'],
+  ['page_groups', 'shared/page-groups', 'page_group'],
 ];
 
 /** Components of a page: [array in the document, directory, table, key source]. */

package/src/automations.ts

@@ -1,5 +1,6 @@
 import pg from 'pg';
 import { owner, runtime } from './db.ts';
+import { withAppDb } from './workspace-db.ts';
 
 // Automations (Shared Components → Automations): SQL or PL/pgSQL on a cron
 // schedule, run by the pgkiln server as the application's database role.
@@ -226,7 +227,7 @@ export async function runAutomation(id: number, trigger: 'schedule' | 'manual' =
 
 /** The actions, as the application's role, through meta.automation_execute() (also used by meta.run_automation). */
 async function execute(def: Definition): Promise<{ rows: number; failed: number; errors: RowError[] }> {
-  return runtime.tx(async (c) => {
+  return withAppDb(def.app_id, () => runtime.tx(async (c) => {
     await c.query(
       `select set_config('pgkiln.app_user', $1, true), set_config('pgkiln.app_id', $2, true),
               set_config('pgkiln.automation_id', $3, true), set_config('pgkiln.session_id', '', true),
@@ -235,7 +236,7 @@ async function execute(def: Definition): Promise<{ rows: number; failed: number;
     );
     if (def.db_role) await c.query(`set local role ${pg.escapeIdentifier(def.db_role)}`);
     return (await c.query('select meta.automation_execute($1::jsonb) as r', [JSON.stringify(def)])).rows[0].r;
-  });
+  }));
 }
 
 // ------------------------------------------------------------------ scheduler

package/src/builder/advisor.ts

@@ -1,7 +1,8 @@
 import type { FastifyInstance } from 'fastify';
 import pg from 'pg';
 import { applyBinds, splitStatements } from '../binds.ts';
-import { owner } from '../db.ts';
+import { owner, type Db } from '../db.ts';
+import { devDbForApp } from '../workspace-db.ts';
 import { html, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { templateProblem } from '../runtime/document.ts';
@@ -156,7 +157,7 @@ const BUILT_IN = new Set(['MUST_NOT_BE_PUBLIC_USER']);
  * e.g. an import that hasn't committed yet) everything is read and checked
  * on that client, inside a savepoint that is rolled back.
  */
-export async function advise(appId: number, tx?: pg.ClientBase): Promise<{ findings: Finding[]; checked: number; plpgsqlCheck: boolean }> {
+export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db } = {}): Promise<{ findings: Finding[]; checked: number; plpgsqlCheck: boolean }> {
   const query = (sql: string, params: unknown[] = []) => (tx ? tx.query(sql, params) : owner.query(sql, params));
   const one = async (sql: string, params: unknown[] = []) => (await query(sql, params)).rows[0];
   const app = await one('select * from meta.app where id = $1', [appId]);
@@ -173,10 +174,29 @@ export async function advise(appId: number, tx?: pg.ClientBase): Promise<{ findi
     ).rows.map((row) => ({ kind, row }));
   const all = (await Promise.all(Object.entries(COMPONENTS).map(([kind, spec]) => rowsOf(kind, spec.table, spec.scope)))).flat();
 
+  // metadata checks, as the owner (before the role switch below: the application's role can't read meta)
+  // (087) the application's login page: a page that needs no sign-in, with a login region
+  if (app.login_page) {
+    const page = await one('select id, requires_auth from meta.page where app_id = $1 and page_no = $2', [appId, app.login_page]);
+    const field = 'Application settings → Login page';
+    if (!page) findings.push({ severity: 'error', entry: null, field, message: `Page ${app.login_page} doesn't exist: the built-in sign-in page is shown instead.` });
+    else if (page.requires_auth) findings.push({ severity: 'error', entry: null, field, message: `Page ${app.login_page} requires authentication: the built-in sign-in page is shown instead.` });
+    else if (!all.some((x) => x.kind === 'region' && x.row.type === 'login' && Number(x.row.page_no) === Number(app.login_page)))
+      findings.push({ severity: 'error', entry: null, field, message: `Page ${app.login_page} has no Login region: nobody can sign in.` });
+  }
+  // (089) a page's group exists
+  for (const p of (await query(`select p.page_no, p.page_group from meta.page p where p.app_id = $1 and p.page_group is not null
+                                   and not exists (select 1 from meta.page_group g where g.app_id = p.app_id and g.name = p.page_group) order by 1`, [appId])).rows)
+    findings.push({ severity: 'warning', entry: null, field: `Page ${p.page_no} → Page group`, message: `Page group ${p.page_group} doesn't exist (Shared Components → Page groups).` });
   // ---- SQL, as the application's role, rolled back (a savepoint in the caller's transaction)
-  const c = (tx ?? (await owner.pool.connect())) as pg.PoolClient;
+  // (090) an isolated workspace's application: planned on the workspace's developer login, in a
+  // transaction of its own (planning can run the application's functions; RESET ROLE there only
+  // reaches that login, never the owner); `opts.db` names the login for an import into the workspace
+  const own = opts.db && opts.db !== owner ? opts.db : await devDbForApp(appId);
+  const inTx = !!tx && own === owner;
+  const c = (inTx ? tx : await (own === owner ? owner : own).pool.connect()) as pg.PoolClient;
   try {
-    await c.query(tx ? 'savepoint advisor_all' : 'begin');
+    await c.query(inTx ? 'savepoint advisor_all' : 'begin');
     await c.query(`set local statement_timeout = '5s'`);
     await c.query(`select set_config('pgkiln.app_id', $1, true)`, [String(appId)]);
     if (app.db_role) await c.query(`set local role ${pg.escapeIdentifier(app.db_role)}`);
@@ -249,7 +269,7 @@ export async function advise(appId: number, tx?: pg.ClientBase): Promise<{ findi
       }
     }
   } finally {
-    if (tx) {
+    if (inTx) {
       await c.query('rollback to savepoint advisor_all');
       await c.query('release savepoint advisor_all');
     } else {