pgkiln 0.56.0 → 0.57.0

package/SECURITY.md

@@ -111,6 +111,7 @@ first version (MVP). Every finding below has a regression test in
 | App Gallery (sprint 120) | Installing a sample app runs shipped SQL as the owner, so only administrators may, with the CSRF token, into their current workspace; a request names only a key of `gallery.json` of its own kind (sample, starter, utility), never a path, and the file names in the catalogue must match fixed patterns. The script and the workspace placement run in one transaction: a failing script leaves nothing behind. Utility apps are blueprints: any developer installs one into their own workspace, only after the review. An installed sample is edited only from its own workspace. The search term is escaped. |
 | Builder language (sprint 121) | Only the codes of the builder's languages are accepted: anything else on a sign-in link is ignored (also a repeated parameter), the status bar's menu refuses it (400) and checks the CSRF token. A sign-in link sets only an HttpOnly, SameSite=Lax cookie that the sign-in page reads; a developer's stored choice changes only through their own signed-in session. Translated texts are escaped like the English ones; placeholders are filled with escaped values unless the code passes markup on purpose (`tx.rich`). |
 | Ask and smart filters set facets (sprint 122) | A phrase can only set facets of the faceted search and smart filters regions on the page that the user sees, on their configured columns; values and range bounds become the facets' own URL parameters (bounds checked as numbers or dates) and reach SQL as query parameters, never as text. Values in a phrase are looked up in the report's rows with a query parameter, as the application's role. A facet chip's Remove is checked against the chips the form showed (a tampered key is refused). Sample apps keep their demo accounts with known passwords: install them on development or demo instances only. |
+| Builder texts in the browser (sprint 123) | The builder's JavaScript gets its texts as JSON in an attribute (`<div id="builder-texts" data-texts>`), escaped like any attribute value, so builder pages still have no inline script. The texts are the fixed message files, never data; scripts put them into the page with `textContent` and attributes, not as HTML. |
 
 ## Findings of the MVP review and their fixes
 

package/docs/apex-feature-parity.md

