pgkiln 0.84.0 → 0.86.0

package/src/builder/i18n.ts

@@ -143,9 +143,23 @@ export const builderMessages = (lang: BuilderLang): Readonly<Record<string, stri
 // (sprint 162, CD-8) Long form builders (region and report settings) take the translator of the request being rendered
 // from the async context instead of a parameter on every helper: withTranslator(tr(s), () => build()), and inside,
 // scopedTx('key') like tx. Outside withTranslator it is English.
-const SCOPE = new AsyncLocalStorage<BuilderTranslate>();
-const current = () => SCOPE.getStore() ?? translatorFor('en');
-export const withTranslator = <T>(t: BuilderTranslate, fn: () => T): T => SCOPE.run(t, fn);
+// (sprint 164) Every builder route runs in a request scope (app.ts wraps the handlers of /builder routes): developer()
+// sets the developer's translator in it once the session is loaded, so scopedTx works in any builder handler and the
+// helpers it calls; before that (the sign-in pages) it is the device's language (the cookie).
+interface Scope { t?: BuilderTranslate; req?: FastifyRequest }
+const SCOPE = new AsyncLocalStorage<Scope>();
+const current = () => {
+  const sc = SCOPE.getStore();
+  return sc?.t ?? (sc?.req ? translatorFor(cookieLanguage(sc.req)) : translatorFor('en'));
+};
+export const withTranslator = <T>(t: BuilderTranslate, fn: () => T): T => SCOPE.run({ t }, fn);
+/** (sprint 164) Runs a builder request's handler in its own scope (app.ts). */
+export const inRequestScope = <T>(req: FastifyRequest, fn: () => T): T => SCOPE.run({ req }, fn);
+/** (sprint 164) The signed-in developer's translator for the rest of the request (developer() in ui.ts). */
+export const setRequestTranslator = (t: BuilderTranslate) => {
+  const sc = SCOPE.getStore();
+  if (sc) sc.t = t;
+};
 export const scopedTx = ((key: BuilderKey, params?: Params) => current()(key, params)) as BuilderTranslate;
 Object.defineProperty(scopedTx, 'lang', { get: () => current().lang });
 scopedTx.dyn = (key, fallback, params) => current().dyn(key, fallback, params);

package/src/builder/json-sources.ts

@@ -13,6 +13,7 @@ import { clearCompletions } from './code-editor.ts';
 import { appOr404 } from './forms.ts';
 import { appHeader, back, BASE, csrf, developer, flash, input, region, send, shell, type Req } from './ui.ts';
 import { currentWorkspace, usableSchemas, workshopDb } from './workspaces.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // (sprint 142, AP-8; APEX: Shared Components → Data Sources → JSON Sources)
 //
