pgkiln 0.82.0 → 0.83.0

package/src/builder/scripts.ts

@@ -8,6 +8,7 @@ import { runScript, splitScript, type ScriptRun, type StatementResult } from '..
 import { clearCompletions } from './code-editor.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
 import { currentWorkspace, sessionSchema, workshopDb } from './workspaces.ts';
+import { tr, translatorFor, type BuilderTranslate } from './i18n.ts';
 
 // SQL Workshop → SQL Scripts: saved scripts (create, edit, upload, download,
 // delete), run with a result per statement (stop at the first error or go on,
@@ -73,54 +74,55 @@ const when = (t: string | Date) => String(t instanceof Date ? t.toISOString() :
 /** A safe download file name for a script name. */
 export const scriptFileName = (name: string) => `${name.replace(/\.sql$/i, '').replace(/[^\w.-]+/g, '_').replace(/^[._]+/, '').slice(0, 100) || 'script'}.sql`;
 
-function statusTag(r: Pick<StatementResult, 'status'>) {
+function statusTag(tx: BuilderTranslate, r: Pick<StatementResult, 'status'>) {
   const [cls, label] =
-    r.status === 'ok' ? ['tag tag-ok', 'OK'] : r.status === 'error' ? ['tag tag-error', 'Error'] : r.status === 'skipped' ? ['tag tag-warning', 'Skipped'] : ['tag', 'Not run'];
+    r.status === 'ok' ? ['tag tag-ok', 'OK'] : r.status === 'error' ? ['tag tag-error', tx('scr.error')] : r.status === 'skipped' ? ['tag tag-warning', tx('scr.skipped')] : ['tag', tx('scr.not_run')];
   return html`<span class="${cls}">${label}</span>`;
 }
 
-function runSummary(run: { statements: number; succeeded: number; failed: number; rolled_back?: boolean; transactional?: boolean; stop_on_error?: boolean }) {
+function runSummary(tx: BuilderTranslate, run: { statements: number; succeeded: number; failed: number; rolled_back?: boolean; transactional?: boolean; stop_on_error?: boolean }) {
   const ok = run.failed === 0;
+  const rest = run.statements - run.succeeded - run.failed;
   return html`<div class="alert ${ok ? 'alert-success' : 'alert-error'}" role="${ok ? 'status' : 'alert'}">
-    ${run.statements} statement(s): ${run.succeeded} succeeded, ${run.failed} failed${run.statements - run.succeeded - run.failed > 0 ? `, ${run.statements - run.succeeded - run.failed} not run or skipped` : ''}.
-    ${run.rolled_back ? html` <strong>The transaction was rolled back: nothing was changed.</strong>` : ''}</div>`;
+    ${rest > 0 ? tx('scr.summary_rest', { n: run.statements, ok: run.succeeded, failed: run.failed, rest }) : tx('scr.summary', { n: run.statements, ok: run.succeeded, failed: run.failed })}
+    ${run.rolled_back ? html` <strong>${tx('scr.rolled_back_note')}</strong>` : ''}</div>`;
 }
 
-export function resultsHtml(results: StatementResult[]) {
-  if (!results.length) return html`<p class="muted">The script has no statements.</p>`;
+export function resultsHtml(results: StatementResult[], tx: BuilderTranslate = translatorFor('en')) {
+  if (!results.length) return html`<p class="muted">${tx('scr.no_statements')}</p>`;
   return html`<ol class="script-results">${results.map(
     (r) => html`<li class="script-result">
-      <div class="script-result-head">${statusTag(r)} <strong>#${r.n || '-'}</strong>
-        <span class="muted small">${r.line ? `line ${r.line}` : ''}${r.status === 'ok' ? ` · ${r.command ?? 'done'}${r.rows !== null && r.rows !== undefined ? `, ${r.rows} row(s)` : ''}` : ''}${r.status === 'ok' || r.status === 'error' ? ` · ${r.ms} ms` : ''}</span></div>
-      <details class="script-sql"><summary><code>${r.sql.length > 120 ? `${r.sql.slice(0, 120).replace(/\s+/g, ' ')}…` : r.sql.replace(/\s+/g, ' ')}</code></summary><pre class="source" data-code-view="sql" tabindex="0" aria-label="Statement">${r.sql}</pre></details>
+      <div class="script-result-head">${statusTag(tx, r)} <strong>#${r.n || '-'}</strong>
+        <span class="muted small">${r.line ? tx('scr.line', { line: r.line }) : ''}${r.status === 'ok' ? ` · ${r.command ?? tx('scr.done')}${r.rows !== null && r.rows !== undefined ? `, ${tx('scr.rows', { n: r.rows })}` : ''}` : ''}${r.status === 'ok' || r.status === 'error' ? ` · ${r.ms} ms` : ''}</span></div>
+      <details class="script-sql"><summary><code>${r.sql.length > 120 ? `${r.sql.slice(0, 120).replace(/\s+/g, ' ')}…` : r.sql.replace(/\s+/g, ' ')}</code></summary><pre class="source" data-code-view="sql" tabindex="0" aria-label="${tx('sm.statement')}">${r.sql}</pre></details>
       ${r.error ? html`<div class="alert ${r.status === 'error' ? 'alert-error' : 'alert-note'}">${r.error}</div>` : ''}
       ${r.columns?.length
         ? html`<div class="table-wrap"><table class="report"><thead><tr>${r.columns.map((c) => html`<th>${c}</th>`)}</tr></thead>
             <tbody>${(r.sample ?? []).map((row) => html`<tr>${row.map((v) => html`<td>${v === null ? html`<span class="null">null</span>` : v}</td>`)}</tr>`)}</tbody></table></div>
-            ${r.rows && r.sample && r.rows > r.sample.length ? html`<p class="muted small">First ${r.sample.length} of ${r.rows} row(s).</p>` : ''}`
+            ${r.rows && r.sample && r.rows > r.sample.length ? html`<p class="muted small">${tx('scr.first_rows', { shown: r.sample.length, n: r.rows })}</p>` : ''}`
         : ''}
     </li>`,
   )}</ol>`;
 }
 
 /** Run options (radio + checkbox), shared by the script editor and Quick SQL. */
-export const runOptions = (b: Body = {}) => html`<fieldset class="field"><legend class="label">When a statement fails</legend><div class="radio-group">
-    <label class="check"><input type="radio" name="on_error" value="stop"${b.on_error !== 'continue' ? raw(' checked') : ''}> Stop the script</label>
-    <label class="check"><input type="radio" name="on_error" value="continue"${b.on_error === 'continue' ? raw(' checked') : ''}> Continue with the next statement</label></div></fieldset>
-  <div class="field"><label class="check"><input type="checkbox" name="transaction" value="true"${b.transaction === 'true' ? raw(' checked') : ''}> Run in one transaction (with “Stop”, a failure rolls back the whole script)</label></div>`;
+export const runOptions = (b: Body = {}, tx: BuilderTranslate = translatorFor('en')) => html`<fieldset class="field"><legend class="label">${tx('scr.when_fails')}</legend><div class="radio-group">
+    <label class="check"><input type="radio" name="on_error" value="stop"${b.on_error !== 'continue' ? raw(' checked') : ''}> ${tx('scr.stop')}</label>
+    <label class="check"><input type="radio" name="on_error" value="continue"${b.on_error === 'continue' ? raw(' checked') : ''}> ${tx('scr.continue')}</label></div></fieldset>
+  <div class="field"><label class="check"><input type="checkbox" name="transaction" value="true"${b.transaction === 'true' ? raw(' checked') : ''}> ${tx('scr.one_tx')}</label></div>`;
 
 export async function scriptRoutes(app: FastifyInstance) {
   const page = (s: Session, reply: FastifyReply, title: string, crumbs: [string, string?][], main: Raw) =>
-    send(reply, s, shell(s, title, [['SQL Workshop', `${BASE}/sql`], ...crumbs], html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('scripts', s)}${main}`, 'sql'));
+    send(reply, s, shell(s, title, [[tr(s)('rail.sql_workshop'), `${BASE}/sql`], ...crumbs], html`<h1 class="u-mb1">${tr(s)('rail.sql_workshop')}</h1>${workshopTabs('scripts', s)}${main}`, 'sql'));
 
-  const historyTable = (runs: any[], withName: boolean) =>
+  const historyTable = (tx: BuilderTranslate, runs: any[], withName: boolean) =>
     runs.length
-      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Started</th>${withName ? html`<th>Script</th>` : ''}<th>By</th><th class="num">Statements</th><th class="num">Failed</th><th class="num">ms</th><th>Result</th></tr></thead><tbody>
+      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('scr.col.started')}</th>${withName ? html`<th>${tx('scr.col.script')}</th>` : ''}<th>${tx('scr.col.by')}</th><th class="num">${tx('scr.col.statements')}</th><th class="num">${tx('scr.col.failed')}</th><th class="num">ms</th><th>${tx('scr.col.result')}</th></tr></thead><tbody>
           ${runs.map((r) => html`<tr><td><a href="${BASE}/sql/scripts/runs/${r.id}">${when(r.started_at)}</a></td>${withName ? html`<td>${r.script_name}</td>` : ''}<td>${r.run_by}</td>
             <td class="num">${r.statements}</td><td class="num">${r.failed}</td><td class="num">${r.elapsed_ms}</td>
-            <td>${r.failed ? html`<span class="tag tag-error">${r.rolled_back ? 'Rolled back' : 'Errors'}</span>` : html`<span class="tag tag-ok">OK</span>`}</td></tr>`)}
+            <td>${r.failed ? html`<span class="tag tag-error">${r.rolled_back ? tx('scr.rolled_back') : tx('scr.errors')}</span>` : html`<span class="tag tag-ok">OK</span>`}</td></tr>`)}
         </tbody></table></div>`
-      : html`<p class="muted">No runs yet.</p>`;
+      : html`<p class="muted">${tx('scr.no_runs')}</p>`;
 
   // ------------------------------------------------------------ list
   app.get(`${BASE}/sql/scripts`, async (req: Req, reply) => {
@@ -138,29 +140,30 @@ export async function scriptRoutes(app: FastifyInstance) {
       )
     ).rows;
     const runs = (await owner.query('select * from meta.sql_script_run where workspace_id = $1 order by id desc limit 20', [currentWorkspace(s)])).rows;
+    const tx = tr(s);
     const list = scripts.length
-      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Script</th><th>Updated</th><th class="num">Size</th><th>Last run</th><th>Open</th></tr></thead><tbody>
+      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('scr.col.script')}</th><th>${tx('scr.col.updated')}</th><th class="num">${tx('scr.col.size')}</th><th>${tx('scr.col.last_run')}</th><th>${tx('scr.col.open')}</th></tr></thead><tbody>
           ${scripts.map((x) => html`<tr><td><a href="${BASE}/sql/scripts/${x.id}">${x.name}</a>${x.description ? html`<br><span class="muted small">${x.description}</span>` : ''}</td>
-            <td>${when(x.updated_at)}${x.updated_by ? html` <span class="muted small">by ${x.updated_by}</span>` : ''}</td><td class="num">${bytes(Number(x.size))}</td>
-            <td>${x.last_run ? html`${when(x.last_run)} ${x.last_failed ? html`<span class="tag tag-error">Errors</span>` : html`<span class="tag tag-ok">OK</span>`}` : html`<span class="muted">never</span>`}</td>
-            <td><a class="btn btn-sm" href="${BASE}/sql/worksheet?script=${x.id}">${icon('code')} Worksheet</a> <a class="btn btn-sm" href="${BASE}/sql/scripts/${x.id}/download">${icon('download')} Download</a></td></tr>`)}
+            <td>${when(x.updated_at)}${x.updated_by ? html` <span class="muted small">${tx('scr.by', { user: x.updated_by })}</span>` : ''}</td><td class="num">${bytes(Number(x.size))}</td>
+            <td>${x.last_run ? html`${when(x.last_run)} ${x.last_failed ? html`<span class="tag tag-error">${tx('scr.errors')}</span>` : html`<span class="tag tag-ok">OK</span>`}` : html`<span class="muted">${tx('scr.never')}</span>`}</td>
+            <td><a class="btn btn-sm" href="${BASE}/sql/worksheet?script=${x.id}">${icon('code')} ${tx('scr.worksheet')}</a> <a class="btn btn-sm" href="${BASE}/sql/scripts/${x.id}/download">${icon('download')} ${tx('scr.download')}</a></td></tr>`)}
         </tbody></table></div>`
-      : html`<p class="muted">No scripts yet. Create one, upload a .sql file, or generate one with Quick SQL.</p>`;
+      : html`<p class="muted">${tx('scr.none_yet')}</p>`;
     return page(
       s,
       reply,
-      'SQL Scripts',
-      [['SQL Scripts']],
-      html`<div class="buttons u-mb1"><a class="btn btn-hot" href="${BASE}/sql/scripts/new">${icon('plus')} Create script</a>
-          <a class="btn" href="${BASE}/sql/quick">${icon('bolt')} Quick SQL</a></div>
-        ${region('Scripts', list, html`<span class="count">${scripts.length}</span>`)}
+      tx('sql.tool.scripts'),
+      [[tx('sql.tool.scripts')]],
+      html`<div class="buttons u-mb1"><a class="btn btn-hot" href="${BASE}/sql/scripts/new">${icon('plus')} ${tx('scr.create')}</a>
+          <a class="btn" href="${BASE}/sql/quick">${icon('bolt')} ${tx('sql.tool.quicksql')}</a></div>
+        ${region(tx('scr.scripts'), list, html`<span class="count">${scripts.length}</span>`)}
         <div class="u-spacer"></div>
-        ${region('Upload a script', html`<form method="post" action="${BASE}/sql/scripts/upload" enctype="multipart/form-data">${csrf(s)}
-            <div class="form-grid"><div class="field"><label class="label" for="f_script_file">.sql file (UTF-8, up to ${SCRIPT_MAX_MB} MB)</label>
+        ${region(tx('scr.upload_title'), html`<form method="post" action="${BASE}/sql/scripts/upload" enctype="multipart/form-data">${csrf(s)}
+            <div class="form-grid"><div class="field"><label class="label" for="f_script_file">${tx('scr.file', { mb: SCRIPT_MAX_MB })}</label>
               <input type="file" id="f_script_file" name="file" accept=".sql,.txt,text/plain,application/sql" required></div></div>
-            <div class="buttons"><button class="btn">${icon('upload')} Upload</button></div></form>`)}
+            <div class="buttons"><button class="btn">${icon('upload')} ${tx('scr.upload')}</button></div></form>`)}
         <div class="u-spacer"></div>
-        ${region('Recent runs', historyTable(runs, true))}`,
+        ${region(tx('scr.recent_runs'), historyTable(tx, runs, true))}`,
     );
   });
 
@@ -170,30 +173,31 @@ export async function scriptRoutes(app: FastifyInstance) {
     const action = isNew ? `${BASE}/sql/scripts` : `${BASE}/sql/scripts/${row.id}`;
     const runs = isNew ? [] : (await owner.query('select * from meta.sql_script_run where script_id = $1 order by id desc limit 20', [row.id])).rows;
     const statements = row.content ? splitScript(row.content).length : 0;
+    const tx = tr(s);
     const form = html`<form method="post" action="${action}">${csrf(s)}
         ${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
         <div class="form-grid">
-          <div class="field"><label class="label" for="f_name">Name</label><input id="f_name" name="name" value="${row.name ?? ''}" required maxlength="200"></div>
-          <div class="field"><label class="label" for="f_description">Description</label><input id="f_description" name="description" value="${row.description ?? ''}"></div>
+          <div class="field"><label class="label" for="f_name">${tx('scr.name')}</label><input id="f_name" name="name" value="${row.name ?? ''}" required maxlength="200"></div>
+          <div class="field"><label class="label" for="f_description">${tx('scr.description')}</label><input id="f_description" name="description" value="${row.description ?? ''}"></div>
         </div>
-        <div class="field"><label class="label" for="f_content">Script</label>
+        <div class="field"><label class="label" for="f_content">${tx('scr.col.script')}</label>
           <textarea id="f_content" name="content" class="code sql-editor" rows="18" spellcheck="false" data-code="plpgsql">${row.content ?? ''}</textarea>
-          <small class="help">Statements end with a semicolon (outside strings, comments and $$ bodies). psql commands (\\set, \\i …) are skipped.${statements ? ` ${statements} statement(s).` : ''}</small></div>
-        ${runOptions(req.body ?? {})}
-        <div class="buttons"><button class="btn" name="action" value="save">${icon('check')} Save</button>
-          <button class="btn btn-hot" name="action" value="run">${icon('play')} Save and run</button></div>
+          <small class="help">${tx('scr.content_help')}${statements ? ` ${tx('scr.statements', { n: statements })}` : ''}</small></div>
+        ${runOptions(req.body ?? {}, tx)}
+        <div class="buttons"><button class="btn" name="action" value="save">${icon('check')} ${tx('scr.save')}</button>
+          <button class="btn btn-hot" name="action" value="run">${icon('play')} ${tx('scr.save_run')}</button></div>
       </form>`;
     const extras = isNew
       ? ''
-      : html`<div class="buttons u-mt1"><a class="btn" href="${BASE}/sql/scripts/${row.id}/download">${icon('download')} Download</a></div>
-        <form method="post" action="${BASE}/sql/scripts/${row.id}/delete" class="danger-zone">${csrf(s)}<button class="btn btn-danger" data-confirm="Delete this script and its run history?">Delete</button></form>`;
+      : html`<div class="buttons u-mt1"><a class="btn" href="${BASE}/sql/scripts/${row.id}/download">${icon('download')} ${tx('scr.download')}</a></div>
+        <form method="post" action="${BASE}/sql/scripts/${row.id}/delete" class="danger-zone">${csrf(s)}<button class="btn btn-danger" data-confirm="${tx('scr.delete_confirm')}">${tx('scr.delete')}</button></form>`;
     return page(
       s,
       reply,
-      isNew ? 'New script' : row.name,
-      [['SQL Scripts', `${BASE}/sql/scripts`], [isNew ? 'New script' : row.name]],
-      html`${region(isNew ? 'New script' : `Script: ${row.name}`, html`${form}${extras}`)}
-        ${isNew ? '' : html`<div class="u-spacer"></div>${region('Runs', historyTable(runs, false))}`}`,
+      isNew ? tx('scr.new') : row.name,
+      [[tx('sql.tool.scripts'), `${BASE}/sql/scripts`], [isNew ? tx('scr.new') : row.name]],
+      html`${region(isNew ? tx('scr.new') : tx('scr.script_title', { name: row.name }), html`${form}${extras}`)}
+        ${isNew ? '' : html`<div class="u-spacer"></div>${region(tx('scr.runs'), historyTable(tx, runs, false))}`}`,
     );
   };
 
@@ -223,11 +227,11 @@ export async function scriptRoutes(app: FastifyInstance) {
     const row = { id: id ? Number(id) : undefined, name, description: b.description ?? '', content };
     if (!name || name.length > 200) {
       reply.code(422);
-      return editor(req, reply, s, row, 'Give the script a name (at most 200 characters).');
+      return editor(req, reply, s, row, tr(s)('scr.err.name'));
     }
     if (Buffer.byteLength(content) > SCRIPT_MAX_MB * 1024 * 1024) {
       reply.code(422);
-      return editor(req, reply, s, row, `The script is larger than ${SCRIPT_MAX_MB} MB.`);
+      return editor(req, reply, s, row, tr(s)('scr.err.size', { mb: SCRIPT_MAX_MB }));
     }
     let scriptId: number;
     try {
@@ -248,7 +252,7 @@ export async function scriptRoutes(app: FastifyInstance) {
     } catch (e) {
       if ((e as { code?: string }).code === '23505') {
         reply.code(422);
-        return editor(req, reply, s, row, `A script named “${name}” already exists.`);
+        return editor(req, reply, s, row, tr(s)('scr.err.exists', { name }));
       }
       throw e;
     }
@@ -262,7 +266,7 @@ export async function scriptRoutes(app: FastifyInstance) {
       });
       return back(reply, s, `${BASE}/sql/scripts/runs/${runId}`);
     }
-    flash(s, `Script “${name}” saved.`);
+    flash(s, tr(s)('scr.saved', { name }));
     return back(reply, s, `${BASE}/sql/scripts/${scriptId}`);
   };
   app.post(`${BASE}/sql/scripts`, save);
@@ -278,7 +282,7 @@ export async function scriptRoutes(app: FastifyInstance) {
       await c.query('delete from meta.sql_script_run where script_id = $1', [req.params.id]);
       return (await c.query('delete from meta.sql_script where id = $1 returning name', [req.params.id])).rows[0];
     });
-    if (r) flash(s, `Script “${r.name}” deleted.`);
+    if (r) flash(s, tr(s)('scr.deleted', { name: r.name }));
     return back(reply, s, `${BASE}/sql/scripts`);
   });
 
@@ -306,20 +310,21 @@ export async function scriptRoutes(app: FastifyInstance) {
       flash(s, message, 'error');
       return back(reply, s, `${BASE}/sql/scripts`);
     };
-    if (!file) return fail('Choose a .sql file.');
-    if (file.truncated) return fail(`The file is larger than ${SCRIPT_MAX_MB} MB.`);
+    const tx = tr(s);
+    if (!file) return fail(tx('scr.err.choose'));
+    if (file.truncated) return fail(tx('scr.err.file_size', { mb: SCRIPT_MAX_MB }));
     let content: string;
     try {
       content = new TextDecoder('utf-8', { fatal: true }).decode(file.data).replace(/^/, '').replace(/\r\n/g, '\n');
     } catch {
-      return fail('The file is not UTF-8 text.');
+      return fail(tx('scr.err.utf8'));
     }
-    if (content.includes('\0')) return fail('The file is not a text file.');
+    if (content.includes('\0')) return fail(tx('scr.err.text'));
     const base = file.filename.replace(/^.*[\\/]/, '').replace(/\.sql$/i, '').slice(0, 180) || 'script';
     let name = base;
     for (let n = 2; await owner.one('select 1 from meta.sql_script where name = $1 and workspace_id = $2', [name, currentWorkspace(s)]); n++) name = `${base} (${n})`;
     const r = await owner.one(`insert into meta.sql_script (name, content, created_by, updated_by, workspace_id) values ($1, $2, $3, $3, $4) returning id`, [name, content, s.username, currentWorkspace(s)]);
-    flash(s, `Script “${name}” uploaded.`);
+    flash(s, tx('scr.uploaded', { name }));
     return back(reply, s, `${BASE}/sql/scripts/${r!.id}`);
   });
 
@@ -330,18 +335,19 @@ export async function scriptRoutes(app: FastifyInstance) {
     const run = /^\d+$/.test(req.params.run) ? await owner.one('select * from meta.sql_script_run where id = $1 and workspace_id = $2', [req.params.run, currentWorkspace(s)]) : undefined;
     if (!run) return reply.code(404).send('Not found');
     const exists = run.script_id ? await owner.one('select id from meta.sql_script where id = $1', [run.script_id]) : undefined;
-    const options = `${run.stop_on_error ? 'stop on error' : 'continue on error'}${run.transactional ? ', one transaction' : ''}`;
+    const tx = tr(s);
+    const options = `${run.stop_on_error ? tx('scr.opt.stop') : tx('scr.opt.continue')}${run.transactional ? `, ${tx('scr.opt.one_tx')}` : ''}`;
     return page(
       s,
       reply,
-      'Script results',
-      [['SQL Scripts', `${BASE}/sql/scripts`], ...(exists ? [[run.script_name, `${BASE}/sql/scripts/${run.script_id}`] as [string, string]] : []), ['Results']],
+      tx('scr.results_title'),
+      [[tx('sql.tool.scripts'), `${BASE}/sql/scripts`], ...(exists ? [[run.script_name, `${BASE}/sql/scripts/${run.script_id}`] as [string, string]] : []), [tx('scr.results')]],
       region(
-        `Results: ${run.script_name}`,
-        html`<p class="muted">Run by ${run.run_by} at ${when(run.started_at)} in ${run.elapsed_ms} ms (${options}).</p>
-          ${runSummary(run)}
-          ${resultsHtml(run.results)}
-          ${exists ? html`<div class="buttons u-mt1"><a class="btn" href="${BASE}/sql/scripts/${run.script_id}">${icon('edit')} Edit the script</a></div>` : ''}`,
+        tx('scr.results_of', { name: run.script_name }),
+        html`<p class="muted">${tx('scr.run_by', { user: run.run_by, time: when(run.started_at), ms: run.elapsed_ms, options })}</p>
+          ${runSummary(tx, run)}
+          ${resultsHtml(run.results, tx)}
+          ${exists ? html`<div class="buttons u-mt1"><a class="btn" href="${BASE}/sql/scripts/${run.script_id}">${icon('edit')} ${tx('scr.edit')}</a></div>` : ''}`,
       ),
     );
   });

package/src/builder/sql-charts.ts

@@ -10,6 +10,7 @@ import type { Session } from '../session.ts';
 import { unloadStatement } from '../unload.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
 import { currentWorkspace, sessionSchema, workshopDb } from './workspaces.ts';
+import { tr, translatorFor, type BuilderKey, type BuilderTranslate } from './i18n.ts';
 
 // (sprint 97, Database Actions DA-6: Create Chart and Charts) A query drawn as a chart with pgkiln's own
 // server-rendered charts (src/runtime/charts.ts): the worksheet's Chart tab draws the last query, guessing the label
@@ -17,7 +18,7 @@ import { currentWorkspace, sessionSchema, workshopDb } from './workspaces.ts';
 // migration 110) are listed under SQL Workshop → Charts, the ones on the dashboard drawn there. A saved chart's
 // SELECT runs read-only, with a statement timeout and at most 500 rows, as the workshop's connection.
 
-export const SQL_CHART_KINDS: [ChartKind, string][] = [['bar', 'Bar'], ['column', 'Column'], ['stacked', 'Stacked bar'], ['line', 'Line'], ['area', 'Area'], ['donut', 'Donut'], ['pie', 'Pie'], ['scatter', 'Scatter']];
+export const SQL_CHART_KINDS: [ChartKind, BuilderKey][] = [['bar', 'ch.kind.bar'], ['column', 'ch.kind.column'], ['stacked', 'ch.kind.stacked'], ['line', 'ch.kind.line'], ['area', 'ch.kind.area'], ['donut', 'ch.kind.donut'], ['pie', 'ch.kind.pie'], ['scatter', 'ch.kind.scatter']];
 const MAX_ROWS = 500;
 
 export interface ChartSpec { kind: ChartKind; label: string; values: string[] }
@@ -42,11 +43,11 @@ export function drawChart(title: string, columns: string[], rows: unknown[][], s
 }
 
 /** The controls of a chart (type, label column, value columns), named chart_*. */
-export function chartControls(columns: string[], spec: ChartSpec, idPrefix = 'ch'): Raw {
+export function chartControls(columns: string[], spec: ChartSpec, idPrefix = 'ch', tx: BuilderTranslate = translatorFor('en')): Raw {
   return html`<div class="ch-controls">
-    <label><span>Type</span><select name="chart_kind" id="${idPrefix}-kind">${SQL_CHART_KINDS.map(([k, label]) => html`<option value="${k}"${k === spec.kind ? raw(' selected') : ''}>${label}</option>`)}</select></label>
-    <label><span>Labels</span><select name="chart_label" id="${idPrefix}-label">${columns.map((c) => html`<option value="${c}"${c === spec.label ? raw(' selected') : ''}>${c}</option>`)}</select></label>
-    <fieldset><legend>Values</legend>${columns.map((c) => html`<label class="check"><input type="checkbox" name="chart_values" value="${c}"${spec.values.includes(c) ? raw(' checked') : ''}> ${c}</label>`)}</fieldset>
+    <label><span>${tx('ch.type')}</span><select name="chart_kind" id="${idPrefix}-kind">${SQL_CHART_KINDS.map(([k, label]) => html`<option value="${k}"${k === spec.kind ? raw(' selected') : ''}>${tx(label)}</option>`)}</select></label>
+    <label><span>${tx('ch.labels')}</span><select name="chart_label" id="${idPrefix}-label">${columns.map((c) => html`<option value="${c}"${c === spec.label ? raw(' selected') : ''}>${c}</option>`)}</select></label>
+    <fieldset><legend>${tx('ch.values')}</legend>${columns.map((c) => html`<label class="check"><input type="checkbox" name="chart_values" value="${c}"${spec.values.includes(c) ? raw(' checked') : ''}> ${c}</label>`)}</fieldset>
   </div>`;
 }
 
@@ -73,12 +74,13 @@ async function runChart(s: Session, sql: string) {
 }
 
 async function chartCard(s: Session, ch: SavedChart, full = false): Promise<{ body: Raw; css: string }> {
+  const tx = tr(s);
   try {
     const r = await runChart(s, ch.sql);
     const spec = chartSpec(r.columns, r.numeric, { kind: ch.kind, label: ch.label_col, values: ch.value_cols });
-    if (!spec) return { body: html`<p class="muted">The query has no number column to draw.</p>`, css: '' };
+    if (!spec) return { body: html`<p class="muted">${tx('ch.no_number')}</p>`, css: '' };
     const d = drawChart(ch.name, r.columns, r.rows, spec);
-    return { body: html`${d.body}${full ? html`<p class="muted small">${r.rows.length} row${r.rows.length === 1 ? '' : 's'}${r.rows.length === MAX_ROWS ? ` (the first ${MAX_ROWS})` : ''}.</p>` : ''}`, css: d.css };
+    return { body: html`${d.body}${full ? html`<p class="muted small">${r.rows.length === MAX_ROWS ? tx('ch.rows_first', { n: MAX_ROWS }) : r.rows.length === 1 ? tx('ch.row_one') : tx('ch.rows', { n: r.rows.length })}</p>` : ''}`, css: d.css };
   } catch (e) {
     return { body: html`<p class="alert alert-error">${(e as Error).message}</p>`, css: '' };
   }
@@ -92,6 +94,7 @@ export async function sqlChartRoutes(app: FastifyInstance) {
     const s = await developer(req, reply);
     if (!s) return;
     const charts = (await owner.query<SavedChart>('select * from meta.sql_chart where workspace_id = $1 order by lower(name)', [currentWorkspace(s)])).rows;
+    const tx = tr(s);
     let css = '';
     const cards: Raw[] = [];
     for (const ch of charts.filter((c) => c.on_dashboard)) {
@@ -99,14 +102,15 @@ export async function sqlChartRoutes(app: FastifyInstance) {
       css += `\n${card.css}`;
       cards.push(html`<section class="ch-card"><h2><a href="${BASE}/sql/charts/${ch.id}">${ch.name}</a></h2>${card.body}</section>`);
     }
-    const main = html`<h1 class="u-mb1">Charts</h1>${workshopTabs('charts', s)}${style(req.cspNonce, css)}
-      <p class="muted">Queries drawn as charts. Make one from a query in the <a href="${BASE}/sql/worksheet">SQL Worksheet</a> (its Chart tab, Ctrl+F11), then save it.</p>
+    const kindLabel = (k: string) => { const x = SQL_CHART_KINDS.find(([kk]) => kk === k); return x ? tx(x[1]) : k; };
+    const main = html`<h1 class="u-mb1">${tx('sql.tool.charts')}</h1>${workshopTabs('charts', s)}${style(req.cspNonce, css)}
+      <p class="muted">${tx.rich('ch.intro', { worksheet: html`<a href="${BASE}/sql/worksheet">${tx('sql.tool.worksheet')}</a>` })}</p>
       ${cards.length ? html`<div class="ch-dashboard">${cards}</div>` : ''}
-      ${region('All charts', charts.length ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Chart</th><th>Type</th><th>On the dashboard</th><th>Changed</th></tr></thead><tbody>
-        ${charts.map((c) => html`<tr><td><a href="${BASE}/sql/charts/${c.id}">${c.name}</a></td><td>${SQL_CHART_KINDS.find(([k]) => k === c.kind)?.[1] ?? c.kind}</td><td>${c.on_dashboard ? 'Yes' : 'No'}</td>
-          <td>${new Date(c.updated_at).toISOString().slice(0, 16).replace('T', ' ')}${c.created_by ? html` <span class="muted small">by ${c.created_by}</span>` : ''}</td></tr>`)}</tbody></table></div>`
-        : html`<p class="muted">No charts yet.</p>`)}`;
-    return send(reply, s, shell(s, 'Charts', [['SQL Workshop', `${BASE}/sql`], ['Charts']], main, 'sql'));
+      ${region(tx('ch.all'), charts.length ? html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('ch.chart')}</th><th>${tx('ch.type')}</th><th>${tx('ch.on_dashboard_col')}</th><th>${tx('ch.changed')}</th></tr></thead><tbody>
+        ${charts.map((c) => html`<tr><td><a href="${BASE}/sql/charts/${c.id}">${c.name}</a></td><td>${kindLabel(c.kind)}</td><td>${c.on_dashboard ? tx('ch.yes') : tx('ch.no')}</td>
+          <td>${new Date(c.updated_at).toISOString().slice(0, 16).replace('T', ' ')}${c.created_by ? html` <span class="muted small">${tx('scr.by', { user: c.created_by })}</span>` : ''}</td></tr>`)}</tbody></table></div>`
+        : html`<p class="muted">${tx('ch.none_yet')}</p>`)}`;
+    return send(reply, s, shell(s, tx('sql.tool.charts'), [[tx('rail.sql_workshop'), `${BASE}/sql`], [tx('sql.tool.charts')]], main, 'sql'));
   });
 
   // one chart: drawn, with its settings
@@ -116,26 +120,27 @@ export async function sqlChartRoutes(app: FastifyInstance) {
     const ch = /^\d{1,9}$/.test(String(req.params.id)) ? await owner.one<SavedChart>('select * from meta.sql_chart where id = $1 and workspace_id = $2', [req.params.id, currentWorkspace(s)]) : undefined;
     if (!ch) return reply.code(404).send('Not found');
     const card = await chartCard(s, ch, true);
+    const tx = tr(s);
     let controls: Raw | '' = '';
     try {
       const r = await runChart(s, ch.sql);
       const spec = chartSpec(r.columns, r.numeric, { kind: ch.kind, label: ch.label_col, values: ch.value_cols });
-      if (spec) controls = chartControls(r.columns, spec, 'sch');
+      if (spec) controls = chartControls(r.columns, spec, 'sch', tx);
     } catch {
       controls = '';
     }
     const main = html`<h1 class="u-mb1">${ch.name}</h1>${workshopTabs('charts', s)}${style(req.cspNonce, card.css)}
       <div class="ch-view">${card.body}</div>
       <form method="post" action="${BASE}/sql/charts/${ch.id}" class="ch-edit">${csrf(s)}
