localewarden 0.2.0 → 0.3.0

package/dist/ui/data.js

@@ -0,0 +1,178 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { groupsOf } from '../config.js';
+import { listFiles } from '../engine/sources.js';
+import { detectFormat, flatten, isArbMetadata, parseDoc, readText, serializeDoc, stringLeaves, writeText, } from '../files.js';
+import { Scope } from '../scope.js';
+import { reviewId, State } from '../state.js';
+import { withLock } from '../lock.js';
+import { hash, today } from '../util.js';
+const stateOf = (config) => new State(path.join(config.root, config.stateDir));
+const groupByName = (config, name) => {
+    const groups = groupsOf(config);
+    const group = name ? groups.find(g => g.name === name) : groups[0];
+    if (!group)
+        throw new Error(`Unknown group "${name}".`);
+    return group;
+};
+const readFlat = (root, rel) => {
+    const text = readText(path.join(root, rel));
+    if (text === null)
+        return new Map();
+    try {
+        return flatten(parseDoc(rel, text));
+    }
+    catch {
+        return new Map();
+    }
+};
+function sourceStrings(group, file) {
+    const rel = file.pathFor(group.sourceLanguage);
+    const text = readText(path.join(group.root, rel));
+    if (text === null)
+        return [];
+    try {
+        return stringLeaves(parseDoc(rel, text));
+    }
+    catch {
+        return [];
+    }
+}
+/** Per group and language: strings, translated strings and hand edits waiting for review. */
+export function status(config, plugins) {
+    const state = stateOf(config);
+    const pending = Object.entries(state.review).filter(([, e]) => e.status === 'pending').map(([id]) => id);
+    const groups = groupsOf(config).map(group => {
+        const scope = new Scope(group);
+        const files = listFiles(group, scope, plugins);
+        const languages = group.targetLanguages.map(lang => {
+            let strings = 0;
+            let translated = 0;
+            for (const file of files) {
+                const leaves = sourceStrings(group, file).filter(l => l.value.trim() !== '' && !scope.isLiteral(l.key, l.value));
+                const target = readFlat(group.root, file.pathFor(lang));
+                strings += leaves.length;
+                translated += leaves.filter(l => (target.get(l.key) ?? '').trim() !== '').length;
+            }
+            const pendingReview = pending.filter(id => id.startsWith(`${lang}|`) && files.some(f => id.includes(`|${f.id}#`))).length;
+            return { lang, strings, translated, pendingReview };
+        });
+        return { name: group.name, files: files.length, sourceLanguage: group.sourceLanguage, languages };
+    });
+    let usage = null;
+    try {
+        const data = JSON.parse(fs.readFileSync(path.join(config.root, config.stateDir, 'usage.json'), 'utf8'));
+        // Usage is per UTC day: yesterday's numbers are not today's.
+        usage = data?.date === today() ? data : { date: today(), tokens: 0, requests: 0 };
+    }
+    catch {
+        // no usage recorded yet
+    }
+    return { groups, usage, limits: { maxTokensPerRun: config.maxTokensPerRun, dailyTokenBudget: config.dailyTokenBudget ?? null } };
+}
+/** Strings of a group in one language, filtered by a search text (key, source or translation). */
+export function strings(config, plugins, query) {
+    const group = groupByName(config, query.group);
+    if (!group.targetLanguages.includes(query.lang))
+        throw new Error(`"${query.lang}" is not a target language of this group.`);
+    const scope = new Scope(group);
+    const state = stateOf(config);
+    const needle = query.q?.toLowerCase().trim();
+    const rows = [];
+    for (const file of listFiles(group, scope, plugins)) {
+        const target = readFlat(group.root, file.pathFor(query.lang));
+        const targetRel = file.pathFor(query.lang);
+        for (const leaf of sourceStrings(group, file)) {
+            if (leaf.value.trim() === '')
+                continue;
+            const text = target.get(leaf.key) ?? null;
+            const review = state.review[reviewId(query.lang, file.id, leaf.key)];
+            const status = isArbMetadata(targetRel, leaf.key) || scope.isLiteral(leaf.key, leaf.value)
+                ? 'not-text'
+                : text === null || text.trim() === ''
+                    ? 'missing'
+                    : review?.status === 'pending'
+                        ? 'pending-review'
+                        : review?.status === 'approved'
+                            ? 'approved'
+                            : 'translated';
+            if (query.only && status !== query.only)
+                continue;
+            if (needle && ![leaf.key, leaf.value, text ?? ''].some(v => v.toLowerCase().includes(needle)))
+                continue;
+            rows.push({ group: group.name, file: file.id, key: leaf.key, source: leaf.value, text, status });
+        }
+    }
+    const limit = Math.min(Math.max(query.limit ?? 200, 1), 1000);
+    return { rows: rows.slice(0, limit), total: rows.length };
+}
+const UNSAFE_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+/**
+ * Sets one string in a target document. Missing objects are created empty; missing arrays
+ * and array items are filled from the source document (as a run would), never with nulls.
+ */
+function setPath(doc, segments, value, source) {
+    if (segments.some(s => typeof s === 'string' && UNSAFE_KEYS.has(s)))
+        throw new Error('Unsupported key.');
+    let node = doc;
+    let src = source;
+    for (const [i, segment] of segments.slice(0, -1).entries()) {
+        const srcChild = src && typeof src === 'object' ? src[segment] : undefined;
+        const current = node[segment];
+        if (current === undefined || current === null || typeof current !== 'object') {
+            node[segment] = Array.isArray(srcChild) ? structuredClone(srcChild) : typeof segments[i + 1] === 'number' ? [] : {};
+        }
+        else if (Array.isArray(current) && Array.isArray(srcChild)) {
+            for (let j = 0; j < srcChild.length; j++)
+                if (current[j] === undefined || current[j] === null)
+                    current[j] = structuredClone(srcChild[j]);
+        }
+        node = node[segment];
+        src = srcChild;
+    }
+    node[segments[segments.length - 1]] = value;
+}
+/**
+ * Saves a translation edited in the interface. It counts as checked by a person: it is
+ * approved on the review list, so runs leave it alone and the check skips its warnings.
+ */
+export function editString(config, plugins, edit) {
+    const group = groupByName(config, edit.group);
+    if (!group.targetLanguages.includes(edit.lang))
+        throw new Error(`"${edit.lang}" is not a target language of this group.`);
+    if (typeof edit.value !== 'string')
+        throw new Error('value must be a string.');
+    // Only files of this group: the interface can never write anywhere else.
+    const file = listFiles(group, new Scope(group), plugins).find(f => f.id === edit.file);
+    if (!file)
+        throw new Error(`Unknown file "${edit.file}".`);
+    const leaf = sourceStrings(group, file).find(l => l.key === edit.key);
+    if (!leaf)
+        throw new Error(`Unknown key "${edit.key}".`);
+    return withLock(path.join(config.root, config.stateDir), () => writeEdit(config, group, file, leaf, edit));
+}
+function writeEdit(config, group, file, leaf, edit) {
+    const rel = file.pathFor(edit.lang);
+    const full = path.join(group.root, rel);
+    if (!path.resolve(full).startsWith(path.resolve(group.root) + path.sep))
+        throw new Error('Path outside the project.');
+    const text = readText(full);
+    const sourceText = readText(path.join(group.root, file.pathFor(group.sourceLanguage)));
+    const sourceDoc = sourceText === null ? {} : parseDoc(file.pathFor(group.sourceLanguage), sourceText);
+    const doc = text === null ? {} : parseDoc(rel, text);
+    setPath(doc, leaf.path, edit.value, sourceDoc);
+    const out = serializeDoc(rel, doc, detectFormat(text ?? sourceText));
+    if (out !== null)
+        writeText(full, out);
+    const state = stateOf(config);
+    state.set(edit.lang, file.id, edit.key, leaf.value, edit.value, false);
+    state.review[reviewId(edit.lang, file.id, edit.key)] = {
+        status: 'approved',
+        reason: 'approved-by-hand',
+        file: rel,
+        since: today(),
+        valueHash: hash(edit.value),
+    };
+    state.save();
+    return { group: group.name, file: file.id, key: edit.key, source: leaf.value, text: edit.value, status: 'approved' };
+}

