pgkiln 0.49.0 → 0.51.0

package/docs/guide/12-development.md

@@ -21,6 +21,9 @@ src/
   env.ts                   .env loader (imported first)
   migrate.ts               applies db/migrations and examples (scripts/migrate.ts, pgkiln migrate); logs each run that applies
   instance.ts              instance settings (meta.setting over environment variables, cached 30 s) and the configuration overview
+  release-check.ts         (sprint 109) "pgkiln X is available": meta.setting 'release_check' over PGKILN_RELEASE_CHECK (off by default);
+                           GitHub's releases/latest (PGKILN_RELEASE_URL in tests), 5 s timeout, 1 MB, cached a day per process,
+                           never under node --test without PGKILN_RELEASE_URL; parseRelease keeps a semver and an https link only
                            or fails a file in public.pgkiln_install_log
   appfiles.ts              application export as one file per component (dir layout, static ids) and back
   blueprint.ts             blueprints (migration 063): checkBlueprint (names, types, references, pages, sample rows), tableOrder,
@@ -68,10 +71,22 @@ src/
   xml.ts                   safe XML reader (no DTDs or entities, limits) and xmlTable(): rows from a repeating element (unit tested)
   sqlscript.ts             SQL scripts: splitScript() (statements, line numbers and offsets, psql commands), runScript() (stop/continue, transaction, savepoints)
   sqlworksheet.ts          (sprint 91) the worksheet's runs: pickStatements() (at the cursor, a selection, all), runStatements() (a log per