@@ -249,7 +249,7 @@ row above where there is one.
 | WS-4 AI Agents with tools | ✅ | (sprint 111) AI Agents and AI Tools as shared components, a Navigate tool, Gemini and OpenAI-compatible services ([Workflow, automation and AI](#workflow-automation-and-ai)) |
 | WS-5 AI interactive reports: chips, computed columns | ✅ | (sprint 112) *Ask in your own words* with chips, Undo and computed columns; a phrase parser that needs no AI service; (sprint 122) phrases set faceted search and smart filter facets |
 | WS-6 Workflow 26.2: outcomes, migrating running instances, drafts, diagram export | ✅ | (sprint 114) Custom task outcomes, task events, Send E-Mail and draft steps, migrating running instances, the diagram as SVG / PNG ([Workflow, automation and AI](#workflow-automation-and-ai)) |
-| WS-7 The builder in more languages | ✅ | (sprint 121) The builder in Deutsch, English, Español, Français, Nederlands and Português: links on the sign-in page, a language menu in the status bar, the choice stored per developer (migration 127). Translated: the builder's frame, sign-in page, Workspace home, App Builder home, an application's home and tabs, the Page Designer's toolbar, menus, tree and gallery, the SQL Workshop's home and tabs; other screens move over incrementally (English until then). Builder texts are keyed message files with a coverage check in CI |
+| WS-7 The builder in more languages | ✅ | (sprint 121) The builder in Deutsch, English, Español, Français, Nederlands and Português: links on the sign-in page, a language menu in the status bar, the choice stored per developer (migration 127). Translated: the builder's frame, sign-in page, Workspace home, App Builder home, an application's home and tabs, the Page Designer's toolbar, menus, tree and gallery, the SQL Workshop's home and tabs; other screens move over incrementally (English until then). Builder texts are keyed message files with a coverage check in CI (sprint 123) Also the SQL Worksheet, the Object Browser and Table Properties, with the texts of the browser code. |
 | WS-8 App Gallery: more sample apps, Utility Apps | ✅ | (sprint 120) Four tabs with counts and a search that also works without JavaScript ([chapter 3](guide/03-builder.md#app-gallery)). *Sample Apps*: HR Demo, Tasks, ten single-topic apps (Sample Charts, Sample Cards, Sample Calendar, Sample Interactive Grids, Sample Dynamic Actions, Sample Reporting; sprint 122: Sample Maps, Sample Approvals, Sample Data Loading, Sample Files) and the **UX Pattern Catalog**, each with its own schema, data, demo account and explanatory texts, installed by administrators from one SQL file in one transaction; *Utility Apps*: Lookup Lists, Release Notes and Announcements as blueprints any developer installs into the workspace. APEX's 27 sample apps include topics pgkiln shows in HR Demo instead (REST, trees, collections); no remote catalogue |
 | WS-9 Mail queue reporting, workspace SMTP, workspace network ACLs | ✅ | (sprint 118) Administration → Mail queue (per hour and per workspace / application, the slowest provider calls, failures with the provider's answer, Retry and Purge), a workspace's own mail service, and a workspace's network access list that narrows the installation's allow-list for every outgoing call ([Administration](#administration)) |
 | WS-10 Universal Theme 26.2: Pillar appearances, navigation polish | ✅ | (sprint 117) Theme Roller → Navigation appearance Pillar Light / Pillar Dark per application or style, with a header strip colour for light and dark mode; the current page filled, its parents bold with an accent guide line; `u-color-*-subtle` utilities; a lighter processing indicator; RTL mirrored |

package/docs/guide/03-builder.md

@@ -274,8 +274,9 @@ device; other developers keep their own. It only changes the builder: your appli
 
 What is translated: the builder's frame (the rail, the top bar and its search, your account menu, the status bar,
 standard messages and error pages), the sign-in page, the Workspace home, the App Builder home, an application's
-home page and its tabs, the Page Designer's toolbar, menus, component tree, panes and gallery, and the SQL Workshop's
-home page and tabs. Other builder pages are still in English (they move over screen by screen); so are the
+home page and its tabs, the Page Designer's toolbar, menus, component tree, panes and gallery, the SQL Workshop's
+home page and tabs, and (sprint 123) the **SQL Worksheet** (with its messages in the browser), the **Object Browser**
+and **Table Properties**. Other builder pages are still in English (they move over screen by screen); so are the
 Page Designer's property names and their help, the links to this guide, and any SQL the builder generates.
 
 ## Workspace home

package/docs/guide/12-development.md

@@ -589,6 +589,20 @@ translated label (German nouns). Flash messages are translated where they are se
 display position, button position, component kind and SQL Workshop tool has its run-time key; and that every
 language file has exactly the English keys, the same `{placeholders}`, no empty texts and is mostly translated.
 
+**Texts in the browser** (sprint 123). The builder's own JavaScript (`public/*.js`) asks for texts with keys
+`js.<screen>.<what>`: `shell()` puts every `js.*` key in the developer's language into the page as JSON in an
+attribute, `<div id="builder-texts" hidden data-texts="…">` (escaped like any value; builder pages keep having no
+inline script). A script reads it once and fills placeholders itself:
+
+```js
+const TEXTS = (() => { try { return JSON.parse(document.getElementById('builder-texts')?.dataset.texts || '{}'); } catch { return {}; } })();
+const msg = (key, params = {}) => (TEXTS[key] ?? key).replace(/\{(\w+)\}/g, (m, k) => (k in params ? String(params[k]) : m));
+announce(msg('js.ws.copied', { what }));
+```
+
+The coverage check also scans `public/*.js` for `msg('js.…')` and fails when a key has no English text. Text
+from the server (a JSON answer's `message`) is translated on the server.
+
 Stays English by design: the property editor's field names and help, links to the guide, generated SQL, and pages
 not moved yet. The builder's language is separate from an application's languages (`src/i18n.ts`).
 

package/package.json

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

package/public/builder.css

@@ -1216,7 +1216,7 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .ob-folder > summary .kind { margin-left: auto; }
 .ob-folder .tree { padding-left: 0.75rem; }
 .ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
-.ob-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
+.ob-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
 .ob-actions { display: grid; gap: 0.6rem; margin-top: 1rem; }
 .ob-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
 .ob-action input:not([type=checkbox]) { width: 10rem; }

package/public/worksheet.js

@@ -21,6 +21,9 @@
   'use strict';
   const form = document.getElementById('ws');
   if (!form) return;
+  // (sprint 123) texts in the builder's language: #builder-texts (shell(), keys js.*), English in en.ts
+  const TEXTS = (() => { try { return JSON.parse(document.getElementById('builder-texts')?.dataset.texts || '{}'); } catch { return {}; } })();
+  const msg = (key, params = {}) => (TEXTS[key] ?? key).replace(/\{(\w+)\}/g, (m, k) => (k in params ? String(params[k]) : m));
   const ta = form.querySelector('textarea[name=sql]');
   const out = form.querySelector('.ws-output');
   const store = {
@@ -149,9 +152,9 @@
   const copy = async (text, what) => {
     try {
       await navigator.clipboard.writeText(text);
-      announce(`${what} copied.`);
+      announce(msg('js.ws.copied', { what }));
     } catch {
-      announce('Copying is not allowed here.');
+      announce(msg('js.ws.no_copy'));
     }
   };
   const announce = (msg) => {
@@ -165,7 +168,7 @@
       if (e.target.closest('[data-ws-copy]')) {
         const head = [...grid.tHead.rows[0].cells].slice(1).map((th) => th.textContent.trim());
         const rows = [...grid.tBodies[0].rows].map((tr) => [...tr.cells].slice(1).map((td) => cellValue(td).replace(/[\t\n]/g, ' ')));
-        copy([head, ...rows].map((r) => r.join('\t')).join('\n'), `${rows.length} rows`);
+        copy([head, ...rows].map((r) => r.join('\t')).join('\n'), msg('js.ws.rows', { n: rows.length }));
       }
       const sort = e.target.closest('[data-ws-sort]');
       if (sort) {
@@ -218,7 +221,7 @@
       run('statement');
     }
     const c = e.target.closest('[data-ws-copy-text]');
-    if (c) copy(c.dataset.wsCopyText, 'The statement');
+    if (c) copy(c.dataset.wsCopyText, msg('js.ws.the_statement'));
   });
 
   // ------------------------------------------------------------ (sprint 93) worksheets as tabs, kept in this browser
@@ -226,7 +229,7 @@
   const readTabs = () => { try { const v = JSON.parse(store.get('tabs') || 'null'); return v && Array.isArray(v.tabs) ? v : null; } catch { return null; } };
   const book = readTabs() || { active: '', tabs: [] };
   const newKey = () => Math.random().toString(36).slice(2, 10);
-  const untitled = () => { let n = 1; while (book.tabs.some((t) => t.name === `Untitled ${n}`)) n++; return `Untitled ${n}`; };
+  const untitled = () => { let n = 1; while (book.tabs.some((x) => x.name === msg('js.ws.untitled', { n }))) n++; return msg('js.ws.untitled', { n }); };
   const src = form.dataset.source;
   const sid = form.dataset.scriptId ? Number(form.dataset.scriptId) : null;
   const sname = form.dataset.scriptName;
@@ -273,16 +276,16 @@
       if (t === cur) b.setAttribute('aria-current', 'true');
       b.dataset.wsWtab = t.key;
       b.textContent = `${t.name}${dirty(t) ? '*' : ''}`;
-      b.title = t.scriptId ? `Script “${t.name}”${dirty(t) ? ' (unsaved changes)' : ''}` : 'Not saved as a script';
+      b.title = t.scriptId ? `${msg('js.ws.script', { name: t.name })}${dirty(t) ? ` ${msg('js.ws.unsaved')}` : ''}` : msg('js.ws.not_saved');
       const x = document.createElement('button');
       x.type = 'button';
       x.className = 'ws-wtab-close';
       x.dataset.wsWclose = t.key;
-      x.setAttribute('aria-label', `Close ${t.name}`);
+      x.setAttribute('aria-label', msg('js.ws.close_tab', { name: t.name }));
       x.textContent = '×';
       wrap.append(b, x);
       return wrap;
-    }), Object.assign(document.createElement('button'), { type: 'button', className: 'ws-wtab-new', title: 'New worksheet', textContent: '+' }));
+    }), Object.assign(document.createElement('button'), { type: 'button', className: 'ws-wtab-new', title: msg('js.ws.new_tab'), textContent: '+' }));
     persist();
   };
   const switchTo = (t) => {
@@ -297,8 +300,8 @@
   const newTab = () => switchTo(add({ key: newKey(), name: untitled(), scriptId: null, text: '', saved: '' }));
   const closeTab = (t) => {
     const txnOpen = t === cur ? txnBox.dataset.state !== 'none' : !!t.txnOpen;
-    if (txnOpen && !window.confirm(`“${t.name}” has an open transaction. Close it and roll the transaction back?`)) return;
-    if (!txnOpen && dirty(t) && t.text.trim() && !window.confirm(`Close “${t.name}” without saving?`)) return;
+    if (txnOpen && !window.confirm(msg('js.ws.close_txn', { name: t.name }))) return;
+    if (!txnOpen && dirty(t) && t.text.trim() && !window.confirm(msg('js.ws.close_unsaved', { name: t.name }))) return;
     if (t.txn) txnPost(t.key, 'rollback'); // the server knows best whether one is open
     const i = book.tabs.indexOf(t);
     book.tabs.splice(i, 1);
@@ -360,15 +363,15 @@
   const rollbackBtn = txnBox.querySelector('[data-ws-txn-rollback]');
   const commitNote = form.querySelector('[data-ws-commit-note]');
   const idleSeconds = Number(txnBox.dataset.idle) || 300;
-  const idleWords = idleSeconds % 60 ? `${idleSeconds} seconds` : `${idleSeconds / 60} minute${idleSeconds === 60 ? '' : 's'}`;
+  const idleWords = idleSeconds % 60 ? msg('js.ws.idle_seconds', { n: idleSeconds }) : msg(idleSeconds === 60 ? 'js.ws.idle_minute' : 'js.ws.idle_minutes', { n: idleSeconds / 60 });
   let txnInfo = { state: txnBox.dataset.state, statements: Number(txnBox.dataset.statements) || 0, startedMs: Number(txnBox.dataset.started) || null,
     lastMs: Number(txnBox.dataset.last) || null, note: txnBox.dataset.note || null };
   let clockSkew = Date.now() - (Number(txnBox.dataset.now) || Date.now());
   let txnTimer = 0;
   const badgeText = (i) => {
-    if (i.state === 'none') return i.note || 'No open transaction';
+    if (i.state === 'none') return i.note || msg('js.ws.txn_none');
     const min = i.startedMs ? Math.floor((Date.now() - clockSkew - i.startedMs) / 60000) : 0;
-    return `${i.state === 'aborted' ? 'Transaction failed' : 'Transaction open'} · ${i.statements} statement${i.statements === 1 ? '' : 's'} · ${min < 1 ? 'under a minute' : `${min} min`}`;
+    return `${msg(i.state === 'aborted' ? 'js.ws.txn_failed' : 'js.ws.txn_open')} · ${msg(i.statements === 1 ? 'js.ws.stmt_one' : 'js.ws.stmt', { n: i.statements })} · ${min < 1 ? msg('js.ws.under_minute') : msg('js.ws.min', { n: min })}`;
   };
   const txnApply = (i) => {
     txnInfo = i;
@@ -381,8 +384,8 @@
     commitBtn.disabled = i.state !== 'open';
     rollbackBtn.disabled = i.state === 'none';
     commitNote.textContent = on
-      ? `The statements stay in one transaction until Commit or Rollback; it is rolled back after ${idleWords} without a run.`
-      : 'Each statement commits on its own.';
+      ? msg('js.ws.commit_txn', { idle: idleWords })
+      : msg('js.ws.commit_auto');
     cur.txn = on;
     cur.txnOpen = i.state !== 'none';
     persist();
@@ -407,7 +410,7 @@
       if (j.state !== 'none') modeSel.value = 'on';
       fromServer(j);
     } catch {
-      badge.textContent = 'Transaction state unknown';
+      badge.textContent = msg('js.ws.txn_unknown');
     }
   }
   async function txnPost(key, action) {
@@ -421,13 +424,13 @@
       }
       return j;
     } catch {
-      announce('The transaction could not be ended: reload the page.');
+      announce(msg('js.ws.txn_not_ended'));
       return null;
     }
   }
   modeSel.addEventListener('change', async () => {
     if (modeSel.value !== 'on' && txnInfo.state !== 'none') {
-      if (!window.confirm('Switching to Autocommit rolls back the open transaction. Roll it back?')) { modeSel.value = 'on'; return; }
+      if (!window.confirm(msg('js.ws.txn_confirm'))) { modeSel.value = 'on'; return; }
       await txnPost(cur.key, 'rollback');
       modeSel.value = '';
     }
@@ -486,9 +489,9 @@
       const out = (await res.json()).sql;
       if (whole) replaceRange(0, ta.value.length, out, false);
       else replaceRange(a, b, out);
-      announce('Formatted.');
+      announce(msg('js.ws.formatted'));
     } catch {
-      announce('Formatting failed.');
+      announce(msg('js.ws.format_failed'));
     }
   };
   const convertCase = () => {
@@ -521,7 +524,7 @@
     try {
       return new RegExp(fre.checked ? fq.value : fq.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), `g${fcs.checked ? '' : 'i'}`);
     } catch (err) {
-      fmsg.textContent = `Not a valid pattern: ${err.message}`;
+      fmsg.textContent = msg('js.ws.bad_pattern', { error: err.message });
       return null;
     }
   };