@@ -30,8 +31,8 @@ const one = (v: string | string[] | undefined) => (Array.isArray(v) ? v[0] : v)
 const SYSTEM = ['pg_catalog', 'information_schema', 'meta'];
 
 const crumbs = (a: { id: number; name: string }, last?: string): [string, string?][] => [
-  ['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`],
-  ...(last ? [['JSON sources', `${BASE}/apps/${a.id}/json-sources`], [last]] as [string, string?][] : [['JSON sources']] as [string, string?][]),
+  [tx('jsrc.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('jsrc.shared_components'), `${BASE}/apps/${a.id}/shared`],
+  ...(last ? [[tx('jsrc.json_sources'), `${BASE}/apps/${a.id}/json-sources`], [last]] as [string, string?][] : [[tx('jsrc.json_sources')]] as [string, string?][]),
 ];
 const listOf = (a: any) => (Array.isArray(a.json_sources) ? a.json_sources : []) as JsonSource[];
 const srcUrl = (appId: number, name: string) => `${BASE}/apps/${appId}/json-sources/source?name=${encodeURIComponent(name)}`;
@@ -61,12 +62,12 @@ async function viewState(db: Db, x: JsonSource) {
 
 function columnsTable(prefix: string, cols: JsonColumn[], extra: number, emptyPath: boolean): Raw {
   const rows = [...cols, ...Array.from({ length: extra }, (): JsonColumn => ({ name: '', path: [], type: 'text' }))];
-  return html`<div class="table-wrap"><table class="report js-cols"><thead><tr><th scope="col">Column</th><th scope="col">Path</th><th scope="col">Type</th><th scope="col">Read only</th></tr></thead><tbody>
+  return html`<div class="table-wrap"><table class="report js-cols"><thead><tr><th scope="col">${tx('jsrc.column')}</th><th scope="col">${tx('jsrc.path')}</th><th scope="col">${tx('jsrc.type')}</th><th scope="col">${tx('jsrc.read_only')}</th></tr></thead><tbody>
     ${rows.map((c, i) => html`<tr>
-      <td><input name="${prefix}.${i}.name" value="${c.name}" class="code" aria-label="Column ${i + 1}: name" autocomplete="off" spellcheck="false"></td>
-      <td><input name="${prefix}.${i}.path" value="${pathText(c.path)}" class="code" aria-label="Column ${i + 1}: path" autocomplete="off" spellcheck="false"${emptyPath ? raw(' placeholder="(the element itself)"') : ''}></td>
-      <td><select name="${prefix}.${i}.type" aria-label="Column ${i + 1}: type">${JSON_TYPES.map((t) => html`<option${t === c.type ? raw(' selected') : ''}>${t}</option>`)}</select></td>
-      <td class="te-c"><input type="checkbox" name="${prefix}.${i}.readonly" aria-label="Column ${i + 1}: read only"${c.readonly ? raw(' checked') : ''}></td></tr>`)}
+      <td><input name="${prefix}.${i}.name" value="${c.name}" class="code" aria-label="${tx('jsrc.aria_name', { n: i + 1 })}" autocomplete="off" spellcheck="false"></td>
+      <td><input name="${prefix}.${i}.path" value="${pathText(c.path)}" class="code" aria-label="${tx('jsrc.aria_path', { n: i + 1 })}" autocomplete="off" spellcheck="false"${emptyPath ? html` placeholder="${tx('jsrc.the_element_itself')}"` : ''}></td>
+      <td><select name="${prefix}.${i}.type" aria-label="${tx('jsrc.aria_type', { n: i + 1 })}">${JSON_TYPES.map((t) => html`<option${t === c.type ? raw(' selected') : ''}>${t}</option>`)}</select></td>
+      <td class="te-c"><input type="checkbox" name="${prefix}.${i}.readonly" aria-label="${tx('jsrc.aria_readonly', { n: i + 1 })}"${c.readonly ? raw(' checked') : ''}></td></tr>`)}
     </tbody></table></div>`;
 }
 
@@ -76,33 +77,33 @@ function sourceForm(a: any, s: Session, x: JsonSource, original: string, problem
   if (cur && !opts.includes(cur)) opts.unshift(cur);
   return html`${problems.length ? html`<div class="alert alert-error" role="alert"><ul>${problems.map((p) => html`<li>${p}</li>`)}</ul></div>` : ''}
     <form method="post" action="${BASE}/apps/${a.id}/json-sources/source">${csrf(s)}<input type="hidden" name="original" value="${original}">
-      <fieldset class="prop-group"><legend>JSON source</legend><div class="form-grid">
-        ${input('name', 'Name (static ID)', x.name, { required: true, placeholder: 'e.g. EMP_PROFILE', help: 'Upper case letters, digits and _.' })}
-        ${input('description', 'Description', x.description ?? '')}
-        <div class="field"><label class="label" for="js-source">Table and jsonb column</label>
-          <select id="js-source" name="source">${opts.length ? opts.map((o) => html`<option${o === cur ? raw(' selected') : ''}>${o}</option>`) : html`<option value="">(no table with a json or jsonb column)</option>`}</select>
-          <small class="help">A column of a table, or the document column of a table of documents. The table needs a primary key.</small></div>
-        ${input('view', 'View', x.view, { required: true, placeholder: 'e.g. emp_profile', help: 'Made in the table\'s schema. Regions, REST and MCP use it like a table.' })}
-        <div class="field"><label class="check"><input type="checkbox" name="rows"${x.rows ? raw(' checked') : ''}> The view also adds and deletes rows of the table</label>
-          <small class="help">For a table of documents: an insert into the view adds a row, a delete removes it. Off: the view only changes the documents of existing rows.</small></div>
+      <fieldset class="prop-group"><legend>${tx('jsrc.json_source')}</legend><div class="form-grid">
+        ${input('name', tx('jsrc.name_static_id'), x.name, { required: true, placeholder: tx('jsrc.e_g_emp_profile'), help: tx('jsrc.upper_case_letters_digits_and') })}
+        ${input('description', tx('jsrc.description'), x.description ?? '')}
+        <div class="field"><label class="label" for="js-source">${tx('jsrc.table_and_jsonb_column')}</label>
+          <select id="js-source" name="source">${opts.length ? opts.map((o) => html`<option${o === cur ? raw(' selected') : ''}>${o}</option>`) : html`<option value="">${tx('jsrc.no_json_table')}</option>`}</select>
+          <small class="help">${tx('jsrc.a_column_of_a_table')}</small></div>
+        ${input('view', tx('jsrc.view'), x.view, { required: true, placeholder: tx('jsrc.e_g_emp_profile_2'), help: tx('jsrc.made_in_the_table_s') })}
+        <div class="field"><label class="check"><input type="checkbox" name="rows"${x.rows ? raw(' checked') : ''}> ${tx('jsrc.the_view_also_adds_and')}</label>
+          <small class="help">${tx('jsrc.for_a_table_of_documents')}</small></div>
       </div></fieldset>
-      <fieldset class="prop-group"><legend>Columns</legend>
-        <p class="muted u-mt0">A column per path in the document (keys separated by dots, e.g. <code>address.city</code>). A value that doesn't read as the type shows empty. Saving a row writes only the paths whose values changed: keys this list doesn't name stay in the document. Clear a name to remove a column.</p>
+      <fieldset class="prop-group"><legend>${tx('jsrc.columns')}</legend>
+        <p class="muted u-mt0">${tx.code('jsrc.a_column_per_path_in')}</p>
         ${columnsTable('c', x.columns, 3, false)}</fieldset>
       ${x.arrays.map((y, j) => html`<fieldset class="prop-group"><legend>Array ${y.name}</legend><div class="form-grid">
-          ${input(`a.${j}.name`, 'Name', y.name, { required: true })}
-          ${input(`a.${j}.path`, 'Path', pathText(y.path), { required: true, help: 'The array in the document, e.g. skills.' })}
-          ${input(`a.${j}.view`, 'View', y.view, { required: true, help: `One row per element: the table's key, ${ROW_KEY} (the element's key) and ${POSITION} (1, 2 …), then these columns. Use it as a detail grid.` })}
-          <div class="field"><label class="check"><input type="checkbox" name="a.${j}.drop"> Remove this array</label></div>
+          ${input(`a.${j}.name`, tx('jsrc.name'), y.name, { required: true })}
+          ${input(`a.${j}.path`, tx('jsrc.path'), pathText(y.path), { required: true, help: tx('jsrc.the_array_in_the_document') })}
+          ${input(`a.${j}.view`, tx('jsrc.view'), y.view, { required: true, help: tx('jsrc.array_view_help', { rowkey: ROW_KEY, position: POSITION }) })}
+          <div class="field"><label class="check"><input type="checkbox" name="a.${j}.drop"> ${tx('jsrc.remove_this_array')}</label></div>
         </div>${columnsTable(`a.${j}.c`, y.columns, 2, true)}</fieldset>`)}
-      <fieldset class="prop-group"><legend>Add an array</legend><div class="form-grid">
-        ${input(`a.${x.arrays.length}.name`, 'Name', '', { placeholder: 'e.g. skills' })}
-        ${input(`a.${x.arrays.length}.path`, 'Path', '', { placeholder: 'e.g. skills' })}
-        ${input(`a.${x.arrays.length}.view`, 'View', '', { placeholder: 'e.g. emp_profile_skills' })}
-      </div><small class="help">Add the array, then Propose from the data fills its columns (or type them after saving).</small></fieldset>
+      <fieldset class="prop-group"><legend>${tx('jsrc.add_an_array')}</legend><div class="form-grid">
+        ${input(`a.${x.arrays.length}.name`, tx('jsrc.name'), '', { placeholder: tx('jsrc.e_g_skills') })}
+        ${input(`a.${x.arrays.length}.path`, tx('jsrc.path'), '', { placeholder: tx('jsrc.e_g_skills') })}
+        ${input(`a.${x.arrays.length}.view`, tx('jsrc.view'), '', { placeholder: tx('jsrc.e_g_emp_profile_skills') })}
+      </div><small class="help">${tx('jsrc.add_the_array_then_propose')}</small></fieldset>
       <div class="buttons">
-        <button class="btn btn-hot" name="mode" value="save">${original ? 'Save' : 'Add JSON source'}</button>
-        <button class="btn" name="mode" value="propose" formnovalidate>${icon('lightbulb')} Propose from the data</button>
+        <button class="btn btn-hot" name="mode" value="save">${original ? tx('jsrc.save') : tx('jsrc.add_json_source')}</button>
+        <button class="btn" name="mode" value="propose" formnovalidate>${icon('lightbulb')} ${tx('jsrc.propose_from_the_data')}</button>
       </div>
     </form>`;
 }
@@ -157,11 +158,11 @@ const label = (n: string) => n.replace(/_/g, ' ').replace(/^./, (c) => c.toUpper
 
 /** A form on the source's view with a detail grid per array; returns the page number. */
 export async function createSourcePage(appId: number, x: JsonSource, pageNo: number, title: string) {
-  if (x.key.length !== 1) throw new Error('Create page needs a table with a one-column key; use the views in regions of your own.');
+  if (x.key.length !== 1) throw new Error(tx('jsrc.create_page_needs_a_table'));
   const key = x.key[0];
   const keyItem = `P${pageNo}_${key.toUpperCase()}`;
   return owner.tx(async (c) => {
-    if ((await c.query('select 1 from meta.page where app_id = $1 and page_no = $2', [appId, pageNo])).rows.length) throw new Error(`Page ${pageNo} exists already.`);
+    if ((await c.query('select 1 from meta.page where app_id = $1 and page_no = $2', [appId, pageNo])).rows.length) throw new Error(tx('jsrc.page_exists', { n: pageNo }));
     const pageId = (await c.query<{ id: number }>('insert into meta.page (app_id, page_no, name, title) values ($1, $2, $3, $3) returning id', [appId, pageNo, title])).rows[0].id;
     const form = (await c.query<{ id: number }>(
       `insert into meta.region (page_id, seq, title, type, table_name, pk_column, pk_item) values ($1, 10, $2, 'form', $3, $4, $5) returning id`,
@@ -210,15 +211,15 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
     const db = await workshopDb(s);
     const states = await Promise.all(list.map((x) => viewState(db, x).catch(() => new Map<string, boolean>())));
     const main = html`${appHeader(a, 'shared', s)}
-      <div class="title-row"><h1>JSON sources</h1></div>
-      <p class="muted u-mt0">A JSON source describes a jsonb column: a column per path in its documents, and arrays of objects as rows of their own. pgkiln makes updatable views from it, so forms, reports, interactive grids, REST and MCP read and write the documents like tables. Saving a row changes only the paths it changed: keys the source doesn't know about stay. For a table with its child tables as one document, see SQL Workshop › Table Properties › Document view.</p>
-      ${region('Sources', html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">Name</th><th scope="col">Column</th><th scope="col">Views</th></tr></thead>
-        <tbody>${list.length ? list.map((x, i) => html`<tr><td data-label="Name"><a href="${srcUrl(a.id, x.name)}">${x.name}</a>${x.description ? html` <span class="muted">${x.description}</span>` : ''}</td>
-          <td data-label="Column"><code>${x.schema}.${x.table}.${x.column}</code></td>
-          <td data-label="Views">${[x.view, ...x.arrays.map((y) => y.view)].map((v) => html`<code>${v}</code>${states[i].get(v) ? '' : html` <span class="tag">not made</span>`} `)}</td></tr>`)
-          : html`<tr><td colspan="3" class="empty">No JSON sources yet.</td></tr>`}</tbody></table></div>
-        <p><a class="btn" href="${BASE}/apps/${a.id}/json-sources/source">${icon('plus')} Add JSON source</a></p>`)}`;
-    return send(reply, s, shell(s, 'JSON sources', crumbs(a), main));
+      <div class="title-row"><h1>${tx('jsrc.json_sources')}</h1></div>
+      <p class="muted u-mt0">${tx('jsrc.a_json_source_describes_a')}</p>
+      ${region(tx('jsrc.sources'), html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">${tx('jsrc.name')}</th><th scope="col">${tx('jsrc.column')}</th><th scope="col">${tx('jsrc.views')}</th></tr></thead>
+        <tbody>${list.length ? list.map((x, i) => html`<tr><td data-label="${tx('jsrc.name')}"><a href="${srcUrl(a.id, x.name)}">${x.name}</a>${x.description ? html` <span class="muted">${x.description}</span>` : ''}</td>
+          <td data-label="${tx('jsrc.column')}"><code>${x.schema}.${x.table}.${x.column}</code></td>
+          <td data-label="${tx('jsrc.views')}">${[x.view, ...x.arrays.map((y) => y.view)].map((v) => html`<code>${v}</code>${states[i].get(v) ? '' : html` <span class="tag">${tx('jsrc.not_made')}</span>`} `)}</td></tr>`)
+          : html`<tr><td colspan="3" class="empty">${tx('jsrc.no_json_sources_yet')}</td></tr>`}</tbody></table></div>
+        <p><a class="btn" href="${BASE}/apps/${a.id}/json-sources/source">${icon('plus')} ${tx('jsrc.add_json_source')}</a></p>`)}`;
+    return send(reply, s, shell(s, tx('jsrc.json_sources'), crumbs(a), main));
   });
 
   app.get(`${BASE}/apps/:id(^\\d+$)/json-sources/source`, async (req: Req, reply) => {
@@ -238,20 +239,20 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
       const st = await viewState(db, x).catch(() => new Map<string, boolean>());
       const made = st.get(x.view) === true;
       const ddl = jsonSourceDdl(x, { app: a.alias, grants: await tableGrants(db, x.schema, x.table).catch(() => []), replace: st.size > 0 });
-      extra = html`${region('Views', html`
-        <p>${made ? html`${icon('check')} The views exist. Make them again after changing the columns.` : 'The views are not made yet.'}</p>
+      extra = html`${region(tx('jsrc.views'), html`
+        <p>${made ? html`${icon('check')} The views exist. Make them again after changing the columns.` : tx('jsrc.the_views_are_not_made')}</p>
         <details><summary>DDL</summary><pre class="source te-ddl" data-code-view="sql" tabindex="0" aria-label="DDL">${ddl.map((d) => `${d};`).join('\n\n')}</pre></details>
         <form method="post" action="${BASE}/apps/${a.id}/json-sources/views" class="buttons">${csrf(s)}<input type="hidden" name="name" value="${x.name}">
-          <button class="btn btn-hot" name="mode" value="apply">${icon('check')} ${made ? 'Make the views again' : 'Create views'}</button>
-          <button class="btn" name="mode" value="worksheet">${icon('code')} Open in the SQL Worksheet</button></form>`)}
-        ${made ? region('Create page', html`<form method="post" action="${BASE}/apps/${a.id}/json-sources/page">${csrf(s)}<input type="hidden" name="name" value="${x.name}">
-          <p class="muted u-mt0">A form on <code>${x.view}</code>${x.arrays.length ? html` with ${x.arrays.length === 1 ? 'a detail grid' : 'detail grids'} for ${x.arrays.map((y) => y.name).join(', ')}` : ''}. Open it with the key in the URL (<code>P<i>n</i>_${(x.key[0] ?? '').toUpperCase()}</code>), e.g. from a report's link.</p>
-          <div class="form-grid">${input('page_no', 'Page number', '', { type: 'number', required: true })}${input('title', 'Title', x.name.replace(/_/g, ' ').toLowerCase().replace(/^./, (ch) => ch.toUpperCase()), { required: true })}</div>
-          <div class="buttons"><button class="btn">${icon('plus')} Create page</button></div></form>`) : ''}
+          <button class="btn btn-hot" name="mode" value="apply">${icon('check')} ${made ? tx('jsrc.make_the_views_again') : tx('jsrc.create_views')}</button>
+          <button class="btn" name="mode" value="worksheet">${icon('code')} ${tx('jsrc.open_in_the_sql_worksheet')}</button></form>`)}
+        ${made ? region(tx('jsrc.create_page'), html`<form method="post" action="${BASE}/apps/${a.id}/json-sources/page">${csrf(s)}<input type="hidden" name="name" value="${x.name}">
+          <p class="muted u-mt0">${tx.rich(x.arrays.length === 0 ? 'jsrc.form_on' : x.arrays.length === 1 ? 'jsrc.form_on_grid' : 'jsrc.form_on_grids', { view: html`<code>${x.view}</code>`, arrays: x.arrays.map((y) => y.name).join(', '), item: html`<code>P<i>n</i>_${(x.key[0] ?? '').toUpperCase()}</code>` })}</p>
+          <div class="form-grid">${input('page_no', tx('jsrc.page_number'), '', { type: 'number', required: true })}${input('title', tx('jsrc.title'), x.name.replace(/_/g, ' ').toLowerCase().replace(/^./, (ch) => ch.toUpperCase()), { required: true })}</div>
+          <div class="buttons"><button class="btn">${icon('plus')} ${tx('jsrc.create_page')}</button></div></form>`) : ''}
         <form method="post" action="${BASE}/apps/${a.id}/json-sources/source/delete" class="danger-zone">${csrf(s)}<input type="hidden" name="name" value="${x.name}">
-          <button class="btn btn-danger" data-confirm="Delete JSON source ${x.name}? Its views stay in the database (drop them in the SQL Workshop).">Delete JSON source</button></form>`;
+          <button class="btn btn-danger" data-confirm="${tx('jsrc.delete_confirm', { name: x.name })}">${tx('jsrc.delete_json_source')}</button></form>`;
     }
-    const main = html`${appHeader(a, 'shared', s)}<div class="title-row"><h1>${title}</h1></div>${region('JSON source', sourceForm(a, s, x, name, [], tables))}${extra}`;
+    const main = html`${appHeader(a, 'shared', s)}<div class="title-row"><h1>${title}</h1></div>${region(tx('jsrc.json_source'), sourceForm(a, s, x, name, [], tables))}${extra}`;
     return send(reply, s, shell(s, title, crumbs(a, title), main));
   });
 
@@ -265,7 +266,7 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
     const tables = await jsonColumns(db);
     let x = sourceFrom(b, []);
     const errors: string[] = [];
-    if (!tables.some((t) => t.schema === x.schema && t.table === x.table && t.column === x.column)) errors.push('Choose a table and its json or jsonb column.');
+    if (!tables.some((t) => t.schema === x.schema && t.table === x.table && t.column === x.column)) errors.push(tx('jsrc.choose_a_table_and_its'));
     else x.key = await primaryKey(db, x.schema, x.table);
     if (!x.view && x.table) x.view = `${x.table}_${x.column}`.toLowerCase().replace(/[^a-z0-9_]+/g, '_').slice(0, 63);
     if (!errors.length && one(b.mode) === 'propose') {
@@ -280,8 +281,8 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
       }
       const title = original || 'New JSON source';
       const main = html`${appHeader(a, 'shared', s)}<div class="title-row"><h1>${title}</h1></div>
-        <p class="alert alert-info" role="status">Proposed from up to 200 documents: check the names and types, then save.</p>
-        ${region('JSON source', sourceForm(a, s, x, original, [], tables))}`;
+        <p class="alert alert-info" role="status">${tx('jsrc.proposed_from_up_to_200')}</p>
+        ${region(tx('jsrc.json_source'), sourceForm(a, s, x, original, [], tables))}`;
       return send(reply, s, shell(s, title, crumbs(a, title), main));
     }
     const problems = errors.length ? errors : await update(a.id, (list) => {
@@ -290,7 +291,7 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
       if (original && at < 0) out.push(`JSON source ${original} no longer exists.`);
       if (list.some((y, i) => y.name === x.name && i !== at)) out.push(`A JSON source ${x.name} exists already.`);
       const views = new Map(list.filter((_, i) => i !== at).flatMap((y) => [y.view, ...y.arrays.map((z) => z.view)].map((v) => [`${y.schema}.${v}`, y.name])));
-      for (const v of [x.view, ...x.arrays.map((z) => z.view)]) if (views.has(`${x.schema}.${v}`)) out.push(`The view ${v} belongs to JSON source ${views.get(`${x.schema}.${v}`)}.`);
+      for (const v of [x.view, ...x.arrays.map((z) => z.view)]) if (views.has(`${x.schema}.${v}`)) out.push(tx('jsrc.view_taken', { view: v, source: views.get(`${x.schema}.${v}`) ?? '' }));
       if (out.length) return out;
       if (at >= 0) list[at] = x;
       else list.push(x);
@@ -298,10 +299,10 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
     });
     if (problems.length) {
       const title = original || 'New JSON source';
-      const main = html`${appHeader(a, 'shared', s)}<div class="title-row"><h1>${title}</h1></div>${region('JSON source', sourceForm(a, s, x, original, problems, tables))}`;
+      const main = html`${appHeader(a, 'shared', s)}<div class="title-row"><h1>${title}</h1></div>${region(tx('jsrc.json_source'), sourceForm(a, s, x, original, problems, tables))}`;
       return send(reply.code(422), s, shell(s, title, crumbs(a, title), main));
     }
-    flash(s, 'JSON source saved.');
+    flash(s, tx('jsrc.json_source_saved'));
     return back(reply, s, srcUrl(a.id, x.name));
   });
 
@@ -333,7 +334,7 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
     const tables = await jsonColumns(db);
     const problems = jsonSourceProblems(x);
     if (!tables.some((t) => t.schema === x.schema && t.table === x.table && t.column === x.column)) problems.push(`${x.schema}.${x.table}.${x.column} is not a json or jsonb column this connection may use.`);
-    else if ((await primaryKey(db, x.schema, x.table)).join(',') !== x.key.join(',')) problems.push(`The primary key of ${x.schema}.${x.table} changed: save the source again.`);
+    else if ((await primaryKey(db, x.schema, x.table)).join(',') !== x.key.join(',')) problems.push(tx('jsrc.key_changed', { table: `${x.schema}.${x.table}` }));
     const st = problems.length ? new Map() : await viewState(db, x);
     for (const [v, ours] of st) if (!ours) problems.push(`${x.schema}.${v} exists and is not a view of a JSON source: choose another name.`);
     if (problems.length) {
@@ -343,7 +344,7 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
     const ddl = jsonSourceDdl(x, { app: a.alias, grants: await tableGrants(db, x.schema, x.table), replace: st.size > 0 });
     if (one(b.mode) === 'worksheet') {
       s.state.__SQLDRAFT = `${ddl.join(';\n\n')};`;
-      flash(s, 'Check the statements, then run them as a script.');
+      flash(s, tx('jsrc.check_the_statements_then_run'));
       return back(reply, s, `${BASE}/sql/worksheet`);
     }
     const c = await db.pool.connect();
@@ -361,11 +362,11 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
     await logActivity({ username: s.username, event: 'sql_command', ip: clientIp(req), detail: ddl.join(';\n').slice(0, 2000) });
     clearCompletions();
     if (failed) {
-      flash(s, `Nothing was changed: ${failed}`, 'error');
+      flash(s, tx('jsrc.nothing_changed', { error: failed }), 'error');
       return back(reply, s, to);
     }
     await recordChanges({ workspaceId: currentWorkspace(s), author: s.username ?? '?', source: 'table', defaultSchema: x.schema, statements: [joinStatements(ddl)] });
-    flash(s, `The views of ${x.name} are made: ${[x.view, ...x.arrays.map((y) => y.view)].join(', ')}.`);
+    flash(s, tx('jsrc.views_made', { name: x.name, views: [x.view, ...x.arrays.map((y) => y.view)].join(', ') }));
     return back(reply, s, to);
   });
 
@@ -379,7 +380,7 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
     const pageNo = Number(one(b.page_no));
     const title = one(b.title).trim().slice(0, 200) || x.name;
     if (!Number.isInteger(pageNo) || pageNo < 1 || pageNo > 99999) {
-      flash(s, 'The page number is a whole number from 1.', 'error');
+      flash(s, tx('jsrc.the_page_number_is_a'), 'error');
       return back(reply, s, srcUrl(a.id, x.name));
     }
     try {
@@ -388,7 +389,7 @@ export async function jsonSourceRoutes(app: FastifyInstance) {
       flash(s, (e as Error).message, 'error');
       return back(reply, s, srcUrl(a.id, x.name));
     }
-    flash(s, `Page ${pageNo} made: a form on ${x.view}${x.arrays.length ? ' with detail grids' : ''}.`);
+    flash(s, x.arrays.length ? tx('jsrc.page_made_grids', { n: pageNo, view: x.view }) : tx('jsrc.page_made', { n: pageNo, view: x.view }));
     return back(reply, s, `${BASE}/apps/${a.id}/pages/${pageNo}`);
   });
 }

package/src/builder/layouts.ts

@@ -5,6 +5,7 @@ import { icon } from '../icons.ts';
 import { readMultipart } from '../runtime/files.ts';
 import { layoutPreview, type PdfLayout } from '../runtime/pdf.ts';
 import type { Session } from '../session.ts';
+import { scopedTx as tx } from './i18n.ts';
 import { back, BASE, csrf, developer, flash, type Body, type Req } from './ui.ts';
 
 // Shared Components → Report layouts: the logo and the preview. The other
@@ -22,15 +23,15 @@ export function imageType(b: Buffer): 'image/png' | 'image/jpeg' | null {
 /** Logo and preview forms under a layout's settings. */
 export function layoutExtras(appId: number, row: { id: number; logo: Buffer | null }, s: Session) {
   const base = `${BASE}/apps/${appId}/shared/report_layout/${row.id}`;
-  return html`<fieldset class="prop-group u-mt125"><legend>Logo image</legend>
-      ${row.logo ? html`<p><img src="${base}/logo" alt="Logo of this layout" class="layout-logo"></p>` : html`<p class="muted">No logo. It prints at the top right of the first page.</p>`}
+  return html`<fieldset class="prop-group u-mt125"><legend>${tx('lay.logo_image')}</legend>
+      ${row.logo ? html`<p><img src="${base}/logo" alt="${tx('lay.logo_alt')}" class="layout-logo"></p>` : html`<p class="muted">${tx('lay.no_logo')}</p>`}
       <form method="post" action="${base}/logo" enctype="multipart/form-data" class="search u-mwnone">${csrf(s)}
-        <input type="file" name="logo" accept="image/png,image/jpeg" aria-label="Logo (PNG or JPEG)">
-        <button class="btn">${icon('upload')} Upload</button>
-        ${row.logo ? html`<button class="btn" name="remove" value="1">Remove logo</button>` : ''}
+        <input type="file" name="logo" accept="image/png,image/jpeg" aria-label="${tx('lay.logo_file')}">
+        <button class="btn">${icon('upload')} ${tx('lay.upload')}</button>
+        ${row.logo ? html`<button class="btn" name="remove" value="1">${tx('lay.remove')}</button>` : ''}
       </form>
     </fieldset>
-    <div class="buttons"><a class="btn" href="${base}/preview" target="_blank" rel="noopener">${icon('printer')} Preview PDF</a></div>`;
+    <div class="buttons"><a class="btn" href="${base}/preview" target="_blank" rel="noopener">${icon('printer')} ${tx('lay.preview_pdf')}</a></div>`;
 }
 
 export async function layoutRoutes(app: FastifyInstance) {
@@ -56,16 +57,16 @@ export async function layoutRoutes(app: FastifyInstance) {
     if (!(await find(id, cid))) return reply.code(404).send('Not found');
     if (req.body?.remove === '1') {
       await owner.query('update meta.report_layout set logo = null, logo_mime = null where id = $1 and app_id = $2', [cid, id]);
-      flash(s, 'Logo removed.');
+      flash(s, tx('lay.removed'));
       return back(reply, s, target);
     }
     const type = file && !file.truncated ? imageType(file.data) : null;
-    if (!file) flash(s, 'Choose a PNG or JPEG file.', 'error');
-    else if (file.truncated) flash(s, `The logo is larger than ${LOGO_MAX_MB} MB.`, 'error');
-    else if (!type) flash(s, 'The logo must be a PNG or JPEG image.', 'error');
+    if (!file) flash(s, tx('lay.choose'), 'error');
+    else if (file.truncated) flash(s, tx('lay.too_large', { mb: LOGO_MAX_MB }), 'error');
+    else if (!type) flash(s, tx('lay.not_image'), 'error');
     else {
       await owner.query('update meta.report_layout set logo = $3, logo_mime = $4 where id = $1 and app_id = $2', [cid, id, file.data, type]);
-      flash(s, 'Logo saved.');
+      flash(s, tx('lay.saved'));
     }
     return back(reply, s, target);
   });

package/src/builder/locks.ts

@@ -1,10 +1,11 @@
 import type { FastifyInstance, FastifyReply } from 'fastify';
 import { owner } from '../db.ts';
-import { html, raw, type Raw } from '../html.ts';
+import { html, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { clientIp, logActivity, type Session } from '../session.ts';
 import { back, BASE, csrf, developer, flash, type Req } from './ui.ts';
 import { issuesFrom } from '../team.ts';
+import { scopedTx as tx, type BuilderKey } from './i18n.ts';
 
 // Page locks, the application lock and developer comments (APEX: page locks,
 // application lock in 26.1, developer comments). A developer locks a page
@@ -79,12 +80,12 @@ export async function blockingLock(username: string, path: string): Promise<{ lo
 
 export const lockText = (l: Pick<Lock, 'page_no' | 'locked_by' | 'locked_at' | 'note' | 'run_only'>) =>
   l.run_only
-    ? 'The application is Run only (Availability → Build status).'
-    : `${l.page_no ? `Page ${l.page_no}` : 'The application'} is locked by ${l.locked_by} since ${l.locked_at.slice(0, 16)}${l.note ? ` (${l.note})` : ''}.`;
+    ? tx('lk.run_only')
+    : tx(l.page_no ? 'lk.page_locked_by' : 'lk.app_locked_by', { page: l.page_no, user: l.locked_by, since: l.locked_at.slice(0, 16), note: l.note ? ` (${l.note})` : '' });
 
 /** Refuse a change to a locked page or application: a JSON error or a message on the page it came from. */
 export async function refuseLocked(req: Req, reply: FastifyReply, s: Session, hit: NonNullable<Awaited<ReturnType<typeof blockingLock>>>) {
-  const message = hit.lock.run_only ? `${lockText(hit.lock)} Set it back to Run and build to change it.` : `${lockText(hit.lock)} Changes are refused until it is unlocked.`;
+  const message = `${lockText(hit.lock)} ${tx(hit.lock.run_only ? 'lk.run_only_refused' : 'lk.refused')}`;
   if (String(req.headers.accept ?? '').includes('application/json')) return reply.code(423).send({ ok: false, error: message });
   flash(s, message, 'error');
   return back(reply, s, hit.pageId ? `${BASE}/pages/${hit.pageId}` : `${BASE}/apps/${hit.appId}`);
@@ -101,40 +102,40 @@ export async function lockPanel(s: Session, appId: number, pageNo: number, opts:
   const issues = await issuesFrom('comment', comments.rows.map((c) => Number(c.id)));
   const own = locks.find((l) => l.page_no === pageNo);
   const appLock = pageNo ? locks.find((l) => l.page_no === 0) : undefined;
-  const what = pageNo ? `page ${pageNo}` : 'the application';
+  const pick = (page: BuilderKey, app: BuilderKey, params: Record<string, string | number> = {}) => tx(pageNo ? page : app, { page: pageNo, ...params });
   const hidden = html`<input type="hidden" name="page_no" value="${pageNo}">`;
   const lockState = own
     ? html`<p class="lock-state">${icon('key')} <span>${lockText(own)}</span></p>
         ${own.locked_by === s.username || admin
           ? html`<form method="post" action="${BASE}/apps/${appId}/unlock">${csrf(s)}${hidden}
-              <button class="btn"${own.locked_by !== s.username ? raw(` data-confirm="Break ${own.locked_by}'s lock on ${what}?"`) : ''}>${own.locked_by === s.username ? 'Unlock' : 'Break lock (administrator)'}</button></form>`
-          : html`<p class="muted">Only ${own.locked_by} or an administrator can unlock it.</p>`}`
-    : html`<p class="muted">Not locked: every developer can change ${what}.</p>
+              <button class="btn"${own.locked_by !== s.username ? html` data-confirm="${pick('lk.break_confirm_page', 'lk.break_confirm_app', { user: own.locked_by })}"` : ''}>${own.locked_by === s.username ? tx('lk.unlock') : tx('lk.break')}</button></form>`
+          : html`<p class="muted">${tx('lk.only_owner', { user: own.locked_by })}</p>`}`
+    : html`<p class="muted">${pick('lk.not_locked_page', 'lk.not_locked_app')}</p>
         <form method="post" action="${BASE}/apps/${appId}/lock" class="search u-mwnone">${csrf(s)}${hidden}
-          <label class="sr-only" for="lock-note-${pageNo}">Note</label>
-          <input id="lock-note-${pageNo}" name="note" maxlength="500" placeholder="Note (optional), e.g. reworking the form">
-          <button class="btn">${icon('key')} Lock ${what}</button></form>`;
+          <label class="sr-only" for="lock-note-${pageNo}">${tx('lk.note')}</label>
+          <input id="lock-note-${pageNo}" name="note" maxlength="500" placeholder="${tx('lk.note_ph')}">
+          <button class="btn">${icon('key')} ${pick('lk.lock_page', 'lk.lock_app')}</button></form>`;
   return html`<div class="lock-panel">
-    ${opts.headings === false ? '' : html`<h3>Lock</h3>`}
+    ${opts.headings === false ? '' : html`<h3>${tx('lk.lock')}</h3>`}
     ${appLock && appLock.locked_by !== s.username ? html`<div class="alert alert-error" role="status">${lockText(appLock)}</div>` : ''}
     ${lockState}
-    <h3>Comments</h3>
+    <h3>${tx('lk.comments')}</h3>
     <form method="post" action="${BASE}/apps/${appId}/comments">${csrf(s)}${hidden}
-      <div class="field"><label class="label" for="comment-${pageNo}">Add a comment on ${what}</label>
+      <div class="field"><label class="label" for="comment-${pageNo}">${pick('lk.comment_on_page', 'lk.comment_on_app')}</label>
         <textarea id="comment-${pageNo}" name="body" rows="3" maxlength="4000" required></textarea></div>
-      <div class="buttons"><button class="btn">Add comment</button></div>
+      <div class="buttons"><button class="btn">${tx('lk.add_comment')}</button></div>
     </form>
     ${comments.rows.length
       ? html`<ul class="dev-comments">${comments.rows.map((c) => html`<li>
           <div class="dev-comment-head"><b>${c.author}</b> <span class="muted">${String(c.created_at).slice(0, 16)}</span>
             ${c.author === s.username || admin
-              ? html`<form method="post" action="${BASE}/apps/${appId}/comments/${c.id}/delete" class="u-inline">${csrf(s)}<button class="link-button" data-confirm="Delete this comment?">Delete</button></form>`
+              ? html`<form method="post" action="${BASE}/apps/${appId}/comments/${c.id}/delete" class="u-inline">${csrf(s)}<button class="link-button" data-confirm="${tx('lk.delete_comment_confirm')}">${tx('lk.delete')}</button></form>`
               : ''}
             ${issues.get(Number(c.id))
-              ? html`<a class="small" href="/builder/team/issues/${issues.get(Number(c.id))}">${icon('kanban')} Issue #${issues.get(Number(c.id))}</a>`
-              : html`<form method="post" action="/builder/team/from-comment" class="u-inline">${csrf(s)}<input type="hidden" name="comment" value="${c.id}"><button class="link-button">Make an issue</button></form>`}</div>
+              ? html`<a class="small" href="/builder/team/issues/${issues.get(Number(c.id))}">${icon('kanban')} ${tx('lk.issue', { n: issues.get(Number(c.id))! })}</a>`
+              : html`<form method="post" action="/builder/team/from-comment" class="u-inline">${csrf(s)}<input type="hidden" name="comment" value="${c.id}"><button class="link-button">${tx('lk.make_issue')}</button></form>`}</div>
           <p class="dev-comment-body">${c.body}</p></li>`)}</ul>`
-      : html`<p class="muted">No comments yet.</p>`}
+      : html`<p class="muted">${tx('lk.no_comments')}</p>`}
   </div>`;
 }
 
@@ -166,8 +167,8 @@ export async function lockRoutes(app: FastifyInstance) {
       `insert into meta.builder_lock (app_id, page_no, locked_by, note) values ($1, $2, $3, $4) on conflict (app_id, page_no) do nothing`,
       [t.appId, t.pageNo, s.username, note],
     );
-    if (r.rowCount) flash(s, `${t.pageNo ? `Page ${t.pageNo}` : 'The application'} is locked: other developers can't change it until you unlock it.`);
-    else flash(s, 'It is already locked.', 'error');
+    if (r.rowCount) flash(s, tx(t.pageNo ? 'lk.locked_page' : 'lk.locked_app', { page: t.pageNo }));
+    else flash(s, tx('lk.already'), 'error');
     return back(reply, s, await backTo(t.appId, t.pageNo));
   });
 
@@ -178,14 +179,14 @@ export async function lockRoutes(app: FastifyInstance) {
     if (!t) return reply.code(404).send('Not found');
     const lock = await owner.one<Lock>('select app_id, page_no, locked_by, locked_at::text, note from meta.builder_lock where app_id = $1 and page_no = $2', [t.appId, t.pageNo]);
     if (!lock) {
-      flash(s, 'It is not locked.');
+      flash(s, tx('lk.not_locked'));
     } else if (lock.locked_by !== s.username && !(await isAdmin(s.username))) {
-      return reply.code(403).send('Only the developer who locked it or an administrator can unlock it.');
+      return reply.code(403).send(tx('lk.only_unlocker'));
     } else {
       await owner.query('delete from meta.builder_lock where app_id = $1 and page_no = $2', [t.appId, t.pageNo]);
       if (lock.locked_by !== s.username)
         await logActivity({ appId: t.appId, pageNo: t.pageNo || null, username: s.username, event: 'lock_broken', ip: clientIp(req), detail: `builder: lock of ${lock.locked_by}` });
-      flash(s, lock.locked_by === s.username ? 'Unlocked.' : `${lock.locked_by}'s lock was broken.`);
+      flash(s, lock.locked_by === s.username ? tx('lk.unlocked') : tx('lk.broken', { user: lock.locked_by }));
     }
     return back(reply, s, await backTo(t.appId, t.pageNo));
   });
@@ -196,10 +197,10 @@ export async function lockRoutes(app: FastifyInstance) {
     const t = await target(req);
     if (!t) return reply.code(404).send('Not found');
     const body = (req.body?.body ?? '').trim();
-    if (!body || body.length > 4000) flash(s, 'A comment has 1 to 4000 characters.', 'error');
+    if (!body || body.length > 4000) flash(s, tx('lk.comment_length'), 'error');
     else {
       await owner.query('insert into meta.dev_comment (app_id, page_no, author, body) values ($1, $2, $3, $4)', [t.appId, t.pageNo, s.username, body]);
-      flash(s, 'Comment added.');
+      flash(s, tx('lk.comment_added'));
     }
     return back(reply, s, await backTo(t.appId, t.pageNo));
   });
@@ -211,9 +212,9 @@ export async function lockRoutes(app: FastifyInstance) {
       ? await owner.one('select id, app_id, page_no, author from meta.dev_comment where id = $1 and app_id = $2', [req.params.cid, req.params.id])
       : undefined;
     if (!c) return reply.code(404).send('Not found');
-    if (c.author !== s.username && !(await isAdmin(s.username))) return reply.code(403).send('Only the author or an administrator can delete a comment.');
+    if (c.author !== s.username && !(await isAdmin(s.username))) return reply.code(403).send(tx('lk.only_author'));
     await owner.query('delete from meta.dev_comment where id = $1', [c.id]);
-    flash(s, 'Comment deleted.');
+    flash(s, tx('lk.comment_deleted'));
     return back(reply, s, await backTo(c.app_id, c.page_no));
   });
 }