@agentwhy/cli 0.0.0-dev

package/dist/report/render/report-page/report-page-renderer.js

@@ -0,0 +1,129 @@
+import { escapeHtml as e } from '../html-report-components.js';
+import { CONTENT_SECURITY_POLICY_META, INDEX_CONTENT_SECURITY_POLICY_META } from '../html-head.js';
+import { inLanguages } from '../report-copy.js';
+import { appSidebar, APP_SIDEBAR_STYLE } from '../ui/app-sidebar.js';
+import { ASK_PANEL_SCRIPT, ASK_PANEL_STYLE } from '../ui/ask-panel.js';
+import { AVATAR_STYLE } from '../ui/avatar.js';
+import { DATA_TABLE_STYLE } from '../ui/data-table.js';
+import { LABELLED_SELECT_STYLE } from '../ui/labelled-select.js';
+import { STATUS_ICON_STYLE } from '../ui/status-icon.js';
+import { BUTTON_STYLE } from '../ui/button.js';
+import { CALLOUT_STYLE } from '../ui/callout.js';
+import { CHECKLIST_SCRIPT, CHECKLIST_STYLE } from '../ui/checklist.js';
+import { confirmDialog, CONFIRM_DIALOG_STYLE } from '../ui/confirm-dialog.js';
+import { DRAWER_STYLE } from '../ui/drawer.js';
+import { FILE_CHIP_SCRIPT, FILE_CHIP_STYLE } from '../ui/file-chip.js';
+import { FOLD_LINE_STYLE } from '../ui/fold-line.js';
+import { GUIDE_CARD_STYLE } from '../ui/guide-card.js';
+import { HERO_STYLE } from '../ui/hero.js';
+import { pageShell } from '../ui/page-shell.js';
+import { POPUP_SCRIPT, POPUP_STYLE } from '../ui/popup.js';
+import { PILL_TABS_SCRIPT, PILL_TABS_STYLE } from '../ui/pill-tabs.js';
+import { PROGRESS_STYLE } from '../ui/progress.js';
+import { STAT_STYLE } from '../ui/stats.js';
+import { TAG_STYLE } from '../ui/tag.js';
+import { TASK_LIST_STYLE } from '../ui/task-list.js';
+import { FIX_WIZARD_SCRIPT } from './fix-wizard-script.js';
+import { ADVANCED_SCRIPT, ADVANCED_VIEW_STYLE, advancedView } from './advanced-view.js';
+import { commandRow, fixWizard, FIX_WIZARD_STYLE } from './fix-wizard.js';
+import { savedInto } from './file-story.js';
+import { fileRows, onlyNamed } from './files.js';
+import { FILES_SCRIPT, FILES_VIEW_STYLE, fileWindows, filesView } from './files-view.js';
+import { helperDrawers, HELPERS_SCRIPT, HELPERS_VIEW_STYLE, helpersView } from './helpers-view.js';
+import { fileNames, nameOf } from './item-names.js';
+import { protectPatterns } from './protect-patterns.js';
+import { recordGaps, RECORD_VIEW_STYLE } from './record-view.js';
+import { storyWindow, STORY_WINDOW_STYLE } from './story-window.js';
+import { toDoItems } from './to-do.js';
+import { REPORT_VIEWS_SCRIPT, REPORT_VIEWS_STYLE } from './report-views.js';
+import { clockIn } from './times.js';
+import { toDoView, TO_DO_VIEW_STYLE } from './to-do-view.js';
+/**
+ * The report page, rebuilt on the UI kit (`specs/2026-09-23-the-report-page.md`; `.ai/plans/2026-09-23-report-redesign.md`).
+ * Built beside `HtmlReportRenderer`, which stays the page `report --html` and `start` write until every view is here
+ * (slice h). So far: the to-do list, the Fix it wizard (slice c), what happened to each file (slice d), Helpers
+ * (slice e), Files, with Protect it on any private file (slice f), and Advanced (slice g).
+ *
+ * Served by `start`, the page may reach the origin it came from and sends its marks and rules there (P43); written on
+ * its own it reaches nowhere, as every other page, and hands over the command instead. A shared copy does neither (P46).
+ */
+export class ReportPageRenderer {
+    render(page) {
+        const { report } = page;
+        const items = toDoItems(report);
+        const shared = report.scope.paths.shared;
+        const served = page.served === true && !shared;
+        const done = new Set(shared ? [] : items.map((item) => item.path).filter((path) => page.marks?.has(path) === true));
+        const rows = fileRows(report, items, done, page.denied);
+        // R5: every file the page names, so two of one name are told apart wherever either is named - its rows, and the files
+        // a story says a value was saved into, which need not be rows (found by a review). Every story the page tells is a row's.
+        const paths = rows.map((row) => row.path);
+        const names = fileNames([...paths, ...savedInto(report, paths)]);
+        // One Protect window per file, keyed by its row: the wizard, the table and a file's own window open the same one.
+        const protectKeys = new Map();
+        const patterns = new Map();
+        rows.forEach((row, key) => {
+            // A told file (F57) is the person's choice, and not a file to talk them out of from here: Settings switches it.
+            const found = row.protection !== 'yes' && row.protection !== 'told' ? protectPatterns(row.path, shared) : undefined;
+            if (found === undefined)
+                return;
+            protectKeys.set(row.path, key);
+            patterns.set(key, found);
+        });
+        const toldPaths = new Set(rows.filter((row) => row.protection === 'told').map((row) => row.path));
+        const protectedPaths = new Set(rows.filter((row) => row.protection === 'yes').map((row) => row.path));
+        const clock = clockIn(page.timeZone);
+        const nav = [
+            ...(page.withIndexLink ? [{ name: 'rp.nav.back', href: 'index.html' }] : []),
+            { name: 'rp.nav.todo', href: '#todo', active: true, count: items.length, countTone: 'coral' },
+            { name: 'rp.nav.files', href: '#files', count: rows.filter((row) => !onlyNamed(row)).length },
+            { name: 'rp.nav.helpers', href: '#helpers', count: report.graph.agents.length },
+            { name: 'rp.nav.advanced', href: '#advanced' },
+        ];
+        return pageShell({
+            title: 'rp.title',
+            policy: served ? INDEX_CONTENT_SECURITY_POLICY_META : CONTENT_SECURITY_POLICY_META,
+            styles: [APP_SIDEBAR_STYLE, BUTTON_STYLE, HERO_STYLE, GUIDE_CARD_STYLE, PROGRESS_STYLE, TAG_STYLE, TASK_LIST_STYLE, POPUP_STYLE,
+                CHECKLIST_STYLE, ASK_PANEL_STYLE, FILE_CHIP_STYLE, CONFIRM_DIALOG_STYLE, AVATAR_STYLE, PILL_TABS_STYLE, STAT_STYLE, TO_DO_VIEW_STYLE, FIX_WIZARD_STYLE,
+                STORY_WINDOW_STYLE, DRAWER_STYLE, FOLD_LINE_STYLE, HELPERS_VIEW_STYLE, DATA_TABLE_STYLE, LABELLED_SELECT_STYLE, STATUS_ICON_STYLE, FILES_VIEW_STYLE,
+                ADVANCED_VIEW_STYLE, CALLOUT_STYLE, RECORD_VIEW_STYLE, REPORT_VIEWS_STYLE],
+            scripts: [POPUP_SCRIPT, CHECKLIST_SCRIPT, ASK_PANEL_SCRIPT, FILE_CHIP_SCRIPT, PILL_TABS_SCRIPT, FIX_WIZARD_SCRIPT, HELPERS_SCRIPT, FILES_SCRIPT, ADVANCED_SCRIPT, REPORT_VIEWS_SCRIPT],
+            sidebar: appSidebar({ home: page.withIndexLink ? 'index.html' : '#todo', items: nav, showProject: false }),
+            main: '<section id="todo" data-view>' + toDoView(items, report, done, recordGaps(report).any, clock, rows, { back: page.withIndexLink, ...(page.title === undefined ? {} : { title: page.title }) }, names) + '</section>' +
+                '<section id="files" data-view>' + filesView(rows, items, protectKeys, names) + '</section>' +
+                '<section id="helpers" data-view>' + helpersView(report, items, names) + '</section>' +
+                '<section id="advanced" data-view>' + advancedView(report, items, done, clock, names) + '</section>' +
+                // Windows opened from more than one view live outside all of them (a hidden view hides what is in it).
+                helperDrawers(report, items, done, names) + fileWindows(rows, protectKeys, report, clock, names) +
+                items.map((item, at) => storyWindow(item, at, report, done.has(item.path), clock, names)).join('') +
+                items.map((_item, at) => fixWizard(items, at, { done, shared, protectKeys, protectedPaths, toldPaths, names })).join('') +
+                [...patterns].map(([key, found]) => protectWindow(rows[key], key, found, names)).join('') +
+                '<div id="wizard-words" data-served="' + served + '" hidden>' + ['wz.all', 'wz.finish', 'wz.saving', 'wz.tickFirst', 'wz.pickFirst']
+                .map((key) => '<span data-word="' + key + '">' + inLanguages((t) => t(key)) + '</span>').join('') + '</div>',
+        });
+    }
+}
+/**
+ * "Protect this file?" (P38, P38a-c): the file's own path, or every file of its name where the option is ticked. The
+ * page's script sends the rule served, and otherwise shows the `init --protect` command in the window (R61). For an
+ * everyday file it is "Make this file private?": the same rule, which is what adding a file in Settings writes.
+ */
+function protectWindow(row, at, patterns, names) {
+    const path = row.path;
+    // The option protects every file of its name, so it says the name alone; the chip says which file this is.
+    const name = e(nameOf(path));
+    const words = row.protection === 'na' ? 'mp' : 'pr';
+    return confirmDialog({
+        id: 'protect-' + at,
+        title: inLanguages((t) => t(words + '.title')),
+        subject: '<span class="tc-chip" title="' + e(path) + '">' + e(names(path)) + '</span>',
+        sentence: inLanguages((t) => t(words + '.sentence', { path: '<code>' + e(path) + '</code>' })),
+        option: '<label class="pr-option"><input type="checkbox" data-protect-every> ' + inLanguages((t) => t(words + '.option', { name: '<code>' + name + '</code>' })) + '</label>',
+        cancel: inLanguages((t) => t('app.cancel')),
+        confirm: inLanguages((t) => t(words + '.confirm')),
+        confirmAttributes: ' data-protect="' + at + '" data-pattern="' + e(patterns.exact) + '" data-pattern-every="' + e(patterns.every) + '"',
+        note: '<div class="cf-note" data-protect-note>' +
+            '<p class="wz-reason" data-note-reason role="alert" hidden></p>' +
+            '<div class="wz-handover" data-note-command hidden><p class="wz-handover-text">' + inLanguages((t) => t(words + '.cmd')) + '</p>' + commandRow() + '</div></div>',
+    });
+}

