pgkiln 0.53.0 → 0.55.0

package/src/builder/errors.ts

@@ -2,6 +2,7 @@ import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
 import { html } from '../html.ts';
 import { documentShell } from '../layout.ts';
 import { BASE, THEME_COOKIE, validTheme } from './ui.ts';
+import { cookieLanguage, translatorFor } from './i18n.ts';
 
 // (sprint 86) The builder's error pages: a browser that opens an address under /builder that
 // doesn't exist (or an application or page that doesn't, or not for this developer), or that
@@ -14,24 +15,21 @@ export const wantsHtml = (req: FastifyRequest) =>
 
 const isBuilder = (url: string) => url === BASE || url.startsWith(`${BASE}/`) || url.startsWith(`${BASE}?`);
 
-const TEXTS: Record<number, { title: string; text: string }> = {
-  404: { title: 'Page not found', text: 'There is nothing at this address in the App Builder. The application or page may have been deleted, or belongs to a workspace you are not a member of.' },
-  500: { title: 'Something went wrong', text: 'The App Builder could not show this page because of an error on the server. It has been logged; try again, or go back.' },
-};
-
-/** The error page for a status (404, or 500 for any server error). */
+/** The error page for a status (404, or 500 for any server error), in the builder language of this device (i18n.ts). */
 export function builderErrorPage(req: FastifyRequest, status: number) {
-  const { title, text } = TEXTS[status >= 500 ? 500 : 404];
+  const tx = translatorFor(cookieLanguage(req));
+  const server = status >= 500;
+  const title = tx(server ? 'error.server_title' : 'error.not_found_title');
   const theme = validTheme((req.cookies as Record<string, string> | undefined)?.[THEME_COOKIE]) ?? 'auto';
   return documentShell(
-    `${title} · App Builder`,
-    html`<main class="t-error" id="main"><div class="card"><h1>${title}</h1><p>${text}</p>
-      <p class="muted">${status >= 500 ? 'Error' : 'Not found'}: <code>${req.url.split('?')[0].slice(0, 200)}</code></p>
-      <p><a class="btn btn-hot" href="${BASE}">App Builder home</a></p></div></main>`,
+    `${title} · ${tx('rail.app_builder')}`,
+    html`<main class="t-error" id="main"><div class="card"><h1>${title}</h1><p>${tx(server ? 'error.server_text' : 'error.not_found_text')}</p>
+      <p class="muted">${tx(server ? 'error.label_error' : 'error.label_not_found')}: <code>${req.url.split('?')[0].slice(0, 200)}</code></p>
+      <p><a class="btn btn-hot" href="${BASE}">${tx('error.home')}</a></p></div></main>`,
     'login-body',
     {},
     '',
-    { theme },
+    { theme, lang: tx.lang },
   );
 }
 

package/src/builder/feedback.ts

@@ -57,7 +57,7 @@ export async function feedbackRoutes(app: FastifyInstance) {
             </div>
             <div class="buttons"><button class="btn btn-sm btn-hot">Save</button></div></form>
         </li>`)}</ul>` : html`<p class="muted">No feedback${status || kind ? ' with these filters' : ' yet'}.</p>`}`)}`;
-    const main = html`${appHeader(a, 'activity')}<div class="ide-body">${body}</div>`;
+    const main = html`${appHeader(a, 'activity', s)}<div class="ide-body">${body}</div>`;
     return send(reply, s, shell(s, `${a.name} feedback`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Activity', `${BASE}/apps/${a.id}/activity`], ['Feedback']], main));
   });
 

package/src/builder/gallery.ts

@@ -1,7 +1,7 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import type { FastifyInstance } from 'fastify';
-import { owner, ownerUrl } from '../db.ts';
+import { owner, ownerUrl, type Client } from '../db.ts';
 import { root } from '../env.ts';
 import { html, raw } from '../html.ts';
 import { icon } from '../icons.ts';
@@ -13,16 +13,21 @@ import { back, BASE, csrf, developer, flash, send, shell, type Req } from './ui.
 import { currentWorkspace, inWorkspaceSql, placeApp } from './workspaces.ts';
 import { workspacesChanged } from '../workspace-db.ts';
 
-// The App Gallery (sprint 61; APEX: App Gallery with Sample, Starter and Custom Apps).
+// The App Gallery (sprint 61, sprint 120; APEX: App Gallery with Sample, Starter, Utility and
+// Custom Apps).
 //
-//   Sample apps   applications shipped with pgkiln (examples/): an administrator installs
-//                 one with its schema, data and demo accounts, as `pgkiln migrate --example`;
+//   Sample apps   applications shipped with pgkiln: an administrator installs one with its
+//                 schema, data and demo account, either an example directory (`example`, as
+//                 `pgkiln migrate --example`) or one SQL file (`file`: examples/*.sql or
+//                 examples/gallery/samples/*.sql, run in one transaction as the owner);
 //   Starter apps  blueprints shipped with pgkiln (examples/gallery/starters/): Install opens
 //                 the blueprint's review, and the developer creates the application from it
 //                 in the current workspace (a new role and schema, like every new application);
+//   Utility apps  (sprint 120) blueprints too (examples/gallery/utilities/), of applications a
+//                 workspace uses rather than learns from, installed the same way;
 //   Custom apps   the workspace's boilerplate applications: Create application starts from one.
 //
