@agentwhy/cli 0.0.0-dev

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

@@ -0,0 +1,77 @@
+import { stars } from './backdrop.js';
+export function popup(spec) {
+    const sky = spec.size === 'wide' ? '<div class="pp-sky" aria-hidden="true">' + stars(34) + '</div>' : '';
+    return '<dialog class="pp pp-' + spec.size + '" id="' + spec.id + '" aria-labelledby="' + spec.labelledBy + '">' + sky + spec.body + '</dialog>';
+}
+/** What a link or button needs to open a window: its address with no script, and the id the script opens. */
+export function opens(id) {
+    return ' href="#' + id + '"' + opener(id);
+}
+/** Only the id the script opens, for a control that has its address already (a pill given `href: '#' + id`). */
+export function opener(id) {
+    return ' data-popup-open="' + id + '"';
+}
+/** What a control needs to close the window it sits in. */
+export const CLOSES = ' data-popup-close';
+/** The strip at the bottom of a window: a grey note on the left, its actions on the right. */
+export function popupFoot(note, actions, tight = false) {
+    return '<div class="pp-foot' + (tight ? ' pp-foot-tight' : '') + '"><span class="pp-note">' + note + '</span>' +
+        '<span class="pp-actions">' + actions + '</span></div>';
+}
+export const POPUP_STYLE = String.raw `
+dialog.pp{padding:0;border:1px solid var(--white-09);border-radius:22px;background:var(--popup);color:var(--text);box-shadow:0 40px 120px var(--shadow);width:calc(100% - 40px);max-width:1200px;max-height:calc(100vh - 96px);overflow:auto;margin:48px auto auto}
+dialog.pp-wide{background:radial-gradient(900px 300px at 35% -60px,var(--coral-08) 0%,transparent 70%) no-repeat local,radial-gradient(1200px 480px at 50% -120px,var(--glow) 0%,var(--glow-mid) 55%,transparent 100%) no-repeat local,var(--popup)}
+dialog.pp-wide{isolation:isolate}
+.pp-sky{position:absolute;left:0;right:0;top:0;height:min(100%,900px);z-index:-1;pointer-events:none;overflow:hidden}
+html:not(.js) dialog.pp-wide:target{position:relative}
+dialog.pp::backdrop{background:var(--backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
+dialog.pp-wizard{max-width:640px;margin-top:56px;max-height:calc(100vh - 112px)}
+dialog.pp-list{max-width:800px;margin-top:56px;max-height:calc(100vh - 112px)}
+dialog.pp-small,dialog.pp-pick,dialog.pp-confirm{border-color:var(--white-10);border-radius:20px;margin:auto}
+dialog.pp-small{max-width:560px}dialog.pp-pick{max-width:520px}dialog.pp-confirm{max-width:460px}
+html:not(.js) dialog.pp:target{display:block;position:static;margin:24px auto;max-height:none}
+.pp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 32px;border-top:1px solid var(--white-07);background:var(--popup-foot)}
+.pp-foot-tight{padding:16px 24px}
+.pp-note{font-size:13px;color:var(--text-3)}
+.pp-actions{display:flex;gap:10px;align-items:center}
+@media (max-width:640px){dialog.pp{margin-top:16px;width:calc(100% - 20px)}.pp-foot{padding:14px 18px}}
+`;
+/**
+ * Opens a window from its link, closes it from any control marked to, and from a click on the backdrop - the dialog
+ * itself, outside its content. Escape is the browser's. Closing gives the focus back to what opened it.
+ */
+export const POPUP_SCRIPT = String.raw `
+document.addEventListener('click', (event) => {
+  const opener = event.target.closest('[data-popup-open]');
+  if (opener) {
+    const dialog = document.getElementById(opener.getAttribute('data-popup-open'));
+    if (dialog && typeof dialog.showModal === 'function') {
+      event.preventDefault();
+      dialog.opener = opener;
+      if (!dialog.open) dialog.showModal();
+    }
+    return;
+  }
+  const closer = event.target.closest('[data-popup-close]');
+  if (closer) {
+    const dialog = closer.closest('dialog');
+    if (dialog) { event.preventDefault(); dialog.close(); }
+    return;
+  }
+  if (event.target instanceof HTMLDialogElement && event.target.open) {
+    const box = event.target.getBoundingClientRect();
+    const inside = event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
+    if (!inside) event.target.close();
+  }
+});
+document.addEventListener('close', (event) => {
+  const dialog = event.target;
+  if (dialog instanceof HTMLDialogElement && dialog.opener && typeof dialog.opener.focus === 'function') dialog.opener.focus();
+}, true);
+// A window named by the address is open when the page loads: a link from another page (the Files window of
+// Conversations, F58) lands on the window it names, not on the page under it.
+(() => {
+  const named = location.hash.length > 1 ? document.getElementById(decodeURIComponent(location.hash.slice(1))) : null;
+  if (named instanceof HTMLDialogElement && named.classList.contains('pp') && typeof named.showModal === 'function' && !named.open) named.showModal();
+})();
+`;

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