-                           statement, psql command tags, notices, error line and column), explainStatement() (EXPLAIN / rolled-back ANALYZE)
+                           statement, psql command tags, notices, error line and column), explainStatement() (EXPLAIN / rolled-back ANALYZE;
+                           a savepoint inside a worksheet transaction)
+  worksheet-txn.ts         (sprint 107) the worksheet's transaction mode: an in-memory registry of pinned pg.Clients per (builder session,
+                           worksheet tab), beginTxn() / endTxn() (caps per developer and server), accountRun() (statement count, DDL kept for
+                           the Change Log until COMMIT), outsideTxnOnly(), sweepTxns() (idle timeout, ended sessions); onSessionEnd and
+                           onClosePools roll back; WORKSHEET_TXN_IDLE_SECONDS / _MAX_PER_DEVELOPER / _MAX
   datamodel.ts             (sprint 98) Data Modeler diagrams: readModel() (catalog), boxSize(), fkPath() (crow's feet), autoLayout(), diagramSvg()
   changelog.ts             (sprint 106, migration 118) the change log: isSchemaDdl(), ddlTarget() (schema and object), changeName()
                            (add_bonus, create_index_x), recordChanges() (grouped per schema), Flyway / Liquibase / plain SQL writers
+  datasets.ts              (sprint 110, migration 120) Data Reporter datasets: checkDataset() (names, joins to earlier tables, columns
+                           and filters on its tables, whitelisted operators; with a catalog: existing objects), datasetSql() (quoted
+                           identifiers, literal values), readSchemaCatalog() (tables, views, columns, foreign keys), proposeJoin() /
+                           proposeDataset(), storeDataset(), appDatasets() (the runtime's read), pgkiln-dataset/1 files
+  reporting-app.ts         (sprint 110) reporting applications: createReportingApp() (createApp, SELECT-only grants on the datasets'
+                           objects, type reporting, roles viewer/editor/administrator as schemes EDITOR and ADMIN, page 1 a Data
+                           Reporter), reportingApps(), reportingAppCount() (meta.reporting_app_count, for the workspace home)
   tabledef.ts              (sprint 95) a table as a definition: readTable(), checkTable(), tableSql() (CREATE, or ALTER from the catalog's version)
   sqlformat.ts             (sprint 93) formatSql(): the worksheet's Format (clauses per line, keyword case; strings and comments kept)
   sqlplan.ts               (sprint 92) EXPLAIN (FORMAT JSON) as a tree: parsePlan() (self time, slowest step, misestimates), planText()
@@ -180,7 +195,9 @@ src/
     template-region.ts     template_component region
     tasks.ts               task list region and task actions (approvals); (094) the vacation rule panel and route
     data-reporter.ts       Data Reporter region (migration 057): sources from the region's config, checkDef (offered columns, whitelists),
-                           reportQuery/chartQuery, the list and editor (GET form), save/delete routes (meta.save_data_report)
+                           reportQuery/chartQuery, the list and editor (GET form), save/delete routes (meta.save_data_report);
+                           (sprint 110) dataset sources (resolveSources), edit_authz / admin_authz / publishing, pins (a preference),
+                           publish / pin routes, the stable URL GET /a/:alias/reports/:id
     form-designer.ts       Form Designer region (migration 106): sources from the region's config, checkFormDef (offered columns, displays,
                            actions), forms as cards, a form's rows, a row's form (lost update hash), the designer; row/design/delete routes
     workflows.ts           workflow console region and its actions
@@ -212,7 +229,12 @@ src/
     routes.ts              sign-in, app home, settings, activity, developers, create (POST, via newapp.ts)/import (POST)
     wizards.ts             create page wizards: step 2 forms per page type (defaults from meta.wizard_defaults), POST → meta.generate_page
                            (the generators are PL/pgSQL in migration 047: catalog, defaults, form/cards/calendar/chart/map/facets/master-detail)
-    home.ts                App Builder home (tiles, applications report/cards, Recent), Create, Import, Dashboard, Utilities
+    home.ts                App Builder home at /builder/apps and /builder (tiles, applications report/cards, Recent; /builder redirects
+                           to the Workspace home when meta.workspace.builder_home = 'home'), Create, Import, Dashboard, Utilities
+    workspace-home.ts      (sprint 109, migration 119) the Workspace home /builder/home, opened after sign-in: tool cards (Data Reporter
+                           when GET /builder/reporter exists), workspace message edited in place (workspaceAdmin), Summary, Top
+                           applications / users / developers over meta.developer.home_timeframe, System message (src/release-check.ts),
+                           POST timeframe, message, release-check; releaseCheckRegion for Instance settings
     newapp.ts              creating an application (schema, role app_<alias>, Home page, first user): blank app, from a file, from tables
     appfromfile.ts         Create → From a file: upload (src/dataload.ts parsing), proposed table/columns, one transaction:
                            app + table + rows (loadRows) + pages (meta.generate_page: report and form, chart, facets)
@@ -249,7 +271,8 @@ src/
                            worksheet's Chart tab, SQL Workshop → Charts (meta.sql_chart, 110; read-only runs)
     sql-tools.ts           (sprint 96) SQL_TOOLS: every SQL Workshop tool with its group, tab and description (home, More menu, search)
     worksheet.ts           (sprint 91) the SQL Worksheet (Database Actions' SQL; /sql/commands too): navigator (pickSchema, objects with
-                           columns, objectStatements), toolbar, output tabs, history (meta.sql_history, 108), plan trees, Run as an app's role, (sprint 93) Save / Rename / Download as SQL Scripts, bind and substitution values, POST /sql/worksheet/format; GET /sql/worksheet/navigator
+                           columns, objectStatements), toolbar, output tabs, history (meta.sql_history, 108), plan trees, Run as an app's role, (sprint 93) Save / Rename / Download as SQL Scripts, bind and substitution values, POST /sql/worksheet/format; GET /sql/worksheet/navigator;
+                           (sprint 107) transaction mode: the txn field, Commit / Rollback (mode=commit|rollback), txnBadge(), GET/POST /sql/worksheet/txn (JSON)
     object-browser.ts      (sprint 75) the Object Browser: objects by type, system objects hidden, a table in tabs, column actions as SQL to review
     table-editor.ts        (sprint 95) Table Properties: GET/POST /sql/objects/table (create, edit ?o=, ?template=), fromForm(), Preview / Apply
                            (one transaction) / Open in the worksheet
@@ -299,7 +322,11 @@ src/
     pwa.ts                 Settings → Progressive Web App (icon upload)
     themeroller.ts         Settings → Theme Roller: style variants (add, edit, rename, delete), default style, users may choose
     subscriptions.ts       Shared Components → Subscriptions: subscribe, refresh, unsubscribe, subscribers and publish; the note under a component
-    reporter.ts            page designer: Data Reporter settings (sources: table or view, offered columns, labels, masks; sharing)
+    reporter.ts            page designer: Data Reporter settings (sources: table or view, offered columns, labels, masks; sharing;
+                           (sprint 110) a dataset as a source, who may edit, who may moderate, publishing)
+    datasets.ts            (sprint 110) App Builder → Data Reporter (/builder/reporter): datasets (new: schema, tables; a dataset's
+                           joins, columns, row filter, query and preview), files (download, export all, import), Create reporting
+                           application
     form-designer.ts       page designer: Form Designer settings (designers' scheme; sources: key, actions, offered columns, labels, lists of values)
     workingcopies.ts       Working copies: list and create, compare with differences, merge or refresh with conflict choices, delete
     rest.ts                REST module endpoints list and curl example (Shared Components)
@@ -339,14 +366,18 @@ src/
 public/
   app.css                  theme (light/dark, responsive; --font, --font-size, --radius for style variants; template option classes to-*)
   app.js                   client runtime: dialogs (dialog_closed actions), popup LOVs, dynamic actions (focus, classes, messages), grids (add/duplicate rows, master-detail refresh, move/resize columns, copy/paste of cell ranges), menus, lazy regions, maps (Leaflet layers, marker clusters, heat layer, layer legend, area/distance filter) (no inline JS)
-  code-editor.js, .css     builder code editor: enhances <textarea data-code>, highlighting, suggestions (no dependencies)
+  code-editor.js, .css     builder code editor: enhances <textarea data-code>, highlighting, suggestions (no dependencies);
+                           (sprint 108) the current line, and read-only <pre data-code-view="sql|plpgsql|json|html"> highlighted;
+                           its colours are the --ce-* tokens in builder.css
   palette.js               (sprint 96) the builder's search dialog (Ctrl+K), recently visited SQL Workshop pages, the Launchpad's tabs
   sql-monitor.js           (sprint 102) the SQL Monitor: reloads the sessions' live part every 5 / 15 / 60 s, Pause (localStorage pgkiln.sqlMonitor)
   data-modeler.js, .css    (sprint 98) the Data Modeler: drag boxes, undo/redo, save, zoom/fit, auto layout, mini-map, SVG/PNG export, print
   worksheet.js, .css       (sprint 91) the SQL Worksheet: run keys with the cursor, output tabs, navigator swap and search, drag and drop, splitters;
-                           (92) grid sort, value dialog, history filter; (93) worksheet tabs in localStorage, Files, binds dialog, format, find, case
+                           (92) grid sort, value dialog, history filter; (93) worksheet tabs in localStorage, Files, binds dialog, format, find, case;
+                           (107) Autocommit / Transaction per tab, the badge from the server, beforeunload, rollback on closing a tab
   builder.css              builder only: IDE look (dark chrome, icon rail, panes); design tokens at the top (colour,
-                           elevation, radius, type, motion; light and dark sets, sprint 105), then the shared controls
+                           elevation, radius, type, motion; light and dark sets, sprint 105; code editor --ce-*, sprint 108),
+                           then the shared controls
   builder.js               builder only: tabs, component tree, property filter, drag and drop on the layout
   builder-icons.svg        builder only: icons of the rail, toolbar and designer (b-*); b-kiln is the brand mark (brandMark() in ui.ts)
 test/
@@ -377,6 +408,10 @@ test/
   object-actions.test.ts   (sprint 94) object menus: Quick DDL, Drop with dependents, Add index / trigger / policy, the panel, not-found
   data-modeler.test.ts     (sprint 98) Data Modeler: "hr core" with its FK lines, saved positions, SVG, objects, DDL, dictionary, geometry
   worksheet.test.ts        (sprint 91) the SQL Worksheet: statement at the cursor, Run Script log, plans, notices, history, navigator, Run as
+  worksheet-txn.test.ts    (sprint 107) transaction mode: the tab's transaction, Commit / Rollback, typed COMMIT, aborted, idle timeout, refusals,
+                           Explain in it, Change Log at COMMIT, the JSON endpoint, sign-out
+  datasets.test.ts         (sprint 110) datasets: checks and SQL, proposed joins, the builder's pages, files, the workspace export;
+                           a reporting application in two clicks, an editor publishes, a viewer opens the stable URL, pins
   quicksql.test.ts         Quick SQL parser and DDL generator
   xml.test.ts              XML reader: rows, attributes, paths, refused DTDs and entities, limits
   printing.test.ts         report PDFs
@@ -422,9 +457,10 @@ test/
   ai-mock.ts               a local mock of the Claude Messages API (SSE stream) and OpenAI Chat Completions
   helpers.ts               a cookie-keeping test browser
   e2e/responsive.test.ts   browser tests at phone/tablet/desktop widths (Playwright)
-  e2e/code-editor.test.ts  the code editor in a browser: highlighting, keys, suggestions, touch, screen readers
+  e2e/code-editor.test.ts  the code editor in a browser: highlighting, keys, suggestions, touch, screen readers, syntax colours at AA in both themes (sprint 108)
   e2e/data-modeler.test.ts (sprint 98) the Data Modeler in a browser: drag, save, reload, undo/redo, zoom, mini-map, exports, phone
-  e2e/worksheet.test.ts    (sprint 91) the SQL Worksheet in a browser: run keys, tabs, navigator, drag and drop, splitters, phone, no JavaScript
+  e2e/worksheet.test.ts    (sprint 91) the SQL Worksheet in a browser: run keys, tabs, navigator, drag and drop, splitters, phone, no JavaScript;
+                           (107) transaction mode: badge, reload, Rollback, closing a tab, Autocommit switch, beforeunload
   e2e/items.test.ts        sprint 26 item types in a browser: editors, tags, stars, dates, reveal; without JavaScript
   e2e/designer.test.ts     page designer: panes per width, drag and drop, keyboard, Arrange buttons, builder theme
   e2e/calendar.test.ts     calendar drag and drop and create on click, view switching, chart drill-down
@@ -475,7 +511,7 @@ CI (`.github/workflows/ci.yml`) runs these jobs against PostgreSQL 17:
 - **test**: typecheck and `npm test` on a fresh database;
 - **e2e**: the browser tests, uploading the screenshots as an artifact; `test/e2e/accessibility.test.ts` runs
   axe-core (WCAG 2.1 A and AA rules) on every page of the HR example (light, dark, Iris) and the builder's main pages
-  and allows no violation;
+  (in both builder themes, with the SQL Workshop and the wizards, since sprint 108) and allows no violation;
 - **docker**: builds the image and starts the compose stack as a user would.
 
 - **upgrade**: installs each earlier release (`v0.31.0` …) with its HR example (`git archive <tag> | tar -x`,

package/examples/hr/hr_63_datasets.sql

@@ -0,0 +1,29 @@
+-- =====================================================================
+-- HR example, part 63: a Data Reporter dataset (docs/guide/04-pages-and-
+-- regions.md, "Datasets and reporting applications")
+--
+-- The dataset "hr" of the Default workspace: employees (hr.emp) joined to
+-- their department (hr.dept, a left join on the foreign key deptno), the
+-- columns business users may see with labels, format masks and
+-- descriptions, and a row filter: active employees only. In the builder,
+-- App Builder → Data Reporter → Create reporting application makes a
+-- reporting application on it in two clicks; datasets are installation
+-- data (a file of their own, and the workspace export), not part of the
+-- HR application's export.
+-- =====================================================================
+
+insert into meta.dataset (workspace_id, name, label, description, schema_name, tables, columns, filters, created_by)
+values (1, 'hr', 'HR', 'Active employees with their department.', 'hr',
+  '[{"alias": "t1", "table": "emp"},
+    {"alias": "t2", "table": "dept", "join": {"to": "t1", "type": "left", "on": [{"column": "deptno", "ref": "deptno"}]}}]',
+  '[{"name": "empno", "table": "t1", "column": "empno", "label": "No."},
+    {"name": "ename", "table": "t1", "column": "ename", "label": "Name"},
+    {"name": "job", "table": "t1", "column": "job", "label": "Job"},
+    {"name": "hiredate", "table": "t1", "column": "hiredate", "label": "Hire date"},
+    {"name": "sal", "table": "t1", "column": "sal", "label": "Salary", "format": "FML999G990D00", "description": "Monthly salary"},
+    {"name": "comm", "table": "t1", "column": "comm", "label": "Commission", "format": "FML999G990D00"},
+    {"name": "dname", "table": "t2", "column": "dname", "label": "Department"},
+    {"name": "loc", "table": "t2", "column": "loc", "label": "Location", "description": "Where the department is"}]',
+  '[{"table": "t1", "column": "active", "op": "eq", "value": "true"}]',
+  'admin')
+on conflict (workspace_id, name) do nothing;