-// The list is examples/gallery/gallery.json.
+// The list is examples/gallery/gallery.json; requests only ever name a key of it.
 
 interface Sample {
   key: string;
@@ -44,64 +49,94 @@ interface Starter {
 const GALLERY = join(root, 'examples', 'gallery');
 const KEY = /^[a-z][a-z0-9-]{0,40}$/;
 
-function catalog(): { samples: Sample[]; starters: Starter[] } {
+const list = <T>(v: unknown): T[] => (Array.isArray(v) ? v : []);
+
+function catalog(): { samples: Sample[]; starters: Starter[]; utilities: Starter[] } {
   try {
     const c = JSON.parse(readFileSync(join(GALLERY, 'gallery.json'), 'utf8'));
-    return { samples: Array.isArray(c.samples) ? c.samples : [], starters: Array.isArray(c.starters) ? c.starters : [] };
+    return { samples: list(c.samples), starters: list(c.starters), utilities: list(c.utilities) };
   } catch {
-    return { samples: [], starters: [] };
+    return { samples: [], starters: [], utilities: [] };
   }
 }
 
+/** The blueprint files a kind of entry may name: starters/x.json or utilities/x.json. */
+const BLUEPRINT_FILE = { starters: /^starters\/[a-z0-9-]+\.json$/, utilities: /^utilities\/[a-z0-9-]+\.json$/ } as const;
+/** The SQL files a sample may name: examples/x.sql or examples/gallery/samples/x.sql. */
+const SAMPLE_FILE = /^(samples\/)?[a-z0-9-]+\.sql$/;
+
 /** A file of the gallery: only names from the catalogue, never a path from the request. */
 const galleryFile = (rel: string) => readFileSync(join(rel.includes('/') ? GALLERY : join(root, 'examples'), rel), 'utf8');
 
-type Tab = 'samples' | 'starters' | 'custom';
+type Tab = 'samples' | 'starters' | 'utilities' | 'custom';
+const TABS: readonly [Tab, string][] = [['samples', 'Sample Apps'], ['starters', 'Starter Apps'], ['utilities', 'Utility Apps'], ['custom', 'Custom Apps']];
 
 export async function galleryRoutes(app: FastifyInstance) {
   app.get(`${BASE}/gallery`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
-    const tab: Tab = (['samples', 'starters', 'custom'] as const).find((t) => t === req.query?.tab) ?? 'samples';
+    const tab: Tab = TABS.map(([t]) => t).find((t) => t === req.query?.tab) ?? 'samples';
+    const q = typeof req.query?.q === 'string' ? req.query.q.trim().slice(0, 100) : '';
     const admin = await isAdmin(s.username);
-    const { samples, starters } = catalog();
+    const ws = currentWorkspace(s);
+    const { samples, starters, utilities } = catalog();
+    // an installed sample: Edit only in its own workspace
     const installed = new Map(
-      (await owner.query<{ alias: string; id: number }>('select alias, id from meta.app where alias = any($1)', [samples.map((x) => x.alias)])).rows.map((r) => [r.alias, r.id]),
+      (await owner.query<{ alias: string; id: number; here: boolean }>(`select a.alias, a.id, ${inWorkspaceSql('a', 2)} as here from meta.app a where a.alias = any($1)`,
+        [samples.map((x) => x.alias), ws])).rows.map((r) => [r.alias, r]),
     );
     const custom = (await owner.query<{ id: number; name: string; description: string | null }>(
       `select a.id, a.name, null::text as description from meta.app a where a.app_type = 'boilerplate' and ${inWorkspaceSql('a', 1)} order by lower(a.name), a.id`,
-      [currentWorkspace(s)],
+      [ws],
     )).rows;
+    // (sprint 120) the search also works without JavaScript: ?q= leaves out what doesn't match
+    // (like the script's filter: every word of the search in the title or description)
+    const words = q.toLowerCase().split(/\s+/).filter(Boolean);
+    const matches = (x: { title?: string; name?: string; description?: string | null }) => {
+      const text = `${x.title ?? x.name ?? ''} ${x.description ?? ''}`.toLowerCase();
+      return words.every((w) => text.includes(w));
+    };
+    const counts: Record<Tab, number> = { samples: samples.length, starters: starters.length, utilities: utilities.length, custom: custom.length };
     const card = (ic: string, title: string, by: string, text: string, action: unknown) =>
       html`<article class="gal-card" data-filter-row><div class="gal-head"><span class="gal-icon">${icon(ic)}</span><div><h2>${title}</h2><span class="muted small">${by}</span></div></div>
         <p>${text}</p><div class="gal-foot">${action}</div></article>`;
-    const tabs = html`<nav class="gal-tabs segmented" aria-label="Kinds of applications">${([['samples', 'Sample Apps'], ['starters', 'Starter Apps'], ['custom', 'Custom Apps']] as const).map(([t, l]) =>
-      html`<a href="${BASE}/gallery?tab=${t}"${tab === t ? raw(' aria-current="page"') : ''}>${l}</a>`)}</nav>`;
+    const tabs = html`<nav class="gal-tabs segmented" aria-label="Kinds of applications">${TABS.map(([t, l]) =>
+      html`<a href="${BASE}/gallery?tab=${t}${q ? `&q=${encodeURIComponent(q)}` : ''}"${tab === t ? raw(' aria-current="page"') : ''}>${l} <span class="gal-count">${counts[t]}</span></a>`)}</nav>`;
+    const blueprintCard = (kind: 'starters' | 'utilities') => (x: Starter) => card(x.icon, x.title, 'pgkiln', x.description,
+      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">Install</button></form>`);
     const cards =
       tab === 'samples'
-        ? samples.map((x) => card(x.icon, x.title, 'pgkiln', x.description,
-            installed.has(x.alias)
-              ? html`<span class="tag tag-ok">Installed</span><a class="btn btn-sm" href="/a/${x.alias}" target="_blank" rel="noopener">Run</a><a class="btn btn-sm" href="${BASE}/apps/${installed.get(x.alias)}">Edit</a>`
-              : admin
-                ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="Install ${x.title}? It adds its own schema, data and demo accounts with known passwords: not for a production instance.">Install</button></form>`
-                : html`<span class="muted small">An administrator installs it.</span>`))
-        : tab === 'starters'
-          ? starters.map((x) => card(x.icon, x.title, 'pgkiln', x.description,
-              html`<form method="post" action="${BASE}/gallery/starters/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">Install</button></form>`))
-          : custom.map((x) => card('copy', x.name, 'This workspace', x.description ?? 'A boilerplate application: a new application starts with its pages, shared components and settings.',
+        ? samples.filter(matches).map((x) => {
+            const it = installed.get(x.alias);
+            return card(x.icon, x.title, 'pgkiln', x.description,
+              it
+                ? html`<span class="tag tag-ok">Installed</span><a class="btn btn-sm" href="/a/${x.alias}" target="_blank" rel="noopener">Run</a>${it.here
+                    ? html`<a class="btn btn-sm" href="${BASE}/apps/${it.id}">Edit</a>`
+                    : html`<span class="muted small">in another workspace</span>`}`
+                : admin
+                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="Install ${x.title}? It adds its own schema, data and demo accounts with known passwords: not for a production instance.">Install</button></form>`
+                  : html`<span class="muted small">An administrator installs it.</span>`);
+          })
+        : tab === 'starters' || tab === 'utilities'
+          ? (tab === 'starters' ? starters : utilities).filter(matches).map(blueprintCard(tab))
+          : custom.filter(matches).map((x) => card('copy', x.name, 'This workspace', x.description ?? 'A boilerplate application: a new application starts with its pages, shared components and settings.',
               html`<a class="btn btn-hot btn-sm" href="${BASE}/create?boilerplate=${x.id}">Create from it</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">Edit</a>`));
-    const empty = tab === 'custom'
-      ? html`<p class="muted">No custom apps yet: make an application of type <em>Boilerplate</em> (Application settings → Application type) and it appears here.</p>`
-      : html`<p class="muted">The gallery is empty.</p>`;
+    const empty = q && counts[tab]
+      ? html`<p class="muted">No app matches <strong>${q}</strong>. <a href="${BASE}/gallery?tab=${tab}">Show all</a></p>`
+      : tab === 'custom'
+        ? html`<p class="muted">No custom apps yet: make an application of type <em>Boilerplate</em> (Application settings → Application type) and it appears here.</p>`
+        : html`<p class="muted">The gallery is empty.</p>`;
     const intro = {
-      samples: 'Applications that show what pgkiln can do, with their own data and demo accounts. Install them on a development or demo instance.',
+      samples: 'Applications that show what pgkiln can do, each with its own schema, data and demo account: the showcase, the tutorial, one app per feature area and the UX Pattern Catalog. An administrator installs them on a development or demo instance.',
       starters: 'Small, ready-to-use applications. Install shows what will be created (tables, pages, sample data) before anything happens; the application gets its own role and schema in this workspace.',
+      utilities: 'Applications a workspace uses rather than learns from: shared lookup lists, release notes, announcements. Like starter apps, Install shows what will be created first, and the application gets its own role and schema in this workspace.',
       custom: 'The boilerplate applications of this workspace: start a new application from one.',
     }[tab];
     const main = html`<div class="gal">
       <div class="gal-bar">
-        <div class="ab-search gal-search" role="search"><label class="sr-only" for="gal-q">Search apps</label>${icon('search')}
-          <input id="gal-q" type="search" placeholder="Search apps" autocomplete="off" data-filter-list=".gal [data-filter-row]"></div>
+        <form class="ab-search gal-search" role="search" method="get" action="${BASE}/gallery"><label class="sr-only" for="gal-q">Search apps</label>${icon('search')}
+          <input type="hidden" name="tab" value="${tab}">
+          <input id="gal-q" name="q" type="search" placeholder="Search apps" autocomplete="off" value="${q}" data-filter-list=".gal [data-filter-row]"></form>
         ${tabs}
       </div>
       <h1 class="sr-only">App Gallery</h1>
@@ -120,19 +155,30 @@ export async function galleryRoutes(app: FastifyInstance) {
     if (!x) return reply.code(404).send('Not found');
     try {
       if (await owner.one('select 1 as ok from meta.app where alias = $1', [x.alias])) throw new Error(`an application with the alias ${x.alias} exists already.`);
-      if (x.example && KEY.test(x.example)) await migrate({ root, databaseUrl: ownerUrl, example: x.example, log: () => {} });
-      else if (x.file && /^[a-z0-9-]+\.sql$/.test(x.file)) await owner.query(galleryFile(x.file));
-      else throw new Error('the gallery entry names nothing to install.');
-      const made = await owner.one<{ id: number; db_role: string | null }>('select id, db_role from meta.app where alias = $1', [x.alias]);
-      if (!made) throw new Error(`the scripts ran, but there is no application ${x.alias}.`);
-      // into the current workspace (an isolated one gets the application's role too)
       const ws = currentWorkspace(s);
-      if (ws > 1)
-        await owner.tx(async (c) => {
+      // into the current workspace (an isolated one gets the application's role too)
+      const place = async (c: Client) => {
+        const made = (await c.query('select id, db_role from meta.app where alias = $1', [x.alias])).rows[0] as { id: number; db_role: string | null } | undefined;
+        if (!made) throw new Error(`the scripts ran, but there is no application ${x.alias}.`);
+        if (ws > 1) {
           if (made.db_role && (await c.query('select 1 from meta.workspace where id = $1 and isolated', [ws])).rowCount)
             await c.query('insert into meta.workspace_role (workspace_id, role_name) values ($1, $2) on conflict do nothing', [ws, made.db_role]);
           await placeApp(c, made.id, ws);
+        }
+        return made;
+      };
+      let made: { id: number; db_role: string | null };
+      if (x.example && KEY.test(x.example)) {
+        await migrate({ root, databaseUrl: ownerUrl, example: x.example, log: () => {} });
+        made = await owner.tx(place);
+      } else if (x.file && SAMPLE_FILE.test(x.file)) {
+        // (sprint 120) the file and the placement in one transaction: a failing script leaves nothing behind
+        const sql = galleryFile(x.file);
+        made = await owner.tx(async (c) => {
+          await c.query(sql);
+          return place(c);
         });
+      } else throw new Error('the gallery entry names nothing to install.');
       await workspacesChanged();
       await logActivity({ appId: made.id, username: s.username, event: 'gallery', ip: clientIp(req), detail: `installed sample app ${x.key}` });
       flash(s, `${x.title} installed (/a/${x.alias}).`);
@@ -143,12 +189,13 @@ export async function galleryRoutes(app: FastifyInstance) {
     }
   });
 
-  // a starter app: its blueprint's review (nothing is created before the developer confirms there)
-  app.post(`${BASE}/gallery/starters/:key`, async (req: Req, reply) => {
-    const s = await developer(req, reply);
-    if (!s) return;
-    const x = KEY.test(req.params.key) ? catalog().starters.find((c) => c.key === req.params.key) : undefined;
-    if (!x || !/^starters\/[a-z0-9-]+\.json$/.test(x.file)) return reply.code(404).send('Not found');
-    return openBlueprint(s, reply, x.title, JSON.stringify(JSON.parse(galleryFile(x.file)), null, 2));
-  });
+  // a starter or utility app: its blueprint's review (nothing is created before the developer confirms there)
+  for (const kind of ['starters', 'utilities'] as const)
+    app.post(`${BASE}/gallery/${kind}/:key`, async (req: Req, reply) => {
+      const s = await developer(req, reply);
+      if (!s) return;
+      const x = KEY.test(req.params.key) ? catalog()[kind].find((c) => c.key === req.params.key) : undefined;
+      if (!x || typeof x.file !== 'string' || !BLUEPRINT_FILE[kind].test(x.file)) return reply.code(404).send('Not found');
+      return openBlueprint(s, reply, x.title, JSON.stringify(JSON.parse(galleryFile(x.file)), null, 2));
+    });
 }

package/src/builder/globalization.ts

@@ -142,7 +142,7 @@ export async function globalizationRoutes(app: FastifyInstance) {
     const done = texts.filter((t) => map.has(t.text)).length;
     const all = [...new Set([a.language, ...langs])];
 
-    const main = html`${appHeader(a, 'shared')}
+    const main = html`${appHeader(a, 'shared', s)}
       <p class="muted u-mt0"><a href="${BASE}/apps/${a.id}/shared">Shared Components</a> / Globalization</p>
       <div class="columns">
         ${region('Languages', html`<ul class="checklist">

package/src/builder/home.ts

@@ -7,6 +7,7 @@ import { crossAppLinks } from './cross-app.ts';
 import type { Session } from '../session.ts';
 import { isAdmin } from './locks.ts';
 import { currentWorkspace, inWorkspaceSql, workspaceAdmin } from './workspaces.ts';
+import { tr, translatorFor, type BuilderKey, type BuilderTranslate } from './i18n.ts';
 
 // The workspace pages of the builder, laid out like APEX's App Builder: the
 // home page (tiles, a searchable list of applications as a report or as
@@ -30,56 +31,56 @@ export function rememberApp(s: Session, appId: number) {
   s.state.__RECENT = [appId, ...recentIds(s).filter((id) => id !== appId)].slice(0, RECENT_MAX).join(',');
 }
 
-/** "3 minutes ago", "2 days ago", "1.7 years ago", as APEX shows it. */
-export function ago(at: Date | string | null | undefined, now = Date.now()) {
+/** "3 minutes ago", "2 days ago", "1.7 years ago", as APEX shows it (in the builder language of `tx`: ago.* in i18n/en.ts). */
+export function ago(at: Date | string | null | undefined, now = Date.now(), tx: BuilderTranslate = translatorFor('en')) {
   if (!at) return '';
   const sec = Math.max(0, (now - new Date(at).getTime()) / 1000);
-  const units: [number, string][] = [[365 * 86400, 'year'], [30 * 86400, 'month'], [7 * 86400, 'week'], [86400, 'day'], [3600, 'hour'], [60, 'minute']];
+  const units: [number, 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute'][] = [[365 * 86400, 'year'], [30 * 86400, 'month'], [7 * 86400, 'week'], [86400, 'day'], [3600, 'hour'], [60, 'minute']];
   for (const [size, unit] of units) {
     if (sec >= size) {
       const n = sec / size;
       const v = unit === 'year' && n < 10 ? Math.round(n * 10) / 10 : Math.round(n);
-      return `${v} ${unit}${v === 1 ? '' : 's'} ago`;
+      return tx(v === 1 ? `ago.${unit}` : `ago.${unit}s`, { n: tx.lang === 'en' ? v : String(v).replace('.', ',') });
     }
   }
-  return 'just now';
+  return tx('ago.now');
 }
 
 /** (116) the App Builder list's working copies count and lock state */
-const copiesText = (n: number) => `${n} working cop${n === 1 ? 'y' : 'ies'}`;
-const lockedText = (by: string) => `Locked by ${by}`;
+const copiesText = (tx: BuilderTranslate, n: number) => tx(n === 1 ? 'ab.copies_one' : 'ab.copies', { n });
+const lockedText = (tx: BuilderTranslate, by: string) => tx('ab.locked_by', { user: by });
 
 const appIcon = (a: { id: number; name: string }, cls = '') =>
   html`<span class="app-icon app-color-${a.id % APP_COLORS}${cls ? ` ${cls}` : ''}" aria-hidden="true">${a.name.slice(0, 1).toUpperCase()}</span>`;
 
 /** The four tiles at the top of the App Builder. */
-const tiles = () => html`<nav class="ab-tiles" aria-label="App Builder">
-  ${[
-    ['create', 'plus', 'Create', 'Create a new application in this workspace.'],
-    ['import', 'upload', 'Import', 'Import an exported application into this workspace.'],
-    ['dashboard', 'activity', 'Dashboard', 'View workspace usage, activity and sign-in problems.'],
-    ['utilities', 'settings', 'Workspace Utilities', 'Users, identity providers, developers and the SQL Workshop.'],
-  ].map(([path, ic, title, text]) => html`<a class="ab-tile" href="${BASE}/${path}"><span class="ab-tile-icon">${icon(ic)}</span><strong>${title}</strong><span>${text}</span></a>`)}
+const tiles = (tx: BuilderTranslate) => html`<nav class="ab-tiles" aria-label="${tx('rail.app_builder')}">
+  ${([
+    ['create', 'plus', tx('ab.tile.create'), tx('ab.tile.create_text')],
+    ['import', 'upload', tx('ab.tile.import'), tx('ab.tile.import_text')],
+    ['dashboard', 'activity', tx('ab.tile.dashboard'), tx('ab.tile.dashboard_text')],
+    ['utilities', 'settings', tx('ab.tile.utilities'), tx('ab.tile.utilities_text')],
+  ] as const).map(([path, ic, title, text]) => html`<a class="ab-tile" href="${BASE}/${path}"><span class="ab-tile-icon">${icon(ic)}</span><strong>${title}</strong><span>${text}</span></a>`)}
 </nav>`;
 
 /** The side column: About, Recent, Tasks. */
-function aside(recent: { id: number; name: string }[], about: string, tasks: [string, string][]) {
-  return html`<aside class="ab-side" aria-label="About, recent and tasks">
-    <section><h2>About</h2><p>${about}</p>
-      <p><a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md" target="_blank" rel="noopener">Learn more …</a></p></section>
-    ${recent.length ? html`<section><h2>Recent</h2><ul class="ab-links">${recent.map((a) => html`<li><a href="${BASE}/apps/${a.id}">${a.name} - ${a.id}</a></li>`)}</ul></section>` : ''}
-    <section><h2>Tasks</h2><ul class="ab-links ab-tasks">${tasks.map(([label, href]) => html`<li><a href="${href}">${label}${icon('chevron')}</a></li>`)}</ul></section>
+function aside(tx: BuilderTranslate, recent: { id: number; name: string }[], about: string, tasks: [string, string][]) {
+  return html`<aside class="ab-side" aria-label="${tx('ab.aside')}">
+    <section><h2>${tx('common.about')}</h2><p>${about}</p>
+      <p><a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md" target="_blank" rel="noopener">${tx('common.learn_more')}</a></p></section>
+    ${recent.length ? html`<section><h2>${tx('ab.recent')}</h2><ul class="ab-links">${recent.map((a) => html`<li><a href="${BASE}/apps/${a.id}">${a.name} - ${a.id}</a></li>`)}</ul></section>` : ''}
+    <section><h2>${tx('common.tasks')}</h2><ul class="ab-links ab-tasks">${tasks.map(([label, href]) => html`<li><a href="${href}">${label}${icon('chevron')}</a></li>`)}</ul></section>
   </aside>`;
 }
 
-const TASKS: [string, string][] = [
-  ['Create application', `${BASE}/create`],
-  ['Create application from a file', `${BASE}/create/file`],
-  ['Import application', `${BASE}/import`],
-  ['Manage users', `${BASE}/users`],
-  ['Identity providers', `${BASE}/users/providers`],
-  ['SQL Workshop', `${BASE}/sql`],
-  ['Developers', `${BASE}/developers`],
+const TASKS: [BuilderKey, string][] = [
+  ['ab.task.create', `${BASE}/create`],
+  ['ab.task.create_file', `${BASE}/create/file`],
+  ['ab.task.import', `${BASE}/import`],
+  ['ab.task.users', `${BASE}/users`],
+  ['ab.task.providers', `${BASE}/users/providers`],
+  ['rail.sql_workshop', `${BASE}/sql`],
+  ['admin.developers', `${BASE}/developers`],
 ];
 
 async function recentApps(s: Session) {
@@ -100,6 +101,7 @@ export async function homeRoutes(app: FastifyInstance) {
     const s = await developer(req, reply);
     if (!s) return;
     if (s.workspace?.builder_home === 'home' && req.url === BASE) return reply.redirect(`${BASE}/home`);
+    const tx = tr(s);
     const q = String(req.query.q ?? '').trim().slice(0, 100);
     // the view and sort are remembered for the session
     if (req.query.view === 'grid' || req.query.view === 'report') s.state.__BVIEW = req.query.view;
@@ -141,64 +143,64 @@ export async function homeRoutes(app: FastifyInstance) {
       html`<th scope="col"${cls ? raw(` class="${cls}"`) : ''}${sort === key ? raw(' aria-sort="' + (key === 'pages' || key === 'updated' ? 'descending' : 'ascending') + '"') : ''}><a href="${link({ sort: key })}">${label}${sort === key ? html`<span class="ab-sorted" aria-hidden="true">${key === 'pages' || key === 'updated' ? '↓' : '↑'}</span>` : ''}</a></th>`;
     const rows = apps.rows;
     const list = rows.length === 0
-      ? html`<p class="ab-empty">${total.n ? html`No application ${group ? html`in the group ${group.name}${q ? html` matches “${q}”` : ''}` : html`matches “${q}”`}. <a href="${BASE}/apps?q=&amp;group=">Show all</a>` : html`No applications yet. <a href="${BASE}/create">Create one</a> or <a href="${BASE}/import">import one</a>.`}</p>`
+      ? html`<p class="ab-empty">${total.n ? html`${group ? (q ? tx('ab.none_group_q', { group: group.name, q }) : tx('ab.none_group', { group: group.name })) : tx('ab.none_q', { q })} <a href="${BASE}/apps?q=&amp;group=">${tx('ab.show_all')}</a>` : tx.rich('ab.none_yet', { create: html`<a href="${BASE}/create">${tx('ab.create_one')}</a>`, import: html`<a href="${BASE}/import">${tx('ab.import_one')}</a>` })}</p>`
       : view === 'grid'
         ? html`<div class="ab-cards">${rows.map((a) => html`<article class="ab-card" data-filter-row>
             <a class="ab-card-main" href="${BASE}/apps/${a.id}">${appIcon(a)}<span><strong>${a.name}</strong><small>${a.id} · /a/${a.alias}</small></span></a>
-            <div class="ab-card-meta">${a.group_name ? html`<span class="tag">${a.group_name}</span>` : ''}<span>${a.pages} pages</span><span>${a.views} views today</span><span>${ago(a.updated_at)}${a.updated_by ? html` by <span class="ab-by">${a.updated_by}</span>` : ''}</span></div>
-            ${a.copies || a.locked_by ? html`<div class="ab-card-badges">${a.copies ? html`<a class="tag" href="${BASE}/apps/${a.id}/working-copies">${icon('layers')} ${copiesText(a.copies)}</a>` : ''}${a.locked_by ? html`<span class="tag ab-locked" title="${lockedText(a.locked_by)}">${icon('lock')} <span class="ab-by">${lockedText(a.locked_by)}</span></span>` : ''}</div>` : ''}
+            <div class="ab-card-meta">${a.group_name ? html`<span class="tag">${a.group_name}</span>` : ''}<span>${tx(a.pages === 1 ? 'ab.pages_one' : 'ab.pages', { n: a.pages })}</span><span>${tx('ab.views_today', { n: a.views })}</span><span>${ago(a.updated_at, Date.now(), tx)}${a.updated_by ? html` ${tx('ab.by')} <span class="ab-by">${a.updated_by}</span>` : ''}</span></div>
+            ${a.copies || a.locked_by ? html`<div class="ab-card-badges">${a.copies ? html`<a class="tag" href="${BASE}/apps/${a.id}/working-copies">${icon('layers')} ${copiesText(tx, a.copies)}</a>` : ''}${a.locked_by ? html`<span class="tag ab-locked" title="${lockedText(tx, a.locked_by)}">${icon('lock')} <span class="ab-by">${lockedText(tx, a.locked_by)}</span></span>` : ''}</div>` : ''}
             <div class="ab-card-actions">
-              <a class="tb-btn" href="${BASE}/apps/${a.id}" title="Edit ${a.name}">${icon('edit')}<span class="sr-only">Edit ${a.name}</span></a>
-              <a class="tb-btn" href="/a/${a.alias}" target="_blank" rel="noopener" title="Run ${a.name}">${icon('play')}<span class="sr-only">Run ${a.name}</span></a>
+              <a class="tb-btn" href="${BASE}/apps/${a.id}" title="${tx('ab.edit', { name: a.name })}">${icon('edit')}<span class="sr-only">${tx('ab.edit', { name: a.name })}</span></a>
+              <a class="tb-btn" href="/a/${a.alias}" target="_blank" rel="noopener" title="${tx('ab.run', { name: a.name })}">${icon('play')}<span class="sr-only">${tx('ab.run', { name: a.name })}</span></a>
             </div></article>`)}</div>`
         : html`<div class="table-wrap ab-table"><table class="report ab-apps">
-            <caption class="sr-only">Applications</caption>
-            <thead><tr>${th('id', 'Application', 'num')}${th('name', 'Name')}${th('alias', 'Alias')}${th('pages', 'Pages', 'num')}<th scope="col" class="num">Views (24h)</th><th scope="col">Sign-in</th>${th('updated', 'Updated')}<th scope="col">Updated by</th><th scope="col" class="num">Working copies</th><th scope="col" class="ab-actions-col">Actions</th></tr></thead>
+            <caption class="sr-only">${tx('ab.col.apps')}</caption>
+            <thead><tr>${th('id', tx('ab.col.app'), 'num')}${th('name', tx('ab.col.name'))}${th('alias', tx('ab.col.alias'))}${th('pages', tx('ab.col.pages'), 'num')}<th scope="col" class="num">${tx('ab.col.views')}</th><th scope="col">${tx('ab.col.signin')}</th>${th('updated', tx('ab.col.updated'))}<th scope="col">${tx('ab.col.updated_by')}</th><th scope="col" class="num">${tx('ab.col.copies')}</th><th scope="col" class="ab-actions-col">${tx('ab.col.actions')}</th></tr></thead>
             <tbody>${rows.map((a) => html`<tr data-filter-row>
               <td class="num">${a.id}</td>
-              <td class="ab-name"><a href="${BASE}/apps/${a.id}">${appIcon(a)}<span>${a.name}</span></a>${a.locked_by ? html`<span class="ab-lock" role="img" aria-label="${lockedText(a.locked_by)}" title="${lockedText(a.locked_by)}">${icon('lock')}</span>` : ''}</td>
+              <td class="ab-name"><a href="${BASE}/apps/${a.id}">${appIcon(a)}<span>${a.name}</span></a>${a.locked_by ? html`<span class="ab-lock" role="img" aria-label="${lockedText(tx, a.locked_by)}" title="${lockedText(tx, a.locked_by)}">${icon('lock')}</span>` : ''}</td>
               <td>${a.alias}${a.group_name ? html` <span class="tag">${a.group_name}</span>` : ''}</td>
               <td class="num">${a.pages}</td>
               <td class="num">${a.views}</td>
-              <td>${a.authentication === 'none' ? 'Public' : a.authentication === 'header' ? 'HTTP header' : a.authentication === 'database' ? 'Database accounts' : a.authentication === 'custom' ? 'Custom' : 'App users'}</td>
-              <td title="${a.updated_at ? new Date(a.updated_at).toISOString().slice(0, 16).replace('T', ' ') : ''}">${ago(a.updated_at)}</td>
+              <td>${tx(a.authentication === 'none' ? 'ab.auth.none' : a.authentication === 'header' ? 'ab.auth.header' : a.authentication === 'database' ? 'ab.auth.database' : a.authentication === 'custom' ? 'ab.auth.custom' : 'ab.auth.app_users')}</td>
+              <td title="${a.updated_at ? new Date(a.updated_at).toISOString().slice(0, 16).replace('T', ' ') : ''}">${ago(a.updated_at, Date.now(), tx)}</td>
               <td class="ab-by">${a.updated_by ?? ''}</td>
-              <td class="num">${a.copies ? html`<a href="${BASE}/apps/${a.id}/working-copies" aria-label="${copiesText(a.copies)} of ${a.name}">${a.copies}</a>` : '0'}</td>
+              <td class="num">${a.copies ? html`<a href="${BASE}/apps/${a.id}/working-copies" aria-label="${tx('ab.copies_of', { copies: copiesText(tx, a.copies), name: a.name })}">${a.copies}</a>` : '0'}</td>
               <td class="ab-actions">
-                <a class="tb-btn" href="${BASE}/apps/${a.id}" title="Edit ${a.name}">${icon('edit')}<span class="sr-only">Edit ${a.name}</span></a>
-                <a class="tb-btn" href="/a/${a.alias}" target="_blank" rel="noopener" title="Run ${a.name}">${icon('play')}<span class="sr-only">Run ${a.name}</span></a>
+                <a class="tb-btn" href="${BASE}/apps/${a.id}" title="${tx('ab.edit', { name: a.name })}">${icon('edit')}<span class="sr-only">${tx('ab.edit', { name: a.name })}</span></a>
+                <a class="tb-btn" href="/a/${a.alias}" target="_blank" rel="noopener" title="${tx('ab.run', { name: a.name })}">${icon('play')}<span class="sr-only">${tx('ab.run', { name: a.name })}</span></a>
               </td></tr>`)}</tbody></table></div>`;
     const viewButton = (v: View, ic: string, label: string) =>
       html`<a class="tb-btn" href="${link({ view: v })}" title="${label}"${view === v ? raw(' aria-current="true"') : ''}>${icon(ic)}<span class="sr-only">${label}</span></a>`;
     const main = html`<div class="ab-home">
       <div class="ab-main">
-        <h1 class="sr-only">App Builder</h1>
+        <h1 class="sr-only">${tx('rail.app_builder')}</h1>
         ${s.workspace?.message ? html`<div class="alert alert-info ab-message" role="status">${icon('bell')}<div><strong>${s.workspace.name}</strong><p>${s.workspace.message}</p></div></div>` : ''}
-        ${tiles()}
+        ${tiles(tx)}
         <div class="ab-toolbar">
           <form class="ab-search" method="get" action="${BASE}/apps" role="search">
-            <label class="sr-only" for="ab-q">Search applications</label>${icon('search')}
-            <input id="ab-q" name="q" type="search" value="${q}" placeholder="Search" autocomplete="off" data-filter-list=".ab-home [data-filter-row]">
+            <label class="sr-only" for="ab-q">${tx('ab.search_label')}</label>${icon('search')}
+            <input id="ab-q" name="q" type="search" value="${q}" placeholder="${tx('common.search')}" autocomplete="off" data-filter-list=".ab-home [data-filter-row]">
           </form>
-          <div class="ab-views" role="group" aria-label="View">${viewButton('grid', 'grid', 'Cards')}${viewButton('report', 'list', 'Report')}</div>
-          ${groups.length ? html`<form method="get" action="${BASE}/apps" class="ab-group"><label class="sr-only" for="ab-group">Application group</label>
-            <select id="ab-group" name="group" data-autosubmit><option value="">All groups</option>${groups.map((g) => html`<option value="${g.id}"${group?.id === g.id ? raw(' selected') : ''}>${g.name}</option>`)}</select>
-            <noscript><button class="btn btn-sm">Show</button></noscript></form>` : ''}
-          <details class="menu ab-menu"><summary class="btn">Actions ${icon('chevron')}</summary>
+          <div class="ab-views" role="group" aria-label="${tx('ab.view')}">${viewButton('grid', 'grid', tx('ab.view_cards'))}${viewButton('report', 'list', tx('ab.view_report'))}</div>
+          ${groups.length ? html`<form method="get" action="${BASE}/apps" class="ab-group"><label class="sr-only" for="ab-group">${tx('ab.group')}</label>
+            <select id="ab-group" name="group" data-autosubmit><option value="">${tx('ab.all_groups')}</option>${groups.map((g) => html`<option value="${g.id}"${group?.id === g.id ? raw(' selected') : ''}>${g.name}</option>`)}</select>
+            <noscript><button class="btn btn-sm">${tx('common.show')}</button></noscript></form>` : ''}
+          <details class="menu ab-menu"><summary class="btn">${tx('ab.actions')} ${icon('chevron')}</summary>
             <div class="menu-panel" role="menu">
-              <div class="menu-section"><span class="small muted">Sort by</span>
-                ${(Object.keys(SORTS) as Sort[]).map((k) => html`<a role="menuitem" href="${link({ sort: k })}"${sort === k ? raw(' aria-current="true"') : ''}>${{ name: 'Name', id: 'Application ID', alias: 'Alias', pages: 'Most pages', updated: 'Recently updated' }[k]}</a>`)}</div>
+              <div class="menu-section"><span class="small muted">${tx('ab.sort_by')}</span>
+                ${(Object.keys(SORTS) as Sort[]).map((k) => html`<a role="menuitem" href="${link({ sort: k })}"${sort === k ? raw(' aria-current="true"') : ''}>${tx(`ab.sort.${k}`)}</a>`)}</div>
               <div class="menu-section menu-links">
-                <a role="menuitem" href="${BASE}/import">${icon('upload')} Import application</a>
-                <a role="menuitem" href="${BASE}/dashboard">${icon('activity')} Workspace dashboard</a>
+                <a role="menuitem" href="${BASE}/import">${icon('upload')} ${tx('ab.task.import')}</a>
+                <a role="menuitem" href="${BASE}/dashboard">${icon('activity')} ${tx('ab.ws_dashboard')}</a>
               </div>
             </div></details>
-          <span class="ab-count muted" aria-live="polite">${rows.length === total.n ? `${total.n} application${total.n === 1 ? '' : 's'}` : `${rows.length} of ${total.n}`}</span>
-          <a class="btn btn-hot ab-create" href="${BASE}/create">Create</a>
+          <span class="ab-count muted" aria-live="polite">${rows.length === total.n ? tx(total.n === 1 ? 'ab.count_one' : 'ab.count', { n: total.n }) : tx('ab.count_of', { n: rows.length, total: total.n })}</span>
+          <a class="btn btn-hot ab-create" href="${BASE}/create">${tx('ab.tile.create')}</a>
         </div>
         ${list}
       </div>
-      ${aside(recent, 'The App Builder creates, edits and runs the applications of this workspace: pages and regions on your PostgreSQL tables, with sign-in, roles and row level security.', TASKS)}
+      ${aside(tx, recent, tx('ab.about'), TASKS.map(([key, href]): [string, string] => [tx(key), href]))}
     </div>`;
     return send(reply, s, shell(s, 'App Builder', [['App Builder']], main));
   };