@agentwhy/cli 0.0.0-dev

package/dist/report/render/ui/file-chip.js

@@ -0,0 +1,37 @@
+import { escapeHtml as e } from '../html-report-components.js';
+import { inLanguages } from '../report-copy.js';
+/**
+ * File names as chips (guidelines §4 "File name chip"), at most `visible` of them, the rest behind "+N more"
+ * (§9.1). `shown` is what a chip says - the path itself, or its name with the whole path as its tooltip. Without a
+ * script every chip is shown and the button is not: the extra ones are hidden only by the class a script adds, so a
+ * page that runs nothing still names every file.
+ */
+export function fileChips(paths, visible = 2, shown = (path) => path) {
+    const chips = paths.map((path, at) => '<span class="chip' + (at >= visible ? ' chip-extra' : '') + '" title="' + e(path) + '">' + e(shown(path)) + '</span>').join('');
+    const more = paths.length <= visible ? '' :
+        '<button type="button" class="chip-more js-only" data-chip-more aria-expanded="false">' +
+            '<span class="chip-closed">' + inLanguages((t) => t('chip.more', { n: paths.length - visible })) + '</span>' +
+            '<span class="chip-open">' + inLanguages((t) => t('chip.less')) + '</span></button>';
+    return '<span class="chips">' + chips + more + '</span>';
+}
+export const FILE_CHIP_STYLE = String.raw `
+.chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
+.chip{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text);background:var(--white-07);border:1px solid var(--white-10);border-radius:6px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.js .chips:not(.chips-open) .chip-extra{display:none}
+.chip-more{position:relative;z-index:2;font:inherit;font-size:13px;font-weight:600;color:var(--text-2);background:transparent;border:1px dashed var(--white-28);border-radius:6px;padding:2px 8px;cursor:pointer;white-space:nowrap}
+.chip-more:hover{color:var(--text);background:var(--white-06);border-color:var(--white-32)}
+.chip-open{display:none}.chips-open .chip-open{display:inline}.chips-open .chip-closed{display:none}
+`;
+/** Opens and closes the extra chips of one cell, and nothing else: the row under it is a link and must not follow. */
+export const FILE_CHIP_SCRIPT = String.raw `
+document.addEventListener('click', (event) => {
+  const button = event.target.closest('[data-chip-more]');
+  if (!button) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const chips = button.closest('.chips');
+  const open = !chips.classList.contains('chips-open');
+  chips.classList.toggle('chips-open', open);
+  button.setAttribute('aria-expanded', String(open));
+});
+`;

package/dist/report/render/ui/fold-line.js

@@ -0,0 +1,22 @@
+import { inLanguages } from '../report-copy.js';
+export function foldLine(spec) {
+    return '<details class="fold' + (spec.mark === undefined ? '' : ' fold-' + spec.mark.tone) + '"' + (spec.attributes ?? '') + '><summary class="fold-line">' +
+        '<span class="fold-mark" aria-hidden="true">' + (spec.mark?.glyph ?? '✓') + '</span><span class="fold-text">' + spec.summary + '</span>' +
+        '<span class="fold-toggle"><span class="fold-show">' + inLanguages((t) => t('fold.show')) + '</span>' +
+        '<span class="fold-hide">' + inLanguages((t) => t('fold.hide')) + '</span></span></summary>' +
+        '<div class="fold-body">' + spec.body + '</div></details>';
+}
+export const FOLD_LINE_STYLE = String.raw `
+.fold-line{display:flex;align-items:center;gap:12px;width:100%;padding:16px 22px;border-radius:14px;border:1px dashed var(--white-16);color:var(--text-soft);font-size:15px;cursor:pointer;list-style:none}
+.fold-line::-webkit-details-marker{display:none}
+.fold-line:hover{border-color:var(--white-32)}
+.fold[open]>.fold-line{margin-bottom:16px}
+.fold-mark{flex:none;width:24px;height:24px;border-radius:50%;background:var(--mint-14);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
+.fold-text{flex:1}
+.fold-text strong{font-weight:650;color:var(--text)}
+.fold-text .fold-rest{color:var(--text-2)}
+.fold-toggle{font-size:14px;font-weight:600;color:var(--text-2)}
+.fold-hide{display:none}.fold[open] .fold-hide{display:inline}.fold[open] .fold-show{display:none}
+.fold-sand>.fold-line{border:1px solid var(--sand-35);background:var(--card)}.fold-sand>.fold-line:hover{border-color:var(--sand)}
+.fold-sand .fold-mark{width:32px;height:32px;background:var(--sand-16);color:var(--sand)}.fold-sand .fold-mark svg{width:16px;height:16px}
+`;

package/dist/report/render/ui/guide-card.js