package/package.json

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

package/public/app.css

@@ -2042,3 +2042,9 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .t-footer .icon { width: 1rem; height: 1rem; }
 @media print { .t-footer { display: none; } }
 .list-card:hover { border-top-color: var(--card-color); }
+
+/* (sprint 110) Data Reporter: a saved report's link and actions, column descriptions */
+.reporter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.75rem; min-width: 0; }
+.reporter-actions .buttons { margin: 0; }
+.reporter-link { flex: 1 1 14rem; min-width: 0; font-family: var(--mono, monospace); font-size: 0.85rem; }
+.reporter-coldesc { display: block; font-size: 0.78rem; }

package/public/builder.css

@@ -9,6 +9,8 @@
      --accent ≥ 4.8:1 on every surface, --muted ≥ 5.6:1, in both themes
    - elevation: --shadow-xs … --shadow-lg; radius: --radius-sm / --radius / --radius-lg
    - type: --fs-xs … --fs-xl; motion: --ease and --dur (none under prefers-reduced-motion)
+   - code (sprint 108): --ce-* for public/code-editor.js and read-only <pre data-code-view>; every
+     syntax colour ≥ 4.5:1 on --ce-bg in both themes (test/e2e/code-editor.test.ts checks it)
    The light set first, the dark set for data-theme="dark" and for "System" when
    the OS prefers dark. The chrome (rail, toolbar, status bar) is dark in both
    themes (the same colours), a shade deeper than the page in the dark one. */