package/dist/report/render/report-page/report-views.js

@@ -0,0 +1,31 @@
+/**
+ * The report page's views (the report page spec P2, P45): one section per sidebar item. With a script the one the
+ * address names is shown - the first where it names none - and its sidebar item is the active one; with none, every
+ * view is on the page in sidebar order, and the sidebar's links go down to them.
+ *
+ * Only the report page has views today; it goes into the kit when a second page does (the plan's rule 2).
+ */
+export const REPORT_VIEWS_SCRIPT = String.raw `
+(() => {
+  const views = [...document.querySelectorAll('[data-view]')];
+  if (views.length === 0) return;
+  const links = [...document.querySelectorAll('.sb-nav a[href^="#"]')];
+  const pick = () => {
+    const wanted = views.find((view) => '#' + view.id === location.hash);
+    if (!wanted && views.some((view) => view.classList.contains('rv-on'))) return;
+    const view = wanted || views[0];
+    views.forEach((each) => each.classList.toggle('rv-on', each === view));
+    links.forEach((link) => {
+      const on = link.getAttribute('href') === '#' + view.id;
+      link.classList.toggle('sb-active', on);
+      if (on) link.setAttribute('aria-current', 'page'); else link.removeAttribute('aria-current');
+    });
+  };
+  pick();
+  window.addEventListener('hashchange', () => { pick(); window.scrollTo(0, 0); });
+})();
+`;
+export const REPORT_VIEWS_STYLE = String.raw `
+.js [data-view]:not(.rv-on){display:none}
+html:not(.js) [data-view]+[data-view]{margin-top:72px;padding-top:40px;border-top:1px solid var(--white-07)}
+`;