@@ -0,0 +1,35 @@
+/**
+ * Where a person is (guidelines §1.5): the mint bar with "{n} of {N} done", the rail of one dash per file in the Fix it
+ * wizard, and its stepper of three steps.
+ */
+/** The mint bar and its words, already written in every language. */
+export function progressBar(done, total, words) {
+    const percent = total === 0 ? 0 : Math.round((done / total) * 1000) / 10;
+    return '<span class="pg"><span class="pg-track" role="progressbar" aria-valuemin="0" aria-valuemax="' + total +
+        '" aria-valuenow="' + done + '"><span class="pg-fill" style="width:' + percent + '%"></span></span>' +
+        '<span class="pg-words">' + words + '</span></span>';
+}
+/** One dash per item; its title is the item's name, escaped by the caller; `item` is what a script finds it by. */
+export function rail(dashes) {
+    return '<div class="rl" aria-hidden="true">' + dashes.map((dash) => '<span class="rl-dash rl-' + dash.state + '" title="' + dash.title + '"' +
+        (dash.item === undefined ? '' : ' data-rail-item="' + dash.item + '"') + '></span>').join('') + '</div>';
+}
+/** The wizard's steps: a past one carries a tick, the current one is lit, the rest wait. Labels in every language. */
+export function stepper(steps) {
+    return '<ol class="st">' + steps.map((step, at) => '<li class="st-step st-' + step.state + '"' + (step.state === 'current' ? ' aria-current="step"' : '') + '>' +
+        '<span class="st-mark" aria-hidden="true">' + (step.state === 'past' ? '✓' : String(at + 1)) + '</span>' + step.label + '</li>').join('') + '</ol>';
+}
+export const PROGRESS_STYLE = String.raw `
+.pg{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
+.pg-track{display:block;width:90px;height:5px;border-radius:999px;background:var(--white-08);overflow:hidden}
+.pg-fill{display:block;height:100%;background:var(--mint);border-radius:999px;transition:width .4s}
+.pg-words{white-space:nowrap}
+.rl{display:flex;gap:6px;margin-bottom:18px}
+.rl-dash{flex:1;height:5px;border-radius:3px;background:var(--white-12)}
+.rl-now{background:var(--coral)}.rl-done{background:var(--mint)}
+.st{flex:1;display:flex;gap:6px;justify-content:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}
+.st-step{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;color:var(--text-3)}
+.st-mark{width:18px;height:18px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;background:var(--white-08);color:var(--text-2)}
+.st-current{color:var(--text);background:var(--white-07)}.st-current .st-mark{background:var(--coral);color:var(--on-coral)}
+.st-past{color:var(--mint)}.st-past .st-mark{background:var(--mint);color:var(--on-coral)}
+`;

package/dist/report/render/ui/project-list.js