package/dist/ui/page.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The interface page: one HTML document with inline CSS and JS, no dependencies. All data is
+ * inserted with textContent (translations contain HTML; it must never be interpreted here).
+ */
+export declare const PAGE = "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>localewarden</title>\n<style>\n:root { --bg:#f7f7f5; --panel:#fff; --text:#1d1f23; --muted:#646a73; --line:#e3e3df; --accent:#1f7a52; --accent-weak:#e4f3eb; --warn:#9a6700; --warn-weak:#fff4d6; --err:#b42318; --err-weak:#fde8e7; }\n@media (prefers-color-scheme: dark) { :root { --bg:#111316; --panel:#181b20; --text:#e6e8eb; --muted:#9aa1ab; --line:#2a2f37; --accent:#4cc38a; --accent-weak:#163325; --warn:#e3b341; --warn-weak:#33290f; --err:#ff7b72; --err-weak:#3a1717; } }\n* { box-sizing: border-box; }\nbody { margin:0; font:14px/1.45 -apple-system, system-ui, \"Segoe UI\", sans-serif; background:var(--bg); color:var(--text); }\nheader { display:flex; align-items:center; gap:24px; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; flex-wrap:wrap; }\nheader h1 { font-size:16px; margin:0; }\nnav { display:flex; gap:4px; flex-wrap:wrap; }\nnav button { border:0; background:none; color:var(--muted); padding:6px 10px; border-radius:6px; cursor:pointer; font:inherit; }\nnav button[aria-selected=true] { background:var(--accent-weak); color:var(--accent); font-weight:600; }\nmain { padding:20px; max-width:1200px; margin:0 auto; }\nsection[hidden] { display:none; }\n.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }\n.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }\nselect, input, textarea, .btn { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:6px 8px; }\n.btn { cursor:pointer; }\n.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }\n.btn:disabled { opacity:.5; cursor:default; }\ntable { width:100%; border-collapse:collapse; }\nth, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }\nth { color:var(--muted); font-weight:500; font-size:12px; }\ntd.num { text-align:right; font-variant-numeric:tabular-nums; }\n.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; min-width:80px; }\n.bar > i { display:block; height:100%; background:var(--accent); }\n.tag { display:inline-block; padding:1px 7px; border-radius:10px; font-size:12px; background:var(--line); color:var(--muted); white-space:nowrap; }\n.tag.missing, .tag.error { background:var(--err-weak); color:var(--err); }\n.tag.pending-review, .tag.warning { background:var(--warn-weak); color:var(--warn); }\n.tag.approved, .tag.translated { background:var(--accent-weak); color:var(--accent); }\n.text { white-space:pre-wrap; word-break:break-word; max-width:460px; }\n.muted { color:var(--muted); }\ntextarea { width:100%; min-height:70px; }\npre.log { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px; max-height:420px; overflow:auto; white-space:pre-wrap; font-size:12px; }\n.error-box { color:var(--err); }\ndetails.panel > summary { cursor:pointer; font-weight:600; display:flex; gap:12px; align-items:center; list-style:none; }\ndetails.panel > summary::-webkit-details-marker { display:none; }\ndetails.panel > summary::before { content:'\u25B8'; color:var(--muted); }\ndetails.panel[open] > summary::before { content:'\u25BE'; }\ndetails.panel > summary .bar { flex:0 0 160px; }\ndetails.panel table { margin-top:12px; }\ncol.c-lang { width:90px; } col.c-num { width:130px; } col.c-review { width:170px; }\n</style>\n</head>\n<body>\n<header>\n  <h1>localewarden</h1>\n  <nav role=\"tablist\">\n    <button role=\"tab\" data-tab=\"overview\" aria-selected=\"true\">Overview</button>\n    <button role=\"tab\" data-tab=\"strings\" aria-selected=\"false\">Strings</button>\n    <button role=\"tab\" data-tab=\"findings\" aria-selected=\"false\">Check</button>\n    <button role=\"tab\" data-tab=\"review\" aria-selected=\"false\">Review</button>\n    <button role=\"tab\" data-tab=\"run\" aria-selected=\"false\">Run</button>\n  </nav>\n  <span id=\"busy\" class=\"muted\"></span>\n</header>\n<main>\n  <section id=\"overview\">\n    <div class=\"panel\"><div id=\"budget\" class=\"muted\"></div></div>\n    <div id=\"groups\"></div>\n  </section>\n\n  <section id=\"strings\" hidden>\n    <div class=\"panel\">\n      <div class=\"row\">\n        <select id=\"s-group\" aria-label=\"Group\"></select>\n        <select id=\"s-lang\" aria-label=\"Language\"></select>\n        <select id=\"s-only\" aria-label=\"Show\">\n          <option value=\"\">All strings</option><option value=\"missing\">Missing</option><option value=\"pending-review\">Hand edits to review</option>\n        </select>\n        <input id=\"s-q\" placeholder=\"Search key, source or translation\" size=\"32\">\n        <button class=\"btn\" id=\"s-load\">Show</button>\n        <span id=\"s-count\" class=\"muted\"></span>\n      </div>\n      <table><thead><tr><th>Key</th><th>Source</th><th>Translation</th><th>Status</th><th></th></tr></thead><tbody id=\"s-rows\"></tbody></table>\n    </div>\n  </section>\n\n  <section id=\"findings\" hidden>\n    <div class=\"panel\">\n      <div class=\"row\">\n        <button class=\"btn primary\" id=\"f-run\">Run check</button>\n        <select id=\"f-lang\" aria-label=\"Language\"><option value=\"\">All languages</option></select>\n        <select id=\"f-check\" aria-label=\"Check\"><option value=\"\">All checks</option></select>\n        <span id=\"f-count\" class=\"muted\"></span>\n      </div>\n      <table><thead><tr><th>Lang</th><th>Check</th><th>Key</th><th>Translation</th><th>Note</th></tr></thead><tbody id=\"f-rows\"></tbody></table>\n    </div>\n  </section>\n\n  <section id=\"review\" hidden>\n    <div class=\"panel\">\n      <div class=\"row\"><label><input type=\"checkbox\" id=\"r-all\"> include approved</label><span id=\"r-count\" class=\"muted\"></span></div>\n      <table><thead><tr><th>Lang</th><th>Key</th><th>Translation</th><th>Reason</th><th></th></tr></thead><tbody id=\"r-rows\"></tbody></table>\n    </div>\n  </section>\n\n  <section id=\"run\" hidden>\n    <div class=\"panel\">\n      <div class=\"row\">\n        <select id=\"j-mode\" aria-label=\"Mode\">\n          <option value=\"dry-run\">Dry run (no API calls)</option>\n          <option value=\"translate\">Translate new and changed strings</option>\n          <option value=\"fix-flagged\">Fix what the check flags</option>\n        </select>\n        <select id=\"j-group\" aria-label=\"Group\"><option value=\"\">All groups</option></select>\n        <input id=\"j-langs\" placeholder=\"Languages, e.g. de,fr (empty = all)\" size=\"28\">\n        <button class=\"btn primary\" id=\"j-start\">Start</button>\n      </div>\n      <p class=\"muted\">Translating uses your API key and costs tokens. Start with a dry run.</p>\n      <pre class=\"log\" id=\"j-log\"></pre>\n      <div id=\"j-summary\"></div>\n    </div>\n  </section>\n</main>\n<script>\n(() => {\n  const token = new URLSearchParams(location.search).get('t') || '';\n  const $ = id => document.getElementById(id);\n  const el = (tag, props = {}, ...children) => {\n    const node = document.createElement(tag);\n    for (const [k, v] of Object.entries(props)) {\n      if (k === 'class') node.className = v; else if (k === 'text') node.textContent = v; else if (k.startsWith('on')) node.addEventListener(k.slice(2), v); else node.setAttribute(k, v);\n    }\n    for (const c of children) node.append(c);\n    return node;\n  };\n  async function api(path, body) {\n    const res = await fetch(path, { method: body ? 'POST' : 'GET', headers: { 'X-Localewarden-Token': token, 'Content-Type': 'application/json' }, body: body ? JSON.stringify(body) : undefined });\n    const data = await res.json();\n    if (!res.ok) throw new Error(data && data.error || res.statusText);\n    return data;\n  }\n  const report = e => alert(e.message);\n\n  // Tabs\n  for (const b of document.querySelectorAll('nav button')) b.addEventListener('click', () => {\n    for (const o of document.querySelectorAll('nav button')) o.setAttribute('aria-selected', String(o === b));\n    for (const s of document.querySelectorAll('main section')) s.hidden = s.id !== b.dataset.tab;\n    if (b.dataset.tab === 'review') loadReview().catch(report);\n  });\n\n  let status = null;\n  async function loadStatus() {\n    status = await api('/api/status');\n    const u = status.usage, l = status.limits;\n    $('budget').textContent = 'Tokens today: ' + (u ? u.tokens.toLocaleString('en') : 0) + (l.dailyTokenBudget ? ' of ' + l.dailyTokenBudget.toLocaleString('en') + ' (daily budget)' : '') + ' \u00B7 per run: ' + l.maxTokensPerRun.toLocaleString('en');\n    const box = $('groups'); box.replaceChildren();\n    for (const g of status.groups) {\n      const rows = g.languages.map(x => el('tr', {},\n        el('td', { text: x.lang }),\n        el('td', { class: 'num', text: x.translated + ' / ' + x.strings }),\n        el('td', {}, (() => { const b = el('div', { class: 'bar' }); b.append(el('i', { style: 'width:' + (x.strings ? Math.round(100 * x.translated / x.strings) : 100) + '%' })); return b; })()),\n        el('td', { class: 'num', text: x.pendingReview ? String(x.pendingReview) : '' })));\n      const total = g.languages.reduce((a, x) => a + x.strings, 0), done = g.languages.reduce((a, x) => a + x.translated, 0);\n      const pct = total ? Math.floor(1000 * done / total) / 10 : 100;\n      const pending = g.languages.reduce((a, x) => a + x.pendingReview, 0);\n      const bar = el('div', { class: 'bar' }); bar.append(el('i', { style: 'width:' + pct + '%' }));\n      const details = el('details', { class: 'panel' },\n        el('summary', {}, el('span', { text: (g.name || 'Project') }), bar, el('span', { class: 'muted', text: pct + '% \u00B7 ' + g.languages.length + ' languages \u00B7 ' + g.files + ' file(s) \u00B7 source ' + g.sourceLanguage + (pending ? ' \u00B7 ' + pending + ' to review' : '') })),\n        el('table', {}, el('colgroup', {}, el('col', { class: 'c-lang' }), el('col', { class: 'c-num' }), el('col', {}), el('col', { class: 'c-review' })),\n          el('thead', {}, el('tr', {}, el('th', { text: 'Language' }), el('th', { text: 'Translated' }), el('th', { text: '' }), el('th', { text: 'Hand edits to review' }))), el('tbody', {}, ...rows)));\n      if (status.groups.length === 1) details.open = true;\n      box.append(details);\n    }\n    const groupOptions = sel => { sel.replaceChildren(...status.groups.map((g, i) => el('option', { value: g.name || '', text: g.name || 'Project' }))); };\n    groupOptions($('s-group'));\n    $('j-group').replaceChildren(el('option', { value: '', text: 'All groups' }), ...status.groups.filter(g => g.name).map(g => el('option', { value: g.name, text: g.name })));\n    fillLangs();\n    const langs = [...new Set(status.groups.flatMap(g => g.languages.map(x => x.lang)))];\n    $('f-lang').replaceChildren(el('option', { value: '', text: 'All languages' }), ...langs.map(x => el('option', { value: x, text: x })));\n    $('busy').textContent = status.job && status.job.running ? 'Running: ' + status.job.kind : '';\n  }\n  function fillLangs() {\n    const g = status.groups.find(x => (x.name || '') === $('s-group').value) || status.groups[0];\n    $('s-lang').replaceChildren(...g.languages.map(x => el('option', { value: x.lang, text: x.lang })));\n  }\n  $('s-group').addEventListener('change', fillLangs);\n\n  // Strings\n  async function loadStrings() {\n    const p = new URLSearchParams({ group: $('s-group').value, lang: $('s-lang').value, q: $('s-q').value, only: $('s-only').value, limit: '300' });\n    const data = await api('/api/strings?' + p);\n    $('s-count').textContent = data.rows.length + ' of ' + data.total + ' shown';\n    $('s-rows').replaceChildren(...data.rows.map(r => {\n      const cell = el('td', { class: 'text', text: r.text ?? '' });\n      const edit = el('button', { class: 'btn', text: 'Edit' });\n      if (r.status === 'not-text') edit.disabled = true;\n      edit.addEventListener('click', () => {\n        const area = el('textarea', {}); area.value = r.text ?? '';\n        const save = el('button', { class: 'btn primary', text: 'Save' });\n        save.addEventListener('click', async () => {\n          try { const out = await api('/api/strings', { group: r.group, lang: $('s-lang').value, file: r.file, key: r.key, value: area.value }); cell.replaceChildren(document.createTextNode(out.text)); tag.className = 'tag approved'; tag.textContent = 'approved'; edit.disabled = false; }\n          catch (e) { report(e); }\n        });\n        cell.replaceChildren(area, save); edit.disabled = true;\n      });\n      const tag = el('span', { class: 'tag ' + r.status, text: r.status });\n      return el('tr', {}, el('td', { class: 'muted', text: r.key }), el('td', { class: 'text', text: r.source }), cell, el('td', {}, tag), el('td', {}, edit));\n    }));\n  }\n  $('s-load').addEventListener('click', () => loadStrings().catch(report));\n  $('s-q').addEventListener('keydown', e => { if (e.key === 'Enter') loadStrings().catch(report); });\n\n  // Findings\n  async function loadFindings() {\n    const p = new URLSearchParams({ lang: $('f-lang').value, check: $('f-check').value, limit: '300' });\n    const data = await api('/api/findings?' + p);\n    if (!data.checked) { $('f-count').textContent = 'Not checked yet.'; return; }\n    $('f-count').textContent = data.total + ' finding(s)' + (data.total > data.rows.length ? ', first ' + data.rows.length + ' shown' : '');\n    const checks = new Set([...$('f-check').options].map(o => o.value));\n    for (const r of data.rows) if (!checks.has(r.check)) { checks.add(r.check); $('f-check').append(el('option', { value: r.check, text: r.check })); }\n    $('f-rows').replaceChildren(...data.rows.map(r => el('tr', {}, el('td', { text: r.lang }), el('td', {}, el('span', { class: 'tag ' + r.severity, text: r.check })), el('td', { class: 'muted', text: r.key }), el('td', { class: 'text', text: r.text }), el('td', { class: 'text muted', text: r.note || '' }))));\n  }\n  $('f-run').addEventListener('click', async () => { try { await api('/api/check', {}); await follow(); await loadFindings(); } catch (e) { report(e); } });\n  $('f-lang').addEventListener('change', () => loadFindings().catch(report));\n  $('f-check').addEventListener('change', () => loadFindings().catch(report));\n\n  // Review\n  async function loadReview() {\n    const rows = await api('/api/review' + ($('r-all').checked ? '?all=1' : ''));\n    $('r-count').textContent = rows.length + ' entr' + (rows.length === 1 ? 'y' : 'ies');\n    $('r-rows').replaceChildren(...rows.map(r => {\n      const sel = r.lang + ':' + r.key;\n      const act = (action, label) => { const b = el('button', { class: 'btn', text: label }); b.addEventListener('click', async () => { try { await api('/api/review', { action, selectors: [sel] }); await loadReview(); } catch (e) { report(e); } }); return b; };\n      return el('tr', {}, el('td', { text: r.lang }), el('td', { class: 'muted', text: r.key }), el('td', { class: 'text', text: r.value ?? '' }),\n        el('td', {}, el('span', { class: 'tag ' + (r.status === 'pending' ? 'pending-review' : 'approved'), text: r.status + ' \u00B7 ' + r.reason })),\n        el('td', {}, ...(r.status === 'pending' ? [act('approve', 'Approve'), ' '] : []), act('release', 'Hand back')));\n    }));\n  }\n  $('r-all').addEventListener('change', () => loadReview().catch(report));\n\n  // Runs\n  async function follow() {\n    let from = 0;\n    $('j-log').textContent = '';\n    for (;;) {\n      const job = await api('/api/job?from=' + from);\n      if (!job) return;\n      if (job.lines.length) { $('j-log').textContent += job.lines.join('\\n') + '\\n'; from = job.lineCount; $('j-log').scrollTop = 1e9; }\n      $('busy').textContent = job.running ? 'Running: ' + job.kind : '';\n      if (!job.running) {\n        if (job.error) $('j-summary').replaceChildren(el('p', { class: 'error-box', text: job.error }));\n        else if (job.summary) {\n          const s = job.summary;\n          const done = Object.entries(s.languages).map(([l, x]) => l + ': ' + (s.dryRun ? x.planned + ' to translate' : x.translated + ' translated, ' + x.revised + ' revised, ' + x.failed + ' failed')).join(' \u00B7 ');\n          $('j-summary').replaceChildren(el('p', { text: (s.dryRun ? 'Dry run. ' : '') + s.requests + ' request(s), ' + s.tokens.toLocaleString('en') + ' tokens, ' + s.filesWritten.length + ' file(s) written.' + (s.stopReason ? ' Stopped: ' + s.stopReason : '') }), el('p', { class: 'muted', text: done }));\n        }\n        await loadStatus();\n        return;\n      }\n      await new Promise(r => setTimeout(r, 1000));\n    }\n  }\n  $('j-start').addEventListener('click', async () => {\n    const mode = $('j-mode').value;\n    if (mode !== 'dry-run' && !confirm('This calls the API and costs tokens. Start?')) return;\n    try {\n      $('j-summary').replaceChildren();\n      await api('/api/run', { mode, groups: $('j-group').value ? [$('j-group').value] : [], languages: $('j-langs').value.split(',').map(s => s.trim()).filter(Boolean) });\n      await follow();\n    } catch (e) { report(e); }\n  });\n\n  loadStatus().catch(report);\n})();\n</script>\n</body>\n</html>";