@@ -59,10 +61,31 @@
   --block: #ffffff;
   --block-head: #f7f5f2;
   --code-bg: #fbfaf8;
+  --field-border: var(--border-strong);
+
+  /* code editor (sprint 108, public/code-editor.js): every token colour is at least 4.5:1 on --ce-bg
+     (keywords take the ember; the others cool hues so they stay apart) */
   --ce-bg: #fdfcfb;
   --ce-gutter: #f5f3f0;
   --ce-gutter-text: #6b645d;
-  --field-border: var(--border-strong);
+  --ce-gutter-active: #1c1917;
+  --ce-text: #1c1917;
+  --ce-kw: #b23a0a;
+  --ce-type: #0e6b66;
+  --ce-fn: #2457a6;
+  --ce-str: #3a7516;
+  --ce-num: #8a3ea0;
+  --ce-com: #736c66;
+  --ce-bind: #b02a5c;
+  --ce-qid: #80590a;
+  --ce-op: #5c5650;
+  --ce-tag: #2457a6;
+  --ce-attr: #b23a0a;
+  --ce-err: #c0262d;
+  --ce-match: rgb(234 88 12 / 16%);
+  --ce-match-ring: rgb(194 65 12 / 55%);
+  --ce-line: rgb(28 25 23 / 4.5%);
+  --ce-select: rgb(234 88 12 / 20%);
 
   /* shape, elevation, type, motion */
   --radius-sm: 6px;
@@ -91,7 +114,10 @@
     --bg: #181715; --surface: #1f1d1b; --surface-2: #242220; --surface-3: #2d2b28; --text: #edebe8; --muted: #a8a19a;
     --border: #312e2b; --border-strong: #423e39; --accent: #ff9152; --accent-text: #1a0b03; --accent-soft: #3a1f12; --ring: rgb(255 145 82 / 30%); --sel-bg: #4a2816; --sel-bar: #ff9152;
     --gold: #ff9152; --canvas: #151412; --canvas-dot: #2a2825; --block: #222120; --block-head: #292725; --code-bg: #1a1917; --warn: #e0a740;
