pgkiln 0.82.0 → 0.83.0

package/src/builder/top-sql.ts

@@ -3,6 +3,7 @@ import { owner } from '../db.ts';
 import { html, raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { appHeader, back, BASE, csrf, developer, flash, region, send, shell, type Req } from './ui.ts';
+import { tr, type BuilderTranslate } from './i18n.ts';
 
 // App Builder → Activity → Top SQL: the statements the application's
 // database role ran, from pg_stat_statements (APEX: Top SQL in the
@@ -27,12 +28,14 @@ export async function statementsState(): Promise<{ ok: true } | { ok: false; rea
 }
 
 /** Why the statistics can't be shown, and how to turn them on. */
-export function statementsNote(reason: 'not_installed' | 'not_loaded' | 'error', message?: string) {
+export function statementsNote(tx: BuilderTranslate, reason: 'not_installed' | 'not_loaded' | 'error', message?: string) {
+  const ext = html`<code>pg_stat_statements</code>`;
+  const setting = html`<code>shared_preload_libraries = 'pg_stat_statements'</code>`;
   return html`<div class="alert alert-error" role="alert">${reason === 'not_installed'
-    ? html`The <code>pg_stat_statements</code> extension isn't installed in this database. To turn it on: set <code>shared_preload_libraries = 'pg_stat_statements'</code> (postgresql.conf, or <code>alter system set shared_preload_libraries = 'pg_stat_statements'</code>), restart PostgreSQL, then as a superuser: <code>create extension pg_stat_statements;</code>`
+    ? tx.rich('topsql.not_installed', { ext, setting, alter: html`<code>alter system set shared_preload_libraries = 'pg_stat_statements'</code>`, create: html`<code>create extension pg_stat_statements;</code>` })
     : reason === 'not_loaded'
-      ? html`The server doesn't load <code>pg_stat_statements</code> yet. Set <code>shared_preload_libraries = 'pg_stat_statements'</code> (the development <code>docker-compose.yml</code> does) and restart PostgreSQL.`
-      : html`The statistics could not be read: ${message ?? ''}`}</div>`;
+      ? tx.rich('topsql.not_loaded', { ext, setting, compose: html`<code>docker-compose.yml</code>` })
+      : tx('topsql.read_error', { message: message ?? '' })}</div>`;
 }
 
 /** The role's statements, slowest in total first (or by mean time, calls or rows). */
@@ -66,28 +69,29 @@ export async function topSqlRoutes(app: FastifyInstance) {
     if (!s) return;
     const a = await appOf(req.params.id);
     if (!a) return reply.code(404).send('Not found');
+    const tx = tr(s);
     const sort = SORTS[req.query.sort ?? ''] ? req.query.sort! : 'total';
     const top = await topSql(a.db_role, sort);
     const sortLink = (key: string, label: string) =>
       html`<a href="${BASE}/apps/${a.id}/top-sql?sort=${key}"${sort === key ? raw(' aria-current="true"') : ''}>${label}</a>`;
     const body = top.ok
       ? top.rows.length
-        ? html`<div class="seg u-mb1">Sort by ${sortLink('total', 'total time')} ${sortLink('mean', 'time per call')} ${sortLink('calls', 'calls')} ${sortLink('rows', 'rows')}</div>
-            <div class="table-wrap"><table class="report report-reflow top-sql"><thead><tr><th class="num">Calls</th><th class="num">Total ms</th><th class="num">Mean ms</th><th class="num">Rows</th><th class="num">Share</th><th>Statement</th></tr></thead>
+        ? html`<div class="seg u-mb1">${tx.rich('topsql.sort_by', { total: sortLink('total', tx('topsql.sort.total')), mean: sortLink('mean', tx('topsql.sort.mean')), calls: sortLink('calls', tx('topsql.sort.calls')), rows: sortLink('rows', tx('topsql.sort.rows')) })}</div>
+            <div class="table-wrap"><table class="report report-reflow top-sql"><thead><tr><th class="num">${tx('sm.col.calls')}</th><th class="num">${tx('sm.col.total_ms')}</th><th class="num">${tx('sm.col.mean_ms')}</th><th class="num">${tx('sm.col.rows')}</th><th class="num">${tx('topsql.share')}</th><th>${tx('sm.col.statement')}</th></tr></thead>
             <tbody>${top.rows.map((r) => html`<tr>
-              <td class="num" data-label="Calls">${r.calls}</td><td class="num" data-label="Total ms">${r.total_ms}</td><td class="num" data-label="Mean ms">${r.mean_ms}</td>
-              <td class="num" data-label="Rows">${r.rows}</td><td class="num" data-label="Share">${r.share ?? 0}%</td>
-              <td data-label="Statement"><code class="sql-text">${r.query}</code></td></tr>`)}</tbody></table></div>
+              <td class="num" data-label="${tx('sm.col.calls')}">${r.calls}</td><td class="num" data-label="${tx('sm.col.total_ms')}">${r.total_ms}</td><td class="num" data-label="${tx('sm.col.mean_ms')}">${r.mean_ms}</td>
+              <td class="num" data-label="${tx('sm.col.rows')}">${r.rows}</td><td class="num" data-label="${tx('topsql.share')}">${r.share ?? 0}%</td>
+              <td data-label="${tx('sm.col.statement')}"><code class="sql-text">${r.query}</code></td></tr>`)}</tbody></table></div>
             <form method="post" action="${BASE}/apps/${a.id}/top-sql/reset" class="u-mt1">${csrf(s)}
-              <button class="btn" data-confirm="Clear the statistics of role ${a.db_role}?">${icon('history')} Reset the statistics</button></form>`
-        : html`<p class="muted">No statements recorded for <code>${a.db_role}</code> yet. Use the application, then come back.</p>`
+              <button class="btn" data-confirm="${tx('topsql.reset_confirm', { role: a.db_role })}">${icon('history')} ${tx('topsql.reset')}</button></form>`
+        : html`<p class="muted">${tx.rich('topsql.none_yet', { role: html`<code>${a.db_role}</code>` })}</p>`
       : top.reason === 'no_role'
-        ? html`<div class="alert alert-error" role="alert">This application runs as the owner role, so its statements can't be told apart. Give it a database role in Settings.</div>`
-        : statementsNote(top.reason, top.message);
+        ? html`<div class="alert alert-error" role="alert">${tx('topsql.no_role')}</div>`
+        : statementsNote(tx, top.reason, top.message);
     const main = html`${appHeader(a, 'activity', s)}
-      ${region('Top SQL', html`<p class="muted u-mt0">Statements run as the role <code>${a.db_role ?? '(owner)'}</code> since the statistics were last reset, from <code>pg_stat_statements</code>. Literals and binds show as <code>$1</code>, <code>$2</code>…; applications that share a role share this list. <a href="${BASE}/apps/${a.id}/activity">Back to Activity</a></p>
+      ${region(tx('sql.tool.topsql'), html`<p class="muted u-mt0">${tx.rich('topsql.intro', { role: html`<code>${a.db_role ?? tx('topsql.owner')}</code>`, ext: html`<code>pg_stat_statements</code>`, p1: html`<code>$1</code>`, p2: html`<code>$2</code>` })} <a href="${BASE}/apps/${a.id}/activity">${tx('topsql.back_activity')}</a></p>
         ${body}`)}`;
-    return send(reply, s, shell(s, `Top SQL · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Activity', `${BASE}/apps/${a.id}/activity`], ['Top SQL']], main));
+    return send(reply, s, shell(s, `${tx('sql.tool.topsql')} · ${a.name}`, [[tx('rail.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('topsql.activity'), `${BASE}/apps/${a.id}/activity`], [tx('sql.tool.topsql')]], main));
   });
 
   app.post(`${BASE}/apps/:id/top-sql/reset`, async (req: Req, reply) => {
@@ -96,9 +100,9 @@ export async function topSqlRoutes(app: FastifyInstance) {
     const a = await appOf(req.params.id);
     if (!a) return reply.code(404).send('Not found');
     try {
-      if (!a.db_role) throw new Error('The application has no database role.');
+      if (!a.db_role) throw new Error(tr(s)('topsql.no_db_role'));
       await owner.query(`select pg_stat_statements_reset((select oid from pg_roles where rolname = $1), (select oid from pg_database where datname = current_database()), 0)`, [a.db_role]);
-      flash(s, 'Statistics reset.');
+      flash(s, tr(s)('topsql.reset_done'));
     } catch (e) {
       flash(s, (e as Error).message, 'error');
     }

package/src/builder/unload.ts

@@ -22,6 +22,7 @@ import {
 } from '../unload.ts';
 import { BASE, csrf, developer, region, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
 import { sessionSchema, workshopDb } from './workspaces.ts';
+import { tr, type BuilderTranslate } from './i18n.ts';
 
 // SQL Workshop → Unload Data (APEX: Data Workshop → Unload Data): a table or
 // view (chosen columns, an optional WHERE and ORDER BY) or a query, to CSV,
@@ -88,86 +89,89 @@ const list = (v: unknown) => (Array.isArray(v) ? v : v === undefined || v === nu
 export async function unloadRoutes(app: FastifyInstance) {
   const page = (s: Session, reply: FastifyReply, main: Raw, code = 200) => {
     reply.code(code);
-    return send(reply, s, shell(s, 'Unload Data', [['SQL Workshop', `${BASE}/sql`], ['Unload Data']], html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('unload', s)}${main}`, 'sql'));
+    const tx = tr(s);
+    return send(reply, s, shell(s, tx('sql.tool.unload'), [[tx('rail.sql_workshop'), `${BASE}/sql`], [tx('sql.tool.unload')]], html`<h1 class="u-mb1">${tx('rail.sql_workshop')}</h1>${workshopTabs('unload', s)}${main}`, 'sql'));
   };
 
-  const formatFields = (b: Body) => {
+  const formatFields = (tx: BuilderTranslate, b: Body) => {
     const fmt = (UNLOAD_FORMATS as string[]).includes(b.format ?? '') ? b.format : 'csv';
     const posted = b.format !== undefined; // unticked checkboxes post nothing
     const on = (name: string) => (!posted || b[name] === '1' ? raw(' checked') : '');
     const opt = (map: Record<string, string>, field: string, labels: Record<string, string>) =>
       Object.keys(map).map((k) => html`<option value="${k}"${(b[field] ?? Object.keys(map)[0]) === k ? raw(' selected') : ''}>${labels[k]}</option>`);
     return html`
-      <fieldset class="prop-group u-mt125"><legend>Format</legend>
-        <div class="unload-formats" role="radiogroup" aria-label="Format">${UNLOAD_FORMATS.map(
-          (f) => html`<label class="check"><input type="radio" name="format" value="${f}"${fmt === f ? raw(' checked') : ''}> ${{ csv: 'CSV', json: 'JSON', xlsx: 'Excel (.xlsx)', xml: 'XML', sql: 'SQL inserts' }[f]}</label>`,
+      <fieldset class="prop-group u-mt125"><legend>${tx('cl.format')}</legend>
+        <div class="unload-formats" role="radiogroup" aria-label="${tx('cl.format')}">${UNLOAD_FORMATS.map(
+          (f) => html`<label class="check"><input type="radio" name="format" value="${f}"${fmt === f ? raw(' checked') : ''}> ${{ csv: 'CSV', json: 'JSON', xlsx: tx('ul.fmt.xlsx'), xml: 'XML', sql: tx('ul.fmt.sql') }[f]}</label>`,
         )}</div>
       </fieldset>
       <fieldset class="prop-group"><legend>CSV</legend><div class="form-grid">
-        <div class="field"><label class="label" for="f_delimiter">Separator</label>
-          <select id="f_delimiter" name="delimiter">${opt(CSV_DELIMITERS, 'delimiter', { comma: 'Comma ,', semicolon: 'Semicolon ;', tab: 'Tab', pipe: 'Pipe |' })}</select></div>
-        <div class="field"><label class="label" for="f_enclosure">Enclosed by</label>
-          <select id="f_enclosure" name="enclosure">${opt(CSV_ENCLOSURES, 'enclosure', { double: 'Double quote "', single: "Single quote '" })}</select>
-          <small class="help">Only values that contain the separator, the enclosure or a line break are enclosed.</small></div>
+        <div class="field"><label class="label" for="f_delimiter">${tx('ul.separator')}</label>
+          <select id="f_delimiter" name="delimiter">${opt(CSV_DELIMITERS, 'delimiter', { comma: tx('ul.sep.comma'), semicolon: tx('ul.sep.semicolon'), tab: tx('ul.sep.tab'), pipe: tx('ul.sep.pipe') })}</select></div>
+        <div class="field"><label class="label" for="f_enclosure">${tx('ul.enclosed')}</label>
+          <select id="f_enclosure" name="enclosure">${opt(CSV_ENCLOSURES, 'enclosure', { double: tx('ul.enc.double'), single: tx('ul.enc.single') })}</select>
+          <small class="help">${tx('ul.enclosed_help')}</small></div>
         <div class="field"><span class="label" aria-hidden="true"></span>
-          <label class="check"><input type="checkbox" name="header" value="1"${on('header')}> First row: column names</label>
-          <label class="check"><input type="checkbox" name="bom" value="1"${on('bom')}> UTF-8 byte order mark (for Excel)</label></div>
+          <label class="check"><input type="checkbox" name="header" value="1"${on('header')}> ${tx('ul.header')}</label>
+          <label class="check"><input type="checkbox" name="bom" value="1"${on('bom')}> ${tx('ul.bom')}</label></div>
       </div></fieldset>
       <fieldset class="prop-group"><legend>XML</legend><div class="form-grid">
-        <div class="field"><label class="label" for="f_root_tag">Root element</label><input id="f_root_tag" name="root_tag" value="${b.root_tag ?? DEFAULT_UNLOAD.rootTag}" maxlength="64"></div>
-        <div class="field"><label class="label" for="f_row_tag">Row element</label><input id="f_row_tag" name="row_tag" value="${b.row_tag ?? DEFAULT_UNLOAD.rowTag}" maxlength="64">
-          <small class="help">One child element per column; empty (null) values are left out.</small></div>
+        <div class="field"><label class="label" for="f_root_tag">${tx('ul.root')}</label><input id="f_root_tag" name="root_tag" value="${b.root_tag ?? DEFAULT_UNLOAD.rootTag}" maxlength="64"></div>
+        <div class="field"><label class="label" for="f_row_tag">${tx('ul.row')}</label><input id="f_row_tag" name="row_tag" value="${b.row_tag ?? DEFAULT_UNLOAD.rowTag}" maxlength="64">
+          <small class="help">${tx('ul.row_help')}</small></div>
       </div></fieldset>`;
   };
 
-  const sourceTabs = (active: 'table' | 'query') =>
-    html`<nav class="ide-tabs u-mb1" aria-label="Unload from">
-      <a class="ide-tab" href="${BASE}/sql/unload"${active === 'table' ? raw(' aria-current="page"') : ''}>${icon('table')}<span>Table or view</span></a>
-      <a class="ide-tab" href="${BASE}/sql/unload?source=query"${active === 'query' ? raw(' aria-current="page"') : ''}>${icon('code')}<span>Query</span></a></nav>`;
+  const sourceTabs = (tx: BuilderTranslate, active: 'table' | 'query') =>
+    html`<nav class="ide-tabs u-mb1" aria-label="${tx('ul.from')}">
+      <a class="ide-tab" href="${BASE}/sql/unload"${active === 'table' ? raw(' aria-current="page"') : ''}>${icon('table')}<span>${tx('ul.table_or_view')}</span></a>
+      <a class="ide-tab" href="${BASE}/sql/unload?source=query"${active === 'query' ? raw(' aria-current="page"') : ''}>${icon('code')}<span>${tx('sm.col.query')}</span></a></nav>`;
 
-  const intro = html`<p class="muted">Download the rows of a table, a view or a query as CSV, JSON, Excel or XML (up to ${DOWNLOAD_MAX_ROWS.toLocaleString('en')} rows).
-    Runs as the builder's owner connection (an isolated workspace's developer login for its developers) in a read-only transaction. To load a file into a table, use <a href="${BASE}/sql/load">Load Data</a>.</p>`;
+  const introOf = (tx: BuilderTranslate) => html`<p class="muted">${tx('ul.intro', { n: DOWNLOAD_MAX_ROWS.toLocaleString('en') })}
+    ${tx.rich('ul.intro2', { load: html`<a href="${BASE}/sql/load">${tx('sql.tool.load')}</a>` })}</p>`;
 
   const form = async (s: Session, b: Body, error?: string) => {
+    const tx = tr(s);
+    const intro = introOf(tx);
     const alert = error ? html`<div class="alert alert-error" role="alert">${error}</div>` : '';
     if (b.source === 'query')
-      return html`${intro}${sourceTabs('query')}${region(
-        'Unload a query',
+      return html`${intro}${sourceTabs(tx, 'query')}${region(
+        tx('ul.unload_query'),
         html`${alert}<form method="post" action="${BASE}/sql/unload">${csrf(s)}<input type="hidden" name="source" value="query">
-          <div class="field"><label class="label" for="f_query">Query</label>
+          <div class="field"><label class="label" for="f_query">${tx('sm.col.query')}</label>
             <textarea id="f_query" name="query" class="code sql-editor" rows="10" spellcheck="false" data-code="plpgsql" required>${b.query ?? ''}</textarea>
-            <small class="help">One SELECT (or WITH … SELECT) statement.</small></div>
-          ${formatFields(b)}
-          <div class="buttons"><button class="btn btn-hot">${icon('download')} Download</button></div></form>`,
+            <small class="help">${tx('ul.one_select')}</small></div>
+          ${formatFields(tx, b)}
+          <div class="buttons"><button class="btn btn-hot">${icon('download')} ${tx('scr.download')}</button></div></form>`,
       )}`;
     const rels = await relations();
     const rel = rels.find((r) => r.qname === b.table);
     let schema = '';
     const chooser = html`<form method="get" action="${BASE}/sql/unload" class="unload-pick">
-        <label class="sr-only" for="f_table">Table or view</label>
-        <select id="f_table" name="table" required><option value="">- choose a table or view -</option>${rels.map((r) => {
+        <label class="sr-only" for="f_table">${tx('ul.table_or_view')}</label>
+        <select id="f_table" name="table" required><option value="">${tx('ul.choose_table')}</option>${rels.map((r) => {
           const group = r.schema !== schema ? html`${schema ? raw('</optgroup>') : ''}<optgroup label="${(schema = r.schema)}">` : '';
-          return html`${group}<option value="${r.qname}"${r === rel ? raw(' selected') : ''}>${r.name}${r.kind === 'view' ? ' (view)' : ''}</option>`;
+          return html`${group}<option value="${r.qname}"${r === rel ? raw(' selected') : ''}>${r.name}${r.kind === 'view' ? ` ${tx('ul.view')}` : ''}</option>`;
         })}${schema ? raw('</optgroup>') : ''}</select>
-        <button class="btn">Choose</button></form>`;
-    if (!rel) return html`${intro}${sourceTabs('table')}${region('Unload a table or view', html`${alert}${chooser}`)}`;
+        <button class="btn">${tx('ul.choose')}</button></form>`;
+    if (!rel) return html`${intro}${sourceTabs(tx, 'table')}${region(tx('ul.unload_table'), html`${alert}${chooser}`)}`;
     const cols = await columns(rel.qname);
     const chosen = new Set(b.format !== undefined ? list(b.columns) : cols.map((c) => c.name));
-    return html`${intro}${sourceTabs('table')}${region(
-      `Unload ${rel.qname}`,
+    return html`${intro}${sourceTabs(tx, 'table')}${region(
+      tx('ul.unload_of', { name: rel.qname }),
       html`${alert}${chooser}
         <form method="post" action="${BASE}/sql/unload" class="u-mt1">${csrf(s)}<input type="hidden" name="source" value="table"><input type="hidden" name="table" value="${rel.qname}">
-          <fieldset class="prop-group"><legend>Columns</legend><div class="qb-pick">${cols.map(
+          <fieldset class="prop-group"><legend>${tx('ul.columns')}</legend><div class="qb-pick">${cols.map(
             (c) => html`<label class="check"><input type="checkbox" name="columns" value="${c.name}"${chosen.has(c.name) ? raw(' checked') : ''}> ${c.name} <span class="muted small">${c.type}</span></label>`,
           )}</div></fieldset>
           <div class="form-grid">
-            <div class="field"><label class="label" for="f_where">Where</label><input id="f_where" name="where" value="${b.where ?? ''}" placeholder="e.g. deptno = 10" class="code" spellcheck="false">
-              <small class="help">Optional: a condition, without the word WHERE.</small></div>
-            <div class="field"><label class="label" for="f_order">Order by</label><input id="f_order" name="order" value="${b.order ?? ''}" placeholder="e.g. 1, created desc" class="code" spellcheck="false">
-              <small class="help">Optional: columns, without the words ORDER BY.</small></div>
+            <div class="field"><label class="label" for="f_where">${tx('ul.where')}</label><input id="f_where" name="where" value="${b.where ?? ''}" placeholder="${tx('ul.eg', { x: 'deptno = 10' })}" class="code" spellcheck="false">
+              <small class="help">${tx('ul.where_help')}</small></div>
+            <div class="field"><label class="label" for="f_order">${tx('ul.order')}</label><input id="f_order" name="order" value="${b.order ?? ''}" placeholder="${tx('ul.eg', { x: '1, created desc' })}" class="code" spellcheck="false">
+              <small class="help">${tx('ul.order_help')}</small></div>
           </div>
-          ${formatFields(b)}
-          <div class="buttons"><button class="btn btn-hot">${icon('download')} Download</button></div></form>`,
+          ${formatFields(tx, b)}
+          <div class="buttons"><button class="btn btn-hot">${icon('download')} ${tx('scr.download')}</button></div></form>`,
     )}`;
   };
 
@@ -192,10 +196,10 @@ export async function unloadRoutes(app: FastifyInstance) {
         name = 'query';
       } else {
         const rel = (await relations()).find((r) => r.qname === b.table);
-        if (!rel) return refuse('Choose a table or view.');
+        if (!rel) return refuse(tr(s)('ul.err.table'));
         const known = new Set((await columns(rel.qname)).map((c) => c.name));
         const cols = list(b.columns).filter((c) => known.has(c));
-        if (!cols.length) return refuse('Choose at least one column.');
+        if (!cols.length) return refuse(tr(s)('ul.err.column'));
         const where = (b.where ?? '').trim();
         const order = (b.order ?? '').trim();
         // the WHERE and ORDER BY text is the developer's SQL: the whole statement must still be one SELECT
@@ -226,7 +230,7 @@ export async function unloadRoutes(app: FastifyInstance) {
     } catch (e) {
       await c.query('rollback').catch(() => {});
       c.release(true);
-      return refuse(`The query failed: ${(e as Error).message}`);
+      return refuse(tr(s)('ul.err.failed', { error: (e as Error).message }));
     }
     await logActivity({ username: s.username, event: 'sql_unload', ip: clientIp(req), detail: `${opts.format}: ${sql.length > 1900 ? `${sql.slice(0, 1900)}…` : sql}` });
     const out = new PassThrough();

package/src/builder/worksheet.ts

@@ -121,9 +121,9 @@ async function navigatorTree(db: Awaited<ReturnType<typeof workshopDb>>, schema:
   return html`<ul class="ws-tree" id="ws-tree">${objects.map((o) => {
     const list = cols.get(o.ref);
     const obLink = `${BASE}/sql/objects?${new URLSearchParams(o.type === 'policy' ? { schema, k: 'table', o: o.ref, tab: 'rls' } : { schema, k: o.type, o: o.ref })}`;
-    if (!list) return html`<li class="ws-obj" data-name="${o.name.toLowerCase()}"><a href="${obLink}" title="${label(o.type)}">${icon(iconOf(o.type))}<span>${o.name}</span></a>${objectMenu(schema, o)}</li>`;
+    if (!list) return html`<li class="ws-obj" data-name="${o.name.toLowerCase()}"><a href="${obLink}" title="${label(o.type)}">${icon(iconOf(o.type))}<span>${o.name}</span></a>${objectMenu(schema, o, tx)}</li>`;
     const st = objectStatements(schema, o.name, list, o.type);
-    return html`<li class="ws-obj" data-name="${o.name.toLowerCase()}">${objectMenu(schema, o)}<details>
+    return html`<li class="ws-obj" data-name="${o.name.toLowerCase()}">${objectMenu(schema, o, tx)}<details>
       <summary draggable="true" data-ws-sql="${st.select}" title="${tx('ws.nav.drag', { type: tx.lang === 'en' ? label(o.type).replace(/s$/, '') : label(o.type) })}">${icon(iconOf(o.type))}<span>${o.name}</span>${o.rls ? html`<span class="tag">RLS</span>` : ''}</summary>
       <ul class="ws-cols">${list.map((c) => html`<li title="${c.type}${c.notnull ? ' not null' : ''}">${c.pk ? icon('key') : icon('minus')}<span>${c.name}</span><small class="muted">${c.type}</small></li>`)}</ul>
       <div class="ws-obj-actions">
@@ -525,7 +525,7 @@ async function worksheet(req: Req, reply: FastifyReply) {
     else {
       const d = drawChart('', lastQuery.columns, lastQuery.data ?? [], spec);
       chartCss = d.css;
-      chartPane = html`${chartControls(lastQuery.columns, spec)}
+      chartPane = html`${chartControls(lastQuery.columns, spec, 'ch', tx)}
         <div class="ch-actions"><button class="btn btn-sm" name="mode" value="chart">${icon('refresh')} ${tx('ws.chart.again')}</button>
           <input type="hidden" name="chart_sql" value="${lastQuery.sql}">
           <label class="sr-only" for="ws-chart-name">${tx('ws.chart.name')}</label><input id="ws-chart-name" name="chart_name" placeholder="${tx('ws.chart.name')}" maxlength="120">

package/src/cron-schedule.ts

@@ -231,12 +231,12 @@ const pad = (n: number) => String(n).padStart(2, '0');
 const sorted = (s: Set<number>) => [...s].sort((a, b) => a - b);
 const isAll = (s: Set<number>, min: number, max: number) => s.size === max - min + 1;
 /** a list of numbers with runs as ranges: 1-5, 7 */
-function compact(values: number[], name: (n: number) => string = String) {
+function compact(values: number[], name: (n: number) => string = String, t: CronWords = EN_WORDS) {
   const out: string[] = [];
   for (let i = 0; i < values.length; i++) {
     let j = i;
     while (j + 1 < values.length && values[j + 1] === values[j] + 1) j++;
-    out.push(j - i >= 2 ? `${name(values[i])} to ${name(values[j])}` : j > i ? `${name(values[i])}, ${name(values[j])}` : name(values[i]));
+    out.push(j - i >= 2 ? fillWords(t('cron.range'), { from: name(values[i]), to: name(values[j]) }) : j > i ? `${name(values[i])}, ${name(values[j])}` : name(values[i]));
     i = j;
   }
   return out.join(', ');
@@ -250,33 +250,63 @@ function stepOf(s: Set<number>, min: number, max: number) {
 }
 
 /** The schedule in words ("At 02:00, every day"). */
-export function describeSchedule(s: Schedule): string {
-  if (s.kind === 'reboot') return 'When the database server starts';
-  if (s.kind === 'seconds') return s.seconds === 1 ? 'Every second' : `Every ${s.seconds} seconds`;
+/**
+ * (sprint 162, CD-8) The phrases of a schedule in words, by key: English here; the builder passes its translator
+ * (the same keys, cron.*, in src/builder/i18n/*.ts) and the language for the day and month names.
+ */
+export const EN_WORDS_TEXT: Record<string, string> = {
+  'cron.reboot': 'When the database server starts', 'cron.every_second': 'Every second', 'cron.every_seconds': 'Every {n} seconds',
+  'cron.every_minute': 'Every minute', 'cron.every_minutes': 'Every {n} minutes', 'cron.every_hour': 'Every hour',
+  'cron.minute_of_hour': 'At minute {m} of every hour', 'cron.minutes_of_hour': 'At minutes {list} of every hour', 'cron.at': 'At {times}',
+  'cron.at_minute': 'At minute {m}', 'cron.at_minutes': 'At minutes {list}', 'cron.of_every_hours': '{mins} of every {n} hours',
+  'cron.past_hours': '{mins} past hours {list}', 'cron.day_and_last': 'on day {list} and the last day of the month',
+  'cron.last_day': 'on the last day of the month', 'cron.day_of_month': 'on day {list} of the month', 'cron.weekdays': 'on weekdays',
+  'cron.on_days': 'on {list}', 'cron.a_days': 'a {list}', 'cron.either': '{dom} or {dow}', 'cron.if': '{dom} if it is {dow}',
+  'cron.every_day': 'every day', 'cron.in_months': 'in {list}', 'cron.range': '{from} to {to}',
+};
+export type CronWords = (key: string) => string;
+const EN_WORDS: CronWords = (k) => EN_WORDS_TEXT[k] ?? k;
+const fillWords = (text: string, p: Record<string, string | number>) => text.replace(/\{(\w+)\}/g, (m, k: string) => (k in p ? String(p[k]) : m));
+
+/** Day (0 = Sunday) and month (1 = January) names in a language (English: as before). */
+const dayName = (lang: string, d: number) => (lang === 'en' ? DAY_NAMES[d] : new Intl.DateTimeFormat(lang, { weekday: 'long', timeZone: 'UTC' }).format(new Date(Date.UTC(2023, 0, 1 + d))));
+const monthName = (lang: string, m: number) => (lang === 'en' ? MONTH_NAMES[m - 1] : new Intl.DateTimeFormat(lang, { month: 'long', timeZone: 'UTC' }).format(new Date(Date.UTC(2023, m - 1, 1))));
+
+export function describeSchedule(s: Schedule, t: CronWords = EN_WORDS, lang = 'en'): string {
+  const w = (key: string, p: Record<string, string | number> = {}) => fillWords(t(key), p);
+  const list = (v: number[], name?: (n: number) => string) => compact(v, name, t);
+  if (s.kind === 'reboot') return w('cron.reboot');
+  if (s.kind === 'seconds') return s.seconds === 1 ? w('cron.every_second') : w('cron.every_seconds', { n: s.seconds });
   const minutes = sorted(s.minutes);
   const hours = sorted(s.hours);
   let time: string;
-  if (isAll(s.minutes, 0, 59) && isAll(s.hours, 0, 23)) time = 'Every minute';
-  else if (isAll(s.hours, 0, 23)) {
+  // whether the time already says how often (then no "every day")
+  let often = false;
+  if (isAll(s.minutes, 0, 59) && isAll(s.hours, 0, 23)) {
+    time = w('cron.every_minute');
+    often = true;
+  } else if (isAll(s.hours, 0, 23)) {
     const step = stepOf(s.minutes, 0, 59);
-    time = step ? `Every ${step} minutes` : minutes.length === 1 ? (minutes[0] === 0 ? 'Every hour' : `At minute ${minutes[0]} of every hour`) : `At minutes ${compact(minutes)} of every hour`;
-  } else if (hours.length * minutes.length <= 6) time = `At ${hours.flatMap((h) => minutes.map((m) => `${pad(h)}:${pad(m)}`)).join(', ')}`;
+    often = true;
+    time = step ? w('cron.every_minutes', { n: step }) : minutes.length === 1 ? (minutes[0] === 0 ? w('cron.every_hour') : w('cron.minute_of_hour', { m: minutes[0] })) : w('cron.minutes_of_hour', { list: list(minutes) });
+  } else if (hours.length * minutes.length <= 6) time = w('cron.at', { times: hours.flatMap((h) => minutes.map((m) => `${pad(h)}:${pad(m)}`)).join(', ') });
   else {
     const step = stepOf(s.hours, 0, 23);
-    const mins = isAll(s.minutes, 0, 59) ? 'Every minute' : minutes.length === 1 ? `At minute ${minutes[0]}` : `At minutes ${compact(minutes)}`;
-    time = `${mins} ${step ? `of every ${step} hours` : `past hours ${compact(hours)}`}`;
+    const mins = isAll(s.minutes, 0, 59) ? w('cron.every_minute') : minutes.length === 1 ? w('cron.at_minute', { m: minutes[0] }) : w('cron.at_minutes', { list: list(minutes) });
+    time = step ? w('cron.of_every_hours', { mins, n: step }) : w('cron.past_hours', { mins, list: list(hours) });
   }
   const parts = [time];
   const domAll = isAll(s.days, 1, 31) && !s.lastDay;
   const dowAll = isAll(s.weekdays, 0, 6);
-  const dom = s.lastDay ? (s.days.size ? `on day ${compact(sorted(s.days))} and the last day of the month` : 'on the last day of the month') : `on day ${compact(sorted(s.days))} of the month`;
+  const dom = s.lastDay ? (s.days.size ? w('cron.day_and_last', { list: list(sorted(s.days)) }) : w('cron.last_day')) : w('cron.day_of_month', { list: list(sorted(s.days)) });
   const weekdays = sorted(s.weekdays);
-  const dow = weekdays.join() === '1,2,3,4,5' ? 'on weekdays' : `on ${compact(weekdays, (d) => DAY_NAMES[d])}`;
-  if (s.either) parts.push(`${dom} or ${dow}`);
-  else if (!domAll && !dowAll) parts.push(`${dom} if it is ${dow.replace(/^on /, 'a ')}`);
+  const days = list(weekdays, (d) => dayName(lang, d));
+  const dow = weekdays.join() === '1,2,3,4,5' ? w('cron.weekdays') : w('cron.on_days', { list: days });
+  if (s.either) parts.push(w('cron.either', { dom, dow }));
+  else if (!domAll && !dowAll) parts.push(w('cron.if', { dom, dow: weekdays.join() === '1,2,3,4,5' ? w('cron.weekdays') : w('cron.a_days', { list: days }) }));
   else if (!domAll) parts.push(dom);
   else if (!dowAll) parts.push(dow);
-  else if (time !== 'Every minute' && !/^Every \d+ minutes$|hour$/.test(time)) parts.push('every day');
-  if (!isAll(s.months, 1, 12)) parts.push(`in ${compact(sorted(s.months), (m) => MONTH_NAMES[m - 1])}`);
+  else if (!often) parts.push(w('cron.every_day'));
+  if (!isAll(s.months, 1, 12)) parts.push(w('cron.in_months', { list: list(sorted(s.months), (m) => monthName(lang, m)) }));
   return parts.join(', ');
 }

package/src/metadata.ts

@@ -320,7 +320,9 @@ export interface DynamicAction {
     /** (124) a menu button's entry {"action": NAME} was chosen (trigger: entry or menu button names) */
     | 'menu_entry'
     /** (149) */
-    | 'double_click' | 'key_down' | 'key_press' | 'mouse_enter' | 'mouse_leave' | 'select' | 'resize' | 'scroll' | 'page_unload' | 'before_refresh' | 'facets_change';
+    | 'double_click' | 'key_down' | 'key_press' | 'mouse_enter' | 'mouse_leave' | 'select' | 'resize' | 'scroll' | 'page_unload' | 'before_refresh' | 'facets_change'
+    /** (153) component events: trigger = the grid, calendar, map or tree region */
+    | 'grid_row_init' | 'grid_save' | 'calendar_date_select' | 'calendar_view_change' | 'map_object_click' | 'map_change' | 'tree_selection_change';
   trigger_element: string | null;
   condition_type: 'equals' | 'not_equals' | 'in_list' | 'is_null' | 'is_not_null' | 'greater' | 'greater_equal' | 'less' | 'less_equal' | 'not_in_list' | null;
   condition_value: string | null;

package/src/runtime/calendar.ts

@@ -229,7 +229,8 @@ export async function renderCalendar(ctx: PageContext, r: Region): Promise<Raw>
     return html`<a class="cal-add" ${linkAttrs(ctx, create.page, items)} aria-label="${label}" title="${label}">+</a>`;
   };
   const cellAttrs = (day: Date, hour: number | null) =>
-    raw(`${movable ? ` data-drop="${iso(day)}${hour === null ? '' : `T${pad(hour)}:00`}"` : ''}${createOk ? ' data-add' : ''}`);
+    // (161) data-date: what a calendar_date_select dynamic action's condition sees
+    raw(`${movable ? ` data-drop="${iso(day)}${hour === null ? '' : `T${pad(hour)}:00`}"` : ''}${createOk ? ' data-add' : ''} data-date="${iso(day)}${hour === null ? '' : `T${pad(hour)}:00`}"`);
   const on = (day: string) => events.filter((ev) => ev.start <= day && ev.end >= day);
   const go = (v: CalendarView, day: Date | null) =>
     regionUrl(ctx, r, (p) => {
@@ -342,7 +343,7 @@ export async function renderCalendar(ctx: PageContext, r: Region): Promise<Raw>
         (v) => html`<a class="btn${v === view ? ' active' : ''}" href="${go(v, anchor)}"${v === view ? raw(' aria-current="page"') : ''}>${t(`calendar.view_${v}`)}</a>`,
       )}</nav>`
     : '';
-  return html`<div class="calendar cal-view-${view}"${movable ? raw(` data-calendar="${r.id}"`) : ''}>
+  return html`<div class="calendar cal-view-${view}" data-view="${view}"${movable ? raw(` data-calendar="${r.id}"`) : ''}>
     <div class="cal-toolbar">
       <div class="buttons">${nav('‹', prev, prevLabel)}${nav(t('calendar.today'), null)}${nav('›', next, nextLabel)}</div>
       <h3 class="cal-title" aria-live="polite">${title}</h3>

package/src/runtime/context.ts

@@ -38,6 +38,8 @@ export interface PageContext {
   ip: string;
   errors: Errors;
   messages: string[];
+  /** (161) grid regions whose changes this request saved (POST), or the request before it saved (GET): grid_save dynamic actions */
+  savedGrids?: number[];
   /** rendered inside a modal dialog (iframe) */
   dialog: boolean;
   client?: Client;

package/src/runtime/grid.ts

@@ -831,5 +831,6 @@ export async function gridDml(ctx: PageContext, p: Process): Promise<string | nu
   if (errors.length) throw new Error(errors.join(' '));
   const t = ctx.locale.t;
   const parts = [inserted && t('grid.added', { n: inserted }), updated && t('grid.updated', { n: updated }), deleted && t('grid.deleted', { n: deleted })].filter(Boolean);
+  (ctx.savedGrids ??= []).push(r.id);
   return p.success_message ?? (parts.length ? t('grid.saved_parts', { parts: parts.join(', ') }) : t('grid.no_changes'));
 }

package/src/runtime/maps.ts

@@ -13,7 +13,7 @@ import { encodeTile, tileArea, type TileFeature } from '../mvt.ts';
 
 // Map region (APEX: Map region). The SELECT returns, per row, a position
 // (columns lat and lng, latitude and longitude, or location as "lat,lng")
-// and optionally title, body and geojson (a GeoJSON geometry or feature for
+// and optionally id (what a map_object_click dynamic action sees), title, body and geojson (a GeoJSON geometry or feature for
 // lines and areas; a GeoJSON point is a place), and weight (for a heat map).
 // With PostGIS installed, a geometry or geography column (WGS 84) is turned
 // into GeoJSON on the server (ST_AsGeoJSON), so no geojson column is needed.
@@ -59,6 +59,8 @@ interface Point {
   body: string;
   href: string | null;
   weight: number;
+  /** (161) the row's id column: what a map_object_click dynamic action's condition sees */
+  id?: string;
 }
 /** (159, CD-6) a shape layer's look: fixed in the layer's settings, or per row from columns of the same names */
 export interface ShapeStyle {
@@ -164,6 +166,7 @@ async function loadLayer(ctx: PageContext, def: LayerDef, g: PostGis | null, opt
     if ((Number.isNaN(lat) || Number.isNaN(lng)) && loc) [lat, lng] = [Number(loc[1]), Number(loc[2])];
     const title = toState(col(row, 'title')) ?? '';
     const body = toState(col(row, 'body')) ?? '';
+    const id = toState(col(row, 'id')) ?? undefined;
     let href: string | null = null;
     if (linkOk && link) {
       const items: Record<string, string> = {};
@@ -184,14 +187,14 @@ async function loadLayer(ctx: PageContext, def: LayerDef, g: PostGis | null, opt
           ? { ...def.style, ...shapeStyle({ fill_color: col(row, 'fill_color'), stroke_color: col(row, 'stroke_color'), stroke_width: col(row, 'stroke_width'), opacity: col(row, 'opacity') }) }
           : undefined;
         const h = num(col(row, 'height'));
-        shapes.push({ type: 'Feature', geometry, properties: { title, body, href, ...(style ? { style } : {}), ...(def.kind === 'extruded' && Number.isFinite(h) ? { height: h } : {}) } });
+        shapes.push({ type: 'Feature', geometry, properties: { title, body, href, ...(id !== undefined ? { id } : {}), ...(style ? { style } : {}), ...(def.kind === 'extruded' && Number.isFinite(h) ? { height: h } : {}) } });
       }
     }
     // a shape layer draws only shapes
     if (SHAPE_KINDS.has(def.kind)) continue;
     const w = num(col(row, 'weight'));
     const weight = Number.isFinite(w) && w > 0 ? w : Number.isNaN(w) ? 1 : 0;
-    if (Math.abs(lat) <= 90 && Math.abs(lng) <= 180) points.push({ lat, lng, title, body, href, weight });
+    if (Math.abs(lat) <= 90 && Math.abs(lng) <= 180) points.push({ lat, lng, title, body, href, weight, ...(id !== undefined ? { id } : {}) });
   }
   // (159) extruded: each polygon shaded by its height (from light to strong; no 3D view)
   if (def.kind === 'extruded') {
@@ -296,7 +299,7 @@ export function parseTile(z: string, x: string, y: string) {
 export async function layerTile(ctx: PageContext, def: LayerDef, t: { z: number; x: number; y: number }) {
   const { points, shapes, truncated } = await loadLayer(ctx, def, await postgis(), { area: tileArea(t.z, t.x, t.y, 1 / 16), limit: MAX_TILE_ROWS });
   const features: TileFeature[] = [
-    ...points.map((p) => ({ geometry: { type: 'Point', coordinates: [p.lng, p.lat] }, properties: { title: p.title, body: p.body, href: p.href, weight: p.weight } })),
+    ...points.map((p) => ({ geometry: { type: 'Point', coordinates: [p.lng, p.lat] }, properties: { title: p.title, body: p.body, href: p.href, weight: p.weight, ...(p.id !== undefined ? { id: p.id } : {}) } })),
     ...(shapes as { geometry: TileFeature['geometry']; properties: TileFeature['properties'] }[]).map((s) => ({ geometry: s.geometry, properties: s.properties })),
   ];
   return { tile: encodeTile('places', t.z, t.x, t.y, features), truncated };

package/src/runtime/render.ts

@@ -30,6 +30,9 @@ import { sessionLimits } from '../session.ts';
 
 const list = (s: string | null) => (s ?? '').split(',').map((x) => x.trim().toUpperCase()).filter(Boolean);
 
+/** (161) events of grid, calendar, map and tree regions (their value: see public/app.js, pgkiln:component) */
+export const COMPONENT_EVENTS = new Set(['grid_row_init', 'grid_save', 'calendar_date_select', 'calendar_view_change', 'map_object_click', 'map_change', 'tree_selection_change']);
+
 /** Client-side definition of the page's dynamic actions (never includes SQL). */
 function dynamicActionsJson(ctx: PageContext) {
   return ctx.page.dynamic_actions
@@ -53,6 +56,8 @@ function dynamicActionsJson(ctx: PageContext) {
       ...(d.action === 'plugin' ? pluginAction(ctx, d.code, d.config) : {}),
       // (156) set_style: checked properties and values; open_report_dialog: the dialog's key (checked by the database)
       ...(d.action === 'set_style' ? { styles: safeStyles(d.config) } : {}),
+      // (161) set_value without SQL on a component event: the event's value (a date, node id, …) into the affected items
+      ...(d.action === 'set_value' && !d.code?.trim() && COMPONENT_EVENTS.has(d.event) ? { eventValue: true } : {}),
       ...(d.action === 'open_report_dialog' ? { dialog: /^[a-z]{3,10}$/.test(d.code?.trim() ?? '') ? d.code!.trim() : null } : {}),
     }));
 
@@ -422,7 +427,7 @@ export async function renderPage(ctx: PageContext) {
       ${ctx.detached}
     </div>
     <script type="application/json" id="pgkiln-meta">${raw(
-      JSON.stringify({ csrf: ctx.session.csrf_token, das, texts: clientTexts(ctx), dialogs: dialogShapes(ctx), ...timeZoneMeta(ctx), session: sessionMeta(ctx) }).replace(/</g, '\\u003c'),
+      JSON.stringify({ csrf: ctx.session.csrf_token, das, ...(ctx.savedGrids?.length ? { savedGrids: ctx.savedGrids } : {}), texts: clientTexts(ctx), dialogs: dialogShapes(ctx), ...timeZoneMeta(ctx), session: sessionMeta(ctx) }).replace(/</g, '\\u003c'),
     )}</script>`;
   return chrome(ctx, main, title);
 }

package/src/runtime/routes.ts

@@ -443,6 +443,8 @@ export async function runtimeRoutes(app: FastifyInstance) {
     if (flash) ctx.messages.push(flash);
     const flashError = takeFlash(ctx.session, '__FLASH_ERROR');
     if (flashError) ctx.errors.page.push(flashError);
+    const saved = takeFlash(ctx.session, '__GRID_SAVED');
+    if (typeof saved === 'string') ctx.savedGrids = saved.split(',').map(Number).filter(Number.isInteger);
     // Actions → Download CSV / Excel / PDF: r<region id>_csv=1, _xlsx=1 or _pdf=1
     const downloadKey = [...ctx.params.keys()].find((k) => /^r\d+_(csv|xlsx|pdf)$/.test(k));
     // a document template: ?doc=NAME (see documents.ts)
@@ -629,6 +631,8 @@ export async function runtimeRoutes(app: FastifyInstance) {
       return reply.headers(downloadHeaders(ctx.download)).send(ctx.download.content);
     }
     if (messages.length) ctx.session.state.__FLASH = messages.join(' ');
+    // (161) the page that comes back runs the saved grids' grid_save dynamic actions
+    if (ctx.savedGrids?.length && !ctx.dialog) ctx.session.state.__GRID_SAVED = ctx.savedGrids.join(',');
     await saveState(ctx.session);
     if (ctx.dialog) return reply.type('text/html').send(dialogClosePage(ctx, ctx.closeDialog));
     // (sprint 54) a grid's Save comes back to the grid's search, page, sort and view

package/src/runtime/tree.ts

@@ -64,14 +64,15 @@ export async function renderTree(ctx: PageContext, r: Region): Promise<Raw> {
         });
       label = html`<a ${linkAttrs(ctx, link.page, items)}>${label}</a>`;
     }
-    if (!n.children.length) return html`<li class="tree-leaf">${label}</li>`;
+    // (161) data-node: what a tree_selection_change dynamic action's condition sees
+    if (!n.children.length) return html`<li class="tree-leaf" data-node="${n.id}">${label}</li>`;
     const open = depth < expanded ? raw(' open') : '';
     const children = html`<ul>${n.children.map((ch) => draw(ch, depth + 1))}</ul>`;
     // a linked branch: the link is a row of its own and the disclosure only toggles (no link inside <summary>)
     if (linkOk && link)
-      return html`<li class="tree-branch"><span class="tree-row">${label} <span class="tree-count" aria-hidden="true">${n.children.length}</span></span>
+      return html`<li class="tree-branch" data-node="${n.id}"><span class="tree-row">${label} <span class="tree-count" aria-hidden="true">${n.children.length}</span></span>
         <details${open}><summary><span class="sr-only">${n.label} (${n.children.length})</span></summary>${children}</details></li>`;
-    return html`<li><details${open}><summary>${label} <span class="tree-count">${n.children.length}</span></summary>
+    return html`<li data-node="${n.id}"><details${open}><summary>${label} <span class="tree-count">${n.children.length}</span></summary>
       ${children}</details></li>`;
   };
   return html`<ul class="tree-view">${roots.map((n) => draw(n, 0))}</ul>`;