package/dist/report/render/report-page/story-window.js

@@ -0,0 +1,356 @@
+import { escapeHtml as e } from '../html-report-components.js';
+import { inLanguages, labelAttributes } from '../report-copy.js';
+import { avatar } from '../ui/avatar.js';
+import { closeButton, pill } from '../ui/button.js';
+import { pillTabs } from '../ui/pill-tabs.js';
+import { CLOSES, opener, popup, popupFoot } from '../ui/popup.js';
+import { stats } from '../ui/stats.js';
+import { tag } from '../ui/tag.js';
+import { fileStory } from './file-story.js';
+import { nameOf, ruleKey, titleOf } from './item-names.js';
+import { fixId, storyId } from './to-do-view.js';
+/**
+ * "What happened to this file" (the report page spec P12-P17; design file *agentwhy App*): the story in sentences, the
+ * same facts as a diagram, and the full record for a developer. Every sentence is chosen from `fileStory`'s kinds; a
+ * helper's job is quoted as what it was asked, and nothing is said about what the file holds (F51).
+ *
+ * The record has no time column yet: times are M4, their own slice. Order is the record's order, as it always is.
+ */
+export function storyWindow(item, at, report, done, clock, names) {
+    return storyWindowOf(fileStory(report, item.path), item, at, report.scope.sessionId, done, clock, { names });
+}
+/** The same window from a story already told: a page that holds no session's model (To fix) is handed its story. */
+export function storyWindowOf(story, item, at, sessionId, done, clock, extras = {}) {
+    const label = (key) => inLanguages((t) => t(key));
+    return storyPopup(story, {
+        path: item.path,
+        keys: item.kind === 'keys',
+        title: inLanguages((t, lang) => titleOf(item, t, lang)),
+        ...(item.pattern === undefined ? {} : { pattern: item.pattern }),
+        exposed: true,
+    }, storyId(at), sessionId, clock, extras, 
+    // Wrapped, so `hidden` is not beaten by a pill's own `display`; the wizard's script swaps the two once the file is done.
+    '<span data-story-fix="' + at + '"' + (done ? ' hidden' : '') + '>' + pill({ label: label('rp.fix'), tone: 'primary', size: 'md', href: '#' + fixId(at), attributes: opener(fixId(at)) }) + '</span>' +
+        '<span data-story-fixed="' + at + '"' + (done ? '' : ' hidden') + '>' + tag(label('rp.fixed'), 'mint', 'md') + '</span>');
+}
+/** The window, whoever it is for: the head, the three tabs and the foot, with what the page puts beside Close. */
+export function storyPopup(story, subject, id, sessionId, clock, extras, action) {
+    const label = (key, vars = {}) => inLanguages((t) => t(key, vars));
+    const names = extras.names ?? nameOf;
+    const head = '<div class="sw-head">' +
+        '<div class="sw-top"><span class="sw-id"><span class="sw-chip" title="' + e(subject.path) + '">' + e(names(subject.path)) + '</span>' +
+        '<span class="sw-kind">' + subject.title + '</span></span>' +
+        closeButton(labelAttributes((t) => t('app.close')) + CLOSES) + '</div>' +
+        '<h2 class="sw-h2" id="' + id + '-title">' + label('st.heading') + '</h2>' +
+        '<p class="sw-summary">' + (subject.summary ?? summaryOf(story, subject.keys)) + '</p>' +
+        (extras.context === undefined ? '' : '<p class="sw-context">' + extras.context + '</p>') + '</div>';
+    const body = '<div class="sw-body">' + pillTabs([
+        { label: label('st.tab.story'), panel: storyPanel(story, subject.keys, clock, subject.exposed, names) },
+        { label: label('st.tab.diagram'), panel: diagramPanel(story, subject, names) },
+        { label: label('st.tab.record'), panel: recordPanel(story, subject, sessionId, clock, names) },
+        ...(extras.tabs ?? []),
+    ], 'inset') + '</div>';
+    const foot = popupFoot(label('st.foot'), pill({ label: label('app.close'), tone: 'outline', size: 'md', button: true, attributes: CLOSES }) + action);
+    return popup({ id, size: 'wide', labelledBy: id + '-title', body: head + body + foot });
+}
+/** P12: who read it, and that a copy went on to the company - one sentence, from the readers the story counted. */
+function summaryOf(story, keys) {
+    const only = story.holders.filter((holder) => holder.read);
+    if (only.length === 0)
+        return inLanguages((t) => t('st.summary.reached'));
+    if (only.length === 1 && only[0]?.agent.ordinal !== undefined)
+        return inLanguages((t) => t(keys ? 'st.summary.keysHelper' : 'st.summary.dataHelper'));
+    return inLanguages((t) => t(keys ? 'st.summary.keys' : 'st.summary.data', { n: only.length }));
+}
+/** Your AI, or "Helper 6". */
+function whoOf(agent, t) {
+    return agent.ordinal === undefined ? t('st.main') : t('st.helper', { ordinal: agent.ordinal });
+}
+function initialsOf(agent) {
+    return agent.ordinal === undefined ? 'AI' : 'H' + agent.ordinal;
+}
+/** P14: an entry's line and the line under it, from its kind; the sentence under a helper's first entry is its job. */
+function sentences(entries, keys, names) {
+    const readers = new Set();
+    const seen = new Set();
+    return entries.map((entry) => {
+        const first = !seen.has(entry.agent.index);
+        seen.add(entry.agent.index);
+        const did = (t) => entry.did === undefined ? '' : t('st.sub.didTimes', { n: entry.count, did: '<code>' + e(entry.did) + '</code>' });
+        const job = (t) => entry.agent.askedTo === undefined ? t('st.sub.notAsked') : t('st.sub.asked', { task: e(entry.agent.askedTo) });
+        const helperFirst = first && entry.agent.ordinal !== undefined;
+        switch (entry.kind) {
+            case 'read': {
+                const again = readers.has(entry.agent.index);
+                const earlier = readers.size > 0;
+                readers.add(entry.agent.index);
+                const kind = keys ? 'keys' : 'data';
+                // X10: text its own code handed back is read, but no file was opened by it, so it is never said so.
+                const title = entry.inResult === true ? 'st.e.inResult.' + kind
+                    : again ? 'st.e.again' : entry.agent.ordinal !== undefined ? (earlier ? 'st.e.helperReadToo.' : 'st.e.helperRead.') + kind
+                        : entry.received === true ? 'st.e.received.' + kind : 'st.e.read.' + kind;
+                if (entry.received === true)
+                    return { title: (t) => t(title), sub: helperFirst ? job : (t) => t('st.sub.received') };
+                const inResult = (t) => t('st.sub.inResult', { did: entry.did === undefined ? '' : '<code>' + e(entry.did) + '</code>' });
+                // search-hits-are-reads H8: how it was read, where a search printed its lines - and still that nothing asked for it.
+                const lines = (t) => t(entry.inResult === true ? 'st.sub.inResultLines' : 'st.sub.lines', { n: entry.lines ?? 0, did: entry.did === undefined ? '' : '<code>' + e(entry.did) + '</code>' });
+                return { title: (t) => t(title), sub: helperFirst ? job : entry.lines !== undefined ? lines : entry.inResult === true ? inResult : did };
+            }
+            case 'named': return { title: (t) => t('st.e.named'), sub: helperFirst ? job : did };
+            case 'unknown': return { title: (t) => t('st.e.unknown'), sub: helperFirst ? job : (t) => t('st.sub.unknown') };
+            case 'stopped': return { title: (t) => t('st.e.stopped'), sub: helperFirst ? job : did };
+            case 'passed': return {
+                title: (t) => t('st.e.passed', { to: entry.to === undefined || entry.to.ordinal === undefined ? t('st.mainLower') : t('st.helper', { ordinal: entry.to.ordinal }) }),
+                sub: (t) => t('st.sub.passed'),
+            };
+            case 'saved': return {
+                title: (t) => t('st.e.saved'),
+                sub: (t) => entry.into === undefined ? t('st.sub.savedAny') : t('st.sub.saved', { files: entry.into.map((file) => '<code>' + e(names(file)) + '</code>').join(', ') }),
+            };
+            case 'handed': return { title: (t) => t('st.e.handed'), sub: (t) => t('st.sub.handed') };
+            case 'repeated': return { title: (t) => t('st.e.repeated'), sub: (t) => t('st.sub.repeated') };
+            case 'used': return {
+                title: (t) => t('st.e.used'),
+                sub: (t) => entry.into === undefined ? t('st.sub.usedAny') : t('st.sub.used', { programs: entry.into.map((program) => '<code>' + e(program) + '</code>').join(', ') }),
+            };
+        }
+    });
+}
+/**
+ * P13: one entry per record that named the file, then the AI company - whose line never says what it keeps (F24) - where
+ * its contents reached an AI at all.
+ */
+function storyPanel(story, keys, clock, exposed, names) {
+    const lines = sentences(story.entries, keys, names);
+    // P13, M4: each entry's time beside it where the record has one; the entries stay in the record's order either way.
+    const timed = story.entries.some((each) => each.at !== undefined);
+    const entry = (avatarHtml, who, title, sub, last, alert, at) => '<li class="sw-ev' + (alert ? ' sw-ev-alert' : '') + (timed ? ' sw-timed' : '') + '">' +
+        (timed ? '<span class="sw-time">' + (at === undefined ? '' : e(clock.time(at))) + '</span>' : '') +
+        '<div class="sw-rail">' + avatarHtml + (last ? '' : '<span class="sw-line"></span>') + '</div>' +
+        '<div class="sw-ev-body"><div class="sw-who">' + who + '</div><div class="sw-ev-title">' + title + '</div>' +
+        (sub === '' ? '' : '<div class="sw-ev-sub">' + sub + '</div>') + '</div></li>';
+    return '<ol class="sw-story">' +
+        story.entries.map((each, at) => entry(avatar(initialsOf(each.agent), each.agent.ordinal === undefined ? 'coral' : 'grey', 40), inLanguages((t) => whoOf(each.agent, t)), inLanguages((t) => lines[at]?.title(t) ?? ''), inLanguages((t) => lines[at]?.sub(t) ?? ''), !exposed && at === story.entries.length - 1, false, each.at)).join('') +
+        (exposed ? entry(avatar('↗', 'alert', 40), inLanguages((t) => t('st.company')), inLanguages((t) => t('st.e.company')), inLanguages((t) => t('st.sub.company')), true, true) : '') +
+        '</ol>';
+}
+/** What a node of the diagram says it did: "read the keys · 2×", "passed it back". */
+function didOf(holder, story, keys) {
+    const reads = story.entries.filter((entry) => entry.agent.index === holder.agent.index && entry.kind === 'read').reduce((sum, entry) => sum + entry.count, 0);
+    const named = story.entries.some((entry) => entry.agent.index === holder.agent.index && entry.kind === 'named');
+    return inLanguages((t) => [
+        ...(holder.read ? [t(keys ? 'st.d.readKeys' : 'st.d.readIt') + (reads > 1 ? ' · ' + t('st.d.times', { n: reads }) : '')] : []),
+        ...(!holder.read && named ? [t('st.d.named')] : []),
+        ...(holder.passed ? [t('st.d.passed')] : []),
+        ...(holder.saved ? [t('st.d.saved')] : []),
+        ...(holder.stopped ? [t('st.d.stopped')] : []),
+    ].join(' · '));
+}
+/** How an AI's line reaches the file: read beats stopped beats only its name; none where it only passed something on. */
+function reachOf(holder, story) {
+    if (holder.read)
+        return 'read';
+    if (holder.stopped)
+        return 'stopped';
+    return story.entries.some((entry) => entry.agent.index === holder.agent.index && entry.kind === 'named') ? 'named' : undefined;
+}
+const NODE_HEIGHT = 64;
+const ROW = 84;
+const TOP = 64;
+const GAP = 60;
+/**
+ * P15: You → your AI → the helpers in the story → the file → the company, in the Helpers diagram's look (P29): boxes
+ * with an icon and connector dots on a dotted board, curves between them, one colour per kind of line. What each one
+ * did is its box's second line, so no label sits on a line or over a box. The Helpers script dims what a hovered box is
+ * not joined to.
+ */
+function diagramPanel(story, subject, names) {
+    const { keys, exposed } = subject;
+    const main = story.holders.find((holder) => holder.agent.ordinal === undefined);
+    const helpers = story.holders.filter((holder) => holder.agent.ordinal !== undefined);
+    // Where nothing was read, the file is the last box: nothing went on to the company.
+    const widths = (helpers.length === 0 ? [190, 240, 240, 240] : [170, 200, 210, 250, 220]).slice(0, exposed ? undefined : -1);
+    const xs = widths.reduce((all, width, at) => [...all, at === 0 ? 24 : all[at - 1] + widths[at - 1] + GAP], []);
+    const column = (at) => ({ x: xs[at], w: widths[at] });
+    const [you, ai] = [column(0), column(1)];
+    const help = helpers.length === 0 ? undefined : column(2);
+    const file = column(help === undefined ? 2 : 3);
+    const company = exposed ? column(help === undefined ? 3 : 4) : undefined;
+    const width = (company ?? file).x + (company ?? file).w + 24;
+    // The file's row runs straight through. Where your AI has a line of its own to the file, the helpers hang below that
+    // row, so no box stands on it; where it has none, the first helper stands on the row, and the chain from you to the
+    // company is one straight line rather than a dip down to a helper and back up to the file.
+    const mainReach = main === undefined ? undefined : reachOf(main, story);
+    const below = mainReach === undefined ? 0 : 1;
+    const height = TOP + Math.max(1, below + helpers.length) * ROW + 8;
+    const middle = TOP;
+    const across = (units) => Number((units / width * 100).toFixed(3)) + '%';
+    const box = (node, icon, tone, label, sub, extra = '') => '<span class="hd-node sd-node' + extra + '" tabindex="0" data-node="' + node.id + '" style="left:' + across(node.x) + ';top:' + node.y + 'px;width:' + across(node.w) + '">' +
+        (node.first === true ? '' : '<span class="hd-port hd-in"></span>') + (node.last === true ? '' : '<span class="hd-port hd-out"></span>') +
+        '<span class="hd-icon hd-icon-' + tone + '">' + icon + '</span>' +
+        '<span class="hd-text"><span class="hd-label">' + label + '</span>' + (sub === '' ? '' : '<span class="hd-sub">' + sub + '</span>') + '</span></span>';
+    const toneOf = (reach) => reach === 'read' ? 'coral' : reach === 'stopped' ? 'mint' : 'grey';
+    const nodes = [
+        { id: 'you', ...you, y: middle, first: true },
+        { id: 'a0', ...ai, y: middle },
+        ...helpers.map((holder, row) => ({ id: 'h' + holder.agent.index, x: help.x, w: help.w, y: TOP + (row + below) * ROW })),
+        { id: 'file', ...file, y: middle, ...(company === undefined ? { last: true } : {}) },
+        ...(company === undefined ? [] : [{ id: 'company', ...company, y: middle, last: true }]),
+    ];
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const idOf = (holder) => holder.agent.ordinal === undefined ? 'a0' : 'h' + holder.agent.index;
+    const parentOf = (holder) => {
+        const by = holder.agent.broughtBy;
+        const parent = by === undefined || by === 'main' ? undefined : helpers.find((each) => each.agent.ordinal === by);
+        return parent === undefined ? 'a0' : idOf(parent);
+    };
+    const edges = [
+        { from: 'you', to: 'a0', kind: 'work' },
+        ...helpers.map((holder) => ({ from: parentOf(holder), to: idOf(holder), kind: 'work' })),
+        ...[...(main === undefined ? [] : [main]), ...helpers].flatMap((holder) => {
+            const reach = reachOf(holder, story);
+            return reach === undefined ? [] : [{ from: idOf(holder), to: 'file', kind: reach }];
+        }),
+        ...(exposed ? [{ from: 'file', to: 'company', kind: 'read' }] : []),
+    ];
+    const centre = (node) => node.y + NODE_HEIGHT / 2;
+    const path = (from, to) => {
+        // A helper brought in by another helper stands in the same column: its line bows out to the left, clear of both boxes.
+        if (from.x === to.x)
+            return 'M' + from.x + ',' + centre(from) + ' C' + (from.x - 40) + ',' + centre(from) + ' ' + (to.x - 40) + ',' + centre(to) + ' ' + to.x + ',' + centre(to);
+        const [x1, y1, x2, y2] = [from.x + from.w, centre(from), to.x, centre(to)];
+        const d = (x2 - x1) / 2;
+        return 'M' + x1 + ',' + y1 + ' C' + (x1 + d) + ',' + y1 + ' ' + (x2 - d) + ',' + y2 + ' ' + x2 + ',' + y2;
+    };
+    const lines = edges.flatMap((edge) => {
+        const from = byId.get(edge.from);
+        const to = byId.get(edge.to);
+        return from === undefined || to === undefined ? [] : ['<path class="hd-edge hd-' + edge.kind + '" data-from="' + edge.from + '" data-to="' + edge.to + '" d="' + path(from, to) + '"/>'];
+    });
+    const kinds = new Set(edges.map((edge) => edge.kind));
+    const key = (kind, words) => kinds.has(kind) ? '<span><span class="hd-key hd-key-' + kind + '"></span>' + inLanguages((t) => t(words)) + '</span>' : '';
+    const legend = '<div class="hd-legend">' + key('read', 'st.d.legendRead') + key('named', 'hp.key.named') + key('stopped', 'hp.key.stopped') + key('work', 'st.d.legendWork') + '</div>';
+    const at = (id) => byId.get(id);
+    const boxes = box(at('you'), 'You', 'you', inLanguages((t) => t('st.you')), inLanguages((t) => t('st.d.asked'))) +
+        box(at('a0'), 'AI', toneOf(mainReach), inLanguages((t) => t('st.main')), main === undefined ? '' : didOf(main, story, keys), mainReach === 'read' ? ' hd-risk' : '') +
+        helpers.map((holder) => {
+            const reach = reachOf(holder, story);
+            return box(at(idOf(holder)), initialsOf(holder.agent), toneOf(reach), inLanguages((t) => whoOf(holder.agent, t)), didOf(holder, story, keys), reach === 'read' ? ' hd-risk' : '');
+        }).join('') +
+        (exposed || subject.look === undefined
+            ? box(at('file'), '!', 'coral', '<span class="hd-mono">' + e(names(subject.path)) + '</span>', inLanguages((t) => t('st.d.file')), ' hd-risk')
+            : box(at('file'), subject.look.glyph, subject.look.tone, '<span class="hd-mono">' + e(names(subject.path)) + '</span>', inLanguages((t) => t('st.d.file')))) +
+        (company === undefined ? '' : box(at('company'), '↗', 'company', inLanguages((t) => t('st.company')), inLanguages((t) => t('st.d.company')), ' sd-company'));
+    return '<div class="hd-scroll sd-diagram"><div class="hd-board" data-diagram style="min-width:' + Math.round(width * 0.8) + 'px;height:' + height + 'px">' +
+        '<svg class="hd-lines" viewBox="0 0 ' + width + ' ' + height + '" preserveAspectRatio="none" aria-hidden="true">' + lines.join('') + '</svg>' +
+        legend + boxes + '</div></div>' +
+        '<p class="hd-hint js-only">' + inLanguages((t) => t('st.d.hint')) + '</p>';
+}
+/** P16: the numbers, every record in order, what each AI did, and the file's details - for a developer. */
+function recordPanel(story, subject, sessionId, clock, names) {
+    const label = (key, vars = {}) => inLanguages((t) => t(key, vars));
+    const lines = sentences(story.entries, subject.keys, names);
+    const numbers = stats([
+        { label: label('st.stat.opened'), value: String(story.opened) },
+        { label: label('st.stat.readers'), value: String(story.readers), tone: 'coral' },
+        { label: label('st.stat.stopped'), value: String(story.stopped) },
+        { label: label('st.stat.record'), value: label(story.complete ? 'st.complete' : 'st.gaps'), ...(story.complete ? { tone: 'mint' } : {}) },
+    ], 'record');
+    const heading = (title, note) => '<div class="sw-rec-head"><span class="sw-rec-title">' + title + '</span><span class="sw-rec-note">' + note + '</span></div>';
+    const cells = (values) => values.map((value) => '<span>' + value + '</span>').join('');
+    // P16, M4: a Time column where the record has times, and the note that says what they are.
+    const timed = story.entries.some((entry) => entry.at !== undefined);
+    const every = heading(label('st.rec.every'), label('st.rec.count', { n: story.entries.length })) +
+        (timed ? '<p class="sw-times-note">' + label('st.rec.timesNote') + '</p>' : '') +
+        '<div class="sw-table"><div class="sw-grid sw-grid-every' + (timed ? ' sw-grid-timed' : '') + ' sw-grid-head">' +
+        cells(['st.col.n', ...(timed ? ['st.col.time'] : []), 'st.col.who', 'st.col.what', 'st.col.tool', 'st.col.result', 'st.col.evidence'].map((key) => label(key))) + '</div>' +
+        story.entries.map((entry, at) => '<div class="sw-grid sw-grid-every' + (timed ? ' sw-grid-timed' : '') + '">' +
+            '<span class="sw-mono sw-dim">' + (at + 1) + '</span>' +
+            (timed ? '<span class="sw-mono">' + (entry.at === undefined ? '<span class="sw-dim">—</span>' : e(clock.time(entry.at))) + '</span>' : '') +
+            '<span class="sw-who-cell"><span class="sw-dot' + (entry.agent.ordinal === undefined ? '' : ' sw-dot-grey') + '"></span>' + inLanguages((t) => whoOf(entry.agent, t)) + '</span>' +
+            '<span>' + inLanguages((t) => lines[at]?.title(t) ?? '') + '</span>' +
+            '<span>' + (entry.did === undefined ? '<span class="sw-dim">—</span>' : '<span class="sw-tool">' + e(entry.did) + '</span>') + '</span>' +
+            '<span>' + tag(label('st.res.' + entry.outcome), entry.outcome === 'succeeded' ? 'mint' : entry.outcome === 'blocked' ? 'grey' : 'coral', 'sm') + '</span>' +
+            '<span class="sw-mono sw-dim">' + entry.evidence.map((one) => e(one)).join(' – ') + '</span></div>').join('') +
+        '</div>';
+    const yes = (on) => '<span class="sw-yn' + (on ? ' sw-yes' : '') + '">' + label(on ? 'st.yes' : 'st.no') + '</span>';
+    const roleOf = (agent, t) => agent.ordinal === undefined ? t('st.role.main')
+        : agent.broughtBy === undefined ? t('st.role.helperAny')
+            : t('st.role.helper', { who: agent.broughtBy === 'main' ? t('st.mainLower') : t('st.helper', { ordinal: agent.broughtBy }) });
+    const each = heading(label('st.rec.each'), label('st.rec.yes')) +
+        '<div class="sw-table"><div class="sw-grid sw-grid-each sw-grid-head">' +
+        cells(['st.col.who', 'st.col.role', 'st.col.read', 'st.col.passed', 'st.col.saved', 'st.col.repeated', 'st.col.used', 'st.col.actions'].map((key) => label(key))) + '</div>' +
+        story.holders.map((holder) => '<div class="sw-grid sw-grid-each">' +
+            '<span class="sw-strong">' + inLanguages((t) => whoOf(holder.agent, t)) + '</span>' +
+            '<span class="sw-dim">' + inLanguages((t) => roleOf(holder.agent, t)) + '</span>' +
+            [holder.read, holder.passed, holder.saved, holder.repeated, holder.used].map((on) => '<span>' + yes(on) + '</span>').join('') +
+            '<span class="sw-mono">' + holder.agent.actions + '</span></div>').join('') +
+        '</div>';
+    const rule = ruleKey(subject.pattern);
+    const fact = (key, value, mono) => '<div class="sw-fact"><span class="sw-fact-key">' + label(key) + '</span><span class="sw-fact-value' + (mono ? ' sw-mono' : '') + '">' + value + '</span></div>';
+    const details = '<div class="sw-rec-title sw-rec-alone">' + label('st.rec.details') + '</div><div class="sw-facts">' +
+        fact('st.fact.path', e(subject.path), true) +
+        fact('st.fact.rule', subject.pattern === undefined ? '—' : e(subject.pattern), true) +
+        fact('st.fact.why', label(rule === undefined ? 'st.why.other' : rule.replace('rule.', 'st.why.')), false) +
+        fact('st.fact.session', e(sessionId), true) +
+        fact('st.fact.complete', label(story.complete ? 'st.complete.yes' : 'st.complete.no'), false) +
+        '</div>';
+    return numbers + every + each + details;
+}
+export const STORY_WINDOW_STYLE = String.raw `
+.sw-head{padding:26px 32px 0}
+.sw-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
+.sw-id{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.sw-chip{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}
+.sw-kind{font-size:14px;color:var(--text-2)}
+.sw-h2{margin:0 0 6px;font-size:32px;line-height:1.15;letter-spacing:-0.02em;font-weight:650;text-wrap:balance}
+.sw-summary{margin:0 0 22px;font-size:16px;line-height:1.5;color:var(--text-2)}
+.sw-context{margin:-12px 0 22px;font-size:14px;line-height:1.5;color:var(--text-3)}
+.sw-body{padding:0 32px 30px}
+.sw-body>.tabs>.tabs-bar{margin-left:auto;margin-right:auto}
+.sw-story{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;max-width:720px}
+.sw-ev{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px}
+.sw-ev.sw-timed{grid-template-columns:64px 40px minmax(0,1fr)}
+.sw-time{font-family:var(--mono);font-size:12.5px;color:var(--text-3);padding-top:11px;text-align:right}
+.sw-times-note{margin:-4px 0 12px;font-size:13px;color:var(--text-3)}
+.sw-grid-every.sw-grid-timed{grid-template-columns:44px 84px 130px minmax(0,1.5fr) minmax(0,1.2fr) 120px 180px;min-width:980px}
+@media (max-width:640px){.sw-ev.sw-timed{grid-template-columns:52px 40px minmax(0,1fr);gap:10px}}
+.sw-rail{display:flex;flex-direction:column;align-items:center}
+.sw-line{flex:1;width:1.5px;background:var(--coral-30);margin:4px 0}
+.sw-ev-body{padding:2px 0 22px}
+.sw-who{font-size:13px;font-weight:600;color:var(--text-3);margin-bottom:3px}.sw-ev-alert .sw-who{color:var(--coral-text)}
+.sw-ev-title{font-size:16px;font-weight:600;line-height:1.4}
+.sw-ev-sub{font-size:14.5px;line-height:1.5;color:var(--text-2);margin-top:3px;text-wrap:pretty}
+.sw-ev-sub code{font-family:var(--mono);font-size:13.5px;color:var(--text)}
+.sd-diagram .hd-node{height:64px;cursor:default;transition:opacity .15s,border-color .15s,transform .15s,box-shadow .15s}
+.sd-diagram .hd-node:hover,.sd-diagram .hd-node:focus-visible{border-color:var(--white-40);transform:translateY(-1px);box-shadow:0 10px 26px var(--node-shadow);outline:none}
+.sd-diagram .hd-risk:hover,.sd-diagram .hd-risk:focus-visible{border-color:var(--coral)}
+.sd-diagram .hd-sub{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}
+.sd-company{background:var(--coral-12);border-color:var(--coral)}
+.sd-diagram .hd-icon-amber{background:var(--amber-16);color:var(--amber)}
+.sd-diagram .hd-icon-sand{background:var(--sand-16);color:var(--sand)}.sd-diagram .hd-icon-blue{background:var(--blue-16);color:var(--blue)}
+.sd-company .hd-label{color:var(--coral-text)}.sd-company .hd-sub{color:var(--text-soft)}
+.hd-icon-company{background:var(--coral);color:var(--on-coral)}
+.sw-rec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
+.sw-rec-title{font-size:16px;font-weight:650}.sw-rec-alone{margin-bottom:12px}
+.sw-rec-note{font-size:13px;color:var(--text-3)}
+.sw-table{border-radius:14px;border:1px solid var(--white-09);overflow:auto;margin-bottom:32px}
+.sw-grid{display:grid;gap:16px;padding:15px 18px;border-bottom:1px solid var(--white-06);align-items:center;font-size:14.5px}
+.sw-grid:last-child{border-bottom:none}
+.sw-grid-head{padding:12px 18px;background:var(--panel);font-size:12.5px;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--white-08)}
+.sw-grid-every{grid-template-columns:44px 130px minmax(0,1.5fr) minmax(0,1.2fr) 120px 180px;min-width:900px}
+.sw-grid-each{grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) repeat(5,110px) 90px;min-width:1000px}
+.sw-mono{font-family:var(--mono);font-size:13px}
+.sw-dim{color:var(--text-3)}
+.sw-strong{font-size:15px;font-weight:600}
+.sw-who-cell{display:flex;align-items:center;gap:8px;font-weight:600}
+.sw-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}.sw-dot-grey{background:var(--white-35)}
+.sw-tool{font-family:var(--mono);font-size:13px;color:var(--text);background:var(--white-07);border:1px solid var(--white-10);border-radius:6px;padding:3px 8px}
+.sw-yn{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;color:var(--text-2);background:var(--white-07)}
+.sw-yes{color:var(--on-coral);background:var(--coral)}
+.sw-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));border-radius:14px;border:1px solid var(--white-09);overflow:hidden}
+.sw-fact{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:14px 18px;border-bottom:1px solid var(--white-06);border-right:1px solid var(--white-06);align-items:baseline}
+.sw-fact-key{font-size:13.5px;color:var(--text-3)}
+.sw-fact-value{font-size:14px;color:var(--text);word-break:break-all}
+@media (max-width:640px){.sw-head{padding:22px 20px 0}.sw-body{padding:0 20px 24px}.sw-h2{font-size:26px}}
+`;

package/dist/report/render/report-page/times.js

@@ -0,0 +1,25 @@
+const LOCALES = { en: 'en-GB', pl: 'pl-PL', de: 'de-DE' };
+export function clockIn(zone) {
+    const known = (candidate) => {
+        if (candidate === undefined)
+            return 'UTC';
+        try {
+            new Intl.DateTimeFormat('en-GB', { timeZone: candidate });
+            return candidate;
+        }
+        catch {
+            return 'UTC';
+        }
+    };
+    const timeZone = known(zone);
+    const time = new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23', timeZone });
+    const days = new Map();
+    return {
+        time: (epoch) => time.format(new Date(epoch)),
+        day: (epoch, lang) => {
+            const format = days.get(lang) ?? new Intl.DateTimeFormat(LOCALES[lang], { weekday: 'long', day: 'numeric', month: 'long', timeZone });
+            days.set(lang, format);
+            return format.format(new Date(epoch));
+        },
+    };
+}