-    --ce-bg: #1a1917; --ce-gutter: #1f1d1b; --ce-gutter-text: #8f8880;
+    --ce-bg: #1a1917; --ce-gutter: #1f1d1b; --ce-gutter-text: #8f8880; --ce-gutter-active: #e9e6e3; --ce-text: #e9e6e3;
+    --ce-kw: #ff9152; --ce-type: #5cc8bd; --ce-fn: #8ab4ff; --ce-str: #a5d68a; --ce-num: #d4a8ff; --ce-com: #938b83; --ce-bind: #ff8fb8;
+    --ce-qid: #e6c26a; --ce-op: #b8b0a8; --ce-tag: #8ab4ff; --ce-attr: #ff9152; --ce-err: #ff7a70;
+    --ce-match: rgb(255 145 82 / 22%); --ce-match-ring: rgb(255 145 82 / 60%); --ce-line: rgb(255 255 255 / 4.5%); --ce-select: rgb(255 145 82 / 28%);
     --shadow-xs: 0 1px 1px rgb(0 0 0 / 30%);
     --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 3%);
     --shadow-md: 0 4px 16px -2px rgb(0 0 0 / 50%), inset 0 1px 0 rgb(255 255 255 / 4%);
@@ -105,7 +131,10 @@
   --bg: #181715; --surface: #1f1d1b; --surface-2: #242220; --surface-3: #2d2b28; --text: #edebe8; --muted: #a8a19a;
   --border: #312e2b; --border-strong: #423e39; --accent: #ff9152; --accent-text: #1a0b03; --accent-soft: #3a1f12; --ring: rgb(255 145 82 / 30%); --sel-bg: #4a2816; --sel-bar: #ff9152;
   --gold: #ff9152; --canvas: #151412; --canvas-dot: #2a2825; --block: #222120; --block-head: #292725; --code-bg: #1a1917; --warn: #e0a740;
-  --ce-bg: #1a1917; --ce-gutter: #1f1d1b; --ce-gutter-text: #8f8880;
+  --ce-bg: #1a1917; --ce-gutter: #1f1d1b; --ce-gutter-text: #8f8880; --ce-gutter-active: #e9e6e3; --ce-text: #e9e6e3;
+  --ce-kw: #ff9152; --ce-type: #5cc8bd; --ce-fn: #8ab4ff; --ce-str: #a5d68a; --ce-num: #d4a8ff; --ce-com: #938b83; --ce-bind: #ff8fb8;
+  --ce-qid: #e6c26a; --ce-op: #b8b0a8; --ce-tag: #8ab4ff; --ce-attr: #ff9152; --ce-err: #ff7a70;
+  --ce-match: rgb(255 145 82 / 22%); --ce-match-ring: rgb(255 145 82 / 60%); --ce-line: rgb(255 255 255 / 4.5%); --ce-select: rgb(255 145 82 / 28%);
   --shadow-xs: 0 1px 1px rgb(0 0 0 / 30%);
   --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 3%);
   --shadow-md: 0 4px 16px -2px rgb(0 0 0 / 50%), inset 0 1px 0 rgb(255 255 255 / 4%);
@@ -1301,3 +1330,66 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .rm-main { display: grid; gap: 1rem; min-width: 0; }
 .rm-tree .tree code { font-size: 0.75rem; min-width: 3.4rem; }
 @media (max-width: 760px) { .rm-layout { grid-template-columns: minmax(0, 1fr); } }
