pgkiln 0.84.0 → 0.85.0

package/src/builder/create-page.ts

@@ -2,10 +2,11 @@ import type { FastifyInstance } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
-import { featureStates } from './features.ts';
+import { featHelp, featLabel, featureStates } from './features.ts';
 import { appOr404 } from './forms.ts';
 import { appHeader, back, BASE, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
-import { NO_TABLE, PAGE_KINDS, wizardTables } from './wizards.ts';
+import { kindHelp, kindLabel, NO_TABLE, PAGE_KINDS, wizardTables } from './wizards.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // (sprint 137, AP-3) Create Page like APEX's: a grid of page types with small previews (tab Component), the
 // features (tab Feature, features.ts) and Create page as copy (tab Copy), at /builder/apps/:id/create-page.
@@ -14,12 +15,12 @@ import { NO_TABLE, PAGE_KINDS, wizardTables } from './wizards.ts';
 // forms: no JavaScript needed. The previews are inline SVG drawn with classes (public/builder.css), no styles.
 
 /** The grid's order (APEX's names), each with the step it starts with. */
-const GRID: { key: string; label: string; help: string; table: boolean }[] = [
-  { key: 'blank', label: 'Blank page', help: 'An empty page to build in the Page Designer.', table: false },
+const GRID = (): { key: string; label: string; help: string; table: boolean }[] => [
+  { key: 'blank', label: tx('cpg.blank_page'), help: tx('cpg.an_empty_page_to_build'), table: false },
   ...['calendar', 'cards', 'chart', 'comments', 'content_row', 'dashboard', 'data_load', 'facets', 'form', 'grid', 'report', 'map',
     'master_detail', 'media_list', 'report_form', 'search', 'smart_filters', 'timeline', 'tree', 'tasks', 'wizard', 'workflows'].map((k) => {
     const d = PAGE_KINDS.find((x) => x[0] === k)!;
-    return { key: k, label: d[1], help: d[2], table: !NO_TABLE.has(k) };
+    return { key: k, label: kindLabel(k, d[1]), help: kindHelp(k, d[2]), table: !NO_TABLE.has(k) };
   }),
 ];
 
@@ -66,7 +67,7 @@ const PREVIEWS: Record<string, string> = {
 export const preview = (key: string): Raw =>
   raw(`<svg class="cp-svg" viewBox="0 0 80 50" aria-hidden="true" focusable="false">${PREVIEWS[key] ?? PREVIEWS.blank}</svg>`);
 
-const TABS: [string, string][] = [['component', 'Component'], ['feature', 'Feature'], ['copy', 'Copy']];
+const TABS: [string, string][] = [['component', tx('cpg.component')], ['feature', tx('cpg.feature')], ['copy', tx('cpg.copy')]];
 
 export async function createPageRoutes(app: FastifyInstance) {
   app.get(`${BASE}/apps/:id/create-page`, async (req: Req, reply) => {
@@ -76,8 +77,8 @@ export async function createPageRoutes(app: FastifyInstance) {
     if (!a) return reply.code(404).send('Not found');
     const q = req.query as Record<string, string | undefined>;
     const tab = TABS.some(([t]) => t === q.tab) ? q.tab! : 'component';
-    const type = GRID.find((g) => g.key === q.type);
-    const crumbs: [string, string?][] = [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', type ? `${BASE}/apps/${a.id}/create-page` : undefined]];
+    const type = GRID().find((g) => g.key === q.type);
+    const crumbs: [string, string?][] = [[tx('cpg.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', type ? `${BASE}/apps/${a.id}/create-page` : undefined]];
     const nextPage = async () => {
       const used = new Set((await owner.query('select page_no from meta.page where app_id = $1', [a.id])).rows.map((r) => r.page_no as number));
       let n = Math.max(0, ...[...used].filter((x) => x < 9000)) + 1;
@@ -91,49 +92,49 @@ export async function createPageRoutes(app: FastifyInstance) {
       if (type.key === 'blank') {
         body = html`<form method="post" action="${BASE}/apps/${a.id}/pages">${csrf(s)}
             <div class="form-grid">
-              ${input('page_no', 'Page number', await nextPage(), { type: 'number', required: true })}
-              ${input('name', 'Name', '', { required: true })}
-              ${select('mode', 'Page mode', 'normal', [['normal', 'Normal page'], ['modal', 'Modal dialog']])}
-              ${input('parent_page', 'Breadcrumb parent', a.home_page ?? '', { type: 'number' })}
+              ${input('page_no', tx('cpg.page_number'), await nextPage(), { type: 'number', required: true })}
+              ${input('name', tx('cpg.name'), '', { required: true })}
+              ${select('mode', tx('cpg.page_mode'), 'normal', [['normal', tx('cpg.normal_page')], ['modal', tx('cpg.modal_dialog')]])}
+              ${input('parent_page', tx('cpg.breadcrumb_parent'), a.home_page ?? '', { type: 'number' })}
             </div>
-            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">Back</a><button class="btn btn-hot">Create page</button></div>
+            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.create_page')}</button></div>
           </form>`;
       } else {
         const tables = await wizardTables(a.db_role);
         body = html`<form method="get" action="${BASE}/apps/${a.id}/wizard">
             <input type="hidden" name="kind" value="${type.key}">
             <div class="form-grid">
-              ${select('table', 'Table or view', '', tables.map((t): [string, string] => [t.t, t.access ? t.t : `${t.t} (no access for ${a.db_role})`]),
+              ${select('table', tx('cpg.table_or_view'), '', tables.map((t): [string, string] => [t.t, t.access ? t.t : `${t.t} (no access for ${a.db_role})`]),
                 'The next step proposes the columns, keys and foreign keys from the database catalog.')}
             </div>
-            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">Back</a><button class="btn btn-hot">Next</button></div>
+            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.next')}</button></div>
           </form>`;
       }
       const main = html`${appHeader(a, 'pages', s)}
         ${region(type.label, html`<div class="cp-step"><span class="cp-preview cp-preview-lg">${preview(type.key)}</span><p class="muted">${type.help}</p></div>${body}`)}`;
-      return send(reply, s, shell(s, `Create page · ${a.name}`, [...crumbs, [type.label]], main));
+      return send(reply, s, shell(s, tx('cpg.page_title', { app: a.name }), [...crumbs, [type.label]], main));
     }
 
-    const tabs = html`<nav class="gal-tabs segmented cp-tabs" aria-label="Create page">${TABS.map(([t, l]) =>
+    const tabs = html`<nav class="gal-tabs segmented cp-tabs" aria-label="${tx('cpg.create_page')}">${TABS.map(([t, l]) =>
       html`<a href="${BASE}/apps/${a.id}/create-page?tab=${t}"${t === tab ? raw(' aria-current="page"') : ''}>${l}</a>`)}</nav>`;
     let body: Raw;
     if (tab === 'component') {
-      const href = (g: (typeof GRID)[number]) =>
+      const href = (g: ReturnType<typeof GRID>[number]) =>
         g.key !== 'blank' && !g.table ? `${BASE}/apps/${a.id}/wizard?kind=${g.key}` : `${BASE}/apps/${a.id}/create-page?type=${g.key}`;
-      body = html`<p class="muted u-mt0">Choose a page type. Types on a table ask for it next; every type proposes its settings and opens the new page in the Page Designer.</p>
-        <ul class="cp-grid">${GRID.map((g) => html`<li><a class="cp-type" href="${href(g)}"><span class="cp-preview">${preview(g.key)}</span><b>${g.label}</b><small>${g.help}</small></a></li>`)}
-          <li><a class="cp-type" href="${BASE}/apps/${a.id}/ai-pages"><span class="cp-preview">${preview('ai')}</span><b>Create pages with AI</b><small>Describe the pages in your own words; check the proposals before they are made.</small></a></li></ul>`;
+      body = html`<p class="muted u-mt0">${tx('cpg.choose_a_page_type_types')}</p>
+        <ul class="cp-grid">${GRID().map((g) => html`<li><a class="cp-type" href="${href(g)}"><span class="cp-preview">${preview(g.key)}</span><b>${g.label}</b><small>${g.help}</small></a></li>`)}
+          <li><a class="cp-type" href="${BASE}/apps/${a.id}/ai-pages"><span class="cp-preview">${preview('ai')}</span><b>${tx('cpg.create_pages_with_ai')}</b><small>${tx('cpg.describe_the_pages_in_your')}</small></a></li></ul>`;
     } else if (tab === 'feature') {
       const states = await featureStates(a.id);
-      body = html`<p class="muted u-mt0">Features add pages and settings to the application. Each lists what it adds before it creates anything; an installed feature is greyed out.</p>
+      body = html`<p class="muted u-mt0">${tx('cpg.features_add_pages_and_settings')}</p>
         <ul class="cp-grid">${states.map(({ f, installed, blocked }) => html`<li><a class="cp-type${installed || blocked ? ' cp-done' : ''}" href="${BASE}/apps/${a.id}/features/${f.key}">
-            <span class="cp-feature-icon">${icon(f.icon)}</span><b>${f.label}</b><small>${f.help}</small>
-            ${installed ? html`<span class="tag">Installed</span>` : blocked ? html`<span class="tag">Not available</span>` : ''}</a></li>`)}</ul>`;
+            <span class="cp-feature-icon">${icon(f.icon)}</span><b>${featLabel(f)}</b><small>${featHelp(f)}</small>
+            ${installed ? html`<span class="tag">${tx('cpg.installed')}</span>` : blocked ? html`<span class="tag">${tx('cpg.not_available')}</span>` : ''}</a></li>`)}</ul>`;
     } else {
       body = await copyStep1(a, s.username!);
     }
-    const main = html`${appHeader(a, 'pages', s)}${region('Create page', html`${tabs}${body}`)}`;
-    return send(reply, s, shell(s, `Create page · ${a.name}`, crumbs, main));
+    const main = html`${appHeader(a, 'pages', s)}${region(tx('cpg.create_page'), html`${tabs}${body}`)}`;
+    return send(reply, s, shell(s, tx('cpg.page_title', { app: a.name }), crumbs, main));
   });
 
   // ---------------------------------------------------------------- Create page as copy
@@ -146,17 +147,17 @@ export async function createPageRoutes(app: FastifyInstance) {
     const q = req.query as Record<string, string | undefined>;
     const from = await sourceApp(a.id, q.from);
     if (!from) {
-      flash(s, 'Choose an application of this workspace.', 'error');
+      flash(s, tx('cpg.choose_an_application_of_this'), 'error');
       return back(reply, s, `${BASE}/apps/${a.id}/create-page?tab=copy`);
     }
     const pages = (await owner.query<{ id: number; page_no: number; name: string }>('select id, page_no, name from meta.page where app_id = $1 order by page_no', [from.id])).rows;
     const page = pages.find((p) => String(p.page_no) === q.page);
-    const crumbs: [string, string?][] = [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', `${BASE}/apps/${a.id}/create-page?tab=copy`], ['Copy']];
+    const crumbs: [string, string?][] = [[tx('cpg.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('cpg.create_page'), `${BASE}/apps/${a.id}/create-page?tab=copy`], [tx('cpg.copy')]];
     let body: Raw;
     if (!page) {
       body = html`<form method="get" action="${BASE}/apps/${a.id}/copy-page"><input type="hidden" name="from" value="${from.id}">
-          <div class="form-grid">${select('page', `Page of ${from.name}`, '', pages.map((p): [string, string] => [String(p.page_no), `${p.page_no} ${p.name}`]))}</div>
-          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=copy">Back</a><button class="btn btn-hot">Next</button></div></form>`;
+          <div class="form-grid">${select('page', tx('cpg.page_of', { app: from.name }), '', pages.map((p): [string, string] => [String(p.page_no), `${p.page_no} ${p.name}`]))}</div>
+          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=copy">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.next')}</button></div></form>`;
     } else {
       const refs = (await owner.query<{ kind: string; name: string; in_target: boolean }>('select * from meta.page_shared_refs($1, $2)', [page.id, a.id])).rows;
       const used = new Set((await owner.query('select page_no from meta.page where app_id = $1', [a.id])).rows.map((r) => r.page_no as number));
@@ -166,27 +167,27 @@ export async function createPageRoutes(app: FastifyInstance) {
       const options = async (kind: string) => (await owner.query<{ n: string }>(SHARED_NAMES[kind], [a.id])).rows.map((r) => r.n);
       const mapRows = await Promise.all(refs.map(async (r) => {
         const names = await options(r.kind);
-        const opts: [string, string][] = [...(same || r.in_target ? [] : [['', 'Copy it into this application'] as [string, string]]), ...names.map((n): [string, string] => [n, `Use ${n}`])];
-        return html`<tr><td>${KIND_LABELS[r.kind] ?? r.kind}</td><td><code>${r.name}</code></td><td>
-          <select name="map:${r.kind}:${r.name}" aria-label="${KIND_LABELS[r.kind] ?? r.kind} ${r.name}">${opts.map(([v, l]) => html`<option value="${v}"${v === (r.in_target || same ? r.name : '') ? raw(' selected') : ''}>${l}</option>`)}</select></td></tr>`;
+        const opts: [string, string][] = [...(same || r.in_target ? [] : [['', tx('cpg.copy_it_into_this_application')] as [string, string]]), ...names.map((n): [string, string] => [n, tx('cpg.use_name', { name: n })])];
+        return html`<tr><td>${kindName(r.kind)}</td><td><code>${r.name}</code></td><td>
+          <select name="map:${r.kind}:${r.name}" aria-label="${kindName(r.kind)} ${r.name}">${opts.map(([v, l]) => html`<option value="${v}"${v === (r.in_target || same ? r.name : '') ? raw(' selected') : ''}>${l}</option>`)}</select></td></tr>`;
       }));
-      body = html`<p class="muted u-mt0">Page ${page.page_no} <b>${page.name}</b> of ${from.name}: its regions, items, buttons, dynamic actions, validations, processes, computations and branches. Items named P${page.page_no}_… are renamed to the new number, also where the page's code refers to them.</p>
+      body = html`<p class="muted u-mt0">${tx.rich('cpg.copy_intro', { n: page.page_no, name: html`<b>${page.name}</b>`, app: from.name, prefix: `P${page.page_no}_` })}</p>
         <form method="post" action="${BASE}/apps/${a.id}/copy-page">${csrf(s)}
           <input type="hidden" name="from" value="${from.id}"><input type="hidden" name="page" value="${page.page_no}">
           <div class="form-grid">
-            ${input('new_page', 'New page number', no, { type: 'number', required: true })}
-            ${input('name', 'Name', page.name, { required: true })}
+            ${input('new_page', tx('cpg.new_page_number'), no, { type: 'number', required: true })}
+            ${input('name', tx('cpg.name'), page.name, { required: true })}
           </div>
           ${refs.length
-            ? html`<h3>Shared components</h3><p class="muted small">The page refers to these by name. ${same ? 'In the same application they stay as they are, or point to another of the same kind.' : 'Use one of this application\'s, or copy it from the other application.'}</p>
-              <div class="table-wrap"><table class="report"><thead><tr><th>Kind</th><th>Name</th><th>In this application</th></tr></thead><tbody>${mapRows}</tbody></table></div>`
-            : html`<p class="muted">The page uses no shared components.</p>`}
-          ${same ? '' : html`<p class="muted small">Its SQL runs as this application's database role <code>${a.db_role ?? '(none)'}</code>: grant it what ${from.name}'s role may read and change.</p>`}
-          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/copy-page?from=${from.id}">Back</a><button class="btn btn-hot">Copy page</button></div>
+            ? html`<h3>${tx('cpg.shared_components')}</h3><p class="muted small">${tx('cpg.refers_by_name')} ${same ? tx('cpg.in_the_same_application_they') : tx('cpg.use_one_of_this_application')}</p>
+              <div class="table-wrap"><table class="report"><thead><tr><th>${tx('cpg.kind')}</th><th>${tx('cpg.name')}</th><th>${tx('cpg.in_this_application')}</th></tr></thead><tbody>${mapRows}</tbody></table></div>`
+            : html`<p class="muted">${tx('cpg.the_page_uses_no_shared')}</p>`}
+          ${same ? '' : html`<p class="muted small">${tx.rich('cpg.sql_runs_as', { role: html`<code>${a.db_role ?? tx('cpg.none')}</code>`, app: from.name })}</p>`}
+          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/copy-page?from=${from.id}">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.copy_page')}</button></div>
         </form>`;
     }
-    const main = html`${appHeader(a, 'pages', s)}${region('Create page as copy', body)}`;
-    return send(reply, s, shell(s, `Copy page · ${a.name}`, crumbs, main));
+    const main = html`${appHeader(a, 'pages', s)}${region(tx('cpg.create_page_as_copy'), body)}`;
+    return send(reply, s, shell(s, tx('cpg.copy_title', { app: a.name }), crumbs, main));
   });
 
   app.post(`${BASE}/apps/:id/copy-page`, async (req: Req, reply) => {
@@ -198,15 +199,15 @@ export async function createPageRoutes(app: FastifyInstance) {
     const from = await sourceApp(a.id, String(b.from ?? ''));
     const retry = `${BASE}/apps/${a.id}/copy-page?from=${encodeURIComponent(String(b.from ?? ''))}&page=${encodeURIComponent(String(b.page ?? ''))}`;
     if (!from) {
-      flash(s, 'Choose an application of this workspace.', 'error');
+      flash(s, tx('cpg.choose_an_application_of_this'), 'error');
       return back(reply, s, `${BASE}/apps/${a.id}/create-page?tab=copy`);
     }
     try {
       const page = /^\d{1,6}$/.test(String(b.page ?? '')) ? Number(b.page) : NaN;
       const no = /^\d{1,6}$/.test(String(b.new_page ?? '').trim()) ? Number(String(b.new_page).trim()) : NaN;
-      if (!(no >= 1)) throw new Error('Enter a page number.');
+      if (!(no >= 1)) throw new Error(tx('cpg.enter_a_page_number'));
       const name = String(b.name ?? '').trim().slice(0, 200);
-      if (!name) throw new Error('Enter a name.');
+      if (!name) throw new Error(tx('cpg.enter_a_name'));
       // map:<kind>:<NAME> → a name of the target's (empty: copy); only known kinds pass
       const map: Record<string, string> = {};
       for (const [k, v] of Object.entries(b)) {
@@ -214,7 +215,7 @@ export async function createPageRoutes(app: FastifyInstance) {
         if (m && Object.hasOwn(SHARED_NAMES, m[1]) && typeof v === 'string') map[`${m[1]}:${m[2]}`] = v.slice(0, 100);
       }
       const id = await owner.tx(async (c) => (await c.query('select meta.copy_page($1, $2, $3, $4, $5, $6::jsonb) as id', [from.id, page, a.id, no, name, JSON.stringify(map)])).rows[0].id as number);
-      flash(s, `Page ${no} "${name}" created as a copy of page ${page}${from.id === a.id ? '' : ` of ${from.name}`}.`);
+      flash(s, from.id === a.id ? tx('cpg.copied', { n: no, name, page }) : tx('cpg.copied_from', { n: no, name, page, app: from.name }));
       return back(reply, s, `${BASE}/pages/${id}`);
     } catch (e) {
       flash(s, (e as Error).message, 'error');
@@ -227,6 +228,7 @@ const KIND_LABELS: Record<string, string> = {
   authz_scheme: 'Authorization scheme', build_option: 'Build option', lov: 'List of values', list: 'List',
   template_component: 'Template component', search_config: 'Search configuration', data_load_def: 'Data load definition',
 };
+const kindName = (k: string) => (Object.hasOwn(KIND_LABELS, k) ? tx.dyn(`cpg.k.${k}`, KIND_LABELS[k]) : k);
 /** The target application's names of each kind (the choices of the mapping). */
 const SHARED_NAMES: Record<string, string> = {
   authz_scheme: 'select name as n from meta.authz_scheme where app_id = $1 order by 1',
@@ -251,9 +253,9 @@ async function copyStep1(a: { id: number; name: string }, _user: string): Promis
   const apps = (await owner.query<{ id: number; name: string; alias: string }>(
     'select id, name, alias from meta.app where meta.app_workspace(id) = meta.app_workspace($1) order by id <> $1, lower(name)', [a.id],
   )).rows;
-  return html`<p class="muted u-mt0">Copy a page of this application or another application of the workspace, under a new number and name. The shared components it uses (lists of values, authorization schemes, lists…) are mapped to this application's or copied.</p>
+  return html`<p class="muted u-mt0">${tx('cpg.copy_a_page_of_this')}</p>
     <form method="get" action="${BASE}/apps/${a.id}/copy-page">
-      <div class="form-grid">${select('from', 'Copy from application', String(a.id), apps.map((x): [string, string] => [String(x.id), x.id === a.id ? `${x.name} (this application)` : `${x.name} (${x.alias})`]))}</div>
-      <div class="buttons"><button class="btn btn-hot">Next</button></div>
+      <div class="form-grid">${select('from', tx('cpg.copy_from_application'), String(a.id), apps.map((x): [string, string] => [String(x.id), x.id === a.id ? `${x.name} (this application)` : `${x.name} (${x.alias})`]))}</div>
+      <div class="buttons"><button class="btn btn-hot">${tx('cpg.next')}</button></div>
     </form>`;
 }

package/src/builder/cross-app.ts

@@ -4,6 +4,7 @@ import { html, raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { BASE, developer, region, send, shell, type Req } from './ui.ts';
 import { currentWorkspace } from './workspaces.ts';
+import { scopedTx as tx, type BuilderKey } from './i18n.ts';
 
 // Cross-application reports (sprint 61; APEX: Workspace Utilities → Cross
 // Application Reports): one read-only report per topic over every application
@@ -11,9 +12,10 @@ import { currentWorkspace } from './workspaces.ts';
 // returns app_id and app (the name) first; those become a link.
 
 interface Report {
-  title: string;
-  about: string;
-  columns: [key: string, label: string, cls?: 'num'][];
+  /** Message keys (src/builder/i18n): the title, the introduction and the column labels. */
+  title: BuilderKey;
+  about: BuilderKey;
+  columns: [key: string, label: BuilderKey, cls?: 'num'][];
   sql: string;
 }
 
@@ -22,56 +24,56 @@ const IN_WS = 'meta.app_workspace(a.id) = $1';
 
 export const REPORTS: Record<string, Report> = {
   attributes: {
-    title: 'Application attributes',
-    about: 'The main settings of every application: type, sign-in, availability, build status, debug level, language and database role.',
-    columns: [['alias', 'Alias'], ['app_type', 'Type'], ['authentication', 'Sign-in'], ['availability', 'Availability'], ['build_status', 'Build status'], ['debug_level', 'Debug', 'num'], ['language', 'Language'], ['db_role', 'Database role'], ['updated', 'Updated']],
+    title: 'xap.attributes.title',
+    about: 'xap.attributes.about',
+    columns: [['alias', 'xap.col.alias'], ['app_type', 'xap.col.type'], ['authentication', 'xap.col.sign_in'], ['availability', 'xap.col.availability'], ['build_status', 'xap.col.build_status'], ['debug_level', 'xap.col.debug', 'num'], ['language', 'xap.col.language'], ['db_role', 'xap.col.database_role'], ['updated', 'xap.col.updated']],
     sql: `select a.id as app_id, a.name as app, a.alias, a.app_type, a.authentication, a.availability, a.build_status, a.debug_level,
                  a.language, coalesce(a.db_role, '(runtime connection)') as db_role, to_char(a.updated_at, 'YYYY-MM-DD HH24:MI') as updated
             from meta.app a where ${IN_WS} order by lower(a.name)`,
   },
   'build-options': {
-    title: 'Build options',
-    about: 'The build options of every application and whether their components are included.',
-    columns: [['name', 'Build option'], ['status', 'Status'], ['description', 'Description']],
+    title: 'xap.build_options.title',
+    about: 'xap.build_options.about',
+    columns: [['name', 'xap.col.build_option'], ['status', 'xap.col.status'], ['description', 'xap.col.description']],
     sql: `select a.id as app_id, a.name as app, b.name, b.status, b.description
             from meta.app a join meta.build_option b on b.app_id = a.id where ${IN_WS} order by lower(a.name), b.name`,
   },
   comments: {
-    title: 'Developer comments',
-    about: 'The developers\' comments on applications and pages, newest first.',
-    columns: [['page_no', 'Page', 'num'], ['author', 'Author'], ['created', 'Written'], ['body', 'Comment']],
+    title: 'xap.comments.title',
+    about: 'xap.comments.about',
+    columns: [['page_no', 'xap.col.page', 'num'], ['author', 'xap.col.author'], ['created', 'xap.col.written'], ['body', 'xap.col.comment']],
     sql: `select a.id as app_id, a.name as app, c.page_no, c.author, to_char(c.created_at, 'YYYY-MM-DD HH24:MI') as created, left(c.body, 500) as body
             from meta.app a join meta.dev_comment c on c.app_id = a.id where ${IN_WS} order by c.created_at desc limit 500`,
   },
   authentication: {
-    title: 'Authentication',
-    about: 'How people sign in to every application: the sign-in method, password sign-in, identity providers and LDAP directories, access control, the login page and Forgot password.',
-    columns: [['authentication', 'Sign-in'], ['local_login', 'Passwords'], ['providers', 'Identity providers'], ['ldap', 'LDAP directories'], ['access_control', 'Access'], ['remember_me_days', 'Keep me signed in (days)', 'num'], ['login_page', 'Login page', 'num'], ['password_reset', 'Forgot password']],
+    title: 'xap.authentication.title',
+    about: 'xap.authentication.about',
+    columns: [['authentication', 'xap.col.sign_in'], ['local_login', 'xap.col.passwords'], ['providers', 'xap.col.identity_providers'], ['ldap', 'xap.col.ldap_directories'], ['access_control', 'xap.col.access'], ['remember_me_days', 'xap.col.keep_me_signed_in_days', 'num'], ['login_page', 'xap.col.login_page', 'num'], ['password_reset', 'xap.col.forgot_password']],
     sql: `select a.id as app_id, a.name as app, a.authentication, case when a.local_login then 'yes' else 'no' end as local_login,
                  array_to_string(a.sso_providers, ', ') as providers, array_to_string(a.ldap_directories, ', ') as ldap,
                  a.access_control, a.remember_me_days, a.login_page, case when a.password_reset then 'yes' else 'no' end as password_reset
             from meta.app a where ${IN_WS} order by lower(a.name)`,
   },
   authorization: {
-    title: 'Authorization schemes',
-    about: 'The authorization schemes of every application: their type and what they check.',
-    columns: [['name', 'Scheme'], ['type', 'Type'], ['value', 'Checks'], ['error_message', 'Error message']],
+    title: 'xap.authorization.title',
+    about: 'xap.authorization.about',
+    columns: [['name', 'xap.col.scheme'], ['type', 'xap.col.type'], ['value', 'xap.col.checks'], ['error_message', 'xap.col.error_message']],
     sql: `select a.id as app_id, a.name as app, s.name, s.type, left(s.value, 300) as value, s.error_message
             from meta.app a join meta.authz_scheme s on s.app_id = a.id where ${IN_WS} order by lower(a.name), s.name`,
   },
   'password-items': {
-    title: 'Password items',
-    about: 'Every password item: pgkiln never shows their values again, never keeps them in session state for the next page and never writes them to the debug log.',
-    columns: [['page_no', 'Page', 'num'], ['name', 'Item'], ['label', 'Label'], ['reveal', 'Show button'], ['required', 'Required']],
+    title: 'xap.password_items.title',
+    about: 'xap.password_items.about',
+    columns: [['page_no', 'xap.col.page', 'num'], ['name', 'xap.col.item'], ['label', 'xap.col.label'], ['reveal', 'xap.col.show_button'], ['required', 'xap.col.required']],
     sql: `select a.id as app_id, a.name as app, p.page_no, i.name, i.label,
                  case when (i.config ->> 'reveal')::boolean then 'yes' else 'no' end as reveal, case when i.required then 'yes' else 'no' end as required
             from meta.app a join meta.page p on p.app_id = a.id join meta.item i on i.page_id = p.id
            where ${IN_WS} and i.type = 'password' order by lower(a.name), p.page_no, i.seq`,
   },
   theme: {
-    title: 'Theme summary',
-    about: 'The look of every application: base style, Theme Roller style, navigation and the colours it sets.',
-    columns: [['base', 'Base style'], ['style', 'Style'], ['nav', 'Navigation'], ['colors', 'Colours set', 'num'], ['pwa', 'Installable (PWA)']],
+    title: 'xap.theme.title',
+    about: 'xap.theme.about',
+    columns: [['base', 'xap.col.base_style'], ['style', 'xap.col.style'], ['nav', 'xap.col.navigation'], ['colors', 'xap.col.colours_set', 'num'], ['pwa', 'xap.col.installable_pwa']],
     sql: `select a.id as app_id, a.name as app, coalesce(a.theme ->> 'base', 'default') as base, coalesce(a.theme ->> 'style', '-') as style,
                  coalesce(a.theme ->> 'nav', 'side') as nav,
                  (select count(*) from jsonb_object_keys(coalesce(a.theme -> 'colors', '{}'::jsonb)))::int as colors,
@@ -82,7 +84,7 @@ export const REPORTS: Record<string, Report> = {
 
 /** The links in Workspace utilities' side column. */
 export const crossAppLinks = () =>
-  Object.entries(REPORTS).map(([k, r]) => html`<li><a href="${BASE}/utilities/reports/${k}">${r.title}${icon('chevron')}</a></li>`);
+  Object.entries(REPORTS).map(([k, r]) => html`<li><a href="${BASE}/utilities/reports/${k}">${tx(r.title)}${icon('chevron')}</a></li>`);
 
 export async function crossAppRoutes(app: FastifyInstance) {
   app.get(`${BASE}/utilities/reports/:kind`, async (req: Req, reply) => {
@@ -92,15 +94,15 @@ export async function crossAppRoutes(app: FastifyInstance) {
     if (!r) return reply.code(404).send('Not found');
     const rows = (await owner.query(r.sql, [currentWorkspace(s)])).rows;
     const cell = (v: unknown) => (v === null || v === undefined || v === '' ? html`<span class="muted">-</span>` : String(v));
-    const main = html`<div class="title-row"><h1>${r.title}</h1></div>
-      <p class="muted u-mt0">${r.about} Applications of the workspace ${s.workspace?.name ?? ''}.</p>
-      <nav class="ide-tabs u-mb1" aria-label="Cross-application reports">${Object.entries(REPORTS).map(([k, x]) =>
-        html`<a class="ide-tab" href="${BASE}/utilities/reports/${k}"${k === req.params.kind ? raw(' aria-current="page"') : ''}><span>${x.title}</span></a>`)}</nav>
-      ${region(r.title, rows.length
-        ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Application</th>${r.columns.map(([, l, c]) => html`<th${c ? raw(` class="${c}"`) : ''}>${l}</th>`)}</tr></thead>
-            <tbody>${rows.map((row) => html`<tr><td data-label="Application"><a href="${BASE}/apps/${row.app_id}">${row.app}</a></td>
-              ${r.columns.map(([k, l, c]) => html`<td data-label="${l}"${c ? raw(` class="${c}"`) : ''}>${cell(row[k])}</td>`)}</tr>`)}</tbody></table></div>`
-        : html`<p class="muted">Nothing to report in this workspace.</p>`, html`<span class="count">${rows.length}</span>`)}`;
-    return send(reply, s, shell(s, r.title, [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], [r.title]], main));
+    const main = html`<div class="title-row"><h1>${tx(r.title)}</h1></div>
+      <p class="muted u-mt0">${tx(r.about)} ${tx('xap.of_workspace', { name: s.workspace?.name ?? '' })}</p>
+      <nav class="ide-tabs u-mb1" aria-label="${tx('xap.nav')}">${Object.entries(REPORTS).map(([k, x]) =>
+        html`<a class="ide-tab" href="${BASE}/utilities/reports/${k}"${k === req.params.kind ? raw(' aria-current="page"') : ''}><span>${tx(x.title)}</span></a>`)}</nav>
+      ${region(tx(r.title), rows.length
+        ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>${tx('xap.application')}</th>${r.columns.map(([, l, c]) => html`<th${c ? raw(` class="${c}"`) : ''}>${tx(l)}</th>`)}</tr></thead>
+            <tbody>${rows.map((row) => html`<tr><td data-label="${tx('xap.application')}"><a href="${BASE}/apps/${row.app_id}">${row.app}</a></td>
+              ${r.columns.map(([k, l, c]) => html`<td data-label="${tx(l)}"${c ? raw(` class="${c}"`) : ''}>${cell(row[k])}</td>`)}</tr>`)}</tbody></table></div>`
+        : html`<p class="muted">${tx('xap.nothing')}</p>`, html`<span class="count">${rows.length}</span>`)}`;
+    return send(reply, s, shell(s, tx(r.title), [[tx('rail.app_builder'), BASE], [tx('wu.title'), `${BASE}/utilities`], [tx(r.title)]], main));
   });
 }

package/src/builder/dataload.ts

@@ -27,7 +27,7 @@ import type { Session } from '../session.ts';
 import type { ComponentSpec } from './components.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
 import { appWorkspace, currentWorkspace, workshopDb } from './workspaces.ts';
-import { tr, translatorFor, type BuilderTranslate } from './i18n.ts';
+import { scopedTx, tr, translatorFor, type BuilderTranslate } from './i18n.ts';
 
 // SQL Workshop → Load Data: upload a CSV/TSV/XLSX/JSON/XML file, preview it,
 // and load it into a new table (column types inferred) or an existing one
@@ -73,7 +73,7 @@ export const DATA_LOAD_DEF_SPEC: ComponentSpec = {
 
 /** "Load a file with it" on a definition's Shared Components page. */
 export const dataLoadDefExtras = (row: { id: number }) =>
-  html`<p class="u-mt1"><a class="btn" href="${BASE}/sql/load?definition=${row.id}">${icon('upload')} Load a file with this definition</a></p>`;
+  html`<p class="u-mt1"><a class="btn" href="${BASE}/sql/load?definition=${row.id}">${icon('upload')} ${scopedTx('dl.load_with_def')}</a></p>`;
 
 /** The data load definitions of the current workspace's applications. */
 async function definitions(s: Session) {