package/dist/ui/page.js

@@ -0,0 +1,277 @@
+/**
+ * The interface page: one HTML document with inline CSS and JS, no dependencies. All data is
+ * inserted with textContent (translations contain HTML; it must never be interpreted here).
+ */
+export const PAGE = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>localewarden</title>
+<style>
+:root { --bg:#f7f7f5; --panel:#fff; --text:#1d1f23; --muted:#646a73; --line:#e3e3df; --accent:#1f7a52; --accent-weak:#e4f3eb; --warn:#9a6700; --warn-weak:#fff4d6; --err:#b42318; --err-weak:#fde8e7; }
+@media (prefers-color-scheme: dark) { :root { --bg:#111316; --panel:#181b20; --text:#e6e8eb; --muted:#9aa1ab; --line:#2a2f37; --accent:#4cc38a; --accent-weak:#163325; --warn:#e3b341; --warn-weak:#33290f; --err:#ff7b72; --err-weak:#3a1717; } }
+* { box-sizing: border-box; }
+body { margin:0; font:14px/1.45 -apple-system, system-ui, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
+header { display:flex; align-items:center; gap:24px; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; flex-wrap:wrap; }
+header h1 { font-size:16px; margin:0; }
+nav { display:flex; gap:4px; flex-wrap:wrap; }
+nav button { border:0; background:none; color:var(--muted); padding:6px 10px; border-radius:6px; cursor:pointer; font:inherit; }
+nav button[aria-selected=true] { background:var(--accent-weak); color:var(--accent); font-weight:600; }
+main { padding:20px; max-width:1200px; margin:0 auto; }
+section[hidden] { display:none; }
+.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
+.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
+select, input, textarea, .btn { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
+.btn { cursor:pointer; }
+.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
+.btn:disabled { opacity:.5; cursor:default; }
+table { width:100%; border-collapse:collapse; }
+th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
+th { color:var(--muted); font-weight:500; font-size:12px; }
+td.num { text-align:right; font-variant-numeric:tabular-nums; }
+.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; min-width:80px; }
+.bar > i { display:block; height:100%; background:var(--accent); }
+.tag { display:inline-block; padding:1px 7px; border-radius:10px; font-size:12px; background:var(--line); color:var(--muted); white-space:nowrap; }
+.tag.missing, .tag.error { background:var(--err-weak); color:var(--err); }
+.tag.pending-review, .tag.warning { background:var(--warn-weak); color:var(--warn); }
+.tag.approved, .tag.translated { background:var(--accent-weak); color:var(--accent); }
+.text { white-space:pre-wrap; word-break:break-word; max-width:460px; }
+.muted { color:var(--muted); }
+textarea { width:100%; min-height:70px; }
+pre.log { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px; max-height:420px; overflow:auto; white-space:pre-wrap; font-size:12px; }
+.error-box { color:var(--err); }
+details.panel > summary { cursor:pointer; font-weight:600; display:flex; gap:12px; align-items:center; list-style:none; }
+details.panel > summary::-webkit-details-marker { display:none; }
+details.panel > summary::before { content:'▸'; color:var(--muted); }
+details.panel[open] > summary::before { content:'▾'; }
+details.panel > summary .bar { flex:0 0 160px; }
+details.panel table { margin-top:12px; }
+col.c-lang { width:90px; } col.c-num { width:130px; } col.c-review { width:170px; }
+</style>
+</head>
+<body>
+<header>
+  <h1>localewarden</h1>
+  <nav role="tablist">
+    <button role="tab" data-tab="overview" aria-selected="true">Overview</button>
+    <button role="tab" data-tab="strings" aria-selected="false">Strings</button>
+    <button role="tab" data-tab="findings" aria-selected="false">Check</button>
+    <button role="tab" data-tab="review" aria-selected="false">Review</button>
+    <button role="tab" data-tab="run" aria-selected="false">Run</button>
+  </nav>
+  <span id="busy" class="muted"></span>
+</header>
+<main>
+  <section id="overview">
+    <div class="panel"><div id="budget" class="muted"></div></div>
+    <div id="groups"></div>
+  </section>
+
+  <section id="strings" hidden>
+    <div class="panel">
+      <div class="row">
+        <select id="s-group" aria-label="Group"></select>
+        <select id="s-lang" aria-label="Language"></select>
+        <select id="s-only" aria-label="Show">
+          <option value="">All strings</option><option value="missing">Missing</option><option value="pending-review">Hand edits to review</option>
+        </select>
+        <input id="s-q" placeholder="Search key, source or translation" size="32">
+        <button class="btn" id="s-load">Show</button>
+        <span id="s-count" class="muted"></span>
+      </div>
+      <table><thead><tr><th>Key</th><th>Source</th><th>Translation</th><th>Status</th><th></th></tr></thead><tbody id="s-rows"></tbody></table>
+    </div>
+  </section>
+
+  <section id="findings" hidden>
+    <div class="panel">
+      <div class="row">
+        <button class="btn primary" id="f-run">Run check</button>
+        <select id="f-lang" aria-label="Language"><option value="">All languages</option></select>
+        <select id="f-check" aria-label="Check"><option value="">All checks</option></select>
+        <span id="f-count" class="muted"></span>
+      </div>
+      <table><thead><tr><th>Lang</th><th>Check</th><th>Key</th><th>Translation</th><th>Note</th></tr></thead><tbody id="f-rows"></tbody></table>
+    </div>
+  </section>
+
+  <section id="review" hidden>
+    <div class="panel">
+      <div class="row"><label><input type="checkbox" id="r-all"> include approved</label><span id="r-count" class="muted"></span></div>
+      <table><thead><tr><th>Lang</th><th>Key</th><th>Translation</th><th>Reason</th><th></th></tr></thead><tbody id="r-rows"></tbody></table>
+    </div>
+  </section>
+
+  <section id="run" hidden>
+    <div class="panel">
+      <div class="row">
+        <select id="j-mode" aria-label="Mode">
+          <option value="dry-run">Dry run (no API calls)</option>
+          <option value="translate">Translate new and changed strings</option>
+          <option value="fix-flagged">Fix what the check flags</option>
+        </select>
+        <select id="j-group" aria-label="Group"><option value="">All groups</option></select>
+        <input id="j-langs" placeholder="Languages, e.g. de,fr (empty = all)" size="28">
+        <button class="btn primary" id="j-start">Start</button>
+      </div>
+      <p class="muted">Translating uses your API key and costs tokens. Start with a dry run.</p>
+      <pre class="log" id="j-log"></pre>
+      <div id="j-summary"></div>
+    </div>
+  </section>
+</main>
+<script>
+(() => {
+  const token = new URLSearchParams(location.search).get('t') || '';
+  const $ = id => document.getElementById(id);
+  const el = (tag, props = {}, ...children) => {
+    const node = document.createElement(tag);
+    for (const [k, v] of Object.entries(props)) {
+      if (k === 'class') node.className = v; else if (k === 'text') node.textContent = v; else if (k.startsWith('on')) node.addEventListener(k.slice(2), v); else node.setAttribute(k, v);
+    }
+    for (const c of children) node.append(c);
+    return node;
+  };
+  async function api(path, body) {
+    const res = await fetch(path, { method: body ? 'POST' : 'GET', headers: { 'X-Localewarden-Token': token, 'Content-Type': 'application/json' }, body: body ? JSON.stringify(body) : undefined });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data && data.error || res.statusText);
+    return data;
+  }
+  const report = e => alert(e.message);
+
+  // Tabs
+  for (const b of document.querySelectorAll('nav button')) b.addEventListener('click', () => {
+    for (const o of document.querySelectorAll('nav button')) o.setAttribute('aria-selected', String(o === b));
+    for (const s of document.querySelectorAll('main section')) s.hidden = s.id !== b.dataset.tab;
+    if (b.dataset.tab === 'review') loadReview().catch(report);
+  });
+
+  let status = null;
+  async function loadStatus() {
+    status = await api('/api/status');
+    const u = status.usage, l = status.limits;
+    $('budget').textContent = 'Tokens today: ' + (u ? u.tokens.toLocaleString('en') : 0) + (l.dailyTokenBudget ? ' of ' + l.dailyTokenBudget.toLocaleString('en') + ' (daily budget)' : '') + ' · per run: ' + l.maxTokensPerRun.toLocaleString('en');
+    const box = $('groups'); box.replaceChildren();
+    for (const g of status.groups) {
+      const rows = g.languages.map(x => el('tr', {},
+        el('td', { text: x.lang }),
+        el('td', { class: 'num', text: x.translated + ' / ' + x.strings }),
+        el('td', {}, (() => { const b = el('div', { class: 'bar' }); b.append(el('i', { style: 'width:' + (x.strings ? Math.round(100 * x.translated / x.strings) : 100) + '%' })); return b; })()),
+        el('td', { class: 'num', text: x.pendingReview ? String(x.pendingReview) : '' })));
+      const total = g.languages.reduce((a, x) => a + x.strings, 0), done = g.languages.reduce((a, x) => a + x.translated, 0);
+      const pct = total ? Math.floor(1000 * done / total) / 10 : 100;
+      const pending = g.languages.reduce((a, x) => a + x.pendingReview, 0);
+      const bar = el('div', { class: 'bar' }); bar.append(el('i', { style: 'width:' + pct + '%' }));
+      const details = el('details', { class: 'panel' },
+        el('summary', {}, el('span', { text: (g.name || 'Project') }), bar, el('span', { class: 'muted', text: pct + '% · ' + g.languages.length + ' languages · ' + g.files + ' file(s) · source ' + g.sourceLanguage + (pending ? ' · ' + pending + ' to review' : '') })),
+        el('table', {}, el('colgroup', {}, el('col', { class: 'c-lang' }), el('col', { class: 'c-num' }), el('col', {}), el('col', { class: 'c-review' })),
+          el('thead', {}, el('tr', {}, el('th', { text: 'Language' }), el('th', { text: 'Translated' }), el('th', { text: '' }), el('th', { text: 'Hand edits to review' }))), el('tbody', {}, ...rows)));
+      if (status.groups.length === 1) details.open = true;
+      box.append(details);
+    }
+    const groupOptions = sel => { sel.replaceChildren(...status.groups.map((g, i) => el('option', { value: g.name || '', text: g.name || 'Project' }))); };
+    groupOptions($('s-group'));
+    $('j-group').replaceChildren(el('option', { value: '', text: 'All groups' }), ...status.groups.filter(g => g.name).map(g => el('option', { value: g.name, text: g.name })));
+    fillLangs();
+    const langs = [...new Set(status.groups.flatMap(g => g.languages.map(x => x.lang)))];
+    $('f-lang').replaceChildren(el('option', { value: '', text: 'All languages' }), ...langs.map(x => el('option', { value: x, text: x })));
+    $('busy').textContent = status.job && status.job.running ? 'Running: ' + status.job.kind : '';
+  }
+  function fillLangs() {
+    const g = status.groups.find(x => (x.name || '') === $('s-group').value) || status.groups[0];
+    $('s-lang').replaceChildren(...g.languages.map(x => el('option', { value: x.lang, text: x.lang })));
+  }
+  $('s-group').addEventListener('change', fillLangs);
+
+  // Strings
+  async function loadStrings() {
+    const p = new URLSearchParams({ group: $('s-group').value, lang: $('s-lang').value, q: $('s-q').value, only: $('s-only').value, limit: '300' });
+    const data = await api('/api/strings?' + p);
+    $('s-count').textContent = data.rows.length + ' of ' + data.total + ' shown';
+    $('s-rows').replaceChildren(...data.rows.map(r => {
+      const cell = el('td', { class: 'text', text: r.text ?? '' });
+      const edit = el('button', { class: 'btn', text: 'Edit' });
+      if (r.status === 'not-text') edit.disabled = true;
+      edit.addEventListener('click', () => {
+        const area = el('textarea', {}); area.value = r.text ?? '';
+        const save = el('button', { class: 'btn primary', text: 'Save' });
+        save.addEventListener('click', async () => {
+          try { const out = await api('/api/strings', { group: r.group, lang: $('s-lang').value, file: r.file, key: r.key, value: area.value }); cell.replaceChildren(document.createTextNode(out.text)); tag.className = 'tag approved'; tag.textContent = 'approved'; edit.disabled = false; }
+          catch (e) { report(e); }
+        });
+        cell.replaceChildren(area, save); edit.disabled = true;
+      });
+      const tag = el('span', { class: 'tag ' + r.status, text: r.status });
+      return el('tr', {}, el('td', { class: 'muted', text: r.key }), el('td', { class: 'text', text: r.source }), cell, el('td', {}, tag), el('td', {}, edit));
+    }));
+  }
+  $('s-load').addEventListener('click', () => loadStrings().catch(report));
+  $('s-q').addEventListener('keydown', e => { if (e.key === 'Enter') loadStrings().catch(report); });
+
+  // Findings
+  async function loadFindings() {
+    const p = new URLSearchParams({ lang: $('f-lang').value, check: $('f-check').value, limit: '300' });
+    const data = await api('/api/findings?' + p);
+    if (!data.checked) { $('f-count').textContent = 'Not checked yet.'; return; }
+    $('f-count').textContent = data.total + ' finding(s)' + (data.total > data.rows.length ? ', first ' + data.rows.length + ' shown' : '');
+    const checks = new Set([...$('f-check').options].map(o => o.value));
+    for (const r of data.rows) if (!checks.has(r.check)) { checks.add(r.check); $('f-check').append(el('option', { value: r.check, text: r.check })); }
+    $('f-rows').replaceChildren(...data.rows.map(r => el('tr', {}, el('td', { text: r.lang }), el('td', {}, el('span', { class: 'tag ' + r.severity, text: r.check })), el('td', { class: 'muted', text: r.key }), el('td', { class: 'text', text: r.text }), el('td', { class: 'text muted', text: r.note || '' }))));
+  }
+  $('f-run').addEventListener('click', async () => { try { await api('/api/check', {}); await follow(); await loadFindings(); } catch (e) { report(e); } });
+  $('f-lang').addEventListener('change', () => loadFindings().catch(report));
+  $('f-check').addEventListener('change', () => loadFindings().catch(report));
+
+  // Review
+  async function loadReview() {
+    const rows = await api('/api/review' + ($('r-all').checked ? '?all=1' : ''));
+    $('r-count').textContent = rows.length + ' entr' + (rows.length === 1 ? 'y' : 'ies');
+    $('r-rows').replaceChildren(...rows.map(r => {
+      const sel = r.lang + ':' + r.key;
+      const act = (action, label) => { const b = el('button', { class: 'btn', text: label }); b.addEventListener('click', async () => { try { await api('/api/review', { action, selectors: [sel] }); await loadReview(); } catch (e) { report(e); } }); return b; };
+      return el('tr', {}, el('td', { text: r.lang }), el('td', { class: 'muted', text: r.key }), el('td', { class: 'text', text: r.value ?? '' }),
+        el('td', {}, el('span', { class: 'tag ' + (r.status === 'pending' ? 'pending-review' : 'approved'), text: r.status + ' · ' + r.reason })),
+        el('td', {}, ...(r.status === 'pending' ? [act('approve', 'Approve'), ' '] : []), act('release', 'Hand back')));
+    }));
+  }
+  $('r-all').addEventListener('change', () => loadReview().catch(report));
+
+  // Runs
+  async function follow() {
+    let from = 0;
+    $('j-log').textContent = '';
+    for (;;) {
+      const job = await api('/api/job?from=' + from);
+      if (!job) return;
+      if (job.lines.length) { $('j-log').textContent += job.lines.join('\\n') + '\\n'; from = job.lineCount; $('j-log').scrollTop = 1e9; }
+      $('busy').textContent = job.running ? 'Running: ' + job.kind : '';
+      if (!job.running) {
+        if (job.error) $('j-summary').replaceChildren(el('p', { class: 'error-box', text: job.error }));
+        else if (job.summary) {
+          const s = job.summary;
+          const done = Object.entries(s.languages).map(([l, x]) => l + ': ' + (s.dryRun ? x.planned + ' to translate' : x.translated + ' translated, ' + x.revised + ' revised, ' + x.failed + ' failed')).join(' · ');
+          $('j-summary').replaceChildren(el('p', { text: (s.dryRun ? 'Dry run. ' : '') + s.requests + ' request(s), ' + s.tokens.toLocaleString('en') + ' tokens, ' + s.filesWritten.length + ' file(s) written.' + (s.stopReason ? ' Stopped: ' + s.stopReason : '') }), el('p', { class: 'muted', text: done }));
+        }
+        await loadStatus();
+        return;
+      }
+      await new Promise(r => setTimeout(r, 1000));
+    }
+  }
+  $('j-start').addEventListener('click', async () => {
+    const mode = $('j-mode').value;
+    if (mode !== 'dry-run' && !confirm('This calls the API and costs tokens. Start?')) return;
+    try {
+      $('j-summary').replaceChildren();
+      await api('/api/run', { mode, groups: $('j-group').value ? [$('j-group').value] : [], languages: $('j-langs').value.split(',').map(s => s.trim()).filter(Boolean) });
+      await follow();
+    } catch (e) { report(e); }
+  });
+
+  loadStatus().catch(report);
+})();
+</script>
+</body>
+</html>`;

package/dist/ui/server.d.ts

@@ -0,0 +1,24 @@
+import type { Config } from '../config.js';
+import type { Model } from '../llm.js';
+import { type Plugin } from '../plugins.js';
+export interface UiOptions {
+    /** Port on 127.0.0.1; 0 picks a free one. Default 4848. */
+    port?: number;
+    plugins?: Plugin[];
+    /** Model for runs started from the interface (tests). */
+    model?: Model;
+    /** Access token; random by default. */
+    token?: string;
+}
+export interface UiServer {
+    url: string;
+    token: string;
+    close(): Promise<void>;
+}
+/**
+ * Local web interface: overview, strings with inline editing, check findings, review list,
+ * and runs with live log. Listens on 127.0.0.1 only; every request needs the random token
+ * from the printed URL (page) or the X-Localewarden-Token header (API), and the Host header
+ * must be the local address, which blocks other websites and DNS rebinding.
+ */
+export declare function startUi(config: Config, options?: UiOptions): Promise<UiServer>;