+
+/* ------------------------------------------------------------ page polish (sprint 108): Object Browser, wizards, SQL Monitor */
+/* Object Browser: the tree in the builder's type scale, the selected object with the ember bar */
+.ob-folder .tree { font-size: var(--fs-base); }
+.ob-folder .tree a { padding-block: 0.28rem; }
+.ob-folder .tree a[aria-current="page"] { background: var(--sel-bg); color: var(--sel-text); box-shadow: inset 2px 0 0 var(--sel-bar); font-weight: 600; }
+.ob-folder > summary { border-radius: var(--radius-sm); }
+.ob-folder > summary:hover { background: var(--surface-3); }
+.ob-folder > summary .icon { color: var(--muted); }
+/* wizards: the icon picker looks like a select; a colour field is a swatch, not a bar */
+.ide .icon-picker > summary { border-color: var(--field-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); transition: border-color var(--dur) var(--ease); }
+.ide .icon-picker > summary:hover { border-color: color-mix(in srgb, var(--text) 22%, var(--border-strong)); }
+.ide .icon-picker > summary::after {
+  content: ""; width: 14px; height: 14px; margin-left: 0.15rem;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857d75' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
+}
+.ide .icon-picker[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
+.ide .icon-picker-panel { border-color: var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); background: var(--surface); }
+.ide .field input[type=color]:not(.swatch) {
+  width: 4.5rem; height: 34px; min-height: 0; padding: 3px; cursor: pointer;
+  border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-xs);
+}
+.ide .field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
+.ide .field input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
+.ide .field input[type=color]::-moz-color-swatch { border: 0; border-radius: 4px; }
+/* SQL Monitor: the refresh controls on one row */
+.sm-toolbar:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
+.sm-toolbar select { width: auto; }
+.sm-toolbar [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
+
+/* (sprint 109, WS-1) the Workspace home (/builder/home) */
+.wh-title { margin: 0 0 14px; font-size: var(--fs-xl); overflow-wrap: anywhere; }
+.wh-summary h2, .wh-top-head h2 { margin: 0 0 10px; }
+.wh-stats a.stat { color: inherit; text-decoration: none; }
+.wh-stats a.stat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
+.wh-stats a.stat span { color: var(--accent); }
+.wh-top-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
+.wh-top-head h2 { margin: 0; }
+.wh-timeframe { display: inline-flex; }
+.wh-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 10px; }
+.wh-top > .region { margin: 0; min-width: 0; }
+.wh-message { margin-bottom: 16px; }
+.wh-message-text { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
+.wh-edit > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
+.wh-edit > summary::-webkit-details-marker { display: none; }
+.wh-edit[open] > summary { margin-bottom: 10px; }
+.wh-release { display: flex; gap: 0.6rem; align-items: flex-start; }
+.wh-release p { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
+.wh-release-form { margin-top: 10px; }
+@media (max-width: 640px) {
+  .wh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+  .wh-stats .stat { padding: 0.6rem 0.75rem; }
+  .wh-stats .stat b { font-size: 1.2rem; }
+}
+
+/* (sprint 110) App Builder → Data Reporter: datasets */
+.dataset-checks { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.25rem 0 0.5rem; overflow-wrap: anywhere; }
+.dataset-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
+.dataset-filter > select, .dataset-filter > input { flex: 1 1 10rem; min-width: 0; }
+.dataset-columns input { min-width: 0; width: 100%; }
+.dataset-page pre.code { white-space: pre-wrap; overflow-wrap: anywhere; }
+.dataset-schema { flex-wrap: wrap; }
+.dataset-schema > select { flex: 1 1 10rem; min-width: 0; }

package/public/code-editor.css

@@ -2,79 +2,23 @@
    transparent and lies exactly over the highlighted copy (.ce-code), so both
    must share font, size, line height, padding and tab size. */
 :root {
-  --ce-bg: #fbfcfd;
-  --ce-gutter: #f1f3f6;
-  --ce-gutter-text: #5d6876;
-  --ce-text: #1b2330;
-  --ce-kw: #8b2bb9;
-  --ce-type: #0b6e8a;
-  --ce-fn: #1d5fc4;
-  --ce-str: #1d7a3a;
-  --ce-num: #b35400;
-  --ce-com: #6b7685;
-  --ce-bind: #b0306a;
-  --ce-qid: #7a5b00;
-  --ce-tag: #1d5fc4;
-  --ce-attr: #8b2bb9;
-  --ce-err: #c23028;
-  --ce-match: rgb(11 99 197 / 18%);
-  --ce-select: rgb(11 99 197 / 22%);
+  /* the colours (--ce-bg, --ce-kw, …, --ce-line, --ce-select) are tokens in builder.css, light and dark */
   --ce-font: 0.84rem;
   --ce-lh: 20px; /* whole pixels: fractional line heights drift apart over thousands of lines */
 }
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --ce-bg: #12161d;
-    --ce-gutter: #171c24;
-    --ce-gutter-text: #8f99a8;
-    --ce-text: #e3e7ed;
-    --ce-kw: #d39bff;
-    --ce-type: #5fd0e6;
-    --ce-fn: #82b6ff;
-    --ce-str: #8fd694;
-    --ce-num: #ffb46b;
-    --ce-com: #8591a3;
-    --ce-bind: #ff8cc0;
-    --ce-qid: #e8c66a;
-    --ce-tag: #82b6ff;
-    --ce-attr: #d39bff;
-    --ce-err: #ff7a70;
-    --ce-match: rgb(105 164 255 / 25%);
-    --ce-select: rgb(105 164 255 / 30%);
-  }
-}
-:root[data-theme="dark"] {
-  --ce-bg: #12161d;
-  --ce-gutter: #171c24;
-  --ce-gutter-text: #8f99a8;
-  --ce-text: #e3e7ed;
-  --ce-kw: #d39bff;
-  --ce-type: #5fd0e6;
-  --ce-fn: #82b6ff;
-  --ce-str: #8fd694;
-  --ce-num: #ffb46b;
-  --ce-com: #8591a3;
-  --ce-bind: #ff8cc0;
-  --ce-qid: #e8c66a;
-  --ce-tag: #82b6ff;
-  --ce-attr: #d39bff;
-  --ce-err: #ff7a70;
-  --ce-match: rgb(105 164 255 / 25%);
-  --ce-select: rgb(105 164 255 / 30%);
-}
 @media (pointer: coarse) {
   :root { --ce-font: 16px; --ce-lh: 24px; } /* the same as other fields: no zoom on focus in iOS */
 }
 
 .ce {
   position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
-  min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--ce-bg);
+  min-width: 0; max-width: 100%; border: 1px solid var(--field-border, var(--border)); border-radius: var(--radius-sm, 6px); background: var(--ce-bg);
 }
-.ce:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.ce:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring, transparent); }
 .ce-gutter {
   --ce-digits: 2;
   width: calc(var(--ce-digits) * 1ch + 1.1rem); overflow: hidden; position: relative;
-  background: var(--ce-gutter); border-right: 1px solid var(--border); border-radius: 6px 0 0 0;
+  background: var(--ce-gutter); border-right: 1px solid var(--border); border-radius: var(--radius-sm, 6px) 0 0 0;
   color: var(--ce-gutter-text); user-select: none;
 }
 .ce-gutter, .ce .ce-code, .ce textarea.ce-input {
@@ -82,6 +26,11 @@
   font-variant-ligatures: none; letter-spacing: 0; font-kerning: none;
 }
 .ce-nums { position: absolute; top: 0; left: 0; right: 0; white-space: pre; text-align: right; padding: 0.5rem 0.45rem 0 0; will-change: transform; }