@@ -0,0 +1,284 @@
+import { escapeHtml as e } from '../html-report-components.js';
+import { inLanguages, LANGS, translator } from '../report-copy.js';
+import { initial } from './app-sidebar.js';
+import { dayName, localClock } from './local-date.js';
+import { tag } from './tag.js';
+/** V10: at most this many rows, then how many older projects there are. */
+const ROWS = 30;
+/** The design's step shows five, and "Show 3 more projects" for the rest. */
+const FIRST = 5;
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+/**
+ * The list of a person's projects (V10, V11), drawn as the maintainer's design of 2026-09-28 draws it: the project this
+ * page is about on its own, under "You're here now"; the others in one table, newest first, each with its status in one
+ * column and what can be done in the next - so which project to pick is plain at a glance. A row says the project's
+ * name, when it was last used and how many AI chats it has; where it is, whole, on hover. Folders that are gone are
+ * folded into one line at the table's foot, opened with no script.
+ */
+export function projectList(spec) {
+    const clock = localClock(spec.timeZone);
+    const today = clock(spec.now).day.number;
+    const when = (row) => lastUsed(row.newest.modifiedAt, spec.now, clock, today);
+    const here = spec.rows.find((row) => row.current);
+    const others = spec.rows.filter((row) => !row.current && row.exists);
+    const gone = spec.rows.filter((row) => !row.current && !row.exists);
+    const shown = others.slice(0, ROWS);
+    const older = others.length - shown.length;
+    if (spec.pick !== undefined)
+        return pickList(spec, spec.pick, when);
+    const action = spec.action;
+    const row = (one) => '<li class="pjl-row"' + searchable(one) + '>' + cells(one, when, action) + '</li>';
+    return '<div class="pjl">' +
+        (here === undefined ? '' :
+            '<p class="pjl-label">' + inLanguages((t) => t('proj.here')) + '</p>' +
+                '<div class="pjl-here' + (here.setUp === true ? ' pjl-here-set' : '') + '">' + cells(here, when, action) + '</div>') +
+        '<div class="pjl-label-line"><p class="pjl-label">' + inLanguages((t) => t('proj.others')) + '</p>' +
+        (others.length + gone.length === 0 ? '' : search()) + '</div>' +
+        '<p class="pjl-none" data-search-none hidden></p>' +
+        (shown.length === 0 && gone.length === 0
+            ? '<p class="pjl-none">' + inLanguages((t) => t('proj.none')) + '</p>'
+            : '<div class="pjl-table">' +
+                (shown.length === 0 ? '' :
+                    '<div class="pjl-heads" aria-hidden="true"><span></span><span>' + inLanguages((t) => t('proj.col.project')) + '</span>' +
+                        '<span>' + inLanguages((t) => t('proj.col.status')) + '</span><span></span></div>' +
+                        '<ul class="pjl-rows">' + shown.map(row).join('') + '</ul>') +
+                (gone.length === 0 ? '' :
+                    '<details class="pjl-gone"><summary class="pjl-gone-line"><span>' + inLanguages((t) => t('proj.goneFold', { n: gone.length })) + '</span>' +
+                        '<span class="pjl-gone-toggle"><span class="pjl-gone-show">' + inLanguages((t) => t('fold.show')) + '</span>' +
+                        '<span class="pjl-gone-hide">' + inLanguages((t) => t('fold.hide')) + '</span> ▾</span></summary>' +
+                        '<ul class="pjl-rows">' + gone.map((one) => '<li class="pjl-row pjl-row-gone"' + searchable(one) + '>' + cells(one, when, undefined) + '</li>').join('') + '</ul></details>') +
+                '</div>') +
+        (spec.temporary === undefined || spec.temporary === 0 ? '' : '<p class="pjl-foot">' + hiddenLine(spec.temporary, 0) + '</p>') +
+        feet(older, spec.unreadable) +
+        '</div>';
+}
+/** How many older projects are not drawn, and how many could not be read. */
+function feet(older, unreadable) {
+    return (older === 0 ? '' : '<p class="pjl-foot">' + inLanguages((t) => t('proj.older', { n: older })) + '</p>') +
+        (unreadable === 0 ? '' : '<p class="pjl-foot">' + inLanguages((t) => t('proj.unreadable', { n: unreadable })) + '</p>');
+}
+/**
+ * The step's list (V11, the maintainer's design): "Where you started agentwhy" and its row, chosen, where the run is in a
+ * listed project; the others under "Other projects" - or "Your projects", where it is in none - five of them, and the rest
+ * behind **Show 3 more projects**, which only a script folds; what is not listed, counted beside it. Nothing is chosen
+ * where the run is in no listed project.
+ */
+function pickList(spec, group, when) {
+    const here = spec.rows.find((row) => row.current && row.exists);
+    const others = spec.rows.filter((row) => !row.current && row.exists);
+    const gone = spec.rows.filter((row) => !row.exists).length;
+    const shown = others.slice(0, ROWS);
+    const more = Math.max(0, shown.length - FIRST);
+    const hidden = hiddenLine(spec.temporary ?? 0, gone);
+    return '<div class="pjl pjl-picking' + (more > 0 ? ' pjl-folded' : '') + '">' +
+        (here === undefined ? '' :
+            '<p class="pjl-label">' + inLanguages((t) => t('proj.startedIn')) + '</p>' +
+                '<label class="pjl-pick pjl-pick-here">' + pickCells(here, when, group) + '</label>') +
+        '<p class="pjl-label">' + inLanguages((t) => t(here === undefined ? 'proj.yours' : 'proj.others')) + '</p>' +
+        (shown.length === 0
+            ? '<p class="pjl-none">' + inLanguages((t) => t('proj.none')) + '</p>'
+            : '<div class="pjl-table"><ul class="pjl-rows">' +
+                shown.map((row, at) => '<li class="pjl-row-pick"' + (at >= FIRST ? ' data-pjl-extra' : '') + '><label class="pjl-pick">' + pickCells(row, when, group) + '</label></li>').join('') +
+                '</ul>' +
+                (more === 0 && hidden === '' ? '' :
+                    '<div class="pjl-more-line">' +
+                        (more === 0 ? '<span></span>' : '<button type="button" class="pjl-more js-only" data-pjl-more>' + inLanguages((t) => t('proj.more', { n: more })) + ' ▾</button>') +
+                        (hidden === '' ? '' : '<span class="pjl-hidden">' + hidden + '</span>') + '</div>') +
+                '</div>') +
+        feet(others.length - shown.length, spec.unreadable) +
+        '</div>';
+}
+/** A row of the step: its radio, the project - "Started here" beside the run's own - and its status. */
+function pickCells(row, when, group) {
+    return radio(group, row) +
+        '<span class="pjl-project"><span class="pjl-name-line"><span class="pjl-name" title="' + e(row.place) + '">' + e(row.name) + '</span>' +
+        (row.current ? tag(inLanguages((t) => t('proj.startedHere')), 'grey', 'badge') : '') + '</span>' +
+        '<span class="pjl-detail"><span class="pjl-in">' + inParent(row.place) + ' · </span>' + when(row) + ' · ' + inLanguages((t) => t('proj.chats', { n: row.conversations })) + '</span></span>' +
+        '<span class="pjl-status">' + status(row) + '</span>';
+}
+/** "in Projects": the folder a project lies in, as a person reads it - "in your home folder" where that is where. */
+function inParent(place) {
+    const cut = Math.max(place.lastIndexOf('/'), place.lastIndexOf('\\'));
+    const parent = cut <= 0 ? place.slice(0, cut + 1) : place.slice(0, cut);
+    if (parent === '~')
+        return inLanguages((t) => t('proj.inHome'));
+    return inLanguages((t) => t('proj.in', { place: e(parent.replace(/^~[\\/]/, '')) }));
+}
+/** "Hidden: 1 temporary folder, 1 that no longer exists": what the list leaves out, counted. Empty where nothing is. */
+function hiddenLine(temporary, gone) {
+    if (temporary + gone === 0)
+        return '';
+    return inLanguages((t) => t('proj.hidden', {
+        what: [temporary > 0 ? t('proj.hidden.temporary', { n: temporary }) : '', gone > 0 ? t('proj.hidden.gone', { n: gone }) : ''].filter((part) => part !== '').join(', '),
+    }));
+}
+/**
+ * A small field that narrows the list as it is typed in, by a project's name or where it is (the maintainer, 2026-09-28).
+ * Only a script can narrow, so only a page with one shows it; its placeholder is set in the page's language.
+ */
+function search() {
+    const words = Object.fromEntries(LANGS.map((lang) => [lang, { placeholder: translator(lang)('proj.search'), none: translator(lang)('proj.noMatch', { q: '{q}' }) }]));
+    return '<input type="search" class="pjl-search js-only" data-project-search autocomplete="off" spellcheck="false"' +
+        ' aria-label="' + e(translator('en')('proj.search')) + '" data-search-words="' + e(JSON.stringify(words)) + '">';
+}
+/**
+ * A row's radio, in the column where the window offers **Open**: a real one, so the keys move between the rows as they do
+ * in any group. What the page chooses by is the id, never a path (V17). The row chosen is mint, not coral (the
+ * maintainer, 2026-09-29): choosing a project is a safe thing, and coral read as a warning.
+ */
+function radio(group, row) {
+    return '<input type="radio" class="pjl-radio-input" name="' + e(group) + '" value="' + e(row.id) + '" data-pick-name="' + e(row.name) + '"' +
+        (row.current ? ' data-pick-here checked' : '') + '><span class="pjl-radio" aria-hidden="true"><span class="pjl-radio-dot"></span></span>';
+}
+/** What the field matches a row by: its name and where it is, in lower case. */
+function searchable(row) {
+    return ' data-search="' + e((row.name + ' ' + row.place).toLowerCase()) + '"';
+}
+/** A row's four cells: the folder's initial, the project, its status, and what it offers. */
+function cells(row, when, action) {
+    const detail = row.exists
+        ? when(row) + ' · ' + inLanguages((t) => t('proj.chats', { n: row.conversations }))
+        : inLanguages((t) => t('proj.gone'));
+    return '<span class="pjl-mark" aria-hidden="true">' + e(initial(row.name)) + '</span>' +
+        '<span class="pjl-project"><span class="pjl-name" title="' + e(row.place) + '">' + e(row.name) + '</span>' +
+        '<span class="pjl-detail">' + detail + '</span></span>' +
+        '<span class="pjl-status">' + status(row) + '</span>' +
+        '<span class="pjl-action">' + (row.exists && action !== undefined ? action(row) : '') + '</span>';
+}
+/** Set up (mint), not set up yet (amber); nothing where it is not known, or the folder is gone (V10). */
+function status(row) {
+    return !row.exists || row.setUp === undefined ? ''
+        : row.setUp ? tag(inLanguages((t) => t('proj.setUp')), 'mint') : tag(inLanguages((t) => t('proj.notSetUp')), 'amber');
+}
+/** "Last used 2 hours ago", "…yesterday", "…Mon, Sep 21": as near as the moment is, in the page's clock. */
+function lastUsed(at, now, clock, today) {
+    const since = Math.max(0, now - at);
+    const day = clock(at).day;
+    const ago = (t, lang) => since < MINUTE ? t('proj.ago.now')
+        : since < HOUR ? t('proj.ago.minutes', { n: Math.floor(since / MINUTE) })
+            : day.number === today ? t('proj.ago.hours', { n: Math.floor(since / HOUR) })
+                : day.number === today - 1 ? t('proj.ago.yesterday')
+                    : dayName(day, lang);
+    return inLanguages((t, lang) => t('proj.used', { when: ago(t, lang) }));
+}
+export const PROJECT_LIST_STYLE = String.raw `
+.pjl{--pjl-columns:44px minmax(0,1fr) 172px 128px}
+.pjl-label{margin:22px 4px 10px;font-size:13.5px;font-weight:600;color:var(--text-3)}
+.pjl-label:first-child{margin-top:4px}
+.pjl-label-line{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
+.pjl-label-line .pjl-label{margin-top:22px}
+.pjl-search{width:200px;margin:0 0 8px;padding:7px 12px;border-radius:999px;border:1px solid var(--white-14);background:var(--card);color:var(--text);font:inherit;font-size:13.5px}
+.pjl-search::placeholder{color:var(--text-3)}
+.pjl-search:focus{outline:none;border-color:var(--white-32)}
+.pjl [hidden]{display:none!important}
+.pjl-here,.pjl-row{display:grid;grid-template-columns:var(--pjl-columns);gap:18px;align-items:center}
+.pjl-here{grid-template-columns:44px minmax(0,1fr) auto;padding:18px 20px;border-radius:16px;background:var(--raised);border:1px solid var(--white-28)}
+.pjl-here .pjl-action:empty{display:none}
+.pjl-here-set{border-color:var(--mint-50);background:var(--mint-05)}
+.pjl-here-set .pjl-mark{background:var(--mint-14);border-color:var(--mint-30);color:var(--mint)}
+.pjl-table{border:1px solid var(--white-09);border-radius:16px;background:var(--card);overflow:hidden}
+.pjl-heads{display:grid;grid-template-columns:var(--pjl-columns);gap:18px;padding:13px 20px;font-size:12.5px;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--white-07)}
+.pjl-rows{list-style:none;margin:0;padding:0}
+.pjl-row{padding:14px 20px;border-top:1px solid var(--white-07)}
+.pjl-rows>.pjl-row:first-child{border-top:0}
+.pjl-row-gone{opacity:.5}
+.pjl-mark{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--white-06);border:1px solid var(--white-10);color:var(--text);font-size:16px;font-weight:650}
+.pjl-project{min-width:0;display:flex;flex-direction:column;gap:3px}
+.pjl-name{font-size:16.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pjl-detail{font-size:14px;line-height:1.4;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pjl-status{display:flex;align-items:center}
+.pjl-action{display:flex;align-items:center;justify-content:flex-end}
+.pjl-picking .pjl-label{margin:18px 4px 8px}
+.pjl-pick{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:16px;align-items:center;padding:13px 18px;cursor:pointer;transition:background .15s,border-color .2s}
+.pjl-pick:hover{background:var(--white-04)}
+.pjl-pick:has(:checked){background:var(--mint-05)}
+.pjl-pick-here{border-radius:14px;background:var(--card);border:1px solid var(--white-09)}
+.pjl-pick-here:has(:checked){border-color:var(--mint-50)}
+.pjl-row-pick{border-top:1px solid var(--white-07)}
+.pjl-rows>.pjl-row-pick:first-child{border-top:0}
+.pjl-name-line{display:flex;align-items:center;gap:8px;min-width:0}
+.pjl-picking .pjl-name{font-size:15.5px}
+.pjl-picking .pjl-detail{font-size:13px;color:var(--text-3)}
+.js .pjl-folded [data-pjl-extra]{display:none}
+.pjl-more-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--white-07);font-size:13px}
+.pjl-more{background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-soft);cursor:pointer}
+.pjl-more:hover{color:var(--text)}
+.js .pjl-picking:not(.pjl-folded) .pjl-more{display:none}
+.pjl-hidden{color:var(--text-3);text-align:right}
+.pjl-radio-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
+.pjl-radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--white-30);display:flex;align-items:center;justify-content:center;transition:border-color .2s,box-shadow .2s}
+.pjl-radio-dot{width:11px;height:11px;border-radius:50%;transform:scale(0);transition:transform .2s cubic-bezier(.2,.9,.3,1.3),background .2s}
+.pjl-radio-input:checked+.pjl-radio{border-color:var(--mint)}
+.pjl-radio-input:checked+.pjl-radio .pjl-radio-dot{background:var(--mint);transform:scale(1)}
+.pjl-radio-input:focus-visible+.pjl-radio{box-shadow:0 0 0 3px var(--coral-45)}
+.pjl-gone{border-top:1px solid var(--white-07)}
+.pjl-gone-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;cursor:pointer;list-style:none;font-size:14px;color:var(--text-2)}
+.pjl-gone-line::-webkit-details-marker{display:none}
+.pjl-gone-line:hover{color:var(--text)}
+.pjl-gone-toggle{font-weight:600;color:var(--text-soft);white-space:nowrap}
+.pjl-gone-hide{display:none}.pjl-gone[open] .pjl-gone-hide{display:inline}.pjl-gone[open] .pjl-gone-show{display:none}
+.pjl-gone .pjl-rows{border-top:1px solid var(--white-07)}
+.pjl-foot,.pjl-none{margin:12px 4px 0;font-size:13px;line-height:1.5;color:var(--text-3)}
+@media (max-width:720px){
+.pjl{--pjl-columns:40px minmax(0,1fr) auto}
+.pjl-search{width:150px}
+.pjl-heads{display:none}
+.pjl-here,.pjl-row,.pjl-pick{gap:6px 12px;padding:14px 16px}
+.pjl-picking .pjl-pick{grid-template-columns:22px minmax(0,1fr)}
+.pjl-picking .pjl-radio{grid-row:span 2}
+.pjl-in{display:none}
+.pjl-more-line{flex-direction:column;align-items:flex-start}.pjl-hidden{text-align:left}
+.pjl-mark{width:40px;height:40px;grid-row:span 2}
+.pjl-project{grid-column:2}
+.pjl-status{grid-column:2;grid-row:2}
+.pjl-action{grid-column:3;grid-row:1 / span 2}
+.pjl-row .pjl-detail{display:none}
+.pjl-here .pjl-status{grid-row:auto}
+}
+`;
+/**
+ * The field narrows the rows to those whose name or place holds what is typed; a folder that is gone is looked in too,
+ * and its fold opens where it holds a match. Nothing matching is said, with the words typed.
+ */
+export const PROJECT_LIST_SCRIPT = String.raw `
+(() => {
+  // The step's list: the rest of the projects, a click away.
+  document.querySelectorAll('[data-pjl-more]').forEach((button) => button.addEventListener('click', () => {
+    const list = button.closest('.pjl');
+    if (list) list.classList.remove('pjl-folded');
+  }));
+  document.querySelectorAll('[data-project-search]').forEach((input) => {
+    const list = input.closest('.pjl');
+    if (!list) return;
+    const rows = [...list.querySelectorAll('[data-search]')];
+    const none = list.querySelector('[data-search-none]');
+    const gone = list.querySelector('.pjl-gone');
+    const words = JSON.parse(input.getAttribute('data-search-words'));
+    const said = () => words[document.documentElement.dataset.lang] || words.en;
+    const place = () => { input.placeholder = said().placeholder; };
+    place();
+    const language = document.getElementById('lang');
+    if (language) language.addEventListener('change', () => setTimeout(place, 0));
+    input.addEventListener('input', () => {
+      const typed = input.value.trim();
+      const wanted = typed.toLowerCase();
+      let found = 0;
+      rows.forEach((row) => {
+        const hit = wanted === '' || row.getAttribute('data-search').includes(wanted);
+        row.hidden = !hit;
+        if (hit) found += 1;
+      });
+      if (gone) {
+        const inGone = rows.filter((row) => gone.contains(row) && !row.hidden).length;
+        gone.hidden = wanted !== '' && inGone === 0;
+        if (wanted !== '' && inGone > 0) gone.open = true;
+      }
+      if (none) {
+        none.hidden = wanted === '' || found > 0;
+        none.textContent = said().none.replace('{q}', typed);
+      }
+    });
+  });
+})();
+`;

