pgkiln 0.82.0 → 0.83.0

package/src/builder/dataload.ts

@@ -1,6 +1,6 @@
 import type { FastifyInstance, FastifyReply } from 'fastify';
 import { owner } from '../db.ts';
-import { html, raw, type Raw } from '../html.ts';
+import { esc, html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import {
   applyMapping,
@@ -27,6 +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';
 
 // 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
@@ -125,21 +126,21 @@ export function preview(sheet: Sheet) {
     <tbody>${sheet.rows.slice(0, PREVIEW_ROWS).map((r) => html`<tr>${r.map((v) => html`<td>${v === null ? html`<span class="null">null</span>` : v}</td>`)}</tr>`)}</tbody></table></div>`;
 }
 
-export function resultHtml(r: LoadResult, failed: boolean) {
+export function resultHtml(r: LoadResult, failed: boolean, tx: BuilderTranslate = translatorFor('en')) {
   const errors = r.errors.length
-    ? html`<div class="table-wrap"><table class="report"><thead><tr><th class="num">Row</th><th>Error</th></tr></thead>
+    ? html`<div class="table-wrap"><table class="report"><thead><tr><th class="num">${tx('dl.row')}</th><th>${tx('dl.error')}</th></tr></thead>
         <tbody>${r.errors.map((e) => html`<tr><td class="num">${e.row}</td><td>${e.message}</td></tr>`)}</tbody></table></div>
-        ${r.failed > r.errors.length ? html`<p class="muted">The first ${r.errors.length} errors are shown.</p>` : ''}`
+        ${r.failed > r.errors.length ? html`<p class="muted">${tx('dl.first_errors', { n: r.errors.length })}</p>` : ''}`
     : '';
   const summary = failed
-    ? html`<div class="alert alert-error" role="alert">${r.failed}${r.errors.length >= 100 ? '+' : ''} row(s) could not be loaded, so nothing was loaded. Fix the file, or tick “Skip rows with errors”.</div>`
-    : html`<div class="alert alert-success" role="status">${r.table}: ${r.inserted} row(s) inserted${r.updated ? `, ${r.updated} updated` : ''}${r.failed ? `, ${r.failed} skipped` : ''}.</div>`;
+    ? html`<div class="alert alert-error" role="alert">${tx('dl.failed', { n: `${r.failed}${r.errors.length >= 100 ? '+' : ''}` })}</div>`
+    : html`<div class="alert alert-success" role="status">${r.table}: ${tx('dl.inserted', { n: r.inserted })}${r.updated ? `, ${tx('dl.updated', { n: r.updated })}` : ''}${r.failed ? `, ${tx('dl.skipped', { n: r.failed })}` : ''}.</div>`;
   return html`${summary}${errors}`;
 }
 
 export async function dataLoadRoutes(app: FastifyInstance) {
   const page = (s: Session, reply: FastifyReply, main: Raw) =>
-    send(reply, s, shell(s, 'Load Data', [['SQL Workshop', `${BASE}/sql`], ['Load Data']], html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('load', s)}${main}`, 'sql'));
+    send(reply, s, shell(s, tr(s)('sql.tool.load'), [[tr(s)('rail.sql_workshop'), `${BASE}/sql`], [tr(s)('sql.tool.load')]], html`<h1 class="u-mb1">${tr(s)('rail.sql_workshop')}</h1>${workshopTabs('load', s)}${main}`, 'sql'));
 
   // step 1: choose a file
   app.get(`${BASE}/sql/load`, async (req: Req, reply) => {
@@ -150,28 +151,28 @@ export async function dataLoadRoutes(app: FastifyInstance) {
 
   const uploadForm = async (s: Session, error?: string, chosen?: string) => {
     const defs = await definitions(s);
+    const tx = tr(s);
     return region(
-      'Load data from a file',
+      tx('dl.from_file'),
       html`${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
-      <p class="muted">CSV or TSV (UTF-8 or Windows-1252; the delimiter is detected), Excel .xlsx (the first sheet), JSON (an array of objects, or JSON Lines) or XML (rows from a repeating element), up to ${MAX_MB} MB.
-        Next you choose a new or existing table. Loading runs as the builder's owner connection.
-        To download a table or a query as a file, use <a href="${BASE}/sql/unload">Unload Data</a>.</p>
+      <p class="muted">${tx('dl.intro', { mb: MAX_MB })}
+        ${tx.rich('dl.intro_unload', { link: raw(`<a href="${BASE}/sql/unload">${esc(tx('sql.tool.unload'))}</a>`) })}</p>
       <form method="post" enctype="multipart/form-data">${csrf(s)}
         <div class="form-grid">
-          <div class="field"><label class="label" for="f_file">File</label>
+          <div class="field"><label class="label" for="f_file">${tx('dl.file')}</label>
             <input type="file" id="f_file" name="file" accept=".csv,.tsv,.txt,.xlsx,.json,.jsonl,.xml,text/csv,application/json,application/xml,text/xml" required></div>
           <div class="field"><span class="label" aria-hidden="true"></span>
-            <label class="check"><input type="checkbox" name="headers" value="true" checked> First row contains column names</label></div>
-          <div class="field"><label class="label" for="f_row_tag">XML row element</label>
-            <input id="f_row_tag" name="row_tag" placeholder="e.g. employee (empty: detected)">
-            <small class="help">XML only. DTDs and entity declarations are not accepted.</small></div>
-          <div class="field"><label class="label" for="f_definition">Data load definition</label>
-            <select id="f_definition" name="definition"><option value="">- none: choose the table next -</option>${defs.map(
+            <label class="check"><input type="checkbox" name="headers" value="true" checked> ${tx('dl.headers')}</label></div>
+          <div class="field"><label class="label" for="f_row_tag">${tx('dl.row_tag')}</label>
+            <input id="f_row_tag" name="row_tag" placeholder="${tx('dl.row_tag_ph')}">
+            <small class="help">${tx('dl.row_tag_help')}</small></div>
+          <div class="field"><label class="label" for="f_definition">${tx('comp.data_load_def')}</label>
+            <select id="f_definition" name="definition"><option value="">${tx('dl.no_definition')}</option>${defs.map(
               (d) => html`<option value="${d.id}"${String(d.id) === chosen ? raw(' selected') : ''}>${d.app_name} · ${d.name} → ${d.table_name}</option>`,
             )}</select>
-            <small class="help">Shared Components of an application: table, column mapping and transformations.</small></div>
+            <small class="help">${tx('dl.definition_help')}</small></div>
         </div>
-        <div class="buttons"><button class="btn btn-hot">${icon('upload')} Next</button></div>
+        <div class="buttons"><button class="btn btn-hot">${icon('upload')} ${tx('dl.next')}</button></div>
       </form>`,
     );
   };
@@ -185,8 +186,8 @@ export async function dataLoadRoutes(app: FastifyInstance) {
     }
     const s = await developer(req, reply);
     if (!s) return;
-    if (!file) return page(s, reply, await uploadForm(s, 'Choose a file.'));
-    if (file.truncated) return page(s, reply, await uploadForm(s, `The file is larger than ${MAX_MB} MB.`));
+    if (!file) return page(s, reply, await uploadForm(s, tr(s)('dl.e.no_file')));
+    if (file.truncated) return page(s, reply, await uploadForm(s, tr(s)('dl.e.too_large', { mb: MAX_MB })));
     const def = await definition(s, req.body?.definition);
     const rowTag = (req.body?.row_tag ?? '').trim();
     try {
@@ -220,11 +221,14 @@ export async function dataLoadRoutes(app: FastifyInstance) {
       if (e instanceof LoadError) return page(s, reply, await uploadForm(s, e.message));
       throw e;
     }
+    const tx = tr(s);
     const action = `${BASE}/sql/load/${req.params.id}`;
     const hidden = html`${csrf(s)}<input type="hidden" name="h" value="${headers ? '1' : '0'}"><input type="hidden" name="rt" value="${rowTag}">`;
-    const info = `${f.filename}: ${sheet.rows.length} row(s), ${sheet.headers.length} column(s)${
-      sheet.format === 'xlsx' ? ', Excel' : sheet.format === 'json' ? ', JSON' : sheet.format === 'xml' ? `, XML rows <${sheet.rowPath}>` : `, delimiter ${sheet.delimiter === '\t' ? 'tab' : `“${sheet.delimiter}”`}`
+    const info = `${f.filename}: ${tx('dl.info', { rows: sheet.rows.length, columns: sheet.headers.length })}${
+      sheet.format === 'xlsx' ? ', Excel' : sheet.format === 'json' ? ', JSON' : sheet.format === 'xml' ? `, ${tx('dl.xml_rows', { path: `<${sheet.rowPath}>` })}` : `, ${tx('dl.delimiter', { d: sheet.delimiter === '\t' ? tx('dl.tab') : `“${sheet.delimiter}”` })}`
     }`;
+    const firstShown = sheet.rows.length > PREVIEW_ROWS ? ` ${tx('dl.first_shown', { n: PREVIEW_ROWS })}` : '';
+    const anotherFile = html`<a href="${BASE}/sql/load">${tx('dl.another_file')}</a>`;
     if (def) {
       let mapped: Sheet = sheet;
       let problem = '';
@@ -234,34 +238,34 @@ export async function dataLoadRoutes(app: FastifyInstance) {
         if (!(e instanceof LoadError)) throw e;
         problem = e.message;
       }
-      const defHtml = html`<p>Definition <a href="${BASE}/apps/${def.app_id}/shared?c=data_load_def-${def.id}">${def.name}</a>: into <b>${def.table_name}</b>, mode ${def.mode}${def.skip_errors ? ', skipping rows with errors' : ''}.
-          ${def.columns?.length ? '' : ' File columns are matched to table columns by name.'}</p>
-        ${problem ? html`<div class="alert alert-error" role="alert">${problem}</div>` : html`<p class="muted">After the mapping and transformations${mapped.rows.length > PREVIEW_ROWS ? ` (first ${PREVIEW_ROWS} rows)` : ''}:</p>${preview(mapped)}`}
+      const defHtml = html`<p>${tx.rich('dl.def_into', { def: raw(`<a href="${BASE}/apps/${def.app_id}/shared?c=data_load_def-${def.id}">${esc(def.name)}</a>`), table: raw(`<b>${esc(def.table_name)}</b>`), mode: def.mode })}${def.skip_errors ? `, ${tx('dl.def_skipping')}` : ''}.
+          ${def.columns?.length ? '' : ` ${tx('dl.def_by_name')}`}</p>
+        ${problem ? html`<div class="alert alert-error" role="alert">${problem}</div>` : html`<p class="muted">${mapped.rows.length > PREVIEW_ROWS ? tx('dl.after_mapping_first', { n: PREVIEW_ROWS }) : tx('dl.after_mapping')}</p>${preview(mapped)}`}
         <form method="post" action="${action}">${hidden}<input type="hidden" name="target" value="definition"><input type="hidden" name="d" value="${def.id}">
-          <div class="buttons"><button class="btn btn-hot"${problem ? raw(' disabled') : ''}>${icon('upload')} Load into ${def.table_name}</button></div></form>`;
+          <div class="buttons"><button class="btn btn-hot"${problem ? raw(' disabled') : ''}>${icon('upload')} ${tx('dl.load_into', { table: def.table_name })}</button></div></form>`;
       return page(
         s,
         reply,
         html`${result}
-          ${region('Preview', html`<p class="muted">${info}${sheet.rows.length > PREVIEW_ROWS ? ` (first ${PREVIEW_ROWS} shown)` : ''}. <a href="${BASE}/sql/load">Choose another file</a></p>${preview(sheet)}`)}
+          ${region(tx('dl.preview'), html`<p class="muted">${info}${firstShown}. ${anotherFile}</p>${preview(sheet)}`)}
           <div class="u-spacer"></div>
-          ${region(`Load with ${def.name}`, defHtml)}`,
+          ${region(tx('dl.load_with', { name: def.name }), defHtml)}`,
       );
     }
-    const skip = html`<div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="skip_errors" value="true"> Skip rows with errors (otherwise nothing is loaded when a row fails)</label></div>`;
+    const skip = html`<div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="skip_errors" value="true"> ${tx('dl.skip_errors')}</label></div>`;
 
     const newCols = suggestColumns(sheet);
     const newTable = html`<form method="post" action="${action}">${hidden}<input type="hidden" name="target" value="new">
-      <div class="form-grid"><div class="field"><label class="label" for="f_new_table">Table name</label>
+      <div class="form-grid"><div class="field"><label class="label" for="f_new_table">${tx('dl.table_name')}</label>
         <input id="f_new_table" name="new_table" value="${tableName(f.filename)}" required>
-        <small class="help">schema.table; the table gets an identity primary key <code>id</code>.</small></div></div>
-      <div class="table-wrap"><table class="report"><thead><tr><th>File column</th><th>Column name (empty = skip)</th><th>Type</th></tr></thead><tbody>
+        <small class="help">${tx.code('dl.table_name_help')}</small></div></div>
+      <div class="table-wrap"><table class="report"><thead><tr><th>${tx('dl.file_column')}</th><th>${tx('dl.column_name')}</th><th>${tx('dl.type')}</th></tr></thead><tbody>
         ${newCols.map((c) => html`<tr><td>${sheet.headers[c.index]}</td>
-          <td><input name="name_${c.index}" value="${c.name}" aria-label="Column name for ${sheet.headers[c.index]}"></td>
-          <td><select name="type_${c.index}" aria-label="Type of ${sheet.headers[c.index]}">${COLUMN_TYPES.map((t) => html`<option${t === c.type ? raw(' selected') : ''}>${t}</option>`)}</select></td></tr>`)}
+          <td><input name="name_${c.index}" value="${c.name}" aria-label="${tx('dl.aria_name', { column: sheet.headers[c.index] })}"></td>
+          <td><select name="type_${c.index}" aria-label="${tx('dl.aria_type', { column: sheet.headers[c.index] })}">${COLUMN_TYPES.map((t) => html`<option${t === c.type ? raw(' selected') : ''}>${t}</option>`)}</select></td></tr>`)}
       </tbody></table></div>
       ${skip}
-      <div class="buttons"><button class="btn btn-hot">Create table and load</button></div></form>`;
+      <div class="buttons"><button class="btn btn-hot">${tx('dl.create_and_load')}</button></div></form>`;
 
     const db = await workshopDb(s);
     const tables = (
@@ -279,44 +283,44 @@ export async function dataLoadRoutes(app: FastifyInstance) {
       const auto = autoMap(sheet.headers, cols);
       const hasPk = cols.some((c) => c.pk);
       mapping = html`<form method="post" action="${action}">${hidden}<input type="hidden" name="target" value="existing"><input type="hidden" name="table" value="${chosen}">
-        <div class="table-wrap"><table class="report"><thead><tr><th>File column</th><th>Table column</th></tr></thead><tbody>
+        <div class="table-wrap"><table class="report"><thead><tr><th>${tx('dl.file_column')}</th><th>${tx('dl.table_column')}</th></tr></thead><tbody>
           ${sheet.headers.map((h, i) => {
             const cur = auto.find((m) => m.index === i)?.column ?? '';
-            return html`<tr><td>${h}</td><td><select name="map_${i}" aria-label="Table column for ${h}"><option value="">- skip -</option>${cols
+            return html`<tr><td>${h}</td><td><select name="map_${i}" aria-label="${tx('dl.aria_map', { column: h })}"><option value="">${tx('dl.skip')}</option>${cols
               .filter((c) => !c.generated)
-              .map((c) => html`<option value="${c.name}"${c.name === cur ? raw(' selected') : ''}>${c.name} (${c.type}${c.pk ? ', key' : ''})</option>`)}</select></td></tr>`;
+              .map((c) => html`<option value="${c.name}"${c.name === cur ? raw(' selected') : ''}>${c.name} (${c.type}${c.pk ? `, ${tx('dl.key')}` : ''})</option>`)}</select></td></tr>`;
           })}
         </tbody></table></div>
-        <fieldset class="field"><legend class="label">Mode</legend><div class="radio-group">
-          <label class="check"><input type="radio" name="mode" value="append" checked> Append: insert all rows</label>
-          <label class="check"><input type="radio" name="mode" value="merge"${hasPk ? '' : raw(' disabled')}> Merge: update rows with the same primary key, insert the others</label>
-          <label class="check"><input type="radio" name="mode" value="replace"> Replace: delete all rows first</label>
+        <fieldset class="field"><legend class="label">${tx('dl.mode')}</legend><div class="radio-group">
+          <label class="check"><input type="radio" name="mode" value="append" checked> ${tx('dl.mode_append')}</label>
+          <label class="check"><input type="radio" name="mode" value="merge"${hasPk ? '' : raw(' disabled')}> ${tx('dl.mode_merge')}</label>
+          <label class="check"><input type="radio" name="mode" value="replace"> ${tx('dl.mode_replace')}</label>
         </div></fieldset>
         ${skip}
-        <div class="buttons"><button class="btn btn-hot">Load into ${chosen}</button></div>
-        <details class="u-mt1"><summary>Save this mapping as a data load definition</summary>
-          <p class="muted">For the data_load process of an application, and to load files like this one again.</p>
+        <div class="buttons"><button class="btn btn-hot">${tx('dl.load_into', { table: chosen })}</button></div>
+        <details class="u-mt1"><summary>${tx('dl.save_mapping')}</summary>
+          <p class="muted">${tx('dl.save_mapping_help')}</p>
           <div class="form-grid">
-            <div class="field"><label class="label" for="f_def_app">Application</label>
+            <div class="field"><label class="label" for="f_def_app">${tx('rm.application')}</label>
               <select id="f_def_app" name="def_app">${apps.map((a) => html`<option value="${a.id}">${a.name}</option>`)}</select></div>
-            <div class="field"><label class="label" for="f_def_name">Name</label><input id="f_def_name" name="def_name" placeholder="e.g. ${defName(f.filename)}"></div>
+            <div class="field"><label class="label" for="f_def_name">${tx('dl.name')}</label><input id="f_def_name" name="def_name" placeholder="${tx('rm.eg', { example: defName(f.filename) })}"></div>
           </div>
-          <div class="buttons"><button class="btn" name="target" value="save_definition">${icon('check')} Save as definition</button></div>
+          <div class="buttons"><button class="btn" name="target" value="save_definition">${icon('check')} ${tx('dl.save_definition')}</button></div>
         </details></form>`;
     }
     const existing = html`<form method="get" action="${action}" class="search u-mwnone">
         <input type="hidden" name="h" value="${headers ? '1' : '0'}"><input type="hidden" name="rt" value="${rowTag}">
-        <select name="table" aria-label="Table"><option value="">- choose a table -</option>${tables.map((t) => html`<option${t === chosen ? raw(' selected') : ''}>${t}</option>`)}</select>
-        <button class="btn">Map columns</button></form>${mapping}`;
+        <select name="table" aria-label="${tx('dl.table')}"><option value="">${tx('dl.choose_table')}</option>${tables.map((t) => html`<option${t === chosen ? raw(' selected') : ''}>${t}</option>`)}</select>
+        <button class="btn">${tx('dl.map_columns')}</button></form>${mapping}`;
 
     return page(
       s,
       reply,
       html`${result}
-        ${region(`Preview`, html`<p class="muted">${info}${sheet.rows.length > PREVIEW_ROWS ? ` (first ${PREVIEW_ROWS} shown)` : ''}. <a href="${BASE}/sql/load">Choose another file</a></p>${preview(sheet)}`)}
+        ${region(tx('dl.preview'), html`<p class="muted">${info}${firstShown}. ${anotherFile}</p>${preview(sheet)}`)}
         <div class="columns u-mt1">
-          ${region('Load into a new table', newTable)}
-          ${region('Load into an existing table', existing)}
+          ${region(tx('dl.into_new'), newTable)}
+          ${region(tx('dl.into_existing'), existing)}
         </div>`,
     );
   };
@@ -344,20 +348,20 @@ export async function dataLoadRoutes(app: FastifyInstance) {
       const mode = ['append', 'replace', 'merge'].includes(b.mode ?? '') ? b.mode : 'append';
       const format = sheet instanceof Error ? 'auto' : sheet.format;
       try {
-        if (!/^\d{1,9}$/.test(String(b.def_app ?? '')) || (await appWorkspace(String(b.def_app))) !== currentWorkspace(s)) throw new LoadError('Choose an application of this workspace.');
+        if (!/^\d{1,9}$/.test(String(b.def_app ?? '')) || (await appWorkspace(String(b.def_app))) !== currentWorkspace(s)) throw new LoadError(tr(s)('rm.e.choose_app'));
         const r = await owner.one(
           `insert into meta.data_load_def (app_id, name, table_name, format, headers, row_tag, mode, skip_errors, columns)
            values ($1, $2, $3, $4, $5, $6, $7, $8, $9) returning id, app_id`,
           [b.def_app, name, b.table, format, headers, format === 'xml' && !(sheet instanceof Error) ? sheet.rowPath : null, mode, b.skip_errors === 'true', JSON.stringify(columns)],
         );
-        flash(s, `Data load definition ${name} saved.`);
+        flash(s, tr(s)('dl.def_saved', { name }));
         return back(reply, s, `${BASE}/apps/${r!.app_id}/shared?c=data_load_def-${r!.id}`);
       } catch (e) {
         const code = (e as { code?: string }).code;
         if (!(e instanceof LoadError) && !code?.startsWith('23') && code !== '22P02') throw e;
         reply.code(422);
-        return targetPage(req, reply, s, html`<div class="alert alert-error" role="alert">The definition could not be saved: ${
-          code === '23505' ? `the application already has a definition named ${name}.` : (e as Error).message}</div>`);
+        return targetPage(req, reply, s, html`<div class="alert alert-error" role="alert">${tr(s)('dl.def_not_saved', {
+          reason: code === '23505' ? tr(s)('dl.def_exists', { name }) : (e as Error).message })}</div>`);
       }
     }
     let result: LoadResult | undefined;
@@ -369,12 +373,12 @@ export async function dataLoadRoutes(app: FastifyInstance) {
       const opts = { skipErrors: b.skip_errors === 'true', firstRow: headers && sheet && (sheet.format === 'csv' || sheet.format === 'xlsx') ? 2 : 1 };
       result = await (await workshopDb(s)).tx(async (c) => {
         if (def) return loadWithDefinition(c, def, f);
-        if (!sheet) throw new LoadError('The data load definition no longer exists.');
+        if (!sheet) throw new LoadError(tr(s)('dl.e.def_gone'));
         if (b.target === 'new') {
           const cols: NewColumn[] = sheet.headers
             .map((_, index) => ({ index, name: (b[`name_${index}`] ?? '').trim(), type: (b[`type_${index}`] ?? 'text') as NewColumn['type'] }))
             .filter((x) => x.name);
-          if (!cols.length) throw new LoadError('Give at least one column a name.');
+          if (!cols.length) throw new LoadError(tr(s)('dl.e.no_columns'));
           await c.query(createTableSql((b.new_table ?? '').trim(), cols));
           const table = (b.new_table ?? '').trim();
           return loadRows(c, sheet, { ...opts, table, mode: 'append', columns: cols.map((x) => ({ index: x.index, column: x.name })) });
@@ -395,12 +399,12 @@ export async function dataLoadRoutes(app: FastifyInstance) {
       return page(
         s,
         reply,
-        html`${resultHtml(result, false)}<div class="buttons">
-          <a class="btn btn-hot" href="${BASE}/sql/objects?o=${encodeURIComponent(result.table)}">${icon('table')} View ${result.table}</a>
-          <a class="btn" href="${BASE}/sql/load">${icon('upload')} Load another file</a></div>`,
+        html`${resultHtml(result, false, tr(s))}<div class="buttons">
+          <a class="btn btn-hot" href="${BASE}/sql/objects?o=${encodeURIComponent(result.table)}">${icon('table')} ${tr(s)('dl.view', { table: result.table })}</a>
+          <a class="btn" href="${BASE}/sql/load">${icon('upload')} ${tr(s)('dl.load_another')}</a></div>`,
       );
     }
     reply.code(422);
-    return targetPage(req, reply, s, result ? resultHtml(result, true) : html`<div class="alert alert-error" role="alert">${error}</div>`);
+    return targetPage(req, reply, s, result ? resultHtml(result, true, tr(s)) : html`<div class="alert alert-error" role="alert">${error}</div>`);
   });
 }