+/* the caret's line (sprint 108): a band behind the text and its number in the gutter, while the editor has the focus */
+.ce-cur, .ce-cur-num { position: absolute; left: 0; right: 0; top: 0; height: var(--ce-lh); will-change: transform; display: none; }
+.ce-cur { background: var(--ce-line); }
+.ce-cur-num { padding-right: 0.45rem; text-align: right; color: var(--ce-gutter-active); background: var(--ce-gutter); font-weight: 650; }
+.ce:focus-within :is(.ce-cur, .ce-cur-num):not([hidden]) { display: block; }
 .ce-main { position: relative; min-width: 0; }
 .ce .ce-hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
 .ce .ce-code {
@@ -99,29 +48,33 @@
 .ce textarea.ce-input:focus-visible { outline: none; }
 .ce textarea.sql-editor { min-height: 18rem; }
 
-/* tokens */
-.ce-code .t-kw { color: var(--ce-kw); font-weight: 600; }
-.ce-code .t-type { color: var(--ce-type); }
-.ce-code .t-fn { color: var(--ce-fn); }
-.ce-code .t-str { color: var(--ce-str); }
-.ce-code .t-key { color: var(--ce-fn); }
-.ce-code .t-num { color: var(--ce-num); }
-.ce-code .t-com { color: var(--ce-com); font-style: italic; }
-.ce-code .t-bind, .ce-code .t-sub { color: var(--ce-bind); font-weight: 600; }
-.ce-code .t-qid { color: var(--ce-qid); }
-.ce-code .t-dol { color: var(--ce-str); font-weight: 600; }
-.ce-code .t-tag { color: var(--ce-tag); }
-.ce-code .t-attr { color: var(--ce-attr); }
-.ce-code .t-ent { color: var(--ce-num); }
-.ce-code .t-err { color: var(--ce-err); text-decoration: wavy underline; }
-.ce-code .t-op, .ce-code .t-pun, .ce-code .t-br, .ce-code .t-id { color: var(--ce-text); }
-.ce-code .t-match { background: var(--ce-match); border-radius: 2px; outline: 1px solid var(--ce-match); }
+/* tokens: in the editor and in read-only code (<pre data-code-view>, sprint 108) */
+:is(.ce-code, .ce-view) .t-kw { color: var(--ce-kw); font-weight: 600; }
+:is(.ce-code, .ce-view) .t-type { color: var(--ce-type); }
+:is(.ce-code, .ce-view) .t-fn { color: var(--ce-fn); }
+:is(.ce-code, .ce-view) .t-str { color: var(--ce-str); }
+:is(.ce-code, .ce-view) .t-key { color: var(--ce-fn); }
+:is(.ce-code, .ce-view) .t-num { color: var(--ce-num); }
+:is(.ce-code, .ce-view) .t-com { color: var(--ce-com); font-style: italic; }
+:is(.ce-code, .ce-view) .t-bind, :is(.ce-code, .ce-view) .t-sub { color: var(--ce-bind); font-weight: 600; }
+:is(.ce-code, .ce-view) .t-qid { color: var(--ce-qid); }
+:is(.ce-code, .ce-view) .t-dol { color: var(--ce-str); font-weight: 600; }
+:is(.ce-code, .ce-view) .t-tag { color: var(--ce-tag); }
+:is(.ce-code, .ce-view) .t-attr { color: var(--ce-attr); }
+:is(.ce-code, .ce-view) .t-ent { color: var(--ce-num); }
+:is(.ce-code, .ce-view) .t-err { color: var(--ce-err); text-decoration: wavy underline; }
+:is(.ce-code, .ce-view) .t-op { color: var(--ce-op); }
+:is(.ce-code, .ce-view) .t-pun, :is(.ce-code, .ce-view) .t-br, :is(.ce-code, .ce-view) .t-id { color: var(--ce-text); }
+.ce-code .t-match { background: var(--ce-match); border-radius: 2px; outline: 1px solid var(--ce-match-ring); }
+
+pre.ce-view { background: var(--ce-bg); color: var(--ce-text); border-color: var(--border); }
+pre.ce-view::selection, pre.ce-view ::selection { background: var(--ce-select); }
 
 /* status bar: language, hint, caret position, check */
 .ce-bar {
   grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem;
   padding: 0.2rem 0.5rem; border-top: 1px solid var(--border); background: var(--ce-gutter);
-  border-radius: 0 0 6px 6px; font-size: 0.75rem; color: var(--muted); min-width: 0;
+  border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px); font-size: 0.75rem; color: var(--muted); min-width: 0;
 }
 .ce-lang { font-weight: 650; letter-spacing: 0.02em; }
 .ce-hint { flex: 1 1 12rem; min-width: 0; }
@@ -138,7 +91,7 @@
   position: absolute; z-index: 30; left: 0; top: 0; margin: 0; padding: 0.25rem 0; list-style: none;
   width: max-content; min-width: 14rem; max-width: min(34rem, calc(100% - 0.5rem)); max-height: 15rem; overflow: auto;
   background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