package/dist/report/render/ui/scope-choice.js

@@ -0,0 +1,19 @@
+export function scopeChoice(question, name, options, chosen = 'local') {
+    return '<fieldset class="sc"><legend class="sc-q">' + question + '</legend>' + options.map((option) => '<label class="sc-option"><input type="radio" class="sc-radio" name="' + name + '" value="' + option.value + '"' +
+        (option.value === chosen ? ' checked' : '') + '><span class="sc-ring" aria-hidden="true"></span>' +
+        '<span class="sc-text"><span class="sc-label">' + option.label + '</span><span class="sc-sub">' + option.sub + '</span></span></label>').join('') +
+        '</fieldset>';
+}
+export const SCOPE_CHOICE_STYLE = String.raw `
+.sc{border:0;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
+.sc-q{padding:0;margin-bottom:10px;font-size:13.5px;font-weight:600;color:var(--text-3)}
+.sc-option{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--white-09);cursor:pointer}
+.sc-option:has(.sc-radio:checked){background:var(--mint-07);border-color:var(--mint-50)}
+.sc-option:has(.sc-radio:focus-visible){outline:2px solid var(--coral);outline-offset:2px}
+.sc-radio{position:absolute;opacity:0;pointer-events:none}
+.sc-ring{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--white-30);display:flex;align-items:center;justify-content:center;margin-top:1px}
+.sc-ring:after{content:"";width:10px;height:10px;border-radius:50%}
+.sc-radio:checked+.sc-ring{border-color:var(--mint)}.sc-radio:checked+.sc-ring:after{background:var(--mint)}
+.sc-label{display:block;font-size:15px;font-weight:600}
+.sc-sub{display:block;font-size:13.5px;line-height:1.45;color:var(--text-2);margin-top:3px}
+`;

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

