@agentwhy/cli 0.0.0-dev

package/dist/report/render/report-page/fix-wizard-script.js

@@ -0,0 +1,269 @@
+/**
+ * The Fix it wizard's steps (the report page spec P18-P25): one step shown at a time; on the first, "Skip for now", which
+ * moves to the next file and writes nothing (F52, O13), beside the main button "I did it", which goes on once every row
+ * is ticked and, before that, points at the rows still to do; the path copied, the answer to "What's in this file?"
+ * drawing its checklist (F49), and a finished file drawn done on the list.
+ *
+ * What it writes (P42, P43): Done and the quiet skip send a mark, and **Yes, protect it** a rule, to the server the page
+ * was loaded from - only where the page says it is served. The file is drawn done, or the rule drawn in place, after
+ * the server says so; a refusal is shown in the server's words and changes nothing. A page that is not served, or
+ * whose server has stopped, shows the command that does the same instead. A shared copy writes nothing and shows no
+ * command (P46). Words come from the page, in every language, never from here.
+ *
+ * A page that cannot know when it is written whether it will be served - To fix - says `auto`, and the address decides.
+ * There a note typed in the last step goes with the mark, the handed-over command carries the run's range, and a
+ * written mark is announced (`wizard-marked`) so the page can read itself again (to-fix spec T14, R60).
+ */
+export const FIX_WIZARD_SCRIPT = String.raw `
+(() => {
+  const words = document.getElementById('wizard-words');
+  const say = (key) => (words ? words.querySelector('[data-word="' + key + '"]').innerHTML : key);
+  const served = words !== null && (words.dataset.served === 'true' ||
+    (words.dataset.served === 'auto' && (location.protocol === 'http:' || location.protocol === 'https:')));
+
+  /** A path as a shell reads it back: in single quotes, with a quote inside closed and reopened. */
+  const quoted = (text) => "'" + text.split("'").join("'\\''") + "'";
+
+  /** reached: the server answered at all. A page that is not served never asks. */
+  const send = (route, body) => (!served
+    ? Promise.resolve({ reached: false, ok: false, message: '' })
+    : fetch(route, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+      .then((response) => response.json().then((answer) => ({ reached: true, ok: response.ok && answer.ok === true, message: String(answer.message || '') })))
+      .catch(() => ({ reached: false, ok: false, message: '' })));
+
+  const handOver = (box, command) => {
+    box.querySelector('[data-command]').textContent = command;
+    box.querySelector('[data-copy]').setAttribute('data-copy', command);
+    box.hidden = false;
+  };
+
+  const copy = (button) => {
+    const text = button.getAttribute('data-copy');
+    const shown = () => { button.classList.add('wz-copied'); setTimeout(() => button.classList.remove('wz-copied'), 2000); };
+    if (text && navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(shown, () => {});
+  };
+
+  // P38: the rule is sent, and the window closes only once it is written; otherwise it says why, or what to run.
+  const protect = (button) => {
+    const dialog = button.closest('dialog');
+    const every = dialog.querySelector('[data-protect-every]');
+    const pattern = every && every.checked ? button.getAttribute('data-pattern-every') : button.getAttribute('data-pattern');
+    const reason = dialog.querySelector('[data-note-reason]');
+    const command = dialog.querySelector('[data-note-command]');
+    reason.hidden = true;
+    command.hidden = true;
+    const buttons = [...dialog.querySelectorAll('button')];
+    buttons.forEach((each) => { each.disabled = true; });
+    send('api/settings', { change: 'protect', pattern }).then((answer) => {
+      buttons.forEach((each) => { each.disabled = false; });
+      if (answer.ok) {
+        const at = button.getAttribute('data-protect');
+        document.querySelectorAll('[data-protect-open="' + at + '"]').forEach((open) => { open.hidden = true; open.style.display = 'none'; });
+        document.querySelectorAll('[data-protected="' + at + '"]').forEach((tag) => { tag.hidden = false; });
+        document.querySelectorAll('[data-file-key="' + at + '"]').forEach((row) => { row.dataset.prot = 'yes'; });
+        document.dispatchEvent(new CustomEvent('files-changed'));
+        dialog.close();
+      } else if (answer.reached) {
+        reason.textContent = answer.message;
+        reason.hidden = false;
+      } else {
+        handOver(command, 'agentwhy init --protect ' + quoted(pattern));
+      }
+    });
+  };
+
+  document.addEventListener('click', (event) => {
+    const copying = event.target.closest('[data-copy]');
+    if (copying) { copy(copying); return; }
+    const protecting = event.target.closest('[data-protect]');
+    if (protecting) protect(protecting);
+  });
+
+  const wizards = [...document.querySelectorAll('[data-wizard]')];
+  if (wizards.length === 0) return;
+
+  const state = new Map();
+  const stateOf = (wizard) => {
+    if (!state.has(wizard)) state.set(wizard, { step: 1, answer: null });
+    return state.get(wizard);
+  };
+
+  const scopeOf = (wizard) => (wizard.dataset.kind === 'keys'
+    ? wizard.querySelector('[data-step="1"]')
+    : wizard.querySelector('.wz-answered.wz-on [data-checklist]'));
+
+  const tickedAll = (scope) => {
+    const rows = scope ? scope.querySelectorAll('[data-checklist] .ck-row') : [];
+    return rows.length > 0 && [...rows].every((row) => row.classList.contains('ck-on'));
+  };
+
+  const draw = (wizard) => {
+    const s = stateOf(wizard);
+    wizard.querySelectorAll('.wz-step').forEach((step) => step.classList.toggle('wz-on', step.dataset.step === String(s.step)));
+    wizard.querySelectorAll('.st-step').forEach((item, at) => {
+      const n = at + 1;
+      const state = n < s.step || (n === 3 && s.step === 3) ? 'past' : n === s.step ? 'current' : 'future';
+      item.className = 'st-step st-' + state;
+      item.querySelector('.st-mark').textContent = state === 'past' ? '✓' : String(n);
+    });
+    const main = wizard.querySelector('[data-wz-next]');
+    const last = wizard.querySelector('[data-wz-last]');
+    const skip = wizard.querySelector('[data-wz-skip]');
+    const later = wizard.querySelector('[data-wz-later]');
+    const back = wizard.querySelector('[data-wz-back]');
+    const hint = wizard.querySelector('[data-wz-hint]');
+    back.hidden = s.step !== 2;
+    if (skip) skip.hidden = s.step !== 1;
+    later.hidden = s.step !== 1;
+    main.hidden = s.step === 3;
+    last.hidden = s.step !== 3;
+    if (s.step === 1) {
+      const all = tickedAll(scopeOf(wizard));
+      main.className = 'pill pill-lg wz-main js-only pill-primary' + (all ? '' : ' wz-wait');
+      main.innerHTML = say('wz.all');
+      if (all) hint.hidden = true;
+    } else if (s.step === 2) {
+      hint.hidden = true;
+      main.className = 'pill pill-lg wz-main js-only pill-mint';
+      main.innerHTML = say('wz.finish');
+    }
+  };
+
+  const markDone = (wizard) => {
+    const at = wizard.dataset.item;
+    const card = document.querySelector('.tc[data-item="' + at + '"]');
+    if (card && !card.classList.contains('tc-done')) {
+      card.classList.add('tc-done');
+      card.querySelector('.tc-check').textContent = '✓';
+    }
+    const done = document.querySelectorAll('.tc.tc-done').length;
+    const total = document.querySelectorAll('.tc[data-item]').length;
+    document.querySelectorAll('[data-done]').forEach((element) => { element.textContent = String(done); });
+    const fill = document.querySelector('[data-progress] .pg-fill');
+    if (fill) fill.style.width = (total === 0 ? 0 : Math.round((done / total) * 1000) / 10) + '%';
+    const track = document.querySelector('[data-progress] .pg-track');
+    if (track) track.setAttribute('aria-valuenow', String(done));
+    document.querySelectorAll('[data-files-fix="' + at + '"]').forEach((element) => { element.hidden = true; });
+    document.querySelectorAll('[data-files-fixed="' + at + '"]').forEach((element) => { element.hidden = false; });
+    document.querySelectorAll('[data-file-item="' + at + '"]').forEach((row) => {
+      row.dataset.group = 'fixed';
+      const bar = row.querySelector('.dt-bar');
+      if (bar) bar.remove();
+    });
+    document.dispatchEvent(new CustomEvent('files-changed'));
+    document.querySelectorAll('[data-story-fix="' + at + '"]').forEach((element) => { element.hidden = true; });
+    document.querySelectorAll('[data-story-fixed="' + at + '"]').forEach((element) => { element.hidden = false; });
+    document.querySelectorAll('.rl-dash[data-rail-item="' + at + '"]').forEach((dash) => { if (!dash.classList.contains('rl-now')) dash.className = 'rl-dash rl-done'; });
+    const next = document.querySelector('.tc[data-item]:not(.tc-done)');
+    const go = document.querySelector('[data-guide-go]');
+    if (go && next) {
+      go.setAttribute('href', '#fix-' + next.dataset.item);
+      go.setAttribute('data-popup-open', 'fix-' + next.dataset.item);
+    }
+    const guide = document.querySelector('[data-guide]');
+    const finished = document.querySelector('[data-all-done]');
+    if (!next && guide && finished) { guide.hidden = true; finished.hidden = false; }
+    // The coral "!" above the answer gives way to the mint tick once everything is done.
+    if (!next) {
+      document.querySelectorAll('[data-hero-todo]').forEach((mark) => { mark.hidden = true; });
+      document.querySelectorAll('[data-hero-done]').forEach((mark) => { mark.hidden = false; });
+    }
+  };
+
+  const finish = (wizard) => {
+    stateOf(wizard).step = 3;
+    markDone(wizard);
+    draw(wizard);
+  };
+
+  // F25, F50: the mark is written first; the file is drawn done once it is, or once the command is on the screen.
+  const close = (wizard, result) => {
+    const reason = wizard.querySelector('[data-wz-reason]');
+    const handover = wizard.querySelector('[data-handover]');
+    reason.hidden = true;
+    handover.hidden = true;
+    if (wizard.hasAttribute('data-shared')) { finish(wizard); return; }
+    const main = wizard.querySelector('[data-wz-next]');
+    const buttons = [...wizard.querySelectorAll('.wz-foot button')];
+    buttons.forEach((each) => { each.disabled = true; });
+    if (served && !main.hidden) main.innerHTML = say('wz.saving');
+    const field = wizard.querySelector('[data-wz-note]');
+    const note = field ? field.value.trim() : '';
+    const body = { path: wizard.dataset.path, result };
+    if (note !== '') body.note = note;
+    const since = wizard.dataset.since;
+    send('api/mark', body).then((answer) => {
+      buttons.forEach((each) => { each.disabled = false; });
+      if (!answer.ok && answer.reached) {
+        reason.textContent = answer.message;
+        reason.hidden = false;
+        draw(wizard);
+        return;
+      }
+      if (!answer.ok) {
+        handOver(handover, 'agentwhy check --mark ' + result + ' ' + quoted(wizard.dataset.path) +
+          (since ? ' --since ' + quoted(since) : '') + (note === '' ? '' : ' --note ' + quoted(note)));
+      } else {
+        wizard.dispatchEvent(new CustomEvent('wizard-marked', { bubbles: true }));
+      }
+      finish(wizard);
+    });
+  };
+
+  // F52: "Skip for now" leaves this file as it is and goes to the next one, or back to the list after the last.
+  const leave = (wizard) => {
+    const dialog = wizard.closest('dialog');
+    const next = document.getElementById('fix-' + (Number(wizard.dataset.item) + 1));
+    if (dialog) dialog.close();
+    if (next && typeof next.showModal === 'function' && !next.open) next.showModal();
+  };
+
+  // "I did it" before every row is ticked: the rows still to do are pointed at, and the hint says what to click - or,
+  // before "What's in this file?" is answered, that it is to be answered first.
+  const nudge = (wizard, scope) => {
+    const hint = wizard.querySelector('[data-wz-hint]');
+    hint.innerHTML = say(scope ? 'wz.tickFirst' : 'wz.pickFirst');
+    hint.hidden = false;
+    const rows = scope ? [...scope.querySelectorAll('[data-checklist] .ck-row:not(.ck-on)')] : [...wizard.querySelectorAll('[data-answer]')];
+    rows.forEach((row) => { const fold = row.closest('details'); if (fold) fold.open = true; });
+    rows.forEach((row) => { row.classList.add('ck-nudge'); setTimeout(() => row.classList.remove('ck-nudge'), 1600); });
+    if (rows[0]) rows[0].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  };
+
+  wizards.forEach(draw);
+
+  document.addEventListener('checklist', (event) => {
+    const wizard = event.target.closest('[data-wizard]');
+    if (wizard) draw(wizard);
+  });
+
+  document.addEventListener('click', (event) => {
+    const wizard = event.target.closest('[data-wizard]');
+    if (!wizard) return;
+    const s = stateOf(wizard);
+
+    if (event.target.closest('[data-wz-next]')) {
+      if (s.step === 1) {
+        const scope = scopeOf(wizard);
+        if (!tickedAll(scope)) { nudge(wizard, scope); return; }
+        s.step = 2;
+      } else if (s.step === 2) { close(wizard, wizard.dataset.kind === 'keys' ? 'rotated' : 'handled'); return; }
+      draw(wizard);
+      return;
+    }
+    if (event.target.closest('[data-wz-later]')) { leave(wizard); return; }
+    if (event.target.closest('[data-wz-back]')) { s.step = 1; draw(wizard); return; }
+    const skip = event.target.closest('[data-wz-skip]');
+    if (skip) { close(wizard, skip.getAttribute('data-wz-skip')); return; }
+    if (event.target.closest('[data-wz-last]')) { const dialog = wizard.closest('dialog'); if (dialog) dialog.close(); return; }
+
+    const answer = event.target.closest('[data-answer]');
+    if (answer) {
+      wizard.querySelectorAll('[data-answer]').forEach((each) => each.setAttribute('aria-checked', String(each === answer)));
+      s.answer = answer.dataset.answer;
+      wizard.querySelectorAll('.wz-answered').forEach((block) => block.classList.toggle('wz-on', block.dataset.forAnswer === s.answer));
+      draw(wizard);
+    }
+  });
+})();
+`;