@@ -537,7 +540,7 @@
     re.lastIndex = from;
     let m = re.exec(ta.value);
     if (!m) { re.lastIndex = 0; m = re.exec(ta.value); }
-    if (!m || !m[0]) { fmsg.textContent = 'Not found.'; return false; }
+    if (!m || !m[0]) { fmsg.textContent = msg('js.ws.not_found'); return false; }
     fmsg.textContent = '';
     reveal(m.index, m.index + m[0].length);
     return true;
@@ -580,7 +583,7 @@
       if (!re) return;
       const n = (ta.value.match(re) || []).length;
       if (n) replaceRange(0, ta.value.length, ta.value.replace(re, fr.value), false);
-      fmsg.textContent = `${n} replaced.`;
+      fmsg.textContent = msg('js.ws.replaced', { n });
     }
   });
 
@@ -660,6 +663,8 @@
 // to open it; Open shows the Object Browser's detail in a panel at the side (its tabs and pages load in the panel).
 (() => {
   'use strict';
+  const TEXTS = (() => { try { return JSON.parse(document.getElementById('builder-texts')?.dataset.texts || '{}'); } catch { return {}; } })();
+  const msg = (key) => TEXTS[key] ?? key;
   document.addEventListener('contextmenu', (e) => {
     const item = e.target.closest?.('.ws-obj, .ob-item');
     const menu = item?.querySelector(':scope > .obj-menu');
@@ -678,8 +683,8 @@
     const head = document.createElement('div');
     head.className = 'obj-slide-head';
     const title = Object.assign(document.createElement('strong'), { id: 'obj-slide-title' });
-    const full = Object.assign(document.createElement('a'), { className: 'btn btn-sm', textContent: 'Open in the Object Browser' });
-    const close = Object.assign(document.createElement('button'), { type: 'button', className: 'btn btn-sm', textContent: 'Close' });
+    const full = Object.assign(document.createElement('a'), { className: 'btn btn-sm', textContent: msg('js.ws.open_ob') });
+    const close = Object.assign(document.createElement('button'), { type: 'button', className: 'btn btn-sm', textContent: msg('js.ws.close') });
     close.addEventListener('click', () => slide.close());
     const tools = document.createElement('div');
     tools.append(full, ' ', close);
@@ -708,7 +713,7 @@
       d.querySelector('#obj-slide-title').textContent = root?.dataset.label ?? '';
       d.querySelector('.obj-slide-head a').href = url.replace('/sql/objects/panel', '/sql/objects');
     } catch {
-      body.textContent = 'The object could not be opened.';
+      body.textContent = msg('js.ws.open_failed');
     } finally {
       body.removeAttribute('aria-busy');
     }