@@ -0,0 +1,21 @@
+/**
+ * A small number with its name (Advanced's four numbers, the record tab's): `page` sits on the page, `record` inside a
+ * window. The tone colours the number only.
+ */
+export function stats(items, variant) {
+    return '<div class="sx sx-' + variant + '">' + items.map((item) => '<div class="sx-card"><div class="sx-label">' + item.label + '</div><div class="sx-value' +
+        (item.tone === undefined ? '' : ' sx-' + item.tone) + '">' + item.value + '</div></div>').join('') + '</div>';
+}
+export const STAT_STYLE = String.raw `
+.sx{display:grid;gap:10px}
+.sx-page{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:16px}
+.sx-record{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:28px}
+.sx-card{border-radius:14px}
+.sx-page .sx-card{padding:14px 18px;background:var(--card);border:1px solid var(--white-08)}
+.sx-record .sx-card{padding:16px 18px;background:var(--raised);border:1px solid var(--white-07)}
+.sx-label{color:var(--text-3)}
+.sx-page .sx-label{font-size:12.5px;margin-bottom:4px}.sx-record .sx-label{font-size:13px;margin-bottom:6px}
+.sx-value{font-weight:650;color:var(--text)}
+.sx-page .sx-value{font-size:24px}.sx-record .sx-value{font-size:26px;letter-spacing:-0.01em}
+.sx-coral{color:var(--coral-text)}.sx-mint{color:var(--mint)}
+`;

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