@@ -0,0 +1,25 @@
+import { pill } from './button.js';
+const LOCK_SVG = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">' +
+    '<rect x="5" y="11" width="14" height="10" rx="2.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>';
+export function guideCard(spec) {
+    const action = spec.action;
+    const shown = action !== undefined && (spec.tone === 'coral' || action.light === true);
+    return '<div class="guide guide-' + spec.tone + (shown && spec.tone === 'mint' ? ' guide-acts' : '') + '">' +
+        '<span class="guide-mark" aria-hidden="true">' + (spec.tone === 'coral' ? '✦' : spec.mark === 'lock' ? LOCK_SVG : '✓') + '</span>' +
+        '<div class="guide-text"><div class="guide-title">' + spec.title + '</div><div class="guide-body">' + spec.body + '</div></div>' +
+        (!shown ? '' : pill({ label: action.label, href: action.href, tone: action.light === true ? 'light' : 'primary', size: 'lg',
+            ...(action.attributes === undefined ? {} : { attributes: action.attributes }) })) +
+        '</div>';
+}
+export const GUIDE_CARD_STYLE = String.raw `
+.guide{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 24px;border-radius:14px;margin-bottom:36px}
+.guide-coral{background:var(--coral-06);border:1px solid var(--coral-30)}
+.guide-mint{background:var(--mint-08);border:1px solid var(--mint-30);flex-wrap:nowrap}
+.guide-mark{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
+.guide-coral .guide-mark{background:var(--coral-14);border:1px solid var(--coral-35);color:var(--coral-text);font-size:18px}
+.guide-mint .guide-mark{background:var(--mint);color:var(--on-mint);font-size:20px;font-weight:700}
+.guide-coral .guide-text,.guide-acts .guide-text{flex:1;min-width:220px}
+.guide-mint.guide-acts{flex-wrap:wrap}.guide-mint .guide-mark svg{display:block}
+.guide-title{font-size:17px;font-weight:600;margin-bottom:3px}
+.guide-body{font-size:14px;line-height:1.5;color:var(--text-2)}
+`;

package/dist/report/render/ui/hero.js

@@ -0,0 +1,37 @@
+const TICK_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">' +
+    '<path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+const MARKS = {
+    tick: '<span class="hero-tick" aria-hidden="true">' + TICK_SVG + '</span>',
+    unsure: '<span class="hero-unsure" aria-hidden="true">?</span>',
+    alert: '<span class="hero-alert" aria-hidden="true">!</span>',
+    todo: '<span class="hero-alert" aria-hidden="true" data-hero-todo>!</span>' +
+        '<span class="hero-tick" aria-hidden="true" data-hero-done hidden>' + TICK_SVG + '</span>',
+};
+export function hero(spec) {
+    return '<section class="hero' + (spec.centred === true ? ' hero-centred' : '') + '">' + (spec.mark === undefined ? '' : MARKS[spec.mark]) +
+        (spec.eyebrow === '' ? '' : '<div class="hero-eyebrow"><span class="hero-rule" aria-hidden="true"></span>' +
+            '<span class="hero-eyebrow-text">' + spec.eyebrow + '</span></div>') +
+        '<h1 class="hero-fact' + (spec.action === '' ? ' hero-alone' : '') + '">' + spec.fact + '</h1>' +
+        (spec.action === '' ? '' : '<p class="hero-action' + (spec.calm === true ? ' hero-calm' : spec.mark === 'unsure' ? ' hero-amber' : '') + '" role="doc-subtitle">' + spec.action + '</p>') +
+        '<p class="hero-lead">' + spec.lead + '</p></section>';
+}
+export const HERO_STYLE = String.raw `
+.hero{margin-bottom:32px}
+.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--coral-text);font-size:15px;font-weight:500;margin-bottom:16px}
+.hero-rule{width:36px;height:1.5px;background:var(--coral)}
+.hero-eyebrow-text{white-space:nowrap}
+.hero-fact,.hero-action{margin:0;font-size:44px;line-height:1.12;letter-spacing:-0.02em;font-weight:650;text-wrap:balance}
+.hero-action{margin:0 0 16px;color:var(--coral)}
+.hero-fact.hero-alone{margin-bottom:12px;font-size:40px}
+.hero-action.hero-calm{color:var(--mint)}.hero-action.hero-amber{color:var(--amber)}
+.hero-lead{margin:0;max-width:600px;font-size:17px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
+.hero-tick{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 0 26px;border-radius:50%;background:var(--mint);color:var(--on-mint);box-shadow:0 0 0 10px var(--mint-06),0 0 48px var(--mint-16)}
+.hero-tick svg{width:34px;height:34px}
+.hero-alert{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 0 26px;border-radius:50%;background:var(--coral-14);border:1.5px solid var(--coral-35);color:var(--coral-text);box-shadow:0 0 0 10px var(--coral-06);font-size:34px;font-weight:700}
+.hero-tick[hidden],.hero-alert[hidden]{display:none}
+.hero-unsure{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 0 26px;border-radius:50%;background:var(--amber-12);border:1.5px solid var(--amber-35);color:var(--amber);box-shadow:0 0 0 10px var(--amber-12);font-size:34px;font-weight:700}
+.hero-centred .hero-tick,.hero-centred .hero-unsure,.hero-centred .hero-alert{margin-left:auto;margin-right:auto}
+.hero-centred{text-align:center;margin-bottom:36px}.hero-centred .hero-eyebrow{margin-bottom:18px}
+.hero-centred .hero-action{margin-bottom:18px}.hero-centred .hero-lead{max-width:520px;margin:0 auto}
+@media (max-width:640px){.hero-fact,.hero-action{font-size:32px}.hero-tick{width:60px;height:60px}.hero-tick svg{width:28px;height:28px}.hero-unsure,.hero-alert{width:60px;height:60px;font-size:28px}}
+`;

