pgkiln 0.84.0 → 0.85.0

package/src/builder/designer.ts

@@ -7,7 +7,7 @@ import { icon } from '../icons.ts';
 import { COMPONENTS } from './components.ts';
 import { back, BASE, bicon, csrf, designerUrl, developer, flash, input, select, send, shell, type Req } from './ui.ts';
 import { wantsHtml } from './errors.ts';
-import { tr } from './i18n.ts';
+import { scopedTx as tx, tr } from './i18n.ts';
 import type { Session } from '../session.ts';
 import { buildOptionChoices, componentForm, lookups, saveComponent } from './forms.ts';
 import { regionConfigHelp } from './region-help.ts';
@@ -299,20 +299,20 @@ export async function designerRoutes(app: FastifyInstance) {
         </div>
       </div>`;
     const help = html`<div class="pd-help">
-      <h3>Layout</h3>
-      <p>Regions sit on a 12-column grid in sequence order; a region's <em>column span</em> sets its width, and regions wrap to a new row when the row is full.</p>
+      <h3>${tx('pdz.layout')}</h3>
+      <p>${tx.rich('pdz.grid_help', { span: html`<em>${tx('pdz.column_span')}</em>` })}</p>
       <ul>
-        <li>Drag a region by its header to move it, or drag its right edge to make it wider or narrower.</li>
-        <li>Drag items and buttons to another place or another region.</li>
-        <li>Drag a region, item or button from the gallery onto the layout to create it; or open a gallery entry to create one with a form.</li>
-        <li>Keyboard: focus a component on the layout and press <kbd>Alt</kbd>+<kbd>↑</kbd> / <kbd>↓</kbd> to move it, <kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>←</kbd> / <kbd>→</kbd> to change a region's width. The <strong>Arrange</strong> buttons above the properties do the same.</li>
-        <li><strong>Undo</strong> and <strong>Redo</strong> in the toolbar take back layout changes.</li>
+        <li>${tx('pdz.drag_a_region_by_its')}</li>
+        <li>${tx('pdz.drag_items_and_buttons_to')}</li>
+        <li>${tx('pdz.drag_a_region_item_or')}</li>
+        <li>${tx.rich('pdz.keyboard_help', { move: html`<kbd>${tx('pdz.alt')}</kbd>+<kbd>↑</kbd> / <kbd>↓</kbd>`, resize: html`<kbd>${tx('pdz.alt')}</kbd>+<kbd>${tx('pdz.shift')}</kbd>+<kbd>←</kbd> / <kbd>→</kbd>`, arrange: html`<strong>${tx('pdz.arrange')}</strong>` })}</li>
+        <li>${tx.rich('pdz.undo_help', { undo: html`<strong>${tx('pdz.undo')}</strong>`, redo: html`<strong>${tx('pdz.redo')}</strong>` })}</li>
       </ul>
-      <h3>Cheat sheet</h3>
-      <p><code>:P1_ITEM</code> binds an item value in any SQL (always escaped). <code>:APP_USER</code>, <code>:APP_PAGE_ID</code>, <code>:REQUEST</code> are built in.</p>
-      <p><code>&amp;P1_ITEM.</code> substitutes into titles, static HTML and link targets (HTML-escaped).</p>
-      <p>In SQL, PL/pgSQL and RLS policies: <code>meta.app_user()</code>, <code>meta.has_role('admin')</code>, <code>meta.v('P1_ITEM')</code>, <code>meta.page_url(3, '{"P3_ID": 7}')</code>.</p>
-      <p>A PL/pgSQL <code>raise exception 'Message' using column = 'sal'</code> shows the message on the item whose source column is <code>sal</code>.</p>
+      <h3>${tx('pdz.cheat_sheet')}</h3>
+      <p>${tx.code('pdz.p1_item_binds_an_item')}</p>
+      <p>${tx.code('pdz.p1_item_substitutes_into_titles')}</p>
+      <p>${tx.code('pdz.in_sql_pl_pgsql_and')}</p>
+      <p>${tx.code('pdz.a_pl_pgsql_raise_exception')}</p>
     </div>`;
     const pageSearch = html`<form method="get" action="${BASE}/apps/${p.app_id}/search" class="pd-search" role="search">
         <label class="label" for="pd-q">${tx('pd.search_label')}</label>
@@ -388,34 +388,34 @@ export async function designerRoutes(app: FastifyInstance) {
       heading = html`${icon('file')}<span>${tx('pd.page_title', { n: p.page_no, name: p.name })}</span>`;
       props = html`${peTabs([tab('pd-r-props', tx('pd.copy.page'), html`
         <form method="post" action="${BASE}/pages/${p.id}" class="component-form" id="${formId}">${csrf(s)}
-          <fieldset class="prop-group"><legend>Identification</legend><div class="form-grid">
-            ${input('page_no', 'Page number', p.page_no, { type: 'number', required: true })}
-            ${input('name', 'Name', p.name, { required: true })}
-            ${input('title', 'Title', p.title, { help: 'Supports &ITEM. substitutions.' })}
+          <fieldset class="prop-group"><legend>${tx('pdz.identification')}</legend><div class="form-grid">
+            ${input('page_no', tx('pdz.page_number'), p.page_no, { type: 'number', required: true })}
+            ${input('name', tx('pdz.name'), p.name, { required: true })}
+            ${input('title', tx('pdz.title'), p.title, { help: tx('pdz.title_help') })}
           </div></fieldset>
-          <fieldset class="prop-group"><legend>Appearance</legend><div class="form-grid">
-            ${select('mode', 'Page mode', p.mode, [['normal', 'Normal'], ['modal', 'Modal dialog']])}
-            ${select('page_group', 'Page group', p.page_group ?? '', [['', '- none -'], ...lk.pageGroups.map((g): [string, string] => [g, g]), ...(p.page_group && !lk.pageGroups.includes(p.page_group) ? [[p.page_group, `${p.page_group} (no such group)`] as [string, string]] : [])], 'Organises the pages in the App Builder (Shared Components → Page groups). Changes nothing when the application runs.')}
-            ${select('page_template', 'Page template', p.page_template ?? 'standard', [['standard', 'Standard'], ['left_side_column', 'Left side column'], ['right_side_column', 'Right side column'], ['minimal', 'Minimal (no navigation)']], 'Side column: regions with position left (or right) show in a column beside the body (under it on narrow screens). Minimal: no header and navigation menu, e.g. for a login page (Application settings → Login page).')}
-            ${select('dialog_position', 'Dialog position', p.dialog_position ?? 'center', [['center', 'Centred dialog'], ['right', 'Drawer from the right'], ['left', 'Drawer from the left'], ['top', 'Drawer from the top'], ['bottom', 'Drawer from the bottom']], 'Modal pages only. On phones dialogs and side drawers fill the screen.')}
-            ${select('dialog_size', 'Dialog size', p.dialog_size ?? 'medium', [['small', 'Small'], ['medium', 'Medium'], ['large', 'Large']], 'The width (the height of top and bottom drawers).')}
-            ${input('static_includes', 'JavaScript and CSS files', (p.static_includes ?? []).join(', '), { placeholder: 'e.g. page-3.js, page-3.css', help: 'Static application files (.js, .css) this page loads after the application\'s own, in this order; #WORKSPACE_FILES#name for a static workspace file.' })}
-            <div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="warn_unsaved" value="true"${p.warn_unsaved ? raw(' checked') : ''}> Warn on unsaved changes</label>
-              <small class="help">Ask before the user leaves the page (a link, a redirect button, closing the tab) while an item has a changed value. Submitting doesn't ask. Leave an item out with {"warn_unsaved": false} in its attributes.</small></div>
-            ${select('parent_page', 'Breadcrumb parent', p.parent_page ?? '', [['', '- none -'], ...lk.pages.filter((x) => x.page_no !== p.page_no).map((x): [string, string] => [String(x.page_no), `${x.page_no}. ${x.name}`])])}
+          <fieldset class="prop-group"><legend>${tx('pdz.appearance')}</legend><div class="form-grid">
+            ${select('mode', tx('pdz.page_mode'), p.mode, [['normal', tx('pdz.normal')], ['modal', tx('pdz.modal_dialog')]])}
+            ${select('page_group', tx('pdz.page_group'), p.page_group ?? '', [['', tx('pdz.none')], ...lk.pageGroups.map((g): [string, string] => [g, g]), ...(p.page_group && !lk.pageGroups.includes(p.page_group) ? [[p.page_group, `${p.page_group} (no such group)`] as [string, string]] : [])], tx('pdz.organises_the_pages_in_the'))}
+            ${select('page_template', tx('pdz.page_template'), p.page_template ?? 'standard', [['standard', tx('pdz.standard')], ['left_side_column', tx('pdz.left_side_column')], ['right_side_column', tx('pdz.right_side_column')], ['minimal', tx('pdz.minimal_no_navigation')]], tx('pdz.side_column_regions_with_position'))}
+            ${select('dialog_position', tx('pdz.dialog_position'), p.dialog_position ?? 'center', [['center', tx('pdz.centred_dialog')], ['right', tx('pdz.drawer_from_the_right')], ['left', tx('pdz.drawer_from_the_left')], ['top', tx('pdz.drawer_from_the_top')], ['bottom', tx('pdz.drawer_from_the_bottom')]], tx('pdz.modal_pages_only_on_phones'))}
+            ${select('dialog_size', tx('pdz.dialog_size'), p.dialog_size ?? 'medium', [['small', tx('pdz.small')], ['medium', tx('pdz.medium')], ['large', tx('pdz.large')]], tx('pdz.the_width_the_height_of'))}
+            ${input('static_includes', tx('pdz.javascript_and_css_files'), (p.static_includes ?? []).join(', '), { placeholder: tx('pdz.e_g_page_3_js'), help: tx('pdz.static_application_files_js_css') })}
+            <div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="warn_unsaved" value="true"${p.warn_unsaved ? raw(' checked') : ''}> ${tx('pdz.warn_on_unsaved_changes')}</label>
+              <small class="help">${tx('pdz.ask_before_the_user_leaves')}</small></div>
+            ${select('parent_page', tx('pdz.breadcrumb_parent'), p.parent_page ?? '', [['', tx('pdz.none')], ...lk.pages.filter((x) => x.page_no !== p.page_no).map((x): [string, string] => [String(x.page_no), `${x.page_no}. ${x.name}`])])}
           </div></fieldset>
-          <fieldset class="prop-group"><legend>Security</legend><div class="form-grid">
-            <div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="requires_auth" value="true"${p.requires_auth ? raw(' checked') : ''}> Requires authentication</label></div>
-            ${select('authz', 'Authorization scheme', p.authz ?? '', [['', '- none -'], ...['MUST_NOT_BE_PUBLIC_USER', ...lk.authz].flatMap((n): [string, string][] => [[n, n], [`!${n}`, `Not ${n}`]])])}
-            ${select('protection', 'Page access protection', p.protection, [['checksum', 'Arguments must have checksum'], ['unrestricted', 'Unrestricted']],
+          <fieldset class="prop-group"><legend>${tx('pdz.security')}</legend><div class="form-grid">
+            <div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="requires_auth" value="true"${p.requires_auth ? raw(' checked') : ''}> ${tx('pdz.requires_authentication')}</label></div>
+            ${select('authz', tx('pdz.authorization_scheme'), p.authz ?? '', [['', tx('pdz.none')], ...['MUST_NOT_BE_PUBLIC_USER', ...lk.authz].flatMap((n): [string, string][] => [[n, n], [`!${n}`, tx('pdz.not_authz', { name: n })]])])}
+            ${select('protection', tx('pdz.page_access_protection'), p.protection, [['checksum', tx('pdz.arguments_must_have_checksum')], ['unrestricted', tx('pdz.unrestricted')]],
               'With checksum, item values in the URL (?P3_ID=…) are only accepted from links the runtime generated.')}
-            ${select('build_option', 'Build option', p.build_option ?? '', buildOptionChoices(lk, p.build_option),
+            ${select('build_option', tx('pdz.build_option'), p.build_option ?? '', buildOptionChoices(lk, p.build_option),
               'While the option is excluded (or "Not": included) the page does not exist in the running application.')}
           </div></fieldset>
-          <fieldset class="prop-group"><legend>Help</legend><div class="form-grid">
-            <div class="field" data-wide><label class="label" for="f_help">Help text</label>
+          <fieldset class="prop-group"><legend>${tx('pdz.help')}</legend><div class="form-grid">
+            <div class="field" data-wide><label class="label" for="f_help">${tx('pdz.help_text')}</label>
               <textarea id="f_help" name="help" rows="5" maxlength="20000">${p.help ?? ''}</textarea>
-              <small class="help">Markdown with &amp;ITEM. substitutions. A region of type Help Text on the page shows it (APEX: Page → Help).</small></div>
+              <small class="help">${tx('pdz.markdown_with_amp_item_substitutions')}</small></div>
           </div></fieldset>
           <div class="buttons"><button class="btn btn-hot">${tx('pd.save_page')}</button></div>
         </form>`, true)])}
@@ -494,7 +494,7 @@ export async function designerRoutes(app: FastifyInstance) {
         <section class="pd-pane pd-center tab-panel" id="pd-p-layout" data-tab${pane === 'pd-p-layout' ? raw(' data-tab-active') : ''}><h2 class="tab-title pd-pane-title"><span>${tx('pd.layout')}</span></h2>${center}</section>
         <section class="pd-pane pd-right tab-panel" id="pd-p-props" data-tab${pane === 'pd-p-props' ? raw(' data-tab-active') : ''}><h2 class="tab-title pd-pane-title"><span>${tx('pd.properties')}</span></h2>${right}</section>
       </div>`;
-    return send(reply, s, shell(s, tx('pd.page_n_title', { n: p.page_no }), [['App Builder', BASE], [p.app_name, `${BASE}/apps/${p.app_id}`], [tx('pd.page_title', { n: p.page_no, name: p.name })]], main, 'apps', { toolbar, full: true }));
+    return send(reply, s, shell(s, tx('pd.page_n_title', { n: p.page_no }), [[tx('pdz.app_builder'), BASE], [p.app_name, `${BASE}/apps/${p.app_id}`], [tx('pd.page_title', { n: p.page_no, name: p.name })]], main, 'apps', { toolbar, full: true }));
   }
 
   // (sprint 59) Quick edit from the developer toolbar: an item or button of the page by its name

package/src/builder/diagnostics.ts

@@ -8,6 +8,7 @@ import { icon } from '../icons.ts';
 import { DEBUG_LEVELS } from '../debug.ts';
 import { isAdmin } from './locks.ts';
 import { appHeader, back, BASE, csrf, developer, flash, region, select, send, shell, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // App Builder → Activity → Debug messages (APEX: Debug Messages): the page
 // views an application recorded while its debug level was on, and the timed
@@ -66,46 +67,46 @@ export async function diagnosticsRoutes(app: FastifyInstance) {
     };
     const main = html`${appHeader(a, 'activity', s)}
       <div class="columns">
-        ${region('Debug level', html`
+        ${region(tx('diag.debug_level'), html`
           <p class="muted u-mt0">${a.debug_level
-            ? html`<b>Debug messages are on (level ${a.debug_level})</b>: every request of this application records its steps with timings, and SQL can add messages with <code>meta.debug(level, text)</code>. This costs time and space: turn it off when you are done.`
-            : html`Debug messages are off: requests record nothing, and <code>meta.debug(level, text)</code> returns at once. Choose a level to record the requests of this application.`}</p>
+            ? tx.rich('diag.on', { state: html`<b>${tx('diag.on_state', { level: a.debug_level })}</b>`, fn: html`<code>meta.debug(level, text)</code>` })
+            : tx.rich('diag.off', { fn: html`<code>meta.debug(level, text)</code>` })}</p>
           <form method="post" action="${BASE}/apps/${a.id}/debug/settings">${csrf(s)}
             <div class="form-grid">
-              ${select('debug_level', 'Debug level', String(a.debug_level), DEBUG_LEVELS.map(([n, label]): [string, string] => [String(n), label]), 'Level 9 records posted item values (never those of password items).')}
-              ${select('debug_retention_days', 'Keep messages for', String(a.debug_retention_days), [1, 2, 7, 14, 30, 90].map((d): [string, string] => [String(d), `${d} day${d === 1 ? '' : 's'}`]))}
+              ${select('debug_level', tx('diag.debug_level'), String(a.debug_level), DEBUG_LEVELS.map(([n, label]): [string, string] => [String(n), label]), tx('diag.level_9_records_posted_item'))}
+              ${select('debug_retention_days', tx('diag.keep_messages_for'), String(a.debug_retention_days), [1, 2, 7, 14, 30, 90].map((d): [string, string] => [String(d), `${d} day${d === 1 ? '' : 's'}`]))}
             </div>
-            <div class="buttons"><button class="btn btn-hot">Save</button></div>
+            <div class="buttons"><button class="btn btn-hot">${tx('diag.save')}</button></div>
           </form>`)}
-        ${region('Page views', html`
+        ${region(tx('diag.page_views'), html`
           <form method="get" action="${BASE}/apps/${a.id}/debug" class="u-mb1">
             <div class="form-grid">
-              <div class="field"><label class="label" for="f_page">Page</label><input id="f_page" name="page" type="number" min="1" value="${pageNo ?? ''}"></div>
-              <div class="field"><label class="label" for="f_user">User</label><input id="f_user" name="user" value="${user ?? ''}"></div>
+              <div class="field"><label class="label" for="f_page">${tx('diag.page')}</label><input id="f_page" name="page" type="number" min="1" value="${pageNo ?? ''}"></div>
+              <div class="field"><label class="label" for="f_user">${tx('diag.user')}</label><input id="f_user" name="user" value="${user ?? ''}"></div>
             </div>
-            <div class="field"><label class="check"><input type="checkbox" name="problems" value="1"${problems ? raw(' checked') : ''}> Only with errors or warnings</label></div>
-            <div class="buttons"><button class="btn">${icon('search')} Filter</button></div>
+            <div class="field"><label class="check"><input type="checkbox" name="problems" value="1"${problems ? raw(' checked') : ''}> ${tx('diag.only_with_errors_or_warnings')}</label></div>
+            <div class="buttons"><button class="btn">${icon('search')} ${tx('diag.filter')}</button></div>
           </form>
           ${views.length
-            ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>When</th><th class="num">Page</th><th>Request</th><th>User</th><th class="num">Status</th><th class="num">ms</th><th class="num">Entries</th><th></th></tr></thead>
+            ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>${tx('diag.when')}</th><th class="num">${tx('diag.page')}</th><th>${tx('diag.request')}</th><th>${tx('diag.user')}</th><th class="num">${tx('diag.status')}</th><th class="num">ms</th><th class="num">${tx('diag.entries')}</th><th></th></tr></thead>
               <tbody>${views.map((v) => html`<tr>
-                <td data-label="When">${String(v.started_at).slice(0, 19)}</td>
-                <td class="num" data-label="Page">${v.page_no ?? ''}${v.page_name ? html` <span class="muted">${v.page_name}</span>` : ''}</td>
-                <td data-label="Request"><code>${v.method} ${v.path}</code></td>
-                <td data-label="User">${v.username ?? ''}</td>
-                <td class="num" data-label="Status">${v.status >= 400 ? html`<span class="ev ev-error">${v.status}</span>` : v.status}</td>
+                <td data-label="${tx('diag.when')}">${String(v.started_at).slice(0, 19)}</td>
+                <td class="num" data-label="${tx('diag.page')}">${v.page_no ?? ''}${v.page_name ? html` <span class="muted">${v.page_name}</span>` : ''}</td>
+                <td data-label="${tx('diag.request')}"><code>${v.method} ${v.path}</code></td>
+                <td data-label="${tx('diag.user')}">${v.username ?? ''}</td>
+                <td class="num" data-label="${tx('diag.status')}">${v.status >= 400 ? html`<span class="ev ev-error">${v.status}</span>` : v.status}</td>
                 <td class="num" data-label="ms">${v.ms}</td>
-                <td class="num" data-label="Entries">${v.entries}${v.problems ? html` <span class="ev ev-error">${v.problems} problem${v.problems === 1 ? '' : 's'}</span>` : ''}</td>
-                <td><a href="${BASE}/apps/${a.id}/debug/${v.id}">View</a></td></tr>`)}</tbody></table></div>
-              ${more ? html`<p><a class="btn" href="?${query({ before: String(views[views.length - 1].id) })}">Older page views</a></p>` : ''}`
+                <td class="num" data-label="${tx('diag.entries')}">${v.entries}${v.problems ? html` <span class="ev ev-error">${v.problems} problem${v.problems === 1 ? '' : 's'}</span>` : ''}</td>
+                <td><a href="${BASE}/apps/${a.id}/debug/${v.id}">${tx('diag.view')}</a></td></tr>`)}</tbody></table></div>
+              ${more ? html`<p><a class="btn" href="?${query({ before: String(views[views.length - 1].id) })}">${tx('diag.older_page_views')}</a></p>` : ''}`
             : html`<p class="muted">No page views recorded${pageNo !== null || user || problems ? ' for this filter' : ''}.</p>`}
-          <p class="muted">${total} page view${total === 1 ? '' : 's'} kept for ${a.debug_retention_days} day${a.debug_retention_days === 1 ? '' : 's'} (at most 5000). <a href="${BASE}/apps/${a.id}/activity">Back to Activity</a></p>
+          <p class="muted">${total} page view${total === 1 ? '' : 's'} kept for ${a.debug_retention_days} day${a.debug_retention_days === 1 ? '' : 's'} (at most 5000). <a href="${BASE}/apps/${a.id}/activity">${tx('diag.back_to_activity')}</a></p>
           ${total
             ? html`<form method="post" action="${BASE}/apps/${a.id}/debug/purge">${csrf(s)}
-                <button class="btn btn-danger" data-confirm="Delete all debug messages of ${a.name}?">${icon('close')} Delete all debug messages</button></form>`
+                <button class="btn btn-danger" data-confirm="${tx('diag.delete_confirm', { app: a.name })}">${icon('close')} ${tx('diag.delete_all_debug_messages')}</button></form>`
             : ''}`)}
       </div>`;
-    return send(reply, s, shell(s, `Debug messages · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Activity', `${BASE}/apps/${a.id}/activity`], ['Debug messages']], main));
+    return send(reply, s, shell(s, tx('diag.title', { app: a.name }), [[tx('diag.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('diag.activity'), `${BASE}/apps/${a.id}/activity`], [tx('diag.debug_messages')]], main));
   });
 
   app.get(`${BASE}/apps/:id/debug/:view`, async (req: Req, reply) => {
@@ -132,29 +133,29 @@ export async function diagnosticsRoutes(app: FastifyInstance) {
     ).rows;
     const slowest = Math.max(0, ...entries.map((e) => e.dur ?? 0));
     const main = html`${appHeader(a, 'activity', s)}
-      ${region(`Page view ${v.id}`, html`
+      ${region(tx('diag.page_view', { id: v.id }), html`
         <div class="stat-grid">
-          <div class="stat"><b>${v.ms ?? '?'} ms</b><span>total time</span></div>
+          <div class="stat"><b>${v.ms ?? '?'} ms</b><span>${tx('diag.total_time')}</span></div>
           <div class="stat"><b>${v.page_no ?? '-'}</b><span>${v.page_name ?? 'page'}</span></div>
-          <div class="stat"><b>${v.status ?? '?'}</b><span>HTTP status</span></div>
+          <div class="stat"><b>${v.status ?? '?'}</b><span>${tx('diag.http_status')}</span></div>
           <div class="stat"><b>${v.entries}</b><span>entries (level ${v.level})</span></div>
         </div>
         <p class="muted u-mt0"><code>${v.method} ${v.path}</code> · ${v.username ?? ''} · ${String(v.started_at).slice(0, 23)}</p>
         <p class="seg">
-          ${v.prev ? html`<a href="${BASE}/apps/${a.id}/debug/${v.prev}">◂ Previous</a>` : ''}
-          <a href="${BASE}/apps/${a.id}/debug">All page views</a>
+          ${v.prev ? html`<a href="${BASE}/apps/${a.id}/debug/${v.prev}">${tx('diag.previous')}</a>` : ''}
+          <a href="${BASE}/apps/${a.id}/debug">${tx('diag.all_page_views')}</a>
           ${v.page_no ? html`<a href="${BASE}/apps/${a.id}/debug?page=${v.page_no}">Page ${v.page_no} only</a>` : ''}
-          ${v.next ? html`<a href="${BASE}/apps/${a.id}/debug/${v.next}">Next ▸</a>` : ''}
+          ${v.next ? html`<a href="${BASE}/apps/${a.id}/debug/${v.next}">${tx('diag.next')}</a>` : ''}
         </p>
-        <div class="table-wrap"><table class="report report-reflow debug-log"><thead><tr><th class="num">Elapsed ms</th><th class="num">Duration ms</th><th class="num">Until next</th><th>Level</th><th>Component</th><th>Message</th></tr></thead>
+        <div class="table-wrap"><table class="report report-reflow debug-log"><thead><tr><th class="num">${tx('diag.elapsed_ms')}</th><th class="num">${tx('diag.duration_ms')}</th><th class="num">${tx('diag.until_next')}</th><th>${tx('diag.level')}</th><th>${tx('diag.component')}</th><th>${tx('diag.message')}</th></tr></thead>
           <tbody>${entries.map((e) => html`<tr${e.dur && e.dur === slowest && slowest > 0 ? raw(' class="debug-slowest"') : ''}>
-            <td class="num" data-label="Elapsed ms">${e.ms}</td>
-            <td class="num" data-label="Duration ms">${e.dur ?? ''}</td>
-            <td class="num" data-label="Until next">${e.gap ?? ''}</td>
-            <td data-label="Level">${levelTag(e.level)}</td>
-            <td data-label="Component">${e.component ?? ''}</td>
-            <td data-label="Message" class="debug-text">${e.message}</td></tr>`)}</tbody></table></div>`)}`;
-    return send(reply, s, shell(s, `Debug ${v.id} · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Debug messages', `${BASE}/apps/${a.id}/debug`], [`Page view ${v.id}`]], main));
+            <td class="num" data-label="${tx('diag.elapsed_ms')}">${e.ms}</td>
+            <td class="num" data-label="${tx('diag.duration_ms')}">${e.dur ?? ''}</td>
+            <td class="num" data-label="${tx('diag.until_next')}">${e.gap ?? ''}</td>
+            <td data-label="${tx('diag.level')}">${levelTag(e.level)}</td>
+            <td data-label="${tx('diag.component')}">${e.component ?? ''}</td>
+            <td data-label="${tx('diag.message')}" class="debug-text">${e.message}</td></tr>`)}</tbody></table></div>`)}`;
+    return send(reply, s, shell(s, tx('diag.view_title', { id: v.id, app: a.name }), [[tx('diag.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('diag.debug_messages'), `${BASE}/apps/${a.id}/debug`], [tx('diag.page_view', { id: v.id })]], main));
   });
 
   app.post(`${BASE}/apps/:id/debug/settings`, async (req: Req, reply) => {
@@ -165,11 +166,11 @@ export async function diagnosticsRoutes(app: FastifyInstance) {
     const level = Number(req.body?.debug_level);
     const days = Number(req.body?.debug_retention_days);
     if (!DEBUG_LEVELS.some(([n]) => n === level) || !Number.isInteger(days) || days < 1 || days > 90) {
-      flash(s, 'Choose a debug level and a retention of 1 to 90 days.', 'error');
+      flash(s, tx('diag.choose_a_debug_level_and'), 'error');
       return back(reply, s, `${BASE}/apps/${a.id}/debug`);
     }
     await owner.query('update meta.app set debug_level = $2, debug_retention_days = $3, updated_at = now() where id = $1', [a.id, level, days]);
-    flash(s, level ? `Debug messages on (level ${level}).` : 'Debug messages off.');
+    flash(s, level ? tx('diag.on_flash', { level }) : tx('diag.debug_messages_off'));
     return back(reply, s, `${BASE}/apps/${a.id}/debug`);
   });
 
@@ -188,8 +189,8 @@ export async function diagnosticsRoutes(app: FastifyInstance) {
     const s = await developer(req, reply);
     if (!s) return;
     if (!(await isAdmin(s.username))) {
-      const main = html`<h1 class="u-mb1">Installation</h1><div class="alert alert-error" role="alert">Only administrators see the installation log.</div>`;
-      return send(reply.code(403), s, shell(s, 'Installation', [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], ['Installation']], main));
+      const main = html`<h1 class="u-mb1">${tx('diag.installation')}</h1><div class="alert alert-error" role="alert">${tx('diag.only_administrators_see_the_installation')}</div>`;
+      return send(reply.code(403), s, shell(s, tx('diag.installation'), [[tx('diag.app_builder'), BASE], [tx('diag.workspace_utilities'), `${BASE}/utilities`], [tx('diag.installation')]], main));
     }
     const has = async (t: string) => !!(await owner.one('select to_regclass($1) is not null as ok', [t]))?.ok;
     const [runs, migrations, examples] = await Promise.all([
@@ -203,33 +204,33 @@ export async function diagnosticsRoutes(app: FastifyInstance) {
     const pending = files.filter((f) => !applied.has(f));
     const unknown = migrations.filter((m) => !files.includes(m.name));
     const db = await owner.one(`select current_database() as name, split_part(version(), ' on ', 1) as version, pg_size_pretty(pg_database_size(current_database())) as size`);
-    const main = html`<h1 class="u-mb1">Installation</h1>
+    const main = html`<h1 class="u-mb1">${tx('diag.installation')}</h1>
       <div class="stat-grid">
-        <div class="stat"><b>${VERSION}</b><span>pgkiln version of this server</span></div>
-        <div class="stat"><b>${migrations.length}</b><span>migrations applied${migrations[0] ? html`, the latest ${migrations[0].name.replace(/\.sql$/, '')}` : ''}</span></div>
-        <div class="stat"><b>${pending.length}</b><span>migrations not applied</span></div>
+        <div class="stat"><b>${VERSION}</b><span>${tx('diag.pgkiln_version_of_this_server')}</span></div>
+        <div class="stat"><b>${migrations.length}</b><span>${migrations[0] ? tx('diag.applied_latest', { name: migrations[0].name.replace(/\.sql$/, '') }) : tx('diag.applied_n')}</span></div>
+        <div class="stat"><b>${pending.length}</b><span>${tx('diag.migrations_not_applied')}</span></div>
         <div class="stat"><b>${db.size}</b><span>${db.name} · ${db.version}</span></div>
       </div>
       ${pending.length
-        ? html`<div class="alert alert-error" role="alert">This database misses ${pending.length} migration${pending.length === 1 ? '' : 's'} of this server (${pending.join(', ')}). Run <code>npm run db:migrate</code> or <code>pgkiln migrate</code>.</div>`
+        ? html`<div class="alert alert-error" role="alert">${tx.rich(pending.length === 1 ? 'diag.missing_1' : 'diag.missing', { n: pending.length, list: pending.join(', '), npm: html`<code>npm run db:migrate</code>`, cli: html`<code>pgkiln migrate</code>` })}</div>`
         : ''}
-      ${unknown.length ? html`<div class="alert alert-error" role="alert">The database has migrations this server does not know (${unknown.map((m) => m.name).join(', ')}): the server is older than the database.</div>` : ''}
+      ${unknown.length ? html`<div class="alert alert-error" role="alert">${tx('diag.unknown', { list: unknown.map((m) => m.name).join(', ') })}</div>` : ''}
       <div class="columns">
-        ${region('Install and upgrade runs', runs.length
-          ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Started</th><th>Kind</th><th>Version</th><th>Status</th><th class="num">Files</th><th>Applied</th><th>By</th></tr></thead>
+        ${region(tx('diag.install_and_upgrade_runs'), runs.length
+          ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>${tx('diag.started')}</th><th>${tx('diag.kind')}</th><th>${tx('diag.version')}</th><th>${tx('diag.status')}</th><th class="num">${tx('diag.files')}</th><th>${tx('diag.applied')}</th><th>${tx('diag.by')}</th></tr></thead>
             <tbody>${runs.map((r) => html`<tr>
-              <td data-label="Started">${String(r.started_at).slice(0, 19)}</td><td data-label="Kind">${r.kind}</td><td data-label="Version">${r.version ?? ''}</td>
-              <td data-label="Status">${r.status === 'ok' ? html`<span class="ev ev-login">ok</span>` : html`<span class="ev ev-error">failed</span>`}${r.error ? html`<div class="small">${r.error}</div>` : ''}</td>
-              <td class="num" data-label="Files">${r.applied.length}</td>
-              <td data-label="Applied" class="debug-text">${r.applied.join(', ')}</td><td data-label="By">${r.db_user}</td></tr>`)}</tbody></table></div>`
-          : html`<p class="muted u-mt0">No runs recorded yet: runs are logged from version 0.25 on (each <code>db:migrate</code> or <code>pgkiln migrate</code> that applies or fails a file). The applied migrations below show when each file was applied.</p>`)}
-        ${region('Applied migrations', html`<div class="table-wrap"><table class="report"><thead><tr><th>File</th><th>Applied</th></tr></thead>
+              <td data-label="${tx('diag.started')}">${String(r.started_at).slice(0, 19)}</td><td data-label="${tx('diag.kind')}">${r.kind}</td><td data-label="${tx('diag.version')}">${r.version ?? ''}</td>
+              <td data-label="${tx('diag.status')}">${r.status === 'ok' ? html`<span class="ev ev-login">ok</span>` : html`<span class="ev ev-error">failed</span>`}${r.error ? html`<div class="small">${r.error}</div>` : ''}</td>
+              <td class="num" data-label="${tx('diag.files')}">${r.applied.length}</td>
+              <td data-label="${tx('diag.applied')}" class="debug-text">${r.applied.join(', ')}</td><td data-label="${tx('diag.by')}">${r.db_user}</td></tr>`)}</tbody></table></div>`
+          : html`<p class="muted u-mt0">${tx.code('diag.no_runs_recorded_yet_runs')}</p>`)}
+        ${region(tx('diag.applied_migrations'), html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('diag.file')}</th><th>${tx('diag.applied')}</th></tr></thead>
           <tbody>${migrations.map((m) => html`<tr><td><code>${m.name}</code></td><td>${String(m.applied_at).slice(0, 19)}</td></tr>`)}</tbody></table></div>`)}
         ${examples.length
-          ? region('Example and seed scripts', html`<div class="table-wrap"><table class="report"><thead><tr><th>File</th><th>Applied</th></tr></thead>
+          ? region(tx('diag.example_and_seed_scripts'), html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('diag.file')}</th><th>${tx('diag.applied')}</th></tr></thead>
               <tbody>${examples.map((m) => html`<tr><td><code>${m.name}</code></td><td>${String(m.applied_at).slice(0, 19)}</td></tr>`)}</tbody></table></div>`)
           : ''}
       </div>`;
-    return send(reply, s, shell(s, 'Installation', [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], ['Installation']], main));
+    return send(reply, s, shell(s, tx('diag.installation'), [[tx('diag.app_builder'), BASE], [tx('diag.workspace_utilities'), `${BASE}/utilities`], [tx('diag.installation')]], main));
   });
 }

package/src/builder/features.ts

@@ -8,6 +8,7 @@ import { appOr404 } from './forms.ts';
 import { createLoginPage } from './login-page.ts';
 import { ABOUT_PAGE, ACTIVITY_PAGE, addAboutPage, addAccessSchemes, addActivityPage, ensureAdminScheme } from './newapp.ts';
 import { appHeader, back, BASE, csrf, developer, flash, region, send, shell, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // (sprint 137, AP-3) Add feature (APEX: Create a Page → Feature, and App home → Tasks → Add Feature Page):
 // the Create Application wizard's features (newapp.ts) and a few more, added to an existing application.
@@ -67,8 +68,8 @@ export const FEATURE_LIST: Feature[] = [
     icon: 'lock',
     help: 'Authorization schemes for the roles admin, contributor and reader, to put on pages, regions and buttons.',
     adds: () => [
-      'Authorization schemes CONTRIBUTOR (role admin or contributor) and READER (admin, contributor or reader), and ADMIN when the application has none',
-      'Give users their roles under Shared Components → Users (application access)',
+      tx('feat.a.access_1'),
+      tx('feat.a.access_2'),
     ],
     installed: async (c, a) => (await c.query(`select count(*)::int as n from meta.authz_scheme where app_id = $1 and name in ('CONTRIBUTOR', 'READER')`, [a.id])).rows[0].n === 2,
     install: async (c, a) => {
@@ -82,12 +83,12 @@ export const FEATURE_LIST: Feature[] = [
     icon: 'activity',
     help: 'A page for administrators with the page views per day and the latest activity.',
     adds: () => [
-      `Page ${ACTIVITY_PAGE} "Activity" (authorization ADMIN): a chart of the page views per day and a report of the latest activity, from meta.app_activity()`,
-      'A navigation entry Activity for administrators',
-      'Authorization scheme ADMIN (role admin) when the application has none',
+      tx('feat.a.activity_1', { page: ACTIVITY_PAGE }),
+      tx('feat.a.activity_2'),
+      tx('feat.a.activity_3'),
     ],
     installed: (c, a) => pageHas(c, a.id, ACTIVITY_PAGE, 'meta.app_activity'),
-    blocked: async (c, a) => ((await pageExists(c, a.id, ACTIVITY_PAGE)) ? `Page ${ACTIVITY_PAGE} is in use by another page.` : null),
+    blocked: async (c, a) => ((await pageExists(c, a.id, ACTIVITY_PAGE)) ? tx('feat.page_in_use', { page: ACTIVITY_PAGE }) : null),
     install: async (c, a) => {
       await addActivityPage(c, a.id);
       return pageId(c, a.id, ACTIVITY_PAGE);
@@ -99,19 +100,19 @@ export const FEATURE_LIST: Feature[] = [
     icon: 'sliders',
     help: 'A page where the application\'s administrators switch build options on and off while it runs.',
     adds: () => [
-      `Page ${CONFIG_PAGE} "Configuration" (authorization ADMIN): the configurable build options as switches, and Save`,
-      'The build options ticked below become configurable (Shared Components → Build options → Configurable)',
-      'A navigation entry Configuration for administrators',
+      tx('feat.a.config_1', { page: CONFIG_PAGE }),
+      tx('feat.a.config_2'),
+      tx('feat.a.config_3'),
     ],
     installed: (c, a) => pageHas(c, a.id, CONFIG_PAGE, 'meta.set_configurable_options'),
-    blocked: async (c, a) => ((await pageExists(c, a.id, CONFIG_PAGE)) ? `Page ${CONFIG_PAGE} is in use by another page.` : null),
+    blocked: async (c, a) => ((await pageExists(c, a.id, CONFIG_PAGE)) ? tx('feat.page_in_use', { page: CONFIG_PAGE }) : null),
     fields: async (a) => {
       const opts = (await owner.query<{ name: string; description: string | null; status: string; configurable: boolean }>(
         'select name, description, status, configurable from meta.build_option where app_id = $1 order by name', [a.id])).rows;
       return opts.length
-        ? html`<fieldset class="prop-group"><legend>Configurable build options</legend><div class="qb-pick">${opts.map((o) =>
+        ? html`<fieldset class="prop-group"><legend>${tx('feat.cbo')}</legend><div class="qb-pick">${opts.map((o) =>
             html`<label class="check"><input type="checkbox" name="options" value="${o.name}"${o.configurable ? raw(' checked') : ''}> ${o.name} <span class="muted small">${o.status}${o.description ? `, ${o.description}` : ''}</span></label>`)}</div></fieldset>`
-        : html`<p class="muted">The application has no build options yet: add them under Shared Components → Build options and tick <em>Configurable</em>; the page shows them as they come.</p>`;
+        : html`<p class="muted">${tx.rich('feat.no_build_options', { configurable: html`<em>${tx('feat.configurable')}</em>` })}</p>`;
     },
     install: async (c, a, b) => {
       const chosen = ([] as unknown[]).concat(b.options ?? []).map(String);
@@ -146,19 +147,19 @@ export const FEATURE_LIST: Feature[] = [
     icon: 'mail',
     help: 'A weekly e-mail to the administrators with the application\'s activity, the rows as a CSV file.',
     adds: () => [
-      'Application setting EMAIL_REPORT_TO: the addresses the report goes to (Shared Components → Application settings)',
-      'Automation EMAIL_REPORTING, every Monday at 07:00 UTC: meta.send_activity_report() with the last 7 days (Shared Components → Automations)',
-      'Mail goes out through the application\'s mail service (Workspace utilities → Mail services); without addresses nothing is sent',
+      tx('feat.a.email_1'),
+      tx('feat.a.email_2'),
+      tx('feat.a.email_3'),
     ],
     installed: async (c, a) => !!(await c.query(`select 1 from meta.automation where app_id = $1 and name = 'EMAIL_REPORTING'`, [a.id])).rowCount,
-    fields: async () => html`<div class="field"><label class="label" for="f_report_to">Send it to</label>
+    fields: async () => html`<div class="field"><label class="label" for="f_report_to">${tx('feat.send_to')}</label>
         <input id="f_report_to" name="report_to" type="text" placeholder="admin@example.com, boss@example.com" autocomplete="off">
-        <small class="help">Comma separated; may stay empty and be set later in Shared Components → Application settings (EMAIL_REPORT_TO).</small></div>`,
+        <small class="help">${tx('feat.send_to_help')}</small></div>`,
     install: async (c, a, b) => {
       const to = String(b.report_to ?? '').split(',').map((x) => x.trim()).filter(Boolean);
       const bad = to.find((x) => !EMAIL.test(x));
-      if (bad) throw new Error(`"${bad.slice(0, 100)}" is not an e-mail address.`);
-      if (to.join(', ').length > 4000) throw new Error('Too many addresses.');
+      if (bad) throw new Error(tx('feat.not_email', { address: bad.slice(0, 100) }));
+      if (to.join(', ').length > 4000) throw new Error(tx('feat.too_many'));
       await c.query(
         `insert into meta.app_setting (app_id, name, value, description) values ($1, 'EMAIL_REPORT_TO', $2, 'E-mail reporting: the addresses of the weekly activity report (comma separated)')
          on conflict (app_id, name) do nothing`,
@@ -177,7 +178,7 @@ export const FEATURE_LIST: Feature[] = [
     label: 'Feedback',
     icon: 'message-square',
     help: 'Users send feedback from the header; you read it under the application\'s Activity → Feedback.',
-    adds: () => ['A Feedback entry in the header for signed-in users (Settings → Feedback)', 'Their feedback, with the page, under Activity → Feedback in the builder'],
+    adds: () => [tx('feat.a.feedback_1'), tx('feat.a.feedback_2')],
     installed: async (_c, a) => a.feedback,
     install: async (c, a) => {
       await c.query('update meta.app set feedback = true, updated_at = now() where id = $1', [a.id]);
@@ -189,7 +190,7 @@ export const FEATURE_LIST: Feature[] = [
     label: 'About page',
     icon: 'info',
     help: 'An About page in a Help menu of the header.',
-    adds: () => [`Page ${ABOUT_PAGE} "About" with the application's name and the pages of its menu`, 'A Help menu with About in the navigation bar (list NAVBAR), unless the application has a navigation bar list already'],
+    adds: () => [tx('feat.a.about_1', { page: ABOUT_PAGE }), tx('feat.a.about_2')],
     installed: (c, a) => pageExists(c, a.id, ABOUT_PAGE),
     install: async (c, a) => {
       await addAboutPage(c, a.id);
@@ -201,9 +202,9 @@ export const FEATURE_LIST: Feature[] = [
     label: 'Login page',
     icon: 'log-in',
     help: 'The application\'s own login page instead of the built-in sign-in page, editable in the Page Designer.',
-    adds: () => ['Page 9999 (or the next free number) "Login": public, page template Minimal, with a Login region', 'It becomes the login page (Settings → Sign-in methods)'],
+    adds: () => [tx('feat.a.login_1'), tx('feat.a.login_2')],
     installed: async (_c, a) => a.login_page !== null,
-    blocked: async (_c, a) => (a.authentication === 'none' ? 'The application has no sign-in (authentication none).' : null),
+    blocked: async (_c, a) => (a.authentication === 'none' ? tx('feat.no_signin') : null),
     install: async (c, a) => (await createLoginPage(c, a)).page,
   },
   {
@@ -211,7 +212,7 @@ export const FEATURE_LIST: Feature[] = [
     label: 'Theme style selection',
     icon: 'palette',
     help: 'Users choose the light or the dark theme in their user menu (Appearance).',
-    adds: () => ['Appearance in the user menu: light, dark or the device\'s setting (Settings → Theme → Users may choose)'],
+    adds: () => [tx('feat.a.theme_1')],
     installed: async (_c, a) => a.theme?.user_choice !== false,
     install: async (c, a) => {
       await c.query(`update meta.app set theme = coalesce(theme, '{}') - 'user_choice', updated_at = now() where id = $1`, [a.id]);
@@ -223,9 +224,9 @@ export const FEATURE_LIST: Feature[] = [
     label: 'Push notifications',
     icon: 'bell',
     help: 'Notifications to the users\' devices, from processes and SQL (meta.send_push); the application becomes installable.',
-    adds: () => ['Install as an app (PWA): a manifest, a service worker and an Install button', 'Push notifications: users subscribe on My account; send with the send_push process or meta.send_push', 'The application\'s push key pair (kept encrypted)'],
+    adds: () => [tx('feat.a.push_1'), tx('feat.a.push_2'), tx('feat.a.push_3')],
     installed: async (_c, a) => a.pwa_push,
-    blocked: async () => (secretKeyConfigured() ? null : 'Push notifications need PGKILN_SECRET_KEY in the server\'s environment.'),
+    blocked: async () => (secretKeyConfigured() ? null : tx('feat.push_needs_key')),
     install: async (c, a) => {
       await c.query('update meta.app set pwa = true, pwa_push = true, updated_at = now() where id = $1', [a.id]);
       return null;
@@ -235,6 +236,9 @@ export const FEATURE_LIST: Feature[] = [
 
 const CODE_EMAIL = `select meta.send_activity_report(meta.get_app_setting('EMAIL_REPORT_TO'), 7)`;
 
+/** A feature's label and help in the builder language (FEATURE_LIST stays English). */
+export const featLabel = (f: Feature) => tx.dyn(`feat.f.${f.key}`, f.label);
+export const featHelp = (f: Feature) => tx.dyn(`feat.h.${f.key}`, f.help);
 const FEATURES_BY_KEY = new Map(FEATURE_LIST.map((f) => [f.key, f]));
 
 async function appRow(id: string | number, c?: Client): Promise<AppRow | null> {
@@ -269,20 +273,20 @@ export async function featureRoutes(app: FastifyInstance) {
       return { installed, blocked: installed ? null : ((await f.blocked?.(c, a)) ?? null) };
     });
     const main = html`${appHeader(a0, 'pages', s)}
-      ${region(f.label, html`
-        <p class="muted u-mt0">${icon(f.icon)} ${f.help}</p>
+      ${region(featLabel(f), html`
+        <p class="muted u-mt0">${icon(f.icon)} ${featHelp(f)}</p>
         ${installed
-          ? html`<p class="alert alert-info" role="status">${f.label} is installed in this application already.</p>`
+          ? html`<p class="alert alert-info" role="status">${tx('feat.installed_already', { feature: featLabel(f) })}</p>`
           : blocked ? html`<p class="alert alert-error" role="status">${blocked}</p>` : ''}
-        <h3>${installed ? 'It added' : 'It adds'}</h3>
+        <h3>${installed ? tx('feat.it_added') : tx('feat.it_adds')}</h3>
         <ul class="cp-adds">${f.adds(a).map((x) => html`<li>${x}</li>`)}</ul>
         ${installed || blocked
-          ? html`<div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=feature">Back to the features</a></div>`
+          ? html`<div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=feature">${tx('feat.back_to_the_features')}</a></div>`
           : html`<form method="post" action="${BASE}/apps/${a.id}/features/${f.key}">${csrf(s)}
               ${f.fields ? await f.fields(a) : ''}
-              <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=feature">Cancel</a><button class="btn btn-hot">Add ${f.label.toLowerCase()}</button></div>
+              <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=feature">${tx('feat.cancel')}</a><button class="btn btn-hot">${tx('feat.add', { feature: featLabel(f).toLowerCase() })}</button></div>
             </form>`}`)}`;
-    return send(reply, s, shell(s, `${f.label} · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', `${BASE}/apps/${a.id}/create-page?tab=feature`], [f.label]], main));
+    return send(reply, s, shell(s, tx('feat.title', { feature: featLabel(f), app: a.name }), [[tx('feat.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('feat.create_page'), `${BASE}/apps/${a.id}/create-page?tab=feature`], [featLabel(f)]], main));
   });
 
   app.post(`${BASE}/apps/:id/features/:key`, async (req: Req, reply) => {
@@ -296,14 +300,14 @@ export async function featureRoutes(app: FastifyInstance) {
         // one at a time per application, and never twice
         await c.query('select 1 from meta.app where id = $1 for update', [req.params.id]);
         const a = (await appRow(req.params.id, c))!;
-        if (await f.installed(c, a)) throw new Error(`${f.label} is installed in this application already.`);
+        if (await f.installed(c, a)) throw new Error(tx('feat.installed_already', { feature: featLabel(f) }));
         const blocked = await f.blocked?.(c, a);
         if (blocked) throw new Error(blocked);
         return f.install(c, a, b);
       });
       // the push key pair after the commit (as the Create Application wizard does)
       if (f.key === 'push') await appPublicKey(Number(req.params.id)).catch(() => undefined);
-      flash(s, `${f.label} added.`);
+      flash(s, tx('feat.added', { feature: featLabel(f) }));
       return back(reply, s, page ? `${BASE}/pages/${page}` : `${BASE}/apps/${req.params.id}/create-page?tab=feature`);
     } catch (e) {
       flash(s, (e as Error).message, 'error');