@@ -0,0 +1,30 @@
+import { inLanguages } from '../report-copy.js';
+import { LOOKS } from './status-look.js';
+/**
+ * The look in a 26px circle, and its words beside it (guidelines §4, "AI icons"). `label`, already written in every
+ * language, says it of one file where the look's own words say it of a conversation ("Read it", not "Read private files").
+ */
+export function statusIcon(look, label) {
+    const style = LOOKS[look];
+    return glyphIcon(style.glyph, style.tone, label ?? inLanguages((t) => t(style.label)));
+}
+/**
+ * Any state drawn the way a look is - a glyph in the 26px circle, its words beside it, both in the state's colour - for
+ * a state that is not what the AI did: whether a file is blocked (the Files table's mode column, `mode-icon.ts`).
+ */
+export function glyphIcon(glyph, tone, label) {
+    return '<span class="look look-' + tone + '"><span class="look-glyph" aria-hidden="true">' + glyph + '</span>' +
+        '<span class="look-label">' + label + '</span></span>';
+}
+export const STATUS_ICON_STYLE = String.raw `
+.look{display:flex;align-items:center;gap:9px}
+.look-glyph{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
+.look-glyph svg{width:13px;height:13px}
+.look-label{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
+.look-coral .look-glyph{background:var(--coral-16);color:var(--coral-text)}.look-coral .look-label{color:var(--coral-text)}
+.look-amber .look-glyph{background:var(--amber-16);color:var(--amber)}.look-amber .look-label{color:var(--amber)}
+.look-mint .look-glyph{background:var(--mint-14);color:var(--mint)}.look-mint .look-label{color:var(--mint)}
+.look-sand .look-glyph{background:var(--sand-16);color:var(--sand)}.look-sand .look-label{color:var(--sand)}
+.look-blue .look-glyph{background:var(--blue-16);color:var(--blue)}.look-blue .look-label{color:var(--blue)}
+.look-grey .look-glyph{background:var(--white-06);color:var(--text-2)}.look-grey .look-label{color:var(--text-2)}
+`;