package/dist/report/render/ui/labelled-select.js

@@ -0,0 +1,10 @@
+export function labelledSelect(question, choices, attributes) {
+    return '<label class="ls"><span class="ls-q">' + question + '</span><select class="ls-select"' + attributes + '>' +
+        choices.map((choice) => '<option value="' + choice.value + '">' + choice.label + '</option>').join('') + '</select></label>';
+}
+export const LABELLED_SELECT_STYLE = String.raw `
+.ls{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--white-10);border-radius:10px;padding:0 6px 0 14px}
+.ls-q{font-size:13.5px;color:var(--text-3);white-space:nowrap}
+.ls-select{background:transparent;border:none;color:var(--text);font:inherit;font-size:14px;font-weight:600;padding:9px 6px;outline:none;cursor:pointer}
+.ls-select option{background:var(--card)}
+`;

package/dist/report/render/ui/live-script.js

@@ -0,0 +1,222 @@
+import { LANGS, translator } from '../report-copy.js';
+/**
+ * Live pages (`.ai/specs/2026-09-24-live-pages.md`): the pill that says there is more, and the line that says the server
+ * has gone, both hidden until the script shows them. Every page carries them; only a served page ever shows them.
+ */
+export function liveParts() {
+    const words = JSON.stringify(liveWords()).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+    return '<button type="button" class="pill pill-light pill-sm live-pill" data-live-pill data-live-words="' + words + '" hidden></button>' +
+        '<p class="live-stopped" data-live-stopped role="status" hidden></p>';
+}
+/** The words the script says, per language, with the plural forms each language has (as `report-copy.ts` counts). */
+export function liveWords() {
+    const forms = { en: ['one', 'other'], pl: ['one', 'few', 'many'], de: ['one', 'other'] };
+    return Object.fromEntries(LANGS.map((lang) => {
+        const t = translator(lang);
+        return [lang, {
+                ...Object.fromEntries(forms[lang].map((form) => [form, t('live.new.' + form)])),
+                ...Object.fromEntries(forms[lang].map((form) => ['go.' + form, t('live.go.' + form)])),
+                updated: t('live.updated'),
+                stopped: t('live.stopped'),
+            }];
+    }));
+}
+export const LIVE_STYLE = String.raw `
+.live-pill{position:fixed;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:20;box-shadow:0 10px 30px var(--shadow)}
+.live-pill[hidden],.live-stopped[hidden]{display:none}
+.live-stopped{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;margin:0;max-width:min(560px,calc(100% - 32px));padding:10px 16px;border-radius:12px;background:var(--popup);border:1px solid var(--white-14);color:var(--text-2);font-size:13.5px;line-height:1.5;text-align:center}
+.live-new{background:var(--coral-08);transition:background 1.6s ease}
+.live-pill.live-foot{top:auto;bottom:calc(22px + env(safe-area-inset-bottom))}
+.live-lit{animation:live-lit 2.4s ease-out}
+@keyframes live-lit{0%,35%{background:var(--coral-14)}100%{background:transparent}}
+@media (prefers-reduced-motion:reduce){.live-lit{animation:none;background:var(--coral-08)}}
+`;
+/**
+ * L5-L14. Nothing happens unless the page was served and stamped with its version (L2): a file, a shared page and a
+ * report opened alone are left exactly as they were. A page that can take a new version in place (L7a: Conversations,
+ * `window.agentwhyLiveSwap`) is handed it, fetched, wherever the reader is and whatever is open: nothing flashes and
+ * nothing under the reader moves, what changed is lit, and a new conversation out of view is said at the foot of the
+ * screen, where a click brings it into view (the maintainer, 2026-09-25: the pill at the top went unseen). Every other
+ * page, and one whose new version it cannot take in place, is updated as follows. The page asks every 2 s while it is visible and every 60 s while
+ * it is not (LD1, LD4); the same version does nothing, and nothing is drawn while it asks (L6). A new version is put in
+ * place only where nothing can move under the reader (L7) - no window open, no field focused, nothing selected, at the
+ * top - and otherwise waits behind the pill (L8), which a click, or scrolling back to the top with nothing open, turns
+ * into the update. The update is a reload that keeps the fields, folds and pressed buttons marked `data-live-keep`, the
+ * scroll, and lights what is new among the elements marked `data-live-key` (L9). Three failed asks in a row say the
+ * server has gone, once, and stop (L13).
+ */
+export const LIVE_SCRIPT = String.raw `
+(() => {
+  const html = document.documentElement;
+  let sent = html.dataset.version;
+  if (!sent || (location.protocol !== 'http:' && location.protocol !== 'https:')) return;
+  const pill = document.querySelector('[data-live-pill]');
+  const gone = document.querySelector('[data-live-stopped]');
+  if (!pill || !gone) return;
+  // The page's own name; empty where it was opened at the served root, which the server reads as the list (L3).
+  const file = location.pathname.split('/').pop() || '';
+  const store = 'agentwhy.live.' + (file || '/');
+  const words = JSON.parse(pill.dataset.liveWords || '{}');
+  const say = (key) => ((words[html.dataset.lang] || words.en || {})[key] || '');
+  const form = (n) => {
+    if (n === 1) return 'one';
+    if (html.dataset.lang !== 'pl') return 'other';
+    const last = n % 10, lastTwo = n % 100;
+    return last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14) ? 'few' : 'many';
+  };
+
+  const kept = () => [...document.querySelectorAll('[data-live-keep]')];
+  const keys = () => [...document.querySelectorAll('[data-live-key]')].map((element) => element.dataset.liveKey);
+  const stateOf = (element) => element.tagName === 'DETAILS' ? { open: element.open }
+    : element.hasAttribute('aria-pressed') ? { pressed: element.getAttribute('aria-pressed') === 'true' }
+      : element.type === 'checkbox' ? { checked: element.checked } : { value: element.value };
+
+  // After an update: the reader's place back, and what is new lit (L7, L9). Put back once the page's own scripts have
+  // run: they come after this one, and a pill pressed or a field changed before they listen is pressed for nobody.
+  setTimeout(() => { try {
+    const saved = JSON.parse(sessionStorage.getItem(store) || 'null');
+    if (saved) {
+      sessionStorage.removeItem(store);
+      kept().forEach((element, at) => {
+        const state = saved.kept[at];
+        if (!state) return;
+        if ('open' in state) element.open = state.open;
+        else if ('pressed' in state) { if (state.pressed && element.getAttribute('aria-pressed') !== 'true') element.click(); }
+        else {
+          if ('checked' in state) element.checked = state.checked; else element.value = state.value;
+          element.dispatchEvent(new Event('input', { bubbles: true }));
+          element.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+      });
+      const before = new Set(saved.keys);
+      document.querySelectorAll('[data-live-key]').forEach((element) => {
+        if (before.has(element.dataset.liveKey)) return;
+        element.classList.add('live-new');
+        setTimeout(() => element.classList.remove('live-new'), 1600);
+      });
+      window.scrollTo(0, saved.scroll || 0);
+    }
+  } catch (error) {} }, 0);
+
+  const field = (element) => !!element && (element.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName));
+  const idle = () => !document.querySelector('dialog[open]') && !field(document.activeElement) &&
+    !String(window.getSelection ? window.getSelection() : '') && window.scrollY <= 80 && document.visibilityState === 'visible';
+
+  let waiting = null;
+  let misses = 0;
+  let stopped = false;
+  let timer = 0;
+
+  const apply = (toTop) => {
+    try {
+      sessionStorage.setItem(store, JSON.stringify({ kept: kept().map(stateOf), keys: keys(), scroll: toTop ? 0 : window.scrollY }));
+    } catch (error) {}
+    location.reload();
+  };
+  const show = (answer) => {
+    // How many conversations the page was sent with is on its root (L2); the answer says how many there are now.
+    const fresh = typeof answer.conversations === 'number' ? answer.conversations - Number(html.dataset.conversations || answer.conversations) : 0;
+    pill.textContent = fresh > 0 ? say(form(fresh)).replace('{n}', String(fresh)) : say('updated');
+    pill.dataset.toTop = fresh > 0 ? 'true' : '';
+    pill.hidden = false;
+  };
+  const stop = () => {
+    stopped = true;
+    html.dataset.live = 'gone';
+    clearTimeout(timer);
+    pill.hidden = true;
+    gone.textContent = say('stopped');
+    gone.hidden = false;
+  };
+  const later = (answer) => { if (idle()) apply(false); else show(answer); };
+  // The words each language keeps for its attributes, for what was just put in place (as LANGUAGE_SCRIPT writes them).
+  const relabel = () => {
+    const lang = html.dataset.lang || 'en';
+    const cap = lang[0].toUpperCase() + lang[1];
+    document.querySelectorAll('[data-label-' + lang + ']').forEach((element) => element.setAttribute('aria-label', element.dataset['label' + cap]));
+    document.querySelectorAll('[data-placeholder-' + lang + ']').forEach((element) => element.setAttribute('placeholder', element.dataset['placeholder' + cap]));
+  };
+  const light = (element) => {
+    element.classList.remove('live-lit');
+    void element.offsetWidth;
+    element.classList.add('live-lit');
+    setTimeout(() => element.classList.remove('live-lit'), 2600);
+  };
+  const inView = (element) => {
+    if (element.hidden || element.offsetParent === null) return false;
+    const box = element.getBoundingClientRect();
+    return box.bottom > 0 && box.top < window.innerHeight;
+  };
+  // L7a: the page as the server has it now, put in place by the page's own script.
+  let going = null;
+  let swapping = false;
+  const swapIn = (answer) => { swapping = true; return fetch(location.pathname, { cache: 'no-store' })
+    .then((response) => (response.ok ? response.text() : Promise.reject(new Error(String(response.status)))))
+    .then((text) => {
+      const next = new DOMParser().parseFromString(text, 'text/html');
+      const done = window.agentwhyLiveSwap(next);
+      if (!done) { later(answer); return; }
+      sent = next.documentElement.dataset.version || answer.version;
+      html.dataset.version = sent;
+      if (next.documentElement.dataset.conversations) html.dataset.conversations = next.documentElement.dataset.conversations;
+      waiting = null;
+      relabel();
+      done.fresh.forEach(light);
+      const unseen = done.added.filter((row) => !inView(row));
+      if (unseen.length === 0) { if (!going || inView(going.row)) hideGo(); return; }
+      going = { row: unseen[0], reveal: done.reveal };
+      pill.textContent = say('go.' + form(done.added.length)).replace('{n}', String(done.added.length));
+      pill.dataset.toTop = '';
+      pill.classList.add('live-foot', 'pill-primary');
+      pill.classList.remove('pill-light');
+      pill.hidden = false;
+    })
+    .catch(() => later(answer))
+    .finally(() => { swapping = false; }); };
+  const hideGo = () => {
+    going = null;
+    pill.hidden = true;
+    pill.classList.remove('live-foot', 'pill-primary');
+    pill.classList.add('pill-light');
+  };
+  const ask = () => fetch('api/version/' + file, { cache: 'no-store' })
+    .then((response) => {
+      // which-project V14, amended: this project's pages were given up for another's, in this process - said at once.
+      if (response.status === 410) { stop(); return null; }
+      return response.ok ? response.json() : Promise.reject(new Error(String(response.status)));
+    })
+    .then((answer) => {
+      misses = 0;
+      // What a page may say while the server answers: "Connected" on an empty week (the maintainer's design, 2026-09-29).
+      if (answer) html.dataset.live = 'on';
+      if (!answer || answer.version === sent || swapping) return;
+      waiting = answer;
+      if (typeof window.agentwhyLiveSwap === 'function') return swapIn(answer);
+      later(answer);
+    })
+    .catch(() => { misses += 1; if (misses >= 3) stop(); });
+  const loop = () => {
+    if (stopped) return;
+    clearTimeout(timer);
+    ask().finally(() => { if (!stopped) timer = setTimeout(loop, document.visibilityState === 'visible' ? 2000 : 60000); });
+  };
+
+  pill.addEventListener('click', () => {
+    if (!going) { apply(pill.dataset.toTop === 'true'); return; }
+    const { row, reveal } = going;
+    hideGo();
+    if (!row.isConnected) return;
+    reveal(row);
+    row.scrollIntoView({ block: 'center', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+    light(row);
+  });
+  const whenIdle = () => {
+    if (going && inView(going.row)) { light(going.row); hideGo(); }
+    if (waiting && !swapping && idle()) apply(false);
+  };
+  window.addEventListener('scroll', whenIdle, { passive: true });
+  document.addEventListener('close', whenIdle, true);
+  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && !stopped) loop(); });
+  timer = setTimeout(loop, 2000);
+})();
+`;