package/dist/report/render/report-page/fix-wizard.js

@@ -0,0 +1,310 @@
+import { escapeHtml as e } from '../html-report-components.js';
+import { inLanguages, labelAttributes, LANGS, translator } from '../report-copy.js';
+import { askPanel, askTrigger } from '../ui/ask-panel.js';
+import { closeButton, pill, textButton } from '../ui/button.js';
+import { checklist } from '../ui/checklist.js';
+import { foldLine } from '../ui/fold-line.js';
+import { CLOSES, opener, popup } from '../ui/popup.js';
+import { rail, stepper } from '../ui/progress.js';
+import { listOf, nameOf, titleOf } from './item-names.js';
+import { fixId } from './to-do-view.js';
+/** What the quiet skip says, by the mark it writes. */
+const SKIP_WORDS = {
+    'not-secret': 'wz.skip.keys',
+    'not-private': 'wz.skip.data',
+    handled: 'fix.skip.handled',
+};
+/**
+ * The Fix it wizard, one window per file (the report page spec P18-P25; design file *agentwhy App*): where the person is,
+ * which file, then one step at a time. A file of keys goes New keys → Your app → Done; a file whose contents cannot be
+ * changed goes Limit the damage → Stop it next time → Done. With no script every step is on the page in order.
+ *
+ * Done writes a mark - *rotated* for keys, *handled* for the rest - and the quiet skip writes *not a real secret* (a
+ * template's, R31) or *not private* (a file with no key in it, F50); the page's script sends it where the page is
+ * served, and shows the command otherwise (P42, P43). A file of keys that is not a template has no skip.
+ */
+export function fixWizard(items, at, page, extras = {}) {
+    const item = items[at];
+    const id = fixId(at);
+    const keys = item.kind === 'keys';
+    const names = page.names ?? nameOf;
+    const name = e(names(item.path));
+    const next = at + 1 < items.length ? fixId(at + 1) : undefined;
+    const label = (key) => inLanguages((t) => t(key));
+    const top = '<div class="wz-top"><span class="wz-file" id="' + id + '-title">' + inLanguages((t) => t('wz.file', { n: at + 1, total: items.length })) + '</span>' +
+        '<span data-wz-stepper>' + stepper((keys ? ['wz.step.keys', 'wz.step.app', 'wz.step.done'] : ['wz.step.limit', 'wz.step.stop', 'wz.step.done'])
+        .map((key, step) => ({ label: label(key), state: step === 0 ? 'current' : 'future' }))) + '</span>' +
+        closeButton(labelAttributes((t) => t('app.close')) + CLOSES, 'sm') + '</div>';
+    const now = '<div class="wz-now">' +
+        rail(items.map((each, index) => ({
+            state: index === at ? 'now' : page.done.has(each.path) ? 'done' : 'waiting',
+            title: e(names(each.path)),
+            item: index,
+        }))) +
+        '<div class="wz-now-label">' + label('wz.now') + '</div>' +
+        '<div class="wz-now-row"><span class="wz-chip" title="' + e(item.path) + '">' + name + '</span>' +
+        '<span class="wz-now-title">' + inLanguages((t, lang) => titleOf(item, t, lang)) + '</span></div>' +
+        '<div class="wz-context">' + inLanguages((t) => t(keys ? 'wz.context.keys' : 'wz.context.data', { n: item.readers, name: '<code>' + name + '</code>' }) +
+        // Found 2026-09-24: asked for one value, the AI opened the file and was shown every line. Said where more than one
+        // line held a key (M2a), so the count is a fact of this file.
+        (keys && item.keyCount > 1 ? ' ' + t('wz.context.every', { n: item.keyCount }) : '')) + '</div>' +
+        (extras.notice === undefined ? '' : '<div class="wz-notice">' + extras.notice + '</div>') +
+        (extras.where === undefined ? '' : '<details class="wz-where"><summary class="wz-where-toggle">' + extras.where.summary + '</summary>' +
+            '<div class="wz-where-body">' + extras.where.body + '</div></details>') +
+        '</div>';
+    const note = extras.note === true && !page.shared ? noteField(id + '-note') : '';
+    const steps = keys ? keySteps(item, note) : dataSteps(item, page, note);
+    const done = '<section class="wz-step wz-done" data-step="3">' +
+        '<div class="wz-done-mark" aria-hidden="true">✓</div>' +
+        '<h2 class="wz-h2">' + label(keys ? 'wz.done.keys.title' : 'wz.done.data.title') + '</h2>' +
+        '<p class="wz-done-text">' + label(keys ? 'wz.done.keys.text' : 'wz.done.data.text') + ' ' +
+        (next === undefined ? label('wz.last') : inLanguages((t) => t('wz.left', { n: items.length - at - 1 }))) + '</p>' +
+        '<div class="wz-handover" data-handover hidden><p class="wz-handover-text">' + label('wz.cmd.mark') + '</p>' + commandRow() + '</div></section>';
+    const standard = keys ? (item.template ? 'not-secret' : undefined) : 'not-private';
+    const skip = page.shared ? undefined : extras.skip === undefined ? standard : extras.skip ?? undefined;
+    const ask = askPanel(questionsFor(item), id + '-ask');
+    const foot = '<div class="wz-foot"><span class="wz-foot-left">' +
+        '<button type="button" class="wz-back" data-wz-back hidden>' + label('wz.back') + '</button>' +
+        askTrigger(label('app.stuck'), id + '-ask') + '</span>' +
+        '<span class="wz-foot-right">' +
+        (skip === undefined ? '' : textButton(label(SKIP_WORDS[skip] ?? 'wz.skip.data'), ' data-wz-skip="' + skip + '"', 'wz-skip js-only')) +
+        '<button type="button" class="pill pill-outline pill-lg wz-later js-only" data-wz-later>' + label('wz.later') + '</button>' +
+        '<button type="button" class="pill pill-primary pill-lg wz-main js-only" data-wz-next>' + label('wz.all') + '</button>' +
+        (next === undefined
+            ? pill({ label: label('wz.backToList'), tone: 'light', size: 'lg', button: true, attributes: CLOSES + ' data-wz-last hidden' })
+            : pill({ label: label('wz.nextFile'), tone: 'light', size: 'lg', href: '#' + next, attributes: opener(next) + ' data-wz-last hidden' })) +
+        '</span></div>';
+    return popup({
+        id,
+        size: 'wizard',
+        labelledBy: id + '-title',
+        body: '<div class="wz" data-wizard data-kind="' + item.kind + '" data-item="' + at + '" data-path="' + e(item.path) + '"' +
+            (page.shared ? ' data-shared' : '') + (extras.since === undefined ? '' : ' data-since="' + e(extras.since) + '"') + '>' + top + now +
+            '<div class="wz-body">' + steps + done + ask + '<p class="wz-hint" data-wz-hint role="status" hidden></p>' +
+            '<p class="wz-reason" data-wz-reason role="alert" hidden></p></div>' + foot + '</div>',
+    });
+}
+/** The words on a checklist row's button, in every language. */
+const TICK = () => ({ mark: inLanguages((t) => t('app.tick')), done: inLanguages((t) => t('app.ticked')) });
+function keySteps(item, note) {
+    const label = (key, vars = {}) => inLanguages((t) => t(key, vars));
+    const code = (name) => '<code class="wz-ck-line">' + e(name) + '</code>';
+    const service = (provider, guessed) => ({
+        name: e(provider.name),
+        // O11: a service read from a line's name is said as a guess, with the name it was read from.
+        what: label(provider.what) + (guessed === undefined ? ''
+            : '<span class="wz-guess">' + inLanguages((t) => t('wz.keys.guess', { names: guessed.map(code).join(', ') })) + '</span>'),
+        ...(provider.checked === undefined ? {} : { link: { label: label('wz.open', { provider: e(provider.name) }), href: provider.url } }),
+    });
+    // F45: a service by a key's format, then by its line's name; a key line neither names is listed by its name, for the
+    // person to read. P20b: the secrets first, a test key after them with a word that it is one.
+    const tests = new Set(item.tests.map(String));
+    const test = '<span class="wz-guess">' + label('wz.keys.testNote') + '</span>';
+    const guessed = (testing) => item.guesses.filter((guess) => guess.names.every((each) => tests.has(each)) === testing)
+        .map((guess) => { const check = service(guess.provider, guess.names.map(String)); return testing ? { ...check, what: check.what + test } : check; });
+    const lined = (testing) => item.lines.filter((each) => tests.has(each) === testing)
+        .map((each) => ({ name: code(each), what: label('wz.keys.lineWhat') + (testing ? test : '') }));
+    const checks = [...item.providers.map((provider) => service(provider)), ...guessed(false), ...lined(false), ...guessed(true), ...lined(true)];
+    // No line was seen holding a key, yet a rule says the file holds them: every line read is listed, and the one that is
+    // no key is ticked by the person.
+    const everyLine = checks.length === 0 && !item.keyedNames && item.names.length > 0;
+    if (everyLine) {
+        for (const name of item.names)
+            checks.push({ name: code(name), what: label('wz.keys.lineWhat') });
+    }
+    else if (item.unnamed || checks.length === 0) {
+        checks.push({ name: label(checks.length === 0 ? 'wz.keys.unnamed' : 'wz.keys.others'), what: label('wz.keys.unnamedWhat') });
+    }
+    const text = item.guesses.length > 0 ? label('wz.keys.textGuess')
+        : item.providers.length > 0 ? inLanguages((t, lang) => t('wz.keys.text', { providers: e(listOf(item.providers.map((provider) => provider.name), lang)) }))
+            : item.lines.length > 0 || everyLine ? label('wz.keys.textLines') : label('wz.keys.textUnnamed');
+    // A long list shows its first rows and folds the rest; "I did it" still counts every row (F52).
+    const SHOWN = 5;
+    const list = checks.length <= SHOWN + 1 ? checklist(checks, TICK())
+        : checklist(checks.slice(0, SHOWN), TICK()) + '<details class="wz-more"><summary class="wz-more-line">' +
+            inLanguages((t) => t('wz.keys.more', { n: checks.length - SHOWN })) + '</summary>' + checklist(checks.slice(SHOWN), TICK()) + '</details>';
+    // P20b: keys named as public are set apart, said as a guess, and are nothing to change.
+    const open = item.open.length === 0 ? '' : '<div class="wz-open">' + foldLine({
+        summary: inLanguages((t) => t('wz.keys.open', { n: item.open.length })),
+        body: '<p class="wz-note">' + label('wz.keys.openWhy') + '</p><p class="wz-open-names">' + item.open.map((each) => code(each)).join(' ') + '</p>',
+    }) + '</div>';
+    const after = (everyLine ? '<p class="wz-note">' + label('wz.keys.notKey') + '</p>' : '') + open;
+    const lines = item.names.length === 0
+        ? '<p class="wz-line">' + label('wz.app.linesGeneric') + '</p>'
+        : '<div class="wz-line">' + label('wz.app.lines') + '</div><div class="wz-env">' + item.names.map((name) => '<div class="wz-env-line"><span class="wz-env-key">' + e(name) + '</span><span class="wz-env-eq">=</span>' +
+            '<span class="wz-env-new">' + label('wz.app.placeholder') + '</span></div>').join('') + '</div>';
+    return '<section class="wz-step" data-step="1">' + stepHead('wz.stepOf', 1, 'wz.keys.title') + '<p class="wz-p">' + text + '</p>' +
+        list + after + '</section>' +
+        '<section class="wz-step" data-step="2">' + stepHead('wz.stepOf', 2, 'wz.app.title') + '<p class="wz-p wz-p-tight">' + label('wz.app.text') + '</p>' +
+        '<div class="wz-warn"><span class="wz-warn-mark" aria-hidden="true">!</span><span><strong>' + label('wz.app.warnStrong') + '</strong> ' +
+        '<span class="wz-warn-why">' + label('wz.app.warn') + '</span></span></div>' +
+        '<ol class="wz-howto">' +
+        '<li><span class="wz-n" aria-hidden="true">1</span><div><div class="wz-line">' + label('wz.app.open') + '</div>' +
+        '<div class="wz-path-row"><span class="wz-path">' + e(item.path) + '</span>' + copyButton(item.path) + '</div></div></li>' +
+        '<li><span class="wz-n" aria-hidden="true">2</span><div>' + lines + '</div></li>' +
+        '<li><span class="wz-n" aria-hidden="true">3</span><div class="wz-line">' + label('wz.app.save') + '</div></li>' +
+        '</ol>' + note + '</section>';
+}
+/** F49: what a file holds decides what limiting the damage is. The person says it; the page never guesses it. */
+const ANSWERS = [
+    ['wz.data.people', [['wz.data.report', 'wz.data.reportWhat'], ['wz.data.team', 'wz.data.teamWhat'], ['wz.data.move', 'wz.data.moveWhat']]],
+    ['wz.data.business', [['wz.data.agreement', 'wz.data.agreementWhat'], ['wz.data.team', 'wz.data.teamWhat'], ['wz.data.move', 'wz.data.moveWhat']]],
+    ['wz.data.other', [['wz.data.team', 'wz.data.teamWhat'], ['wz.data.move', 'wz.data.moveWhat']]],
+];
+function dataSteps(item, page, note) {
+    const label = (key) => inLanguages((t) => t(key));
+    const key = page.protectKeys.get(item.path);
+    // P38a: only a file inside the project can be protected from here, and a shared copy changes nothing (P46). A file a
+    // rule protects already (M3) says so; its window is the one the Files view offers, keyed the same.
+    const protect = page.toldPaths?.has(item.path) === true
+        ? '<p class="wz-p">' + label('wz.stop.told') + '</p>'
+        : page.protectedPaths.has(item.path)
+            ? '<span class="wz-protected">' + label('pr.done') + '</span><p class="wz-honest">' + label('wz.stop.honest') + '</p>'
+            : key === undefined && page.protectAt !== undefined && !page.shared
+                ? pill({ label: label('wz.protect'), tone: 'light', size: 'lg', href: e(page.protectAt) }) + '<p class="wz-honest">' + label('wz.stop.honest') + '</p>'
+                : key === undefined
+                    ? '<p class="wz-p">' + label(page.shared ? 'wz.stop.shared' : 'wz.stop.outside') + '</p>'
+                    : pill({ label: label('wz.protect'), tone: 'light', size: 'lg', href: '#protect-' + key, attributes: opener('protect-' + key) + ' data-protect-open="' + key + '"' }) +
+                        '<span class="wz-protected" data-protected="' + key + '" hidden>' + label('pr.done') + '</span>' +
+                        '<p class="wz-honest">' + label('wz.stop.honest') + '</p>';
+    return '<section class="wz-step" data-step="1">' + stepHead('wz.stepOf', 1, 'wz.data.title') +
+        '<div class="wz-ask">' + label('wz.data.ask') + '</div>' +
+        '<p class="wz-p wz-p-tight">' + label('wz.data.askHelp') + '</p>' +
+        '<div class="wz-answers" role="radiogroup">' +
+        // Each answer says what it means, so a person who has never sorted their files this way can still pick one (F49).
+        // The fourth answer, "Nothing private in it", is the wizard's own skip in its foot (F50), as the design file has it.
+        ANSWERS.map(([answer], index) => '<button type="button" class="wz-answer" role="radio" aria-checked="false" data-answer="' + index + '">' +
+            '<span class="wz-option-mark" aria-hidden="true"></span><span class="wz-option"><span class="wz-option-name">' + label(answer) + '</span>' +
+            '<span class="wz-option-what">' + label(answer + 'What') + '</span></span></button>').join('') +
+        '</div>' +
+        ANSWERS.map(([answer, checks], index) => '<div class="wz-answered" data-for-answer="' + index + '"><h3 class="wz-answer-title">' + label(answer) + '</h3>' +
+            '<p class="wz-p">' + label('wz.data.text') + '</p>' +
+            checklist(checks.map(([name, what]) => ({ name: label(name), what: label(what) })), TICK()) + '</div>').join('') +
+        '</section>' +
+        '<section class="wz-step" data-step="2">' + stepHead('wz.stepOf', 2, 'wz.stop.title') + '<p class="wz-p">' + label('wz.stop.text') + '</p>' +
+        protect + '<p class="wz-path-note"><code>' + e(item.path) + '</code></p>' + note + '</section>';
+}
+/** T14: a note the mark carries, typed before the step that writes it. Never a key: the field says what it is for. */
+function noteField(field) {
+    const placeholder = (lang) => e(translator(lang)('fix.window.notePlaceholder'));
+    return '<div class="wz-note-field"><label class="wz-note-label" for="' + field + '">' + inLanguages((t) => t('fix.window.note')) + '</label>' +
+        '<input class="wz-note-input" id="' + field + '" data-wz-note maxlength="200" autocomplete="off" placeholder="' + placeholder('en') + '"' +
+        LANGS.map((lang) => ' data-placeholder-' + lang + '="' + placeholder(lang) + '"').join('') + '></div>';
+}
+/** A button that copies `text`, saying so for two seconds. Filled in by the page's script where `text` is empty. */
+function copyButton(text, label = 'wz.copy') {
+    return '<button type="button" class="wz-copy" data-copy="' + e(text) + '"><span class="wz-copy-idle">' + inLanguages((t) => t(label)) + '</span>' +
+        '<span class="wz-copy-done">' + inLanguages((t) => t('wz.copied')) + '</span></button>';
+}
+/** The command a page that cannot write hands over (P43, R32, R61), with its Copy: filled in by the page's script. */
+export function commandRow() {
+    return '<div class="wz-path-row"><code class="wz-path" data-command></code>' + copyButton('', 'wz.copyCommand') + '</div>';
+}
+function stepHead(of, n, title) {
+    return '<div class="wz-step-of">' + inLanguages((t) => t(of, { n })) + '</div><h2 class="wz-h2">' + inLanguages((t) => t(title)) + '</h2>';
+}
+/** The ready-made questions of §7.1, answered in advance (F43). */
+function questionsFor(item) {
+    const first = (item.providers[0] ?? item.guesses[0]?.provider)?.name;
+    const say = (render) => inLanguages(render);
+    if (item.kind === 'data') {
+        return [['ask.tell', 'ask.tellA'], ['ask.who', 'ask.whoA'], ['ask.next', 'ask.nextA']].map(([question, answer]) => ({
+            question: say((t) => t(question)), answer: say((t) => t(answer)),
+        }));
+    }
+    return [
+        first === undefined
+            ? { question: say((t) => t('ask.makeAny')), answer: say((t) => t('ask.makeAnyA')) }
+            : { question: say((t) => t('ask.make', { provider: e(first) })), answer: say((t) => t('ask.makeA', { provider: e(first) })) },
+        { question: say((t) => t('ask.login')), answer: say((t) => t('ask.loginA')) },
+        { question: say((t) => t('ask.stop')), answer: say((t) => t('ask.stopA')) },
+    ];
+}
+export const FIX_WIZARD_STYLE = String.raw `
+.wz-top{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--white-07)}
+.wz-file{flex:none;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap}
+.wz-top [data-wz-stepper]{flex:1;display:flex}
+.wz-now{padding:22px 36px 20px;background:var(--coral-05);border-bottom:1px solid var(--coral-18)}
+.wz-now-label{font-size:13px;font-weight:600;color:var(--coral-text);margin-bottom:8px}
+.wz-now-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
+.wz-chip{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text);background:var(--panel);border:1px solid var(--coral-45);border-radius:8px;padding:6px 12px}
+.wz-now-title{font-size:17px;font-weight:650;line-height:1.3}
+.wz-context{font-size:14.5px;line-height:1.5;color:var(--text-2);text-wrap:pretty}
+.wz-context code{font-family:var(--mono);font-size:13.5px;color:var(--text)}
+.wz-body{padding:32px 36px 30px;min-height:340px}
+.js .wz-step:not(.wz-on){display:none}
+.wz-step+.wz-step{margin-top:32px}.js .wz-step+.wz-step{margin-top:0}
+.wz-step-of{font-size:13px;font-weight:600;color:var(--coral-text);margin-bottom:10px}
+.wz-h2{margin:0 0 10px;font-size:28px;line-height:1.2;letter-spacing:-0.02em;font-weight:650;text-wrap:balance}
+.wz-p{margin:0 0 24px;font-size:16px;line-height:1.5;color:var(--text-2);text-wrap:pretty}.wz-p-tight{margin-bottom:22px}
+.wz-warn{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--coral-07);border:1px solid var(--coral-35);margin-bottom:22px;font-size:15px;line-height:1.5}
+.wz-warn strong{font-weight:650}.wz-warn-why{color:var(--text-soft)}
+.wz-warn-mark{flex:none;width:24px;height:24px;border-radius:50%;background:var(--coral);color:var(--on-coral);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.wz-howto{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:18px}
+.wz-howto>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px}
+.wz-howto>li>div{padding-top:3px;min-width:0}
+.wz-n{width:28px;height:28px;border-radius:50%;background:var(--coral-14);color:var(--coral-text);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
+.wz-line{font-size:16px;line-height:1.5;margin-bottom:10px}p.wz-line{margin:0}
+.wz-path-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.wz-path{font-family:var(--mono);font-size:14px;color:var(--text);background:var(--panel);border:1px solid var(--white-10);border-radius:8px;padding:8px 12px;overflow-wrap:anywhere}
+.wz-copy{background:transparent;color:var(--text);border:1px solid var(--white-14);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
+.wz-copy-done{display:none}.wz-copied{background:var(--mint-14);color:var(--mint)}.wz-copied .wz-copy-idle{display:none}.wz-copied .wz-copy-done{display:inline}
+.wz-env{border-radius:10px;background:var(--panel);border:1px solid var(--white-10);padding:10px 14px;font-family:var(--mono);font-size:14px;line-height:1.9;overflow:auto}
+.wz-env-line{white-space:nowrap}.wz-env-key{color:var(--text)}.wz-env-eq{color:var(--coral-text)}
+.wz-env-new{color:var(--text-3);background:var(--coral-12);border-radius:4px;padding:1px 6px}
+.wz-ck-line{font-family:var(--mono);font-size:15px;overflow-wrap:anywhere}
+.wz-guess{display:block;margin-top:3px}.wz-guess .wz-ck-line{font-size:12.5px;color:var(--text-2)}
+.wz-more{margin-top:10px}.wz-more>.ck{margin-top:10px}
+.wz-more-line{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--white-14);color:var(--text-soft);font-size:14px;font-weight:600;cursor:pointer;list-style:none}
+.wz-more-line::-webkit-details-marker{display:none}.wz-more-line:hover{background:var(--white-05);color:var(--text)}.wz-more[open]>.wz-more-line{display:none}
+.wz-open{margin-top:18px}.wz-open .wz-note{margin:0 0 10px}.wz-open-names{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}
+.wz-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--text-3);text-wrap:pretty}
+.wz-ask{font-size:16px;font-weight:600;margin:0 0 12px}
+.wz-answers{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
+.wz-answer{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--white-10);color:var(--text);border-radius:14px;padding:14px 16px;font:inherit;cursor:pointer}
+.wz-answer:hover{border-color:var(--white-30)}
+.wz-answer.ck-nudge{border-color:var(--coral-60);box-shadow:0 0 0 3px var(--coral-14)}
+.wz-option-mark{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;border:1.5px solid var(--white-30)}
+.wz-option{display:flex;flex-direction:column;gap:3px}
+.wz-option-name{font-size:15.5px;font-weight:600}
+.wz-option-what{font-size:14px;line-height:1.45;color:var(--text-2)}
+.wz-answer[aria-checked="true"]{border-color:var(--coral-50);background:var(--coral-07)}
+.wz-answer[aria-checked="true"] .wz-option-mark{border:6px solid var(--coral)}
+.js .wz-answered{display:none}.js .wz-answered.wz-on{display:block}
+.wz-answer-title{margin:0 0 8px;font-size:15px;font-weight:650}.js .wz-answer-title{display:none}
+.wz-answered+.wz-answered{margin-top:24px}
+.wz-honest{margin:18px 0 0;font-size:14px;line-height:1.5;color:var(--text-3)}
+.wz-path-note{margin:10px 0 0;font-size:13px;color:var(--text-3)}.wz-path-note code{font-family:var(--mono)}
+.wz-done{text-align:center;padding:30px 0 10px}
+.wz-done-mark{width:64px;height:64px;border-radius:50%;background:var(--mint);color:var(--on-mint);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;margin:0 auto 22px}
+.wz-done .wz-h2{font-size:30px}
+.wz-done-text{margin:0 auto;max-width:400px;font-size:16px;line-height:1.5;color:var(--text-2)}
+.wz-handover{margin:22px auto 0;max-width:520px;text-align:left}
+.wz-handover-text{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--text-2)}
+.wz-reason{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:var(--coral-07);border:1px solid var(--coral-35);font-size:14px;line-height:1.5;white-space:pre-line}
+.wz-reason[hidden],.wz-handover[hidden],.wz-protected[hidden]{display:none}
+.wz-protected{display:inline-flex;align-items:center;padding:12px 20px;border-radius:999px;background:var(--mint-14);color:var(--mint);font-size:15px;font-weight:600}
+.wz-foot{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--white-07);background:var(--popup-foot)}
+.wz-foot-left,.wz-foot-right{display:flex;gap:14px;align-items:center}.wz-foot-right{gap:10px}
+.wz-back{background:transparent;border:1px solid var(--white-12);color:var(--text-soft);border-radius:999px;padding:10px 16px;font:inherit;font-size:14px;cursor:pointer}
+.wz-foot [hidden]{display:none}
+.cf-note .wz-reason,.cf-note .wz-handover{margin:0 0 18px;max-width:none}
+.wz-skip{color:var(--text-3);font-weight:400;padding:6px 4px}.wz-skip:hover{color:var(--text)}
+.wz-foot-right{flex-wrap:wrap;justify-content:flex-end}
+.wz-main.wz-wait{opacity:.5}
+.wz-hint{margin:16px 0 0;font-size:14.5px;font-weight:600;color:var(--coral-text)}.wz-hint[hidden]{display:none}
+.wz-main.pill-primary,.wz-main.pill-mint{border-color:transparent}
+.wz-main{padding:12px 22px}
+.wz-notice{margin-top:14px}
+.wz-where{margin-top:14px;border-top:1px solid var(--coral-18);padding-top:12px}
+.wz-where-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--text-soft)}
+.wz-where-toggle::-webkit-details-marker{display:none}
+.wz-where-toggle:after{content:"▾";font-size:12px;color:var(--text-3)}.wz-where[open] .wz-where-toggle:after{content:"▴"}
+.wz-where-toggle:hover{color:var(--text)}
+.wz-where-body{margin-top:12px}
+.wz-note-field{margin-top:26px;padding-top:22px;border-top:1px solid var(--white-07)}
+.wz-note-label{display:block;font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:8px}
+.wz-note-input{width:100%;background:var(--panel);border:1px solid var(--white-12);border-radius:10px;padding:11px 14px;color:var(--text);font:inherit;font-size:15px;outline:none}
+.wz-note-input:focus-visible{border-color:var(--coral-50)}
+@media (max-width:640px){.wz-now{padding:18px 20px}.wz-body{padding:24px 20px}.wz-top{flex-wrap:wrap}}
+`;