package/dist/report/render/ui/status-look.js

@@ -0,0 +1,21 @@
+import { MODE_SVG } from './mode-icon.js';
+/**
+ * One meaning, one look, read by every place a look is shown - a table row, a day tile, a guide card - so the same
+ * fact is never drawn in two colours (`.ai/plans/2026-09-23-conversations-redesign.md`, rule 5).
+ */
+export const LOOKS = {
+    read: { glyph: '◉', label: 'look.read', tone: 'coral', needsFix: true, attention: true, known: true },
+    // The glyph says what the AI did, which a mark does not undo; the colour says it is done (guidelines §2).
+    fixed: { glyph: '◉', label: 'look.fixed', tone: 'mint', needsFix: false, attention: false, known: true },
+    // It read them, as the person chose: Track's colour and a tick, not a read's coral ◉, since there is nothing to fix
+    // (the maintainer, 2026-09-25; violet and ◉ the same morning).
+    allowed: { glyph: '✓', label: 'look.allowed', tone: 'sand', needsFix: false, attention: true, known: true },
+    // Blue, not amber (the maintainer, 2026-09-25): a name seen is harmless, and amber sat too near Track's sand. The eye,
+    // not ○ (the maintainer, 2026-09-30): it saw the name, drawn with Settings' eye (`mode-icon.ts`).
+    name: { glyph: MODE_SVG.tell, label: 'look.name', tone: 'blue', needsFix: false, attention: false, known: true },
+    stopped: { glyph: '⊘', label: 'look.stopped', tone: 'mint', needsFix: false, attention: false, known: true },
+    none: { glyph: '✓', label: 'look.none', tone: 'grey', needsFix: false, attention: false, known: true },
+    unchecked: { glyph: '?', label: 'look.unchecked', tone: 'grey', needsFix: false, attention: false, known: false },
+    failed: { glyph: '!', label: 'look.failed', tone: 'grey', needsFix: false, attention: false, known: false },
+    outside: { glyph: '…', label: 'look.outside', tone: 'grey', needsFix: false, attention: false, known: false },
+};

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

@@ -0,0 +1,11 @@
+export function toggleSwitch(spec) {
+    return '<button type="button" class="sw' + (spec.on ? ' sw-on' : '') + '" role="switch" aria-checked="' + String(spec.on) + '"' +
+        (spec.disabled === true ? ' disabled' : '') + spec.attributes + '><span class="sw-knob" aria-hidden="true"></span></button>';
+}
+export const SWITCH_STYLE = String.raw `
+.sw{flex:none;width:56px;height:32px;border-radius:999px;border:none;padding:3px;cursor:pointer;background:var(--white-16);display:flex;justify-content:flex-start;transition:background .2s}
+.sw-on{background:var(--mint);justify-content:flex-end}
+.sw:disabled{cursor:default}
+.sw[aria-busy="true"]{opacity:.6;cursor:progress}
+.sw-knob{width:26px;height:26px;border-radius:50%;background:var(--white)}
+`;

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

@@ -0,0 +1,19 @@
+export function tag(label, tone, size = 'sm', outlined = false) {
+    return '<span class="tag tag-' + tone + ' tag-' + size + (outlined ? ' tag-outlined' : '') + '">' + (size === 'sm' ? '<span class="tag-dot" aria-hidden="true"></span>' : '') + label + '</span>';
+}
+export const TAG_STYLE = String.raw `
+.tag{display:inline-flex;align-items:center;gap:7px;font-weight:600;border-radius:999px;white-space:nowrap;border:1px solid transparent}
+.tag-sm{font-size:12.5px;padding:4px 11px}
+.tag-md{font-size:13px;padding:8px 14px}
+.tag-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
+.tag-coral{color:var(--coral-text);background:var(--coral-08);border-color:var(--coral-40)}
+.tag-mint{color:var(--mint);background:var(--mint-10)}
+.tag-md.tag-mint{background:var(--mint-12)}
+.tag-grey{color:var(--text-3);background:var(--white-04)}
+.tag-amber{color:var(--amber);background:var(--amber-12)}
+.tag-sand{color:var(--sand);background:var(--sand-16)}.tag-blue{color:var(--blue);background:var(--blue-16)}
+.tag-badge{font-size:12px;padding:2px 9px;border:0}
+.tag-badge.tag-outlined{border:1px solid var(--white-14)}
+.tag-outlined.tag-coral{border-color:var(--coral-35)}.tag-outlined.tag-mint{border-color:var(--mint-35)}.tag-outlined.tag-amber{border-color:var(--amber-35)}
+.tag-badge.tag-coral{background:var(--coral-12)}.tag-badge.tag-mint{background:var(--mint-12)}.tag-badge.tag-grey{color:var(--text-2);background:var(--white-06)}
+`;