package/dist/report/render/ui/local-date.js

@@ -0,0 +1,58 @@
+const DAY = 86_400_000;
+const LOCALES = { en: 'en-US', pl: 'pl-PL', de: 'de-DE' };
+/** The calendar date a day number stands for. Day numbers are arithmetic only; no zone applies to them. */
+export function dayOf(number) {
+    const date = new Date(number * DAY);
+    return { number, year: date.getUTCFullYear(), month: date.getUTCMonth() + 1, day: date.getUTCDate(), weekday: (date.getUTCDay() + 6) % 7 };
+}
+/**
+ * Reads a moment as a calendar day and a time in one zone. An unknown zone name is read as UTC rather than failing a
+ * run: a page that says UTC is a page, and a run that stops over a clock setting is not.
+ */
+export function localClock(zone) {
+    const options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' };
+    let format;
+    try {
+        format = new Intl.DateTimeFormat('en-US', { ...options, timeZone: zone });
+    }
+    catch {
+        format = new Intl.DateTimeFormat('en-US', { ...options, timeZone: 'UTC' });
+    }
+    return (epoch) => {
+        const parts = Object.fromEntries(format.formatToParts(new Date(epoch)).map((part) => [part.type, part.value]));
+        const number = Math.floor(Date.UTC(Number(parts['year']), Number(parts['month']) - 1, Number(parts['day'])) / DAY);
+        return { day: dayOf(number), time: (parts['hour'] ?? '00').padStart(2, '0') + ':' + (parts['minute'] ?? '00').padStart(2, '0') };
+    };
+}
+const at = (day) => new Date(day.number * DAY);
+/** "Mon, Sep 21" - a day that is neither today nor yesterday. */
+export function dayName(day, lang) {
+    return new Intl.DateTimeFormat(LOCALES[lang], { timeZone: 'UTC', weekday: 'short', month: 'short', day: 'numeric' }).format(at(day));
+}
+/** "Mon 21" - the label of a day tile. */
+export function tileName(day, lang) {
+    const parts = new Intl.DateTimeFormat(LOCALES[lang], { timeZone: 'UTC', weekday: 'short', day: 'numeric' }).formatToParts(at(day));
+    const part = (type) => parts.find((each) => each.type === type)?.value ?? '';
+    return part('weekday') + ' ' + part('day');
+}
+/** "Sep 21 – 27", "Sep 28 – Oct 4" - a week, in the order each language writes a range. */
+export function rangeName(first, last, lang) {
+    return new Intl.DateTimeFormat(LOCALES[lang], { timeZone: 'UTC', month: 'short', day: 'numeric' }).formatRange(at(first), at(last));
+}
+/** "September 2026" - a month, as each language names one standing alone. */
+export function monthName(day, lang) {
+    const name = new Intl.DateTimeFormat(LOCALES[lang], { timeZone: 'UTC', month: 'long', year: 'numeric' }).format(at(day));
+    return name.charAt(0).toLocaleUpperCase(LOCALES[lang]) + name.slice(1);
+}
+/** "Mon" … "Sun" - the head of a calendar, Monday first. 2024-01-01 was a Monday. */
+export function weekdayNames(lang) {
+    const format = new Intl.DateTimeFormat(LOCALES[lang], { timeZone: 'UTC', weekday: 'short' });
+    return Array.from({ length: 7 }, (_unused, offset) => format.format(new Date(Date.UTC(2024, 0, 1 + offset))));
+}
+/** The first and the last day of the month a day falls in. */
+export function monthOf(day) {
+    return {
+        first: dayOf(Math.floor(Date.UTC(day.year, day.month - 1, 1) / DAY)),
+        last: dayOf(Math.floor(Date.UTC(day.year, day.month, 0) / DAY)),
+    };
+}