-  box-shadow: 0 8px 24px rgb(16 24 40 / 18%); font-size: 0.82rem;
+  box-shadow: var(--shadow-lg, 0 8px 24px rgb(16 24 40 / 18%)); font-size: 0.82rem;
 }
 .ce-opt { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.2rem 0.6rem 0.2rem 0.4rem; cursor: pointer; white-space: nowrap; }
 .ce-opt::before {

package/public/code-editor.js

@@ -15,6 +15,8 @@
 //   - "Check" plans the SQL like the Advisor (POST /builder/code/check)
 //   - screen readers keep the plain textarea; the list is announced through
 //     aria-activedescendant and a polite live region
+//   - (sprint 108) read-only code, <pre data-code-view="sql|plpgsql|json|html">, is
+//     highlighted with the same lexer and colours (DDL, generated SQL)
 //
 // Strict CSP: no inline styles; geometry is set through the CSSOM. Suggestions
 // and highlighted text are built as text nodes, never parsed as HTML.
@@ -437,15 +439,20 @@
       gutter.setAttribute('aria-hidden', 'true');
       const nums = document.createElement('div');
       nums.className = 'ce-nums';
-      gutter.append(nums);
+      // the caret's line: a band behind the text, its number over the gutter's
+      const curNum = document.createElement('div');
+      curNum.className = 'ce-cur-num';
+      gutter.append(nums, curNum);
       const main = document.createElement('div');
       main.className = 'ce-main';
       const hl = document.createElement('div');
       hl.className = 'ce-hl';
       hl.setAttribute('aria-hidden', 'true');
+      const cur = document.createElement('div');
+      cur.className = 'ce-cur';
       const inner = document.createElement('pre');
       inner.className = 'ce-code';
-      hl.append(inner);
+      hl.append(cur, inner);
       ta.parentNode.insertBefore(wrap, ta);
       main.append(hl, ta);
       wrap.append(gutter, main);
@@ -502,7 +509,7 @@
       ta.setAttribute('aria-autocomplete', 'list');
       ta.setAttribute('aria-haspopup', 'listbox');
       ta.setAttribute('aria-controls', list.id);
-      Object.assign(this, { wrap, gutter, nums, main, hl, inner, list, bar, langEl: lang, hint, pos, msg, check, live, suggest });
+      Object.assign(this, { wrap, gutter, nums, cur, curNum, main, hl, inner, list, bar, langEl: lang, hint, pos, msg, check, live, suggest });
       this.applyLang();
     }
 
@@ -661,9 +668,27 @@
         this.digits = digits;
         this.gutter.style.setProperty('--ce-digits', String(Math.max(2, digits)));
       }
+      this.placeLine();
       if (this.pop) this.place();
     }
 
+    /** The current-line band and number: on the caret's line; hidden while a selection spans lines. */
+    placeLine() {
+      const ta = this.ta;
+      const lines = this.lineStarts;
+      const a = lowerBound(lines, ta.selectionStart + 1);
+      const b = lowerBound(lines, ta.selectionEnd + 1);
+      const hide = a !== b;
+      this.cur.hidden = hide;
+      this.curNum.hidden = hide;
+      if (hide) return;
+      const { lh, padTop } = this.metrics();
+      const y = padTop + (a - 1) * lh - ta.scrollTop;
+      this.cur.style.transform = `translateY(${y}px)`;
+      this.curNum.style.transform = `translateY(${y}px)`;
+      this.curNum.textContent = String(a);
+    }
+
     tokenAt(off) {
       this.sync();
       const { T, S, E } = this.toks;
@@ -703,6 +728,7 @@
       this.sync();
       if (this.pop && this.ta.selectionStart !== this.ta.selectionEnd) this.close();
       if (this.updateMatch()) this.schedule(true);
+      else this.placeLine();
       const c = this.ta.selectionStart;
       const line = lowerBound(this.lineStarts, c + 1);
       this.pos.textContent = `Ln ${line}, Col ${c - this.lineStarts[line - 1] + 1}`;
@@ -997,12 +1023,41 @@
     return lo;
   }
 
+  /** Highlight a read-only <pre data-code-view>: its text, as spans (text nodes only). Long ones stay plain. */
+  function colorize(pre) {
+    const lang = pre.dataset.codeView in LANG_LABEL ? pre.dataset.codeView : 'text';
+    pre.classList.add('ce-view');
+    const text = pre.textContent;
+    if (lang === 'text' || text.length > 200000) return;
+    const { T, S, E } = lex(lang, text);
+    const frag = document.createDocumentFragment();
+    let pos = 0;
+    for (let k = 0; k < T.length; k++) {
+      const st = Math.max(S[k], pos);
+      if (E[k] <= st) continue;
+      if (st > pos) frag.append(text.slice(pos, st));
+      const span = document.createElement('span');
+      span.className = `t-${T[k]}`;
+      span.textContent = text.slice(st, E[k]);
+      frag.append(span);
+      pos = E[k];
+    }
+    if (pos < text.length) frag.append(text.slice(pos));
+    pre.replaceChildren(frag);
+  }
+
   const editors = new WeakMap();
+  const viewed = new WeakSet();
   function enhance(root) {
     for (const ta of (root || document).querySelectorAll('textarea[data-code]')) {
       if (editors.has(ta) || ta.closest('.ce')) continue;
       editors.set(ta, new Editor(ta));
     }
+    for (const pre of (root || document).querySelectorAll('pre[data-code-view]')) {
+      if (viewed.has(pre)) continue;
+      viewed.add(pre);
+      colorize(pre);
+    }
   }
   window.pgkilnCodeEditor = { enhance, editorOf: (ta) => editors.get(ta) };
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => enhance());