package/dist/report/render/ui/task-list.js

@@ -0,0 +1,56 @@
+import { escapeHtml as e } from '../html-report-components.js';
+/** `head` is the three column names, already written in every language; a list of compact cards has none. */
+export function taskList(head, tasks) {
+    return (head === undefined ? '' :
+        '<div class="tl-head" aria-hidden="true"><span class="tl-file">' + head[0] + '</span><span>' + head[1] + '</span><span>' + head[2] + '</span></div>') +
+        '<ul class="tl">' + tasks.map(taskCard).join('') + '</ul>';
+}
+function taskCard(task) {
+    const compact = task.compact;
+    const chip = '<span class="tc-chip" title="' + e(task.path) + '">' + e(task.label ?? task.path) + '</span>';
+    if (compact !== undefined) {
+        return '<li class="tc tc-compact"' + (task.attributes ?? '') + '><div class="tc-row">' +
+            '<span class="tc-bar tc-bar-' + compact.bar + '" aria-hidden="true"></span>' +
+            '<a class="tc-link"' + compact.opens + compact.label + '></a>' +
+            '<span class="tc-text"><span class="tc-head"><span class="tc-title">' + task.title + '</span>' + (compact.tag ?? '') + '</span>' +
+            '<span class="tc-sub">' + chip + '<span class="tc-context">' + compact.context + '</span></span></span>' +
+            (task.details === undefined ? '' : '<span class="tc-details tc-over">' + task.details + '</span>') +
+            '<span class="tc-action">' + task.action + '</span><span class="tc-trail" aria-hidden="true">›</span></div></li>';
+    }
+    return '<li class="tc' + (task.done ? ' tc-done' : '') + '"' + (task.attributes ?? '') + '><div class="tc-row">' +
+        '<span class="tc-main"><span class="tc-check" aria-hidden="true">' + (task.done ? '✓' : '') + '</span>' +
+        '<span class="tc-text"><span class="tc-title">' + task.title + '</span>' + chip + '</span></span>' +
+        '<span class="tc-details">' + (task.details ?? '') + '</span><span class="tc-action">' + task.action + '</span></div></li>';
+}
+export const TASK_LIST_STYLE = String.raw `
+.tl-head,.tc-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 118px;column-gap:20px;align-items:center}
+.tl-head{padding:0 22px 8px;font-size:12.5px;font-weight:600;color:var(--text-3)}
+.tl-file{padding-left:40px}
+.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.tc{border-radius:14px;background:var(--card);border:1px solid var(--white-09);overflow:hidden}
+.tc-row{padding:18px 22px}
+.tc-main{min-width:0;display:flex;align-items:center;gap:16px}
+.tc-check{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--white-25);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--on-mint)}
+.tc-done .tc-check{border-color:var(--mint);background:var(--mint)}
+.tc-text{flex:1;min-width:0}
+.tc-title{display:block;font-size:16px;font-weight:600;line-height:1.35}
+.tc-done .tc-title{color:var(--text-3)}
+.tc-chip{display:inline-flex;font-family:var(--mono);font-size:14px;font-weight:500;color:var(--text);background:var(--white-07);border:1px solid var(--white-10);border-radius:6px;padding:3px 8px;margin-top:7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tc-details,.tc-action{display:flex}
+.tc-compact{position:relative;transition:border-color .15s}
+.tc-compact:hover{border-color:var(--white-25)}
+.tc-compact .tc-row{grid-auto-flow:column;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;column-gap:18px;padding:24px 20px 24px 24px}
+.tc-over{position:relative;z-index:2}
+.tc-bar{position:absolute;left:0;top:15%;height:70%;width:2px;border-radius:0 2px 2px 0}
+.tc-bar-coral{background:var(--coral)}.tc-bar-amber{background:var(--amber)}
+.tc-link{position:absolute;inset:0;z-index:1;border-radius:14px}
+.tc-link:focus-visible{outline-offset:-2px}
+.tc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.tc-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
+.tc-sub .tc-chip{margin-top:0}
+.tc-context{font-size:13.5px;color:var(--text-3);white-space:nowrap}
+.tc-trail{font-size:20px;color:var(--text-4)}
+@media (max-width:640px){.tl-head{display:none}.tc-row{grid-template-columns:1fr;row-gap:12px}.tc-details,.tc-action{padding-left:40px}
+.tc-compact .tc-row{grid-auto-flow:row;grid-template-columns:minmax(0,1fr) auto;padding:20px 18px 20px 20px}
+.tc-compact .tc-text{grid-column:1/-1}.tc-compact .tc-details,.tc-compact .tc-action{padding-left:0}.tc-trail{display:none}}
+`;