package/dist/report/render/ui/mode-icon.js

@@ -0,0 +1,6 @@
+export const MODE_SVG = {
+    block: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+        '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7.5a4 4 0 0 1 8 0V11"/></svg>',
+    tell: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+        '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>',
+};

package/dist/report/render/ui/page-shell.js

@@ -0,0 +1,101 @@
+import { FAVICON_LINK } from '../html-head.js';
+import { DEFAULT_LANG, translator } from '../report-copy.js';
+import { backdrop, BACKDROP_STYLE } from './backdrop.js';
+import { BUTTON_STYLE } from './button.js';
+import { CONFIRM_DIALOG_STYLE } from './confirm-dialog.js';
+import { liveParts, LIVE_SCRIPT, LIVE_STYLE } from './live-script.js';
+import { POPUP_SCRIPT, POPUP_STYLE } from './popup.js';
+import { THEME_COLOUR, TOKENS_STYLE } from './tokens.js';
+import { UPDATE_NOTICE_SCRIPT, UPDATE_NOTICE_STYLE } from './update-notice.js';
+/** What the update notice is drawn and worked with: its window is the kit's confirmation. */
+const NOTICE_STYLES = [BUTTON_STYLE, POPUP_STYLE, CONFIRM_DIALOG_STYLE, UPDATE_NOTICE_STYLE];
+const NOTICE_SCRIPTS = [POPUP_SCRIPT, UPDATE_NOTICE_SCRIPT];
+/**
+ * The document every page of the new design is: head, policy, icon, the tokens, the page's own pieces' styles, the
+ * background, the sidebar beside the content, and the scripts. The `js` class is set before any content, so a piece
+ * that only a script can work shows its control and hides its fallback in the same paint.
+ */
+export function pageShell(page) {
+    const windows = page.windows ?? [];
+    return [
+        '<!doctype html><html lang="' + DEFAULT_LANG + '" data-lang="' + DEFAULT_LANG + '"><head><meta charset="utf-8">',
+        '<meta name="viewport" content="width=device-width, initial-scale=1">',
+        '<meta name="color-scheme" content="dark"><meta name="theme-color" content="' + THEME_COLOUR + '">',
+        page.policy,
+        FAVICON_LINK,
+        '<title>' + translator(DEFAULT_LANG)(page.title) + '</title>',
+        '<style>' + [TOKENS_STYLE, BACKDROP_STYLE, SHELL_STYLE, LIVE_STYLE, ...new Set([...page.styles, ...(page.notice === undefined ? [] : NOTICE_STYLES), ...windows.flatMap((one) => one.styles)])].join('') + '</style></head>',
+        '<body><script>document.documentElement.classList.add(\'js\');' + EARLY_LANGUAGE_SCRIPT + '</script>',
+        backdrop(),
+        // Live pages: hidden until a served page has something new to say (`live-pages` L8, L13).
+        page.live === false ? '' : liveParts(),
+        page.notice ?? '',
+        ...windows.map((one) => one.html),
+        '<div class="shell">' + (page.sidebar ?? '') + '<main class="shell-main' + (page.width === undefined ? '' : ' shell-' + page.width) + '" id="main">' + page.main + '</main></div>',
+        ...[...new Set(page.libraries ?? [])].map((library) => '<script>' + library + '</script>'),
+        '<script>' + [LANGUAGE_SCRIPT, ...(page.live === false ? [] : [LIVE_SCRIPT]), ...new Set([...page.scripts, ...(page.notice === undefined ? [] : NOTICE_SCRIPTS), ...windows.flatMap((one) => one.scripts)])].join('\n') + '</script>',
+        '</body></html>',
+        '',
+    ].join('\n');
+}
+const SHELL_STYLE = String.raw `
+.shell{position:relative;z-index:1;min-height:100vh;display:flex}
+.shell-main{flex:1;min-width:0;max-width:1240px;margin:0 auto;padding:40px 32px 96px}
+.shell-narrow{max-width:780px}.shell-list{max-width:880px}
+@media (max-width:860px){.shell{flex-direction:column}.shell-main{width:100%;padding:28px 16px 72px}}
+`;
+/** The key the chosen language is kept under, so a later page can start where this one left off. */
+const LANG_STORAGE_KEY = 'agentwhy.lang';
+/**
+ * Folded into the `js` marker script, which runs before the sidebar and main content are parsed: the styles are
+ * already known by then (the `<style>` block precedes `<body>`), so setting `data-lang` here is early enough that
+ * the language picked on an earlier page applies to this one's first paint, with no separate `<script>` tag to
+ * count against §7.5's "one self-contained file, one inline enhancement script".
+ */
+const EARLY_LANGUAGE_SCRIPT = String.raw `
+(() => {
+  try {
+    const stored = localStorage.getItem('${LANG_STORAGE_KEY}');
+    if (stored === 'pl' || stored === 'de') {
+      document.documentElement.dataset.lang = stored;
+      document.documentElement.lang = stored;
+    }
+  } catch (e) {}
+})();
+`;
+/**
+ * Switching language changes which copy is visible; attributes, which cannot hold three languages, are rewritten
+ * from the one each element keeps per language. The choice is kept in storage, so the next page opened starts in
+ * the same language instead of falling back to English. Where the page is served, it is also written to the
+ * person's notice choices, so the line agentwhy leaves in the conversation speaks the same language
+ * (`the-agent-tells-you.md` R29). Nothing waits on that write, and a page with nowhere to send it sends nothing.
+ */
+const LANGUAGE_SCRIPT = String.raw `
+(() => {
+  const select = document.getElementById('lang');
+  const apply = (next) => {
+    const cap = next[0].toUpperCase() + next[1];
+    document.documentElement.dataset.lang = next;
+    document.documentElement.lang = next;
+    document.querySelectorAll('[data-label-' + next + ']').forEach((element) => {
+      element.setAttribute('aria-label', element.dataset['label' + cap]);
+    });
+    document.querySelectorAll('[data-placeholder-' + next + ']').forEach((element) => {
+      element.setAttribute('placeholder', element.dataset['placeholder' + cap]);
+    });
+  };
+  const stored = document.documentElement.dataset.lang;
+  if (stored && stored !== 'en') apply(stored);
+  if (select && stored) select.value = stored;
+  if (!select) return;
+  select.addEventListener('change', () => {
+    const next = select.value;
+    apply(next);
+    try { localStorage.setItem('${LANG_STORAGE_KEY}', next); } catch (e) {}
+    if (location.protocol === 'http:' || location.protocol === 'https:') {
+      fetch('api/notify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ scope: 'everywhere', lang: next }) })
+        .catch(() => {});
+    }
+  });
+})();
+`;