-        <div class="field"><label class="label" for="ch-name">Name</label><input id="ch-name" name="name" value="${ch.name}" maxlength="120" required></div>
+        <div class="field"><label class="label" for="ch-name">${tx('scr.name')}</label><input id="ch-name" name="name" value="${ch.name}" maxlength="120" required></div>
         ${controls}
-        <label class="check"><input type="checkbox" name="on_dashboard"${ch.on_dashboard ? raw(' checked') : ''}> On the Charts dashboard</label>
-        <details class="u-mt1"><summary>The query</summary><pre class="source" data-code-view="sql" tabindex="0" aria-label="The query">${ch.sql}</pre></details>
-        <div class="buttons"><button class="btn btn-hot" name="action" value="save">${icon('save')} Save</button>
-          <button class="btn" name="action" value="worksheet">${icon('code')} Open in the worksheet</button>
-          <button class="btn btn-danger" name="action" value="delete" data-confirm="Delete the chart ${ch.name}?">${icon('trash')} Delete</button></div>
+        <label class="check"><input type="checkbox" name="on_dashboard"${ch.on_dashboard ? raw(' checked') : ''}> ${tx('ch.on_dashboard')}</label>
+        <details class="u-mt1"><summary>${tx('ch.query')}</summary><pre class="source" data-code-view="sql" tabindex="0" aria-label="${tx('ch.query')}">${ch.sql}</pre></details>
+        <div class="buttons"><button class="btn btn-hot" name="action" value="save">${icon('save')} ${tx('scr.save')}</button>
+          <button class="btn" name="action" value="worksheet">${icon('code')} ${tx('ch.open_worksheet')}</button>
+          <button class="btn btn-danger" name="action" value="delete" data-confirm="${tx('ch.delete_confirm', { name: ch.name })}">${icon('trash')} ${tx('scr.delete')}</button></div>
       </form>`;
-    return send(reply, s, shell(s, ch.name, [['SQL Workshop', `${BASE}/sql`], ['Charts', `${BASE}/sql/charts`], [ch.name]], main, 'sql'));
+    return send(reply, s, shell(s, ch.name, [[tx('rail.sql_workshop'), `${BASE}/sql`], [tx('sql.tool.charts'), `${BASE}/sql/charts`], [ch.name]], main, 'sql'));
   });
 
   // save a chart from the worksheet (a new one), or change, open or delete a saved one
@@ -144,6 +149,7 @@ export async function sqlChartRoutes(app: FastifyInstance) {
     if (!s) return;
     const b = req.body ?? {};
     const ws = currentWorkspace(s);
+    const tx = tr(s);
     const id = req.params?.id;
     const name = String(b.name ?? b.chart_name ?? '').trim();
     const asked = askedSpec(b);
@@ -153,7 +159,7 @@ export async function sqlChartRoutes(app: FastifyInstance) {
       if (!ch) return reply.code(404).send('Not found');
       if (b.action === 'delete') {
         await owner.query('delete from meta.sql_chart where id = $1', [ch.id]);
-        flash(s, `Deleted the chart ${ch.name}.`);
+        flash(s, tx('ch.deleted', { name: ch.name }));
         return back(reply, s, `${BASE}/sql/charts`);
       }
       if (b.action === 'worksheet') {
@@ -161,7 +167,7 @@ export async function sqlChartRoutes(app: FastifyInstance) {
         return back(reply, s, `${BASE}/sql/worksheet`);
       }
       if (!name || name.length > 120) {
-        flash(s, 'A chart needs a name (at most 120 characters).', 'error');
+        flash(s, tx('ch.err.name'), 'error');
         return back(reply, s, `${BASE}/sql/charts/${ch.id}`);
       }
       try {
@@ -169,32 +175,32 @@ export async function sqlChartRoutes(app: FastifyInstance) {
           [ch.id, name, kind, asked.label ?? ch.label_col, asked.values?.length ? asked.values : ch.value_cols, b.on_dashboard === 'on']);
       } catch (e) {
         if ((e as { code?: string }).code !== '23505') throw e;
-        flash(s, `A chart named “${name}” exists already.`, 'error');
+        flash(s, tx('ch.err.exists', { name }), 'error');
         return back(reply, s, `${BASE}/sql/charts/${ch.id}`);
       }
-      flash(s, `Saved the chart ${name}.`);
+      flash(s, tx('ch.saved', { name }));
       return back(reply, s, `${BASE}/sql/charts/${ch.id}`);
     }
     let sql = '';
     try {
       sql = unloadStatement(String(b.chart_sql ?? ''));
     } catch {
-      flash(s, 'Only a chart of one SELECT can be saved.', 'error');
+      flash(s, tx('ch.err.select'), 'error');
       return back(reply, s, `${BASE}/sql/worksheet`);
     }
     if (!name || name.length > 120) {
-      flash(s, 'Name the chart to save it (at most 120 characters).', 'error');
+      flash(s, tx('ch.err.name_new'), 'error');
       return back(reply, s, `${BASE}/sql/worksheet`);
     }
     try {
       const r = await owner.one<{ id: number }>(
         `insert into meta.sql_chart (workspace_id, name, sql, kind, label_col, value_cols, created_by) values ($1, $2, $3, $4, $5, $6, $7) returning id`,
         [ws, name, sql, kind, asked.label ?? '', asked.values ?? [], s.username]);
-      flash(s, `Saved the chart ${name}: it is on the Charts dashboard.`);
+      flash(s, tx('ch.saved_new', { name }));
       return back(reply, s, `${BASE}/sql/charts/${r!.id}`);
     } catch (e) {
       if ((e as { code?: string }).code !== '23505') throw e;
-      flash(s, `A chart named “${name}” exists already.`, 'error');
+      flash(s, tx('ch.err.exists', { name }), 'error');
       return back(reply, s, `${BASE}/sql/worksheet`);
     }
   };