package/dist/report/render/ui/pill-tabs.js

@@ -0,0 +1,47 @@
+/** `state` is the page row whose pills say, with a dot, whether what each one opens is on (Settings). */
+export function pillTabs(tabs, variant, selected = 0, aside = '') {
+    return '<div class="tabs" data-tabs>' + (aside === '' ? '' : '<div class="tabs-top">') +
+        '<div class="tabs-bar tabs-' + variant + ' js-only" role="tablist">' + tabs.map((tab, at) => '<button type="button" class="tabs-pill' + (at === selected ? ' tabs-on' : '') + '" role="tab" data-tab="' + at + '"' +
+        ' aria-selected="' + String(at === selected) + '">' +
+        (tab.dot === undefined ? '' : '<span class="tabs-dot tabs-dot-' + tab.dot + '" aria-hidden="true"></span>') + tab.label + '</button>').join('') + '</div>' +
+        // Beside the pills, what belongs to the whole row rather than to one tab (To fix: "Your protection worked").
+        (aside === '' ? '' : aside + '</div>') +
+        tabs.map((tab, at) => '<section class="tabs-panel' + (at === selected ? ' tabs-on' : '') + '" role="tabpanel" data-tab-panel="' + at + '">' +
+            '<h3 class="tabs-fallback">' + tab.label + '</h3>' + tab.panel + '</section>').join('') +
+        '</div>';
+}
+export const PILL_TABS_STYLE = String.raw `
+.tabs-bar{display:flex;padding:3px;border-radius:999px;width:fit-content}
+.js .tabs-bar.js-only{display:flex}
+.tabs-page{background:var(--card);border:1px solid var(--white-09);margin-bottom:22px}
+.tabs-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
+.tabs-top .tabs-bar{margin-bottom:0}
+.tabs-inset{gap:4px;background:var(--panel);border:1px solid var(--white-08);margin-bottom:24px}
+.tabs-pill{border:none;border-radius:999px;font:inherit;font-size:14px;cursor:pointer;background:transparent;color:var(--text-2)}
+.tabs-page .tabs-pill{padding:8px 18px;font-weight:600}
+.tabs-inset .tabs-pill{padding:7px 16px;font-weight:500}
+.tabs-state{padding:4px;background:var(--card);border:1px solid var(--white-09);margin-bottom:22px}
+.tabs-state .tabs-pill{display:flex;align-items:center;gap:8px;padding:9px 18px;font-size:14.5px;font-weight:600;white-space:nowrap}
+@media (max-width:420px){.tabs-state .tabs-pill{padding:9px 13px}}
+.tabs-dot{width:7px;height:7px;border-radius:50%}.tabs-dot-mint{background:var(--mint)}.tabs-dot-grey{background:var(--white-25)}
+.tabs-pill.tabs-on{background:var(--text);color:var(--bg)}
+.js .tabs-panel:not(.tabs-on){display:none}
+.tabs-fallback{margin:24px 0 12px;font-size:16px;font-weight:650}
+.js .tabs-fallback{display:none}
+`;
+/** Switches the panel of the tab row it was pressed in, and nothing else. */
+export const PILL_TABS_SCRIPT = String.raw `
+document.addEventListener('click', (event) => {
+  const tab = event.target.closest('[data-tab]');
+  if (!tab) return;
+  const group = tab.closest('[data-tabs]');
+  const at = tab.getAttribute('data-tab');
+  // The pills are the row's own, whether or not something stands beside them (an aside, in .tabs-top).
+  group.querySelectorAll(':scope > .tabs-bar [data-tab], :scope > .tabs-top > .tabs-bar [data-tab]').forEach((each) => {
+    const on = each === tab;
+    each.classList.toggle('tabs-on', on);
+    each.setAttribute('aria-selected', String(on));
+  });
+  group.querySelectorAll(':scope > [data-tab-panel]').forEach((panel) => panel.classList.toggle('tabs-on', panel.getAttribute('data-tab-panel') === at));
+});
+`;